diff --git a/src/app/election/components/committee-board/committee-board.component.html b/src/app/election/components/committee-board/committee-board.component.html
index 8c367cbeb..01519c4fa 100644
--- a/src/app/election/components/committee-board/committee-board.component.html
+++ b/src/app/election/components/committee-board/committee-board.component.html
@@ -7,6 +7,11 @@
 -->
 
 <div class="committee-page">
+  <!-- Ambient background glow elements -->
+  <div class="ambient-glow blob-1"></div>
+  <div class="ambient-glow blob-2"></div>
+  <div class="ambient-glow blob-3"></div>
+
   <!-- Header -->
   <div class="page-header">
     <div class="header-left">
@@ -149,11 +154,22 @@
                   <div class="meeting-list">
                     @for (m of getMeetings(c.id); track m.id) {
                       <div class="meeting-row">
-                        <div class="meeting-mode-icon" [title]="m.mode">
-                          <mat-icon>{{ meetingModeIcon(m.mode) }}</mat-icon>
+                        <!-- Top Header Row -->
+                        <div class="meeting-header-row">
+                          <div class="meeting-mode-icon" [title]="m.mode">
+                            <mat-icon>{{ meetingModeIcon(m.mode) }}</mat-icon>
+                          </div>
+                          <span class="meeting-title" [title]="m.title">{{ m.title }}</span>
+                          <span
+                            class="meeting-status-chip"
+                            [style.background]="meetingStatusColor(m.status) + '18'"
+                            [style.color]="meetingStatusColor(m.status)"
+                            >{{ m.status }}</span
+                          >
                         </div>
-                        <div class="meeting-info">
-                          <span class="meeting-title">{{ m.title }}</span>
+
+                        <!-- Details Area -->
+                        <div class="meeting-details-area">
                           <div class="meeting-meta-row">
                             <mat-icon class="meta-icon">calendar_today</mat-icon>
                             <span>{{ m.meetingDate | date: 'dd MMM yyyy' }}</span>
@@ -162,13 +178,6 @@
                               <mat-icon class="meta-icon">schedule</mat-icon>
                               <span>{{ m.meetingTime }}</span>
                             }
-                            <span class="meta-sep">·</span>
-                            <span
-                              class="meeting-status-chip"
-                              [style.background]="meetingStatusColor(m.status) + '18'"
-                              [style.color]="meetingStatusColor(m.status)"
-                              >{{ m.status }}</span
-                            >
                           </div>
                           @if (m.mode === 'ONLINE' && m.platform) {
                             <div class="meeting-platform-row">
@@ -201,13 +210,31 @@
                             </div>
                           }
                         </div>
-                        <div class="meeting-actions">
+
+                        <!-- Actions Row -->
+                        <div class="meeting-actions-row">
                           <button class="btn-icon" title="Copy Details" (click)="copyMeetingDetails(m, $event)">
                             <mat-icon>content_copy</mat-icon>
                           </button>
                           <button class="btn-icon" title="Download PDF" (click)="downloadMeetingPdf(m, c, $event)">
                             <mat-icon>picture_as_pdf</mat-icon>
                           </button>
+                          @if (m.status === 'COMPLETED') {
+                            <button
+                              class="btn-icon purple"
+                              title="Send Voting Emails"
+                              (click)="sendVotingEmailsDirect(m, $event)"
+                            >
+                              <mat-icon>forward_to_inbox</mat-icon>
+                            </button>
+                            <button
+                              class="btn-icon purple"
+                              title="View Votes & Resolutions"
+                              (click)="openVotePanel(m, $event)"
+                            >
+                              <mat-icon>how_to_vote</mat-icon>
+                            </button>
+                          }
                           @if (c.status === 'ACTIVE') {
                             @if (m.status === 'SCHEDULED') {
                               <button class="btn-icon" title="Edit" (click)="openEditMeeting(m, c.id, $event)">
@@ -525,3 +552,126 @@
     </div>
   </div>
 }
+
+<!-- ── Vote Summary & Resolution Modal ─────────────────────────── -->
+@if (showVotePanel) {
+  <div class="modal-backdrop" (click)="closeVotePanel()"></div>
+  <div class="vote-modal">
+    <!-- Modal header -->
+    <div class="vm-header">
+      <div class="vm-header-left">
+        <mat-icon class="vm-icon">how_to_vote</mat-icon>
+        <div>
+          <div class="vm-title">Vote Summary &amp; Resolutions</div>
+          @if (votePanelMeeting) {
+            <div class="vm-subtitle">
+              {{ votePanelMeeting.title }} · {{ votePanelMeeting.meetingDate | date: 'dd MMM yyyy' }}
+            </div>
+          }
+        </div>
+      </div>
+      <div class="vm-header-right">
+        <button
+          class="btn-resend"
+          (click)="resendVotingEmails($event)"
+          [disabled]="resendingVoteEmails"
+          title="Resend voting emails"
+        >
+          <mat-icon>{{ resendingVoteEmails ? 'hourglass_empty' : 'forward_to_inbox' }}</mat-icon>
+          {{ resendingVoteEmails ? 'Sending...' : 'Resend Emails' }}
+        </button>
+        <button class="vm-close" (click)="closeVotePanel()">
+          <mat-icon>close</mat-icon>
+        </button>
+      </div>
+    </div>
+
+    <!-- Modal body -->
+    <div class="vm-body">
+      @if (voteSummaryLoading) {
+        <div class="loading-row"><mat-icon class="spin">autorenew</mat-icon> Loading votes…</div>
+      } @else if (voteSummary.length === 0) {
+        <div class="empty-votes">
+          <mat-icon>inbox</mat-icon>
+          <p>No agenda items found for this meeting.</p>
+        </div>
+      } @else {
+        @for (item of voteSummary; track item.agendaId) {
+          <div class="vote-item-card">
+            <div class="vi-header">
+              <span class="vi-num">{{ $index + 1 }}</span>
+              <span class="vi-label">{{ item.agendaItem }}</span>
+            </div>
+
+            <div class="vote-counts">
+              <div class="vc approved">
+                <mat-icon>check_circle</mat-icon><span>{{ item.approvedCount }} Approved</span>
+              </div>
+              <div class="vc rejected">
+                <mat-icon>cancel</mat-icon><span>{{ item.rejectedCount }} Rejected</span>
+              </div>
+              <div class="vc abstain">
+                <mat-icon>pause_circle</mat-icon><span>{{ item.abstainCount }} Abstain</span>
+              </div>
+              <div class="vc pending">
+                <mat-icon>pending</mat-icon><span>{{ item.pendingCount }} Pending</span>
+              </div>
+            </div>
+
+            <div class="resolution-row">
+              <label class="res-label">Final Resolution:</label>
+              <div class="res-buttons">
+                <button
+                  class="btn-res approve"
+                  [class.active]="resolutionForm[item.agendaId]?.resolution === 'APPROVED'"
+                  (click)="resolutionForm[item.agendaId].resolution = 'APPROVED'"
+                  type="button"
+                >
+                  <mat-icon>check_circle</mat-icon> Approved
+                </button>
+                <button
+                  class="btn-res reject"
+                  [class.active]="resolutionForm[item.agendaId]?.resolution === 'REJECTED'"
+                  (click)="resolutionForm[item.agendaId].resolution = 'REJECTED'"
+                  type="button"
+                >
+                  <mat-icon>cancel</mat-icon> Rejected
+                </button>
+                <button
+                  class="btn-res defer"
+                  [class.active]="resolutionForm[item.agendaId]?.resolution === 'DEFERRED'"
+                  (click)="resolutionForm[item.agendaId].resolution = 'DEFERRED'"
+                  type="button"
+                >
+                  <mat-icon>pause_circle</mat-icon> Deferred
+                </button>
+              </div>
+            </div>
+
+            <div class="notes-row">
+              <textarea
+                class="notes-input"
+                placeholder="Discussion notes (optional)…"
+                rows="2"
+                [(ngModel)]="resolutionForm[item.agendaId].discussionNotes"
+              ></textarea>
+            </div>
+          </div>
+        }
+      }
+    </div>
+
+    <!-- Modal footer -->
+    <div class="vm-footer">
+      <button class="btn-cancel" (click)="closeVotePanel()">Cancel</button>
+      <button
+        class="btn-save purple-btn"
+        (click)="saveResolutions()"
+        [disabled]="savingResolutions || voteSummaryLoading"
+      >
+        <mat-icon>{{ savingResolutions ? 'hourglass_empty' : 'send' }}</mat-icon>
+        {{ savingResolutions ? 'Saving...' : 'Save & Send Minutes' }}
+      </button>
+    </div>
+  </div>
+}
diff --git a/src/app/election/components/committee-board/committee-board.component.scss b/src/app/election/components/committee-board/committee-board.component.scss
index 3dff6d090..c6bf996d3 100644
--- a/src/app/election/components/committee-board/committee-board.component.scss
+++ b/src/app/election/components/committee-board/committee-board.component.scss
@@ -6,152 +6,233 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-$primary: #6366f1;
+// ── Theme Variables ──────────────────────────────────────────────────
+$primary: #6366f1; // Indigo
+$primary-light: #818cf8;
 $primary-dark: #4f46e5;
-$text: #0f172a;
-$sub: #64748b;
-$bg: #f8fafc;
-$border: 1px solid rgb(226 232 240 / 80%);
-$radius: 16px;
-$shadow: 0 4px 20px rgb(15 23 42 / 8%);
-$font:
+$accent: #a855f7; // Purple
+$accent-dark: #7c3aed;
+$text-main: #0f172a; // Slate 900
+$text-sub: #475569; // Slate 600
+$text-muted: #94a3b8; // Slate 400
+$bg-main: #f8fafc; // Slate 50
+$bg-card: rgb(255 255 255 / 75%);
+$border-glass: 1px solid rgb(226 232 240 / 70%);
+$border-focus: 1px solid rgb(99 102 241 / 50%);
+$radius-card: 16px; // Compact: was 20px
+$radius-btn: 10px; // Compact: was 12px
+$radius-pill: 24px; // Compact: was 30px
+$shadow-sm: 0 2px 6px rgb(15 23 42 / 4%);
+$shadow-md: 0 8px 24px -8px rgb(15 23 42 / 8%);
+$shadow-lg: 0 16px 32px -12px rgb(15 23 42 / 12%);
+$shadow-glow: 0 0 16px rgb(99 102 241 / 12%);
+
+$font-family:
   'Inter',
   -apple-system,
   blinkmacsystemfont,
   'Segoe UI',
   sans-serif;
 
+// ── General Layout ───────────────────────────────────────────────────
 .committee-page {
-  padding: 32px;
-  background: $bg;
+  position: relative;
+  padding: 24px; // Compact: was 40px
+  background: $bg-main;
   min-height: 100vh;
-  font-family: $font;
-  color: $text;
+  font-family: $font-family;
+  color: $text-main;
   box-sizing: border-box;
+  overflow-x: hidden;
 }
 
-// ── Header ────────────────────────────────────────────────────────
+// Ambient Background Glows (Slightly smaller blur/blobs)
+.ambient-glow {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(100px);
+  z-index: 0;
+  pointer-events: none;
+  opacity: 0.2;
+
+  &.blob-1 {
+    top: -10%;
+    right: 5%;
+    width: 380px;
+    height: 380px;
+    background: radial-gradient(circle, rgb(99 102 241 / 40%) 0%, rgb(168 85 247 / 20%) 100%);
+  }
+
+  &.blob-2 {
+    bottom: 10%;
+    left: -5%;
+    width: 340px;
+    height: 340px;
+    background: radial-gradient(circle, rgb(168 85 247 / 30%) 0%, rgb(99 102 241 / 10%) 100%);
+  }
+
+  &.blob-3 {
+    top: 40%;
+    right: -10%;
+    width: 300px;
+    height: 300px;
+    background: radial-gradient(circle, rgb(99 102 241 / 20%) 0%, rgb(244 63 94 / 15%) 100%);
+  }
+}
+
+// ── Header Area ──────────────────────────────────────────────────────
 .page-header {
+  position: relative;
+  z-index: 1;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
-  margin-bottom: 28px;
+  margin-bottom: 24px; // Compact: was 36px
   flex-wrap: wrap;
 
   .header-left {
     display: flex;
     align-items: center;
-    gap: 14px;
+    gap: 12px;
   }
 
   h2 {
-    font-size: 22px;
+    font-size: 21px; // Compact: was 26px
     font-weight: 800;
     margin: 0 0 3px;
-    letter-spacing: -0.4px;
+    letter-spacing: -0.5px;
+    background: linear-gradient(135deg, $text-main 0%, #3b0764 100%);
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
   }
 
   .header-sub {
-    font-size: 13px;
-    color: $sub;
+    font-size: 13px; // Compact: was 14px
+    color: $text-sub;
     margin: 0;
+    font-weight: 500;
   }
 }
 
 .back-btn {
-  width: 38px;
-  height: 38px;
+  width: 36px; // Compact: was 44px
+  height: 36px; // Compact: was 44px
   border-radius: 50%;
-  background: #fff;
-  border: $border;
+  background: rgb(255 255 255 / 85%);
+  border: $border-glass;
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
-  color: $sub;
-  transition: all 0.2s;
+  color: $text-sub;
+  box-shadow: $shadow-sm;
+  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
   flex-shrink: 0;
+  backdrop-filter: blur(8px);
 
   mat-icon {
-    font-size: 18px;
+    font-size: 18px; // Compact: was 20px
     height: 18px;
     width: 18px;
+    transition: transform 0.2s;
   }
 
   &:hover {
-    color: $text;
+    color: $primary-dark;
+    background: #fff;
+    box-shadow: $shadow-md;
     transform: translateX(-2px);
+
+    mat-icon {
+      transform: scale(1.08);
+    }
   }
 }
 
 .btn-create {
   display: inline-flex;
   align-items: center;
-  gap: 7px;
+  gap: 6px;
   background: linear-gradient(135deg, $primary 0%, $primary-dark 100%);
   color: #fff;
   border: none;
-  border-radius: 24px;
-  padding: 10px 20px;
-  font-size: 14px;
+  border-radius: $radius-pill;
+  padding: 8px 18px; // Compact: was 12px 24px
+  font-size: 13px; // Compact: was 14px
   font-weight: 600;
   cursor: pointer;
-  box-shadow: 0 4px 12px rgb(99 102 241 / 30%);
-  transition: all 0.2s;
+  box-shadow: 0 4px 14px rgb(99 102 241 / 20%);
+  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
 
   mat-icon {
-    font-size: 18px;
+    font-size: 18px; // Compact: was 20px
     height: 18px;
     width: 18px;
   }
 
   &:hover {
-    transform: translateY(-1px);
-    box-shadow: 0 6px 16px rgb(99 102 241 / 40%);
+    transform: translateY(-1.5px);
+    box-shadow: 0 6px 18px rgb(99 102 241 / 30%);
+    background: linear-gradient(135deg, $primary-light 0%, $primary-dark 100%);
+  }
+
+  &:active {
+    transform: translateY(0);
   }
 }
 
-// ── States ────────────────────────────────────────────────────────
+// ── States ───────────────────────────────────────────────────────────
 .loading-state,
 .empty-state {
+  position: relative;
+  z-index: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 16px;
-  padding: 80px 20px;
+  padding: 60px 20px; // Compact: was 100px 24px
   text-align: center;
-  color: $sub;
+  color: $text-sub;
+  background: $bg-card;
+  backdrop-filter: blur(16px);
+  border-radius: $radius-card;
+  border: $border-glass;
+  box-shadow: $shadow-md;
+  max-width: 500px;
+  margin: 30px auto;
 
   h3 {
-    font-size: 18px;
+    font-size: 17px; // Compact: was 20px
     font-weight: 700;
-    color: $text;
+    color: $text-main;
     margin: 0;
   }
 
   p {
-    font-size: 14px;
-    max-width: 360px;
+    font-size: 13px; // Compact: was 14px
+    max-width: 320px;
     margin: 0;
+    line-height: 1.5;
   }
 }
 
 .empty-icon {
-  font-size: 56px;
-  height: 56px;
-  width: 56px;
-  color: #cbd5e1;
+  font-size: 48px; // Compact: was 64px
+  height: 48px;
+  width: 48px;
+  color: $primary-light;
+  opacity: 0.6;
 }
 
 .spinner {
-  width: 36px;
+  width: 36px; // Compact: was 44px
   height: 36px;
-  border: 3px solid #e2e8f0;
+  border: 3px solid rgb(99 102 241 / 10%);
   border-top-color: $primary;
   border-radius: 50%;
-  animation: spin 0.8s linear infinite;
+  animation: spin 0.8s cubic-bezier(0.5, 0.1, 0.4, 0.9) infinite;
 }
 
 @keyframes spin {
@@ -160,32 +241,59 @@ $font:
   }
 }
 
-// ── Grid ──────────────────────────────────────────────────────────
+// ── Committees Grid ──────────────────────────────────────────────────
 .committees-grid {
+  position: relative;
+  z-index: 1;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-  gap: 20px;
+  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); // Compact: was 360px
+  gap: 20px; // Compact: was 28px
 }
 
