diff --git a/package.json b/package.json
index 23cb53f..d0933a9 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@auth0/nextjs-auth0": "^4.4.2",
     "@tailwindcss/vite": "^4.1.3",
+    "lucide-react": "^0.487.0",
     "next": "15.3.0",
     "react": "^19.1.0",
     "react-device-detect": "^2.2.3",
diff --git a/src/app/(app)/layout.tsx b/src/app/(app)/layout.tsx
index e2d5bb3..14e1ad0 100644
--- a/src/app/(app)/layout.tsx
+++ b/src/app/(app)/layout.tsx
@@ -14,7 +14,7 @@ export default function RootLayout({
 
     const { isMobile, isSafari } = useDevice();
     return (
-        <main>
+        <main className="card grid grid-rows-[1fr_auto]">
 
             <Image 
                 src="/drinkhappylogo.png"
diff --git a/src/app/manifest.ts b/src/app/manifest.ts
index ac908fe..7d8dfe4 100644
--- a/src/app/manifest.ts
+++ b/src/app/manifest.ts
@@ -1,5 +1,7 @@
 import type { MetadataRoute } from "next";
 
+
+
 export default function manifest(): MetadataRoute.Manifest {
 	return {
 		name: "Healthify",
diff --git a/src/lib/components/MobileNav.jsx b/src/lib/components/MobileNav.jsx
new file mode 100644
index 0000000..de5b742
--- /dev/null
+++ b/src/lib/components/MobileNav.jsx
@@ -0,0 +1,35 @@
+"use client";
+
+import React from "react";
+import { Navigation } from "@skeletonlabs/skeleton-react";
+import {
+    Folder as IconFolder,
+    Image as IconImage,
+    Music as IconMusic,
+    Video as IconVideo,
+} from "lucide-react";
+
+import { useRouter } from "next/navigation";
+
+const Footer = () => {
+    return (
+        <div className="p-4 flex flex-col items-center gap-4 bg-surface-900">
+            <Navigation.Bar className="flex justify-around w-full">
+                <Navigation.Tile label="Files" href="#/files" className="flex flex-col items-center">
+                    <IconFolder />
+                </Navigation.Tile>
+                <Navigation.Tile label="Images" href="#/images" className="flex flex-col items-center">
+                    <IconImage />
+                </Navigation.Tile>
+                <Navigation.Tile label="Music" href="#/music" className="flex flex-col items-center">
+                    <IconMusic />
+                </Navigation.Tile>
+                <Navigation.Tile label="Videos" href="#/videos" className="flex flex-col items-center">
+                    <IconVideo />
+                </Navigation.Tile>
+            </Navigation.Bar>
+        </div>
+    );
+};
+
+export default Footer;
diff --git a/src/lib/components/MobileNav.tsx b/src/lib/components/MobileNav.tsx
deleted file mode 100644
index 50e8302..0000000
--- a/src/lib/components/MobileNav.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-"use client";
-
-import React from "react";
-import { useRouter } from "next/navigation";
-
-const Footer = () => {
-	const router = useRouter();
-
-	return (
-		<div className="flex justify-around items-center py-10 bg-gray-100 border-t border-gray-300">
-			<button
-				onClick={() => router.push("/")}
-				className="text-blue-500 text-lg hover:underline"
-			>
-				Home
-			</button>
-			<button
-				onClick={() => router.push("/explore")}
-				className="text-blue-500 text-lg hover:underline"
-			>
-				Explore
-			</button>
-			<button
-				onClick={() => router.push("/profile")}
-				className="text-blue-500 text-lg hover:underline"
-			>
-				Profile
-			</button>
-		</div>
-	);
-};
-
-export default Footer;
diff --git a/tsconfig.json b/tsconfig.json
index c133409..9724f55 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -22,6 +22,6 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/lib/components/MobileNav.jsx"],
   "exclude": ["node_modules"]
 }