diff --git a/apps/web/app/(org)/dashboard/_components/DashboardInner.tsx b/apps/web/app/(org)/dashboard/_components/DashboardInner.tsx
index 59baec818c..7c57dab3f8 100644
--- a/apps/web/app/(org)/dashboard/_components/DashboardInner.tsx
+++ b/apps/web/app/(org)/dashboard/_components/DashboardInner.tsx
@@ -80,11 +80,12 @@ export default function DashboardInner({
 	);
 	const isSharedCapsPage = pathname === "/dashboard/shared-caps";
 	return (
-		<div className="flex flex-col min-h-screen">
+		<div className="flex overflow-hidden w-full flex-col flex-1 md:mt-0 mt-[126px]">
+			{/* NavBar */}
 			<div
 				className={clsx(
-					"flex sticky z-40 justify-between items-center px-5 mt-10 w-full border-b",
-					"bg-gray-1 lg:bg-transparent min-h-16 lg:min-h-10 border-gray-3 lg:border-b-0 lg:pl-0 lg:pr-5 lg:top-0 lg:relative top-[64px] lg:mt-5 lg:h-8",
+					"flex fixed z-40 justify-between items-center py-3 pr-2 pl-5 w-full md:relative mt-[60px] md:mt-0 md:py-[19px] lg:pl-0 lg:pr-5",
+					"top-0 bg-gray-1 md:mt-0",
 				)}
 			>
 				<div className="flex flex-col gap-0.5">
@@ -170,12 +171,15 @@ export default function DashboardInner({
 					<User />
 				</div>
 			</div>
+			{/*End of NavBar*/}
 			<main
 				className={
-					"flex flex-col flex-1 p-5 pb-5 mt-5 border border-b-0 min-h-fit bg-gray-2 border-gray-3 lg:rounded-tl-2xl lg:p-8"
+					"flex overscroll-contain flex-col flex-1 flex-grow p-5 h-full border border-b-0 custom-scroll bg-gray-2 border-gray-3 lg:rounded-tl-2xl lg:p-8"
 				}
 			>
-				<div className="flex flex-col flex-1 gap-4">{children}</div>
+				<div className="flex flex-col flex-1 flex-grow gap-4 min-h-fit">
+					{children}
+				</div>
 			</main>
 			{isSharedCapsPage && activeOrganization?.members && (
 				<MembersDialog
@@ -300,7 +304,7 @@ const User = () => {
 								.filter((item) => item.showCondition)
 								.map((item, index) => (
 									<MenuItem
-										key={index}
+										key={index.toString()}
 										icon={item.icon}
 										name={item.name}
 										href={item.href ?? "#"}
diff --git a/apps/web/app/(org)/dashboard/_components/MobileTab.tsx b/apps/web/app/(org)/dashboard/_components/MobileTab.tsx
new file mode 100644
index 0000000000..810c5ce4d0
--- /dev/null
+++ b/apps/web/app/(org)/dashboard/_components/MobileTab.tsx
@@ -0,0 +1,183 @@
+"use client";
+
+import { Avatar } from "@cap/ui";
+import { useClickAway } from "@uidotdev/usehooks";
+import clsx from "clsx";
+import { Check, ChevronDown } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import {
+	type Dispatch,
+	type LegacyRef,
+	type MutableRefObject,
+	type SetStateAction,
+	useRef,
+	useState,
+} from "react";
+import { useDashboardContext } from "../Contexts";
+import { CapIcon, CogIcon, LayersIcon } from "./AnimatedIcons";
+import { updateActiveOrganization } from "./Navbar/server";
+
+const Tabs = [
+	{ icon: <LayersIcon size={20} />, href: "/dashboard/spaces/browse" },
+	{ icon: <CapIcon size={25} />, href: "/dashboard/caps" },
+	{
+		icon: <CogIcon size={22} />,
+		href: "/dashboard/settings/organization",
+		ownerOnly: true,
+	},
+];
+
+const MobileTab = () => {
+	const [open, setOpen] = useState(false);
+	const containerRef = useRef<HTMLDivElement>(null);
+	const { activeOrganization: activeOrg, user } = useDashboardContext();
+	const isOwner = activeOrg?.organization.ownerId === user.id;
+	const menuRef = useClickAway((e) => {
+		if (
+			containerRef.current &&
+			!containerRef.current.contains(e.target as Node)
+		) {
+			setOpen(false);
+		}
+	});
+	return (
+		<div className="flex sticky bottom-0 z-50 flex-1 justify-between items-center px-5 w-screen h-16 border-t lg:hidden border-gray-5 bg-gray-1">
+			<AnimatePresence>
+				{open && <OrgsMenu setOpen={setOpen} menuRef={menuRef} />}
+			</AnimatePresence>
+			<Orgs open={open} setOpen={setOpen} containerRef={containerRef} />
+			<div className="flex gap-6 justify-between items-center h-full text-gray-11">
+				{Tabs.filter((i) => !i.ownerOnly || isOwner).map((tab) => (
+					<Link href={tab.href} key={tab.href}>
+						{tab.icon}
+					</Link>
+				))}
+			</div>
+		</div>
+	);
+};
+
+const Orgs = ({
+	setOpen,
+	open,
+	containerRef,
+}: {
+	setOpen: Dispatch<SetStateAction<boolean>>;
+	open: boolean;
+	containerRef: MutableRefObject<HTMLDivElement | null>;
+}) => {
+	const { activeOrganization: activeOrg } = useDashboardContext();
+	return (
+		<div
+			onClick={() => setOpen((p) => !p)}
+			ref={containerRef}
+			className="flex gap-1.5 items-center p-2 rounded-full border bg-gray-3 border-gray-5"
+		>
+			{activeOrg?.organization.iconUrl ? (
+				<div className="overflow-hidden relative flex-shrink-0 rounded-full size-[24px]">
+					<Image
+						src={activeOrg.organization.iconUrl}
+						alt={activeOrg.organization.name || "Organization icon"}
+						fill
+						className="object-cover"
+					/>
+				</div>
+			) : (
+				<Avatar
+					letterClass="text-xs"
+					className="relative flex-shrink-0 mx-auto size-6"
+					name={activeOrg?.organization.name ?? "No organization found"}
+				/>
+			)}
+			<p className="text-xs mr-2 text-gray-12 truncate w-fit max-w-[90px]">
+				{activeOrg?.organization.name}
+			</p>
+			<ChevronDown
+				className={clsx(
+					"text-gray-11 size-4 transition-transform",
+					open && "rotate-180",
+				)}
+			/>
+		</div>
+	);
+};
+
+const OrgsMenu = ({
+	setOpen,
+	menuRef,
+}: {
+	setOpen: Dispatch<SetStateAction<boolean>>;
+	menuRef: MutableRefObject<Element>;
+}) => {
+	const { activeOrganization: activeOrg, organizationData: orgData } =
+		useDashboardContext();
+	const router = useRouter();
+	return (
+		<motion.div
+			initial={{ scale: 0.98, opacity: 0 }}
+			animate={{ scale: 1, opacity: 1 }}
+			exit={{ scale: 0.9, opacity: 0 }}
+			transition={{ duration: 0.15 }}
+			ref={menuRef as LegacyRef<HTMLDivElement>}
+			className={
+				"isolate absolute overscroll-contain bottom-14 p-2 space-y-1.5 w-full rounded-xl h-fit border bg-gray-3 max-h-[325px] custom-scroll max-w-[200px] border-gray-4"
+			}
+		>
+			{orgData?.map((organization) => {
+				const isSelected =
+					activeOrg?.organization.id === organization.organization.id;
+				return (
+					<div
+						className={clsx(
+							"p-2 rounded-lg transition-colors duration-300 group",
+							isSelected
+								? "pointer-events-none"
+								: "text-gray-10 hover:text-gray-12 hover:bg-gray-6",
+						)}
+						key={organization.organization.name + "-organization"}
+						onClick={async () => {
+							await updateActiveOrganization(organization.organization.id);
+							setOpen(false);
+							router.push("/dashboard/caps");
+						}}
+					>
+						<div className="flex gap-2 items-center w-full">
+							{organization.organization.iconUrl ? (
+								<div className="overflow-hidden relative flex-shrink-0 rounded-full size-5">
+									<Image
+										src={organization.organization.iconUrl}
+										alt={organization.organization.name || "Organization icon"}
+										fill
+										className="object-cover"
+									/>
+								</div>
+							) : (
+								<Avatar
+									letterClass="text-xs"
+									className="relative flex-shrink-0 size-5"
+									name={organization.organization.name}
+								/>
+							)}
+							<p
+								className={clsx(
+									"flex-1 text-sm transition-colors duration-200 group-hover:text-gray-12",
+									isSelected ? "text-gray-12" : "text-gray-10",
+								)}
+							>
+								{organization.organization.name}
+							</p>
+							{isSelected && (
+								<Check size={18} className={"ml-auto text-gray-12"} />
+							)}
+						</div>
+					</div>
+				);
+			})}
+		</motion.div>
+	);
+};
+
+export default MobileTab;
diff --git a/apps/web/app/(org)/dashboard/_components/Navbar/Mobile.tsx b/apps/web/app/(org)/dashboard/_components/Navbar/Mobile.tsx
index 398a897f95..a40afd15ed 100644
--- a/apps/web/app/(org)/dashboard/_components/Navbar/Mobile.tsx
+++ b/apps/web/app/(org)/dashboard/_components/Navbar/Mobile.tsx
@@ -5,7 +5,7 @@ import { faMoon, faSun } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useClickAway } from "@uidotdev/usehooks";
 import { AnimatePresence, motion } from "framer-motion";
-import { Menu, X } from "lucide-react";
+import { X } from "lucide-react";
 import Link from "next/link";
 import { type MutableRefObject, useState } from "react";
 import { useTheme } from "../../Contexts";
@@ -54,7 +54,7 @@ export const AdminMobileNav = () => {
 						<LogoBadge className="block w-auto h-8" />
 					</Link>
 				</div>
-				<div className="flex gap-4 items-center h-full">
+				<div className="flex gap-4 items-center px-4 h-full">
 					<div
 						onClick={() => {
 							setThemeHandler(theme === "light" ? "dark" : "light");
@@ -66,12 +66,6 @@ export const AdminMobileNav = () => {
 							icon={theme === "dark" ? faSun : faMoon}
 						/>
 					</div>
-					<button
-						className="flex flex-col gap-2 justify-center items-center px-5 h-full text-white border-l border-gray-3 lg:hidden"
-						onClick={() => setSidebarOpen(true)}
-					>
-						<Menu className="text-gray-12 size-7" aria-hidden="true" />
-					</button>
 				</div>
 			</div>
 		</>
diff --git a/apps/web/app/(org)/dashboard/layout.tsx b/apps/web/app/(org)/dashboard/layout.tsx
index 90dc58aa4e..7b042730a8 100644
--- a/apps/web/app/(org)/dashboard/layout.tsx
+++ b/apps/web/app/(org)/dashboard/layout.tsx
@@ -2,6 +2,7 @@ import { getCurrentUser } from "@cap/database/auth/session";
 import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
 import DashboardInner from "./_components/DashboardInner";
+import MobileTab from "./_components/MobileTab";
 import DesktopNav from "./_components/Navbar/Desktop";
 import MobileNav from "./_components/Navbar/Mobile";
 import { DashboardContexts } from "./Contexts";
@@ -78,16 +79,15 @@ export default async function DashboardLayout({
 				anyNewNotifications={anyNewNotifications}
 				userPreferences={userPreferences}
 			>
-				<div className="grid grid-cols-[auto,1fr] overflow-y-auto bg-gray-1 grid-rows-[auto,1fr] h-dvh min-h-dvh">
-					<aside className="z-10 col-span-1 row-span-2">
+				<div className="grid grid-cols-[auto,1fr] bg-gray-1 grid-rows-[auto,1fr] h-dvh min-h-dvh">
+					<aside className="hidden z-10 col-span-1 row-span-2 lg:flex">
 						<DesktopNav />
 					</aside>
-					<div className="flex col-span-1 row-span-2 h-full custom-scroll focus:outline-none">
+					<div className="flex col-span-2 row-span-2 h-full md:col-span-1 focus:outline-none">
 						<MobileNav />
-						<div className="dashboard-page">
-							<DashboardInner>{children}</DashboardInner>
-						</div>
+						<DashboardInner>{children}</DashboardInner>
 					</div>
+					<MobileTab />
 				</div>
 			</DashboardContexts>
 		</UploadingProvider>
diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index 4906011024..db1bcf3623 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -860,6 +860,12 @@ footer a {
 	}
 }
 
+@media (max-width: 768px) {
+	.intercom-lightweight-app-launcher {
+		bottom: 90px !important;
+	}
+}
+
 @layer base {
 	* {
 		@apply border-border;
