diff --git a/src/assets/images/resources-page/UIDesignEra.png b/src/assets/images/resources-page/UIDesignEra.png
new file mode 100644
index 00000000..f31bcfdf
Binary files /dev/null and b/src/assets/images/resources-page/UIDesignEra.png differ
diff --git a/src/assets/images/resources-page/bad-good-UI.png b/src/assets/images/resources-page/bad-good-UI.png
new file mode 100644
index 00000000..9519d95c
Binary files /dev/null and b/src/assets/images/resources-page/bad-good-UI.png differ
diff --git a/src/assets/images/resources-page/index.js b/src/assets/images/resources-page/index.js
index b0c16dea..e04e4d58 100644
--- a/src/assets/images/resources-page/index.js
+++ b/src/assets/images/resources-page/index.js
@@ -1,7 +1,10 @@
 export { default as backend } from "./backend.png";
+export { default as UI } from "./bad-good-UI.png";
+export { default as UIDesignEra } from "./UIDesignEra.png";
 export { default as dataScience } from "./data-science.png";
 export { default as frontend } from "./frontend.png";
 export { default as hero } from "./hero.png";
+export { default as resourceHero } from "./resource-hero.png";
 export { default as heroFooter } from "./hero-footer.png";
 export { default as productDesign } from "./product-design.png";
 export { default as podPoster } from "./podcast-poster.png";
