diff --git a/ts_web/elements/upl-statuspage-statusmonth.ts b/ts_web/elements/upl-statuspage-statusmonth.ts
index d17b20a..352a89a 100644
--- a/ts_web/elements/upl-statuspage-statusmonth.ts
+++ b/ts_web/elements/upl-statuspage-statusmonth.ts
@@ -67,56 +67,57 @@ export class UplStatuspageStatusmonth extends DeesElement {
 
         .mainbox {
           display: grid;
-          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-          gap: ${unsafeCSS(spacing.lg)};
+          grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+          gap: ${unsafeCSS(spacing.md)};
         }
 
         .statusMonth {
-          background: ${colors.background.card};
+          background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
           padding: ${unsafeCSS(spacing.lg)};
-          border-radius: ${unsafeCSS(borderRadius.md)};
-          border: 1px solid ${colors.border.default};
-          box-shadow: ${unsafeCSS(shadows.sm)};
+          border-radius: ${unsafeCSS(borderRadius.base)};
+          border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
           position: relative;
+          transition: border-color 0.2s ease;
+        }
+        
+        .statusMonth:hover {
+          border-color: ${cssManager.bdTheme('#d1d5db', '#3f3f46')};
         }
 
         .month-header {
           font-size: 14px;
-          font-weight: 600;
+          font-weight: 500;
           margin-bottom: ${unsafeCSS(spacing.md)};
-          text-align: center;
-          color: ${colors.text.primary};
-          letter-spacing: 0.02em;
+          color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+          letter-spacing: -0.01em;
         }
 
         .days-grid {
           display: grid;
           grid-template-columns: repeat(7, 1fr);
-          gap: 3px;
+          gap: 2px;
         }
 
         .weekday-label {
-          font-size: 12px;
+          font-size: 11px;
           text-align: center;
-          color: ${colors.text.secondary};
-          font-weight: 500;
+          color: ${cssManager.bdTheme('#9ca3af', '#71717a')};
+          font-weight: 400;
           height: 20px;
           line-height: 20px;
-          margin-bottom: ${unsafeCSS(spacing.xs)};
+          margin-bottom: ${unsafeCSS(spacing.sm)};
         }
 
         .statusDay {
           aspect-ratio: 1;
-          border-radius: ${unsafeCSS(borderRadius.sm)};
+          border-radius: 2px;
           cursor: pointer;
-          transition: all 0.2s ease;
+          transition: opacity 0.15s ease;
           position: relative;
         }
 
-        .statusDay:hover {
-          transform: scale(1.15);
-          box-shadow: ${unsafeCSS(shadows.md)};
-          z-index: 1;
+        .statusDay:hover:not(.empty) {
+          opacity: 0.8;
         }
 
         .statusDay.operational {
@@ -151,54 +152,96 @@ export class UplStatuspageStatusmonth extends DeesElement {
         }
 
         .overall-uptime {
-          text-align: center;
           font-size: 13px;
           margin-top: ${unsafeCSS(spacing.md)};
-          color: ${colors.text.secondary};
-          line-height: 1.4;
+          padding-top: ${unsafeCSS(spacing.md)};
+          border-top: 1px solid ${cssManager.bdTheme('#f3f4f6', '#1f1f1f')};
+          color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
+          display: flex;
+          flex-direction: column;
+          gap: 4px;
+        }
+
+        .uptime-stat {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        
+        .uptime-value {
+          font-weight: 500;
+          color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+          font-variant-numeric: tabular-nums;
         }
 
         .loading-skeleton {
-          height: 280px;
-          background: ${cssManager.bdTheme(
-            'linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%)',
-            'linear-gradient(90deg, #1f1f1f 25%, #262626 50%, #1f1f1f 75%)'
-          )};
-          background-size: 200% 100%;
-          animation: loading 1.5s infinite;
-          border-radius: ${unsafeCSS(borderRadius.md)};
+          height: 200px;
+          display: flex;
+          flex-direction: column;
+          gap: ${unsafeCSS(spacing.sm)};
+          padding: ${unsafeCSS(spacing.lg)};
+        }
+        
+        .skeleton-header {
+          height: 20px;
+          width: 80px;
+          background: ${cssManager.bdTheme('#f3f4f6', '#27272a')};
+          border-radius: 4px;
+          animation: pulse 2s infinite;
+        }
+        
+        .skeleton-grid {
+          flex: 1;
+          display: grid;
+          grid-template-columns: repeat(7, 1fr);
+          gap: 2px;
+        }
+        
+        .skeleton-day {
+          background: ${cssManager.bdTheme('#f3f4f6', '#27272a')};
+          border-radius: 2px;
+          animation: pulse 2s infinite;
+          animation-delay: calc(var(--index) * 0.05s);
+        }
+        
+        @keyframes pulse {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0.5; }
         }
 
         @keyframes loading {
-          0% { background-position: 200% 0; }
-          100% { background-position: -200% 0; }
+          0% { transform: translateX(-100%); }
+          100% { transform: translateX(200%); }
         }
 
         .tooltip {
           position: absolute;
-          background: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
-          color: ${cssManager.bdTheme('#ffffff', '#1a1a1a')};
-          padding: ${unsafeCSS(spacing.sm)} ${unsafeCSS(spacing.md)};
-          border-radius: ${unsafeCSS(borderRadius.base)};
+          background: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+          color: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
+          padding: 8px 12px;
+          border-radius: 4px;
           font-size: 12px;
           pointer-events: none;
           opacity: 0;
-          transition: opacity 0.2s;
-          z-index: 10;
+          transition: opacity 0.15s;
+          z-index: 50;
           white-space: nowrap;
-          box-shadow: ${unsafeCSS(shadows.lg)};
-          border: 1px solid ${colors.border.default};
+          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+          line-height: 1.5;
         }
 
         .tooltip.visible {
-          opacity: 0.95;
+          opacity: 1;
         }
         
-        .tooltip strong {
-          font-weight: 600;
-          display: block;
-          margin-bottom: ${unsafeCSS(spacing.xs)};
-          color: ${cssManager.bdTheme('#ffffff', '#1a1a1a')};
+        .tooltip-date {
+          font-weight: 500;
+          margin-bottom: 4px;
+        }
+        
+        .tooltip-stat {
+          font-size: 11px;
+          opacity: 0.9;
         }
 
         .no-data-message {
@@ -221,6 +264,11 @@ export class UplStatuspageStatusmonth extends DeesElement {
           .statusMonth {
             padding: ${unsafeCSS(spacing.md)};
           }
+          
+          .loading-skeleton {
+            height: 180px;
+            padding: ${unsafeCSS(spacing.md)};
+          }
         }
     `
   ]
@@ -233,9 +281,16 @@ export class UplStatuspageStatusmonth extends DeesElement {
         <uplinternal-miniheading>${this.serviceName} - Last ${totalDays} Days</uplinternal-miniheading>
         <div class="mainbox">
           ${this.loading ? html`
-            ${Array(this.monthsToShow).fill(0).map(() => html`
+            ${Array(this.monthsToShow).fill(0).map((_, index) => html`
               <div class="statusMonth">
-                <div class="loading-skeleton"></div>
+                <div class="loading-skeleton">
+                  <div class="skeleton-header"></div>
+                  <div class="skeleton-grid">
+                    ${Array(35).fill(0).map((_, i) => html`
+                      <div class="skeleton-day" style="--index: ${i}"></div>
+                    `)}
+                  </div>
+                </div>
               </div>
             `)}
           ` : this.monthlyData.length === 0 ? html`
@@ -261,8 +316,16 @@ export class UplStatuspageStatusmonth extends DeesElement {
           ${monthData.days.map(day => this.renderDay(day))}
         </div>
         <div class="overall-uptime">
-          ${monthData.overallUptime.toFixed(2)}% uptime
-          ${monthData.totalIncidents > 0 ? html`<br/>${monthData.totalIncidents} incidents` : ''}
+          <div class="uptime-stat">
+            <span>Uptime</span>
+            <span class="uptime-value">${monthData.overallUptime.toFixed(2)}%</span>
+          </div>
+          ${monthData.totalIncidents > 0 ? html`
+            <div class="uptime-stat">
+              <span>Incidents</span>
+              <span class="uptime-value">${monthData.totalIncidents}</span>
+            </div>
+          ` : ''}
         </div>
       </div>
     `;
@@ -319,11 +382,11 @@ export class UplStatuspageStatusmonth extends DeesElement {
     statusText = statusText.charAt(0).toUpperCase() + statusText.slice(1);
     
     tooltip.innerHTML = `
-      <div><strong>${dateStr}</strong></div>
-      <div>Status: ${statusText}</div>
-      <div>Uptime: ${day.uptime.toFixed(2)}%</div>
-      ${day.incidents > 0 ? `<div>Incidents: ${day.incidents}</div>` : ''}
-      ${day.totalDowntime > 0 ? `<div>Downtime: ${day.totalDowntime} minutes</div>` : ''}
+      <div class="tooltip-date">${dateStr}</div>
+      <div class="tooltip-stat">Status: ${statusText}</div>
+      <div class="tooltip-stat">Uptime: ${day.uptime.toFixed(2)}%</div>
+      ${day.incidents > 0 ? `<div class="tooltip-stat">Incidents: ${day.incidents}</div>` : ''}
+      ${day.totalDowntime > 0 ? `<div class="tooltip-stat">Downtime: ${day.totalDowntime} min</div>` : ''}
     `;
     
     const rect = (event.target as HTMLElement).getBoundingClientRect();