diff --git a/src/index.css b/src/index.css
index a20aa58..c06c19d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,94 +1,64 @@
+
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. */
-
 @layer base {
   :root {
     --background: 0 0% 100%;
     --foreground: 222.2 84% 4.9%;
-
     --card: 0 0% 100%;
     --card-foreground: 222.2 84% 4.9%;
-
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 84% 4.9%;
-
     --primary: 222.2 47.4% 11.2%;
     --primary-foreground: 210 40% 98%;
-
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-
-    --muted: 210 40% 96.1%;
+    --secondary: 210 40% 96%;
+    --secondary-foreground: 222.2 84% 4.9%;
+    --muted: 210 40% 96%;
     --muted-foreground: 215.4 16.3% 46.9%;
-
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-
+    --accent: 210 40% 96%;
+    --accent-foreground: 222.2 84% 4.9%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
-
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
     --ring: 222.2 84% 4.9%;
-
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
     --radius: 0.5rem;
-
-    --sidebar-background: 0 0% 98%;
-
-    --sidebar-foreground: 240 5.3% 26.1%;
-
-    --sidebar-primary: 240 5.9% 10%;
-
-    --sidebar-primary-foreground: 0 0% 98%;
-
-    --sidebar-accent: 240 4.8% 95.9%;
-
-    --sidebar-accent-foreground: 240 5.9% 10%;
-
-    --sidebar-border: 220 13% 91%;
-
-    --sidebar-ring: 217.2 91.2% 59.8%;
   }
 
   .dark {
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
-
     --card: 222.2 84% 4.9%;
     --card-foreground: 210 40% 98%;
-
     --popover: 222.2 84% 4.9%;
     --popover-foreground: 210 40% 98%;
-
     --primary: 210 40% 98%;
     --primary-foreground: 222.2 47.4% 11.2%;
-
     --secondary: 217.2 32.6% 17.5%;
     --secondary-foreground: 210 40% 98%;
-
     --muted: 217.2 32.6% 17.5%;
     --muted-foreground: 215 20.2% 65.1%;
-
     --accent: 217.2 32.6% 17.5%;
     --accent-foreground: 210 40% 98%;
-
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 40% 98%;
-
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
     --ring: 212.7 26.8% 83.9%;
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
   }
 }
 
@@ -96,8 +66,21 @@
   * {
     @apply border-border;
   }
-
-  body {
+  html, body {
     @apply bg-background text-foreground;
+    height: 100vh;
+    width: 100vw;
+    overflow: hidden;
+    margin: 0;
+    padding: 0;
   }
-}
\ No newline at end of file
+  body {
+    font-family: 'Inter', system-ui, sans-serif;
+  }
+  #root {
+    height: 100vh;
+    width: 100vw;
+    overflow: hidden;
+  }
+}
+
diff --git a/src/pages/SystemView.tsx b/src/pages/SystemView.tsx
index 57c9917..8f5db8a 100644
--- a/src/pages/SystemView.tsx
+++ b/src/pages/SystemView.tsx
@@ -186,9 +186,9 @@ const SystemView = () => {
   }, [system, cleanMode]);
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
-      <div className="container mx-auto px-4 py-8">
-        <div className="text-center mb-8">
+    <div className="h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 overflow-hidden">
+      <div className="h-full flex flex-col">
+        <div className="flex-shrink-0 text-center py-8 px-4">
           <h1 className="text-4xl font-bold text-white mb-2">System: {system}</h1>
           <div className="flex items-center justify-center gap-4 text-slate-300">
             <p>Press Ctrl+V to paste signatures</p>
@@ -205,36 +205,38 @@ const SystemView = () => {
           </div>
         </div>
         
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-          {/* Main content - signatures */}
-          <div className="lg:col-span-2 space-y-6">
-            <SystemTracker system={system} />
-          </div>
-          
-          {/* Regional overview map */}
-          <div className="lg:col-span-1">
-            {region ? (
-              <div className="h-96 border border-purple-500/30 rounded-lg overflow-hidden">
-                <div className="p-2 border-b border-purple-500/30 bg-black/20 backdrop-blur-sm">
-                  <h3 className="text-white text-sm font-semibold">{region} Region</h3>
-                  <p className="text-purple-200 text-xs">Click systems to navigate • Current: {system}</p>
+        <div className="flex-1 overflow-hidden px-4 pb-8">
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 h-full">
+            {/* Main content - signatures */}
+            <div className="lg:col-span-2 space-y-6 overflow-y-auto">
+              <SystemTracker system={system} />
+            </div>
+            
+            {/* Regional overview map */}
+            <div className="lg:col-span-1 flex flex-col">
+              {region ? (
+                <div className="h-96 border border-purple-500/30 rounded-lg overflow-hidden flex flex-col">
+                  <div className="flex-shrink-0 p-2 border-b border-purple-500/30 bg-black/20 backdrop-blur-sm">
+                    <h3 className="text-white text-sm font-semibold">{region} Region</h3>
+                    <p className="text-purple-200 text-xs">Click systems to navigate • Current: {system}</p>
+                  </div>
+                  <div className="flex-1 min-h-0">
+                    <RegionMap 
+                      regionName={region} 
+                      focusSystem={system}
+                      isCompact={true}
+                    />
+                  </div>
                 </div>
-                <div className="h-[calc(100%-3rem)]">
-                  <RegionMap 
-                    regionName={region} 
-                    focusSystem={system}
-                    isCompact={true}
-                  />
+              ) : (
+                <div className="bg-black/20 backdrop-blur-sm border border-purple-500/30 rounded-lg p-4 h-96 flex items-center justify-center">
+                  <div className="text-center">
+                    <div className="text-white text-sm">No region information</div>
+                    <div className="text-purple-200 text-xs mt-1">Navigate from a region map to see regional overview</div>
+                  </div>
                 </div>
-              </div>
-            ) : (
-              <div className="bg-black/20 backdrop-blur-sm border border-purple-500/30 rounded-lg p-4 h-96 flex items-center justify-center">
-                <div className="text-center">
-                  <div className="text-white text-sm">No region information</div>
-                  <div className="text-purple-200 text-xs mt-1">Navigate from a region map to see regional overview</div>
-                </div>
-              </div>
-            )}
+              )}
+            </div>
           </div>
         </div>
       </div>