diff --git a/src/assets/images/resources-page/resource-hero.png b/src/assets/images/resources-page/resource-hero.png
new file mode 100644
index 00000000..f56c7c31
Binary files /dev/null and b/src/assets/images/resources-page/resource-hero.png differ
diff --git a/src/components/ResourcesFooter.jsx b/src/components/ResourcesFooter.jsx
index 380dcf87..957a26b8 100644
--- a/src/components/ResourcesFooter.jsx
+++ b/src/components/ResourcesFooter.jsx
@@ -88,7 +88,7 @@ function ResourcesFooter() {
   const year = now.getFullYear();
 
   return (
-    <div className="">
+    <div className="xl:pt-64">
       <FooterTop />
       <footer className="bg-secondary text-white" data-testid="footer-section">
         <div className="md:px-12 md:pt-8 md:pb-[2px] py-8 px-4 max-w-[1440px] mx-auto">
@@ -217,7 +217,7 @@ function FooterTop() {
   return (
     <div className="hidden md:block bg-[#F5F5F5]">
       <div className="relative mx-auto pt-60">
-        <div className="w-full xl:w-fit max-w-768 xl:max-w-1216 mx-auto absolute top-12 left-1/2 -translate-x-1/2 z-10">
+        <div className="w-full xl:w-full max-w-768 xl:max-w-1216 mx-auto absolute top-12 xl:-top-48 left-1/2 -translate-x-1/2 z-10">
           <LazyLoadImage
             src={pathname === "/mastercraft" ? mastercraft : heroFooter}
             alt="mastercraft"
diff --git a/src/index.js b/src/index.js
index ba111d19..f6cfe047 100644
--- a/src/index.js
+++ b/src/index.js
@@ -48,6 +48,7 @@ const MastercraftHome = lazy(
 const ResourcesHome = lazy(
   () => import("./pages/resources-home/ResourcesHome")
 );
+const Resource = lazy(() => import("./pages/resource/Resource"));
 const MastercraftLayout = lazy(() => import("./pages/MastercraftLayout"));
 const Homepage = lazy(() => import("./pages/shop/Homepage"));
 const Checkout = lazy(() => import("./pages/shop/OrderSummaryPage"));
@@ -103,6 +104,7 @@ export {
   ProductDisplay,
   Products,
   ResetPassword,
+  Resource,
   ResourcesHome,
   MastercraftHome,
   MastercraftLayout,
diff --git a/src/main.jsx b/src/main.jsx
index c380519f..9bbe2f50 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -28,7 +28,12 @@ ReactDOM.createRoot(document.getElementById("root")).render(
         <AuthContextProvider>
           <QueryClientProvider client={queryClient}>
             <SearchBlogProvider>
-              <RouterProvider router={router} />
+              <RouterProvider
+                router={router}
+                future={{
+                  v7_startTransition: true,
+                }}
+              />
               <ReactQueryDevtools position="bottom-right" />
             </SearchBlogProvider>
           </QueryClientProvider>
diff --git a/src/pages/mastercraft/sections/Description.jsx b/src/pages/mastercraft/sections/Description.jsx
index fa115f10..bbb2fed7 100644
--- a/src/pages/mastercraft/sections/Description.jsx
+++ b/src/pages/mastercraft/sections/Description.jsx
@@ -25,15 +25,15 @@ function Description() {
   };
   return (
     <div className="w-full flex gap-6 md:gap-12">
-      <div className="bg-white p-1 rounded-xl w-1/5 h-fit">
-        <div className="w-full hidden md:block border rounded-lg bg-green-light p-4 space-y-4 text-base pb-6">
+      <div className="bg-white p-1 rounded-xl w-1/5 h-fit hidden lg:block">
+        <div className="w-full border rounded-lg bg-green-light p-4 space-y-4 text-base pb-6">
           <h4 className="uppercase font-semibold">Product Design</h4>
 
           <div className="flex flex-col gap-3 text-[#767975] font-normal items-start">
             <button
               type="button"
               onClick={() => handleScrollToSection("CourseDescription")}
-              className="focus:text-green-dark focus:font-medium outline-none"
+              className="focus:text-green-dark focus:font-medium outline-none text-left"
               ref={defaultFocusedLinkRef}
             >
               Course Description
@@ -42,7 +42,7 @@ function Description() {
             <button
               type="button"
               onClick={() => handleScrollToSection("WhoCanApply")}
-              className="focus:text-green-dark focus:font-medium outline-none"
+              className="focus:text-green-dark focus:font-medium outline-none text-left"
             >
               Who can apply
             </button>
@@ -50,7 +50,7 @@ function Description() {
             <button
               type="button"
               onClick={() => handleScrollToSection("WhatYouWillLearn")}
-              className="focus:text-green-dark focus:font-medium outline-none"
+              className="focus:text-green-dark focus:font-medium outline-none text-left"
             >
               What you will learn
             </button>
@@ -58,7 +58,7 @@ function Description() {
             <button
               type="button"
               onClick={() => handleScrollToSection("Curriculum")}
-              className="focus:text-green-dark focus:font-medium outline-none"
+              className="focus:text-green-dark focus:font-medium outline-none text-left"
             >
               Curriculum
             </button>
@@ -66,7 +66,7 @@ function Description() {
             <button
               type="button"
               onClick={() => handleScrollToSection("CourseOutcome")}
-              className="focus:text-green-dark focus:font-medium outline-none"
+              className="focus:text-green-dark focus:font-medium outline-none text-left"
             >
               Course Outcome
             </button>
@@ -74,7 +74,7 @@ function Description() {
             <button
               type="button"
               onClick={() => handleScrollToSection("Instructors")}
-              className="focus:text-green-dark focus:font-medium outline-none"
+              className="focus:text-green-dark focus:font-medium outline-none text-left"
             >
               Instructors
             </button>
@@ -82,7 +82,7 @@ function Description() {
             <button
               type="button"
               onClick={() => handleScrollToSection("Pricing")}
-              className="focus:text-green-dark focus:font-medium outline-none"
+              className="focus:text-green-dark focus:font-medium outline-none text-left"
             >
               Pricing
             </button>
@@ -90,7 +90,7 @@ function Description() {
             <button
               type="button"
               onClick={() => handleScrollToSection("NextCohort")}
-              className="focus:text-green-dark focus:font-medium outline-none"
+              className="focus:text-green-dark focus:font-medium outline-none text-left"
             >
               Next Cohort
             </button>
diff --git a/src/pages/resource/Resource.jsx b/src/pages/resource/Resource.jsx
new file mode 100644
index 00000000..29eeda83
--- /dev/null
+++ b/src/pages/resource/Resource.jsx
@@ -0,0 +1,28 @@
+import React from "react";
+
+import SeoMetadata from "../../components/SeoMetadata";
+import Content from "./sections/Content";
+import Hero from "./sections/Hero";
+import SimilarResources from "./sections/SimilarResources";
+
+function Resource() {
+  return (
+    <>
+      <SeoMetadata
+        title="Resources"
+        description="Discover tech tools and resources to boost your productivity."
+        type="article"
+        url="https://www.spaceyatech.com/resources"
+        ogImage="https://apis.spaceyatech.com/media/blog-images/syt.png"
+        ogImageAlt="SpaceYaTech logo, social media handles, website URL, email, and more on a muted background."
+      />
+      <main className="bg-[#F5F5F5] max-w-1440 mx-auto md:px-10 px-5 py-4 md:py-8 flex flex-col gap-12 md:gap-16 lg:gap-20">
+        <Hero />
+        <Content />
+        <SimilarResources />
+      </main>
+    </>
+  );
+}
+
+export default Resource;
diff --git a/src/pages/resource/sections/Content.jsx b/src/pages/resource/sections/Content.jsx
new file mode 100644
index 00000000..b453b9b5
--- /dev/null
+++ b/src/pages/resource/sections/Content.jsx
@@ -0,0 +1,315 @@
+import { Flame } from "lucide-react";
+import React from "react";
+import { LazyLoadImage } from "react-lazy-load-image-component";
+
+import { UI, UIDesignEra } from "../../../assets/images/resources-page";
+import { cn } from "../../../utilities/utils";
+
+const imageSlides = [
+  UIDesignEra,
+  "https://images.pexels.com/photos/196644/pexels-photo-196644.jpeg?auto=compress&cs=tinysrgb&w=600",
+  "https://images.pexels.com/photos/196645/pexels-photo-196645.jpeg?auto=compress&cs=tinysrgb&w=600",
+  "https://images.pexels.com/photos/326514/pexels-photo-326514.jpeg?auto=compress&cs=tinysrgb&w=600",
+  "https://images.pexels.com/photos/14158913/pexels-photo-14158913.jpeg?auto=compress&cs=tinysrgb&w=600",
+];
+
+function Content() {
+  const defaultFocusedLinkRef = React.useRef(null);
+  const [currentIndex, setCurrentIndex] = React.useState(0);
+
+  const handleNextBtn = () => {
+    setCurrentIndex((prevIndex) =>
+      Math.min(prevIndex + 1, imageSlides.length - 1)
+    );
+  };
+
+  const handlePrevBtn = () => {
+    setCurrentIndex((prevIndex) => Math.max(prevIndex - 1, 0));
+  };
+
+  React.useEffect(() => {
+    if (defaultFocusedLinkRef.current) {
+      defaultFocusedLinkRef.current.focus();
+    }
+  }, []);
+
+  const handleScrollToSection = (id) => {
+    const element = document.getElementById(id);
+    if (element) {
+      element.scrollIntoView({ behavior: "smooth" });
+    }
+  };
+
+  return (
+    <div className="w-full flex gap-6 md:gap-12 border-b border-green-header/70">
+      <div className="bg-white p-1 rounded-xl w-1/5 h-fit hidden md:block">
+        <div className="w-full border rounded-lg bg-green-light p-4 space-y-4 text-base pb-6">
+          <div className="flex flex-col gap-3 text-[#767975] font-normal items-start">
+            <button
+              type="button"
+              onClick={() => handleScrollToSection("Overview")}
+              className="focus:bg-green-dark focus:text-white focus:font-medium outline-none text-left w-full py-2.5 px-2 rounded"
+              ref={defaultFocusedLinkRef}
+            >
+              Overview
+            </button>
+
+            <button
+              type="button"
+              onClick={() => handleScrollToSection("ImportanceofUIDesign")}
+              className="focus:bg-green-dark focus:text-white focus:font-medium outline-none text-left w-full py-2.5 px-2 rounded"
+            >
+              Importance of UI Design
+            </button>
+
+            <button
+              type="button"
+              onClick={() => handleScrollToSection("EvolutionofDesign")}
+              className="focus:bg-green-dark focus:text-white focus:font-medium outline-none text-left w-full py-2.5 px-2 rounded"
+            >
+              Evolution of Design
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div className="w-full md:w-4/5 space-y-4 md:space-y-8 pb-6 md:p-6">
+        {/* Overview */}
+        <div className="space-y-2 md:space-y-4 lg:space-y-6" id="Overview">
+          <h3 className="text-green-header text-xl font-semibold">Overview</h3>
+          <p className="text-grey-dark text-sm md:text-base leading-loose font-normal">
+            User interface (UI) design is the process designers use to build
+            interfaces in software or computerized devices, focusing on looks or
+            style. Designers aim to create interfaces which users find easy to
+            use and pleasurable. UI design refers to graphical user interfaces
+            and other forms—e.g., voice-controlled interfaces. Often confused
+            with UX design, UI design is more concerned with the surface and
+            overall feel of a design. UI design is a craft where you the
+            designer build an essential part of the user experience. UX design
+            covers the entire spectrum of the user experience. One analogy is to
+            picture UX design as a car with UI design as the driving console.
+          </p>
+        </div>
+
+        {/* Importance of UI Design */}
+        <div
+          className="space-y-2 md:space-y-4 lg:space-y-6"
+          id="ImportanceofUIDesign"
+        >
+          <h3 className="text-green-header text-xl font-semibold">
+            Importance of UI Design
+          </h3>
+
+          <p className="text-grey-dark text-sm md:text-base leading-loose font-normal">
+            The significance of what makes a good user interface design cannot
+            be overstated in today&lsquo;s digital landscape. As technology
+            seamlessly integrates into our daily routines, it&lsquo;s easy to
+            overlook its relatively recent emergence. This could be because some
+            of us aren’t even old enough to remember back that far.
+            <br />
+            <br />
+            Some younger millennials have no reference for a non-digitized
+            world. However, older millennials and Gen Xers probably remember
+            what a treat it was to play the Oregon Trail on one of the two
+            school computers. Younger generations, accustomed to a digitized
+            world from birth, may take for granted the transformative shift from
+            antiquated systems like DOS and dial-up to the sleek interfaces of
+            modern websites and apps.
+            <br />
+            <br />
+            In today&lsquo;s competitive environment, businesses must prioritize
+            the importance of good user interface design within their digital
+            strategies. Aligning UI with UX objectives is essential, ensuring
+            that every interaction is intuitive, efficient, and engaging. Don’t
+            forget, your users might be your employees! By employing effective
+            UI design strategies, organizations can cultivate a positive user
+            experience, driving customer satisfaction, retention, and
+            ultimately, business success.
+          </p>
+        </div>
+
+        <div className="space-y-2 md:space-y-4 lg:space-y-6">
+          <LazyLoadImage src={UI} alt="img" className="" effect="blur" />
+        </div>
+
+        <div className="space-y-2 md:space-y-4 lg:space-y-6 bg-[#1A7862] rounded-xl py-2 lg:py-4 px-5 lg:px-10 text-white">
+          <div className="flex flex-col gap-2">
+            <div className="flex items-center gap-1 md:gap-2">
+              <Flame size={24} color="white" />
+              <h6 className="text-lg font-extrabold">Hot tip!</h6>
+            </div>
+
+            <p className="text-base font-medium">
+              Perhaps the most important UI design principle is consistency.
+              Consistency means that the look and feel of your website, from
+              page to page and even within pages need to have a consistent and
+              harmonious look. Your font style, font size, color usage and
+              images need to have a consistent look.
+            </p>
+          </div>
+        </div>
+
+        {/* Evolution of Design */}
+        <div
+          className="space-y-2 md:space-y-4 lg:space-y-6"
+          id="EvolutionofDesign"
+        >
+          <h3 className="text-green-header text-xl font-semibold">
+            Evolution of Design
+          </h3>
+
+          <p className="text-grey-dark text-sm md:text-base leading-loose font-normal">
+            “A funny thing happens when you design a computer everyone can use.”
+            <br />
+            <br />
+            That was the headline of a 1984 print campaign for Apple’s newest
+            device, the Macintosh. At the time the company was kicking off a
+            revolution in personal computing with its graphical user interface
+            (GUI) and mouse—two innovations that helped democratize computing by
+            making computers understandable and approachable for the average
+            consumer.
+            <br />
+            <br />
+            During the ’90s and early 2000s, however, continued innovation
+            stalled. But as the 2010s approached, a UI renaissance began that
+            has led to many powerfully disruptive—and, frankly, more human—forms
+            of interaction.
+            <br />
+            <br />
+            So where are we headed as the planet continues to digitize? To
+            figure that out, we must start with a look at how we have interacted
+            with computing to date and how those innovations have created the
+            foundation for the newest forms of interaction.
+            <br />
+            <br />
+            1980-2000 As the 1990s began, the laptop computer started to
+            overtake the desktop. Along with that came incremental changes in
+            the mouse/keyboard interface. Apple started incorporating trackballs
+            and trackpads into its Powerbook laptops, while IBM introduced
+            pointing sticks (branded “TrackPoint”) into its laptops.
+            <br />
+            <br />
+            While computing continued miniaturizing from the desktop to the
+            portable PC, a new device was also becoming popular: the PalmPilot.
+            Along with the handheld form factor, Palm introduced a a new user
+            interface, the stylus, which worked with its touchscreen, and an
+            alternative alphabet it called “Graffiti.”
+            <br />
+            <br />
+            2000 - Present In recent years, user interface (UI) and user
+            experience (UX) design have become integral components of product
+            development. As technology continues to advance at a rapid pace, the
+            need for intuitive, seamless, and user-centered designs has become
+            more critical than ever. The field of User Interface (UI) and User
+            Experience (UX) design has undergone significant evolution over the
+            years. In this article, we will explore the key milestones in the
+            evolution of UI/UX design and their impact on the design process.
+            <br />
+            <br />
+            The second phase was the mobile era, which began in the early 2000s
+            with the advent of smartphones. This phase brought about significant
+            changes in UI/UX design, with designers now creating interfaces for
+            smaller screens. Designers had to make interfaces responsive and
+            adaptable to different screen sizes and resolutions. This led to the
+            creation of new design patterns, such as hamburger menus, swipe
+            gestures and pinch-to-zoom.
+            <br />
+            <br />
+            In the early days of mobile, UI/UX design was largely based on the
+            principles of desktop design, with designers attempting to replicate
+            desktop interfaces on mobile screens. However, this approach was not
+            effective, as mobile devices presented unique challenges such as
+            smaller screens, touch-based inputs, and varied usage contexts.
+            <br />
+            <br />
+            Designers quickly realized that mobile interfaces needed to be
+            tailored to the unique characteristics of mobile devices. This led
+            to the development of responsive design, which allowed interfaces to
+            adapt to different screen sizes and orientations. Designers also
+            began to focus on creating interfaces that were touch-friendly, with
+            larger buttons and simpler navigation.
+            <br />
+            <br />
+            The mobile era also brought about the rise of app-based interfaces,
+            which allowed users to access content and services directly from
+            their mobile devices. This led to the development of app stores and
+            a new ecosystem of mobile apps, with designers focusing on creating
+            interfaces that were engaging, visually appealing, and easy to use.
+            <br />
+            <br />
+            Overall, the mobile era marked a significant shift in UI/UX design,
+            with designers moving away from desktop-based design principles and
+            focusing on creating interfaces that were tailored to the unique
+            characteristics of mobile devices. This era also saw the rise of
+            app-based interfaces and the development of responsive design, which
+            are still important principles in modern UI/UX design.
+            <br />
+            <br />
+            The third phase is the current era, the post-mobile era, which began
+            in the mid-2010s. During this phase, UI/UX design has become more
+            complex, with designers creating interfaces for a wide range of
+            devices, including smartwatches, virtual reality (VR) headsets, and
+            voice assistants. The focus has shifted from creating interfaces for
+            specific devices to creating interfaces that work seamlessly across
+            multiple devices and platforms. This phase is characterized by the
+            increasing prevalence of connected devices, the Internet of Things
+            (IoT), and advancements in artificial intelligence (AI) and machine
+            learning (ML).
+            <br />
+            <br />
+            In the post-mobile era, UI/UX design is becoming more integrated
+            with technology and data, with designers leveraging AI and ML to
+            create more personalized and intelligent interfaces. This is leading
+            to the development of interfaces that are able to adapt to user
+            behavior, context, and preferences, providing a more tailored and
+            seamless experience.
+          </p>
+        </div>
+
+        {/* Image Carrousel */}
+        <div className="flex flex-col w-full mt-8 gap-8">
+          <div className="mx-auto max-w-2xl lg:max-w-4xl lg:h-96 overflow-hidden rounded-xl transition-transform duration-500 ease-in-out">
+            <LazyLoadImage
+              src={imageSlides[currentIndex]}
+              effect="blur"
+              alt={`Slide-${imageSlides[currentIndex + 1]}`}
+              className={cn(
+                "size-full flex-shrink-0 transition-opacity object-cover"
+              )}
+            />
+          </div>
+
+          {/* Btns */}
+          <div className="flex items-center justify-between">
+            <button
+              type="button"
+              onClick={handlePrevBtn}
+              disabled={currentIndex === 0}
+              className={cn(
+                "rounded p-2.5 text-white text-sm font-normal leading-[30px] disabled:cursor-not-allowed",
+                currentIndex === 0 ? "bg-[#868888]" : "bg-green-dark"
+              )}
+            >
+              Previous
+            </button>
+            <button
+              type="button"
+              disabled={currentIndex === imageSlides.length - 1}
+              onClick={handleNextBtn}
+              className={cn(
+                "rounded p-2.5 text-white text-sm font-normal leading-[30px] disabled:cursor-not-allowed",
+                currentIndex === imageSlides.length - 1
+                  ? "bg-[#868888]"
+                  : "bg-green-dark"
+              )}
+            >
+              Next
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Content;
diff --git a/src/pages/resource/sections/Hero.jsx b/src/pages/resource/sections/Hero.jsx
new file mode 100644
index 00000000..69b1d29b
--- /dev/null
+++ b/src/pages/resource/sections/Hero.jsx
@@ -0,0 +1,62 @@
+import { Award, Hourglass, List } from "lucide-react";
+import React from "react";
+import { LazyLoadImage } from "react-lazy-load-image-component";
+
+import { resourceHero } from "../../../assets/images/resources-page";
+
+function Hero() {
+  return (
+    <section className="flex flex-col gap-4 md:gap-8">
+      {/* Hero Image */}
+      <LazyLoadImage
+        src={resourceHero}
+        alt="hero-image"
+        effect="blur"
+        loading="lazy"
+        className="w-full max-h-96 object-cover"
+      />
+
+      {/* Title */}
+      <h2 className="text-2xl md:text-3xl font-semibold">
+        UI Design Fundamentals for Frontend Engineers
+      </h2>
+
+      {/* Tags */}
+      <div className="flex flex-col lg:flex-row items-center gap-4 lg:gap-8 bg-white border border-[#EAECF0] rounded-lg lg:justify-between px-2.5 lg:px-6 py-2.5 w-full">
+        <div className="flex flex-col gap-1 border-b lg:border-none py-2 w-full lg:w-1/3">
+          <div className="flex items-center gap-1">
+            <List size={18} />
+            <h5 className="text-base font-medium">12 topics</h5>
+          </div>
+          <p className="text-[#475467] text-xs leading-5 font-normal lg:line-clamp-1">
+            Covering UX design principles and UI design best practices
+          </p>
+        </div>
+
+        <div className="flex flex-col gap-1 border-b lg:border-none py-2 w-full lg:w-1/3">
+          <div className="flex items-center gap-1">
+            <Award size={18} />
+            <h5 className="text-base font-medium">
+              Beginner to intermediate level
+            </h5>
+          </div>
+          <p className="text-[#475467] text-xs leading-5 font-normal lg:line-clamp-1">
+            Recommended for beginners
+          </p>
+        </div>
+
+        <div className="flex flex-col gap-1 border-b lg:border-none py-2 w-full lg:w-1/3">
+          <div className="flex items-center gap-1">
+            <Hourglass size={18} />
+            <h5 className="text-base font-medium">14 hours</h5>
+          </div>
+          <p className="text-[#475467] text-xs leading-5 font-normal lg:line-clamp-1">
+            Minimum study time
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default Hero;
diff --git a/src/pages/resource/sections/SimilarResources.jsx b/src/pages/resource/sections/SimilarResources.jsx
new file mode 100644
index 00000000..02b7fc26
--- /dev/null
+++ b/src/pages/resource/sections/SimilarResources.jsx
@@ -0,0 +1,25 @@
+import React from "react";
+import ResourceCard from "../../resources-home/sections/ResourceCard";
+
+function SimilarResources() {
+  return (
+    <section className="flex flex-col gap-6 md:gap-8">
+      <div className="max-w-xl space-y-2 text-center md:text-left">
+        <h3 className="text-2xl md:text-3xl text-black font-semibold">
+          Explore more on this topic
+        </h3>
+        <p className="text-base leading-tight text-gray-500">
+          These additional resources will help you understand this topic better
+        </p>
+      </div>
+
+      <div className="flex items-center gap-2 md:gap-4 overflow-x-scroll scrollbar-2 w-full md:w-auto pb-6">
+        {Array.from({ length: 10 }).map((item) => (
+          <ResourceCard key={item} />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+export default SimilarResources;
diff --git a/src/pages/resources-home/sections/ResourceCard.jsx b/src/pages/resources-home/sections/ResourceCard.jsx
index 1dd17384..bf1a4dca 100644
--- a/src/pages/resources-home/sections/ResourceCard.jsx
+++ b/src/pages/resources-home/sections/ResourceCard.jsx
@@ -7,11 +7,11 @@ import logo from "../../../assets/images/sytLogo.png";
 function ResourceCard() {
   return (
     <Link
-      to="/resources"
+      to="/resources/tutorial"
       className="rounded-xl flex flex-col overflow-clip hover:shadow-xl transition-shadow duration-300 ease-in-out"
     >
       {/* Image */}
-      <div className="h-1/2 w-full overflow-hidden">
+      <div className="h-1/2 w-full overflow-hidden bg-white">
         <LazyLoadImage
           alt="img"
           src={cardImg}
diff --git a/src/router/index.jsx b/src/router/index.jsx
index a73845c8..6ba0c68d 100644
--- a/src/router/index.jsx
+++ b/src/router/index.jsx
@@ -30,6 +30,7 @@ import {
   ProductDisplay,
   Products,
   ResetPassword,
+  Resource,
   ResourcesHome,
   ShopDashboard,
   ShopSales,
@@ -38,300 +39,312 @@ import {
 } from "..";
 import { FallbackLoader } from "../components";
 
-const router = createBrowserRouter([
-  {
-    path: "/",
-    element: <Layout />,
-    children: [
-      {
-        path: "/",
-        element: (
-          <Suspense fallback={<FallbackLoader />}>
-            <LandingPage />
-          </Suspense>
-        ),
-      },
-      {
-        path: "/products",
-        element: (
-          <Suspense fallback={<FallbackLoader />}>
-            <Products />
-          </Suspense>
-        ),
-      },
-      {
-        path: "/about-us",
-        element: (
-          <Suspense fallback={<FallbackLoader />}>
-            <AboutUs />
-          </Suspense>
-        ),
-      },
-      {
-        path: "/community",
-        element: (
-          <Suspense fallback={<FallbackLoader />}>
-            <CommunityPage />
-          </Suspense>
-        ),
-      },
-      {
-        path: "/Gallery",
-        element: (
-          <Suspense fallback={<FallbackLoader />}>
-            <GalleryPage />
-          </Suspense>
-        ),
-      },
-      {
-        path: "/blogs",
-        element: (
-          <Suspense fallback={<FallbackLoader />}>
-            <Blogs />
-          </Suspense>
-        ),
-      },
-      {
-        path: "/blogs/:titleSlug",
-        element: (
-          <Suspense fallback={<FallbackLoader />}>
-            <Blog />
-          </Suspense>
-        ),
-      },
-      {
-        path: "/events",
-        element: (
-          <Suspense fallback={<FallbackLoader />}>
-            <EventsPage />
-          </Suspense>
-        ),
-      },
-      {
-        path: "/events/:id",
-        element: (
-          <Suspense fallback={<FallbackLoader />}>
-            <SingleEvent />
-          </Suspense>
-        ),
-      },
-      {
-        path: "/shop",
-        element: (
-          <Suspense fallback={<FallbackLoader />}>
-            <Homepage />
-          </Suspense>
-        ),
-      },
-      {
-        path: "/shop/items",
-        element: (
-          <Suspense fallback={<FallbackLoader />}>
-            <AllProducts />
-          </Suspense>
-        ),
-      },
-      {
-        path: "/shop/category/:category",
-        element: (
-          <Suspense fallback={<FallbackLoader />}>
-            <CategoriesProducts />
-          </Suspense>
-        ),
-      },
-      {
-        path: "/shop/item/:id",
-        element: (
-          <Suspense fallback={<FallbackLoader />}>
-            <ProductDisplay />
-          </Suspense>
-        ),
-      },
-      {
-        path: "/shop/checkout",
-        element: (
-          <Suspense fallback={<FallbackLoader />}>
-            <Checkout />
-          </Suspense>
-        ),
-      },
+const router = createBrowserRouter(
+  [
+    {
+      path: "/",
+      element: <Layout />,
+      children: [
+        {
+          path: "/",
+          element: (
+            <Suspense fallback={<FallbackLoader />}>
+              <LandingPage />
+            </Suspense>
+          ),
+        },
+        {
+          path: "/products",
+          element: (
+            <Suspense fallback={<FallbackLoader />}>
+              <Products />
+            </Suspense>
+          ),
+        },
+        {
+          path: "/about-us",
+          element: (
+            <Suspense fallback={<FallbackLoader />}>
+              <AboutUs />
+            </Suspense>
+          ),
+        },
+        {
+          path: "/community",
+          element: (
+            <Suspense fallback={<FallbackLoader />}>
+              <CommunityPage />
+            </Suspense>
+          ),
+        },
+        {
+          path: "/Gallery",
+          element: (
+            <Suspense fallback={<FallbackLoader />}>
+              <GalleryPage />
+            </Suspense>
+          ),
+        },
+        {
+          path: "/blogs",
+          element: (
+            <Suspense fallback={<FallbackLoader />}>
+              <Blogs />
+            </Suspense>
+          ),
+        },
+        {
+          path: "/blogs/:titleSlug",
+          element: (
+            <Suspense fallback={<FallbackLoader />}>
+              <Blog />
+            </Suspense>
+          ),
+        },
+        {
+          path: "/events",
+          element: (
+            <Suspense fallback={<FallbackLoader />}>
+              <EventsPage />
+            </Suspense>
+          ),
+        },
+        {
+          path: "/events/:id",
+          element: (
+            <Suspense fallback={<FallbackLoader />}>
+              <SingleEvent />
+            </Suspense>
+          ),
+        },
+        {
+          path: "/shop",
+          element: (
+            <Suspense fallback={<FallbackLoader />}>
+              <Homepage />
+            </Suspense>
+          ),
+        },
+        {
+          path: "/shop/items",
+          element: (
+            <Suspense fallback={<FallbackLoader />}>
+              <AllProducts />
+            </Suspense>
+          ),
+        },
+        {
+          path: "/shop/category/:category",
+          element: (
+            <Suspense fallback={<FallbackLoader />}>
+              <CategoriesProducts />
+            </Suspense>
+          ),
+        },
+        {
+          path: "/shop/item/:id",
+          element: (
+            <Suspense fallback={<FallbackLoader />}>
+              <ProductDisplay />
+            </Suspense>
+          ),
+        },
+        {
+          path: "/shop/checkout",
+          element: (
+            <Suspense fallback={<FallbackLoader />}>
+              <Checkout />
+            </Suspense>
+          ),
+        },
 
-      {
-        path: "/login",
-        element: (
-          <Suspense fallback={<FallbackLoader />}>
-            <LogIn />
-          </Suspense>
-        ),
-      },
-      {
-        path: "/register",
-        element: (
-          <Suspense fallback={<FallbackLoader />}>
-            <SignUp />
-          </Suspense>
-        ),
-      },
-      {
-        path: "/forgot-password",
-        element: (
-          <Suspense fallback={<FallbackLoader />}>
-            <ForgotPassword />
-          </Suspense>
-        ),
-      },
-      {
-        path: "/reset-password",
-        element: (
-          <Suspense fallback={<FallbackLoader />}>
-            <ResetPassword />
-          </Suspense>
-        ),
-      },
-    ],
-  },
-  {
-    path: "/admin",
-    element: <AdminLayout />,
-    children: [
-      {
-        path: "/admin/shop",
-        element: (
-          <Suspense fallback={<FallbackLoader />}>
-            <ShopDashboard />
-          </Suspense>
-        ),
-      },
-      {
-        path: "/admin/shop/sales",
-        element: (
-          <Suspense fallback={<FallbackLoader />}>
-            <ShopSales />
-          </Suspense>
-        ),
-      },
-      {
-        path: "/admin/shop/orders",
-        element: (
-          <Suspense fallback={<FallbackLoader />}>
-            <OrdersPage />
-          </Suspense>
-        ),
-      },
-      {
-        path: "/admin/shop/inventory",
-        element: (
-          <Suspense fallback={<FallbackLoader />}>
-            <InventoryReport />
-          </Suspense>
-        ),
-      },
-      // {
-      //   path: "/admin",
-      //   element: <AllChaptersPage />,
-      // },
-      // {
-      //   path: "/admin/all-chapters",
-      //   element: <AllChaptersPage />,
-      // },
-      // {
-      //   path: "/admin/events",
-      //   element: <AllEventsPage />,
-      // },
-      // {
-      //   path: "/admin/add-chapters",
-      //   element: <AddChapterPage />,
-      // },
-      // {
-      //   path: "/admin/events",
-      //   element: <AllEventsPage />,
-      // },
-      // {
-      //   path: "/admin/events/add-event",
-      //   element: <AddEventPage />,
-      // },
-      // {
-      //   path: "/admin/events/update-event",
-      //   element: <UpdateEventPage />,
-      // },
-    ],
-  },
-  {
-    path: "/mastercraft",
-    element: <MastercraftLayout />,
-    children: [
-      {
-        path: "/mastercraft",
-        element: (
-          <Suspense fallback={<FallbackLoader />}>
-            <MastercraftHome />
-          </Suspense>
-        ),
-      },
-      {
-        path: "/mastercraft/:id",
-        element: (
-          <Suspense fallback={<FallbackLoader />}>
-            <Mastercraft />
-          </Suspense>
-        ),
-      },
-    ],
-  },
-  {
-    path: "/resources",
-    element: <MastercraftLayout />,
-    children: [
-      {
-        path: "/resources",
-        element: (
-          <Suspense fallback={<FallbackLoader />}>
-            <ResourcesHome />
-          </Suspense>
-        ),
-      },
-      {
-        path: "/resources/:id",
-        element: (
-          <Suspense fallback={<FallbackLoader />}>
-            <Mastercraft />
-          </Suspense>
-        ),
-      },
-    ],
-  },
-  {
-    path: "/error-400",
-    element: (
-      <Suspense fallback={<FallbackLoader />}>
-        <Error400 />
-      </Suspense>
-    ),
-  },
-  {
-    path: "/error-403",
-    element: (
-      <Suspense fallback={<FallbackLoader />}>
-        <Error403 />
-      </Suspense>
-    ),
-  },
-  {
-    path: "/*",
-    element: (
-      <Suspense fallback={<FallbackLoader />}>
-        <Error404 />
-      </Suspense>
-    ),
-  },
+        {
+          path: "/login",
+          element: (
+            <Suspense fallback={<FallbackLoader />}>
+              <LogIn />
+            </Suspense>
+          ),
+        },
+        {
+          path: "/register",
+          element: (
+            <Suspense fallback={<FallbackLoader />}>
+              <SignUp />
+            </Suspense>
+          ),
+        },
+        {
+          path: "/forgot-password",
+          element: (
+            <Suspense fallback={<FallbackLoader />}>
+              <ForgotPassword />
+            </Suspense>
+          ),
+        },
+        {
+          path: "/reset-password",
+          element: (
+            <Suspense fallback={<FallbackLoader />}>
+              <ResetPassword />
+            </Suspense>
+          ),
+        },
+      ],
+    },
+    {
+      path: "/admin",
+      element: <AdminLayout />,
+      children: [
+        {
+          path: "/admin/shop",
+          element: (
+            <Suspense fallback={<FallbackLoader />}>
+              <ShopDashboard />
+            </Suspense>
+          ),
+        },
+        {
+          path: "/admin/shop/sales",
+          element: (
+            <Suspense fallback={<FallbackLoader />}>
+              <ShopSales />
+            </Suspense>
+          ),
+        },
+        {
+          path: "/admin/shop/orders",
+          element: (
+            <Suspense fallback={<FallbackLoader />}>
+              <OrdersPage />
+            </Suspense>
+          ),
+        },
+        {
+          path: "/admin/shop/inventory",
+          element: (
+            <Suspense fallback={<FallbackLoader />}>
+              <InventoryReport />
+            </Suspense>
+          ),
+        },
+        // {
+        //   path: "/admin",
+        //   element: <AllChaptersPage />,
+        // },
+        // {
+        //   path: "/admin/all-chapters",
+        //   element: <AllChaptersPage />,
+        // },
+        // {
+        //   path: "/admin/events",
+        //   element: <AllEventsPage />,
+        // },
+        // {
+        //   path: "/admin/add-chapters",
+        //   element: <AddChapterPage />,
+        // },
+        // {
+        //   path: "/admin/events",
+        //   element: <AllEventsPage />,
+        // },
+        // {
+        //   path: "/admin/events/add-event",
+        //   element: <AddEventPage />,
+        // },
+        // {
+        //   path: "/admin/events/update-event",
+        //   element: <UpdateEventPage />,
+        // },
+      ],
+    },
+    {
+      path: "/mastercraft",
+      element: <MastercraftLayout />,
+      children: [
+        {
+          path: "/mastercraft",
+          element: (
+            <Suspense fallback={<FallbackLoader />}>
+              <MastercraftHome />
+            </Suspense>
+          ),
+        },
+        {
+          path: "/mastercraft/:id",
+          element: (
+            <Suspense fallback={<FallbackLoader />}>
+              <Mastercraft />
+            </Suspense>
+          ),
+        },
+      ],
+    },
+    {
+      path: "/resources",
+      element: <MastercraftLayout />,
+      children: [
+        {
+          path: "/resources",
+          element: (
+            <Suspense fallback={<FallbackLoader />}>
+              <ResourcesHome />
+            </Suspense>
+          ),
+        },
+        {
+          path: "/resources/:id",
+          element: (
+            <Suspense fallback={<FallbackLoader />}>
+              <Resource />
+            </Suspense>
+          ),
+        },
+      ],
+    },
+    {
+      path: "/error-400",
+      element: (
+        <Suspense fallback={<FallbackLoader />}>
+          <Error400 />
+        </Suspense>
+      ),
+    },
+    {
+      path: "/error-403",
+      element: (
+        <Suspense fallback={<FallbackLoader />}>
+          <Error403 />
+        </Suspense>
+      ),
+    },
+    {
+      path: "/*",
+      element: (
+        <Suspense fallback={<FallbackLoader />}>
+          <Error404 />
+        </Suspense>
+      ),
+    },
+    {
+      path: "/error-500",
+      element: (
+        <Suspense fallback={<FallbackLoader />}>
+          <Error500 />
+        </Suspense>
+      ),
+    },
+  ],
   {
-    path: "/error-500",
-    element: (
-      <Suspense fallback={<FallbackLoader />}>
-        <Error500 />
-      </Suspense>
-    ),
-  },
-]);
+    future: {
+      v7_fetcherPersist: true,
+      v7_normalizeFormMethod: true,
+      v7_partialHydration: true,
+      v7_relativeSplatPath: true,
+      v7_skipActionErrorRevalidation: true,
+      v7_startTransition: true,
+    },
+  }
+);
 
 export default router;