-// ── Committee Card ────────────────────────────────────────────────
+// ── Committee Card ───────────────────────────────────────────────────
 .committee-card {
-  background: #fff;
-  border-radius: $radius;
-  border: $border;
-  box-shadow: $shadow;
-  padding: 20px;
+  background: $bg-card;
+  backdrop-filter: blur(16px);
+  border-radius: $radius-card;
+  border: $border-glass;
+  box-shadow: $shadow-md;
+  padding: 18px; // Compact: was 24px
   display: flex;
   flex-direction: column;
-  gap: 14px;
-  transition: all 0.25s;
+  gap: 12px; // Compact: was 16px
+  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px; // Compact: was 4px
+    background: linear-gradient(90deg, $primary 0%, $accent 100%);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
 
   &:hover {
-    box-shadow: 0 8px 28px rgb(15 23 42 / 12%);
-    transform: translateY(-2px);
+    box-shadow: $shadow-lg;
+    transform: translateY(-3px);
+    border-color: rgb(99 102 241 / 25%);
+
+    &::before {
+      opacity: 1;
+    }
   }
 
   &.dissolved {
-    opacity: 0.65;
+    opacity: 0.6;
+    background: rgb(241 245 249 / 60%);
+
+    &::before {
+      background: #94a3b8;
+    }
   }
 }
 
@@ -196,20 +304,21 @@ $font:
 }
 
 .committee-icon {
-  width: 46px;
-  height: 46px;
-  border-radius: 12px;
-  background: linear-gradient(135deg, $primary 0%, $primary-dark 100%);
+  width: 42px; // Compact: was 52px
+  height: 42px; // Compact: was 52px
+  border-radius: 10px; // Compact: was 14px
+  background: linear-gradient(135deg, $primary 0%, $accent 100%);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   overflow: hidden;
+  box-shadow: 0 3px 8px rgb(99 102 241 / 15%);
 
   mat-icon {
-    font-size: 22px;
-    height: 22px;
-    width: 22px;
+    font-size: 20px; // Compact: was 24px
+    height: 20px;
+    width: 20px;
     color: #fff;
   }
 }
@@ -218,15 +327,18 @@ $font:
   width: 100%;
   height: 100%;
   object-fit: cover;
-  border-radius: 12px;
+  border-radius: 10px;
 }
 
 .clickable-photo {
   cursor: zoom-in;
-  transition: opacity 0.15s;
+  transition:
+    transform 0.2s,
+    opacity 0.2s;
 
   &:hover {
-    opacity: 0.85;
+    opacity: 0.9;
+    transform: scale(1.03);
   }
 }
 
@@ -235,9 +347,10 @@ $font:
   min-width: 0;
 
   h3 {
-    font-size: 16px;
-    font-weight: 700;
-    margin: 0 0 5px;
+    font-size: 15px; // Compact: was 18px
+    font-weight: 750;
+    margin: 0 0 4px;
+    color: $text-main;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -245,17 +358,31 @@ $font:
 }
 
 .status-chip {
-  font-size: 10px;
+  font-size: 8px; // Compact: was 9px
   font-weight: 700;
-  padding: 2px 9px;
-  border-radius: 10px;
+  padding: 2px 8px; // Compact: was 3px 10px
+  border-radius: $radius-pill;
   text-transform: uppercase;
-  letter-spacing: 0.3px;
+  letter-spacing: 0.5px;
+  display: inline-block;
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%);
+}
+
+.statusColor {
+  &.active {
+    background: rgb(16 185 129 / 12%) !important;
+    color: #10b981 !important;
+  }
+
+  &.dissolved {
+    background: rgb(148 163 184 / 12%) !important;
+    color: #94a3b8 !important;
+  }
 }
 
 .committee-desc {
-  font-size: 13px;
-  color: $sub;
+  font-size: 13px; // Compact: was 14px
+  color: $text-sub;
   margin: 0;
   line-height: 1.5;
 }
@@ -264,38 +391,50 @@ $font:
   display: flex;
   align-items: center;
   gap: 6px;
-  font-size: 13px;
+  font-size: 12px; // Compact: was 13px
   font-weight: 600;
-  color: $sub;
+  color: $text-sub;
 
   mat-icon {
-    font-size: 16px;
+    font-size: 16px; // Compact: was 18px
     height: 16px;
     width: 16px;
+    color: $primary-light;
   }
 }
 
-// ── Member Avatars (stacked) ──────────────────────────────────────
+// ── Overlapping Member Avatars ───────────────────────────────────────
 .member-avatars {
   display: flex;
-  flex-direction: row;
+  align-items: center;
+  padding-left: 6px;
+  margin-bottom: 2px;
 }
 
 .member-avatar {
-  width: 36px;
-  height: 36px;
+  width: 30px; // Compact: was 36px
+  height: 30px; // Compact: was 36px
   border-radius: 50%;
-  background: linear-gradient(135deg, $primary 0%, $primary-dark 100%);
+  background: linear-gradient(135deg, $primary-light 0%, $accent 100%);
   color: #fff;
-  font-size: 14px;
+  font-size: 11px; // Compact: was 13px
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 2px solid #fff;
-  margin-left: -8px;
+  border: 2px solid #fff; // Compact: was 3px
+  margin-left: -8px; // Compact: was -10px
   overflow: hidden;
   flex-shrink: 0;
+  box-shadow: 0 1px 4px rgb(0 0 0 / 6%);
+  transition:
+    transform 0.2s ease,
+    z-index 0.2s;
+
+  &:hover {
+    transform: translateY(-3px) scale(1.08);
+    z-index: 10;
+  }
 
   &:first-child {
     margin-left: 0;
@@ -305,51 +444,52 @@ $font:
     width: 100%;
     height: 100%;
     object-fit: cover;
-    border-radius: 50%;
   }
 }
 
 .more-avatar {
-  background: #e2e8f0;
-  color: $sub;
-  font-size: 11px;
-  font-weight: 700;
+  background: #f1f5f9;
+  color: $text-sub;
+  font-size: 10px;
+  font-weight: 600;
+  border-color: #fff;
 }
 
-// ── Member List ───────────────────────────────────────────────────
+// ── Detailed Member List ─────────────────────────────────────────────
 .member-list {
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  border-top: $border;
-  padding-top: 12px;
+  gap: 8px; // Compact: was 10px
+  border-top: $border-glass;
+  padding-top: 12px; // Compact: was 16px
 }
 
 .member-row {
   display: flex;
   align-items: center;
   gap: 10px;
+  padding: 2px 0;
 }
 
 .member-avatar-sm {
-  width: 32px;
-  height: 32px;
+  width: 28px; // Compact: was 34px
+  height: 28px; // Compact: was 34px
   border-radius: 50%;
-  background: linear-gradient(135deg, $primary 0%, $primary-dark 100%);
+  background: linear-gradient(135deg, $primary 0%, $accent 100%);
   color: #fff;
-  font-size: 13px;
+  font-size: 11px; // Compact: was 12px
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   overflow: hidden;
+  box-shadow: $shadow-sm;
 
   img {
     width: 100%;
     height: 100%;
     object-fit: cover;
-    border-radius: 50%;
   }
 }
 
@@ -359,533 +499,29 @@ $font:
 
   .member-name {
     display: block;
-    font-size: 13px;
+    font-size: 13px; // Compact: was 14px
     font-weight: 600;
-    color: $text;
+    color: $text-main;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
   .member-desig {
-    display: block;
-    font-size: 11px;
-    color: $sub;
+    display: inline-block;
+    font-size: 10px; // Compact: was 11px
+    font-weight: 650;
+    color: $accent-dark;
+    background: rgb(168 85 247 / 7%);
+    padding: 0 6px;
+    border-radius: $radius-pill;
     margin-top: 1px;
   }
 }
 
