diff --git a/src/app/(app)/layout.tsx b/src/app/(app)/layout.tsx
new file mode 100644
index 0000000..dc11a39
--- /dev/null
+++ b/src/app/(app)/layout.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import MobileNav from "@/lib/components/MobileNav";
+import { useDevice } from "@/lib/context/DeviceContext";
+
+
+export default function RootLayout({
+    children,
+}: Readonly<{
+    children: React.ReactNode;
+}>) {
+
+    const { isMobile, isSafari } = useDevice();
+    return (
+        <main>
+            {children}
+
+            <div className="fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-gray-300">
+                    <MobileNav />
+                </div>
+            { isMobile && isSafari ? (
+                <div className="fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-gray-300">
+                    <MobileNav />
+                </div>
+            ) : null }
+        </main>
+    );
+}
diff --git a/src/app/page.tsx b/src/app/(app)/page.tsx
similarity index 96%
rename from src/app/page.tsx
rename to src/app/(app)/page.tsx
index 9bec362..1e451d5 100644
--- a/src/app/page.tsx
+++ b/src/app/(app)/page.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import "./globals.css";
 import { useDevice } from "@/lib/context/DeviceContext";
 
 function Mobile() {
@@ -32,9 +31,6 @@ function Mobile() {
 function Web() {
 
 	const {session } = useDevice();
-
-	console.log("session", session);
-
 	return (
 		<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
 			<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
@@ -60,7 +56,6 @@ function Web() {
 export default function Home() {
 
 	const { isMobile, isSafari } = useDevice();
-
 	if (isMobile && isSafari) return Mobile();
 	else return Web();
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 9cf4fc1..8eaa5c8 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,9 +1,9 @@
 "use client";
 
 import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
+import "../lib/css/globals.css";
 
-import { DeviceProvider } from "@/lib/context/DeviceContext";
+import { DeviceProvider, useDevice } from "@/lib/context/DeviceContext";
 import MobileNav from "@/lib/components/MobileNav";
 
 const geistSans = Geist({
@@ -29,6 +29,8 @@ export default function RootLayout({
             >
                 <DeviceProvider>
                     {children}
+
+                    
                 </DeviceProvider>
             </body>
         </html>
diff --git a/src/drinky.css b/src/lib/css/drinky.css
similarity index 100%
rename from src/drinky.css
rename to src/lib/css/drinky.css
diff --git a/src/app/globals.css b/src/lib/css/globals.css
similarity index 90%
rename from src/app/globals.css
rename to src/lib/css/globals.css
index 45461c1..c38dab7 100644
--- a/src/app/globals.css
+++ b/src/lib/css/globals.css
@@ -6,7 +6,7 @@
 
 @source '../../node_modules/@skeletonlabs/skeleton-react/dist';
 
-@import "../drinky.css";
+@import "./drinky.css";
 
 body {
 	font-family: Arial, Helvetica, sans-serif;