diff --git a/resources/js/app.js b/resources/js/app.js
index 31095cb..0f34cb2 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -1,4 +1,3 @@
 import * as bootstrap from 'bootstrap';
-import './../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js';
 
 window.bootstrap = bootstrap;
diff --git a/resources/views/components/layouts/app.blade.php b/resources/views/components/layouts/app.blade.php
index b374b9f..e018d15 100644
--- a/resources/views/components/layouts/app.blade.php
+++ b/resources/views/components/layouts/app.blade.php
@@ -1,8 +1,9 @@
 <!doctype html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" x-data x-init="
-    const saved = localStorage.getItem('theme');
-    if (saved) { document.documentElement.setAttribute('data-bs-theme', saved); }
-">
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"
+    x-data="{ theme: localStorage.getItem('theme') || 'light' }"
+    x-init="$watch('theme', val => { document.documentElement.setAttribute('data-bs-theme', val); localStorage.setItem('theme', val); }); document.documentElement.setAttribute('data-bs-theme', theme);"
+    :data-bs-theme="theme"
+>
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -43,16 +44,11 @@
                     <li class="nav-item me-2">
                         <button
                             class="btn btn-sm btn-outline-light"
-                            x-on:click="
-                                const current = document.documentElement.getAttribute('data-bs-theme');
-                                const next = current === 'dark' ? 'light' : 'dark';
-                                document.documentElement.setAttribute('data-bs-theme', next);
-                                localStorage.setItem('theme', next);
-                            "
+                            x-on:click="theme = theme === 'dark' ? 'light' : 'dark'"
                             title="Toggle dark/light mode"
                         >
-                            <span x-show="document.documentElement.getAttribute('data-bs-theme') !== 'dark'">🌙</span>
-                            <span x-show="document.documentElement.getAttribute('data-bs-theme') === 'dark'">☀️</span>
+                            <span x-show="theme !== 'dark'">🌙</span>
+                            <span x-show="theme === 'dark'">☀️</span>
                         </button>
                     </li>
                     @auth
diff --git a/resources/views/components/layouts/guest.blade.php b/resources/views/components/layouts/guest.blade.php
index f42fe0b..a6c7239 100644
--- a/resources/views/components/layouts/guest.blade.php
+++ b/resources/views/components/layouts/guest.blade.php
@@ -1,5 +1,9 @@
 <!doctype html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"
+    x-data="{ theme: localStorage.getItem('theme') || 'light' }"
+    x-init="document.documentElement.setAttribute('data-bs-theme', theme);"
+    :data-bs-theme="theme"
+>
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -8,7 +12,7 @@
     @vite(['resources/css/app.css', 'resources/js/app.js'])
     @livewireStyles
 </head>
-<body class="bg-light">
+<body>
     {{ $slot }}
     @livewireScripts
 </body>
diff --git a/resources/views/livewire/auth/login.blade.php b/resources/views/livewire/auth/login.blade.php
index 859e7bf..f1f93c0 100644
--- a/resources/views/livewire/auth/login.blade.php
+++ b/resources/views/livewire/auth/login.blade.php
@@ -29,7 +29,7 @@ new #[Layout('components.layouts.guest')] class extends Component {
 }
 ?>
 
-<div class="min-vh-100 d-flex align-items-center justify-content-center bg-light">
+<div class="min-vh-100 d-flex align-items-center justify-content-center">
     <div class="card shadow-sm" style="width: 100%; max-width: 420px;">
         <div class="card-body p-4">
             <div class="text-center mb-4">
diff --git a/resources/views/livewire/travel-request/create.blade.php b/resources/views/livewire/travel-request/create.blade.php
index 679ee3b..95353f5 100644
--- a/resources/views/livewire/travel-request/create.blade.php
+++ b/resources/views/livewire/travel-request/create.blade.php
@@ -318,7 +318,7 @@ new #[Layout('components.layouts.app')] class extends Component {
                 @error('journeys') <div class="alert alert-danger">{{ $message }}</div> @enderror
 
                 @foreach ($journeys as $i => $journey)
-                    <div class="border rounded p-3 mb-3 bg-light" wire:key="journey-{{ $i }}">
+                    <div class="border rounded p-3 mb-3" wire:key="journey-{{ $i }}">
                         <div class="d-flex justify-content-between align-items-center mb-2">
                             <strong class="small">Journey {{ $i + 1 }}</strong>
                             @if (count($journeys) > 1)
@@ -413,7 +413,7 @@ new #[Layout('components.layouts.app')] class extends Component {
             </div>
             <div class="card-body">
                 @foreach ($costCodes as $i => $code)
-                    <div class="border rounded p-3 mb-3 bg-light" wire:key="code-{{ $i }}">
+                    <div class="border rounded p-3 mb-3" wire:key="code-{{ $i }}">
                         <div class="d-flex justify-content-between align-items-center mb-2">
                             <strong class="small">Cost Code {{ $i + 1 }}</strong>
                             @if (count($costCodes) > 1)