-// ── Card Actions ──────────────────────────────────────────────────
-.card-actions {
-  display: flex;
-  gap: 8px;
-  margin-top: auto;
-}
-
-.btn-edit {
-  flex: 1;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  padding: 8px 0;
-  border: $border;
-  border-radius: 8px;
-  background: #fff;
-  font-size: 13px;
-  font-weight: 600;
-  color: $text;
-  cursor: pointer;
-  transition: background 0.15s;
-
-  mat-icon {
-    font-size: 15px;
-    height: 15px;
-    width: 15px;
-  }
-
-  &:hover {
-    background: #f1f5f9;
-  }
-}
-
-.btn-dissolve {
-  flex: 1;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  padding: 8px 0;
-  border: 1px solid #fecaca;
-  border-radius: 8px;
-  background: #fff;
-  font-size: 13px;
-  font-weight: 600;
-  color: #ef4444;
-  cursor: pointer;
-  transition: background 0.15s;
-
-  mat-icon {
-    font-size: 15px;
-    height: 15px;
-    width: 15px;
-  }
-
-  &:hover {
-    background: #fef2f2;
-  }
-}
-
-.dissolved-label {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  font-size: 13px;
-  font-weight: 600;
-  color: #94a3b8;
-
-  mat-icon {
-    font-size: 16px;
-    height: 16px;
-    width: 16px;
-  }
-}
-
-// ── Drawer ────────────────────────────────────────────────────────
-.overlay {
-  position: fixed;
-  inset: 0;
-  background: rgb(0 0 0 / 30%);
-  z-index: 100;
-  backdrop-filter: blur(2px);
-}
-
-.form-drawer {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: 460px;
-  max-width: 100vw;
-  background: #fff;
-  z-index: 101;
-  display: flex;
-  flex-direction: column;
-  box-shadow: -8px 0 32px rgb(0 0 0 / 15%);
-}
-
-.drawer-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 20px 24px;
-  border-bottom: $border;
-  flex-shrink: 0;
-
-  h3 {
-    font-size: 18px;
-    font-weight: 700;
-    margin: 0;
-  }
-}
-
-.close-btn {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  border: none;
-  background: #f1f5f9;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  color: $sub;
-
-  mat-icon {
-    font-size: 18px;
-    height: 18px;
-    width: 18px;
-  }
-
-  &:hover {
-    background: #e2e8f0;
-    color: $text;
-  }
-}
-
-.drawer-body {
-  flex: 1;
-  overflow-y: auto;
-  padding: 24px;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-// ── Image Upload ──────────────────────────────────────────────────
-.image-upload-section {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 10px;
-  padding: 16px 0 8px;
-}
-
-.image-upload-ring {
-  width: 90px;
-  height: 90px;
-  border-radius: 50%;
-  border: 2px dashed #cbd5e1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-  transition:
-    border-color 0.2s,
-    background 0.2s;
-  background: #f8fafc;
-
-  &:hover {
-    border-color: $primary;
-    background: rgb(99 102 241 / 4%);
-
-    .upload-overlay {
-      opacity: 1;
-    }
-  }
-}
-
-.upload-preview {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: 50%;
-}
-
-.upload-overlay {
-  position: absolute;
-  inset: 0;
-  border-radius: 50%;
-  background: rgb(0 0 0 / 45%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  opacity: 0;
-  transition: opacity 0.2s;
-
-  mat-icon {
-    color: #fff;
-    font-size: 22px;
-    height: 22px;
-    width: 22px;
-  }
-
-  .view-icon {
-    font-size: 20px;
-    height: 20px;
-    width: 20px;
-    opacity: 0.85;
-    cursor: zoom-in;
-
-    &:hover {
-      opacity: 1;
-      transform: scale(1.1);
-    }
-  }
-}
-
-.upload-placeholder-icon {
-  font-size: 28px;
-  height: 28px;
-  width: 28px;
-  color: #94a3b8;
-  margin-bottom: 2px;
-}
-
-.upload-placeholder-text {
-  font-size: 10px;
-  font-weight: 600;
-  color: #94a3b8;
-  letter-spacing: 0.3px;
-}
-
-.btn-remove-image {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 12px;
-  border: 1px solid #fecaca;
-  border-radius: 20px;
-  background: #fff;
-  font-size: 12px;
-  font-weight: 600;
-  color: #ef4444;
-  cursor: pointer;
-  transition: background 0.15s;
-
-  mat-icon {
-    font-size: 14px;
-    height: 14px;
-    width: 14px;
-  }
-
-  &:hover {
-    background: #fef2f2;
-  }
-}
-
-.form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-
-  label {
-    font-size: 12px;
-    font-weight: 600;
-    color: $sub;
-    text-transform: uppercase;
-    letter-spacing: 0.4px;
-  }
-
-  input,
-  textarea {
-    padding: 10px 12px;
-    border: $border;
-    border-radius: 8px;
-    font-size: 14px;
-    color: $text;
-    font-family: $font;
-    outline: none;
-    transition: border-color 0.15s;
-    resize: vertical;
-
-    &:focus {
-      border-color: $primary;
-      box-shadow: 0 0 0 3px rgb(99 102 241 / 10%);
-    }
-
-    &.input-error {
-      border-color: #ef4444;
-    }
-  }
-}
-
-.error-msg {
-  font-size: 11px;
-  color: #ef4444;
-  margin-top: 2px;
-}
-
-.req {
-  color: #ef4444;
-}
-
-.section-title {
-  font-size: 11px;
-  font-weight: 700;
-  color: $sub;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  padding-bottom: 6px;
-  border-bottom: $border;
-}
-
-.loading-inline {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  color: $sub;
-  font-size: 13px;
-}
-
-.spinner-sm {
-  width: 20px;
-  height: 20px;
-  border: 2px solid #e2e8f0;
-  border-top-color: $primary;
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-.empty-directors {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 14px;
-  background: #f8fafc;
-  border-radius: 10px;
-  font-size: 13px;
-  color: $sub;
-
-  mat-icon {
-    font-size: 18px;
-    height: 18px;
-    width: 18px;
-  }
-}
-
-// ── Director Selection List ───────────────────────────────────────
-.director-select-list {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.director-option {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 10px 12px;
-  border: $border;
-  border-radius: 10px;
-  cursor: pointer;
-  transition: all 0.15s;
-  background: #fff;
-
-  &:hover {
-    border-color: $primary;
-    background: rgb(99 102 241 / 2%);
-  }
-
-  &.selected {
-    border-color: $primary;
-    background: rgb(99 102 241 / 5%);
-  }
-}
-
-.dir-avatar {
-  width: 38px;
-  height: 38px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, $primary 0%, $primary-dark 100%);
-  color: #fff;
-  font-size: 15px;
-  font-weight: 700;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  overflow: hidden;
-
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    border-radius: 50%;
-  }
-}
-
-.dir-info {
-  flex: 1;
-  min-width: 0;
-
-  .dir-name {
-    display: block;
-    font-size: 14px;
-    font-weight: 600;
-    color: $text;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .dir-desig {
-    display: block;
-    font-size: 11px;
-    color: $sub;
-    margin-top: 1px;
-  }
-}
-
-.dir-check {
-  flex-shrink: 0;
-
-  .check-icon {
-    font-size: 20px;
-    height: 20px;
-    width: 20px;
-    color: $primary;
-  }
-
-  .uncheck-icon {
-    font-size: 20px;
-    height: 20px;
-    width: 20px;
-    color: #cbd5e1;
-  }
-}
-
-.selected-count {
-  font-size: 12px;
-  font-weight: 600;
-  color: $primary;
-  text-align: right;
-}
-
-// ── Footer ────────────────────────────────────────────────────────
-.drawer-footer {
-  display: flex;
-  gap: 10px;
-  padding: 16px 24px;
-  border-top: $border;
-  flex-shrink: 0;
-}
-
-.btn-cancel {
-  flex: 1;
-  padding: 10px;
-  border: $border;
-  border-radius: 10px;
-  background: #fff;
-  font-size: 14px;
-  font-weight: 600;
-  color: $sub;
-  cursor: pointer;
-
-  &:hover {
-    background: #f1f5f9;
-  }
-}
-
-.btn-save {
-  flex: 2;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  padding: 10px;
-  border: none;
-  border-radius: 10px;
-  background: linear-gradient(135deg, $primary 0%, $primary-dark 100%);
-  color: #fff;
-  font-size: 14px;
-  font-weight: 600;
-  cursor: pointer;
-  box-shadow: 0 4px 10px rgb(99 102 241 / 25%);
-
-  mat-icon {
-    font-size: 16px;
-    height: 16px;
-    width: 16px;
-  }
-
-  &:hover:not(:disabled) {
-    transform: translateY(-1px);
-  }
-
-  &:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-}
-
-// ── Meetings Section ──────────────────────────────────────────────
+// ── Collapsible Meetings Panel ────────────────────────────────────────
 .meetings-section {
-  border-top: $border;
+  border-top: $border-glass;
   margin-top: 4px;
 }
 
@@ -894,21 +530,22 @@ $font:
   align-items: center;
   gap: 6px;
   width: 100%;
-  padding: 10px 4px;
+  padding: 10px 2px; // Compact: was 14px 4px
   background: none;
   border: none;
   cursor: pointer;
-  font-size: 13px;
-  font-weight: 600;
-  color: $sub;
+  font-size: 13px; // Compact: was 14px
+  font-weight: 700;
+  color: $text-sub;
   text-align: left;
-  transition: color 0.15s;
+  transition: all 0.2s ease;
 
   mat-icon {
     font-size: 16px;
     height: 16px;
     width: 16px;
-    color: $sub;
+    color: $text-muted;
+    transition: color 0.2s;
   }
 
   .chevron {
@@ -916,53 +553,72 @@ $font:
     font-size: 18px;
     height: 18px;
     width: 18px;
+    color: $text-muted;
     transition: transform 0.2s;
   }
 
   &.expanded {
-    color: $primary;
+    color: $primary-dark;
 
     mat-icon {
-      color: $primary;
+      color: $primary-dark;
     }
   }
 
   &:hover {
-    color: $text;
+    color: $text-main;
+
+    mat-icon {
+      color: $text-main;
+    }
   }
 }
 
 .meeting-count-badge {
   background: $primary;
   color: #fff;
-  font-size: 10px;
+  font-size: 9px;
   font-weight: 700;
-  padding: 1px 6px;
-  border-radius: 10px;
-  min-width: 18px;
+  padding: 1px 5px;
+  border-radius: $radius-pill;
+  min-width: 15px;
   text-align: center;
+  box-shadow: 0 2px 4px rgb(99 102 241 / 25%);
 }
 
 .meetings-panel {
-  padding: 4px 0 8px;
+  padding: 2px 0 10px;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 10px; // Compact: was 12px
+  animation: slide-down 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+@keyframes slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 .btn-schedule {
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  padding: 6px 12px;
-  border: 1px dashed #a5b4fc;
+  padding: 6px 12px; // Compact: was 8px 16px
+  border: 1.5px dashed rgb(99 102 241 / 30%);
   border-radius: 8px;
-  background: rgb(99 102 241 / 4%);
-  color: $primary;
-  font-size: 12px;
-  font-weight: 600;
+  background: rgb(99 102 241 / 3%);
+  color: $primary-dark;
+  font-size: 11px; // Compact: was 12px
+  font-weight: 650;
   cursor: pointer;
-  transition: all 0.15s;
+  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
   align-self: flex-start;
 
   mat-icon {
@@ -972,8 +628,9 @@ $font:
   }
 
   &:hover {
-    background: rgb(99 102 241 / 10%);
+    background: rgb(99 102 241 / 6%);
     border-color: $primary;
+    box-shadow: $shadow-glow;
   }
 }
 
@@ -981,9 +638,12 @@ $font:
   display: flex;
   align-items: center;
   gap: 6px;
-  padding: 10px 0;
+  padding: 10px 12px; // Compact
   font-size: 12px;
-  color: #94a3b8;
+  color: $text-muted;
+  background: rgb(241 245 249 / 40%);
+  border-radius: 8px;
+  border: 1px solid rgb(226 232 240 / 40%);
 
   mat-icon {
     font-size: 16px;
@@ -995,24 +655,31 @@ $font:
 .meeting-list {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 8px;
 }
 
 .meeting-row {
   display: flex;
   align-items: flex-start;
-  gap: 8px;
-  padding: 8px 10px;
+  gap: 10px;
+  padding: 10px 12px; // Compact: was 12px 14px
   background: #f8fafc;
-  border-radius: 8px;
-  border: $border;
+  border-radius: 10px; // Compact: was 12px
+  border: 1px solid #e2e8f0;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: #f1f5f9;
+    border-color: #cbd5e1;
+    transform: translateX(1px);
+  }
 }
 
 .meeting-mode-icon {
-  width: 28px;
-  height: 28px;
+  width: 28px; // Compact: was 32px
+  height: 28px; // Compact: was 32px
   border-radius: 8px;
-  background: rgb(99 102 241 / 10%);
+  background: rgb(99 102 241 / 6%);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1033,55 +700,61 @@ $font:
 
 .meeting-title {
   display: block;
-  font-size: 13px;
-  font-weight: 600;
-  color: $text;
+  font-size: 13px; // Compact: was 14px
+  font-weight: 700;
+  color: $text-main;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  margin-bottom: 2px;
 }
 
 .meeting-meta-row {
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 5px;
   flex-wrap: wrap;
-  margin-top: 3px;
-  font-size: 11px;
-  color: $sub;
+  font-size: 11px; // Compact: was 12px
+  color: $text-sub;
+  font-weight: 500;
 
   .meta-icon {
-    font-size: 11px;
-    height: 11px;
-    width: 11px;
+    font-size: 12px;
+    height: 12px;
+    width: 12px;
+    color: $text-muted;
   }
 
   .meta-sep {
     color: #cbd5e1;
+    font-weight: 300;
   }
 }
 
 .meeting-status-chip {
-  font-size: 9px;
-  font-weight: 700;
+  font-size: 8px;
+  font-weight: 750;
   padding: 1px 6px;
-  border-radius: 8px;
+  border-radius: 5px;
   text-transform: uppercase;
-  letter-spacing: 0.3px;
+  letter-spacing: 0.4px;
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 15%);
 }
 
 .meeting-platform-row {
   display: flex;
   align-items: center;
-  gap: 4px;
-  margin-top: 3px;
+  gap: 5px;
+  margin-top: 4px;
   font-size: 11px;
-  color: $sub;
+  color: $text-sub;
+  font-weight: 500;
 
   .meta-icon {
-    font-size: 11px;
-    height: 11px;
-    width: 11px;
+    font-size: 12px;
+    height: 12px;
+    width: 12px;
+    color: $text-muted;
   }
 }
 
@@ -1089,11 +762,15 @@ $font:
   display: inline-flex;
   align-items: center;
   gap: 2px;
-  color: $primary;
+  color: $primary-dark;
   font-size: 11px;
-  font-weight: 600;
+  font-weight: 700;
   text-decoration: none;
   margin-left: 4px;
+  padding: 1px 6px;
+  border-radius: 5px;
+  background: rgb(99 102 241 / 5%);
+  transition: all 0.2s;
 
   mat-icon {
     font-size: 11px;
@@ -1102,20 +779,22 @@ $font:
   }
 
   &:hover {
-    text-decoration: underline;
+    background: rgb(99 102 241 / 10%);
+    text-decoration: none;
+    box-shadow: $shadow-sm;
   }
 }
 
 .meeting-actions {
   display: flex;
   align-items: center;
-  gap: 2px;
+  gap: 3px;
   flex-shrink: 0;
 }
 
 .btn-icon {
-  width: 24px;
-  height: 24px;
+  width: 24px; // Compact: was 28px
+  height: 24px; // Compact: was 28px
   border-radius: 6px;
   border: none;
   background: none;
@@ -1123,8 +802,69 @@ $font:
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  color: $sub;
-  transition: all 0.15s;
+  color: $text-sub;
+  transition: all 0.2s;
+
+  mat-icon {
+    font-size: 14px;
+    height: 14px;
+    width: 14px;
+  }
+
+  &:hover {
+    background: #e2e8f0;
+    color: $text-main;
+  }
+
+  &.green:hover {
+    background: #dcfce7;
+    color: #10b981;
+  }
+
+  &.red:hover {
+    background: #fee2e2;
+    color: #f59e0b;
+  }
+
+  &.danger:hover {
+    background: rgb(239 68 68 / 10%);
+    color: #ef4444;
+  }
+
+  &.purple:hover {
+    background: rgb(124 58 237 / 10%);
+    color: #7c3aed;
+  }
+}
+
+// ── Card Actions (Bottom) ────────────────────────────────────────────
+.card-actions {
+  display: flex;
+  gap: 10px;
+  margin-top: auto;
+  border-top: $border-glass;
+  padding-top: 12px;
+}
+
+.btn-edit,
+.btn-dissolve {
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  padding: 8px 0; // Compact: was 10px
+  border-radius: 8px; // Compact: was 10px
+  font-size: 12px; // Compact: was 13px
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.btn-edit {
+  border: 1px solid #e2e8f0;
+  background: #fff;
+  color: $text-sub;
 
   mat-icon {
     font-size: 14px;
@@ -1134,28 +874,509 @@ $font:
 
   &:hover {
     background: #f1f5f9;
-    color: $text;
-  }
-
-  &.green:hover {
-    background: #dcfce7;
-    color: #10b981;
-  }
-
-  &.red:hover {
-    background: #fef9c3;
-    color: #f59e0b;
-  }
-
-  &.danger:hover {
-    background: #fee2e2;
-    color: #ef4444;
+    color: $text-main;
+    border-color: #cbd5e1;
+    box-shadow: $shadow-sm;
   }
 }
 
-// ── Meeting Drawer ────────────────────────────────────────────────
+.btn-dissolve {
+  border: 1px solid rgb(239 68 68 / 15%);
+  background: rgb(239 68 68 / 1%);
+  color: #ef4444;
+
+  mat-icon {
+    font-size: 14px;
+    height: 14px;
+    width: 14px;
+  }
+
+  &:hover {
+    background: rgb(239 68 68 / 6%);
+    border-color: #ef4444;
+    box-shadow: 0 3px 8px rgb(239 68 68 / 8%);
+  }
+}
+
+.dissolved-label {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 12px;
+  font-weight: 700;
+  color: $text-muted;
+  background: rgb(148 163 184 / 6%);
+  padding: 5px 12px;
+  border-radius: 6px;
+
+  mat-icon {
+    font-size: 16px;
+    height: 16px;
+    width: 16px;
+  }
+}
+
+// ── Overlays, Drawers and Modals (Glassmorphic) ──────────────────────
+.overlay {
+  position: fixed;
+  inset: 0;
+  background: rgb(15 23 42 / 30%); // Less dark overlay
+  z-index: 100;
+  backdrop-filter: blur(6px);
+  animation: fade-in 0.3s ease forwards;
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.form-drawer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 410px; // Compact: was 480px
+  max-width: 100vw;
+  background: rgb(255 255 255 / 95%);
+  backdrop-filter: blur(20px);
+  z-index: 101;
+  display: flex;
+  flex-direction: column;
+  box-shadow: -8px 0 30px rgb(15 23 42 / 12%);
+  border-left: $border-glass;
+  animation: slide-in-right 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+@keyframes slide-in-right {
+  from {
+    transform: translateX(100%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+.drawer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 18px 20px; // Compact: was 24px
+  border-bottom: $border-glass;
+  flex-shrink: 0;
+
+  h3 {
+    font-size: 17px; // Compact: was 20px
+    font-weight: 800;
+    margin: 0;
+    background: linear-gradient(135deg, $text-main 0%, $accent-dark 100%);
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+}
+
+.close-btn {
+  width: 30px; // Compact: was 36px
+  height: 30px; // Compact: was 36px
+  border-radius: 50%;
+  border: none;
+  background: #f1f5f9;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: $text-sub;
+  transition: all 0.2s;
+
+  mat-icon {
+    font-size: 18px; // Compact: was 20px
+    height: 18px;
+    width: 18px;
+  }
+
+  &:hover {
+    background: #e2e8f0;
+    color: $text-main;
+    transform: rotate(90deg);
+  }
+}
+
+.drawer-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px; // Compact: was 24px
+  display: flex;
+  flex-direction: column;
+  gap: 16px; // Compact: was 20px
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgb(99 102 241 / 20%);
+    border-radius: 2px;
+  }
+}
+
+// ── Image Upload Component ───────────────────────────────────────────
+.image-upload-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 0;
+}
+
+.image-upload-ring {
+  width: 90px; // Compact: was 110px
+  height: 90px; // Compact: was 110px
+  border-radius: 50%;
+  border: 2px dashed #cbd5e1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.25s ease;
+  background: #f8fafc;
+  box-shadow: inset 0 2px 4px rgb(0 0 0 / 3%);
+
+  &:hover {
+    border-color: $primary;
+    background: rgb(99 102 241 / 3%);
+    box-shadow: $shadow-glow;
+
+    .upload-overlay {
+      opacity: 1;
+    }
+  }
+}
+
+.upload-preview {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+.upload-overlay {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: rgb(15 23 42 / 60%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  opacity: 0;
+  transition: opacity 0.25s;
+
+  mat-icon {
+    color: #fff;
+    font-size: 20px;
+    height: 20px;
+    width: 20px;
+  }
+
+  .view-icon {
+    font-size: 18px;
+    height: 18px;
+    width: 18px;
+    opacity: 0.85;
+    cursor: zoom-in;
+
+    &:hover {
+      opacity: 1;
+      transform: scale(1.1);
+    }
+  }
+}
+
+.upload-placeholder-icon {
+  font-size: 26px; // Compact: was 32px
+  height: 26px;
+  width: 26px;
+  color: $text-muted;
+  margin-bottom: 2px;
+}
+
+.upload-placeholder-text {
+  font-size: 10px;
+  font-weight: 700;
+  color: $text-muted;
+  letter-spacing: 0.4px;
+}
+
+.btn-remove-image {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 5px 12px; // Compact
+  border: 1px solid rgb(239 68 68 / 20%);
+  border-radius: 16px;
+  background: #fff;
+  font-size: 11px;
+  font-weight: 600;
+  color: #ef4444;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  mat-icon {
+    font-size: 13px;
+    height: 13px;
+    width: 13px;
+  }
+
+  &:hover {
+    background: rgb(239 68 68 / 5%);
+    box-shadow: $shadow-sm;
+  }
+}
+
+// ── Interactive Form Controls ───────────────────────────────────────
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  label {
+    font-size: 10px; // Compact: was 11px
+    font-weight: 700;
+    color: $text-sub;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  input,
+  textarea {
+    padding: 10px 12px; // Compact: was 12px 14px
+    border: 1.5px solid #e2e8f0;
+    border-radius: 8px;
+    font-size: 13px; // Compact: was 14px
+    color: $text-main;
+    font-family: $font-family;
+    outline: none;
+    transition: all 0.2s ease;
+    background: #fff;
+
+    &:focus {
+      border-color: $primary;
+      box-shadow: 0 0 0 3px rgb(99 102 241 / 8%);
+    }
+
+    &.input-error {
+      border-color: #ef4444;
+
+      &:focus {
+        box-shadow: 0 0 0 3px rgb(239 68 68 / 8%);
+      }
+    }
+  }
+}
+
+.error-msg {
+  font-size: 11px;
+  color: #ef4444;
+  margin-top: 1px;
+  font-weight: 500;
+}
+
+.req {
+  color: #ef4444;
+  margin-left: 2px;
+}
+
+.section-title {
+  font-size: 10px; // Compact: was 11px
+  font-weight: 850;
+  color: $text-sub;
+  text-transform: uppercase;
+  letter-spacing: 0.7px;
+  padding-bottom: 6px;
+  border-bottom: $border-glass;
+  margin-top: 6px;
+}
+
+// ── Director Select List (Interactive Cards) ─────────────────────────
+.director-select-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.director-option {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px; // Compact: was 12px 14px
+  border: 1.5px solid #e2e8f0;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  background: #fff;
+
+  &:hover {
+    border-color: $primary;
+    background: rgb(99 102 241 / 2%);
+  }
+
+  &.selected {
+    border-color: $primary;
+    background: rgb(99 102 241 / 4%);
+    box-shadow: 0 3px 8px rgb(99 102 241 / 3%);
+  }
+}
+
+.dir-avatar {
+  width: 34px; // Compact: was 42px
+  height: 34px; // Compact: was 42px
+  border-radius: 50%;
+  background: linear-gradient(135deg, $primary-light 0%, $accent 100%);
+  color: #fff;
+  font-size: 14px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  overflow: hidden;
+  box-shadow: $shadow-sm;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.dir-info {
+  flex: 1;
+  min-width: 0;
+
+  .dir-name {
+    display: block;
+    font-size: 13px; // Compact: was 14px
+    font-weight: 700;
+    color: $text-main;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .dir-desig {
+    display: block;
+    font-size: 10px;
+    color: $text-sub;
+    margin-top: 1px;
+    font-weight: 500;
+  }
+}
+
+.dir-check {
+  flex-shrink: 0;
+
+  .check-icon {
+    font-size: 18px; // Compact: was 22px
+    height: 18px;
+    width: 18px;
+    color: $primary;
+  }
+
+  .uncheck-icon {
+    font-size: 18px; // Compact: was 22px
+    height: 18px;
+    width: 18px;
+    color: #cbd5e1;
+  }
+}
+
+.selected-count {
+  font-size: 12px;
+  font-weight: 700;
+  color: $primary-dark;
+  text-align: right;
+  margin-top: 2px;
+}
+
+// ── Drawer Footer ────────────────────────────────────────────────────
+.drawer-footer {
+  display: flex;
+  gap: 10px;
+  padding: 14px 20px; // Compact: was 20px 24px
+  border-top: $border-glass;
+  flex-shrink: 0;
+  background: #fafbfe;
+}
+
+.btn-cancel {
+  flex: 1;
+  padding: 10px;
+  border: 1.5px solid #e2e8f0;
+  border-radius: 10px;
+  background: #fff;
+  font-size: 13px;
+  font-weight: 700;
+  color: $text-sub;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    background: #f1f5f9;
+    color: $text-main;
+    border-color: #cbd5e1;
+  }
+}
+
+.btn-save {
+  flex: 2;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 10px;
+  border: none;
+  border-radius: 10px;
+  background: linear-gradient(135deg, $primary 0%, $primary-dark 100%);
+  color: #fff;
+  font-size: 13px;
+  font-weight: 700;
+  cursor: pointer;
+  box-shadow: 0 3px 10px rgb(99 102 241 / 20%);
+  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+
+  mat-icon {
+    font-size: 16px;
+    height: 16px;
+    width: 16px;
+  }
+
+  &:hover:not(:disabled) {
+    transform: translateY(-1px);
+    box-shadow: 0 5px 14px rgb(99 102 241 / 25%);
+  }
+
+  &:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+}
+
+// ── Meeting Drawer specific sizing ───────────────────────────────────
 .meeting-drawer {
-  width: 500px;
+  width: 440px; // Compact: was 520px
 }
 
 .mode-toggle {
@@ -1170,14 +1391,14 @@ $font:
   justify-content: center;
   gap: 6px;
   padding: 10px;
-  border: $border;
+  border: 1.5px solid #e2e8f0;
   border-radius: 10px;
   background: #fff;
-  font-size: 13px;
-  font-weight: 600;
-  color: $sub;
+  font-size: 12px;
+  font-weight: 700;
+  color: $text-sub;
   cursor: pointer;
-  transition: all 0.15s;
+  transition: all 0.2s ease;
 
   mat-icon {
     font-size: 16px;
@@ -1187,38 +1408,39 @@ $font:
 
   &.active {
     border-color: $primary;
-    background: rgb(99 102 241 / 6%);
+    background: rgb(99 102 241 / 5%);
     color: $primary;
   }
 
   &:hover:not(.active) {
     background: #f8fafc;
+    border-color: #cbd5e1;
   }
 }
 
 .mode-fields-group {
   display: flex;
   flex-direction: column;
-  gap: 12px;
-  padding: 14px;
+  gap: 10px;
+  padding: 12px;
   border-radius: 10px;
-  border: $border;
+  border: 1.5px solid rgb(226 232 240 / 80%);
   background: #f8fafc;
 }
 
 .mode-label {
   display: flex;
   align-items: center;
-  gap: 6px;
-  font-size: 11px;
-  font-weight: 700;
+  gap: 4px;
+  font-size: 10px;
+  font-weight: 800;
   text-transform: uppercase;
-  letter-spacing: 0.5px;
+  letter-spacing: 0.6px;
 
   mat-icon {
-    font-size: 15px;
-    height: 15px;
-    width: 15px;
+    font-size: 14px;
+    height: 14px;
+    width: 14px;
   }
 
   &.online-label {
@@ -1241,10 +1463,10 @@ $font:
 .form-row-2 {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 12px;
+  gap: 10px;
 }
 
-// ── Agenda Items ──────────────────────────────────────────────────
+// ── Agenda Items list design ─────────────────────────────────────────
 .agenda-list {
   display: flex;
   flex-direction: column;
@@ -1259,8 +1481,9 @@ $font:
 
   .agenda-num {
     font-size: 12px;
-    color: #94a3b8;
-    min-width: 18px;
+    font-weight: 700;
+    color: $text-muted;
+    min-width: 16px;
     text-align: right;
     flex-shrink: 0;
   }
@@ -1281,16 +1504,16 @@ $font:
   justify-content: center;
   border-radius: 6px;
   flex-shrink: 0;
-  transition: background 0.15s;
+  transition: all 0.2s;
 
   mat-icon {
-    font-size: 20px;
-    height: 20px;
-    width: 20px;
+    font-size: 18px;
+    height: 18px;
+    width: 18px;
   }
 
   &:hover {
-    background: #fef2f2;
+    background: rgb(239 68 68 / 6%);
   }
 }
 
@@ -1299,16 +1522,15 @@ $font:
   align-items: center;
   gap: 4px;
   background: none;
-  border: 1px dashed #cbd5e1;
+  border: 1.5px dashed #cbd5e1;
   border-radius: 8px;
   cursor: pointer;
-  color: #6366f1;
+  color: $primary-dark;
   padding: 6px 12px;
-  font-size: 12px;
-  font-weight: 600;
-  transition:
-    border-color 0.15s,
-    background 0.15s;
+  font-size: 11px;
+  font-weight: 700;
+  transition: all 0.2s;
+  align-self: flex-start;
 
   mat-icon {
     font-size: 16px;
@@ -1317,33 +1539,406 @@ $font:
   }
 
   &:hover {
-    border-color: #6366f1;
-    background: #eef2ff;
+    border-color: $primary;
+    background: rgb(99 102 241 / 3%);
   }
 }
 
-.meeting-agenda-preview {
+// ── Vote Summary & Resolution Modal (Glassmorphic) ───────────────────
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgb(15 23 42 / 30%);
+  z-index: 200;
+  backdrop-filter: blur(6px);
+}
+
+.vote-modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 201;
+  width: min(840px, calc(100vw - 24px)); // Compact: was 920px
+  max-height: calc(100vh - 48px); // Compact
+  background: rgb(255 255 255 / 95%);
+  backdrop-filter: blur(24px);
+  border-radius: 16px; // Compact: was 24px
+  box-shadow: 0 20px 50px rgb(15 23 42 / 20%);
+  border: $border-glass;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation: zoom-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+}
+
+@keyframes zoom-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -46%) scale(0.96);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+.vm-header {
   display: flex;
   align-items: center;
-  gap: 4px;
-  font-size: 12px;
-  color: #64748b;
-  margin-top: 2px;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 18px; // Compact: was 20px 24px
+  background: linear-gradient(135deg, rgb(99 102 241 / 8%) 0%, rgb(168 85 247 / 8%) 100%);
+  border-bottom: 1px solid rgb(124 58 237 / 15%);
+  flex-shrink: 0;
 
-  .meta-icon {
+  .vm-header-left {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .vm-icon {
+    font-size: 24px; // Compact: was 28px
+    width: 24px;
+    height: 24px;
+    color: $accent-dark;
+    flex-shrink: 0;
+  }
+
+  .vm-title {
+    font-size: 15px; // Compact: was 18px
+    font-weight: 800;
+    color: $text-main;
+    line-height: 1.2;
+  }
+
+  .vm-subtitle {
+    font-size: 11px; // Compact: was 13px
+    font-weight: 600;
+    color: $accent-dark;
+    margin-top: 2px;
+  }
+
+  .vm-header-right {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-shrink: 0;
+  }
+}
+
+.vm-close {
+  width: 28px; // Compact: was 32px
+  height: 28px;
+  border-radius: 50%;
+  border: none;
+  background: rgb(15 23 42 / 6%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: $text-sub;
+  flex-shrink: 0;
+  transition: all 0.2s;
+
+  mat-icon {
+    font-size: 16px;
+    width: 16px;
+    height: 16px;
+  }
+
+  &:hover {
+    background: rgb(15 23 42 / 12%);
+    color: $text-main;
+    transform: rotate(90deg);
+  }
+}
+
+.vm-body {
+  flex: 1;
+  overflow-y: auto;
+  min-height: 0;
+  padding: 16px; // Compact: was 24px
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); // Compact
+  gap: 14px; // Compact: was 20px
+  align-content: start;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgb(124 58 237 / 20%);
+    border-radius: 2px;
+  }
+}
+
+.vm-footer {
+  display: flex;
+  gap: 10px;
+  padding: 12px 18px; // Compact: was 16px 24px
+  border-top: 1px solid #e2e8f0;
+  flex-shrink: 0;
+  background: #fafbfe;
+  justify-content: flex-end;
+}
+
+.btn-resend {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 12px; // Compact: was 8px 16px
+  background: linear-gradient(135deg, $accent 0%, $accent-dark 100%);
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  font-size: 11px; // Compact
+  font-weight: 700;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all 0.25s;
+  box-shadow: 0 3px 8px rgb(168 85 247 / 15%);
+
+  mat-icon {
     font-size: 14px;
-    height: 14px;
     width: 14px;
+    height: 14px;
+  }
+
+  &:hover:not(:disabled) {
+    transform: translateY(-1px);
+    box-shadow: 0 5px 12px rgb(168 85 247 / 25%);
+  }
+
+  &:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+}
+
+.vote-item-card {
+  background: #fff;
+  border: 1.5px solid #e2e8f0;
+  border-radius: 12px; // Compact
+  box-shadow: $shadow-sm;
+  overflow: hidden;
+  transition: all 0.25s ease;
+  display: flex;
+  flex-direction: column;
+
+  &:hover {
+    border-color: rgb(124 58 237 / 20%);
+    box-shadow: $shadow-md;
+  }
+
+  .vi-header {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    padding: 12px; // Compact: was 16px
+    background: #f8fafc;
+    border-bottom: 1.5px solid #e2e8f0;
+
+    .vi-num {
+      background: $accent-dark;
+      color: #fff;
+      border-radius: 50%;
+      width: 20px; // Compact: was 24px
+      height: 20px; // Compact: was 24px
+      min-width: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 10px; // Compact
+      font-weight: 700;
+      box-shadow: 0 2px 4px rgb(124 58 237 / 20%);
+    }
+
+    .vi-label {
+      font-size: 12px; // Compact: was 14px
+      font-weight: 700;
+      color: $text-main;
+      line-height: 1.4;
+    }
+  }
+}
+
+.vote-counts {
+  display: flex;
+  gap: 6px;
+  padding: 10px 12px; // Compact: was 14px 16px
+  flex-wrap: wrap;
+  border-bottom: 1px solid #f1f5f9;
+
+  .vc {
+    display: flex;
+    align-items: center;
+    gap: 3px;
+    font-size: 11px; // Compact: was 12px
+    font-weight: 700;
+    padding: 3px 8px; // Compact
+    border-radius: 20px;
+    box-shadow: inset 0 1px 0 rgb(255 255 255 / 15%);
+
+    mat-icon {
+      font-size: 12px;
+      width: 12px;
+      height: 12px;
+    }
+
+    &.approved {
+      background: #dcfce7;
+      color: #15803d;
+    }
+
+    &.rejected {
+      background: #fee2e2;
+      color: #b91c1c;
+    }
+
+    &.abstain {
+      background: #fef3c7;
+      color: #b45309;
+    }
+
+    &.pending {
+      background: #f1f5f9;
+      color: #475569;
+    }
+  }
+}
+
+.resolution-row {
+  padding: 10px 12px 6px; // Compact
+
+  .res-label {
+    font-size: 10px; // Compact
+    font-weight: 800;
+    color: $text-sub;
+    letter-spacing: 0.5px;
+    text-transform: uppercase;
+    display: block;
+    margin-bottom: 8px;
+  }
+
+  .res-buttons {
+    display: flex;
+    gap: 6px;
+    flex-wrap: wrap;
+  }
+}
+
+.btn-res {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  padding: 6px 10px; // Compact
+  border-radius: 6px;
+  border: 1.5px solid #e2e8f0;
+  background: #fff;
+  font-size: 11px; // Compact
+  font-weight: 700;
+  cursor: pointer;
+  color: $text-sub;
+  transition: all 0.2s ease;
+
+  mat-icon {
+    font-size: 14px;
+    width: 14px;
+    height: 14px;
+  }
+
+  &:hover {
+    background: #f8fafc;
+    border-color: #cbd5e1;
+  }
+
+  &.approve.active {
+    background: rgb(16 185 129 / 10%);
+    border-color: #10b981;
+    color: #10b981;
+  }
+
+  &.reject.active {
+    background: rgb(239 68 68 / 10%);
+    border-color: #ef4444;
+    color: #ef4444;
+  }
+
+  &.defer.active {
+    background: rgb(245 158 11 / 10%);
+    border-color: #f59e0b;
+    color: #f59e0b;
+  }
+}
+
+.notes-row {
+  padding: 4px 12px 12px; // Compact
+
+  .notes-input {
+    width: 100%;
+    padding: 8px 10px;
+    font-size: 12px; // Compact
+    border: 1.5px solid #e2e8f0;
+    border-radius: 8px; // Compact
+    resize: vertical;
+    font-family: inherit;
+    color: $text-main;
+    background: #fff;
+    box-sizing: border-box;
+    transition: border-color 0.2s;
+
+    &:focus {
+      outline: none;
+      border-color: $accent;
+      box-shadow: 0 0 0 3px rgb(168 85 247 / 8%);
+    }
+  }
+}
+
+.purple-btn {
+  background: linear-gradient(135deg, $accent 0%, $accent-dark 100%) !important;
+  color: #fff !important;
+  border: none !important;
+
+  &:hover:not(:disabled) {
+    background: linear-gradient(135deg, #be185d 0%, $accent-dark 100%) !important;
+    transform: translateY(-1px);
+    box-shadow: 0 3px 10px rgb(124 58 237 / 25%);
+  }
+}
+
+// ── Responsive Layout Adaptations ────────────────────────────────────
+@media (width <= 900px) {
+  .vm-body {
+    grid-template-columns: 1fr;
   }
 }
 
 @media (width <= 600px) {
   .committee-page {
-    padding: 16px;
+    padding: 16px; // Compact
   }
 
   .committees-grid {
     grid-template-columns: 1fr;
+    gap: 16px; // Compact
+  }
+
+  .page-header {
+    margin-bottom: 20px;
+
+    h2 {
+      font-size: 19px;
+    }
   }
 
   .form-drawer {
diff --git a/src/app/election/components/committee-board/committee-board.component.ts b/src/app/election/components/committee-board/committee-board.component.ts
index 39fadb4af..b001e022b 100644
--- a/src/app/election/components/committee-board/committee-board.component.ts
+++ b/src/app/election/components/committee-board/committee-board.component.ts
@@ -68,8 +68,23 @@ export class CommitteeBoardComponent implements OnInit {
   meetingErrors: Record<string, string> = {};
   readonly todayDate: string = new Date().toISOString().split('T')[0];
 
+  resendingVoteEmails = false;
+
+  mandatoryDesignations: string[] = [];
+
+  // vote summary / resolution drawer state
+  showVotePanel = false;
+  votePanelMeeting: any = null;
+  voteSummary: any[] = [];
+  voteSummaryLoading = false;
+  resolutionForm: Record<number, { resolution: string; discussionNotes: string }> = {};
+  savingResolutions = false;
+
   ngOnInit(): void {
     this.load();
+    this.service.getDesignations().subscribe((data: any[]) => {
+      this.mandatoryDesignations = (data ?? []).filter((d: any) => d.mandatory).map((d: any) => d.name);
+    });
   }
 
   load(): void {
@@ -208,6 +223,17 @@ export class CommitteeBoardComponent implements OnInit {
     this.submitted = true;
     if (!this.form.name?.trim()) return;
 
+    // Mandatory designations (e.g. Chairman, Vice Chairman) required for new committee
+    if (this.editingId == null && this.mandatoryDesignations.length > 0) {
+      const selected = this.availableDirectors.filter((d: any) => this.form.selectedIds.includes(d.id));
+      const presentDesignations = new Set(selected.map((d: any) => d.designation));
+      const missing = this.mandatoryDesignations.filter((des) => !presentDesignations.has(des));
+      if (missing.length > 0) {
+        this.snackBar.open(`Committee must include an active ${missing.join(' and ')}.`, 'Close', { duration: 5000 });
+        return;
+      }
+    }
+
     this.saving = true;
     const payload = {
       name: this.form.name.trim(),
@@ -598,6 +624,112 @@ export class CommitteeBoardComponent implements OnInit {
     w.focus();
   }
 
+  sendVotingEmailsDirect(meeting: any, event: MouseEvent): void {
+    event.stopPropagation();
+    this.service.resendVotingEmails(meeting.id).subscribe({
+      next: () => this.snackBar.open('Voting emails sent to all members!', 'Close', { duration: 4000 }),
+      error: () => this.snackBar.open('Failed to send voting emails.', 'Close', { duration: 3000 })
+    });
+  }
+
+  resendVotingEmails(event: MouseEvent): void {
+    event.stopPropagation();
+    if (this.resendingVoteEmails || !this.votePanelMeeting) return;
+    this.resendingVoteEmails = true;
+    this.service.resendVotingEmails(this.votePanelMeeting.id).subscribe({
+      next: () => {
+        this.resendingVoteEmails = false;
+        this.snackBar.open('Voting emails sent to all committee members.', 'Close', { duration: 4000 });
+      },
+      error: () => {
+        this.resendingVoteEmails = false;
+        this.snackBar.open('Failed to send voting emails.', 'Close', { duration: 3000 });
+      }
+    });
+  }
+
+  openVotePanel(meeting: any, event: MouseEvent): void {
+    event.stopPropagation();
+    this.votePanelMeeting = meeting;
+    this.showVotePanel = true;
+    this.voteSummary = [];
+    this.resolutionForm = {};
+    this.voteSummaryLoading = true;
+    this.service.getVoteSummary(meeting.id).subscribe({
+      next: (data) => {
+        this.voteSummary = data ?? [];
+        this.resolutionForm = {};
+        for (const item of this.voteSummary) {
+          this.resolutionForm[item.agendaId] = {
+            resolution: item.resolution ?? '',
+            discussionNotes: item.discussionNotes ?? ''
+          };
+        }
+        this.voteSummaryLoading = false;
+      },
+      error: () => {
+        this.voteSummaryLoading = false;
+        this.snackBar.open('Failed to load vote summary.', 'Close', { duration: 3000 });
+      }
+    });
+  }
+
+  closeVotePanel(): void {
+    this.showVotePanel = false;
+    this.votePanelMeeting = null;
+    this.voteSummary = [];
+  }
+
+  saveResolutions(): void {
+    if (this.savingResolutions) return;
+    const meetingId = this.votePanelMeeting?.id;
+    if (!meetingId) return;
+
+    const payload = Object.entries(this.resolutionForm)
+      .filter(
+        ([
+          ,
+          v
+        ]) => v.resolution
+      )
+      .map(
+        ([
+          agendaId,
+          v
+        ]) => ({
+          agendaId: Number(agendaId),
+          resolution: v.resolution,
+          discussionNotes: v.discussionNotes
+        })
+      );
+
+    if (!payload.length) {
+      this.snackBar.open('Please set at least one resolution.', 'Close', { duration: 3000 });
+      return;
+    }
+
+    this.savingResolutions = true;
+    this.service.saveResolutions(meetingId, payload).subscribe({
+      next: () => {
+        this.savingResolutions = false;
+        this.snackBar.open('Resolutions saved and meeting minutes sent to all members.', 'Close', { duration: 4000 });
+        this.closeVotePanel();
+      },
+      error: () => {
+        this.savingResolutions = false;
+        this.snackBar.open('Failed to save resolutions.', 'Close', { duration: 3000 });
+      }
+    });
+  }
+
+  resolutionIcon(r: string): string {
+    return r === 'APPROVED' ? 'check_circle' : r === 'REJECTED' ? 'cancel' : 'pause_circle';
+  }
+
+  resolutionColor(r: string): string {
+    return r === 'APPROVED' ? '#16a34a' : r === 'REJECTED' ? '#dc2626' : '#d97706';
+  }
+
   private emptyForm(): any {
     return { name: '', description: '', image: null, selectedIds: [] };
   }
diff --git a/src/app/election/components/director-board/director-board.component.ts b/src/app/election/components/director-board/director-board.component.ts
index b4b9a2760..75fec1369 100644
--- a/src/app/election/components/director-board/director-board.component.ts
+++ b/src/app/election/components/director-board/director-board.component.ts
@@ -96,19 +96,18 @@ export class DirectorBoardComponent implements OnInit {
 
   readonly today: Date = new Date();
 
-  designationOptions = [
-    'Chairman',
-    'Vice Chairman',
-    'Secretary',
-    'Treasurer',
-    'Director',
-    'Managing Director',
-    'Chief Executive Officer'
-  ];
+  designationOptions: string[] = [];
 
   ngOnInit(): void {
     this.load();
     this.loadPending();
+    this.loadDesignations();
+  }
+
+  loadDesignations(): void {
+    this.service.getDesignations().subscribe((data: any[]) => {
+      this.designationOptions = (data ?? []).map((d: any) => d.name);
+    });
   }
 
   loadPending(): void {
diff --git a/src/app/election/components/meeting-vote/meeting-vote.component.html b/src/app/election/components/meeting-vote/meeting-vote.component.html
new file mode 100644
index 000000000..ecdcb659a
--- /dev/null
+++ b/src/app/election/components/meeting-vote/meeting-vote.component.html
@@ -0,0 +1,212 @@
+<!--
+  Copyright since 2025 Mifos Initiative
+
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at http://mozilla.org/MPL/2.0/.
+-->
+<!-- Public voting page — no shell/navbar — single viewport height -->
+<div class="vote-page">
+  <!-- Loading -->
+  @if (loading) {
+    <div class="state-center">
+      <mat-spinner diameter="48"></mat-spinner>
+      <p>Loading meeting details…</p>
+    </div>
+  }
+
+  <!-- Error / invalid token -->
+  @if (!loading && error && !page) {
+    <div class="state-center">
+      <div class="state-card error-card">
+        <mat-icon class="state-icon error">link_off</mat-icon>
+        <h2>Link Invalid or Expired</h2>
+        <p>{{ error }}</p>
+        <p class="hint">Please contact your committee administrator if you believe this is a mistake.</p>
+      </div>
+    </div>
+  }
+
+  <!-- Voting closed / already submitted -->
+  @if (!loading && page && (page.votingClosed || submitted)) {
+    <div class="state-center">
+      <div class="state-card success-card">
+        <mat-icon class="state-icon success">check_circle</mat-icon>
+        <h2>{{ submitted ? 'Vote Submitted!' : 'Voting Closed' }}</h2>
+        @if (submitted) {
+          <p>
+            Thank you, <strong>{{ page.memberName }}</strong
+            >. Your votes have been recorded.
+          </p>
+        } @else {
+          <p>You have already voted or the voting period has ended.</p>
+        }
+        <div class="summary-box">
+          <div class="summary-header">{{ page.meetingTitle }}</div>
+          <div class="summary-meta">{{ page.committeeName }} &nbsp;·&nbsp; {{ page.meetingDate }}</div>
+          @for (item of page.agendaItems; track item.agendaId) {
+            <div class="summary-row">
+              <span class="item-num">{{ $index + 1 }}</span>
+              <span class="item-text">{{ item.agendaItem }}</span>
+              @if (selections[item.agendaId]) {
+                <span class="vote-badge" [class]="'badge-' + selections[item.agendaId].toLowerCase()">
+                  {{ voteLabel(selections[item.agendaId]) }}
+                </span>
+              }
+            </div>
+          }
+        </div>
+      </div>
+    </div>
+  }
+
+  <!-- Active voting form — full viewport single page -->
+  @if (!loading && page && !page.votingClosed && !submitted) {
+    <!-- Fixed header bar -->
+    <div class="vote-header">
+      <div class="vh-left">
+        <div class="vh-brand">CBSnexora · Committee Meeting</div>
+        <div class="vh-title">🗳️ Cast Your Vote</div>
+        <div class="vh-meta">{{ page.committeeName }} &nbsp;·&nbsp; {{ page.meetingDate }}</div>
+      </div>
+      <div class="vh-member">
+        <div class="vh-member-label">Voting as</div>
+        <div class="vh-member-name">{{ page.memberName }}</div>
+      </div>
+    </div>
+
+    <!-- Scrollable agenda area -->
+    <div class="vote-scroll">
+      <div class="scroll-inner">
+        <p class="subtitle">
+          Please review each agenda item from <strong>{{ page.meetingTitle }}</strong> and cast your vote.
+        </p>
+
+        @if (error) {
+          <div class="alert-error">{{ error }}</div>
+        }
+
+        <div class="agenda-list">
+          @for (item of page.agendaItems; track item.agendaId) {
+            <div class="agenda-item" [class.voted]="!!selections[item.agendaId]">
+              <div class="item-label">
+                <span class="item-num">{{ $index + 1 }}</span>
+                <span class="item-text">{{ item.agendaItem }}</span>
+                @if (selections[item.agendaId]) {
+                  <span class="vote-badge" [class]="'badge-' + selections[item.agendaId].toLowerCase()">
+                    {{ voteLabel(selections[item.agendaId]) }}
+                  </span>
+                }
+              </div>
+
+              <div class="vote-buttons">
+                <button
+                  class="btn-vote approve"
+                  [class.active]="selections[item.agendaId] === 'APPROVED'"
+                  (click)="select(item.agendaId, 'APPROVED')"
+                  type="button"
+                >
+                  ✅ Approve
+                </button>
+                <button
+                  class="btn-vote reject"
+                  [class.active]="selections[item.agendaId] === 'REJECTED'"
+                  (click)="select(item.agendaId, 'REJECTED')"
+                  type="button"
+                >
+                  ❌ Reject
+                </button>
+                <button
+                  class="btn-vote abstain"
+                  [class.active]="selections[item.agendaId] === 'ABSTAIN'"
+                  (click)="select(item.agendaId, 'ABSTAIN')"
+                  type="button"
+                >
+                  — Abstain
+                </button>
+              </div>
+
+              <!-- Remark row — shown only for Approve / Reject -->
+              @if (selections[item.agendaId] === 'APPROVED' || selections[item.agendaId] === 'REJECTED') {
+                <div class="remark-row">
+                  <textarea
+                    class="remark-input"
+                    [placeholder]="
+                      selections[item.agendaId] === 'REJECTED'
+                        ? 'कारण / Reason for rejection…'
+                        : 'टिप्पणी / Add your remark…'
+                    "
+                    [(ngModel)]="remarks[item.agendaId]"
+                    rows="2"
+                  ></textarea>
+
+                  @if (speechSupported) {
+                    <div class="remark-controls">
+                      <button
+                        class="btn-mic"
+                        [class.active]="recording === item.agendaId"
+                        (click)="toggleRecording(item.agendaId)"
+                        type="button"
+                        [title]="recording === item.agendaId ? 'Stop recording' : 'Start voice input'"
+                      >
+                        <mat-icon>{{ recording === item.agendaId ? 'stop_circle' : 'mic' }}</mat-icon>
+                        <span class="mic-label">{{ recording === item.agendaId ? 'Stop' : 'Speak' }}</span>
+                      </button>
+                      <div class="lang-toggle">
+                        <button
+                          class="btn-lang"
+                          [class.active]="recordingLang === 'hi-IN'"
+                          (click)="switchLang('hi-IN')"
+                          type="button"
+                          title="Hindi"
+                        >
+                          HI
+                        </button>
+                        <button
+                          class="btn-lang"
+                          [class.active]="recordingLang === 'en-IN'"
+                          (click)="switchLang('en-IN')"
+                          type="button"
+                          title="English"
+                        >
+                          EN
+                        </button>
+                      </div>
+                    </div>
+                  }
+                </div>
+              }
+            </div>
+          }
+        </div>
+      </div>
+    </div>
+
+    <!-- Fixed bottom bar — submit always visible -->
+    <div class="vote-bottom-bar">
+      <div class="bottom-inner">
+        <div class="progress-text">
+          @if (allVoted) {
+            <mat-icon class="prog-icon done">check_circle</mat-icon>
+            <span>All {{ page.agendaItems.length }} items voted — ready to submit</span>
+          } @else {
+            <mat-icon class="prog-icon">pending</mat-icon>
+            <span>{{ votedCount() }} of {{ page.agendaItems.length }} items voted</span>
+          }
+        </div>
+        <button class="btn-submit" [disabled]="!allVoted || submitting" (click)="submit()">
+          @if (submitting) {
+            <mat-spinner diameter="18" color="accent"></mat-spinner>
+            Submitting…
+          } @else {
+            Submit All Votes
+          }
+        </button>
+      </div>
+      <div class="bottom-footer">
+        <span>CBSnexora — Automated Voting System</span>
+        <span>Each member can vote once. Link valid for 7 days.</span>
+      </div>
+    </div>
+  }
+</div>
diff --git a/src/app/election/components/meeting-vote/meeting-vote.component.scss b/src/app/election/components/meeting-vote/meeting-vote.component.scss
new file mode 100644
index 000000000..55573e239
--- /dev/null
+++ b/src/app/election/components/meeting-vote/meeting-vote.component.scss
@@ -0,0 +1,564 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+// ── Single viewport page ──────────────────────────────────────────────────────
+.vote-page {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: #f5f6fa;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 13px;
+}
+
+// ── Header ────────────────────────────────────────────────────────────────────
+.vote-header {
+  flex-shrink: 0;
+  background: #7c3aed;
+  padding: 10px 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  box-shadow: 0 1px 8px rgb(91 33 182 / 35%);
+
+  .vh-left {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+  }
+
+  .vh-brand {
+    font-size: 9px;
+    font-weight: 700;
+    letter-spacing: 1.8px;
+    text-transform: uppercase;
+    color: rgb(255 255 255 / 50%);
+  }
+
+  .vh-title {
+    font-size: 17px;
+    font-weight: 800;
+    color: #fff;
+    line-height: 1.2;
+  }
+
+  .vh-meta {
+    font-size: 11px;
+    color: rgb(255 255 255 / 70%);
+  }
+
+  .vh-member {
+    text-align: right;
+
+    .vh-member-label {
+      font-size: 9px;
+      color: rgb(255 255 255 / 45%);
+      text-transform: uppercase;
+      letter-spacing: 1px;
+    }
+
+    .vh-member-name {
+      font-size: 13px;
+      font-weight: 700;
+      color: #fff;
+    }
+  }
+}
+
+// ── Scrollable agenda ─────────────────────────────────────────────────────────
+.vote-scroll {
+  flex: 1;
+  overflow-y: auto;
+  min-height: 0;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #f5f6fa;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #c4b5fd;
+    border-radius: 2px;
+  }
+}
+
+.scroll-inner {
+  max-width: 860px;
+  margin: 0 auto;
+  padding: 14px 24px 10px;
+
+  .subtitle {
+    margin: 0 0 12px;
+    font-size: 12px;
+    color: #64748b;
+  }
+}
+
+// ── Agenda list ───────────────────────────────────────────────────────────────
+.agenda-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.agenda-item {
+  background: #fff;
+  border: 1.5px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 10px 14px;
+  transition: border-color 0.15s;
+
+  &.voted {
+    border-color: #a78bfa;
+  }
+
+  .item-label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 8px;
+  }
+
+  .item-num {
+    background: #7c3aed;
+    color: #fff;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    min-width: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 10px;
+    font-weight: 700;
+    flex-shrink: 0;
+  }
+
+  .item-text {
+    flex: 1;
+    font-size: 13px;
+    font-weight: 600;
+    color: #1e293b;
+    line-height: 1.3;
+  }
+}
+
+.vote-buttons {
+  display: flex;
+  gap: 6px;
+  padding-left: 28px;
+}
+
+.btn-vote {
+  flex: 1;
+  padding: 6px 8px;
+  border-radius: 6px;
+  border: 1.5px solid #e2e8f0;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  background: #f8fafc;
+  color: #64748b;
+  transition: all 0.12s ease;
+  white-space: nowrap;
+
+  &:hover {
+    background: #f1f5f9;
+    border-color: #cbd5e1;
+  }
+
+  &.approve.active {
+    background: #dcfce7;
+    border-color: #16a34a;
+    color: #15803d;
+  }
+
+  &.reject.active {
+    background: #fee2e2;
+    border-color: #dc2626;
+    color: #b91c1c;
+  }
+
+  &.abstain.active {
+    background: #fef3c7;
+    border-color: #d97706;
+    color: #b45309;
+  }
+}
+
+// ── Remark row ────────────────────────────────────────────────────────────────
+.remark-row {
+  display: flex;
+  gap: 8px;
+  padding-left: 28px;
+  padding-top: 8px;
+  align-items: flex-start;
+}
+
+.remark-input {
+  flex: 1;
+  border: 1.5px solid #e2e8f0;
+  border-radius: 6px;
+  padding: 6px 10px;
+  font-size: 12px;
+  font-family: inherit;
+  color: #334155;
+  resize: none;
+  line-height: 1.4;
+  transition: border-color 0.15s;
+  background: #fafbff;
+
+  &:focus {
+    outline: none;
+    border-color: #a78bfa;
+    background: #fff;
+  }
+
+  &::placeholder {
+    color: #94a3b8;
+    font-style: italic;
+  }
+}
+
+.remark-controls {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.btn-mic {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  background: #f1f5f9;
+  border: 1.5px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 5px 8px;
+  cursor: pointer;
+  color: #64748b;
+  transition: all 0.15s;
+
+  mat-icon {
+    font-size: 18px;
+    width: 18px;
+    height: 18px;
+  }
+
+  .mic-label {
+    font-size: 9px;
+    font-weight: 700;
+    letter-spacing: 0.5px;
+  }
+
+  &:hover {
+    background: #e2e8f0;
+  }
+
+  &.active {
+    background: #fee2e2;
+    border-color: #f87171;
+    color: #dc2626;
+    animation: pulse-mic 1.2s ease-in-out infinite;
+  }
+}
+
+@keyframes pulse-mic {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 rgb(220 38 38 / 30%);
+  }
+
+  50% {
+    box-shadow: 0 0 0 5px rgb(220 38 38 / 0%);
+  }
+}
+
+.lang-toggle {
+  display: flex;
+  border: 1.5px solid #e2e8f0;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.btn-lang {
+  background: #f8fafc;
+  border: none;
+  padding: 3px 7px;
+  font-size: 9px;
+  font-weight: 700;
+  color: #94a3b8;
+  cursor: pointer;
+  transition: all 0.12s;
+  letter-spacing: 0.5px;
+
+  &:first-child {
+    border-right: 1px solid #e2e8f0;
+  }
+
+  &.active {
+    background: #7c3aed;
+    color: #fff;
+  }
+}
+
+// ── Bottom bar ────────────────────────────────────────────────────────────────
+.vote-bottom-bar {
+  flex-shrink: 0;
+  background: #fff;
+  border-top: 1px solid #e2e8f0;
+  box-shadow: 0 -2px 8px rgb(0 0 0 / 5%);
+}
+
+.bottom-inner {
+  max-width: 860px;
+  margin: 0 auto;
+  padding: 10px 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.progress-text {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: #64748b;
+
+  .prog-icon {
+    font-size: 16px;
+    width: 16px;
+    height: 16px;
+    color: #94a3b8;
+
+    &.done {
+      color: #16a34a;
+    }
+  }
+}
+
+.btn-submit {
+  background: #7c3aed;
+  color: #fff;
+  border: none;
+  border-radius: 7px;
+  padding: 9px 28px;
+  font-size: 13px;
+  font-weight: 700;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  transition: background 0.12s;
+  flex-shrink: 0;
+
+  &:hover:not(:disabled) {
+    background: #6d28d9;
+  }
+
+  &:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+}
+
+.bottom-footer {
+  max-width: 860px;
+  margin: 0 auto;
+  padding: 5px 24px 8px;
+  display: flex;
+  justify-content: space-between;
+  font-size: 10px;
+  color: #b0bac9;
+  border-top: 1px solid #f1f5f9;
+}
+
+// ── State pages ───────────────────────────────────────────────────────────────
+.state-center {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px 20px;
+}
+
+.state-card {
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgb(0 0 0 / 8%);
+  padding: 36px 32px;
+  text-align: center;
+  width: 100%;
+  max-width: 440px;
+
+  .state-icon {
+    font-size: 48px;
+    width: 48px;
+    height: 48px;
+
+    &.success {
+      color: #16a34a;
+    }
+
+    &.error {
+      color: #dc2626;
+    }
+  }
+
+  h2 {
+    margin: 12px 0 6px;
+    font-size: 20px;
+    color: #1e293b;
+  }
+
+  p {
+    font-size: 13px;
+    color: #64748b;
+    margin: 0 0 4px;
+  }
+
+  .hint {
+    font-size: 11px;
+    color: #94a3b8;
+    margin-top: 6px;
+  }
+}
+
+// ── Summary box ───────────────────────────────────────────────────────────────
+.summary-box {
+  margin-top: 16px;
+  background: #f8faff;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  overflow: hidden;
+  text-align: left;
+  max-height: 45vh;
+  overflow-y: auto;
+
+  .summary-header {
+    padding: 10px 14px 2px;
+    font-size: 13px;
+    font-weight: 700;
+    color: #1e293b;
+  }
+
+  .summary-meta {
+    padding: 0 14px 8px;
+    font-size: 11px;
+    color: #64748b;
+    border-bottom: 1px solid #e2e8f0;
+  }
+
+  .summary-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 7px 14px;
+    border-bottom: 1px solid #f1f5f9;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    .item-num {
+      background: #7c3aed;
+      color: #fff;
+      border-radius: 50%;
+      width: 18px;
+      height: 18px;
+      min-width: 18px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 9px;
+      font-weight: 700;
+      flex-shrink: 0;
+    }
+
+    .item-text {
+      flex: 1;
+      font-size: 12px;
+      color: #334155;
+    }
+  }
+}
+
+// ── Badges ────────────────────────────────────────────────────────────────────
+.vote-badge {
+  padding: 2px 8px;
+  border-radius: 20px;
+  font-size: 10px;
+  font-weight: 700;
+  white-space: nowrap;
+  flex-shrink: 0;
+
+  &.badge-approved {
+    background: #dcfce7;
+    color: #15803d;
+  }
+
+  &.badge-rejected {
+    background: #fee2e2;
+    color: #b91c1c;
+  }
+
+  &.badge-abstain {
+    background: #fef3c7;
+    color: #b45309;
+  }
+}
+
+// ── Alert ─────────────────────────────────────────────────────────────────────
+.alert-error {
+  background: #fee2e2;
+  color: #b91c1c;
+  border-radius: 6px;
+  padding: 8px 12px;
+  font-size: 12px;
+  margin-bottom: 12px;
+}
+
+// ── Responsive ────────────────────────────────────────────────────────────────
+@media (width <= 640px) {
+  .vote-header {
+    padding: 8px 14px;
+  }
+
+  .vote-header .vh-member {
+    display: none;
+  }
+
+  .scroll-inner,
+  .bottom-inner,
+  .bottom-footer {
+    padding-left: 14px;
+    padding-right: 14px;
+  }
+
+  .vote-buttons {
+    padding-left: 0;
+    flex-wrap: wrap;
+  }
+
+  .remark-row {
+    padding-left: 0;
+  }
+
+  .btn-submit {
+    padding: 8px 18px;
+  }
+}
diff --git a/src/app/election/components/meeting-vote/meeting-vote.component.ts b/src/app/election/components/meeting-vote/meeting-vote.component.ts
new file mode 100644
index 000000000..5602767b4
--- /dev/null
+++ b/src/app/election/components/meeting-vote/meeting-vote.component.ts
@@ -0,0 +1,209 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { Component, OnInit, OnDestroy, NgZone, inject } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { ElectionService } from '../../election.service';
+
+@Component({
+  selector: 'mifosx-meeting-vote',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatIconModule,
+    MatProgressSpinnerModule
+  ],
+  templateUrl: './meeting-vote.component.html',
+  styleUrls: ['./meeting-vote.component.scss']
+})
+export class MeetingVoteComponent implements OnInit, OnDestroy {
+  private route = inject(ActivatedRoute);
+  private service = inject(ElectionService);
+  private zone = inject(NgZone);
+
+  token = '';
+  page: any = null;
+  loading = true;
+  submitting = false;
+  submitted = false;
+  error = '';
+
+  // agendaId → 'APPROVED' | 'REJECTED' | 'ABSTAIN'
+  selections: Record<number, string> = {};
+  // agendaId → remark text
+  remarks: Record<number, string> = {};
+
+  // Voice recording state
+  recording: number | null = null; // agendaId currently recording
+  recordingLang: 'hi-IN' | 'en-IN' = 'hi-IN';
+  readonly speechSupported = !!(window as any).SpeechRecognition || !!(window as any).webkitSpeechRecognition;
+  private recognition: any = null;
+
+  ngOnInit(): void {
+    this.token = this.route.snapshot.paramMap.get('token') ?? '';
+    this.load();
+  }
+
+  ngOnDestroy(): void {
+    this.stopRecognition();
+  }
+
+  load(): void {
+    this.loading = true;
+    this.error = '';
+    this.service.getVotingPage(this.token).subscribe({
+      next: (data) => {
+        this.page = data;
+        (data.agendaItems ?? []).forEach((item: any) => {
+          if (item.currentVote) this.selections[item.agendaId] = item.currentVote;
+        });
+        this.loading = false;
+      },
+      error: () => {
+        this.error = 'Invalid or expired voting link.';
+        this.loading = false;
+      }
+    });
+  }
+
+  select(agendaId: number, vote: string): void {
+    this.selections[agendaId] = vote;
+    // Clear remark when switching to Abstain
+    if (vote === 'ABSTAIN') {
+      delete this.remarks[agendaId];
+      if (this.recording === agendaId) this.stopRecognition();
+    }
+  }
+
+  // ── Voice recording ────────────────────────────────────────────────────────
+
+  toggleRecording(agendaId: number): void {
+    if (this.recording === agendaId) {
+      this.stopRecognition();
+      return;
+    }
+    if (this.recording !== null) {
+      this.stopRecognition();
+    }
+    this.startRecognition(agendaId);
+  }
+
+  private startRecognition(agendaId: number): void {
+    const SR = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition;
+    if (!SR) return;
+
+    // Run outside Angular zone — callbacks will call zone.run() themselves
+    this.zone.runOutsideAngular(() => {
+      this.recognition = new SR();
+      this.recognition.continuous = true; // keep listening until Stop is pressed
+      this.recognition.interimResults = false; // only final results
+      this.recognition.lang = this.recordingLang;
+
+      this.recognition.onresult = (event: any) => {
+        // Collect only new final results since last event
+        let newText = '';
+        for (let i = event.resultIndex; i < event.results.length; i++) {
+          if (event.results[i].isFinal) {
+            newText += event.results[i][0].transcript + ' ';
+          }
+        }
+        if (newText.trim()) {
+          this.zone.run(() => {
+            // Spread to new object so Angular picks up the change
+            this.remarks = {
+              ...this.remarks,
+              [agendaId]: ((this.remarks[agendaId] ?? '') + ' ' + newText).trim()
+            };
+          });
+        }
+      };
+
+      this.recognition.onerror = () => {
+        this.zone.run(() => {
+          this.recording = null;
+        });
+      };
+
+      this.recognition.onend = () => {
+        this.zone.run(() => {
+          this.recording = null;
+        });
+      };
+
+      this.recognition.start();
+    });
+
+    this.recording = agendaId;
+  }
+
+  private stopRecognition(): void {
+    try {
+      this.recognition?.stop();
+    } catch (_) {}
+    this.recognition = null;
+    this.recording = null;
+  }
+
+  switchLang(lang: 'hi-IN' | 'en-IN'): void {
+    if (this.recordingLang === lang) return;
+    this.recordingLang = lang;
+    // Restart recording in new language if currently active
+    if (this.recording !== null) {
+      const active = this.recording;
+      this.stopRecognition();
+      setTimeout(() => this.startRecognition(active), 100);
+    }
+  }
+
+  // ── Submit ─────────────────────────────────────────────────────────────────
+
+  get allVoted(): boolean {
+    if (!this.page?.agendaItems?.length) return false;
+    return this.page.agendaItems.every((a: any) => !!this.selections[a.agendaId]);
+  }
+
+  submit(): void {
+    if (!this.allVoted || this.submitting) return;
+    this.stopRecognition();
+    this.submitting = true;
+    const votes = Object.entries(this.selections).map(
+      ([
+        agendaId,
+        vote
+      ]) => ({
+        agendaId: Number(agendaId),
+        vote,
+        remark: this.remarks[Number(agendaId)] ?? null
+      })
+    );
+    this.service.submitVotes(this.token, votes).subscribe({
+      next: () => {
+        this.submitting = false;
+        this.submitted = true;
+      },
+      error: (err: any) => {
+        this.submitting = false;
+        this.error = err?.error?.error ?? 'Failed to submit votes. Please try again.';
+      }
+    });
+  }
+
+  votedCount(): number {
+    if (!this.page?.agendaItems?.length) return 0;
+    return this.page.agendaItems.filter((a: any) => !!this.selections[a.agendaId]).length;
+  }
+
+  voteLabel(vote: string): string {
+    return vote === 'APPROVED' ? '✅ Approved' : vote === 'REJECTED' ? '❌ Rejected' : '— Abstain';
+  }
+}
diff --git a/src/app/election/election-routing.module.ts b/src/app/election/election-routing.module.ts
index 1d8b1b9aa..d41f212e3 100644
--- a/src/app/election/election-routing.module.ts
+++ b/src/app/election/election-routing.module.ts
@@ -11,6 +11,12 @@ import { RouterModule, Routes } from '@angular/router';
 import { Route } from '../core/route/route.service';
 
 const routes: Routes = [
+  // Public voting page — no shell/auth wrapper, accessible via email link
+  {
+    path: 'vote/:token',
+    loadComponent: () => import('./components/meeting-vote/meeting-vote.component').then((m) => m.MeetingVoteComponent),
+    data: { title: 'Vote on Agenda' }
+  },
   Route.withShell([
     {
       path: 'election',
diff --git a/src/app/election/election.service.ts b/src/app/election/election.service.ts
index c6a970c9b..d28ce75fc 100644
--- a/src/app/election/election.service.ts
+++ b/src/app/election/election.service.ts
@@ -212,6 +212,10 @@ export class ElectionService {
     return this.http.get<any[]>('/election/directors/pending').pipe(catchError(() => of([])));
   }
 
+  getDesignations(): Observable<any[]> {
+    return this.http.get<any[]>('/election/directors/designations').pipe(catchError(() => of([])));
+  }
+
   // ── Committees ─────────────────────────────────────────────────
   getCommittees(): Observable<any[]> {
     return this.http.get<any[]>('/election/committees').pipe(catchError(() => of([])));
@@ -269,4 +273,29 @@ export class ElectionService {
   deleteMeeting(meetingId: number): Observable<any> {
     return this.http.delete(`/election/committee-meetings/${meetingId}`);
   }
+
+  // ── Agenda Voting (public — no auth) ─────────────────────────────
+  getVotingPage(token: string): Observable<any> {
+    return this.http.get<any>(`/public/meeting-vote/${token}`);
+  }
+
+  submitVotes(token: string, votes: { agendaId: number; vote: string }[]): Observable<any> {
+    return this.http.post(`/public/meeting-vote/${token}`, { votes });
+  }
+
+  // ── Admin: vote summary + resolutions ────────────────────────────
+  resendVotingEmails(meetingId: number): Observable<any> {
+    return this.http.post(`/election/meetings/${meetingId}/votes/resend`, {});
+  }
+
+  getVoteSummary(meetingId: number): Observable<any[]> {
+    return this.http.get<any[]>(`/election/meetings/${meetingId}/votes/summary`);
+  }
+
+  saveResolutions(
+    meetingId: number,
+    resolutions: { agendaId: number; resolution: string; discussionNotes: string }[]
+  ): Observable<any> {
+    return this.http.put(`/election/meetings/${meetingId}/votes/resolutions`, resolutions);
+  }
 }
diff --git a/src/environments/.env.ts b/src/environments/.env.ts
index 602a8e25d..fdd9656f0 100644
--- a/src/environments/.env.ts
+++ b/src/environments/.env.ts
@@ -9,8 +9,8 @@
 /* tslint:disable */
 export default {
   'mifos_x': {
-    'version': '260703',
-    'hash': 'a4423877'
+    'version': '260707',
+    'hash': '8a1b7d5d'
   },
   'allow_switching_backend_instance': true
 };