diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 322f00a..bf6e942 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,10 +1,47 @@
-function App() {
+import React, { useState } from 'react';
+import './App.css';
+import './styles/theme.css';
+import { ThemeProvider, useTheme } from './contexts/ThemeContext';
+import RibbonBar from './components/RibbonBar';
+import SidePanel from './components/SidePanel';
+import CommandLine from './components/CommandLine';
+import StatusBar from './components/StatusBar';
+import CanvasArea from './components/CanvasArea';
+
+function AppContent() {
+  const { theme, toggleTheme } = useTheme();
+  const [activeRibbonTab, setActiveRibbonTab] = useState('draw');
+
+  const handleRibbonTabChange = (tab: string) => {
+    setActiveRibbonTab(tab);
+  };
+
   return (
-    <>
-      <h1>Web CAD</h1>
-      <p>Welcome to the Web CAD application</p>
-    </>
-  )
+    <div className={`app-container ${theme}`} data-theme={theme}>
+      <RibbonBar onTabChange={handleRibbonTabChange} />
+      <div className="main-content">
+        <CanvasArea />
+        <SidePanel />
+      </div>
+      <CommandLine />
+      <StatusBar />
+      <button 
+        className="theme-toggle-button" 
+        onClick={toggleTheme}
+        aria-label={`Switch to ${theme === 'dark' ? 'light' : 'dark'} theme`}
+      >
+        {theme === 'dark' ? '☀️' : '🌙'}
+      </button>
+    </div>
+  );
 }
 
-export default App
\ No newline at end of file
+function App() {
+  return (
+    <ThemeProvider>
+      <AppContent />
+    </ThemeProvider>
+  );
+}
+
+export default App;
\ No newline at end of file