diff --git a/static/css/components.css b/static/css/components.css
index 54c346c..134c41b 100644
--- a/static/css/components.css
+++ b/static/css/components.css
@@ -10,7 +10,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    box-shadow: var(--shadow-dodgers-md);
+    box-shadow: var(--elevation-4);
     z-index: 10;
 }
 
@@ -159,7 +159,7 @@
     color: white;
     font-size: var(--font-size-base);
     font-weight: var(--font-weight-semibold);
-    box-shadow: var(--shadow-sm);
+    box-shadow: var(--elevation-1);
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -343,7 +343,7 @@
     border-radius: var(--border-radius-lg);
     font-size: var(--font-size-sm);
     line-height: var(--line-height-normal);
-    box-shadow: var(--shadow-sm);
+    box-shadow: var(--elevation-1);
     border-left: 3px solid transparent;
     color: var(--text-primary);
     word-wrap: break-word;
@@ -448,12 +448,12 @@
     font-weight: var(--font-weight-semibold);
     cursor: pointer;
     transition: all var(--transition-base);
-    box-shadow: var(--shadow-dodgers-sm);
+    box-shadow: var(--elevation-3);
 }
 
 .chat__input button:hover {
     transform: translateY(-2px);
-    box-shadow: var(--shadow-dodgers-md);
+    box-shadow: var(--elevation-4);
 }
 
 .chat__input button:active {
@@ -560,7 +560,7 @@
     color: white;
     border: none;
     cursor: pointer;
-    box-shadow: var(--shadow-dodgers-md);
+    box-shadow: var(--elevation-4);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -570,7 +570,7 @@
 
 .fab:hover {
     transform: scale(1.1);
-    box-shadow: var(--shadow-dodgers-lg);
+    box-shadow: var(--elevation-5);
 }
 
 .fab.secondary {