diff --git a/src/index.js b/src/index.js
index f6cfe047..b223d4de 100644
--- a/src/index.js
+++ b/src/index.js
@@ -50,6 +50,9 @@ const ResourcesHome = lazy(
 );
 const Resource = lazy(() => import("./pages/resource/Resource"));
 const MastercraftLayout = lazy(() => import("./pages/MastercraftLayout"));
+const MastercraftSearch = lazy(
+  () => import("./pages/resources-home/search/MastercraftSearch")
+);
 const Homepage = lazy(() => import("./pages/shop/Homepage"));
 const Checkout = lazy(() => import("./pages/shop/OrderSummaryPage"));
 const ProductDisplay = lazy(() => import("./pages/shop/ProductDisplayPage"));
@@ -108,6 +111,7 @@ export {
   ResourcesHome,
   MastercraftHome,
   MastercraftLayout,
+  MastercraftSearch,
   ShopDashboard,
   ShopSales,
   SignUp,
diff --git a/src/pages/resources-home/search/MastercraftSearch.jsx b/src/pages/resources-home/search/MastercraftSearch.jsx
new file mode 100644
index 00000000..1fcc1ebd
--- /dev/null
+++ b/src/pages/resources-home/search/MastercraftSearch.jsx
@@ -0,0 +1,115 @@
+import { Search } from "lucide-react";
+import { useState } from "react";
+import { cn } from "../../../utilities/utils";
+import ResourceCard from "../sections/ResourceCard";
+
+function MastercraftSearch() {
+  const [activeTab, setActiveTab] = useState("All");
+  const [activeTitle, setActiveTitle] = useState("Tutorials");
+
+  const handleSearch = (e) => {
+    e.preventDefault();
+    const formData = new FormData(e.target);
+    const resource = formData.get("resource");
+    // eslint-disable-next-line no-console
+    console.log(resource);
+  };
+
+  return (
+    <section className="w-full py-4">
+      <div className="px-4 py-8 mx-auto max-w-1440">
+        <div className="flex flex-col items-center w-full gap-8 md:gap-12">
+          <div className="w-full flex items-center flex-col gap-4 md:gap-8">
+            <div className="w-full flex flex-col md:flex-row  items-center gap-10">
+              {/* First bar */}
+              <div className="flex gap-10 overflow-x-scroll w-full">
+                {[
+                  "Documentation",
+                  "Tutorials",
+                  "Courses",
+                  "Technical Articles",
+                  "Podcasts",
+                  "Videos",
+                ].map((tabItem) => (
+                  <button
+                    key={tabItem}
+                    onClick={() => setActiveTitle(tabItem)}
+                    type="button"
+                    className={cn(
+                      "capitalize hover:text-green-dark hover:font-semibold text-grey-dark font-normal text-nowrap p-2 transition-colors duration-300 ease-in",
+                      activeTitle === tabItem && "text-green-dark font-semibold"
+                    )}
+                  >
+                    {tabItem}
+                  </button>
+                ))}
+              </div>
+              <div className="w-full sm:w-auto relative flex items-center flex-grow pl-4 sm:px-6 py-2 sm:py-3 bg-white text-grey-dark rounded-xl md:rounded-2xl border border-[#EAECF0]">
+                <input
+                  type="text"
+                  name="resource"
+                  className="pl-7 outline-none flex-grow"
+                  placeholder="Search resources"
+                  onChange={(e) => handleSearch(e.target.value)}
+                />
+                <Search
+                  size={20}
+                  className="absolute left-4 sm:left-6 top-2.5 sm:top-3.5 text-[#989A9A]"
+                />
+              </div>
+            </div>
+            {/* Tabs */}
+            <div className="w-full overflow-x-scroll flex gap-3 sm:gap- items-center justify-between">
+              <button
+                onClick={() => setActiveTab("All")}
+                type="button"
+                className={cn(
+                  "capitalize rounded border border-[#EAECF0] text-[#6E7070] text-xs text-nowrap py-2 px-3 transition-colors duration-300 ease-in hover:bg-green-dark hover:text-white bg-white",
+                  activeTab === "All" && "bg-green-dark text-white"
+                )}
+              >
+                All
+              </button>
+              {[
+                "Java",
+                "JavaScript",
+                "C++",
+                "Python",
+                "Node.js",
+                "TypeScript",
+                "Next.js",
+                "Kotlin",
+                "Flutter",
+                "C",
+                "SQL",
+                "PHP",
+                "C#",
+                "GO",
+              ].map((tabItem) => (
+                <button
+                  key={tabItem}
+                  onClick={() => setActiveTab(tabItem)}
+                  type="button"
+                  className={cn(
+                    "capitalize rounded border border-[#EAECF0] text-[#6E7070] text-xs text-nowrap p-2 transition-colors duration-300 ease-in hover:bg-green-dark hover:text-white bg-white",
+                    activeTab === tabItem && "bg-green-dark text-white"
+                  )}
+                >
+                  {tabItem}
+                </button>
+              ))}
+            </div>
+          </div>
+          <h2 className="mr-auto text-2xl font-normal">{activeTitle}</h2>
+          <div className="w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 xl:gap-5">
+            <ResourceCard />
+            <ResourceCard />
+            <ResourceCard />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default MastercraftSearch;
diff --git a/src/pages/resources-home/sections/Features.jsx b/src/pages/resources-home/sections/Features.jsx
index c421be88..390fc6ff 100644
--- a/src/pages/resources-home/sections/Features.jsx
+++ b/src/pages/resources-home/sections/Features.jsx
@@ -46,7 +46,7 @@ function Features() {
             </form>
 
             {/* Tabs */}
-            <div className="w-full overflow-x-scroll flex items-center">
+            <div className="w-full overflow-x-auto flex items-center">
               <div className="flex gap-3 sm:gap-4 mx-auto">
                 <button
                   onClick={() => setActiveTab("All")}
@@ -84,7 +84,6 @@ function Features() {
             </div>
           </div>
 
-          {/* Day-Zero Software developers */}
           <div className="md:self-start flex flex-col gap-8 md:gap-10 w-full">
             <div className="max-w-xl space-y-2 text-center md:text-left">
               <h3 className="text-2xl md:text-3xl text-green-dark font-semibold">
diff --git a/src/pages/resources-home/sections/HowToArticles.jsx b/src/pages/resources-home/sections/HowToArticles.jsx
index 9f66baaf..b4725a21 100644
--- a/src/pages/resources-home/sections/HowToArticles.jsx
+++ b/src/pages/resources-home/sections/HowToArticles.jsx
@@ -14,7 +14,7 @@ function HowToArticles() {
               How-to-articles: Expanding your understanding
             </h3>
             <Link
-              to="/resources"
+              to="/resources/search"
               className="text-sm xl:text-base leading-tight font-normal text-primary underline"
             >
               Explore all tutorials
@@ -35,7 +35,7 @@ function HowToArticles() {
               Recommended tutorials for beginners
             </h3>
             <Link
-              to="/resources"
+              to="/resources/search"
               className="text-sm xl:text-base leading-tight font-normal text-primary underline"
             >
               Explore all tutorials
diff --git a/src/pages/resources-home/sections/ResourceCard.jsx b/src/pages/resources-home/sections/ResourceCard.jsx
index bf1a4dca..f2774b7f 100644
--- a/src/pages/resources-home/sections/ResourceCard.jsx
+++ b/src/pages/resources-home/sections/ResourceCard.jsx
@@ -7,7 +7,7 @@ import logo from "../../../assets/images/sytLogo.png";
 function ResourceCard() {
   return (
     <Link
-      to="/resources/tutorial"
+      to="/resources/search/1"
       className="rounded-xl flex flex-col overflow-clip hover:shadow-xl transition-shadow duration-300 ease-in-out"
     >
       {/* Image */}
diff --git a/src/router/index.jsx b/src/router/index.jsx
index 6ba0c68d..40417c6b 100644
--- a/src/router/index.jsx
+++ b/src/router/index.jsx
@@ -26,6 +26,7 @@ import {
   Mastercraft,
   MastercraftHome,
   MastercraftLayout,
+  MastercraftSearch,
   OrdersPage,
   ProductDisplay,
   Products,
@@ -293,7 +294,15 @@ const router = createBrowserRouter(
           ),
         },
         {
-          path: "/resources/:id",
+          path: "/resources/search",
+          element: (
+            <Suspense fallback={<FallbackLoader />}>
+              <MastercraftSearch />
+            </Suspense>
+          ),
+        },
+        {
+          path: "/resources/search/:id",
           element: (
             <Suspense fallback={<FallbackLoader />}>
               <Resource />