diff --git a/components/video-modal.html b/components/video-modal.html
index ce969f19..c66f96e6 100644
--- a/components/video-modal.html
+++ b/components/video-modal.html
@@ -5,7 +5,7 @@
       <!-- Navigation bar - sliding at top -->
       <div
         id="modalNav"
-        class="sticky top-0 z-60 bg-gradient-to-b from-black/80 to-transparent transition-transform duration-150"
+        class="modal-nav sticky top-0 z-60 transition-transform duration-150"
       >
         <div class="flex items-center px-6 py-4">
           <button
@@ -119,11 +119,11 @@
         </div>
       </div>
 
-      <div class="player-modal__video">
+      <div class="player-modal__video modal-video-shell">
         <video id="modalVideo" class="w-full aspect-video" controls></video>
       </div>
 
-      <div class="player-modal__info">
+      <div class="player-modal__info modal-info-panel">
         <!-- Title and icons row -->
         <div class="flex items-center justify-between mb-2">
           <h2 id="videoTitle" class="text-2xl font-bold text-white"></h2>
diff --git a/css/style.css b/css/style.css
index 5d6ded57..d36859e4 100644
--- a/css/style.css
+++ b/css/style.css
@@ -301,23 +301,36 @@ header img {
 
 #playerModal .player-modal__video {
   width: 100%;
-  background-color: #000;
   position: sticky;
   top: 0;
   z-index: 51;
   flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: clamp(0.75rem, 3.5vw, 2.5rem);
+  background-color: var(--color-bg);
+  border-bottom: 0.0625rem solid rgba(148, 163, 184, 0.18);
 }
 
 #playerModal .player-modal__video video {
   width: 100%;
   aspect-ratio: 16 / 9;
   background-color: #000;
+  border-radius: 0.75rem;
+  display: block;
+  box-shadow: 0 1.125rem 2.75rem rgba(8, 11, 30, 0.55);
+  max-height: min(80vh, calc(100vw * 9 / 16));
+  object-fit: contain;
 }
 
 #playerModal .player-modal__info {
   flex: 0 0 auto;
-  padding: 1.5rem;
-  padding-bottom: 3rem;
+  padding: clamp(1.5rem, 3vw, 2.5rem);
+  padding-bottom: clamp(2.5rem, 6vw, 4rem);
+  background-color: var(--color-bg);
+  border-top: 0.0625rem solid rgba(148, 163, 184, 0.16);
+  box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.35);
 }
 
 html.modal-open {
@@ -386,6 +399,35 @@ body.modal-open #app {
   }
 }
 
+#modalNav.modal-nav,
+.modal-nav {
+  background-color: var(--color-bg);
+  border-bottom: 0.0625rem solid rgba(148, 163, 184, 0.25);
+  box-shadow: 0 0.75rem 2rem rgba(8, 11, 30, 0.45);
+}
+
+.modal-nav .flex {
+  position: relative;
+  gap: 0.75rem;
+}
+
+.modal-nav .icon-button {
+  background-color: rgba(30, 41, 59, 0.85);
+  border: 0.0625rem solid rgba(148, 163, 184, 0.4);
+  color: #f8fafc;
+  box-shadow: none;
+}
+
+.modal-nav .icon-button:hover {
+  background-color: rgba(51, 65, 85, 0.95);
+  border-color: rgba(148, 163, 184, 0.55);
+}
+
+.modal-nav .icon-button:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 0.1875rem rgba(148, 163, 184, 0.45);
+}
+
 #modalNav {
   position: sticky;
   top: 0;
@@ -619,15 +661,18 @@ footer a:hover {
 
 /* Override default button styles for back button */
 .back-button {
-  background: rgba(0, 0, 0, 0.5) !important;
+  background: rgba(15, 23, 42, 0.75) !important;
   padding: 0 !important;
-  color: rgb(209 213 219) !important;
+  color: rgb(226 232 240) !important;
   transform: none !important;
+  border: 0.0625rem solid rgba(148, 163, 184, 0.4) !important;
+  box-shadow: none;
 }
 
 .back-button:hover {
-  background: rgba(0, 0, 0, 0.7) !important;
+  background: rgba(51, 65, 85, 0.95) !important;
   color: white !important;
+  border-color: rgba(148, 163, 184, 0.55) !important;
 }
 
 /* Modal Container */