diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 2e111ae..dc7a0c0 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -23,8 +23,7 @@ body {
   color: #0f172a;
 }
 
-/* FullCalendar button theme (Premium Light) */
-/* FullCalendar button theme (Primary) */
+/* ===== FullCalendar Styles ===== */
 .fc .fc-button,
 .fc .fc-button-primary {
   background-color: var(--color-primary-500, #3b82f6) !important;
@@ -48,7 +47,6 @@ body {
   color: #ffffff !important;
 }
 
-/* FullCalendar date/holiday text (Premium Light) */
 .fc .fc-daygrid-day-number,
 .fc .fc-daygrid-day-top .fc-daygrid-day-number,
 .fc .fc-daygrid-day-number > span,
@@ -62,13 +60,11 @@ body {
   opacity: 1 !important;
 }
 
-/* Ensure holidays/events display as dark text */
 .fc .fc-daygrid-event-harness .fc-event-title,
 .fc .fc-daygrid-event-harness .fc-event-time {
   color: #0f172a !important;
 }
 
-/* FullCalendar toolbar (title + nav buttons) */
 .fc .fc-toolbar,
 .fc .fc-toolbar-chunk {
   background: #ffffff !important;
@@ -79,7 +75,182 @@ body {
   color: #0f172a !important;
 }
 
-/* Ensure today button & nav icons show correctly */
 .fc .fc-button.fc-button-primary .fc-icon {
   color: #ffffff !important;
 }
+
+/* FullCalendar - extracted from AppCalendar.vue */
+.fc-daygrid-event {
+  cursor: pointer;
+}
+
+.fc-event {
+  border-radius: 4px;
+}
+
+.event-holiday .fc-event-title,
+.event-holiday .fc-event-main-frame {
+  font-size: 1.1rem !important;
+  font-weight: 700 !important;
+  padding: 2px 4px !important;
+}
+
+.fc .fc-col-header,
+.fc .fc-col-header tr,
+.fc .fc-col-header th {
+  background-color: #ffffff !important;
+}
+
+.fc .fc-col-header-cell {
+  background-color: #f8fafc !important;
+  border-color: #e2e8f0 !important;
+}
+
+.fc .fc-col-header-cell-cushion {
+  color: #0f172a !important;
+  font-weight: 600;
+}
+
+.fc .fc-scrollgrid {
+  border-color: #e2e8f0 !important;
+}
+
+.fc-theme-standard th {
+  background-color: #f8fafc !important;
+}
+
+.fc .fc-list-day th,
+.fc .fc-list-day td,
+.fc .fc-list-day-cushion,
+.fc .fc-cell-shaded {
+  background-color: #ffffff !important;
+}
+
+.fc-list-day-text,
+.fc-list-day-side-text,
+.fc-list-day-cushion * {
+  color: #1e293b !important;
+  font-weight: 800 !important;
+  text-decoration: none !important;
+}
+
+.fc-list-event:hover td {
+  background-color: #f1f5f9 !important;
+}
+
+/* ===== Custom Scrollbar (ใช้ร่วมกันทุกหน้า) ===== */
+.custom-scrollbar::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: #f1f5f9;
+  border-radius: 10px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 10px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}
+
+/* ===== Animations (teacher/[id].vue) ===== */
+@keyframes zoom-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+.animate-in {
+  animation: zoom-in 0.2s ease-out forwards;
+}
+
+/* ===== Print Styles (summary.vue) ===== */
+@media print {
+  body,
+  .min-h-screen {
+    background-color: white !important;
+    color: black !important;
+  }
+
+  .min-h-screen {
+    background: white !important;
+    padding-bottom: 0 !important;
+  }
+
+  .no-print,
+  header,
+  nav,
+  .bg-slate-800.sticky {
+    display: none !important;
+  }
+
+  .print-only {
+    display: block !important;
+  }
+
+  .bg-slate-800 {
+    background-color: #f8fafc !important;
+    border: 1px solid #e2e8f0 !important;
+    color: black !important;
+    box-shadow: none !important;
+  }
+
+  .text-white { color: black !important; }
+  .text-slate-400 { color: #475569 !important; }
+  .text-green-500, .text-green-400 { color: #166534 !important; }
+  .text-amber-500, .text-amber-400 { color: #92400e !important; }
+  .text-red-500, .text-red-400 { color: #991b1b !important; }
+
+  .bg-slate-900 {
+    background-color: #f1f5f9 !important;
+  }
+
+  .bg-gradient-to-r {
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+  }
+
+  table {
+    width: 100% !important;
+    border-collapse: collapse !important;
+  }
+
+  th {
+    background-color: #f1f5f9 !important;
+    color: black !important;
+    border-bottom: 2px solid black !important;
+  }
+
+  td {
+    border-bottom: 1px solid #e2e8f0 !important;
+  }
+
+  .container {
+    max-width: 100% !important;
+    width: 100% !important;
+    padding: 0 !important;
+  }
+
+  .grid { display: grid !important; }
+
+  .lg\:grid-cols-2 {
+    grid-template-columns: 1fr 1fr !important;
+  }
+
+  .mb-8 { margin-bottom: 2rem !important; }
+
+  @page {
+    margin: 1cm;
+    size: A4;
+  }
+}
diff --git a/app/components/AppCalendar.vue b/app/components/AppCalendar.vue
index 70f5658..6655456 100644
--- a/app/components/AppCalendar.vue
+++ b/app/components/AppCalendar.vue
@@ -2053,80 +2053,4 @@ const getEventTypeClass = (type, isIconContainer = false) => {
 }
 </script>
 
-<style>
-/* FullCalendar styling handled in main.css */
-.fc-daygrid-event {
-  cursor: pointer;
-}
-
-.fc-event {
-  border-radius: 4px;
-}
-
-/* ปรับขนาดตัวอักษรสำหรับวันหยุด */
-.event-holiday .fc-event-title,
-.event-holiday .fc-event-main-frame {
-  font-size: 1.1rem !important;
-  font-weight: 700 !important;
-  padding: 2px 4px !important;
-}
-
-/* ปรับธีมปฏิทินเป็น Premium Light (พื้นขาว, ข้อความดำ) */
-.fc .fc-col-header,
-.fc .fc-col-header tr,
-.fc .fc-col-header th {
-  background-color: #ffffff !important;
-}
-
-/* ปรับสีหัวตารางวัน ให้เป็นตัวอักษรดำ */
-.fc .fc-col-header-cell {
-  background-color: #f8fafc !important;
-  border-color: #e2e8f0 !important;
-}
-
-.fc .fc-col-header-cell-cushion {
-  color: #0f172a !important;
-  font-weight: 600;
-}
-
-/* ปรับสีหัวเรื่อง (เดือน-ปี) ให้เป็นสีดำ */
-.fc .fc-toolbar-title {
-  color: #0f172a !important;
-}
-
-/* ปรับสีตัวเลขวันให้เป็นสีดำ */
-.fc .fc-daygrid-day-number {
-  color: #0f172a !important;
-}
-
-/* ปรับเส้นตารางให้ดูสว่างขึ้น */
-.fc .fc-scrollgrid {
-  border-color: #e2e8f0 !important;
-}
-
-.fc-theme-standard th {
-  background-color: #f8fafc !important;
-}
-
-/* แก้ไขส่วนหัวของวันในมุมมองรายการ (List View) */
-.fc .fc-list-day th,
-.fc .fc-list-day td,
-.fc .fc-list-day-cushion,
-.fc .fc-cell-shaded {
-  background-color: #ffffff !important;
-}
 
-.fc-list-day-text,
-.fc-list-day-side-text,
-.fc-list-day-cushion * {
-  color: #1e293b !important;
-  /* slate-800 */
-  font-weight: 800 !important;
-  text-decoration: none !important;
-}
-
-.fc-list-event:hover td {
-  background-color: #f1f5f9 !important;
-  /* slate-100 */
-}
-</style>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 43ffe19..78df4cc 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -10,7 +10,3 @@
 // Teacher data is still needed for the calendar filtering/display
 const { data: teachers } = await useFetch('/api/teachers')
 </script>
-
-<style scoped>
-/* Page specific styles */
-</style>
diff --git a/app/pages/rooms.vue b/app/pages/rooms.vue
index 7e7f00c..0ec599b 100644
--- a/app/pages/rooms.vue
+++ b/app/pages/rooms.vue
@@ -533,23 +533,3 @@ const deleteRoom = async () => {
 }
 </script>
 
-<style scoped>
-/* Scrollbar Styling for Table */
-.custom-scrollbar::-webkit-scrollbar {
-  height: 12px;
-  width: 12px;
-}
-
-.custom-scrollbar::-webkit-scrollbar-track {
-  background: #f1f5f9;
-}
-
-.custom-scrollbar::-webkit-scrollbar-thumb {
-  background: #94a3b8;
-  border-radius: 10px;
-}
-
-.custom-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: #64748b;
-}
-</style>
diff --git a/app/pages/sections/[id].vue b/app/pages/sections/[id].vue
index 5ce8030..29245b8 100644
--- a/app/pages/sections/[id].vue
+++ b/app/pages/sections/[id].vue
@@ -1048,18 +1048,3 @@ onMounted(() => {
 })
 </script>
 
-<style scoped>
-/* Custom Scrollbar */
-.custom-scrollbar::-webkit-scrollbar {
-  width: 6px;
-}
-
-.custom-scrollbar::-webkit-scrollbar-track {
-  background: #1e293b;
-}
-
-.custom-scrollbar::-webkit-scrollbar-thumb {
-  background: #475569;
-  border-radius: 3px;
-}
-</style>
diff --git a/app/pages/summary.vue b/app/pages/summary.vue
index 3e87a2c..29f6214 100644
--- a/app/pages/summary.vue
+++ b/app/pages/summary.vue
@@ -379,118 +379,3 @@ const exportToPDF = () => {
 }
 </script>
 
-<style scoped>
-@media print {
-
-  /* 1. Global Reset for Print */
-  :deep(body),
-  .min-h-screen {
-    background-color: white !important;
-    color: black !important;
-  }
-
-  .min-h-screen {
-    background: white !important;
-    padding-bottom: 0 !important;
-  }
-
-  /* 2. Hide Elements */
-  .no-print,
-  header,
-  nav,
-  .bg-slate-800.sticky {
-    display: none !important;
-  }
-
-  /* 3. Show Print Header */
-  .print-only {
-    display: block !important;
-  }
-
-  /* 4. Force Backgrounds for Stats & Charts */
-  .bg-slate-800 {
-    background-color: #f8fafc !important;
-    /* slate-50 */
-    border: 1px solid #e2e8f0 !important;
-    /* slate-200 */
-    color: black !important;
-    box-shadow: none !important;
-  }
-
-  .text-white {
-    color: black !important;
-  }
-
-  .text-slate-400 {
-    color: #475569 !important;
-    /* slate-600 */
-  }
-
-  /* 5. Color Overrides for Report Utility */
-  .text-green-500,
-  .text-green-400 {
-    color: #166534 !important;
-  }
-
-  .text-amber-500,
-  .text-amber-400 {
-    color: #92400e !important;
-  }
-
-  .text-red-500,
-  .text-red-400 {
-    color: #991b1b !important;
-  }
-
-  /* 6. Chart Optimization */
-  .bg-slate-900 {
-    background-color: #f1f5f9 !important;
-    /* slate-100 */
-  }
-
-  .bg-gradient-to-r {
-    print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
-  }
-
-  /* 7. Table Optimization */
-  table {
-    width: 100% !important;
-    border-collapse: collapse !important;
-  }
-
-  th {
-    background-color: #f1f5f9 !important;
-    color: black !important;
-    border-bottom: 2px solid black !important;
-  }
-
-  td {
-    border-bottom: 1px solid #e2e8f0 !important;
-  }
-
-  /* 8. Spacing & Page Break */
-  .container {
-    max-width: 100% !important;
-    width: 100% !important;
-    padding: 0 !important;
-  }
-
-  .grid {
-    display: grid !important;
-  }
-
-  .lg\:grid-cols-2 {
-    grid-template-columns: 1fr 1fr !important;
-  }
-
-  .mb-8 {
-    margin-bottom: 2rem !important;
-  }
-
-  @page {
-    margin: 1cm;
-    size: A4;
-  }
-}
-</style>
diff --git a/app/pages/teacher/[id].vue b/app/pages/teacher/[id].vue
index 14e09d8..369b8ed 100644
--- a/app/pages/teacher/[id].vue
+++ b/app/pages/teacher/[id].vue
@@ -1381,40 +1381,3 @@ watch(scheduleError, (err) => {
 })
 </script>
 
-<style scoped>
-.custom-scrollbar::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-.custom-scrollbar::-webkit-scrollbar-track {
-  background: #f1f5f9;
-  border-radius: 10px;
-}
-
-.custom-scrollbar::-webkit-scrollbar-thumb {
-  background: #cbd5e1;
-  border-radius: 10px;
-}
-
-.custom-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: #94a3b8;
-}
-
-/* Animations */
-@keyframes zoom-in {
-  from {
-    opacity: 0;
-    transform: scale(0.95) translateY(10px);
-  }
-
-  to {
-    opacity: 1;
-    transform: scale(1) translateY(0);
-  }
-}
-
-.animate-in {
-  animation: zoom-in 0.2s ease-out forwards;
-}
-</style>
diff --git a/app/pages/terms.vue b/app/pages/terms.vue
index cf530ef..94526c2 100644
--- a/app/pages/terms.vue
+++ b/app/pages/terms.vue
@@ -494,21 +494,3 @@ const formatDate = (dateString) => {
 }
 </script>
 
-<style scoped>
-.custom-scrollbar::-webkit-scrollbar {
-  width: 6px;
-}
-
-.custom-scrollbar::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.custom-scrollbar::-webkit-scrollbar-thumb {
-  background: #e2e8f0;
-  border-radius: 10px;
-}
-
-.custom-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: #cbd5e1;
-}
-</style>
diff --git a/server/data/data.db b/server/data/data.db
index 96d98e9..c4e383b 100644
Binary files a/server/data/data.db and b/server/data/data.db differ