diff --git a/assets/icons/svg/nav/search-active.svg b/assets/icons/svg/nav/search-active.svg
new file mode 100644
index 000000000..1f64c1ff9
--- /dev/null
+++ b/assets/icons/svg/nav/search-active.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z" fill="white"/>
+<path d="M21.3001 22.0001C21.1201 22.0001 20.9401 21.9301 20.8101 21.8001L18.9501 19.9401C18.6801 19.6701 18.6801 19.2301 18.9501 18.9501C19.2201 18.6801 19.6601 18.6801 19.9401 18.9501L21.8001 20.8101C22.0701 21.0801 22.0701 21.5201 21.8001 21.8001C21.6601 21.9301 21.4801 22.0001 21.3001 22.0001Z" fill="white"/>
+</svg>
diff --git a/assets/icons/svg/nav/search-inactive.svg b/assets/icons/svg/nav/search-inactive.svg
new file mode 100644
index 000000000..b57d9c8d7
--- /dev/null
+++ b/assets/icons/svg/nav/search-inactive.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z" stroke="#7A8096" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22 22L20 20" stroke="#7A8096" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/components/MobileBottomNav/MobileBottomNav.tsx b/components/MobileBottomNav/MobileBottomNav.tsx
new file mode 100644
index 000000000..9258518f3
--- /dev/null
+++ b/components/MobileBottomNav/MobileBottomNav.tsx
@@ -0,0 +1,93 @@
+import React, { FC } from 'react'
+import { useRouter } from 'next/router'
+import Link from 'next/link'
+
+import HomeInActiveIcon from 'assets/icons/svg/nav/home-inactive.svg'
+import HomeActiveIcon from 'assets/icons/svg/nav/home-active.svg'
+import SaveInActiveIcon from 'assets/icons/svg/nav/save-inactive.svg'
+import SaveActiveIcon from 'assets/icons/svg/nav/save-active.svg'
+import TeamInActiveIcon from 'assets/icons/svg/nav/team-inactive.svg'
+import TeamActiveIcon from 'assets/icons/svg/nav/team-active.svg'
+import SearchAciveIcon from 'assets/icons/svg/nav/search-active.svg'
+import SearchInAciveIcon from 'assets/icons/svg/nav/search-inactive.svg'
+
+const MobileBottomNav: FC = () => {
+  const router = useRouter()
+
+  const inActiveIconCls = 'stroke-gray-400'
+  const activeIconCls = 'fill-primary dark:fill-white'
+
+  const toggleSearch = () => {
+    // write the code here
+    console.log('hello')
+  }
+
+  const navLinks = [
+    {
+      inActiveIcon: <HomeInActiveIcon className={inActiveIconCls} />,
+      activeIcon: <HomeActiveIcon className={activeIconCls} />,
+      label: 'Home',
+      href: '/',
+      spaceActive: true,
+    },
+    {
+      inActiveIcon: <SaveInActiveIcon className={inActiveIconCls} />,
+      activeIcon: <SaveActiveIcon className={activeIconCls} />,
+      label: 'Saved',
+      href: '/saved',
+    },
+    {
+      inActiveIcon: <SearchInAciveIcon className={inActiveIconCls} />,
+      activeIcon: <SearchAciveIcon className={activeIconCls} />,
+      label: 'Search',
+      onClick: toggleSearch,
+    },
+    {
+      inActiveIcon: <TeamInActiveIcon className={inActiveIconCls} />,
+      activeIcon: <TeamActiveIcon className={activeIconCls} />,
+      label: 'Our Team',
+      href: '/contributors',
+    },
+  ]
+
+  const renderLinks = () =>
+    navLinks.map(({ inActiveIcon, activeIcon, label, href, onClick }, i) => {
+      const checkRoute = (val: string) => router.asPath.startsWith(val)
+
+      const isHomeActive = !checkRoute('/saved') && !checkRoute('/contributors')
+      const isUrlMatched = href && checkRoute(href)
+      const isActive = label === 'Home' ? isHomeActive : isUrlMatched
+
+      const commonCls = `w-full flex items-center flex-col px-4 p-3 gap-2 font-medium  rounded-xl hover:bg-slate-100 hover:bg-opacity-50 dark:hover:bg-zinc-400 dark:hover:bg-opacity-10 ${
+        isActive ? 'text-primary dark:text-white' : 'text-gray-400'
+      }`
+
+      return (
+        <li key={i} className="list-none">
+          {onClick ? (
+            <button onClick={onClick} className={commonCls}>
+              <span className="flex items-center justify-center">
+                {inActiveIcon}
+              </span>
+              <span className="text-xs">{label}</span>
+            </button>
+          ) : (
+            <Link href={href} className={commonCls}>
+              <span className="flex items-center justify-center">
+                {isActive ? activeIcon : inActiveIcon}
+              </span>
+              <span className="text-xs">{label}</span>
+            </Link>
+          )}
+        </li>
+      )
+    })
+
+  return (
+    <div className="sm:hidden -ml-4 fixed z-30 bottom-0 py-2 w-full flex gap-4 justify-evenly bg-white dark:bg-slate-800">
+      {renderLinks()}
+    </div>
+  )
+}
+
+export default MobileBottomNav
diff --git a/layouts/GeneralLayout.tsx b/layouts/GeneralLayout.tsx
index b147de122..f1bfcd54c 100644
--- a/layouts/GeneralLayout.tsx
+++ b/layouts/GeneralLayout.tsx
@@ -10,6 +10,7 @@ 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)
@@ -20,7 +21,7 @@ const GeneralLayout = ({ children }: { children: ReactNode }) => {
       <Header />
       <SideNavbar />
       <div
-        className={`row-start-2 row-end-3 min-h-[100vh-72px] w-full bg-gray-100 dark:bg-[#101623] ${
+        className={`row-start-2 row-end-3 overflow-y-scroll h-[calc(100vh-156px)] sm:h-[calc(100vh-72px)] w-full bg-gray-100 dark:bg-[#101623] ${
           sidebar ? 'max-[1024px]:overflow-hidden' : ''
         }`}
       >
@@ -38,6 +39,7 @@ const GeneralLayout = ({ children }: { children: ReactNode }) => {
         >
           {children}
           <Footer />
+          <MobileBottomNav />
         </main>
       </div>
     </>
diff --git a/pages/index.tsx b/pages/index.tsx
index d6bfc6ad6..c142c5133 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -98,7 +98,7 @@ export default function Home() {
             <Logo />
             <span>👾</span>
           </div>
-          <div className="flex flex-col mt-6 justify-center items-start w-96 max-md:w-64">
+          <div className="flex flex-col mt-6 justify-center items-start max-w-sm">
             <p className="text-md">
               {' '}
               LinksHub aims to provide developers with access to a wide range of