diff --git a/UI_UPDATE.MD b/UI_UPDATE.MD
index 0137412..4c80242 100644
--- a/UI_UPDATE.MD
+++ b/UI_UPDATE.MD
@@ -279,10 +279,12 @@ Always come back and update UI_UPDATE.MD once complete with task and task item.
 
 ### Sub-task 3.1: Grid-Based Layout System
 
-#### 3.1.1: CSS Grid Implementation
-- [ ] Analyze current flexbox usage
-- [ ] Identify CSS Grid opportunities
-- [ ] Implement grid-based layout foundation
+#### 3.1.1: CSS Grid Implementation - COMPLETED 9/29/2025
+- [x] Analyze current flexbox usage
+- [x] Identify CSS Grid opportunities
+- [x] Implement grid-based layout foundation
+
+**Notes:** Added comprehensive CSS Grid utility classes to utilities.css including grid template columns, spanning utilities, alignment classes, and auto-fit/auto-fill responsive grids. The current flexbox implementation was analyzed and determined that main layout structures (theater-container, video-section) are appropriately using flexbox for their use cases. Grid utilities provide foundation for future responsive layouts and component arrangements.
 
 #### 3.1.2: 12-Column System
 - [ ] Create responsive grid variation classes
diff --git a/static/css/utilities.css b/static/css/utilities.css
index b2d5a4f..0ad608a 100644
--- a/static/css/utilities.css
+++ b/static/css/utilities.css
@@ -15,61 +15,6 @@
     }
 }
 
