diff --git a/public/css/style.css b/public/css/style.css
index 74a7fef..61eb65d 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -1940,47 +1940,589 @@ input:checked+.slider:before {
 }
 
 @media (max-width: 768px) {
+  /* -- Header -- */
   .header {
-    padding: 0 16px;
+    padding: 0 12px;
+    height: 52px;
   }
 
   .header-meta {
     display: none;
   }
 
-  .dashboard {
-    padding: 16px;
+  .logo {
+    gap: 8px;
   }
 
+  .logo-text {
+    font-size: 0.92rem;
+  }
+
+  #logoIconContainer {
+    width: 26px;
+    height: 26px;
+  }
+
+  .header-right {
+    gap: 10px;
+  }
+
+  .theme-switch {
+    width: 44px;
+    height: 24px;
+  }
+
+  .slider:before {
+    height: 16px;
+    width: 16px;
+  }
+
+  input:checked+.slider:before {
+    transform: translateX(18px);
+  }
+
+  .btn-settings {
+    width: 34px;
+    height: 34px;
+  }
+
+  .btn-settings svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  /* -- Dashboard -- */
+  .dashboard {
+    padding: 14px 12px 32px;
+  }
+
+  /* -- Stat Cards -- */
   .stat-cards {
     grid-template-columns: repeat(2, 1fr);
+    gap: 10px;
+    margin-bottom: 16px;
   }
 
   .stat-card {
-    padding: 14px 16px;
+    padding: 14px 14px;
+    gap: 12px;
+  }
+
+  .stat-card-icon {
+    width: 38px;
+    height: 38px;
+  }
+
+  .stat-card-icon svg {
+    width: 20px;
+    height: 20px;
   }
 
   .stat-card-value {
-    font-size: 1.2rem;
+    font-size: 1.15rem;
+  }
+
+  .stat-card-value-group .stat-card-value {
+    font-size: 1rem;
+  }
+
+  .stat-card-label {
+    font-size: 0.68rem;
+  }
+
+  .stat-card-sub {
+    font-size: 0.65rem;
+  }
+
+  /* -- Charts Section -- */
+  .charts-section {
+    gap: 12px;
+    margin-bottom: 16px;
+  }
+
+  .chart-card-header {
+    padding: 14px 14px 0;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .chart-title {
+    font-size: 0.82rem;
+  }
+
+  .chart-legend {
+    gap: 12px;
+    font-size: 0.72rem;
+  }
+
+  .chart-body {
+    padding: 8px 10px;
+    height: 220px;
   }
 
   .chart-footer {
     flex-wrap: wrap;
-    gap: 16px;
+    gap: 12px 20px;
+    padding: 12px 14px;
+    justify-content: flex-start;
   }
 
+  .traffic-label {
+    font-size: 0.62rem;
+  }
+
+  .traffic-value {
+    font-size: 0.78rem;
+  }
+
+  /* -- Globe Card -- */
+  .globe-body {
+    height: 240px;
+  }
+
+  /* -- Server Table Section -- */
+  .chart-header-right {
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+
+  #serverSearchFilter {
+    width: 160px;
+    padding: 6px 10px 6px 32px;
+    font-size: 0.8rem;
+  }
+
+  #serverSearchFilter:focus {
+    width: 200px;
+  }
+
+  .search-box .search-icon {
+    left: 10px;
+    width: 14px;
+    height: 14px;
+  }
+
+  .source-select {
+    font-size: 0.78rem;
+    padding: 5px 8px;
+  }
+
+  .server-table-wrap {
+    padding: 10px 8px 4px;
+  }
+
+  .server-table {
+    min-width: 640px;
+  }
+
+  .server-table th {
+    padding: 8px 10px;
+    font-size: 0.65rem;
+  }
+
+  .server-table td {
+    padding: 8px 10px;
+    font-size: 0.72rem;
+  }
+
+  .usage-bar-track {
+    width: 40px;
+  }
+
+  /* -- Pagination -- */
+  .pagination-footer {
+    flex-direction: column;
+    gap: 10px;
+    padding: 10px 14px;
+    align-items: flex-start;
+  }
+
+  .pagination-controls {
+    flex-wrap: wrap;
+    gap: 3px;
+  }
+
+  .page-btn {
+    padding: 3px 8px;
+    font-size: 0.75rem;
+  }
+
+  /* -- Modal -- */
+  .modal {
+    width: 96%;
+    max-width: none;
+    max-height: 90vh;
+    border-radius: var(--radius-md);
+  }
+
+  .modal-header {
+    padding: 14px 16px;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .modal-tabs {
+    gap: 4px;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .modal-tabs::-webkit-scrollbar {
+    display: none;
+  }
+
+  .modal-tab {
+    font-size: 0.8rem;
+    padding: 6px 8px;
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  .modal-tab.active::after {
+    bottom: -15px;
+  }
+
+  .modal-body {
+    padding: 16px 14px;
+    max-height: calc(90vh - 70px);
+  }
+
+  /* -- Server Detail Modal -- */
+  #serverDetailModal .modal {
+    width: 98%;
+    max-height: 92vh;
+  }
+
+  #serverDetailModal .modal-body {
+    max-height: calc(92vh - 60px);
+  }
+
+  .detail-metrics-list {
+    padding: 6px;
+  }
+
+  .metric-item-header {
+    padding: 10px 12px;
+  }
+
+  .metric-label {
+    font-size: 0.85rem;
+  }
+
+  .metric-value {
+    font-size: 0.88rem;
+  }
+
+  .chart-controls {
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    gap: 6px;
+    padding: 8px 10px;
+  }
+
+  .time-range-group {
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+
+  .time-range-btn {
+    padding: 3px 8px;
+    font-size: 0.7rem;
+  }
+
+  .custom-range-input {
+    width: 70px;
+    font-size: 0.7rem;
+  }
+
+  .absolute-range-selector {
+    flex-wrap: wrap;
+    gap: 4px;
+    padding: 4px 6px;
+  }
+
+  .time-input {
+    font-size: 0.68rem;
+  }
+
+  .detail-chart-wrapper {
+    height: 180px;
+    padding: 0 6px 6px;
+  }
+
+  .metric-item.active .metric-item-content {
+    max-height: 300px;
+  }
+
+  .detail-info-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .info-label {
+    font-size: 0.68rem;
+  }
+
+  .info-value {
+    font-size: 0.85rem;
+  }
+
+  /* -- Partition details -- */
+  .partition-info {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 2px;
+    font-size: 0.75rem;
+  }
+
+  /* -- Forms -- */
   .form-row {
     flex-direction: column;
   }
 
   .form-actions {
     flex-direction: row;
+    width: 100%;
+  }
+
+  .form-actions .btn {
+    flex: 1;
+    text-align: center;
+  }
+
+  .form-group input {
+    font-size: 0.82rem;
+    padding: 9px 12px;
+  }
+
+  .add-source-form h3,
+  .source-list h3 {
+    font-size: 0.78rem;
+  }
+
+  .btn {
+    padding: 9px 14px;
+    font-size: 0.78rem;
+  }
+
+  /* -- Login Button -- */
+  .btn-login {
+    padding: 6px 12px;
+    font-size: 0.78rem;
+  }
+
+  /* -- Source Items -- */
+  .source-item {
+    padding: 10px 12px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+  }
+
+  .source-item-actions {
+    align-self: flex-end;
+  }
+
+  .source-item-name {
+    font-size: 0.82rem;
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+
+  /* -- User section -- */
+  #userSection {
+    display: flex;
+    align-items: center;
+  }
+
+  #userSection .user-info {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  #userSection .username {
+    display: none;
+  }
+
+  #userSection .btn-logout {
+    padding: 5px 10px;
+    font-size: 0.72rem;
+  }
+
+  /* -- Globe expansion on mobile -- */
+  .globe-card.expanded {
+    top: 0;
+    left: 0;
+    width: 100vw !important;
+    height: 100vh !important;
+    border-radius: 0;
+  }
+
+  .globe-card.expanded .globe-body {
+    height: calc(100vh - 110px) !important;
+    min-height: 200px;
+  }
+
+  /* Touch optimization */
+  .server-table tbody tr {
+    cursor: pointer;
+    -webkit-tap-highlight-color: rgba(99, 102, 241, 0.1);
+  }
+
+  .btn,
+  .btn-icon,
+  .btn-icon-sm,
+  .btn-settings,
+  .page-btn,
+  .modal-tab,
+  .time-range-btn {
+    touch-action: manipulation;
   }
 }
 
 @media (max-width: 480px) {
   .stat-cards {
     grid-template-columns: 1fr;
+    gap: 8px;
+  }
+
+  .stat-card {
+    flex-direction: row;
+    padding: 12px 14px;
+  }
+
+  .logo-text {
+    font-size: 0.82rem;
+    max-width: 160px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .chart-legend {
+    gap: 8px;
+    font-size: 0.68rem;
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .chart-body {
+    height: 180px;
+  }
+
+  .globe-body {
+    height: 200px;
+  }
+
+  #serverSearchFilter {
+    width: 120px;
+    font-size: 0.75rem;
+  }
+
+  #serverSearchFilter:focus {
+    width: 160px;
+  }
+
+  .detail-info-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .info-item {
+    padding: 10px;
+  }
+
+  /* -- Metric content on very small screens -- */
+  .metric-item.active .metric-item-content {
+    max-height: 380px;
+  }
+
+  .detail-chart-wrapper {
+    height: 160px;
+  }
+
+  /* -- Modal full width -- */
+  .modal {
+    width: 100%;
+    max-height: 100vh;
+    border-radius: 0;
+    height: 100vh;
+  }
+
+  .modal-body {
+    max-height: calc(100vh - 60px);
+  }
+
+  /* -- Latency route items on small mobile -- */
+  .latency-route-item {
+    flex-direction: column !important;
+    align-items: flex-start !important;
+    gap: 10px !important;
+  }
+
+  .route-actions {
+    align-self: flex-end !important;
+  }
+
+  /* -- Chart card header vertical layout -- */
+  .chart-card-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+  }
+
+  .chart-header-right {
+    width: 100%;
+  }
+
+  /* -- Traffic footer compact -- */
+  .traffic-stat {
+    align-items: flex-start;
+  }
+}
+
+@media (max-width: 360px) {
+  .header {
+    padding: 0 8px;
+  }
+
+  .dashboard {
+    padding: 10px 8px 24px;
+  }
+
+  .stat-card-icon {
+    width: 32px;
+    height: 32px;
+  }
+
+  .stat-card-icon svg {
+    width: 18px;
+    height: 18px;
+  }
+
+  .stat-card-value {
+    font-size: 1rem;
+  }
+
+  .logo-text {
+    max-width: 120px;
+    font-size: 0.78rem;
+  }
+
+  .chart-card-header {
+    padding: 10px 10px 0;
+  }
+
+  .chart-footer {
+    padding: 10px;
+    gap: 8px 14px;
+  }
+
+  .chart-legend {
+    flex-wrap: wrap;
   }
 }
 
diff --git a/public/init.html b/public/init.html
index be487e5..065108d 100644
--- a/public/init.html
+++ b/public/init.html
@@ -70,6 +70,33 @@
       justify-content: center;
       padding: 10px 0;
     }
+
+    @media (max-width: 480px) {
+      body {
+        align-items: flex-start;
+        padding: 16px 12px;
+      }
+      .init-container {
+        padding: 24px 18px;
+        border-radius: 10px;
+        max-width: 100%;
+      }
+      .init-header h2 {
+        font-size: 18px;
+      }
+      .init-header p {
+        font-size: 12px;
+      }
+      .form-row {
+        flex-direction: column;
+      }
+      .actions {
+        flex-direction: column;
+      }
+      .actions .btn {
+        width: 100%;
+      }
+    }
   </style>
 </head>
 <body>