diff --git a/src/components/FeaturesNavs.astro b/src/components/FeaturesNavs.astro
new file mode 100644
index 0000000..ca07b0c
--- /dev/null
+++ b/src/components/FeaturesNavs.astro
@@ -0,0 +1,132 @@
+---
+import TabNav from "./ui/blocks/TabNav.astro";
+import TabContent from "./ui/blocks/TabContent.astro";
+import { Image } from "astro:assets";
+import construction from "../images/construction-image.avif";
+import tools from "../images/automated-tools.avif";
+import dashboard from "../images/dashboard-image.avif";
+
+/* `title` variable used to customise the heading. */
+const title: string = `Customize ScrewFast's offerings to perfectly suit your hardware and construction needs.`;
+
+/*
+ In the above, the title attribute is a variable part of the FeaturesNavs component.
+*/
+---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/ui/blocks/TabContent.astro b/src/components/ui/blocks/TabContent.astro
new file mode 100644
index 0000000..2d37967
--- /dev/null
+++ b/src/components/ui/blocks/TabContent.astro
@@ -0,0 +1,39 @@
+---
+import { Image } from "astro:assets";
+
+const { id, aria, src, alt, first, second } = Astro.props;
+
+interface Props {
+ id: string;
+ aria: string;
+ src?: any;
+ alt: string;
+ first?: boolean;
+ second?: boolean;
+}
+
+/*
+first: This prop should be set to true for the initial TabContent component in your list to ensure that it's visible when the page first loads. All subsequent TabContent components should omit this prop or set it to false.
+
+second: This prop allows to control changes in the look of the Image. If it is set to true, the Image will have different aspect ratio and background color. If this prop is not provided or is set to false, the Image will use default styling. You can enable this for any TabContent component you want to apply these changes to.
+
+Example:
+
+
+
+*/
+---
+
+
+
+
diff --git a/src/components/ui/blocks/TabNav.astro b/src/components/ui/blocks/TabNav.astro
new file mode 100644
index 0000000..0469076
--- /dev/null
+++ b/src/components/ui/blocks/TabNav.astro
@@ -0,0 +1,44 @@
+---
+const { aria, dataTab, id, heading, paragraph, first } = Astro.props;
+
+interface Props {
+ dataTab: string;
+ id: string;
+ aria: string;
+ heading?: string;
+ paragraph?: string;
+ first?: boolean;
+}
+
+/*
+first: This prop should be set to true for the initial TabNav component in your list to ensure that it's visible when the page first loads. All subsequent TabNav components should omit this prop or set it to false.
+
+Example:
+
+
+
+*/
+---
+
+