diff --git a/assets/icons/svg/AddIcon.svg b/assets/icons/svg/AddIcon.svg
new file mode 100644
index 000000000..d01ac7fb5
--- /dev/null
+++ b/assets/icons/svg/AddIcon.svg
@@ -0,0 +1,23 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  className="w-8"
+>
+  <path
+    d="M5 12H19"
+    stroke="white"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M12 19V5"
+    stroke="white"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>
diff --git a/assets/icons/svg/ArrowIcon.svg b/assets/icons/svg/ArrowIcon.svg
new file mode 100644
index 000000000..25a2df777
--- /dev/null
+++ b/assets/icons/svg/ArrowIcon.svg
@@ -0,0 +1,25 @@
+ <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+     
+    >
+      <path
+        d="M14.4299 5.92993L20.4999 11.9999L14.4299 18.0699"
+        stroke=""
+        stroke-width="2"
+        stroke-miterlimit="10"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M3.5 12H20.33"
+        stroke=""
+        stroke-width="2"
+        stroke-miterlimit="10"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+</svg>
\ No newline at end of file
diff --git a/assets/icons/svg/HomeIcon.svg b/assets/icons/svg/HomeIcon.svg
new file mode 100644
index 000000000..7f29ae8db
--- /dev/null
+++ b/assets/icons/svg/HomeIcon.svg
@@ -0,0 +1,12 @@
+<svg
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      xmlns="http://www.w3.org/2000/svg"
+  
+    >
+      <path
+        d="M15.621 6.00825L10.7085 2.07825C9.74851 1.31325 8.24851 1.30575 7.29601 2.07075L2.38351 6.00825C1.67851 6.57075 1.25101 7.69575 1.40101 8.58075L2.34601 14.2357C2.56351 15.5032 3.74101 16.5007 5.02351 16.5007H12.9735C14.241 16.5007 15.441 15.4807 15.6585 14.2282L16.6035 8.57325C16.7385 7.69575 16.311 6.57075 15.621 6.00825ZM9.56101 13.5007C9.56101 13.8082 9.30601 14.0632 8.99851 14.0632C8.69101 14.0632 8.43601 13.8082 8.43601 13.5007V11.2507C8.43601 10.9432 8.69101 10.6882 8.99851 10.6882C9.30601 10.6882 9.56101 10.9432 9.56101 11.2507V13.5007Z"
+        fill=""
+      />
+    </svg>
\ No newline at end of file
diff --git a/assets/icons/svg/MessageIcon.svg b/assets/icons/svg/MessageIcon.svg
new file mode 100644
index 000000000..b12b6b8fb
--- /dev/null
+++ b/assets/icons/svg/MessageIcon.svg
@@ -0,0 +1,30 @@
+<svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M14.1667 15.3583H10.8334L7.12507 17.8249C6.57507 18.1916 5.83341 17.8 5.83341 17.1333V15.3583C3.33341 15.3583 1.66675 13.6916 1.66675 11.1916V6.19157C1.66675 3.69157 3.33341 2.0249 5.83341 2.0249H14.1667C16.6667 2.0249 18.3334 3.69157 18.3334 6.19157V11.1916C18.3334 13.6916 16.6667 15.3583 14.1667 15.3583Z"
+        stroke="#A6ABBF"
+        stroke-width="1.5"
+        stroke-miterlimit="10"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M10 9.46655V9.29159C10 8.72492 10.35 8.4249 10.7 8.18324C11.0417 7.9499 11.3833 7.64991 11.3833 7.09991C11.3833 6.33325 10.7667 5.71655 10 5.71655C9.23334 5.71655 8.6167 6.33325 8.6167 7.09991"
+        stroke="#A6ABBF"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M9.99617 11.4584H10.0037"
+        stroke="#A6ABBF"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
\ No newline at end of file
diff --git a/components/Breadcrumps/index.tsx b/components/Breadcrumps/index.tsx
new file mode 100644
index 000000000..44c600659
--- /dev/null
+++ b/components/Breadcrumps/index.tsx
@@ -0,0 +1,47 @@
+import HomeIcon from 'assets/icons/svg/HomeIcon.svg'
+import Link from 'next/link'
+import { IoChevronBack } from 'react-icons/io5'
+
+interface ComponentProps {
+  sections: { name: string; url: string }[]
+}
+const BreadCrumbs: React.FC<ComponentProps> = ({ sections }) => {
+  return (
+    <>
+      <div className="hidden sm:flex py-3">
+        <Link
+          href={`/`}
+          className="flex gap-x-2 bg-theme-quinary bg-opacity-20 text-text-primary-light dark:text-text-quaternary text-lg py-0.5 px-2.5 rounded-lg cursor-pointer"
+        >
+          <HomeIcon className="m-auto fill-text-primary-light dark:fill-text-quaternary" />
+          <div>Home</div>
+        </Link>
+        <div className="text-2xl mx-2.5 font-semibold text-text-secondary-light">
+          /
+        </div>
+        {sections.map((section, i: number) => (
+          <Link
+            key={i}
+            href={section.url}
+            className="flex gap-x-2 bg-theme-quinary bg-opacity-20 text-text-primary-light dark:text-text-quaternary text-lg py-0.5 px-2.5 rounded-lg capitalize cursor-pointer"
+          >
+            {section.name}
+          </Link>
+        ))}
+      </div>
+      <div className="flex sm:hidden">
+        <Link
+          href={`/`}
+          className="flex gap-x-2 text-text-quaternary text-lg py-0.5 rounded-lg cursor-pointer my-auto capitalize"
+        >
+          <IoChevronBack className="text-text-quinary" />
+        </Link>
+        <div className="dark:text-text-primary text-1.5xl capitalize font-medium mx-2.5 my-auto">
+          {sections[0].name}
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default BreadCrumbs
diff --git a/layouts/GeneralLayout.tsx b/layouts/GeneralLayout.tsx
index 858679eda..ee30a2a9d 100644
--- a/layouts/GeneralLayout.tsx
+++ b/layouts/GeneralLayout.tsx
@@ -31,9 +31,10 @@ const GeneralLayout = ({ children }: { children: ReactNode }) => {
         <main
           data-custom="restrict-click-outside"
           className={clsx(
-            'flex flex-col justify-between min-h-full px-4 pb-2 lg:ml-[290px] lg:w-[calc(100%-290px)]',
+            'flex flex-col justify-between min-h-full px-4 pb-2 sm:ml-[290px] lg:w-[calc(100%-290px)]',
 
-            pathname != '/' && ' transition-color ease-in-out duration-200'
+            pathname != '/' && ' transition-color ease-in-out duration-200',
+            'bg-theme-primary-light dark:bg-inherit'
           )}
           id="main"
         >
diff --git a/pages/[category]/index.tsx b/pages/[category]/index.tsx
index 32008940a..11a6968d0 100644
--- a/pages/[category]/index.tsx
+++ b/pages/[category]/index.tsx
@@ -1,56 +1,100 @@
 import { useRouter } from 'next/router'
-import Logo from 'components/logo/logo'
 import { sidebarData } from 'database/data'
 import { SubCategories } from 'types'
 import Link from 'next/link'
+import AddIcon from 'assets/icons/svg/AddIcon.svg'
+import ArrowIcon from 'assets/icons/svg/ArrowIcon.svg'
+import BreadCrumbs from 'components/Breadcrumps'
+import MessageIcon from 'assets/icons/svg/MessageIcon.svg'
+import categoryDescriptions from 'components/TopBar/CategoryDescriptions'
 
 const CategoryPage = () => {
   const router = useRouter()
-  const { category } = router.query as { category: string}
+  const { category } = router.query as { category: string }
 
-  const subcategories: SubCategories[] = []
-  sidebarData.forEach((c) => {
-    if (c.category == category)
-      c.subcategory.forEach((a) => {
-        subcategories.push(a)
-      })
-  })
+  const subcategories: SubCategories[] = category
+    ? sidebarData.filter((c) => c.category == category)[0]['subcategory']
+    : []
 
+  const getDesc = (subcatName: String) => {
+    for (const desc in categoryDescriptions) {
+      if (desc == subcatName) {
+        return categoryDescriptions[desc]
+      }
+    }
+
+    return 'No descrition'
+  }
   return (
     <section className="flex min-h-[calc(100vh-165px)] flex-col">
-      <div className=" m-auto items-start gap-2">
+      <div className="sm:ml-4 2xl:mx-auto items-start gap-2">
         {subcategories?.length ? (
           <>
-            <div className="m-auto gap-2 flex flex-col items-center justify-center ">
-              <p className="md:text-4xl text-xl uppercase font-bold text-theme-secondary dark:text-gray-text w-fit mx-auto text-center">
-                <span className="text-theme-primary">-/</span>
-                {category.split('-').join(' ')}
-              </p>
-              <p className="text-xl hidden md:block">
-                Get access to all exclusive{' '}
-                <span className="capitalize text-theme-primary">
-                  {category.split('-').join(' ')}
-                </span>{' '}
-                resources!
-              </p>
+            <div className="flex mt-8 justify-between">
+              <BreadCrumbs
+                sections={[{ name: category, url: `/${category}` }]}
+              />
+
+              <a
+                className="flex my-auto gap-x-3"
+                href="https://github.com/rupali-codes/LinksHub/issues/new/choose"
+                target="_blank"
+              >
+                <MessageIcon className="m-auto" />
+                <span className="text-md text-text-quinary hidden md:block">
+                  Give a feedback
+                </span>
+              </a>
             </div>
-            <div className="flex flex-wrap gap-3 mt-6 justify-center items-start mx-auto lg:max-w-sm max-md:max-w-sm">
-              {subcategories.map((subcat, i) => (
+            <div className="flex max-w-1038 justify-center">
+              <div className="flex flex-wrap gap-x-5 gap-y-5 mt-6 mb-28 flex-start items-start">
+                {subcategories.map((subcat, i) => (
+                  <Link
+                    key={i}
+                    href={`/${category}${subcat.url}`}
+                    aria-label={`Explore ${subcat.name}`}
+                    className="group flex flex-col dark:border dark:border-theme-primary dark:border-opacity-8 rounded-xl dark:bg-theme-tertiary bg-white dark:bg-opacity-25 dark:hover:bg-theme-quaternary dark:hover:bg-opacity-25	px-3 py-1 dark:hover:border-opacity-25 hover:text-dark-primary dark:shadow-lg shadow-tile md:max-w-[320px] px-4 py-4 group max-w-none w-full"
+                  >
+                    <div className="flex justify-between">
+                      <div className="dark:text-text-primary text-text-primary-light text-lg capitalize font-medium">
+                        {subcat.name}
+                      </div>
+                      <ArrowIcon className="opacity-0 group-hover:opacity-100 duration-300 w-8 stroke-theme-secondary dark:stroke-white" />
+                    </div>
+                    <div className="dark:text-text-tertiary text-text-quinary text-md font-medium h-12 pb-4">
+                      <div className='text-ellipsis ... line-clamp-2 w-full'>{getDesc(subcat.name)}</div>
+                    </div>
+                  </Link>
+                ))}
                 <Link
-                  key={i}
-                  href={`/${category}${subcat.url}`}
-                  aria-label={`Explore ${subcat.name}`}
-                  className={`border-2 dark:border-theme-primary rounded-md bg-transparent dark:text-theme-primary text-text-secondary px-3 py-1 text-md capitalize hover:border-dashed hover:text-dark-primary shadow-lg`}
+                  href={`https://github.com/rupali-codes/LinksHub/issues/new/choose`}
+                  aria-label={`Add`}
+                  target='_blank'
+                  className="flex gap-x-2 border dark:border-theme-primary dark:border-opacity-8 rounded-xl bg-theme-secondary px-3 py-1 hover:border-dashed hover:text-dark-primary shadow-lg lg:max-w-xs px-4 py-4"
                 >
-                  {subcat.name}
+                  <AddIcon className="w-8 dark:text-text-primary" />
+
+                  <div>
+                    <div className="text-lg font-medium dark:text-text-primary text-white">
+                      Wanna add something?
+                    </div>
+                    <div
+                      className={`dark:text-text-primary text-white text-md font-medium opacity-75`}
+                    >
+                      Share resources, and help other fellows in the journey.{' '}
+                    </div>
+                  </div>
                 </Link>
-              ))}
+              </div>
             </div>
           </>
         ) : (
-          <div className='text-center'>
+          <div className="text-center">
             <p className="text-theme-secondary dark:text-gray-text w-fit mx-auto text-center">
-              <span className='md:text-7xl text-xl uppercase font-bold '>404|</span> No resources found.
+              <span className="md:text-7xl text-xl uppercase font-bold">
+                404|
+              </span>{' '}
+              No resources found.
             </p>
           </div>
         )}
diff --git a/styles/globals.css b/styles/globals.css
index 84572306b..211e988f2 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -10,6 +10,10 @@ body {
   font-family: 'Urbanist', sans-serif;
 }
 
+.varela {
+  font-family: 'Varela Round', sans-serif;
+}
+
 #__next {
   height: 100vh;
   display: grid;
diff --git a/tailwind.config.js b/tailwind.config.js
index c77f9ecce..e78114455 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -8,14 +8,26 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        primary: '#714EFF',
         'theme-primary': '#a78bfa',
         'theme-secondary': '#8b5cf6',
+        'theme-tertiary': '#1f2736',
+        'theme-quaternary': '#293242',
+        'theme-quinary': '#BCCBE1',
+        'light-primary': '#f5f3ff',
+        primary: '#714EFF',
         dark: '#0f172a',
-        'dark-primary': '#101623',
+        'dark-primary': '#161e2c',
         'gray-text': '#9ca3af',
-        'text-primary': '#d1d5db',
+        'text-primary': '#EDEDED',
         'text-secondary': '#4b5563',
+        'text-tertiary': '#B9C0DA',
+        'text-quaternary': '#EDEDED',
+        'text-quinary': '#A6ABBF',
+        'theme-primary-light': '#f4f7fe',
+        'theme-secondary-light': '#BCCBE1',
+        'theme-tertiary-light': '#E1DAF4',
+        'text-primary-light': '#3F3D56',
+        'text-secondary-light': '#DAE0F4',
         light: {
           primary: '#f5f3ff',
           silver: '#EDEDED',
@@ -24,8 +36,9 @@ module.exports = {
       screens: {
         xs: '200px',
         folding: '320px',
-        tall: { raw: '(min-height: 800px)' },
       },
+      display: ['group-hover'],
+
       keyframes: {
         'button-press': {
           '0%, 100%': {
@@ -81,16 +94,27 @@ module.exports = {
         'scale-appearance': 'scale-appearance 0.3s ease-in forwards',
         'scale-hide': 'scale-hide 0.3s ease-out forwards',
       },
+      opacity: {
+        8: '0.08',
+      },
+      width: {
+        1038: '1038px',
+      },
+      maxWidth: {
+        1038: '1038px',
+      },
+      fontSize: {
+        '1.5xl': '22px',
+      },
       boxShadow: {
-        header: '0px 4px 16px 0px rgba(225, 218, 244, 0.25)',
-        sidebar: '4px 0px 16px 0px rgba(225, 218, 244, 0.25)',
-        'input-hover': '0px 0px 0px 1.6px rgba(113, 78, 255, 0.10)',
-        'input-focus': '0px 0px 0px 1.6px #714EFF',
-        'input-hover-dark': '0px 0px 0px 1.6px rgba(255, 255, 255, 0.20)',
-        'input-focus-dark': '0px 0px 0px 1.6px rgba(238, 243, 251, 0.75)',
+        tile: '0px 0px 12px 0px #E1DAF440',
       },
     },
   },
   plugins: [require('daisyui')],
   darkMode: ['class', '[data-theme="dark"]'],
+  variants: {
+    opacity: ['responsive', 'hover', 'focus', 'group-hover'],
+    textColor: ['responsive', 'hover', 'focus', 'group-hover'],
+  },
 }