diff --git a/ts_web/elements/upl-statuspage-statusmonth.ts b/ts_web/elements/upl-statuspage-statusmonth.ts
index 352a89a..f7ddade 100644
--- a/ts_web/elements/upl-statuspage-statusmonth.ts
+++ b/ts_web/elements/upl-statuspage-statusmonth.ts
@@ -67,8 +67,8 @@ export class UplStatuspageStatusmonth extends DeesElement {
 
         .mainbox {
           display: grid;
-          grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-          gap: ${unsafeCSS(spacing.md)};
+          grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+          gap: ${unsafeCSS(spacing.lg)};
         }
 
         .statusMonth {
@@ -77,89 +77,102 @@ export class UplStatuspageStatusmonth extends DeesElement {
           border-radius: ${unsafeCSS(borderRadius.base)};
           border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
           position: relative;
-          transition: border-color 0.2s ease;
+          transition: all 0.2s ease;
+          display: flex;
+          flex-direction: column;
+          min-height: 280px;
+          box-shadow: ${cssManager.bdTheme('0 1px 2px 0 rgba(0, 0, 0, 0.05)', 'none')};
         }
         
         .statusMonth:hover {
-          border-color: ${cssManager.bdTheme('#d1d5db', '#3f3f46')};
+          border-color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+          box-shadow: ${cssManager.bdTheme('0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)', '0 0 0 1px rgba(255, 255, 255, 0.1)')};
         }
 
         .month-header {
-          font-size: 14px;
-          font-weight: 500;
+          font-size: 13px;
+          font-weight: 600;
           margin-bottom: ${unsafeCSS(spacing.md)};
           color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
-          letter-spacing: -0.01em;
+          letter-spacing: 0.02em;
+          text-transform: uppercase;
         }
 
+        .days-container {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          margin-bottom: ${unsafeCSS(spacing.lg)};
+        }
+        
         .days-grid {
           display: grid;
           grid-template-columns: repeat(7, 1fr);
-          gap: 2px;
+          gap: 3px;
+          width: 100%;
         }
 
         .weekday-label {
-          font-size: 11px;
+          font-size: 10px;
           text-align: center;
           color: ${cssManager.bdTheme('#9ca3af', '#71717a')};
-          font-weight: 400;
+          font-weight: 500;
           height: 20px;
           line-height: 20px;
           margin-bottom: ${unsafeCSS(spacing.sm)};
+          text-transform: uppercase;
         }
 
         .statusDay {
           aspect-ratio: 1;
-          border-radius: 2px;
+          border-radius: 4px;
           cursor: pointer;
-          transition: opacity 0.15s ease;
+          transition: all 0.15s ease;
           position: relative;
         }
 
         .statusDay:hover:not(.empty) {
-          opacity: 0.8;
+          transform: scale(1.15);
+          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+          z-index: 1;
         }
 
         .statusDay.operational {
-          background: ${colors.status.operational};
+          background: ${cssManager.bdTheme('#10b981', '#10b981')};
         }
 
         .statusDay.degraded {
-          background: ${colors.status.degraded};
+          background: ${cssManager.bdTheme('#f59e0b', '#f59e0b')};
         }
 
         .statusDay.partial_outage {
-          background: ${colors.status.partial};
+          background: ${cssManager.bdTheme('#ef4444', '#ef4444')};
         }
 
         .statusDay.major_outage {
-          background: ${colors.status.major};
+          background: ${cssManager.bdTheme('#dc2626', '#dc2626')};
         }
 
         .statusDay.no-data {
-          background: ${colors.border.muted};
-          opacity: 0.3;
+          background: ${cssManager.bdTheme('#f3f4f6', '#27272a')};
+          opacity: 0.5;
         }
 
         .statusDay.empty {
           background: transparent;
           cursor: default;
-        }
-
-        .statusDay.empty:hover {
-          transform: none;
-          box-shadow: none;
+          pointer-events: none;
         }
 
         .overall-uptime {
-          font-size: 13px;
-          margin-top: ${unsafeCSS(spacing.md)};
+          font-size: 12px;
+          margin-top: auto;
           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;
+          gap: 6px;
+          border-top: 1px solid ${cssManager.bdTheme('#f3f4f6', '#1f1f1f')};
         }
 
         .uptime-stat {
@@ -169,17 +182,17 @@ export class UplStatuspageStatusmonth extends DeesElement {
         }
         
         .uptime-value {
-          font-weight: 500;
+          font-weight: 600;
           color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
           font-variant-numeric: tabular-nums;
+          font-size: 13px;
         }
 
         .loading-skeleton {
-          height: 200px;
           display: flex;
           flex-direction: column;
           gap: ${unsafeCSS(spacing.sm)};
-          padding: ${unsafeCSS(spacing.lg)};
+          height: 100%;
         }
         
         .skeleton-header {
@@ -263,6 +276,7 @@ export class UplStatuspageStatusmonth extends DeesElement {
           
           .statusMonth {
             padding: ${unsafeCSS(spacing.md)};
+            min-height: 260px;
           }
           
           .loading-skeleton {
@@ -285,11 +299,14 @@ export class UplStatuspageStatusmonth extends DeesElement {
               <div class="statusMonth">
                 <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 class="days-container">
+                    <div class="skeleton-grid">
+                      ${Array(42).fill(0).map((_, i) => html`
+                        <div class="skeleton-day" style="--index: ${i}"></div>
+                      `)}
+                    </div>
                   </div>
+                  <div style="height: 48px; border-top: 1px solid ${cssManager.bdTheme('#f3f4f6', '#1f1f1f')}; margin-top: auto; padding-top: 16px;"></div>
                 </div>
               </div>
             `)}
@@ -310,10 +327,13 @@ export class UplStatuspageStatusmonth extends DeesElement {
     return html`
       <div class="statusMonth" @mouseleave=${this.hideTooltip}>
         <div class="month-header">${monthName}</div>
-        <div class="days-grid">
-          ${this.renderWeekdayLabels()}
-          ${this.renderEmptyDays(firstDayOfWeek)}
-          ${monthData.days.map(day => this.renderDay(day))}
+        <div class="days-container">
+          <div class="days-grid">
+            ${this.renderWeekdayLabels()}
+            ${this.renderEmptyDays(firstDayOfWeek)}
+            ${monthData.days.map(day => this.renderDay(day))}
+            ${this.renderTrailingEmptyDays(firstDayOfWeek + monthData.days.length)}
+          </div>
         </div>
         <div class="overall-uptime">
           <div class="uptime-stat">
@@ -339,6 +359,12 @@ export class UplStatuspageStatusmonth extends DeesElement {
   private renderEmptyDays(count: number): TemplateResult[] {
     return Array(count).fill(0).map(() => html`<div class="statusDay empty"></div>`);
   }
+  
+  private renderTrailingEmptyDays(totalCells: number): TemplateResult[] {
+    const remainder = totalCells % 7;
+    const trailingCount = remainder === 0 ? 0 : 7 - remainder;
+    return Array(trailingCount).fill(0).map(() => html`<div class="statusDay empty"></div>`);
+  }
 
   private renderDay(day: any): TemplateResult {
     const status = day.status || 'no-data';