diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
index 45d257b29..043ceb05c 100644
--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@@ -61,7 +61,7 @@ representative at an online or offline event.
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
 reported to the community leaders responsible for enforcement at
-[INSERT CONTACT METHOD].
+linkshub.opensource@gmail.com.
 All complaints will be reviewed and investigated promptly and fairly.
 
 All community leaders are obligated to respect the privacy and security of the
diff --git a/components/Breadcrumbs/index.tsx b/components/Breadcrumbs/index.tsx
index 418977bb1..fb3ccb0e6 100644
--- a/components/Breadcrumbs/index.tsx
+++ b/components/Breadcrumbs/index.tsx
@@ -10,7 +10,7 @@ const BreadCrumbs: React.FC<ComponentProps> = ({ sections }) => {
       <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"
+          className="flex gap-x-2 dark:bg-theme-tertiary/50 border border-theme-secondary/25 bg-theme-primary-light/20 dark:border dark:border-theme-primary/8 text-text-primary-light dark:text-text-quaternary text-lg py-0.5 px-2.5 rounded-lg cursor-pointer"
         >
           <Icons.Home className="h-4 w-4 m-auto text-text-primary-light dark:text-text-quaternary" />
           <div>Home</div>
@@ -22,7 +22,7 @@ const BreadCrumbs: React.FC<ComponentProps> = ({ sections }) => {
           <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"
+            className="flex gap-x-2 border border-theme-secondary/25 bg-theme-primary-light/20 dark:bg-theme-tertiary/50 dark:border dark:border-theme-primary/8 text-text-primary-light dark:text-text-quaternary text-lg py-0.5 px-2.5 rounded-lg capitalize cursor-pointer"
           >
             {section.name?.split('-').join(' ')}
           </Link>
diff --git a/components/Cards/Card.tsx b/components/Cards/Card.tsx
index 6bd1fd225..726fc07a7 100644
--- a/components/Cards/Card.tsx
+++ b/components/Cards/Card.tsx
@@ -7,7 +7,7 @@ import type { IData } from 'types'
 import Bookmark from 'components/Bookmark/Bookmark'
 
 interface CardProps {
-  data: IData,
+  data: IData
   onClick: () => void
 }
 
@@ -27,7 +27,7 @@ export const Card: FC<CardProps> = ({ data, onClick }) => {
   }, [])
 
   return (
-    <article className="z-10 h-full w-full rounded-3xl dark:bg-slate-800 dark:text-text-primary dark:shadow-sm bg-light-white">
+    <article className="z-10 h-full w-full rounded-3xl dark:bg-slate-800 dark:border dark:border-theme-primary/8 dark:text-text-primary dark:shadow-sm bg-theme-primary-light border border border-theme-secondary/25">
       <div className="card-body">
         <header className="flex justify-between items-center gap-2">
           <h2
@@ -48,23 +48,26 @@ export const Card: FC<CardProps> = ({ data, onClick }) => {
             {description}
           </div>
           {isOverflow && (
-            <span onClick={onClick} className="text-sm float-right hover:underline dark:hover:text-theme-primary text-right hover:text-theme-primary dark:text-text-primary">
+            <span
+              onClick={onClick}
+              className="text-sm float-right hover:underline dark:hover:text-theme-primary text-right hover:text-theme-primary dark:text-text-primary"
+            >
               ...Read More
             </span>
           )}
         </div>
         <footer className="grid grid-cols-2 gap-x-4 md:grid-cols-1 lg:grid-cols-2">
-        <CopyToClipboard url={url} />
+          <CopyToClipboard url={url} />
           <a
             onClick={(e) => e.stopPropagation()}
             href={url}
             target="_blank"
             rel="noopener noreferrer"
             className={
-              'mt-2 flex w-full items-center justify-center gap-2 rounded-lg  bg-theme-secondary px-3 py-2 text-center text-light-primary duration-100'
+              'mt-2 flex w-full items-center justify-center gap-2 rounded-lg bg-theme-secondary px-3 py-2 text-center text-light-primary duration-100'
             }
           >
-            <span className='truncate ...'>Visit site</span>
+            <span className="truncate ...">Visit site</span>
             {youtubeRegex.test(url) ? (
               <BsYoutube size="1.3em" />
             ) : subcategory === 'e-book' ? (
diff --git a/components/CopyToClipboard/CopyToClipboard.tsx b/components/CopyToClipboard/CopyToClipboard.tsx
index 3f35f2225..50ed5e9f9 100644
--- a/components/CopyToClipboard/CopyToClipboard.tsx
+++ b/components/CopyToClipboard/CopyToClipboard.tsx
@@ -16,7 +16,7 @@ export const CopyToClipboard = ({ url }: CopyToClipboardProps): JSX.Element => {
   }
   return (
     <div
-      className="flex items-center justify-center text-center text-theme-secondary dark:text-white gap-x-2 bg-light-primary dark:bg-light-primary dark:bg-opacity-10 dark:hover:bg-opacity-20 rounded-lg mt-2 cursor-pointer relative py-2 px-2 truncate ..."
+      className="flex items-center justify-center text-center dark:border-none border border-theme-secondary/25 text-theme-secondary dark:text-white gap-x-2 bg-light-primary dark:bg-light-primary dark:bg-opacity-10 dark:hover:bg-opacity-20 rounded-lg mt-2 cursor-pointer relative py-2 px-2 truncate ..."
       onClick={(e) => handleCopy(e)}
     >
       <span className="truncate ...">Copy Link</span>
diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx
index f9b515ab0..58ac7a176 100644
--- a/components/Footer/Footer.tsx
+++ b/components/Footer/Footer.tsx
@@ -1,11 +1,7 @@
 import Link from 'next/link'
 import type { FC } from 'react'
-import { useTheme } from 'next-themes'
 
 export const Footer: FC = () => {
-  const { resolvedTheme } = useTheme()
-  const isDarkMode = resolvedTheme === 'dark'
-
   return (
     <footer className="z-10 flex w-full items-baseline justify-center rounded-lg text-center px-2">
       <div className="text-sm leading-7 md:tracking-wide text-center text-black dark:text-theme-secondary-light">
@@ -19,11 +15,7 @@ export const Footer: FC = () => {
             rel="noopener noreferrer"
             aria-label="GitHub Profile of Rupali Haldiya"
           >
-            <span
-              className={`underline mr-1 ${
-                isDarkMode ? 'text-primary-light' : 'theme-tertiary-light'
-              } `}
-            >
+            <span className="underline mr-1 duration-300 transition-all hover:text-theme-secondary">
               Rupali Haldiya
             </span>
           </Link>{' '}
@@ -34,11 +26,7 @@ export const Footer: FC = () => {
             target="_blank"
             aria-label="List of Contributors in LinksHub"
           >
-            <span
-              className={`underline ml-1 ${
-                isDarkMode ? 'text-primary-light' : 'theme-tertiary-light'
-              } `}
-            >
+            <span className="underline ml-1 duration-300 transition-all hover:text-theme-secondary">
               Open Source Community
             </span>
           </Link>
diff --git a/components/Pagination/Pagination.tsx b/components/Pagination/Pagination.tsx
index 999cbcc99..a5f8c94e6 100644
--- a/components/Pagination/Pagination.tsx
+++ b/components/Pagination/Pagination.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState, useRef } from 'react'
 import { useTheme } from 'next-themes'
 import clsx from 'clsx'
 import { MdArrowForwardIos } from 'react-icons/md'
@@ -20,14 +20,31 @@ export default function Pagination({
 }: PaginationProps) {
   const { resolvedTheme } = useTheme()
   const isDarkMode = resolvedTheme === 'dark'
+  const [scrollingElement, setScrollingElement] = useState<HTMLElement | Window | undefined>()
+  const paginationRef = useRef<HTMLDivElement>(null);
+
   const scrollToTop = () => {
-    window.scrollTo({ top: 0, behavior: 'smooth' })
+    if (scrollingElement) scrollingElement.scrollTo({ top: 0, behavior: 'smooth' })
   }
 
   const changePage = (page: number) => {
     handlePageChange(page)
   }
 
+  useEffect(() => {
+    if (paginationRef.current) {
+      const findClosestScrollElement = (element: HTMLElement | null): HTMLElement | Window => {
+        if (!element) return window
+        const { overflowY } = getComputedStyle(element)
+        const scrollableVariants = ['auto', 'scroll']
+        return scrollableVariants.some(v => overflowY === v)
+            ? element
+            : findClosestScrollElement(element.parentElement)
+      }
+      setScrollingElement(findClosestScrollElement(paginationRef.current))
+    }
+  }, [])
+
   useEffect(() => {
     scrollToTop()
   }, [currentPage])
@@ -37,7 +54,7 @@ export default function Pagination({
   return (
     <>
       {totalPages && totalPages.length > 1 && (
-        <div>
+        <div ref={paginationRef}>
           <div
             className={
               currentPage == totalPages.length && remainderOfCards <= 3
diff --git a/components/Searchbar/Searchbar.tsx b/components/Searchbar/Searchbar.tsx
index 7582b9acd..eaaa062af 100644
--- a/components/Searchbar/Searchbar.tsx
+++ b/components/Searchbar/Searchbar.tsx
@@ -114,7 +114,7 @@ export const Searchbar: React.FC<SearchbarProps> = ({
       role="search"
     >
       <div className="relative">
-        <div className="relative w-full h-12 flex items-center justify-between">
+        <div className="relative w-full h-12 flex items-center justify-between border border border-theme-secondary/25 dark:border-none rounded-lg">
           <label htmlFor="simple-search" className="sr-only">
             Quick search
           </label>
diff --git a/components/TopBar/CategoryDescriptions.ts b/components/TopBar/CategoryDescriptions.ts
index 70f7dbe95..ba037bb0e 100644
--- a/components/TopBar/CategoryDescriptions.ts
+++ b/components/TopBar/CategoryDescriptions.ts
@@ -146,6 +146,8 @@ const categoryDescriptions: CategoryDescriptions = {
     'An ebook (short for electronic book) is a book publication made available in digital form, consisting of text, images, or both readable on the flat-panel display of computers or other electronic devices.',
   hosting:
     'Web hosting is an online service that makes the content of your website accessible on the internet. When you purchase a hosting plan, you are renting space on a physical server to store all the files and data.',
+  docsgenerator:
+    'The term “doc” is short for “documentation”. Here you can find various Technical Documentation generators.',
   dsa: 'Data Structures and Algorithms play an important role in tech placements. So here is a list of important and great dsa resources',
   officialdocs:
     'Official docs is short for official documentation. Official documentation is an important resource for users of software products and services as it provides a comprehensive guide to using the software.',
diff --git a/components/TopBar/TopBar.tsx b/components/TopBar/TopBar.tsx
index abe570eb3..409774462 100644
--- a/components/TopBar/TopBar.tsx
+++ b/components/TopBar/TopBar.tsx
@@ -46,7 +46,7 @@ export const TopBar: FC<TopBarProps> = ({}) => {
     >
       <Link
         href={'/'}
-        className="gap-x-2 items-center bg-[#EDEDED] bg-opacity-20 px-[10px] py-[6px] rounded-md cursor-pointer hidden md:flex"
+        className="gap-x-2 items-center border border-theme-secondary/25 bg-theme-primary-light/20 bg-opacity-20 dark:bg-theme-tertiary/50 dark:border dark:border-theme-primary/8 px-[10px] py-[6px] rounded-md cursor-pointer hidden md:flex"
       >
         <Icons.Home className="h-4 w-4 m-auto text-text-primary-light dark:text-text-quaternary" />
         <h3>Home</h3>
@@ -54,7 +54,7 @@ export const TopBar: FC<TopBarProps> = ({}) => {
       <Icons.rxSlash className="hidden md:inline-block" />
       <Link
         href={'/' + categoryNameLink}
-        className="bg-[#EDEDED] bg-opacity-20 px-[10px] py-[6px] rounded-md cursor-pointer hidden md:inline-block"
+        className="bg-theme-primary-light/20 border border-theme-secondary/25 dark:bg-theme-tertiary/50 dark:border dark:border-theme-primary/8 px-[10px] py-[6px] rounded-md cursor-pointer hidden md:inline-block"
       >
         <h3>{capitalizeEachWord(categoryName)}</h3>
       </Link>
@@ -62,7 +62,7 @@ export const TopBar: FC<TopBarProps> = ({}) => {
       <Link href={'/' + categoryNameLink} className="flex gap-x-2 items-center">
         <Icons.arrowBack className="md:hidden" />
       </Link>
-      <div className="md:bg-[#EDEDED] md:bg-opacity-20 px-[10px] py-[6px] text-xl md:text-base rounded-md truncate ...">
+      <div className="md:bg-theme-primary-light/20 border border-theme-secondary/25 dark:bg-theme-tertiary/50 dark:border dark:border-theme-primary/8 px-[10px] py-[6px] text-xl md:text-base rounded-md truncate ...">
         <h3>{capitalizeEachWord(cleanedCategory)}</h3>
       </div>
       <button>
@@ -71,7 +71,7 @@ export const TopBar: FC<TopBarProps> = ({}) => {
           data-tooltip-place="bottom"
           data-tooltip-content={description}
           size={30}
-          className=" ml-2 text-sm cursor-pointer bg-[#EDEDED] bg-opacity-20 p-2 rounded-md "
+          className=" ml-2 border border-theme-secondary/25 text-sm cursor-pointer bg-[#EDEDED] bg-opacity-20 dark:bg-theme-tertiary/75 dark:border dark:border-theme-primary/8 p-2 rounded-md "
         />
       </button>
       <CardTooltip theme={theme} />
diff --git a/components/popup/popupInfo.tsx b/components/popup/popupInfo.tsx
index 8e74c7791..6010acd4c 100644
--- a/components/popup/popupInfo.tsx
+++ b/components/popup/popupInfo.tsx
@@ -21,17 +21,15 @@ export const PopupInfo: React.FC<{
     return null
   }
 
-  // const youtubeRegex = /^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.be)\/.+$/
-
   return (
-    <div className='fixed inset-0 z-50 h-full w-full cursor-pointer bg-black/80'>
+    <div className="fixed inset-0 z-50 h-full w-full cursor-pointer bg-black/80">
       <Backdrop onClick={onClose} />
       {createPortal(
         <div
           onClick={(e) => e.stopPropagation()}
           className={`fixed left-1/2 top-1/2 z-[150] max-w-[500px] -translate-x-1/2 -translate-y-1/2 transition-all ${
             currentCard ? 'animate-scale-appearance' : 'animate-scale-hide'
-          } flex h-fit w-[90%] flex-col justify-between gap-5 overflow-hidden rounded-2xl bg-light-primary px-5 py-10 dark:bg-slate-800`}
+          } flex h-fit w-[90%] flex-col justify-between gap-5 overflow-hidden rounded-2xl bg-light-primary border-2 border-theme-secondary/50 px-5 py-10 dark:bg-slate-800 dark:border dark:border-theme-primary/8`}
           role="dialog"
           title={`${currentCard?.name ?? 'Card'} Popup`}
         >
@@ -51,40 +49,9 @@ export const PopupInfo: React.FC<{
                   <IoClose />
                 </p>
               </div>
-              {/* <div className="max-w-[25]%] mx-3 text-xsm text-theme-secondary capitalize flex items-center gap-2">
-                <CopyToClipboard url={currentCard?.url ?? ''} />
-                {currentCard?.language ? (
-                  <>
-                    <BsGlobe />
-                    {currentCard?.language}
-                  </>
-                ) : (
-                  ''
-                )}
-              </div> */}
             </div>
             <p className="">{currentCard?.description}</p>
           </div>
-          {/* <div className="card-actions justify-end mt-auto">
-            <a
-              onClick={(e) => e.stopPropagation()}
-              href={currentCard?.url}
-              target="_blank"
-              rel="noreferrer"
-              className="mt-2 px-6 py-2 text-white text-center bg-theme-secondary rounded-2xl w-full hover:bg-transparent hover:text-theme-secondary border border-dashed border-transparent duration-100 hover:border-theme-primary flex items-center justify-center bottom-0 relative gap-2"
-            >
-              Visit Site
-              {youtubeRegex.test(currentCard?.url || '') ? (
-                <BsYoutube size="1.3em" />
-              ) : currentCard?.subcategory === 'e-book' ? (
-                <AiOutlineRead size="1.3em" />
-              ) : currentCard?.subcategory === 'technical-writing-tools' ? (
-                <BsPen size="1.2em" />
-              ) : (
-                <MdArticle size="1.3em" />
-              )}
-            </a>
-          </div> */}
         </div>,
         overlayRoot
       )}
diff --git a/database/cybersecurity/defensive_security.json b/database/cybersecurity/defensive_security.json
index 90470773a..10e467aff 100644
--- a/database/cybersecurity/defensive_security.json
+++ b/database/cybersecurity/defensive_security.json
@@ -16,14 +16,14 @@
     {
       "name": "Security Information and Event Management (SIEM) Solutions",
       "description": "Explore SIEM solutions, which are essential for monitoring and responding to security incidents in real time.",
-      "url": "https://www.gartner.com/reviews/market/security-information-and-event-management-siem",
+      "url": "https://www.gartner.com/reviews/market/security-information-event-management",
       "category": "cyber-security",
       "subcategory": "defensive-security"
     },
     {
       "name": "Incident Response and Threat Hunting",
       "description": "Learn about incident response and threat hunting techniques, crucial for identifying and mitigating security incidents.",
-      "url": "https://www.sans.org/course/incident-response-and-threat-hunting",
+      "url": "https://www.sans.org/cyber-security-courses/advanced-incident-response-threat-hunting-training/",
       "category": "cyber-security",
       "subcategory": "defensive-security"
     }
diff --git a/database/cybersecurity/web_application_security.json b/database/cybersecurity/web_application_security.json
index 01c058446..ac6b64989 100644
--- a/database/cybersecurity/web_application_security.json
+++ b/database/cybersecurity/web_application_security.json
@@ -1,38 +1,51 @@
 [
-    {
-      "name": "Web Application Penetration Testing Fundamentals",
-      "description": "Learn the basics of web application penetration testing, including common vulnerabilities and testing methodologies.",
-      "url": "https://www.owasp.org/index.php/Web_Application_Penetration_Testing",
-      "category": "cyber-security",
-      "subcategory": "web-security"
-    },
-    {
-      "name": "Certified Web Application Penetration Tester (CWAPT) Certification",
-      "description": "Information on the CWAPT certification, a specialized certification for professionals focusing on web application penetration testing.",
-      "url": "https://mile2.com/web-application-penetration-tester-cwapt.html",
-      "category": "cyber-security",
-      "subcategory": "web-security"
-    },
-    {
-      "name": "Burp Suite",
-      "description": "Explore Burp Suite, a popular web application security testing tool that assists in identifying and exploiting vulnerabilities.",
-      "url": "https://portswigger.net/web-security",
-      "category": "cyber-security",
-      "subcategory": "web-security"
-    },
-    {
-      "name": "OWASP AppSec Conferences",
-      "description": "Information about the OWASP AppSec conferences, which focus on web application security, including penetration testing techniques.",
-      "url": "https://owasp.org/",
-      "category": "cyber-security",
-      "subcategory": "web-security"
-    },
-    {
-      "name": "SQL Injection Testing",
-      "description": "Learn about SQL injection testing techniques used to identify and exploit SQL injection vulnerabilities in web applications.",
-      "url": "https://portswigger.net/web-security/sql-injection",
-      "category": "cyber-security",
-      "subcategory": "web-security"
-    }
-  ]
-  
\ No newline at end of file
+  {
+    "name": "Web Application Penetration Testing Fundamentals",
+    "description": "Learn the basics of web application penetration testing, including common vulnerabilities and testing methodologies.",
+    "url": "https://www.owasp.org/index.php/Web_Application_Penetration_Testing",
+    "category": "cyber-security",
+    "subcategory": "web-security"
+  },
+  {
+    "name": "Certified Web Application Penetration Tester (CWAPT) Certification",
+    "description": "Information on the CWAPT certification, a specialized certification for professionals focusing on web application penetration testing.",
+    "url": "https://mile2.com/web-application-penetration-tester-cwapt.html",
+    "category": "cyber-security",
+    "subcategory": "web-security"
+  },
+  {
+    "name": "Burp Suite",
+    "description": "Explore Burp Suite, a popular web application security testing tool that assists in identifying and exploiting vulnerabilities.",
+    "url": "https://portswigger.net/web-security",
+    "category": "cyber-security",
+    "subcategory": "web-security"
+  },
+  {
+    "name": "OWASP AppSec Conferences",
+    "description": "Information about the OWASP AppSec conferences, which focus on web application security, including penetration testing techniques.",
+    "url": "https://owasp.org/",
+    "category": "cyber-security",
+    "subcategory": "web-security"
+  },
+  {
+    "name": "SQL Injection Testing",
+    "description": "Learn about SQL injection testing techniques used to identify and exploit SQL injection vulnerabilities in web applications.",
+    "url": "https://portswigger.net/web-security/sql-injection",
+    "category": "cyber-security",
+    "subcategory": "web-security"
+  },
+  {
+    "name": "Trivy",
+    "description": "Trivy is the most popular open source security scanner, reliable, fast, and easy to use. It's a container security scanner designed specifically for Docker images.",
+    "url": "https://trivy.dev",
+    "category": "cyber-security",
+    "subcategory": "web-security"
+  },
+  {
+    "name": "Snyk",
+    "description": "Snyk specializes in JavaScript security. It is a developer-first security solution that helps you use open source code and stay secure. Continuously find and fix vulnerabilities for npm, Maven, NuGet, RubyGems, PyPI and more.",
+    "url": "https://snyk.io/",
+    "category": "cyber-security",
+    "subcategory": "web-security"
+  }
+]
diff --git a/database/data.ts b/database/data.ts
index 73a61b235..a8eeb62ba 100644
--- a/database/data.ts
+++ b/database/data.ts
@@ -62,7 +62,7 @@ export const sidebarData: ISidebar[] = [
         name: 'js-Chart Libraries',
         url: '/js-chart-libraries',
         resources: DB.jsChartLibraries,
-      }
+      },
     ],
   },
   {
@@ -263,6 +263,11 @@ export const sidebarData: ISidebar[] = [
     category: 'resources',
     subcategory: [
       { name: 'blogs', url: '/blogs', resources: DB.blogs },
+      {
+        name: 'Docs Generator',
+        url: '/docsgenerator',
+        resources: DB.docsgenerator,
+      },
       {
         name: 'Official Docs',
         url: '/officialdocs',
diff --git a/database/frontend/js-chart-libraries.json b/database/frontend/js-chart-libraries.json
index 07aee2a38..439cbf423 100644
--- a/database/frontend/js-chart-libraries.json
+++ b/database/frontend/js-chart-libraries.json
@@ -1,51 +1,86 @@
 [
-    {
-        "name": "Chart.js",
-        "description": "Chart.js is a simple yet flexible JavaScript charting library that allows you to create interactive and responsive charts for your web applications.",
-        "url": "https://www.chartjs.org/",
-        "category": "frontend",
-        "subcategory": "js-chart-libraries"
-    },
-    {
-        "name": "Highcharts",
-        "description": "Highcharts is a powerful JavaScript charting library that provides a wide range of customizable and interactive charts for visualizing data in your web applications.",
-        "url": "https://www.highcharts.com/",
-        "category": "frontend",
-        "subcategory": "js-chart-libraries"
-    },
-    {
-        "name": "D3.js",
-        "description": "D3.js is a popular JavaScript library for manipulating documents based on data. It provides powerful tools for creating dynamic and interactive data visualizations on the web.",
-        "url": "https://d3js.org/",
-        "category": "frontend",
-        "subcategory": "js-chart-libraries"
-    },
-    {
-        "name": "Plotly.js",
-        "description": "Plotly.js is an open-source JavaScript graphing library that allows you to create interactive, publication-quality graphs and charts in your web applications.",
-        "url": "https://plotly.com/javascript/",
-        "category": "frontend",
-        "subcategory": "js-chart-libraries"
-    },
-    {
-        "name": "FusionCharts",
-        "description": "FusionCharts is a comprehensive JavaScript charting library that offers a wide range of charts, gauges, and maps for visualizing data in your web applications.",
-        "url": "https://www.fusioncharts.com/",
-        "category": "frontend",
-        "subcategory": "js-chart-libraries"
-    },
-    {
-        "name": "Google Charts",
-        "description": "Google Charts is a powerful JavaScript charting library that provides a variety of charts and visualization options for displaying data in your web applications.",
-        "url": "https://developers.google.com/chart/",
-        "category": "frontend",
-        "subcategory": "js-chart-libraries"
-    },
-    {
-        "name": "ApexCharts",
-        "description": "ApexCharts is a modern JavaScript charting library that offers a wide range of beautiful and interactive charts for visualizing data in your web applications.",
-        "url": "https://apexcharts.com/",
-        "category": "frontend",
-        "subcategory": "js-chart-libraries"
-    }
-]
\ No newline at end of file
+  {
+    "name": "Chart.js",
+    "description": "Chart.js is a simple yet flexible JavaScript charting library that allows you to create interactive and responsive charts for your web applications.",
+    "url": "https://www.chartjs.org/",
+    "category": "frontend",
+    "subcategory": "js-chart-libraries"
+  },
+  {
+    "name": "Highcharts",
+    "description": "Highcharts is a powerful JavaScript charting library that provides a wide range of customizable and interactive charts for visualizing data in your web applications.",
+    "url": "https://www.highcharts.com/",
+    "category": "frontend",
+    "subcategory": "js-chart-libraries"
+  },
+  {
+    "name": "D3.js",
+    "description": "D3.js is a popular JavaScript library for manipulating documents based on data. It provides powerful tools for creating dynamic and interactive data visualizations on the web.",
+    "url": "https://d3js.org/",
+    "category": "frontend",
+    "subcategory": "js-chart-libraries"
+  },
+  {
+    "name": "Plotly.js",
+    "description": "Plotly.js is an open-source JavaScript graphing library that allows you to create interactive, publication-quality graphs and charts in your web applications.",
+    "url": "https://plotly.com/javascript/",
+    "category": "frontend",
+    "subcategory": "js-chart-libraries"
+  },
+  {
+    "name": "FusionCharts",
+    "description": "FusionCharts is a comprehensive JavaScript charting library that offers a wide range of charts, gauges, and maps for visualizing data in your web applications.",
+    "url": "https://www.fusioncharts.com/",
+    "category": "frontend",
+    "subcategory": "js-chart-libraries"
+  },
+  {
+    "name": "Google Charts",
+    "description": "Google Charts is a powerful JavaScript charting library that provides a variety of charts and visualization options for displaying data in your web applications.",
+    "url": "https://developers.google.com/chart/",
+    "category": "frontend",
+    "subcategory": "js-chart-libraries"
+  },
+  {
+    "name": "ApexCharts",
+    "description": "ApexCharts is a modern JavaScript charting library that offers a wide range of beautiful and interactive charts for visualizing data in your web applications.",
+    "url": "https://apexcharts.com/",
+    "category": "frontend",
+    "subcategory": "js-chart-libraries"
+  },
+  {
+    "name": "amCharts",
+    "description": "amCharts is a powerful JavaScript charting library that provides a wide range of customizable and interactive charts for visualizing data in your web applications.",
+    "url": "https://www.amcharts.com/",
+    "category": "frontend",
+    "subcategory": "js-chart-libraries"
+  },
+  {
+    "name": "Recharts",
+    "description": "Recharts is a composable charting library built with React components that allows you to create beautiful and interactive charts for your web applications.",
+    "url": "https://recharts.org/en-US/",
+    "category": "frontend",
+    "subcategory": "js-chart-libraries"
+  },
+  {
+    "name": "Tremor",
+    "description": "Tremor is a powerful and flexible data processing system that allows you to build real-time data pipelines for processing, transforming, and analyzing data at scale.",
+    "url": "https://www.tremor.rs/",
+    "category": "frontend",
+    "subcategory": "js-chart-libraries"
+  },
+  {
+    "name": "visx",
+    "description": "visx is a collection of expressive, low-level visualization primitives for building custom data visualizations with React. It provides a wide range of components for creating interactive and responsive charts and graphs.",
+    "url": "https://airbnb.io/visx/",
+    "category": "frontend",
+    "subcategory": "js-chart-libraries"
+  },
+  {
+    "name": "Nivo",
+    "description": "Nivo is a powerful and flexible data visualization library for React that provides a wide range of customizable and interactive charts and graphs for visualizing data in your web applications.",
+    "url": "https://nivo.rocks/",
+    "category": "frontend",
+    "subcategory": "js-chart-libraries"
+  }
+]
diff --git a/database/index.ts b/database/index.ts
index c4f69a544..f5ba79ebd 100644
--- a/database/index.ts
+++ b/database/index.ts
@@ -16,7 +16,7 @@ export { default as react } from './frontend/react.json'
 export { default as next } from './frontend/next.json'
 export { default as _3dLibraries } from './frontend/3d-libraries.json'
 export { default as uilibraries } from './frontend/ui-libraries.json'
-export { default as jsChartLibraries} from './frontend/js-chart-libraries.json'
+export { default as jsChartLibraries } from './frontend/js-chart-libraries.json'
 // backend
 export { default as authentication } from './backend/authentication.json'
 export { default as architecture } from './backend/architecture.json'
@@ -82,6 +82,7 @@ export { default as openSourceTools } from './open_source/tools.json'
 export { default as openSourceTutorials } from './open_source/tutorials.json'
 // resources
 export { default as blogs } from './resources/blogs.json'
+export { default as docsgenerator } from './resources/docs-generator.json'
 export { default as officialdocs } from './resources/official-docs.json'
 export { default as hosting } from './resources/hosting.json'
 export { default as ebook } from './resources/e-book.json'
diff --git a/database/languages/rust.json b/database/languages/rust.json
index ede739fb9..e742308a3 100644
--- a/database/languages/rust.json
+++ b/database/languages/rust.json
@@ -26,5 +26,19 @@
       "url": "https://rustlings.cool",
       "category": "languages",
       "subcategory": "rust"
+    },
+    {
+        "name": "Rust Bevy - Game Engine",
+        "description": "Master Rust game development with Bevy's high-performance, ergonomic framework. Learn from setup to advanced techniques for creating immersive gaming experiences.",
+        "url": "https://bevyengine.org/learn/quick-start/getting-started/",
+        "category": "languages",
+        "subcategory": "rust"
+    },
+    {
+        "name": "Rust actix - Web Framework",
+        "description": "Unlock the power of Rust web development with Actix Web's high-performance, asynchronous framework. From setup to advanced techniques, create robust and scalable web applications with ease.",
+        "url": "https://actix.rs",
+        "category": "languages",
+        "subcategory": "rust"
     }
 ]
diff --git a/database/open_source/projects.json b/database/open_source/projects.json
index 8b0e79031..1381ef9e9 100644
--- a/database/open_source/projects.json
+++ b/database/open_source/projects.json
@@ -173,6 +173,12 @@
     "url": "https://github.com/EbookFoundation/free-programming-books",
     "category": "open-source",
     "subcategory": "projects"
+  },
+  {
+    "name": "Free For Geeks",
+    "description": "Free For Geeks is your curated toolbox for building better software. Free resources for all your dev needs.",
+    "url": "https://freeforgeeks.com/",
+    "category": "open-source",
+    "subcategory": "projects"
   }
 ]
-
diff --git a/database/placement_prep/job-portals.json b/database/placement_prep/job-portals.json
index a32f40d61..726dc5abf 100644
--- a/database/placement_prep/job-portals.json
+++ b/database/placement_prep/job-portals.json
@@ -1,4 +1,11 @@
 [
+  {
+    "name": "Remotely",
+    "description": "Remotely is platform that helps you find full-time and part-time remote jobs. They have tech and as well as non-tech jobs.",
+    "url": "https://www.remotely.jobs/",
+    "category": "placement-prep",
+    "subcategory": "job-portals"
+  },
   {
     "name": "WorkAtAStartup",
     "description": "Work-At-Startup is a job portal to find Remote, On-site and Full-time remote jobs",
@@ -62,6 +69,13 @@
     "category": "placement-prep",
     "subcategory": "job-portals"
   },
+  {
+    "name": "Himalays",
+    "description": "Himayalas is platform made for specifically to find Remote (work from home) jobs at too remote companies",
+    "url": "https://himalayas.app/",
+    "category": "placement-prep",
+    "subcategory": "job-portals"
+  },
   {
     "name": "Freshersworld",
     "description": "It is the best platform to get the job and preparation for job interview.",
diff --git a/database/resources/docs-generator.json b/database/resources/docs-generator.json
new file mode 100644
index 000000000..16986df4f
--- /dev/null
+++ b/database/resources/docs-generator.json
@@ -0,0 +1,66 @@
+[
+  {
+    "name": "DevDocs",
+    "description": "DevDocs combines multiple API documentations in a fast, organized, and searchable interface. Here you can find documentation for many popular programming languages and frameworks.",
+    "url": "https://devdocs.io/",
+    "category": "resources",
+    "subcategory": "docsgenerator"
+  },
+  {
+    "name": "Docsify",
+    "description": "If you're looking for a static generator that makes it easier for you to create docs, you'll love Docsify. Unlike GitBook, it does not generate static HTML files. Instead, it loads and parses your Markdown files and displays them as a website.",
+    "url": "https://docsify.js.org/#/",
+    "category": "resources",
+    "subcategory": "docsgenerator"
+  },
+  {
+    "name": "Docusaurus",
+    "description": "If you need a static generator to help you build your product’s documentation site, Docusaurus is your tool! :) Not only does it provide you with fast-side client navigation that takes interactivity to new heights, but also out-of-the-box documentation features that can help make your site stand out from the others.",
+    "url": "https://docusaurus.io/",
+    "category": "resources",
+    "subcategory": "docsgenerator"
+  },
+  {
+    "name": "GitBook",
+    "description": "GitBook is a modern documentation platform where teams can document everything from products to internal knowledge-bases and APIs. It is a tool for teams and individuals to write and host beautiful documentation.",
+    "url": "https://www.gitbook.com/",
+    "category": "resources",
+    "subcategory": "docsgenerator"
+  },
+
+  {
+    "name": "jsDoc",
+    "description": "JSDoc is a markup language used to annotate JavaScript source code files. Using comments containing JSDoc, programmers can add documentation describing the application programming interface of the code they're creating.",
+    "url": "https://jsdoc.app/",
+    "category": "resources",
+    "subcategory": "docsgenerator"
+  },
+  {
+    "name": "MkDocs",
+    "description": "MkDocs is a fast, simple, and downright gorgeous static site generator that's geared towards building project documentation. Documentation source files are written in Markdown, and configured with a single YAML configuration file.",
+    "url": "https://www.mkdocs.org/",
+    "category": "resources",
+    "subcategory": "docsgenerator"
+  },
+  {
+    "name": "Sphinx",
+    "description": "Sphinx is a tool that makes it easy to create intelligent and beautiful documentation, written by Georg Brandl and licensed under the BSD license. It was originally created for the Python documentation, and it has excellent facilities for the documentation of software projects in a range of languages.",
+    "url": "http://www.sphinx-doc.org/en/master/",
+    "category": "resources",
+    "subcategory": "docsgenerator"
+  },
+  {
+    "name": "Typedoc",
+    "description": "TypeDoc is a documentation generator for TypeScript projects. It generates API documentation in HTML format from comments in your source code.",
+    "url": "https://typedoc.org/",
+    "category": "resources",
+    "subcategory": "docsgenerator"
+  },
+  {
+    "name": "VuePress",
+    "description": "VuePress is a minimalistic static site generator with a Vue-powered theming system, and a default theme optimized for writing technical documentation. It was created to support the documentation needs of Vue's own sub-projects.",
+    "url": "https://vuepress.vuejs.org/",
+    "category": "resources",
+    "subcategory": "docsgenerator"
+  }
+]
diff --git a/database/technical-writing/tools.json b/database/technical-writing/tools.json
index 315d9e7aa..76c2692fc 100644
--- a/database/technical-writing/tools.json
+++ b/database/technical-writing/tools.json
@@ -1,11 +1,4 @@
 [
-  {
-    "name": "Docsify",
-    "description": "If you're looking for a static generator that makes it easier for you to create docs, you'll love Docsify. Unlike GitBook, it does not generate static HTML files. Instead, it loads and parses your Markdown files and displays them as a website.",
-    "url": "https://docsify.js.org/#/",
-    "category": "technical-writing",
-    "subcategory": "technical-writing-tools"
-  },
   {
     "name": "Hugo",
     "description": "If you're looking for a framework to help you build your documentation site quickly, check out Hugo. It allows you to output your content in multiple formats, including JSON or AMP as well as provides shortcodes to simplify your Markdown files.",
@@ -26,12 +19,5 @@
     "url": "https://hemingwayapp.com/",
     "category": "technical-writing",
     "subcategory": "technical-writing-tools"
-  },
-  {
-    "name": "Docusaurus",
-    "description": "If you need a static generator to help you build your product’s documentation site, Docusaurus is your tool! :) Not only does it provide you with fast-side client navigation that takes interactivity to new heights, but also out-of-the-box documentation features that can help make your site stand out from the others.",
-    "url": "https://docusaurus.io/",
-    "category": "technical-writing",
-    "subcategory": "technical-writing-tools"
   }
 ]
diff --git a/layouts/GeneralLayout.tsx b/layouts/GeneralLayout.tsx
index 38dd45fc9..d22d6a166 100644
--- a/layouts/GeneralLayout.tsx
+++ b/layouts/GeneralLayout.tsx
@@ -8,13 +8,12 @@ import { SkipLink } from 'components/SkipLink/SkipLink'
 import { useContext } from 'react'
 import { IContext } from 'types'
 import { GlobalContext } from 'context/GlobalContext'
-import clsx from 'clsx'
-import { usePathname } from 'next/navigation'
+
 import MobileBottomNav from 'components/MobileBottomNav/MobileBottomNav'
 
 const GeneralLayout = ({ children }: { children: ReactNode }) => {
   const { sidebar } = useContext<IContext>(GlobalContext)
-  const pathname = usePathname()
+
   return (
     <>
       <SkipLink />
@@ -30,12 +29,7 @@ const GeneralLayout = ({ children }: { children: ReactNode }) => {
         </nav>
         <main
           data-custom="restrict-click-outside"
-          className={clsx(
-            'flex flex-col min-h-full px-4 pb-2 md:ml-[290px] lg:w-[calc(100%-290px)]',
-
-            pathname != '/' && ' transition-color ease-in-out duration-200',
-            'bg-theme-primary-light dark:bg-inherit'
-          )}
+          className="flex flex-col min-h-full px-4 pb-2 md:ml-[290px] lg:w-[calc(100%-290px)] bg-white dark:bg-inherit"
           id="main"
         >
           <div className="flex-grow">{children}</div>
diff --git a/pages/[category]/index.tsx b/pages/[category]/index.tsx
index b45708144..11919c9e0 100644
--- a/pages/[category]/index.tsx
+++ b/pages/[category]/index.tsx
@@ -54,7 +54,7 @@ const CategoryPage = () => {
                     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"
+                    className="group flex flex-col dark:border dark:border-theme-primary dark:border-opacity-8 rounded-xl dark:bg-theme-tertiary bg-theme-primary-light border border border-theme-secondary/25 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-gray-300 text-text-primary-light text-lg capitalize font-medium">
diff --git a/pages/index.tsx b/pages/index.tsx
index c09a3da82..f3bffe087 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -31,7 +31,7 @@ const SocialLink: React.FC<SocialLinkProps> = ({
   title,
   description,
 }) => (
-  <div className="md:w-1/3 w-full dark:bg-slate-800 bg-light-white hover:bg-light-silver dark:hover:bg-slate-700 hover:border border-[#BDBDBD14] p-6 mb-4 rounded-lg lg:h-44">
+  <div className="md:w-1/3 w-full dark:bg-slate-800 bg-theme-primary-light hover:bg-theme-primary-light/8 dark:hover:bg-slate-700 border border-theme-secondary/25 shadow-md p-6 mb-4 rounded-lg lg:h-44">
     <Link href={href}>
       <div className="flex items-center dark:text-text-quinary gap-2 mb-3">
         <div>{icon}</div>
@@ -211,7 +211,7 @@ export default function Home() {
               </p>
               <div
                 className={
-                  'min-h-52 p-8 rounded-3xl dark:bg-slate-800 bg-light-white mt-4 mb-6 border border-[#BDBDBD14]'
+                  'min-h-52 p-8 rounded-3xl dark:bg-slate-800 bg-theme-primary-light mt-4 mb-6 border border-theme-secondary/25 shadow-md'
                 }
               >
                 <div
@@ -329,7 +329,7 @@ export default function Home() {
                         href={`/${el.category}`}
                         className="w-full sm:w-[calc(50%-1rem)] md:w-[calc(33.33%-1rem)] lg:w-[calc(33.33%-1rem)] group"
                       >
-                        <div className="border-solid border-slate-800 dark:bg-slate-800 dark:hover:bg-slate-700 bg-light-white hover:bg-light-silver flex items-center justify-between rounded-xl sm:h-16 h-fit">
+                        <div className="border border-theme-secondary border-opacity-25 shadow-sm dark:border dark:border-theme-primary dark:border-opacity-20 duration-300 transition-all dark:bg-slate-800 dark:hover:bg-slate-700 bg-theme-primary-light hover:bg-theme-primary-light/8 flex items-center justify-between rounded-xl sm:h-16 h-fit">
                           <div className="p-5 truncate ...">
                             {el.category.toUpperCase()}
                           </div>
@@ -345,7 +345,7 @@ export default function Home() {
           </div>
         </div>
         <div className="mt-10 mb-6 md:mb-0">
-          <div className="dark:bg-slate-800 bg-light-white rounded-lg border border-[#BDBDBD14] sm:flex-row items-center justify-between md:p-7 md:pr-12 p-5">
+          <div className="dark:bg-slate-800 bg-theme-primary-light rounded-lg border border border-theme-secondary/25 sm:flex-row items-center justify-between md:p-7 md:pr-12 p-5">
             <div className="md:flex items-center gap-4">
               <div className="text-yellow-400 ml-4 lg:ml-0">
                 <Icons.star className="h-8 w-8" />
@@ -366,7 +366,7 @@ export default function Home() {
                 icon={<Icons.heart className="h-4 w-4" />}
                 variant="pale"
                 link="https://github.com/sponsors/rupali-codes"
-                className="w-full sm:w-auto mt-4 mt-4 lg:mt-0 md:ml-4 md:mr-auto"
+                className="w-full sm:w-auto border border-theme-secondary/25 bg-primary/8 mt-4 mt-4 lg:mt-0 md:ml-4 md:mr-auto"
               />
             </div>
           </div>
diff --git a/public/sitemap.xml b/public/sitemap.xml
index 7ece13808..2e985c5a5 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -153,6 +153,11 @@
         <loc>https://www.linkshub.dev/blogs</loc>
         <lastmod>2023-06-28T21:40:52+00:00</lastmod>
         <priority>0.8</priority>
+    </url>
+       <url>
+        <loc>https://www.linkshub.dev/docsgenerator</loc>
+        <lastmod>2023-06-28T21:40:52+00:00</lastmod>
+        <priority>0.8</priority>
     </url>
     <url>
         <loc>https://www.linkshub.dev/e-book</loc>