diff --git a/frontend/index.html b/frontend/index.html
index 8d162e3..16d07dc 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -9,6 +9,7 @@
     <link data-trunk rel="css" href="print-preview.css">
     <link data-trunk rel="copy-file" href="styles/google.css">
     <link data-trunk rel="icon" href="favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 </head>
 <body>
     <script>
diff --git a/frontend/print-preview.css b/frontend/print-preview.css
index 5da387d..4e68be6 100644
--- a/frontend/print-preview.css
+++ b/frontend/print-preview.css
@@ -11,6 +11,45 @@
     margin: 5vh auto;
 }
 
+.print-preview-modal .modal-content {
+    background: var(--modal-background) !important;
+    color: var(--modal-text) !important;
+}
+
+.print-preview-modal .modal-header {
+    background: var(--modal-header-background) !important;
+    border-bottom-color: var(--modal-header-border) !important;
+}
+
+.print-preview-modal .modal-header h3 {
+    color: var(--modal-text) !important;
+}
+
+.print-preview-modal .modal-body {
+    background: var(--modal-background) !important;
+}
+
+.print-preview-modal .modal-close {
+    color: var(--modal-text) !important;
+    background: transparent !important;
+    border: none !important;
+    font-size: 1.5rem !important;
+    cursor: pointer !important;
+    padding: 0.25rem !important;
+}
+
+.print-preview-modal .modal-close:hover {
+    color: #666 !important;
+}
+
+[data-theme="dark"] .print-preview-modal .modal-close {
+    color: #f3f4f6 !important;
+}
+
+[data-theme="dark"] .print-preview-modal .modal-close:hover {
+    color: #d1d5db !important;
+}
+
 .print-preview-body {
     display: flex;
     gap: 2rem;
@@ -108,12 +147,12 @@
 }
 
 .preview-actions .btn-primary {
-    background: #3B82F6;
+    background: var(--primary-color, #3B82F6);
     color: white;
 }
 
 .preview-actions .btn-primary:hover {
-    background: #2563EB;
+    background: var(--primary-color-hover, #2563EB);
 }
 
 .preview-actions .btn-secondary {
@@ -132,7 +171,7 @@
     justify-content: center;
     align-items: flex-start;
     overflow: auto; /* Allow scrolling if paper is larger than container */
-    background: #f5f5f5;
+    background: var(--background-tertiary, #f5f5f5);
     border-radius: 8px;
     padding: 2rem;
     cursor: grab;
@@ -178,8 +217,8 @@
 .print-preview-paper .week-day-header.today,
 .print-preview-paper .week-day-column.today {
     background-color: transparent !important;
-    border-color: #ddd !important;
-    color: #333 !important;
+    border-color: var(--border-color, #ddd) !important;
+    color: var(--text-color, #333) !important;
     font-weight: normal !important;
 }
 
@@ -320,7 +359,7 @@
     height: calc(var(--print-pixels-per-hour) * 1px) !important;
     min-height: calc(var(--print-pixels-per-hour) * 1px) !important;
     max-height: calc(var(--print-pixels-per-hour) * 1px) !important;
-    border-bottom: 1px solid #ddd !important;
+    border-bottom: 1px solid var(--border-color, #ddd) !important;
     overflow: visible !important;
 }
 
@@ -360,7 +399,7 @@
     height: calc(var(--print-base-unit) * 1px) !important;
     min-height: calc(var(--print-base-unit) * 1px) !important;
     max-height: calc(var(--print-base-unit) * 1px) !important;
-    border-bottom: 1px dotted #ddd !important;
+    border-bottom: 1px dotted var(--border-color-light, #ddd) !important;
     overflow: visible !important;
 }
 
@@ -372,7 +411,7 @@
     height: calc(var(--print-base-unit) * 1px) !important;
     min-height: calc(var(--print-base-unit) * 1px) !important;
     max-height: calc(var(--print-base-unit) * 1px) !important;
-    border-bottom: 1px dotted #eee !important;
+    border-bottom: 1px dotted var(--border-color-lighter, #eee) !important;
     overflow: visible !important;
 }
 
@@ -1130,8 +1169,8 @@
 
 /* Print Page Setup - Force landscape orientation and fit to page */
 @page {
-    size: landscape;
-    margin: 0.5in;
+    size: letter landscape;
+    margin: 0.25in;
 }
 
 /* Print Media Rules - Show only the print-preview-copy when printing */
@@ -1154,7 +1193,7 @@
         top: 0 !important;
         /* width: 960px !important; */
         /* height: 720px !important; */
-        aspect-ratio: 1.2941176470588236 !important;
+        aspect-ratio: 1.3125 !important;
         margin: 0 !important;
         padding: 0 !important;
         box-sizing: border-box !important;
diff --git a/frontend/src/components/calendar_header.rs b/frontend/src/components/calendar_header.rs
index d92543e..35b335b 100644
--- a/frontend/src/components/calendar_header.rs
+++ b/frontend/src/components/calendar_header.rs
@@ -45,7 +45,7 @@ pub fn calendar_header(props: &CalendarHeaderProps) -> Html {
                     if let Some(print_callback) = &props.on_print {
                         html! {
                             <button class="print-button" onclick={print_callback.clone()} title="Print Calendar">
-                                {"🖨️"}
+                                <i class="fas fa-print"></i>
                             </button>
                         }
                     } else {
diff --git a/frontend/src/components/sidebar.rs b/frontend/src/components/sidebar.rs
index 5a6deae..834d16b 100644
--- a/frontend/src/components/sidebar.rs
+++ b/frontend/src/components/sidebar.rs
@@ -350,9 +350,9 @@ pub fn sidebar(props: &SidebarProps) -> Html {
                                                         >
                                                             {
                                                                 if props.refreshing_calendar_id == Some(cal.id) {
-                                                                    "⏳" // Loading spinner
+                                                                    html! { <i class="fas fa-spinner fa-spin"></i> }
                                                                 } else {
-                                                                    "🔄" // Normal refresh icon
+                                                                    html! { <i class="fas fa-sync-alt"></i> }
                                                                 }
                                                             }
                                                         </button>
diff --git a/frontend/styles.css b/frontend/styles.css
index 1e1cc13..28dfed8 100644
--- a/frontend/styles.css
+++ b/frontend/styles.css
@@ -18,19 +18,10 @@
     --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
     --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
     --shadow-lg: 0 8px 25px rgba(0,0,0,0.15);
-    --border-light: 1px solid #e9ecef;
-    --border-medium: 1px solid #dee2e6;
     --transition-fast: 0.15s ease;
     --transition-normal: 0.2s ease;
     --transition-slow: 0.3s ease;
     
-    /* Common Glass/Glassmorphism Effects */
-    --glass-bg: var(--glass-bg);
-    --glass-bg-light: var(--glass-bg-light);
-    --glass-bg-lighter: var(--glass-bg-lighter);
-    --glass-border: 1px solid var(--glass-bg-light);
-    --glass-border-light: 1px solid var(--glass-bg-lighter);
-    
     /* Standard Control Dimensions */
     --control-height: 40px;
     --control-padding: 0.875rem;
@@ -39,12 +30,54 @@
     
     /* Common Transition */
     --standard-transition: all 0.2s ease;
+    
+    /* Default Light Theme Colors */
+    --background-primary: #f8f9fa;
+    --background-secondary: #ffffff;
+    --background-tertiary: #f1f3f4;
+    --text-primary: #333333;
+    --text-secondary: #6c757d;
+    --text-inverse: #ffffff;
+    --border-primary: #e9ecef;
+    --border-secondary: #dee2e6;
+    --border-light: #f8f9fa;
+    --error-color: #dc3545;
+    --success-color: #28a745;
+    --warning-color: #ffc107;
+    --info-color: #17a2b8;
+    
+    /* Modal Colors */
+    --modal-background: #ffffff;
+    --modal-text: #333333;
+    --modal-header-background: #ffffff;
+    --modal-header-border: #e5e7eb;
+    
+    /* Button Colors */
+    --button-primary-bg: #667eea;
+    --button-primary-text: #ffffff;
+    --button-secondary-bg: #6c757d;
+    --button-secondary-text: #ffffff;
+    --button-danger-bg: #dc3545;
+    --button-danger-text: #ffffff;
+    
+    /* Input Colors */
+    --input-background: #ffffff;
+    --input-border: #ced4da;
+    --input-border-focus: #80bdff;
+    --input-text: #495057;
+    
+    /* Glass/Glassmorphism Effects */
+    --glass-bg: rgba(255, 255, 255, 0.1);
+    --glass-bg-light: rgba(255, 255, 255, 0.2);
+    --glass-bg-lighter: rgba(255, 255, 255, 0.3);
+    --glass-border: 1px solid rgba(255, 255, 255, 0.2);
+    --glass-border-light: 1px solid rgba(255, 255, 255, 0.3);
 }
 
 body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    background-color: #f8f9fa;
-    color: #333;
+    background-color: var(--background-primary);
+    color: var(--text-primary);
     line-height: 1.6;
 }
 
@@ -115,6 +148,44 @@ input, select, textarea, button {
 [data-theme="dark"] {
     --primary-color: #374151;
     --primary-gradient: linear-gradient(135deg, #374151 0%, #1f2937 100%);
+    
+    /* Dark Theme Overrides */
+    --background-primary: #111827;
+    --background-secondary: #1f2937;
+    --background-tertiary: #374151;
+    --text-primary: #f9fafb;
+    --text-secondary: #d1d5db;
+    --text-inverse: #111827;
+    --border-primary: #374151;
+    --border-secondary: #4b5563;
+    --border-light: #6b7280;
+    
+    /* Modal Colors - Dark */
+    --modal-background: #1f2937;
+    --modal-text: #f3f4f6;
+    --modal-header-background: #1f2937;
+    --modal-header-border: #374151;
+    
+    /* Button Colors - Dark */
+    --button-primary-bg: #4f46e5;
+    --button-primary-text: #ffffff;
+    --button-secondary-bg: #4b5563;
+    --button-secondary-text: #ffffff;
+    --button-danger-bg: #dc2626;
+    --button-danger-text: #ffffff;
+    
+    /* Input Colors - Dark */
+    --input-background: #374151;
+    --input-border: #4b5563;
+    --input-border-focus: #6366f1;
+    --input-text: #f9fafb;
+    
+    /* Glass Effects - Dark */
+    --glass-bg: rgba(0, 0, 0, 0.2);
+    --glass-bg-light: rgba(0, 0, 0, 0.3);
+    --glass-bg-lighter: rgba(0, 0, 0, 0.4);
+    --glass-border: 1px solid rgba(255, 255, 255, 0.1);
+    --glass-border-light: 1px solid rgba(255, 255, 255, 0.2);
 }
 
 [data-theme="rose"] {
@@ -133,8 +204,8 @@ input, select, textarea, button {
 
 body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    background-color: #f8f9fa;
-    color: #333;
+    background-color: var(--background-primary);
+    color: var(--text-primary);
     line-height: 1.6;
 }
 
@@ -637,6 +708,25 @@ body {
     background: rgba(255,255,255,0.3);
 }
 
+.print-button {
+    background: rgba(255,255,255,0.2);
+    border: none;
+    color: white;
+    font-size: 1rem;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.2s ease;
+}
+
+.print-button:hover {
+    background: rgba(255,255,255,0.3);
+}
+
 .calendar-grid {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
@@ -3684,10 +3774,37 @@ body {
 }
 
 .external-calendar-info input[type="checkbox"] {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
     width: 16px;
     height: 16px;
-    accent-color: rgba(255, 255, 255, 0.8);
+    background: transparent;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    border-radius: 3px;
     cursor: pointer;
+    position: relative;
+    transition: all 0.2s ease;
+}
+
+.external-calendar-info input[type="checkbox"]:hover {
+    border-color: rgba(255, 255, 255, 0.5);
+}
+
+.external-calendar-info input[type="checkbox"]:checked {
+    border-color: rgba(255, 255, 255, 0.6);
+}
+
+.external-calendar-info input[type="checkbox"]:checked::after {
+    content: "✓";
+    position: absolute;
+    top: 45%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 12px;
+    font-weight: bold;
+    line-height: 1;
 }
 
 .external-calendar-color {
@@ -3762,10 +3879,37 @@ body {
 }
 
 .calendar-info input[type="checkbox"] {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
     width: 16px;
     height: 16px;
-    accent-color: rgba(255, 255, 255, 0.8);
+    background: transparent;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    border-radius: 3px;
     cursor: pointer;
+    position: relative;
+    transition: all 0.2s ease;
+}
+
+.calendar-info input[type="checkbox"]:hover {
+    border-color: rgba(255, 255, 255, 0.5);
+}
+
+.calendar-info input[type="checkbox"]:checked {
+    border-color: rgba(255, 255, 255, 0.6);
+}
+
+.calendar-info input[type="checkbox"]:checked::after {
+    content: "✓";
+    position: absolute;
+    top: 45%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 12px;
+    font-weight: bold;
+    line-height: 1;
 }
 
 /* Create External Calendar Button */
