diff --git a/app/globals.css b/app/globals.css
index 288b6ab..e1107df 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -40,6 +40,30 @@ body {
   line-height: 1.6;
 }
 
+/* Status Indicator Dots */
+.status-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.status-dot.connected {
+  background-color: #859900; /* Solarized green */
+}
+
+.status-dot.disconnected {
+  background-color: #dc322f; /* Solarized red */
+}
+
+.status-dot.streaming {
+  background-color: #dc322f; /* Solarized red */
+}
+
+.status-dot.idle {
+  background-color: #586e75; /* Solarized base01 */
+}
+
 /* Glass Card Component */
 .glass {
   background: rgba(7, 54, 66, 0.4);
diff --git a/components/Footer.tsx b/components/Footer.tsx
index 06a8cbe..b4e585c 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -82,7 +82,7 @@ export default function Footer() {
           {/* Connection Status */}
           <div>
             <div className="flex items-center gap-3 mb-4">
-              <div className={`w-3 h-3 rounded-full ${obsStatus?.connected ? 'bg-green-500' : 'bg-red-500'}`}></div>
+              <div className={`status-dot ${obsStatus?.connected ? 'connected' : 'disconnected'}`}></div>
               <div>
                 <h3 className="font-semibold">OBS Studio</h3>
                 <p className="text-sm opacity-60">
@@ -151,12 +151,12 @@ export default function Footer() {
 
                 <div className="flex gap-4 mt-4">
                   <div className={`flex items-center gap-2 ${obsStatus.streaming ? 'text-red-400' : 'opacity-60'}`}>
-                    <div className={`w-2 h-2 rounded-full ${obsStatus.streaming ? 'bg-red-500' : 'bg-gray-500'}`}></div>
+                    <div className={`status-dot ${obsStatus.streaming ? 'streaming' : 'idle'}`} style={{width: '8px', height: '8px'}}></div>
                     <span className="text-sm">{obsStatus.streaming ? 'LIVE' : 'OFFLINE'}</span>
                   </div>
                   
                   <div className={`flex items-center gap-2 ${obsStatus.recording ? 'text-red-400' : 'opacity-60'}`}>
-                    <div className={`w-2 h-2 rounded-full ${obsStatus.recording ? 'bg-red-500' : 'bg-gray-500'}`}></div>
+                    <div className={`status-dot ${obsStatus.recording ? 'streaming' : 'idle'}`} style={{width: '8px', height: '8px'}}></div>
                     <span className="text-sm">{obsStatus.recording ? 'REC' : 'IDLE'}</span>
                   </div>
                 </div>