diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 22b6405..b6c3fa9 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,11 +1,34 @@
-import './App.css'
+import { useEffect, useState } from 'react';
+import Navigation from './components/Navigation';
+import DocsGPT from './components/DocsGPT';
+import './App.css';
 
 function App() {
+  const [isMobile, setIsMobile] = useState(true);
+
+  const handleResize = () => {
+    if (window.innerWidth > 768 && isMobile) {
+      setIsMobile(false);
+    } else {
+      setIsMobile(true);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('resize', handleResize);
+    handleResize();
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
   return (
-    <div className="flex justify-center h-screen items-center">
-      <p className="text-6xl">DocsGPT 🦖</p>
+    <div className={`${isMobile ? 'flex-col' : 'flex-row'} flex`}>
+      <Navigation isMobile={isMobile} />
+      <DocsGPT />
     </div>
-  )
+  );
 }
 
-export default App
+export default App;
diff --git a/frontend/src/components/DocsGPT.tsx b/frontend/src/components/DocsGPT.tsx
new file mode 100644
index 0000000..d7c6e1d
--- /dev/null
+++ b/frontend/src/components/DocsGPT.tsx
@@ -0,0 +1,3 @@
+export default function DocsGPT() {
+  return <div>Docs GPT</div>;
+}
diff --git a/frontend/src/components/Navigation.tsx b/frontend/src/components/Navigation.tsx
new file mode 100644
index 0000000..4c0a632
--- /dev/null
+++ b/frontend/src/components/Navigation.tsx
@@ -0,0 +1,17 @@
+import React, { useState } from 'react';
+
+function MobileNavigation() {
+  return <div>Mobile Navigation</div>;
+}
+
+function DesktopNavigation() {
+  return <div>Desktop Navigation</div>;
+}
+
+export default function Navigation({ isMobile }: { isMobile: boolean }) {
+  if (isMobile) {
+    return <MobileNavigation />;
+  } else {
+    return <DesktopNavigation />;
+  }
+}