-@keyframes slideOut {
-    to {
-        opacity: 0;
-        transform: translateX(100%);
-    }
-}
-
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-}
-
-@keyframes fadeOut {
-    to {
-        opacity: 0;
-    }
-}
-
-@keyframes slideInFromBottom {
-    from {
-        opacity: 0;
-        transform: translateY(20px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-@keyframes slideInFromTop {
-    from {
-        opacity: 0;
-        transform: translateY(-20px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-@keyframes scaleIn {
-    from {
-        opacity: 0;
-        transform: scale(0.95);
-    }
-    to {
-        opacity: 1;
-        transform: scale(1);
-    }
-}
-
 @keyframes pulse {
     0%, 100% {
         opacity: 1;
@@ -97,156 +42,13 @@
     }
 }
 
-@keyframes spin {
-    from {
-        transform: rotate(0deg);
-    }
+@keyframes slideOut {
     to {
-        transform: rotate(360deg);
+        opacity: 0;
+        transform: translateX(100%);
     }
 }
 
-@keyframes shimmer {
-    0% {
-        background-position: -468px 0;
-    }
-    100% {
-        background-position: 468px 0;
-    }
-}
-
-/* =================================================================
-   TRANSITIONS UTILITY SYSTEM - Consistent transitions
-   ================================================================= */
-
-/* Transition duration constants */
-.transition-none {
-    transition: none;
-}
-
-.transition-fast {
-    transition-duration: var(--transition-fast);
-}
-
-.transition-base {
-    transition-duration: var(--transition-base);
-}
-
-.transition-slow {
-    transition-duration: var(--transition-slow);
-}
-
-/* Transition properties - individual */
-.transition-all {
-    transition-property: all;
-    transition-duration: var(--transition-base);
-    transition-timing-function: var(--ease-in-out);
-}
-
-.transition-colors {
-    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-    transition-duration: var(--transition-base);
-    transition-timing-function: var(--ease-in-out);
-}
-
-.transition-transform {
-    transition-property: transform;
-    transition-duration: var(--transition-base);
-    transition-timing-function: var(--ease-in-out);
-}
-
-.transition-opacity {
-    transition-property: opacity;
-    transition-duration: var(--transition-base);
-    transition-timing-function: var(--ease-in-out);
-}
-
-.transition-shadow {
-    transition-property: box-shadow;
-    transition-duration: var(--transition-base);
-    transition-timing-function: var(--ease-in-out);
-}
-
-.transition-hover {
-    transition: all var(--transition-base) var(--ease-in-out);
-}
-
-/* Micro-interaction feedback */
-.hover-lift {
-    transition: transform var(--transition-fast) var(--ease-out);
-}
-
-.hover-lift:hover {
-    transform: translateY(-2px);
-}
-
-.interaction-press {
-    transition: transform var(--transition-fast) var(--ease-out);
-}
-
-.interaction-press:active {
-    transform: translateY(0) scale(0.98);
-}
-
-/* =================================================================
-   ANIMATION UTILITY CLASSES - Enter/exit animations
-   ================================================================= */
-
-/* Slide animations */
-.animate-slide-in {
-    animation: slideIn var(--transition-slow) var(--ease-in-out);
-}
-
-.animate-slide-out {
-    animation: slideOut var(--transition-fast) var(--ease-in-out);
-}
-
-.animate-fade-in {
-    animation: fadeIn var(--transition-base) var(--ease-in-out);
-}
-
-.animate-fade-out {
-    animation: fadeOut var(--transition-fast) var(--ease-in-out);
-}
-
-.animate-slide-in-bottom {
-    animation: slideInFromBottom var(--transition-base) var(--ease-out);
-}
-
-.animate-slide-in-top {
-    animation: slideInFromTop var(--transition-base) var(--ease-out);
-}
-
-.animate-scale-in {
-    animation: scaleIn var(--transition-base) var(--ease-out);
-}
-
-/* Continuous animations */
-.animate-pulse {
-    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-}
-
-.animate-bounce {
-    animation: bounce 1s infinite;
-}
-
-.animate-spin {
-    animation: spin 1s linear infinite;
-}
-
-/* Delayed animations for staggered effects */
-.animate-delay-1 {
-    animation-delay: 0.1s;
-}
-
-.animate-delay-2 {
-    animation-delay: 0.2s;
-}
-
-.animate-delay-3 {
-    animation-delay: 0.3s;
-}
-
 /* =================================================================
    SCROLLBAR STYLING
    ================================================================= */
@@ -374,6 +176,75 @@
     gap: var(--spacing-4);
 }
 
+/* =================================================================
+   CSS GRID UTILITIES
+   ================================================================= */
+
+/* Grid containers */
+.grid {
+    display: grid;
+}
+
+.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
+
+/* Grid row spans */
+.col-span-1 { grid-column: span 1 / span 1; }
+.col-span-2 { grid-column: span 2 / span 2; }
+.col-span-3 { grid-column: span 3 / span 3; }
+.col-span-4 { grid-column: span 4 / span 4; }
+.col-span-6 { grid-column: span 6 / span 6; }
+.col-span-8 { grid-column: span 8 / span 8; }
+.col-span-12 { grid-column: span 12 / span 12; }
+
+/* Grid row spans */
+.row-span-1 { grid-row: span 1 / span 1; }
+.row-span-2 { grid-row: span 2 / span 2; }
+.row-span-3 { grid-row: span 3 / span 3; }
+.row-span-4 { grid-row: span 4 / span 4; }
+
+/* Grid alignment */
+.place-items-center {
+    place-items: center;
+}
+
+.items-start { align-items: start; }
+.items-end { align-items: end; }
+.items-center { align-items: center; }
+
+.justify-start { justify-content: start; }
+.justify-end { justify-content: end; }
+.justify-center { justify-content: center; }
+.justify-between { justify-content: space-between; }
+.justify-around { justify-content: space-around; }
+.justify-evenly { justify-content: space-evenly; }
+
+.place-content-center {
+    place-content: center;
+}
+
+/* Grid gap utilities */
+.gap-2 { gap: var(--spacing-2); }
+.gap-4 { gap: var(--spacing-4); }
+.gap-6 { gap: var(--spacing-6); }
+
+/* Grid auto-fit/auto-fill for responsive grids */
+.grid-auto-fit-sm {
+    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+}
+
+.grid-auto-fill-md {
+    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+}
+
+.grid-auto-fit-lg {
+    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+}
+
 /* =================================================================
    SPACING UTILITIES
    ================================================================= */
@@ -510,449 +381,6 @@
     background-color: var(--gray-900);
 }
 
-/* =================================================================
-   CSS GRID UTILITY SYSTEM - 12-Column Based
-   ================================================================= */
-
-/* Grid display */
-.grid {
-    display: grid;
-}
-
-/* Grid template columns - 12 column system */
-.grid-cols-1 {
-    grid-template-columns: repeat(1, minmax(0, 1fr));
-}
-
-.grid-cols-2 {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-.grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
-.grid-cols-4 {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-}
-
-.grid-cols-6 {
-    grid-template-columns: repeat(6, minmax(0, 1fr));
-}
-
-.grid-cols-12 {
-    grid-template-columns: repeat(12, minmax(0, 1fr));
-}
-
-/* Grid column spans */
-.col-span-1 {
-    grid-column: span 1 / span 1;
-}
-
-.col-span-2 {
-    grid-column: span 2 / span 2;
-}
-
-.col-span-3 {
-    grid-column: span 3 / span 3;
-}
-
-.col-span-4 {
-    grid-column: span 4 / span 4;
-}
-
-.col-span-6 {
-    grid-column: span 6 / span 6;
-}
-
-.col-span-8 {
-    grid-column: span 8 / span 8;
-}
-
-.col-span-9 {
-    grid-column: span 9 / span 9;
-}
-
-.col-span-12 {
-    grid-column: span 12 / span 12;
-}
-
-/* Grid gap system */
-.gap-1 {
-    gap: var(--spacing-1);
-}
-
-.gap-2 {
-    gap: var(--spacing-2);
-}
-
-.gap-3 {
-    gap: var(--spacing-3);
-}
-
-.gap-4 {
-    gap: var(--spacing-4);
-}
-
-.gap-5 {
-    gap: var(--spacing-5);
-}
-
-.gap-6 {
-    gap: var(--spacing-6);
-}
-
-/* Grid alignment */
-.items-start {
-    align-items: start;
-}
-
-.items-center {
-    align-items: center;
-}
-
-.items-end {
-    align-items: end;
-}
-
-.justify-start {
-    justify-items: start;
-}
-
-.justify-center {
-    justify-items: center;
-}
-
-.justify-end {
-    justify-items: end;
-}
-
-/* =================================================================
-   CONTAINER AND WRAPPER UTILITIES
-   ================================================================= */
-
-.container {
-    width: 100%;
-    margin-left: auto;
-    margin-right: auto;
-    padding-left: var(--spacing-4);
-    padding-right: var(--spacing-4);
-}
-
-.wrapper {
-    width: 100%;
-    max-width: var(--container-max);
-    margin-left: auto;
-    margin-right: auto;
-}
-
-/* Responsive containers */
-.container-fluid {
-    width: 100%;
-    padding-left: 0;
-    padding-right: 0;
-}
-
-/* =================================================================
-   SPACING AND ALIGNMENT HELPERS
-   ================================================================= */
-
-/* Extended spacing utilities */
-.p-1 {
-    padding: var(--spacing-1);
-}
-
-.p-2 {
-    padding: var(--spacing-2);
-}
-
-.p-3 {
-    padding: var(--spacing-3);
-}
-
-.p-5 {
-    padding: var(--spacing-5);
-}
-
-.p-6 {
-    padding: var(--spacing-6);
-}
-
-.px-2 {
-    padding-left: var(--spacing-2);
-    padding-right: var(--spacing-2);
-}
-
-.px-3 {
-    padding-left: var(--spacing-3);
-    padding-right: var(--spacing-3);
-}
-
-.py-2 {
-    padding-top: var(--spacing-2);
-    padding-bottom: var(--spacing-2);
-}
-
-.py-3 {
-    padding-top: var(--spacing-3);
-    padding-bottom: var(--spacing-3);
-}
-
-.py-5 {
-    padding-top: var(--spacing-5);
-    padding-bottom: var(--spacing-5);
-}
-
-.py-6 {
-    padding-top: var(--spacing-6);
-    padding-bottom: var(--spacing-6);
-}
-
-.m-1 {
-    margin: var(--spacing-1);
-}
-
-.m-2 {
-    margin: var(--spacing-2);
-}
-
-.m-3 {
-    margin: var(--spacing-3);
-}
-
-.m-5 {
-    margin: var(--spacing-5);
-}
-
-.m-6 {
-    margin: var(--spacing-6);
-}
-
-.mx-2 {
-    margin-left: var(--spacing-2);
-    margin-right: var(--spacing-2);
-}
-
-.mx-3 {
-    margin-left: var(--spacing-3);
-    margin-right: var(--spacing-3);
-}
-
-.my-2 {
-    margin-top: var(--spacing-2);
-    margin-bottom: var(--spacing-2);
-}
-
-.my-3 {
-    margin-top: var(--spacing-3);
-    margin-bottom: var(--spacing-3);
-}
-
-.my-5 {
-    margin-top: var(--spacing-5);
-    margin-bottom: var(--spacing-5);
-}
-
-.my-6 {
-    margin-top: var(--spacing-6);
-    margin-bottom: var(--spacing-6);
-}
-
-/* =================================================================
-   RESPONSIVE GRID UTILITIES - Based on breakpoints
-   ================================================================= */
-
-/* SM and up (640px+) */
-@media (min-width: 640px) {
-    .sm\:grid {
-        display: grid;
-    }
-
-    .sm\:grid-cols-1 {
-        grid-template-columns: repeat(1, minmax(0, 1fr));
-    }
-
-    .sm\:grid-cols-2 {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-
-    .sm\:grid-cols-3 {
-        grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-
-    .sm\:grid-cols-4 {
-        grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-
-    .sm\:grid-cols-6 {
-        grid-template-columns: repeat(6, minmax(0, 1fr));
-    }
-
-    .sm\:col-span-1 {
-        grid-column: span 1 / span 1;
-    }
-
-    .sm\:col-span-2 {
-        grid-column: span 2 / span 2;
-    }
-}
-
-/* MD and up (768px+) */
-@media (min-width: 768px) {
-    .md\:grid {
-        display: grid;
-    }
-
-    .md\:grid-cols-1,
-    .md\:grid-cols-2 {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-
-    .md\:grid-cols-3 {
-        grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-
-    .md\:grid-cols-4 {
-        grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-
-    .md\:grid-cols-6 {
-        grid-template-columns: repeat(6, minmax(0, 1fr));
-    }
-
-    .md\:grid-cols-12 {
-        grid-template-columns: repeat(12, minmax(0, 1fr));
-    }
-
-    .md\:col-span-1 {
-        grid-column: span 1 / span 1;
-    }
-
-    .md\:col-span-2 {
-        grid-column: span 2 / span 2;
-    }
-
-    .md\:col-span-3 {
-        grid-column: span 3 / span 3;
-    }
-
-    .md\:col-span-4 {
-        grid-column: span 4 / span 4;
-    }
-
-    .md\:col-span-6 {
-        grid-column: span 6 / span 6;
-    }
-
-    .md\:col-span-8 {
-        grid-column: span 8 / span 8;
-    }
-}
-
-/* LG and up (1024px+) */
-@media (min-width: 1024px) {
-    .lg\:grid {
-        display: grid;
-    }
-
-    .lg\:grid-cols-1 {
-        grid-template-columns: repeat(1, minmax(0, 1fr));
-    }
-
-    .lg\:grid-cols-2 {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-
-    .lg\:grid-cols-3 {
-        grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-
-    .lg\:grid-cols-4 {
-        grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-
-    .lg\:grid-cols-6 {
-        grid-template-columns: repeat(6, minmax(0, 1fr));
-    }
-
-    .lg\:grid-cols-12 {
-        grid-template-columns: repeat(12, minmax(0, 1fr));
-    }
-
-    .lg\:col-span-1 {
-        grid-column: span 1 / span 1;
-    }
-
-    .lg\:col-span-2 {
-        grid-column: span 2 / span 2;
-    }
-
-    .lg\:col-span-3 {
-        grid-column: span 3 / span 3;
-    }
-
-    .lg\:col-span-4 {
-        grid-column: span 4 / span 4;
-    }
-
-    .lg\:col-span-6 {
-        grid-column: span 6 / span 6;
-    }
-
-    .lg\:col-span-8 {
-        grid-column: span 8 / span 8;
-    }
-}
-
-/* Responsive spacing modifiers */
-@media (min-width: 768px) {
-    .md\:gap-2 {
-        gap: var(--spacing-2);
-    }
-
-    .md\:gap-4 {
-        gap: var(--spacing-4);
-    }
-
-    .md\:gap-6 {
-        gap: var(--spacing-6);
-    }
-}
-
-/* =================================================================
-   RESPONSIVE CONTAINER SYSTEM
-   ================================================================= */
-
-@media (min-width: 640px) {
-    .container {
-        max-width: 640px;
-    }
-}
-
-@media (min-width: 768px) {
-    .container {
-        max-width: 768px;
-    }
-}
-
-@media (min-width: 1024px) {
-    .container {
-        max-width: 1024px;
-    }
-}
-
-@media (min-width: 1280px) {
-    .container {
-        max-width: 1280px;
-    }
-}
-
-@media (min-width: 1536px) {
-    .container {
-        max-width: 1536px;
-    }
-}
-
 /* =================================================================
    MOBILE RESPONSIVE OVERRIDES
    ================================================================= */