diff --git a/static/css/base.css b/static/css/base.css
new file mode 100644
index 0000000..2946bb2
--- /dev/null
+++ b/static/css/base.css
@@ -0,0 +1,75 @@
+:root {
+    --primary-color: #16767b;
+    --secondary-color: #741b5f;
+    --primary-light: #1a8a90;
+    --secondary-light: #8a2170;
+}
+
+body {
+    background-color: #f8f9fa;
+}
+
+.navbar {
+    background-color: var(--primary-color) !important;
+    position: sticky;
+    top: 0;
+    z-index: 1030;
+}
+
+.sidebar {
+    background-color: white;
+    min-height: calc(100vh - 56px);
+    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+    position: sticky;
+    top: 56px; /* Height of the navbar */
+    height: calc(100vh - 56px);
+    overflow-y: auto;
+}
+
+.sidebar .nav-link {
+    color: #333;
+    padding: 0.8rem 1rem;
+    border-radius: 0.25rem;
+    margin: 0.2rem 0;
+}
+
+.sidebar .nav-link:hover {
+    background-color: #f8f9fa;
+}
+
+.sidebar .nav-link.active {
+    background-color: var(--primary-color);
+    color: white;
+}
+
+.sidebar .nav-link i {
+    margin-right: 0.5rem;
+}
+
+.main-content {
+    padding: 2rem;
+}
+
+.card {
+    border: none;
+    border-radius: 10px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.btn-primary {
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
+}
+
+.btn-primary:hover {
+    background-color: var(--primary-light);
+    border-color: var(--primary-light);
+}
+
+.document-card {
+    transition: transform 0.2s;
+}
+
+.document-card:hover {
+    transform: translateY(-5px);
+} 
\ No newline at end of file
diff --git a/templates/common/base.html b/templates/common/base.html
index 74d1675..630ecb7 100644
--- a/templates/common/base.html
+++ b/templates/common/base.html
@@ -9,83 +9,7 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
     <link href="{{ url_for('static', filename='css/file-grid.css') }}" rel="stylesheet">
-    <style>
-        :root {
-            --primary-color: #16767b;
-            --secondary-color: #741b5f;
-            --primary-light: #1a8a90;
-            --secondary-light: #8a2170;
-        }
-        
-        body {
-            background-color: #f8f9fa;
-        }
-        
-        .navbar {
-            background-color: var(--primary-color) !important;
-            position: sticky;
-            top: 0;
-            z-index: 1030;
-        }
-        
-        .sidebar {
-            background-color: white;
-            min-height: calc(100vh - 56px);
-            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
-            position: sticky;
-            top: 56px; /* Height of the navbar */
-            height: calc(100vh - 56px);
-            overflow-y: auto;
-        }
-        
-        .sidebar .nav-link {
-            color: #333;
-            padding: 0.8rem 1rem;
-            border-radius: 0.25rem;
-            margin: 0.2rem 0;
-        }
-        
-        .sidebar .nav-link:hover {
-            background-color: #f8f9fa;
-        }
-        
-        .sidebar .nav-link.active {
-            background-color: var(--primary-color);
-            color: white;
-        }
-        
-        .sidebar .nav-link i {
-            margin-right: 0.5rem;
-        }
-        
-        .main-content {
-            padding: 2rem;
-        }
-        
-        .card {
-            border: none;
-            border-radius: 10px;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-        }
-        
-        .btn-primary {
-            background-color: var(--primary-color);
-            border-color: var(--primary-color);
-        }
-        
-        .btn-primary:hover {
-            background-color: var(--primary-light);
-            border-color: var(--primary-light);
-        }
-        
-        .document-card {
-            transition: transform 0.2s;
-        }
-        
-        .document-card:hover {
-            transform: translateY(-5px);
-        }
-    </style>
+    <link href="{{ url_for('static', filename='css/base.css') }}" rel="stylesheet">
     {% block extra_css %}{% endblock %}
 </head>
 <body>