diff --git a/public/locales/ar/homepage.json b/public/locales/ar/homepage.json
index 8edbcf7..c723ec2 100644
--- a/public/locales/ar/homepage.json
+++ b/public/locales/ar/homepage.json
@@ -20,7 +20,8 @@
         "chatText": "تحتاج إلى التحدث مع شخص ما؟  يمكنك التحدث مع المعالج الخاص بك"
     },
     "blogs": {
-        "heading": "المدونات"
+        "heading": "المدوّنات",
+        "more": "اقرأ المزيد"
     },
     "tickets": {
         "heading1": "خيارات الشراء لدينا",
diff --git a/public/locales/en/homepage.json b/public/locales/en/homepage.json
index 1b7b877..b590f28 100644
--- a/public/locales/en/homepage.json
+++ b/public/locales/en/homepage.json
@@ -20,7 +20,8 @@
         "chatText": "Need to talk? Let your therapist listen."
     },
     "blogs": {
-        "heading": "RECENT BLOGS"
+        "heading": "RECENT BLOGS",
+        "more": "Read more"
     },
     "tickets": {
         "heading1": "OUR PLAN OPTIONS",
diff --git a/src/components/Cards/BlogCard.jsx b/src/components/Cards/BlogCard.jsx
index 42914be..4b6d1ae 100644
--- a/src/components/Cards/BlogCard.jsx
+++ b/src/components/Cards/BlogCard.jsx
@@ -1,13 +1,17 @@
-import Link from "next/link";
 import Image from "next/image";
-
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useTranslation } from "next-i18next";
 const Card = ({ title, text, imgSrc, url }) => {
+    const { t } = useTranslation("homepage");
+    const router = useRouter();
+
     return (
-        <div className='mx-3 overflow-hidden  aspect-video cursor-auto rounded-md relative group my-1'>
-            <div className='h-full z-50 opacity-90 group-hover:opacity-100 transition duration-300 ease-in-out cursor-auto absolute from-teal-950 to-transparent bg-gradient-to-t inset-x-0 -bottom-2  text-white flex items-end'>
+        <div className='group mx-3 overflow-hidden  aspect-video cursor-auto rounded-md relative group my-1'>
+            <div className='group-hover:cursor-pointer h-full z-50 opacity-90 group-hover:opacity-100 transition duration-300 ease-in-out cursor-auto absolute from-teal-950 to-transparent/5 bg-gradient-to-t inset-x-0   text-white flex items-end'>
                 <div>
                     <div className='transform-gpu p-4 space-y-0 text-lg group-hover:opacity-100 group-hover:translate-y-0 translate-y-3 pb-8  transition duration-300 ease-in-out'>
-                        <div className='font-semibold text-xl md:text-2xl'>
+                        <div className='font-semibold text-lg md:textxl'>
                             {title}
                         </div>
 
@@ -17,8 +21,7 @@ const Card = ({ title, text, imgSrc, url }) => {
                                 href={url}
                                 className='underline flex justify-end mr-5 mt-2 text-teal-100 hover:text-teal-400 group-hover:animate-bounce text-base'
                             >
-                                {" "}
-                                Read more
+                                {t("blogs.more")}
                             </Link>
                         </div>
                     </div>
diff --git a/src/components/Cards/__test__/__snapshots__/BlogCard.test.js.snap b/src/components/Cards/__test__/__snapshots__/BlogCard.test.js.snap
index ffce470..d49bc53 100644
--- a/src/components/Cards/__test__/__snapshots__/BlogCard.test.js.snap
+++ b/src/components/Cards/__test__/__snapshots__/BlogCard.test.js.snap
@@ -2,17 +2,17 @@
 
 exports[`renders correctly 1`] = `
 <div
-  className="mx-3 overflow-hidden  aspect-video cursor-auto rounded-md relative group my-1"
+  className="group mx-3 overflow-hidden  aspect-video cursor-auto rounded-md relative group my-1"
 >
   <div
-    className="h-full z-50 opacity-90 group-hover:opacity-100 transition duration-300 ease-in-out cursor-auto absolute from-teal-950 to-transparent bg-gradient-to-t inset-x-0 -bottom-2  text-white flex items-end"
+    className="group-hover:cursor-pointer h-full z-50 opacity-90 group-hover:opacity-100 transition duration-300 ease-in-out cursor-auto absolute from-teal-950 to-transparent/5 bg-gradient-to-t inset-x-0   text-white flex items-end"
   >
     <div>
       <div
         className="transform-gpu p-4 space-y-0 text-lg group-hover:opacity-100 group-hover:translate-y-0 translate-y-3 pb-8  transition duration-300 ease-in-out"
       >
         <div
-          className="font-semibold text-xl md:text-2xl"
+          className="font-semibold text-lg md:textxl"
         />
         <div
           className=" text-sm  text-white "
@@ -27,8 +27,7 @@ exports[`renders correctly 1`] = `
             onMouseEnter={[Function]}
             onTouchStart={[Function]}
           >
-             
-            Read more
+            blogs.more
           </a>
         </div>
       </div>
diff --git a/src/components/Home/HomePageWrapper.jsx b/src/components/Home/HomePageWrapper.jsx
index 36bcc60..cbd1df3 100644
--- a/src/components/Home/HomePageWrapper.jsx
+++ b/src/components/Home/HomePageWrapper.jsx
@@ -4,13 +4,13 @@ import HeroSection from "@/components/Home/HeroSection";
 import RecentBlogsSection from "@/components/Home/RecentBlogsSection";
 import TicketsSection from "@/components/Home/TicketsSection";
 
-const HomePageWrapper = () => {
+const HomePageWrapper = ({ posts }) => {
     return (
         <>
             <HeroSection />
             <AppointmentSection />
             <CommunicationSection />
-            <RecentBlogsSection />
+            <RecentBlogsSection posts={posts} />
             <TicketsSection />
         </>
     );
diff --git a/src/components/Home/RecentBlogsSection.jsx b/src/components/Home/RecentBlogsSection.jsx
index d480080..33f1cac 100644
--- a/src/components/Home/RecentBlogsSection.jsx
+++ b/src/components/Home/RecentBlogsSection.jsx
@@ -1,47 +1,15 @@
+import { useTranslation } from "next-i18next";
 import Slider from "react-slick";
 
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
 
 import Card from "../Cards/BlogCard";
-
-import { useTranslation } from "next-i18next";
 import Reveal from "../utils/Reveal";
+import { urlForImage } from "../../../sanity/lib/image";
 
-const RecentBlogsSection = () => {
+const RecentBlogsSection = ({ posts }) => {
     const { t } = useTranslation("homepage");
-    const blogs = [
-        {
-            title: "Mental Health and technology",
-            body: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum! Provident similique accusantium nemo autem",
-            url: "",
-            blogImg: "/Images/blog-img-placeholder.svg",
-        },
-        {
-            title: "Mental Health and technology",
-            body: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum! Provident similique accusantium nemo autem",
-            url: "",
-            blogImg: "/Images/blog-img-placeholder.svg",
-        },
-        {
-            title: "Mental Health and technology",
-            body: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum! Provident similique accusantium nemo autem",
-            url: "",
-            blogImg: "/Images/blog-img-placeholder.svg",
-        },
-        {
-            title: "Mental Health and technology",
-            body: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum! Provident similique accusantium nemo autem",
-            url: "",
-            blogImg: "/Images/blog-img-placeholder.svg",
-        },
-        {
-            title: "Mental Health and technology",
-            body: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum! Provident similique accusantium nemo autem",
-            url: "",
-            blogImg: "/Images/blog-img-placeholder.svg",
-        },
-    ];
 
     const settings = {
         dots: true,
@@ -65,7 +33,7 @@ const RecentBlogsSection = () => {
                 },
             },
             {
-                breakpoint: 600,
+                breakpoint: 820,
                 settings: {
                     slidesToShow: 2,
                     slidesToScroll: 2,
@@ -82,21 +50,24 @@ const RecentBlogsSection = () => {
         ],
     };
     return (
-        <div className='container max-w-[100%] bg-[#EAF8F9] p-16'>
+        <div className='max-w-[100%] bg-[#EAF8F9] p-5'>
             <Reveal>
-                <h2 className='lg:ml-24 md:ml-12 ml-5 font-bold font-atkinson block text-3xl md:text-4xl lg:text-5xl rtl:md:text-3xl  rtl:lg:text-4xl uppercase break-words text-black mb-5  md:mb-10'>
+                <h2 className='text-center font-bold font-atkinson block text-3xl md:text-4xl lg:text-5xl rtl:md:text-3xl  rtl:lg:text-4xl uppercase break-words text-black mb-5  md:my-10 '>
                     {t("blogs.heading")}
                 </h2>
             </Reveal>
-            <Reveal>
-                <Slider {...settings} className='p-1 m-1 md:p-5 md:m-6 lg:m-16'>
-                    {blogs.map((blog, index) => (
+            <Reveal className=''>
+                <Slider
+                    {...settings}
+                    className='z-50 p-1 m-1 md:p-5 md:m-5 lg:my-10'
+                >
+                    {posts?.map((post) => (
                         <Card
-                            key={index}
-                            title={blog.title}
-                            url={blog.url}
-                            text={blog.body}
-                            imgSrc={blog.blogImg}
+                            key={post._ref}
+                            title={post.title}
+                            url={`${post.language}/blogs/${post.slug.current}`}
+                            text={post.description}
+                            imgSrc={urlForImage(post.mainImage).url()}
                         />
                     ))}
                 </Slider>
diff --git a/src/components/Home/__test__/RecentBlogsSection.test.js b/src/components/Home/__test__/RecentBlogsSection.test.js
index a23bce0..22993d6 100644
--- a/src/components/Home/__test__/RecentBlogsSection.test.js
+++ b/src/components/Home/__test__/RecentBlogsSection.test.js
@@ -1,4 +1,5 @@
 import renderer from "react-test-renderer";
+
 import TicketsSection from "@/components/Home/TicketsSection";
 
 it("renders correctly", () => {
diff --git a/src/components/Home/__test__/__snapshots__/HomePageWrapper.test.js.snap b/src/components/Home/__test__/__snapshots__/HomePageWrapper.test.js.snap
index 13fc0fd..2be40c8 100644
--- a/src/components/Home/__test__/__snapshots__/HomePageWrapper.test.js.snap
+++ b/src/components/Home/__test__/__snapshots__/HomePageWrapper.test.js.snap
@@ -1190,7 +1190,7 @@ Array [
     </div>
   </div>,
   <div
-    className="container max-w-[100%] bg-[#EAF8F9] p-16"
+    className="max-w-[100%] bg-[#EAF8F9] p-5"
   >
     <div
       style={
@@ -1209,7 +1209,7 @@ Array [
         }
       >
         <h2
-          className="lg:ml-24 md:ml-12 ml-5 font-bold font-atkinson block text-3xl md:text-4xl lg:text-5xl rtl:md:text-3xl  rtl:lg:text-4xl uppercase break-words text-black mb-5  md:mb-10"
+          className="text-center font-bold font-atkinson block text-3xl md:text-4xl lg:text-5xl rtl:md:text-3xl  rtl:lg:text-4xl uppercase break-words text-black mb-5  md:my-10 "
         >
           blogs.heading
         </h2>
@@ -1232,36 +1232,10 @@ Array [
         }
       >
         <div
-          className="slick-slider p-1 m-1 md:p-5 md:m-6 lg:m-16 slick-initialized"
-          dir="ltr"
+          className="slick-slider z-50 p-1 m-1 md:p-5 md:m-5 lg:my-10 slick-initialized"
         >
-          <button
-            className="slick-arrow slick-prev"
-            data-role="none"
-            onClick={[Function]}
-            style={
-              Object {
-                "display": "block",
-              }
-            }
-            type="button"
-          >
-             
-            Previous
-          </button>
           <div
             className="slick-list"
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            onMouseDown={[Function]}
-            onMouseLeave={null}
-            onMouseMove={null}
-            onMouseUp={[Function]}
-            onTouchCancel={null}
-            onTouchEnd={[Function]}
-            onTouchMove={null}
-            onTouchStart={[Function]}
-            style={Object {}}
           >
             <div
               className="slick-track"
@@ -1278,995 +1252,8 @@ Array [
                   "transition": "",
                 }
               }
-            >
-              <div
-                aria-hidden={true}
-                className="slick-slide slick-cloned"
-                data-index={-3}
-                onClick={[Function]}
-                style={
-                  Object {
-                    "width": 0,
-                  }
-                }
-                tabIndex="-1"
-              >
-                <div>
-                  <div
-                    className="mx-3 overflow-hidden  aspect-video cursor-auto rounded-md relative group my-1"
-                  >
-                    <div
-                      className="h-full z-50 opacity-90 group-hover:opacity-100 transition duration-300 ease-in-out cursor-auto absolute from-teal-950 to-transparent bg-gradient-to-t inset-x-0 -bottom-2  text-white flex items-end"
-                    >
-                      <div>
-                        <div
-                          className="transform-gpu p-4 space-y-0 text-lg group-hover:opacity-100 group-hover:translate-y-0 translate-y-3 pb-8  transition duration-300 ease-in-out"
-                        >
-                          <div
-                            className="font-semibold text-xl md:text-2xl"
-                          >
-                            Mental Health and technology
-                          </div>
-                          <div
-                            className=" text-sm  text-white "
-                          >
-                            <p
-                              className=" line-clamp-1"
-                            >
-                              Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum! Provident similique accusantium nemo autem
-                            </p>
-                            <a
-                              className="underline flex justify-end mr-5 mt-2 text-teal-100 hover:text-teal-400 group-hover:animate-bounce text-base"
-                              href=""
-                              onClick={[Function]}
-                              onMouseEnter={[Function]}
-                              onTouchStart={[Function]}
-                            >
-                               
-                              Read more
-                            </a>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <img
-                      alt="Mental Health and technology"
-                      className="object-cover w-full aspect-square group-hover:scale-110 transition duration-300 ease-in-out"
-                      data-nimg="1"
-                      decoding="async"
-                      height={200}
-                      loading="lazy"
-                      onError={[Function]}
-                      onLoad={[Function]}
-                      src="/Images/blog-img-placeholder.svg"
-                      style={
-                        Object {
-                          "color": "transparent",
-                        }
-                      }
-                      width={300}
-                    />
-                  </div>
-                </div>
-              </div>
-              <div
-                aria-hidden={true}
-                className="slick-slide slick-cloned"
-                data-index={-2}
-                onClick={[Function]}
-                style={
-                  Object {
-                    "width": 0,
-                  }
-                }
-                tabIndex="-1"
-              >
-                <div>
-                  <div
-                    className="mx-3 overflow-hidden  aspect-video cursor-auto rounded-md relative group my-1"
-                  >
-                    <div
-                      className="h-full z-50 opacity-90 group-hover:opacity-100 transition duration-300 ease-in-out cursor-auto absolute from-teal-950 to-transparent bg-gradient-to-t inset-x-0 -bottom-2  text-white flex items-end"
-                    >
-                      <div>
-                        <div
-                          className="transform-gpu p-4 space-y-0 text-lg group-hover:opacity-100 group-hover:translate-y-0 translate-y-3 pb-8  transition duration-300 ease-in-out"
-                        >
-                          <div
-                            className="font-semibold text-xl md:text-2xl"
-                          >
-                            Mental Health and technology
-                          </div>
-                          <div
-                            className=" text-sm  text-white "
-                          >
-                            <p
-                              className=" line-clamp-1"
-                            >
-                              Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum! Provident similique accusantium nemo autem
-                            </p>
-                            <a
-                              className="underline flex justify-end mr-5 mt-2 text-teal-100 hover:text-teal-400 group-hover:animate-bounce text-base"
-                              href=""
-                              onClick={[Function]}
-                              onMouseEnter={[Function]}
-                              onTouchStart={[Function]}
-                            >
-                               
-                              Read more
-                            </a>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <img
-                      alt="Mental Health and technology"
-                      className="object-cover w-full aspect-square group-hover:scale-110 transition duration-300 ease-in-out"
-                      data-nimg="1"
-                      decoding="async"
-                      height={200}
-                      loading="lazy"
-                      onError={[Function]}
-                      onLoad={[Function]}
-                      src="/Images/blog-img-placeholder.svg"
-                      style={
-                        Object {
-                          "color": "transparent",
-                        }
-                      }
-                      width={300}
-                    />
-                  </div>
-                </div>
-              </div>
-              <div
-                aria-hidden={true}
-                className="slick-slide slick-cloned"
-                data-index={-1}
-                onClick={[Function]}
-                style={
-                  Object {
-                    "width": 0,
-                  }
-                }
-                tabIndex="-1"
-              >
-                <div>
-                  <div
-                    className="mx-3 overflow-hidden  aspect-video cursor-auto rounded-md relative group my-1"
-                  >
-                    <div
-                      className="h-full z-50 opacity-90 group-hover:opacity-100 transition duration-300 ease-in-out cursor-auto absolute from-teal-950 to-transparent bg-gradient-to-t inset-x-0 -bottom-2  text-white flex items-end"
-                    >
-                      <div>
-                        <div
-                          className="transform-gpu p-4 space-y-0 text-lg group-hover:opacity-100 group-hover:translate-y-0 translate-y-3 pb-8  transition duration-300 ease-in-out"
-                        >
-                          <div
-                            className="font-semibold text-xl md:text-2xl"
-                          >
-                            Mental Health and technology
-                          </div>
-                          <div
-                            className=" text-sm  text-white "
-                          >
-                            <p
-                              className=" line-clamp-1"
-                            >
-                              Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum! Provident similique accusantium nemo autem
-                            </p>
-                            <a
-                              className="underline flex justify-end mr-5 mt-2 text-teal-100 hover:text-teal-400 group-hover:animate-bounce text-base"
-                              href=""
-                              onClick={[Function]}
-                              onMouseEnter={[Function]}
-                              onTouchStart={[Function]}
-                            >
-                               
-                              Read more
-                            </a>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <img
-                      alt="Mental Health and technology"
-                      className="object-cover w-full aspect-square group-hover:scale-110 transition duration-300 ease-in-out"
-                      data-nimg="1"
-                      decoding="async"
-                      height={200}
-                      loading="lazy"
-                      onError={[Function]}
-                      onLoad={[Function]}
-                      src="/Images/blog-img-placeholder.svg"
-                      style={
-                        Object {
-                          "color": "transparent",
-                        }
-                      }
-                      width={300}
-                    />
-                  </div>
-                </div>
-              </div>
-              <div
-                aria-hidden={false}
-                className="slick-slide slick-active slick-current"
-                data-index={0}
-                onClick={[Function]}
-                style={
-                  Object {
-                    "outline": "none",
-                    "width": 0,
-                  }
-                }
-                tabIndex="-1"
-              >
-                <div>
-                  <div
-                    className="mx-3 overflow-hidden  aspect-video cursor-auto rounded-md relative group my-1"
-                  >
-                    <div
-                      className="h-full z-50 opacity-90 group-hover:opacity-100 transition duration-300 ease-in-out cursor-auto absolute from-teal-950 to-transparent bg-gradient-to-t inset-x-0 -bottom-2  text-white flex items-end"
-                    >
-                      <div>
-                        <div
-                          className="transform-gpu p-4 space-y-0 text-lg group-hover:opacity-100 group-hover:translate-y-0 translate-y-3 pb-8  transition duration-300 ease-in-out"
-                        >
-                          <div
-                            className="font-semibold text-xl md:text-2xl"
-                          >
-                            Mental Health and technology
-                          </div>
-                          <div
-                            className=" text-sm  text-white "
-                          >
-                            <p
-                              className=" line-clamp-1"
-                            >
-                              Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum! Provident similique accusantium nemo autem
-                            </p>
-                            <a
-                              className="underline flex justify-end mr-5 mt-2 text-teal-100 hover:text-teal-400 group-hover:animate-bounce text-base"
-                              href=""
-                              onClick={[Function]}
-                              onMouseEnter={[Function]}
-                              onTouchStart={[Function]}
-                            >
-                               
-                              Read more
-                            </a>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <img
-                      alt="Mental Health and technology"
-                      className="object-cover w-full aspect-square group-hover:scale-110 transition duration-300 ease-in-out"
-                      data-nimg="1"
-                      decoding="async"
-                      height={200}
-                      loading="lazy"
-                      onError={[Function]}
-                      onLoad={[Function]}
-                      src="/Images/blog-img-placeholder.svg"
-                      style={
-                        Object {
-                          "color": "transparent",
-                        }
-                      }
-                      width={300}
-                    />
-                  </div>
-                </div>
-              </div>
-              <div
-                aria-hidden={false}
-                className="slick-slide slick-active"
-                data-index={1}
-                onClick={[Function]}
-                style={
-                  Object {
-                    "outline": "none",
-                    "width": 0,
-                  }
-                }
-                tabIndex="-1"
-              >
-                <div>
-                  <div
-                    className="mx-3 overflow-hidden  aspect-video cursor-auto rounded-md relative group my-1"
-                  >
-                    <div
-                      className="h-full z-50 opacity-90 group-hover:opacity-100 transition duration-300 ease-in-out cursor-auto absolute from-teal-950 to-transparent bg-gradient-to-t inset-x-0 -bottom-2  text-white flex items-end"
-                    >
-                      <div>
-                        <div
-                          className="transform-gpu p-4 space-y-0 text-lg group-hover:opacity-100 group-hover:translate-y-0 translate-y-3 pb-8  transition duration-300 ease-in-out"
-                        >
-                          <div
-                            className="font-semibold text-xl md:text-2xl"
-                          >
-                            Mental Health and technology
-                          </div>
-                          <div
-                            className=" text-sm  text-white "
-                          >
-                            <p
-                              className=" line-clamp-1"
-                            >
-                              Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum! Provident similique accusantium nemo autem
-                            </p>
-                            <a
-                              className="underline flex justify-end mr-5 mt-2 text-teal-100 hover:text-teal-400 group-hover:animate-bounce text-base"
-                              href=""
-                              onClick={[Function]}
-                              onMouseEnter={[Function]}
-                              onTouchStart={[Function]}
-                            >
-                               
-                              Read more
-                            </a>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <img
-                      alt="Mental Health and technology"
-                      className="object-cover w-full aspect-square group-hover:scale-110 transition duration-300 ease-in-out"
-                      data-nimg="1"
-                      decoding="async"
-                      height={200}
-                      loading="lazy"
-                      onError={[Function]}
-                      onLoad={[Function]}
-                      src="/Images/blog-img-placeholder.svg"
-                      style={
-                        Object {
-                          "color": "transparent",
-                        }
-                      }
-                      width={300}
-                    />
-                  </div>
-                </div>
-              </div>
-              <div
-                aria-hidden={false}
-                className="slick-slide slick-active"
-                data-index={2}
-                onClick={[Function]}
-                style={
-                  Object {
-                    "outline": "none",
-                    "width": 0,
-                  }
-                }
-                tabIndex="-1"
-              >
-                <div>
-                  <div
-                    className="mx-3 overflow-hidden  aspect-video cursor-auto rounded-md relative group my-1"
-                  >
-                    <div
-                      className="h-full z-50 opacity-90 group-hover:opacity-100 transition duration-300 ease-in-out cursor-auto absolute from-teal-950 to-transparent bg-gradient-to-t inset-x-0 -bottom-2  text-white flex items-end"
-                    >
-                      <div>
-                        <div
-                          className="transform-gpu p-4 space-y-0 text-lg group-hover:opacity-100 group-hover:translate-y-0 translate-y-3 pb-8  transition duration-300 ease-in-out"
-                        >
-                          <div
-                            className="font-semibold text-xl md:text-2xl"
-                          >
-                            Mental Health and technology
-                          </div>
-                          <div
-                            className=" text-sm  text-white "
-                          >
-                            <p
-                              className=" line-clamp-1"
-                            >
-                              Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum! Provident similique accusantium nemo autem
-                            </p>
-                            <a
-                              className="underline flex justify-end mr-5 mt-2 text-teal-100 hover:text-teal-400 group-hover:animate-bounce text-base"
-                              href=""
-                              onClick={[Function]}
-                              onMouseEnter={[Function]}
-                              onTouchStart={[Function]}
-                            >
-                               
-                              Read more
-                            </a>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <img
-                      alt="Mental Health and technology"
-                      className="object-cover w-full aspect-square group-hover:scale-110 transition duration-300 ease-in-out"
-                      data-nimg="1"
-                      decoding="async"
-                      height={200}
-                      loading="lazy"
-                      onError={[Function]}
-                      onLoad={[Function]}
-                      src="/Images/blog-img-placeholder.svg"
-                      style={
-                        Object {
-                          "color": "transparent",
-                        }
-                      }
-                      width={300}
-                    />
-                  </div>
-                </div>
-              </div>
-              <div
-                aria-hidden={true}
-                className="slick-slide"
-                data-index={3}
-                onClick={[Function]}
-                style={
-                  Object {
-                    "outline": "none",
-                    "width": 0,
-                  }
-                }
-                tabIndex="-1"
-              >
-                <div>
-                  <div
-                    className="mx-3 overflow-hidden  aspect-video cursor-auto rounded-md relative group my-1"
-                  >
-                    <div
-                      className="h-full z-50 opacity-90 group-hover:opacity-100 transition duration-300 ease-in-out cursor-auto absolute from-teal-950 to-transparent bg-gradient-to-t inset-x-0 -bottom-2  text-white flex items-end"
-                    >
-                      <div>
-                        <div
-                          className="transform-gpu p-4 space-y-0 text-lg group-hover:opacity-100 group-hover:translate-y-0 translate-y-3 pb-8  transition duration-300 ease-in-out"
-                        >
-                          <div
-                            className="font-semibold text-xl md:text-2xl"
-                          >
-                            Mental Health and technology
-                          </div>
-                          <div
-                            className=" text-sm  text-white "
-                          >
-                            <p
-                              className=" line-clamp-1"
-                            >
-                              Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum! Provident similique accusantium nemo autem
-                            </p>
-                            <a
-                              className="underline flex justify-end mr-5 mt-2 text-teal-100 hover:text-teal-400 group-hover:animate-bounce text-base"
-                              href=""
-                              onClick={[Function]}
-                              onMouseEnter={[Function]}
-                              onTouchStart={[Function]}
-                            >
-                               
-                              Read more
-                            </a>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <img
-                      alt="Mental Health and technology"
-                      className="object-cover w-full aspect-square group-hover:scale-110 transition duration-300 ease-in-out"
-                      data-nimg="1"
-                      decoding="async"
-                      height={200}
-                      loading="lazy"
-                      onError={[Function]}
-                      onLoad={[Function]}
-                      src="/Images/blog-img-placeholder.svg"
-                      style={
-                        Object {
-                          "color": "transparent",
-                        }
-                      }
-                      width={300}
-                    />
-                  </div>
-                </div>
-              </div>
-              <div
-                aria-hidden={true}
-                className="slick-slide"
-                data-index={4}
-                onClick={[Function]}
-                style={
-                  Object {
-                    "outline": "none",
-                    "width": 0,
-                  }
-                }
-                tabIndex="-1"
-              >
-                <div>
-                  <div
-                    className="mx-3 overflow-hidden  aspect-video cursor-auto rounded-md relative group my-1"
-                  >
-                    <div
-                      className="h-full z-50 opacity-90 group-hover:opacity-100 transition duration-300 ease-in-out cursor-auto absolute from-teal-950 to-transparent bg-gradient-to-t inset-x-0 -bottom-2  text-white flex items-end"
-                    >
-                      <div>
-                        <div
-                          className="transform-gpu p-4 space-y-0 text-lg group-hover:opacity-100 group-hover:translate-y-0 translate-y-3 pb-8  transition duration-300 ease-in-out"
-                        >
-                          <div
-                            className="font-semibold text-xl md:text-2xl"
-                          >
-                            Mental Health and technology
-                          </div>
-                          <div
-                            className=" text-sm  text-white "
-                          >
-                            <p
-                              className=" line-clamp-1"
-                            >
-                              Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum! Provident similique accusantium nemo autem
-                            </p>
-                            <a
-                              className="underline flex justify-end mr-5 mt-2 text-teal-100 hover:text-teal-400 group-hover:animate-bounce text-base"
-                              href=""
-                              onClick={[Function]}
-                              onMouseEnter={[Function]}
-                              onTouchStart={[Function]}
-                            >
-                               
-                              Read more
-                            </a>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <img
-                      alt="Mental Health and technology"
-                      className="object-cover w-full aspect-square group-hover:scale-110 transition duration-300 ease-in-out"
-                      data-nimg="1"
-                      decoding="async"
-                      height={200}
-                      loading="lazy"
-                      onError={[Function]}
-                      onLoad={[Function]}
-                      src="/Images/blog-img-placeholder.svg"
-                      style={
-                        Object {
-                          "color": "transparent",
-                        }
-                      }
-                      width={300}
-                    />
-                  </div>
-                </div>
-              </div>
-              <div
-                aria-hidden={true}
-                className="slick-slide slick-cloned"
-                data-index={5}
-                onClick={[Function]}
-                style={
-                  Object {
-                    "width": 0,
-                  }
-                }
-                tabIndex="-1"
-              >
-                <div>
-                  <div
-                    className="mx-3 overflow-hidden  aspect-video cursor-auto rounded-md relative group my-1"
-                  >
-                    <div
-                      className="h-full z-50 opacity-90 group-hover:opacity-100 transition duration-300 ease-in-out cursor-auto absolute from-teal-950 to-transparent bg-gradient-to-t inset-x-0 -bottom-2  text-white flex items-end"
-                    >
-                      <div>
-                        <div
-                          className="transform-gpu p-4 space-y-0 text-lg group-hover:opacity-100 group-hover:translate-y-0 translate-y-3 pb-8  transition duration-300 ease-in-out"
-                        >
-                          <div
-                            className="font-semibold text-xl md:text-2xl"
-                          >
-                            Mental Health and technology
-                          </div>
-                          <div
-                            className=" text-sm  text-white "
-                          >
-                            <p
-                              className=" line-clamp-1"
-                            >
-                              Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum! Provident similique accusantium nemo autem
-                            </p>
-                            <a
-                              className="underline flex justify-end mr-5 mt-2 text-teal-100 hover:text-teal-400 group-hover:animate-bounce text-base"
-                              href=""
-                              onClick={[Function]}
-                              onMouseEnter={[Function]}
-                              onTouchStart={[Function]}
-                            >
-                               
-                              Read more
-                            </a>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <img
-                      alt="Mental Health and technology"
-                      className="object-cover w-full aspect-square group-hover:scale-110 transition duration-300 ease-in-out"
-                      data-nimg="1"
-                      decoding="async"
-                      height={200}
-                      loading="lazy"
-                      onError={[Function]}
-                      onLoad={[Function]}
-                      src="/Images/blog-img-placeholder.svg"
-                      style={
-                        Object {
-                          "color": "transparent",
-                        }
-                      }
-                      width={300}
-                    />
-                  </div>
-                </div>
-              </div>
-              <div
-                aria-hidden={true}
-                className="slick-slide slick-cloned"
-                data-index={6}
-                onClick={[Function]}
-                style={
-                  Object {
-                    "width": 0,
-                  }
-                }
-                tabIndex="-1"
-              >
-                <div>
-                  <div
-                    className="mx-3 overflow-hidden  aspect-video cursor-auto rounded-md relative group my-1"
-                  >
-                    <div
-                      className="h-full z-50 opacity-90 group-hover:opacity-100 transition duration-300 ease-in-out cursor-auto absolute from-teal-950 to-transparent bg-gradient-to-t inset-x-0 -bottom-2  text-white flex items-end"
-                    >
-                      <div>
-                        <div
-                          className="transform-gpu p-4 space-y-0 text-lg group-hover:opacity-100 group-hover:translate-y-0 translate-y-3 pb-8  transition duration-300 ease-in-out"
-                        >
-                          <div
-                            className="font-semibold text-xl md:text-2xl"
-                          >
-                            Mental Health and technology
-                          </div>
-                          <div
-                            className=" text-sm  text-white "
-                          >
-                            <p
-                              className=" line-clamp-1"
-                            >
-                              Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum! Provident similique accusantium nemo autem
-                            </p>
-                            <a
-                              className="underline flex justify-end mr-5 mt-2 text-teal-100 hover:text-teal-400 group-hover:animate-bounce text-base"
-                              href=""
-                              onClick={[Function]}
-                              onMouseEnter={[Function]}
-                              onTouchStart={[Function]}
-                            >
-                               
-                              Read more
-                            </a>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <img
-                      alt="Mental Health and technology"
-                      className="object-cover w-full aspect-square group-hover:scale-110 transition duration-300 ease-in-out"
-                      data-nimg="1"
-                      decoding="async"
-                      height={200}
-                      loading="lazy"
-                      onError={[Function]}
-                      onLoad={[Function]}
-                      src="/Images/blog-img-placeholder.svg"
-                      style={
-                        Object {
-                          "color": "transparent",
-                        }
-                      }
-                      width={300}
-                    />
-                  </div>
-                </div>
-              </div>
-              <div
-                aria-hidden={true}
-                className="slick-slide slick-cloned"
-                data-index={7}
-                onClick={[Function]}
-                style={
-                  Object {
-                    "width": 0,
-                  }
-                }
-                tabIndex="-1"
-              >
-                <div>
-                  <div
-                    className="mx-3 overflow-hidden  aspect-video cursor-auto rounded-md relative group my-1"
-                  >
-                    <div
-                      className="h-full z-50 opacity-90 group-hover:opacity-100 transition duration-300 ease-in-out cursor-auto absolute from-teal-950 to-transparent bg-gradient-to-t inset-x-0 -bottom-2  text-white flex items-end"
-                    >
-                      <div>
-                        <div
-                          className="transform-gpu p-4 space-y-0 text-lg group-hover:opacity-100 group-hover:translate-y-0 translate-y-3 pb-8  transition duration-300 ease-in-out"
-                        >
-                          <div
-                            className="font-semibold text-xl md:text-2xl"
-                          >
-                            Mental Health and technology
-                          </div>
-                          <div
-                            className=" text-sm  text-white "
-                          >
-                            <p
-                              className=" line-clamp-1"
-                            >
-                              Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum! Provident similique accusantium nemo autem
-                            </p>
-                            <a
-                              className="underline flex justify-end mr-5 mt-2 text-teal-100 hover:text-teal-400 group-hover:animate-bounce text-base"
-                              href=""
-                              onClick={[Function]}
-                              onMouseEnter={[Function]}
-                              onTouchStart={[Function]}
-                            >
-                               
-                              Read more
-                            </a>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <img
-                      alt="Mental Health and technology"
-                      className="object-cover w-full aspect-square group-hover:scale-110 transition duration-300 ease-in-out"
-                      data-nimg="1"
-                      decoding="async"
-                      height={200}
-                      loading="lazy"
-                      onError={[Function]}
-                      onLoad={[Function]}
-                      src="/Images/blog-img-placeholder.svg"
-                      style={
-                        Object {
-                          "color": "transparent",
-                        }
-                      }
-                      width={300}
-                    />
-                  </div>
-                </div>
-              </div>
-              <div
-                aria-hidden={true}
-                className="slick-slide slick-cloned"
-                data-index={8}
-                onClick={[Function]}
-                style={
-                  Object {
-                    "width": 0,
-                  }
-                }
-                tabIndex="-1"
-              >
-                <div>
-                  <div
-                    className="mx-3 overflow-hidden  aspect-video cursor-auto rounded-md relative group my-1"
-                  >
-                    <div
-                      className="h-full z-50 opacity-90 group-hover:opacity-100 transition duration-300 ease-in-out cursor-auto absolute from-teal-950 to-transparent bg-gradient-to-t inset-x-0 -bottom-2  text-white flex items-end"
-                    >
-                      <div>
-                        <div
-                          className="transform-gpu p-4 space-y-0 text-lg group-hover:opacity-100 group-hover:translate-y-0 translate-y-3 pb-8  transition duration-300 ease-in-out"
-                        >
-                          <div
-                            className="font-semibold text-xl md:text-2xl"
-                          >
-                            Mental Health and technology
-                          </div>
-                          <div
-                            className=" text-sm  text-white "
-                          >
-                            <p
-                              className=" line-clamp-1"
-                            >
-                              Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum! Provident similique accusantium nemo autem
-                            </p>
-                            <a
-                              className="underline flex justify-end mr-5 mt-2 text-teal-100 hover:text-teal-400 group-hover:animate-bounce text-base"
-                              href=""
-                              onClick={[Function]}
-                              onMouseEnter={[Function]}
-                              onTouchStart={[Function]}
-                            >
-                               
-                              Read more
-                            </a>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <img
-                      alt="Mental Health and technology"
-                      className="object-cover w-full aspect-square group-hover:scale-110 transition duration-300 ease-in-out"
-                      data-nimg="1"
-                      decoding="async"
-                      height={200}
-                      loading="lazy"
-                      onError={[Function]}
-                      onLoad={[Function]}
-                      src="/Images/blog-img-placeholder.svg"
-                      style={
-                        Object {
-                          "color": "transparent",
-                        }
-                      }
-                      width={300}
-                    />
-                  </div>
-                </div>
-              </div>
-              <div
-                aria-hidden={true}
-                className="slick-slide slick-cloned"
-                data-index={9}
-                onClick={[Function]}
-                style={
-                  Object {
-                    "width": 0,
-                  }
-                }
-                tabIndex="-1"
-              >
-                <div>
-                  <div
-                    className="mx-3 overflow-hidden  aspect-video cursor-auto rounded-md relative group my-1"
-                  >
-                    <div
-                      className="h-full z-50 opacity-90 group-hover:opacity-100 transition duration-300 ease-in-out cursor-auto absolute from-teal-950 to-transparent bg-gradient-to-t inset-x-0 -bottom-2  text-white flex items-end"
-                    >
-                      <div>
-                        <div
-                          className="transform-gpu p-4 space-y-0 text-lg group-hover:opacity-100 group-hover:translate-y-0 translate-y-3 pb-8  transition duration-300 ease-in-out"
-                        >
-                          <div
-                            className="font-semibold text-xl md:text-2xl"
-                          >
-                            Mental Health and technology
-                          </div>
-                          <div
-                            className=" text-sm  text-white "
-                          >
-                            <p
-                              className=" line-clamp-1"
-                            >
-                              Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum! Provident similique accusantium nemo autem
-                            </p>
-                            <a
-                              className="underline flex justify-end mr-5 mt-2 text-teal-100 hover:text-teal-400 group-hover:animate-bounce text-base"
-                              href=""
-                              onClick={[Function]}
-                              onMouseEnter={[Function]}
-                              onTouchStart={[Function]}
-                            >
-                               
-                              Read more
-                            </a>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <img
-                      alt="Mental Health and technology"
-                      className="object-cover w-full aspect-square group-hover:scale-110 transition duration-300 ease-in-out"
-                      data-nimg="1"
-                      decoding="async"
-                      height={200}
-                      loading="lazy"
-                      onError={[Function]}
-                      onLoad={[Function]}
-                      src="/Images/blog-img-placeholder.svg"
-                      style={
-                        Object {
-                          "color": "transparent",
-                        }
-                      }
-                      width={300}
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
+            />
           </div>
-          <button
-            className="slick-arrow slick-next"
-            data-role="none"
-            onClick={[Function]}
-            style={
-              Object {
-                "display": "block",
-              }
-            }
-            type="button"
-          >
-             
-            Next
-          </button>
-          <ul
-            className="slick-dots"
-            onMouseEnter={null}
-            onMouseLeave={null}
-            onMouseOver={null}
-            style={
-              Object {
-                "display": "block",
-              }
-            }
-          >
-            <li
-              className="slick-active"
-            >
-              <button
-                onClick={[Function]}
-              >
-                1
-              </button>
-            </li>
-            <li
-              className=""
-            >
-              <button
-                onClick={[Function]}
-              >
-                2
-              </button>
-            </li>
-            <li
-              className=""
-            >
-              <button
-                onClick={[Function]}
-              >
-                3
-              </button>
-            </li>
-            <li
-              className=""
-            >
-              <button
-                onClick={[Function]}
-              >
-                4
-              </button>
-            </li>
-            <li
-              className=""
-            >
-              <button
-                onClick={[Function]}
-              >
-                5
-              </button>
-            </li>
-          </ul>
         </div>
       </div>
     </div>
diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
index 86b146c..1373641 100644
--- a/src/components/Navbar/Navbar.jsx
+++ b/src/components/Navbar/Navbar.jsx
@@ -1,19 +1,21 @@
-import Link from "next/link";
+import { motion, useMotionValueEvent, useScroll } from "framer-motion";
 import Image from "next/image";
-import { useEffect, useState } from "react";
-import { useTranslation } from "next-i18next";
+import Link from "next/link";
 import { useRouter } from "next/router";
-import { UserAuth } from "@/context/AuthContext";
-import { TbUserCircle } from "react-icons/tb";
+import { useTranslation } from "next-i18next";
+import { useEffect, useState } from "react";
+import { HiMenu } from "react-icons/hi";
 import { IoLanguage } from "react-icons/io5";
-import UserDropdown from "./dropdowns/UserDropdown";
-import AboutDropdown from "./dropdowns/AboutDropdown";
 import { MdArrowDropDown } from "react-icons/md";
-import LangDropdown from "./dropdowns/LangDropdown";
-import { HiMenu } from "react-icons/hi";
 import { MdOutlineClose } from "react-icons/md";
+import { TbUserCircle } from "react-icons/tb";
+
+import { UserAuth } from "@/context/AuthContext";
+
+import AboutDropdown from "./dropdowns/AboutDropdown";
+import LangDropdown from "./dropdowns/LangDropdown";
+import UserDropdown from "./dropdowns/UserDropdown";
 import Button from "../elements/Button";
-import { motion, useScroll, useMotionValueEvent } from "framer-motion";
 
 export default function Navbar() {
     const router = useRouter();
@@ -53,108 +55,24 @@ export default function Navbar() {
             }}
             animate={hidden ? "hidden" : "visible"}
             transition={{ duration: 0.35, ease: "easeInOut" }}
-            className='sticky bg-white top-0 z-50 md:h-20 md:pt-4  p-0 md:px-12 border-b'
+            className='z-50 sticky top-0 bg-white '
         >
-            <div className='relative justify-between mx-auto md:items-center md:flex md:px-8'>
-                <div>
-                    <div className='flex items-center justify-between py-3 md:py-0 '>
-                        {/* LOGO */}
-                        <Link href='/'>
-                            <Image
-                                src='/Images/logo.png'
-                                width={100}
-                                height={100}
-                                alt='logo'
-                            />
-                        </Link>
-                        <div className='md:hidden flex gap-x-4 items-center'>
-                            {!user ? (
-                                <div className='flex flex flex-row gap-x-2'>
-                                    <Link href='/login'>
-                                        <Button
-                                            transition={false}
-                                            buttonText={t("signup.login")}
-                                            color='darkteal'
-                                            buttonSize='fit'
-                                        />
-                                    </Link>
-                                </div>
-                            ) : (
-                                <div className='flex justify-end space-y-[30px] md:justify-center md:items-center md:flex-col md:space-y-[300px] z-50'>
-                                    <div
-                                        className='text-3xl relative'
-                                        onClick={toggleDropdown}
-                                    >
-                                        <TbUserCircle />
-                                    </div>
-                                    <div className='absolute '>
-                                        {isDropdownOpen && <UserDropdown />}
-                                    </div>
-                                </div>
-                            )}
-                            <button
-                                className='p-2 text-gray-700 rounded-md outline-none focus:border-gray-400 focus:border'
-                                onClick={() => setNavbar(!navbar)}
-                            >
-                                {navbar ? (
-                                    <>
-                                        <MdOutlineClose className='text-3xl text-black p-0 m-0' />
-                                    </>
-                                ) : (
-                                    <HiMenu className='text-3xl text-black p-0 m-0' />
-                                )}
-                            </button>
-                        </div>
-                    </div>
-                </div>
-                <div>
-                    <div
-                        className={`md:block  ${navbar ? " block" : "hidden"}`}
-                    >
-                        <ul className='bg-white h-screen mt-10 md:mt-0 md:h-auto space-y-2 md:space-y-0 md:space-x-10 items-center justify-center md:flex md:justify-between md:items-center'>
-                            <li
-                                className={`block text-DarkTeal font-atkinson text-lg text-center py-2 rounded-full w-48 mx-auto border border-gray-200 hover:bg-gray-50 hover:text-Teal md:border-0 md:border-b-[#1E4445] md:hover:bg-white md:rounded-none md:py-0 md:w-auto md:hover:border-b md:hover:text-Teal  ${
-                                    language === "ar" ? "pl-9" : ""
-                                }`}
-                            >
-                                <Link
-                                    href='/'
-                                    onClick={() => setNavbar(!navbar)}
-                                >
-                                    {t("navbar.home")}
-                                </Link>
-                            </li>
-                            <li className='block text-DarkTeal font-atkinson text-lg text-center py-2 rounded-full w-48 mx-auto border border-gray-200 hover:bg-gray-50 hover:text-Teal md:border-0 md:border-b-[#1E4445] md:hover:bg-white md:rounded-none md:py-0 md:w-auto md:hover:border-b md:hover:text-Teal'>
-                                <Link
-                                    href='/blogs'
-                                    onClick={() => setNavbar(!navbar)}
-                                >
-                                    {t("navbar.blogs")}
-                                </Link>
-                            </li>
-                            <li className='block text-DarkTeal font-atkinson text-lg text-center md:text-start py-2 rounded-full w-48 mx-auto border border-gray-200 hover:bg-gray-50 hover:text-Teal md:border-0 md:border-b-[#1E4445] md:hover:bg-white md:rounded-none md:py-0 md:w-auto md:hover:border-b md:hover:text-Teal '>
-                                <div className='group inline-block relative flex justify-center items-center flex-col space-y-[180px] '>
-                                    <button className='block flex justify-center items-center '>
-                                        {t("navbar.about")}{" "}
-                                        <MdArrowDropDown className='text-xl' />
-                                    </button>
-
-                                    <div className='absolute hidden bg-white z-50 group-hover:block '>
-                                        <AboutDropdown />
-                                    </div>
-                                </div>
-                            </li>
-                            <li className='block text-DarkTeal font-atkinson text-lg text-center py-2 rounded-full w-48 mx-auto border border-gray-200 hover:bg-gray-50 hover:text-Teal md:border-0 md:border-b-[#1E4445] md:hover:bg-white md:rounded-none md:py-0 md:w-auto md:hover:border-b md:hover:text-Teal'>
-                                <Link
-                                    href='/contact'
-                                    onClick={() => setNavbar(!navbar)}
-                                >
-                                    {t("navbar.contact")}
-                                </Link>
-                            </li>
-                            {!user ? (
-                                <li className='text-center '>
-                                    <div className='hidden md:flex flex flex-row gap-x-2'>
+            <div className=' mx-0 md:container md:mx-auto '>
+                <div className='relative justify-between bg-white md:items-center md:flex md:px-8 h-20 '>
+                    <div className=''>
+                        <div className='flex items-center justify-between py-3 md:py-0 '>
+                            {/* LOGO */}
+                            <Link href='/'>
+                                <Image
+                                    src='/Images/logo.png'
+                                    width={100}
+                                    height={100}
+                                    alt='logo'
+                                />
+                            </Link>
+                            <div className='md:hidden flex gap-x-4 items-center'>
+                                {!user ? (
+                                    <div className='flex flex-row gap-x-2'>
                                         <Link href='/login'>
                                             <Button
                                                 transition={false}
@@ -164,43 +82,133 @@ export default function Navbar() {
                                             />
                                         </Link>
                                     </div>
+                                ) : (
+                                    <div className='flex justify-end space-y-[30px] md:justify-center md:items-center md:flex-col md:space-y-[300px] z-50'>
+                                        <div
+                                            className='text-3xl relative'
+                                            onClick={toggleDropdown}
+                                        >
+                                            <TbUserCircle />
+                                        </div>
+                                        <div className='absolute '>
+                                            {isDropdownOpen && <UserDropdown />}
+                                        </div>
+                                    </div>
+                                )}
+                                <button
+                                    className='p-2 text-gray-700 rounded-md outline-none focus:border-gray-400 focus:border'
+                                    onClick={() => setNavbar(!navbar)}
+                                >
+                                    {navbar ? (
+                                        <>
+                                            <MdOutlineClose className='text-3xl text-black p-0 m-0' />
+                                        </>
+                                    ) : (
+                                        <HiMenu className='text-3xl text-black p-0 m-0' />
+                                    )}
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <div>
+                        <div
+                            className={`md:block ${
+                                navbar ? " block" : "hidden"
+                            }`}
+                        >
+                            <ul className='bg-white h-screen md:mt-0 md:h-auto space-y-2 md:space-y-0 md:space-x-10  items-center md:justify-center md:flex justify-start md:items-center flex-col flex md:flex-row pt-10 md:pt-0'>
+                                <li
+                                    className={`block text-DarkTeal font-atkinson text-lg text-center py-2 rounded-full w-48 mx-auto border border-gray-200 hover:bg-gray-50 hover:text-Teal md:border-0 md:border-b-[#1E4445] md:hover:bg-white md:rounded-none md:py-0 md:w-auto  md:hover:border-b md:hover:text-Teal  ${
+                                        language === "ar" ? "pl-9" : ""
+                                    }`}
+                                >
+                                    <Link
+                                        href='/'
+                                        onClick={() => setNavbar(!navbar)}
+                                    >
+                                        {t("navbar.home")}
+                                    </Link>
                                 </li>
-                            ) : (
-                                <div className='hidden md:flex justify-center items-center flex-col space-y-[300px] z-50'>
-                                    <div
-                                        className='text-3xl relative'
-                                        onClick={toggleDropdown}
+                                <li className='block text-DarkTeal font-atkinson text-lg text-center py-2 rounded-full w-48 mx-auto border border-gray-200 hover:bg-gray-50 hover:text-Teal md:border-0 md:border-b-[#1E4445] md:hover:bg-white md:rounded-none md:py-0 md:w-auto md:hover:border-b md:hover:text-Teal'>
+                                    <Link
+                                        href='/blogs'
+                                        onClick={() => setNavbar(!navbar)}
                                     >
-                                        <TbUserCircle />
+                                        {t("navbar.blogs")}
+                                    </Link>
+                                </li>
+                                <li className='block text-DarkTeal font-atkinson text-lg text-center md:text-start py-2 rounded-full w-48 mx-auto border border-gray-200 hover:bg-gray-50 hover:text-Teal md:border-0 md:border-b-[#1E4445] md:hover:bg-white md:rounded-none md:py-0 md:w-auto md:hover:border-b md:hover:text-Teal '>
+                                    <div className='group inline-block relative flex justify-center items-center flex-col space-y-[180px] '>
+                                        <button className='block flex justify-center items-center '>
+                                            {t("navbar.about")}{" "}
+                                            <MdArrowDropDown className='text-xl' />
+                                        </button>
+
+                                        <div className='absolute hidden bg-white z-50 group-hover:block '>
+                                            <AboutDropdown />
+                                        </div>
                                     </div>
-                                    <div className='absolute outline-none'>
-                                        {isDropdownOpen && <UserDropdown />}
+                                </li>
+                                <li className='block text-DarkTeal font-atkinson text-lg text-center py-2 rounded-full w-48 mx-auto border border-gray-200 hover:bg-gray-50 hover:text-Teal md:border-0 md:border-b-[#1E4445] md:hover:bg-white md:rounded-none md:py-0 md:w-auto md:hover:border-b md:hover:text-Teal'>
+                                    <Link
+                                        href='/contact'
+                                        onClick={() => setNavbar(!navbar)}
+                                    >
+                                        {t("navbar.contact")}
+                                    </Link>
+                                </li>
+                                {!user ? (
+                                    <li className='text-center '>
+                                        <div className='hidden md:flex flex flex-row gap-x-2'>
+                                            <Link href='/login'>
+                                                <Button
+                                                    transition={false}
+                                                    buttonText={t(
+                                                        "signup.login"
+                                                    )}
+                                                    color='darkteal'
+                                                    buttonSize='fit'
+                                                />
+                                            </Link>
+                                        </div>
+                                    </li>
+                                ) : (
+                                    <div className='hidden md:flex justify-center items-center flex-col space-y-[300px] z-50'>
+                                        <div
+                                            className='text-3xl relative'
+                                            onClick={toggleDropdown}
+                                        >
+                                            <TbUserCircle />
+                                        </div>
+                                        <div className='absolute outline-none'>
+                                            {isDropdownOpen && <UserDropdown />}
+                                        </div>
                                     </div>
-                                </div>
-                            )}
-                            <li className='hidden md:flex'>
-                                <div className='group inline-block relative flex justify-center items-center flex-col space-y-[150px] z-50'>
-                                    <button className='flex items-center justify-center mt-2 text-xl py-2 w-20 mx-auto md:w-auto '>
-                                        <IoLanguage />
-                                    </button>
+                                )}
+                                <li className='hidden md:flex'>
+                                    <div className='group inline-block relative flex justify-center items-center flex-col space-y-[150px] z-50'>
+                                        <button className='flex items-center justify-center mt-2 text-xl py-2 w-20 mx-auto md:w-auto '>
+                                            <IoLanguage />
+                                        </button>
 
-                                    <div className='absolute hidden group-hover:block'>
-                                        <LangDropdown />
+                                        <div className='absolute hidden group-hover:block'>
+                                            <LangDropdown />
+                                        </div>
                                     </div>
-                                </div>
-                            </li>
-                            <li className='md:hidden block text-DarkTeal font-atkinson text-lg text-center py-2 rounded-full w-48 mx-auto border border-gray-200 hover:bg-gray-50 hover:text-Teal md:border-0 md:border-b-[#1E4445] md:hover:bg-white md:rounded-none md:py-0 md:w-auto md:hover:border-b md:hover:text-Teal'>
-                                <div className='group inline-block relative flex justify-center items-center flex-col space-y-[135px] md:space-y-[150px] '>
-                                    <button className=' md:block '>
-                                        {t("navbar.language")}
-                                    </button>
+                                </li>
+                                <li className='md:hidden block text-DarkTeal font-atkinson text-lg text-center py-2 rounded-full w-48 mx-auto border border-gray-200 hover:bg-gray-50 hover:text-Teal md:border-0 md:border-b-[#1E4445] md:hover:bg-white md:rounded-none md:py-0 md:w-auto md:hover:border-b md:hover:text-Teal'>
+                                    <div className='group  relative flex justify-center items-center flex-col space-y-[135px] md:space-y-[150px] '>
+                                        <button className=' md:block '>
+                                            {t("navbar.language")}
+                                        </button>
 
-                                    <div className='absolute hidden group-hover:block'>
-                                        <LangDropdown />
+                                        <div className='absolute hidden group-hover:block'>
+                                            <LangDropdown />
+                                        </div>
                                     </div>
-                                </div>
-                            </li>
-                        </ul>
+                                </li>
+                            </ul>
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/src/components/Navbar/__test__/__snapshots__/Navbar.test.js.snap b/src/components/Navbar/__test__/__snapshots__/Navbar.test.js.snap
index 523e7d3..535bd13 100644
--- a/src/components/Navbar/__test__/__snapshots__/Navbar.test.js.snap
+++ b/src/components/Navbar/__test__/__snapshots__/Navbar.test.js.snap
@@ -2,164 +2,62 @@
 
 exports[`renders correctly 1`] = `
 <nav
-  className="sticky bg-white top-0 z-50 md:h-20 md:pt-4  p-0 md:px-12 border-b"
+  className="z-50 sticky top-0 bg-white "
   style={Object {}}
 >
   <div
-    className="relative justify-between mx-auto md:items-center md:flex md:px-8"
+    className=" mx-0 md:container md:mx-auto "
   >
-    <div>
+    <div
+      className="relative justify-between bg-white md:items-center md:flex md:px-8 h-20 "
+    >
       <div
-        className="flex items-center justify-between py-3 md:py-0 "
+        className=""
       >
-        <a
-          href="/"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          onTouchStart={[Function]}
-        >
-          <img
-            alt="logo"
-            data-nimg="1"
-            decoding="async"
-            height={100}
-            loading="lazy"
-            onError={[Function]}
-            onLoad={[Function]}
-            src="/_next/image?url=%2FImages%2Flogo.png&w=256&q=75"
-            srcSet="/_next/image?url=%2FImages%2Flogo.png&w=128&q=75 1x, /_next/image?url=%2FImages%2Flogo.png&w=256&q=75 2x"
-            style={
-              Object {
-                "color": "transparent",
-              }
-            }
-            width={100}
-          />
-        </a>
         <div
-          className="md:hidden flex gap-x-4 items-center"
+          className="flex items-center justify-between py-3 md:py-0 "
         >
-          <div
-            className="flex justify-end space-y-[30px] md:justify-center md:items-center md:flex-col md:space-y-[300px] z-50"
-          >
-            <div
-              className="text-3xl relative"
-              onClick={[Function]}
-            >
-              <svg
-                fill="none"
-                height="1em"
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                style={
-                  Object {
-                    "color": undefined,
-                  }
-                }
-                viewBox="0 0 24 24"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M0 0h24v24H0z"
-                  fill="none"
-                  stroke="none"
-                />
-                <path
-                  d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"
-                />
-                <path
-                  d="M12 10m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"
-                />
-                <path
-                  d="M6.168 18.849a4 4 0 0 1 3.832 -2.849h4a4 4 0 0 1 3.834 2.855"
-                />
-              </svg>
-            </div>
-            <div
-              className="absolute "
-            />
-          </div>
-          <button
-            className="p-2 text-gray-700 rounded-md outline-none focus:border-gray-400 focus:border"
+          <a
+            href="/"
             onClick={[Function]}
+            onMouseEnter={[Function]}
+            onTouchStart={[Function]}
           >
-            <svg
-              aria-hidden="true"
-              className="text-3xl text-black p-0 m-0"
-              fill="currentColor"
-              height="1em"
-              stroke="currentColor"
-              strokeWidth="0"
+            <img
+              alt="logo"
+              data-nimg="1"
+              decoding="async"
+              height={100}
+              loading="lazy"
+              onError={[Function]}
+              onLoad={[Function]}
+              src="/_next/image?url=%2FImages%2Flogo.png&w=256&q=75"
+              srcSet="/_next/image?url=%2FImages%2Flogo.png&w=128&q=75 1x, /_next/image?url=%2FImages%2Flogo.png&w=256&q=75 2x"
               style={
                 Object {
-                  "color": undefined,
+                  "color": "transparent",
                 }
               }
-              viewBox="0 0 20 20"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                clipRule="evenodd"
-                d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
-                fillRule="evenodd"
-              />
-            </svg>
-          </button>
-        </div>
-      </div>
-    </div>
-    <div>
-      <div
-        className="md:block  hidden"
-      >
-        <ul
-          className="bg-white h-screen mt-10 md:mt-0 md:h-auto space-y-2 md:space-y-0 md:space-x-10 items-center justify-center md:flex md:justify-between md:items-center"
-        >
-          <li
-            className="block text-DarkTeal font-atkinson text-lg text-center py-2 rounded-full w-48 mx-auto border border-gray-200 hover:bg-gray-50 hover:text-Teal md:border-0 md:border-b-[#1E4445] md:hover:bg-white md:rounded-none md:py-0 md:w-auto md:hover:border-b md:hover:text-Teal  "
-          >
-            <a
-              href="/"
-              onClick={[Function]}
-              onMouseEnter={[Function]}
-              onTouchStart={[Function]}
-            >
-              navbar.home
-            </a>
-          </li>
-          <li
-            className="block text-DarkTeal font-atkinson text-lg text-center py-2 rounded-full w-48 mx-auto border border-gray-200 hover:bg-gray-50 hover:text-Teal md:border-0 md:border-b-[#1E4445] md:hover:bg-white md:rounded-none md:py-0 md:w-auto md:hover:border-b md:hover:text-Teal"
-          >
-            <a
-              href="/blogs"
-              onClick={[Function]}
-              onMouseEnter={[Function]}
-              onTouchStart={[Function]}
-            >
-              navbar.blogs
-            </a>
-          </li>
-          <li
-            className="block text-DarkTeal font-atkinson text-lg text-center md:text-start py-2 rounded-full w-48 mx-auto border border-gray-200 hover:bg-gray-50 hover:text-Teal md:border-0 md:border-b-[#1E4445] md:hover:bg-white md:rounded-none md:py-0 md:w-auto md:hover:border-b md:hover:text-Teal "
+              width={100}
+            />
+          </a>
+          <div
+            className="md:hidden flex gap-x-4 items-center"
           >
             <div
-              className="group inline-block relative flex justify-center items-center flex-col space-y-[180px] "
+              className="flex justify-end space-y-[30px] md:justify-center md:items-center md:flex-col md:space-y-[300px] z-50"
             >
-              <button
-                className="block flex justify-center items-center "
+              <div
+                className="text-3xl relative"
+                onClick={[Function]}
               >
-                navbar.about
-                 
                 <svg
-                  className="text-xl"
-                  fill="currentColor"
+                  fill="none"
                   height="1em"
                   stroke="currentColor"
-                  strokeWidth="0"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
                   style={
                     Object {
                       "color": undefined,
@@ -172,240 +70,348 @@ exports[`renders correctly 1`] = `
                   <path
                     d="M0 0h24v24H0z"
                     fill="none"
+                    stroke="none"
+                  />
+                  <path
+                    d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"
                   />
                   <path
-                    d="M7 10l5 5 5-5z"
+                    d="M12 10m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"
+                  />
+                  <path
+                    d="M6.168 18.849a4 4 0 0 1 3.832 -2.849h4a4 4 0 0 1 3.834 2.855"
                   />
                 </svg>
-              </button>
-              <div
-                className="absolute hidden bg-white z-50 group-hover:block "
-              >
-                <div
-                  className="md:w-36 w-48 bg-white font-atkinson border p-2 shadow-md rounded-lg "
-                >
-                  <ul
-                    className="py-2 first:pt-0 z-60 last:pb-0"
-                  >
-                    <a
-                      href="/about-us"
-                      onClick={[Function]}
-                      onMouseEnter={[Function]}
-                      onTouchStart={[Function]}
-                    >
-                      <li
-                        className=" py-2 px-3 rounded-lg text-lg text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 dark:focus:bg-gray-700"
-                        href="#"
-                      >
-                        navbar.aboutUs
-                      </li>
-                    </a>
-                    <a
-                      href="/team"
-                      onClick={[Function]}
-                      onMouseEnter={[Function]}
-                      onTouchStart={[Function]}
-                    >
-                      <li
-                        className=" py-2 px-3 rounded-lg text-lg text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 dark:focus:bg-gray-700"
-                        href="#"
-                      >
-                        navbar.team
-                      </li>
-                    </a>
-                    <a
-                      href="/careers"
-                      onClick={[Function]}
-                      onMouseEnter={[Function]}
-                      onTouchStart={[Function]}
-                    >
-                      <li
-                        className=" py-2 px-3 rounded-lg text-lg text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 dark:focus:bg-gray-700"
-                        href="#"
-                      >
-                        navbar.careers
-                      </li>
-                    </a>
-                  </ul>
-                </div>
               </div>
+              <div
+                className="absolute "
+              />
             </div>
-          </li>
-          <li
-            className="block text-DarkTeal font-atkinson text-lg text-center py-2 rounded-full w-48 mx-auto border border-gray-200 hover:bg-gray-50 hover:text-Teal md:border-0 md:border-b-[#1E4445] md:hover:bg-white md:rounded-none md:py-0 md:w-auto md:hover:border-b md:hover:text-Teal"
-          >
-            <a
-              href="/contact"
-              onClick={[Function]}
-              onMouseEnter={[Function]}
-              onTouchStart={[Function]}
-            >
-              navbar.contact
-            </a>
-          </li>
-          <div
-            className="hidden md:flex justify-center items-center flex-col space-y-[300px] z-50"
-          >
-            <div
-              className="text-3xl relative"
+            <button
+              className="p-2 text-gray-700 rounded-md outline-none focus:border-gray-400 focus:border"
               onClick={[Function]}
             >
               <svg
-                fill="none"
+                aria-hidden="true"
+                className="text-3xl text-black p-0 m-0"
+                fill="currentColor"
                 height="1em"
                 stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
+                strokeWidth="0"
                 style={
                   Object {
                     "color": undefined,
                   }
                 }
-                viewBox="0 0 24 24"
+                viewBox="0 0 20 20"
                 width="1em"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M0 0h24v24H0z"
-                  fill="none"
-                  stroke="none"
-                />
-                <path
-                  d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"
-                />
-                <path
-                  d="M12 10m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"
-                />
-                <path
-                  d="M6.168 18.849a4 4 0 0 1 3.832 -2.849h4a4 4 0 0 1 3.834 2.855"
+                  clipRule="evenodd"
+                  d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+                  fillRule="evenodd"
                 />
               </svg>
-            </div>
-            <div
-              className="absolute outline-none"
-            />
+            </button>
           </div>
-          <li
-            className="hidden md:flex"
+        </div>
+      </div>
+      <div>
+        <div
+          className="md:block hidden"
+        >
+          <ul
+            className="bg-white h-screen md:mt-0 md:h-auto space-y-2 md:space-y-0 md:space-x-10  items-center md:justify-center md:flex justify-start md:items-center flex-col flex md:flex-row pt-10 md:pt-0"
           >
+            <li
+              className="block text-DarkTeal font-atkinson text-lg text-center py-2 rounded-full w-48 mx-auto border border-gray-200 hover:bg-gray-50 hover:text-Teal md:border-0 md:border-b-[#1E4445] md:hover:bg-white md:rounded-none md:py-0 md:w-auto  md:hover:border-b md:hover:text-Teal  "
+            >
+              <a
+                href="/"
+                onClick={[Function]}
+                onMouseEnter={[Function]}
+                onTouchStart={[Function]}
+              >
+                navbar.home
+              </a>
+            </li>
+            <li
+              className="block text-DarkTeal font-atkinson text-lg text-center py-2 rounded-full w-48 mx-auto border border-gray-200 hover:bg-gray-50 hover:text-Teal md:border-0 md:border-b-[#1E4445] md:hover:bg-white md:rounded-none md:py-0 md:w-auto md:hover:border-b md:hover:text-Teal"
+            >
+              <a
+                href="/blogs"
+                onClick={[Function]}
+                onMouseEnter={[Function]}
+                onTouchStart={[Function]}
+              >
+                navbar.blogs
+              </a>
+            </li>
+            <li
+              className="block text-DarkTeal font-atkinson text-lg text-center md:text-start py-2 rounded-full w-48 mx-auto border border-gray-200 hover:bg-gray-50 hover:text-Teal md:border-0 md:border-b-[#1E4445] md:hover:bg-white md:rounded-none md:py-0 md:w-auto md:hover:border-b md:hover:text-Teal "
+            >
+              <div
+                className="group inline-block relative flex justify-center items-center flex-col space-y-[180px] "
+              >
+                <button
+                  className="block flex justify-center items-center "
+                >
+                  navbar.about
+                   
+                  <svg
+                    className="text-xl"
+                    fill="currentColor"
+                    height="1em"
+                    stroke="currentColor"
+                    strokeWidth="0"
+                    style={
+                      Object {
+                        "color": undefined,
+                      }
+                    }
+                    viewBox="0 0 24 24"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M0 0h24v24H0z"
+                      fill="none"
+                    />
+                    <path
+                      d="M7 10l5 5 5-5z"
+                    />
+                  </svg>
+                </button>
+                <div
+                  className="absolute hidden bg-white z-50 group-hover:block "
+                >
+                  <div
+                    className="md:w-36 w-48 bg-white font-atkinson border p-2 shadow-md rounded-lg "
+                  >
+                    <ul
+                      className="py-2 first:pt-0 z-60 last:pb-0"
+                    >
+                      <a
+                        href="/about-us"
+                        onClick={[Function]}
+                        onMouseEnter={[Function]}
+                        onTouchStart={[Function]}
+                      >
+                        <li
+                          className=" py-2 px-3 rounded-lg text-lg text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 dark:focus:bg-gray-700"
+                          href="#"
+                        >
+                          navbar.aboutUs
+                        </li>
+                      </a>
+                      <a
+                        href="/team"
+                        onClick={[Function]}
+                        onMouseEnter={[Function]}
+                        onTouchStart={[Function]}
+                      >
+                        <li
+                          className=" py-2 px-3 rounded-lg text-lg text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 dark:focus:bg-gray-700"
+                          href="#"
+                        >
+                          navbar.team
+                        </li>
+                      </a>
+                      <a
+                        href="/careers"
+                        onClick={[Function]}
+                        onMouseEnter={[Function]}
+                        onTouchStart={[Function]}
+                      >
+                        <li
+                          className=" py-2 px-3 rounded-lg text-lg text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 dark:focus:bg-gray-700"
+                          href="#"
+                        >
+                          navbar.careers
+                        </li>
+                      </a>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li
+              className="block text-DarkTeal font-atkinson text-lg text-center py-2 rounded-full w-48 mx-auto border border-gray-200 hover:bg-gray-50 hover:text-Teal md:border-0 md:border-b-[#1E4445] md:hover:bg-white md:rounded-none md:py-0 md:w-auto md:hover:border-b md:hover:text-Teal"
+            >
+              <a
+                href="/contact"
+                onClick={[Function]}
+                onMouseEnter={[Function]}
+                onTouchStart={[Function]}
+              >
+                navbar.contact
+              </a>
+            </li>
             <div
-              className="group inline-block relative flex justify-center items-center flex-col space-y-[150px] z-50"
+              className="hidden md:flex justify-center items-center flex-col space-y-[300px] z-50"
             >
-              <button
-                className="flex items-center justify-center mt-2 text-xl py-2 w-20 mx-auto md:w-auto "
+              <div
+                className="text-3xl relative"
+                onClick={[Function]}
               >
                 <svg
-                  fill="currentColor"
+                  fill="none"
                   height="1em"
                   stroke="currentColor"
-                  strokeWidth="0"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
                   style={
                     Object {
                       "color": undefined,
                     }
                   }
-                  viewBox="0 0 512 512"
+                  viewBox="0 0 24 24"
                   width="1em"
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
-                    d="M478.33 433.6l-90-218a22 22 0 00-40.67 0l-90 218a22 22 0 1040.67 16.79L316.66 406h102.67l18.33 44.39A22 22 0 00458 464a22 22 0 0020.32-30.4zM334.83 362L368 281.65 401.17 362zm-66.99-19.08a22 22 0 00-4.89-30.7c-.2-.15-15-11.13-36.49-34.73 39.65-53.68 62.11-114.75 71.27-143.49H330a22 22 0 000-44H214V70a22 22 0 00-44 0v20H54a22 22 0 000 44h197.25c-9.52 26.95-27.05 69.5-53.79 108.36-31.41-41.68-43.08-68.65-43.17-68.87a22 22 0 00-40.58 17c.58 1.38 14.55 34.23 52.86 83.93.92 1.19 1.83 2.35 2.74 3.51-39.24 44.35-77.74 71.86-93.85 80.74a22 22 0 1021.07 38.63c2.16-1.18 48.6-26.89 101.63-85.59 22.52 24.08 38 35.44 38.93 36.1a22 22 0 0030.75-4.9z"
+                    d="M0 0h24v24H0z"
+                    fill="none"
+                    stroke="none"
+                  />
+                  <path
+                    d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"
+                  />
+                  <path
+                    d="M12 10m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"
+                  />
+                  <path
+                    d="M6.168 18.849a4 4 0 0 1 3.832 -2.849h4a4 4 0 0 1 3.834 2.855"
                   />
                 </svg>
-              </button>
+              </div>
+              <div
+                className="absolute outline-none"
+              />
+            </div>
+            <li
+              className="hidden md:flex"
+            >
               <div
-                className="absolute hidden group-hover:block"
+                className="group inline-block relative flex justify-center items-center flex-col space-y-[150px] z-50"
               >
+                <button
+                  className="flex items-center justify-center mt-2 text-xl py-2 w-20 mx-auto md:w-auto "
+                >
+                  <svg
+                    fill="currentColor"
+                    height="1em"
+                    stroke="currentColor"
+                    strokeWidth="0"
+                    style={
+                      Object {
+                        "color": undefined,
+                      }
+                    }
+                    viewBox="0 0 512 512"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M478.33 433.6l-90-218a22 22 0 00-40.67 0l-90 218a22 22 0 1040.67 16.79L316.66 406h102.67l18.33 44.39A22 22 0 00458 464a22 22 0 0020.32-30.4zM334.83 362L368 281.65 401.17 362zm-66.99-19.08a22 22 0 00-4.89-30.7c-.2-.15-15-11.13-36.49-34.73 39.65-53.68 62.11-114.75 71.27-143.49H330a22 22 0 000-44H214V70a22 22 0 00-44 0v20H54a22 22 0 000 44h197.25c-9.52 26.95-27.05 69.5-53.79 108.36-31.41-41.68-43.08-68.65-43.17-68.87a22 22 0 00-40.58 17c.58 1.38 14.55 34.23 52.86 83.93.92 1.19 1.83 2.35 2.74 3.51-39.24 44.35-77.74 71.86-93.85 80.74a22 22 0 1021.07 38.63c2.16-1.18 48.6-26.89 101.63-85.59 22.52 24.08 38 35.44 38.93 36.1a22 22 0 0030.75-4.9z"
+                    />
+                  </svg>
+                </button>
                 <div
-                  className="w-48 md:w-32 bg-white font-atkinson border bg-grey p-2 shadow-md rounded-lg"
+                  className="absolute hidden group-hover:block"
                 >
-                  <ul
-                    className="py-2 first:pt-0  last:pb-0"
+                  <div
+                    className="w-48 md:w-32 bg-white font-atkinson border bg-grey p-2 shadow-md rounded-lg"
                   >
-                    <a
-                      href="#"
-                      onClick={[Function]}
-                      onMouseEnter={[Function]}
-                      onTouchStart={[Function]}
+                    <ul
+                      className="py-2 first:pt-0  last:pb-0"
                     >
-                      <li
-                        className=" py-2 px-3 rounded-lg text-lg text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 dark:focus:bg-gray-700"
+                      <a
                         href="#"
+                        onClick={[Function]}
+                        onMouseEnter={[Function]}
+                        onTouchStart={[Function]}
                       >
-                        English
-                      </li>
-                    </a>
-                    <a
-                      href="#"
-                      onClick={[Function]}
-                      onMouseEnter={[Function]}
-                      onTouchStart={[Function]}
-                    >
-                      <li
-                        className=" py-2 px-3 rounded-lg text-lg text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 dark:focus:bg-gray-700"
+                        <li
+                          className=" py-2 px-3 rounded-lg text-lg text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 dark:focus:bg-gray-700"
+                          href="#"
+                        >
+                          English
+                        </li>
+                      </a>
+                      <a
                         href="#"
+                        onClick={[Function]}
+                        onMouseEnter={[Function]}
+                        onTouchStart={[Function]}
                       >
-                        العربية
-                      </li>
-                    </a>
-                  </ul>
+                        <li
+                          className=" py-2 px-3 rounded-lg text-lg text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 dark:focus:bg-gray-700"
+                          href="#"
+                        >
+                          العربية
+                        </li>
+                      </a>
+                    </ul>
+                  </div>
                 </div>
               </div>
-            </div>
-          </li>
-          <li
-            className="md:hidden block text-DarkTeal font-atkinson text-lg text-center py-2 rounded-full w-48 mx-auto border border-gray-200 hover:bg-gray-50 hover:text-Teal md:border-0 md:border-b-[#1E4445] md:hover:bg-white md:rounded-none md:py-0 md:w-auto md:hover:border-b md:hover:text-Teal"
-          >
-            <div
-              className="group inline-block relative flex justify-center items-center flex-col space-y-[135px] md:space-y-[150px] "
+            </li>
+            <li
+              className="md:hidden block text-DarkTeal font-atkinson text-lg text-center py-2 rounded-full w-48 mx-auto border border-gray-200 hover:bg-gray-50 hover:text-Teal md:border-0 md:border-b-[#1E4445] md:hover:bg-white md:rounded-none md:py-0 md:w-auto md:hover:border-b md:hover:text-Teal"
             >
-              <button
-                className=" md:block "
-              >
-                navbar.language
-              </button>
               <div
-                className="absolute hidden group-hover:block"
+                className="group  relative flex justify-center items-center flex-col space-y-[135px] md:space-y-[150px] "
               >
+                <button
+                  className=" md:block "
+                >
+                  navbar.language
+                </button>
                 <div
-                  className="w-48 md:w-32 bg-white font-atkinson border bg-grey p-2 shadow-md rounded-lg"
+                  className="absolute hidden group-hover:block"
                 >
-                  <ul
-                    className="py-2 first:pt-0  last:pb-0"
+                  <div
+                    className="w-48 md:w-32 bg-white font-atkinson border bg-grey p-2 shadow-md rounded-lg"
                   >
-                    <a
-                      href="#"
-                      onClick={[Function]}
-                      onMouseEnter={[Function]}
-                      onTouchStart={[Function]}
+                    <ul
+                      className="py-2 first:pt-0  last:pb-0"
                     >
-                      <li
-                        className=" py-2 px-3 rounded-lg text-lg text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 dark:focus:bg-gray-700"
+                      <a
                         href="#"
+                        onClick={[Function]}
+                        onMouseEnter={[Function]}
+                        onTouchStart={[Function]}
                       >
-                        English
-                      </li>
-                    </a>
-                    <a
-                      href="#"
-                      onClick={[Function]}
-                      onMouseEnter={[Function]}
-                      onTouchStart={[Function]}
-                    >
-                      <li
-                        className=" py-2 px-3 rounded-lg text-lg text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 dark:focus:bg-gray-700"
+                        <li
+                          className=" py-2 px-3 rounded-lg text-lg text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 dark:focus:bg-gray-700"
+                          href="#"
+                        >
+                          English
+                        </li>
+                      </a>
+                      <a
                         href="#"
+                        onClick={[Function]}
+                        onMouseEnter={[Function]}
+                        onTouchStart={[Function]}
                       >
-                        العربية
-                      </li>
-                    </a>
-                  </ul>
+                        <li
+                          className=" py-2 px-3 rounded-lg text-lg text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 dark:focus:bg-gray-700"
+                          href="#"
+                        >
+                          العربية
+                        </li>
+                      </a>
+                    </ul>
+                  </div>
                 </div>
               </div>
-            </div>
-          </li>
-        </ul>
+            </li>
+          </ul>
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/components/ProfileImage.jsx b/src/components/ProfileImage.jsx
index a008911..6b503bc 100644
--- a/src/components/ProfileImage.jsx
+++ b/src/components/ProfileImage.jsx
@@ -47,11 +47,9 @@ const ProfileImage = () => {
                     src={
                         uploading
                             ? Spinner
-                            : localStorage.getItem(
-                                  `therapist_image_${user.uid}`
-                              ) ||
-                              user.photoURL ||
-                              ProfileImage ||
+                            : localStorage.getItem(`profile_${user.uid}`) ??
+                              user.photoURL ??
+                              ProfileImage ??
                               Profile
                     }
                     alt='profile preview'
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 5beebee..0e28cd1 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -1,25 +1,35 @@
 import { useTranslation } from "next-i18next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { groq } from "next-sanity";
 import * as React from "react";
 
 import HomePageWrapper from "@/components/Home/HomePageWrapper";
 
 import Layout from "@/layout/Layout";
 
-export default function HomePage() {
+import { client } from "../../sanity/lib/client";
+
+export default function HomePage({ posts }) {
     const { t } = useTranslation("common");
 
     return (
         <Layout>
-            <HomePageWrapper />
+            <HomePageWrapper posts={posts} />
         </Layout>
     );
 }
 
 export async function getStaticProps({ locale }) {
+    const query = groq`*[_type == "post" && language == $locale]{
+                    ...,
+                    author->,
+                    categories[]->
+                    | order(created_At desc)}[0..9]`;
+    const posts = await client.fetch(query, { locale: locale });
     return {
         props: {
             ...(await serverSideTranslations(locale, ["common", "homepage"])),
+            posts,
         },
     };
 }