diff --git a/public/starcloudlogo-Photoroom.png b/public/starcloudlogo-Photoroom.png
new file mode 100644
index 0000000..44b2219
Binary files /dev/null and b/public/starcloudlogo-Photoroom.png differ
diff --git a/public/starcloudlogo.png b/public/starcloudlogo.png
new file mode 100644
index 0000000..09124fe
Binary files /dev/null and b/public/starcloudlogo.png differ
diff --git a/public/tech_lines_bg.png b/public/tech_lines_bg.png
new file mode 100644
index 0000000..1c44459
Binary files /dev/null and b/public/tech_lines_bg.png differ
diff --git a/public/tech_vending_bg.png b/public/tech_vending_bg.png
new file mode 100644
index 0000000..158bfe1
Binary files /dev/null and b/public/tech_vending_bg.png differ
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index cf167e4..f5128fe 100644
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -8,91 +8,134 @@
     <!-- Fonts -->
     <link rel="preconnect" href="https://fonts.bunny.net">
     <link href="https://fonts.bunny.net/css?family=inter:400,500,600,700&display=swap" rel="stylesheet" />
-    <script>
-        // Dark mode
-        const html = document.querySelector('html');
-        const isLightOrAuto = localStorage.getItem('hs_theme') === 'light' || (localStorage.getItem('hs_theme') !== 'dark' && !window.matchMedia('(prefers-color-scheme: dark)').matches);
-        const isDarkOrAuto = localStorage.getItem('hs_theme') === 'dark' || (localStorage.getItem('hs_theme') !== 'light' && window.matchMedia('(prefers-color-scheme: dark)').matches);
-
-        if (isLightOrAuto && html.classList.contains('dark')) html.classList.remove('dark');
-        else if (isDarkOrAuto && html.classList.contains('light')) html.classList.remove('light');
-        else if (isDarkOrAuto && !html.classList.contains('dark')) html.classList.add('dark');
-        else if (isLightOrAuto && !html.classList.contains('light')) html.classList.add('light');
-    </script>
+    <style>
+        /* 懸浮卡片高奢進入動畫 */
+        @keyframes luxury-in {
+            from {
+                opacity: 0;
+                transform: translateY(24px) scale(0.98);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0) scale(1);
+            }
+        }
+        .animate-luxury-in {
+            animation: luxury-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+        }
+    </style>
     @vite(['resources/css/app.css', 'resources/js/app.js'])
 </head>
-<body class="font-sans antialiased bg-white dark:bg-slate-900">
-    <div class="flex h-screen">
-        <!-- Sidebar - Image Section -->
-        <div class="hidden md:flex md:w-1/2 lg:w-3/5 bg-gray-50 border-r border-gray-200 dark:bg-slate-800 dark:border-slate-700 justify-center items-center relative overflow-hidden">
-             <!-- Background Pattern or Gradient -->
-            <div class="absolute inset-0 bg-gradient-to-tr from-blue-600 to-purple-500 opacity-90 dark:from-blue-900 dark:to-purple-900"></div>
+<body class="font-sans antialiased bg-[#070B14]">
+    
+    <!-- 全局科技星雲底圖 Canvas -->
+    <div class="min-h-screen w-full flex items-center justify-center p-4 sm:p-6 md:p-10 relative overflow-hidden bg-[#070B14]">
+        
+        <!-- 精美淡淡的科技不規則線條背景圖 (低透明度，優雅不花俏) -->
+        <div class="absolute inset-0 bg-cover bg-center opacity-[0.18] pointer-events-none mix-blend-lighten" style="background-image: url('{{ asset('tech_lines_bg.png') }}');"></div>
+        
+        <!-- 霓虹光暈 (Radial Glow) -->
+        <div class="absolute top-[-10%] right-[-10%] w-[500px] h-[500px] rounded-full bg-indigo-600/10 blur-[120px] pointer-events-none"></div>
+        <div class="absolute bottom-[-10%] left-[-10%] w-[600px] h-[600px] rounded-full bg-blue-600/10 blur-[130px] pointer-events-none"></div>
+        <div class="absolute top-[30%] left-[20%] w-[350px] h-[350px] rounded-full bg-cyan-600/5 blur-[100px] pointer-events-none"></div>
+        
+        <!-- 科技感精密網格線 (Grid Overlay) -->
+        <div class="absolute inset-0 bg-[linear-gradient(to_right,#1e293b_1px,transparent_1px),linear-gradient(to_bottom,#1e293b_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_50%,#000_70%,transparent_100%)] opacity-[0.08] pointer-events-none"></div>
+
+        <!-- 懸浮珍珠白高奢卡片 (Unified Card - Option B: Solid Pristine White) -->
+        <div class="w-full max-w-4xl bg-white rounded-[2.5rem] shadow-[0_30px_75px_-15px_rgba(0,0,0,0.65)] flex flex-col md:flex-row overflow-hidden relative z-10 animate-luxury-in">
             
-            <div class="relative z-10 text-center px-6">
-                <div class="mb-6 flex justify-center">
-                    <img src="{{ asset('S1_cropped_transparent.png') }}" alt="{{ config('app.name') }} Logo" class="w-32 h-32 object-contain drop-shadow-xl">
+            <!-- 左側品牌區 (Branding Area - Solid Premium Slate) -->
+            <div class="w-full md:w-1/2 bg-[#F8FAFC] border-b md:border-b-0 md:border-r border-slate-100 flex flex-col justify-center items-center p-8 lg:p-12 relative overflow-hidden shrink-0 select-none min-h-[320px] md:min-h-0">
+                
+                <!-- 精美淡淡的智慧販賣機背景圖 (浮水印效果 - 提升透明度) -->
+                <div class="absolute inset-0 bg-cover bg-center opacity-[0.20] pointer-events-none mix-blend-multiply" style="background-image: url('{{ asset('tech_vending_bg.png') }}');"></div>
+
+
+
+                <div class="relative z-10 flex flex-col items-center justify-center space-y-12 py-6 md:py-12">
+                    <!-- Logo -->
+                    <img src="{{ asset('starcloudlogo-Photoroom.png') }}" alt="{{ config('app.name') }} Logo" class="w-64 sm:w-72 md:w-80 h-auto object-contain drop-shadow-sm">
+                    
+                    <!-- 平台名稱 -->
+                    <div class="text-center">
+                        <h2 class="text-xl sm:text-2xl font-black text-slate-800 tracking-tight font-display">
+                            AIoT 自動化設備智慧營運平台
+                        </h2>
+                        <p class="text-[10px] font-bold text-slate-400 uppercase tracking-[0.2em] mt-2 font-mono">
+                            Smart Device Management Hub
+                        </p>
+                    </div>
                 </div>
-                <h2 class="text-3xl font-bold text-white sm:text-4xl">
-                    {{ config('app.name', 'Star Cloud') }}
-                </h2>
-                <p class="mt-3 text-lg text-blue-100">
-                    智能販賣機管理平台
-                </p>
             </div>
-        </div>
 
-        <!-- Main Content - Login Form -->
-        <div class="w-full md:w-1/2 lg:w-2/5 flex flex-col justify-center px-4 sm:px-6 md:px-8 lg:px-10 py-8">
-            <div class="max-w-md w-full mx-auto">
-                <div class="text-center mb-8">
-                    <div class="md:hidden mb-6 flex justify-center">
-                        <img src="{{ asset('S1_cropped_transparent.png') }}" alt="{{ config('app.name') }} Logo" class="w-20 h-20 object-contain drop-shadow-md">
+            <!-- 右側登入表單區 (Form Area - Solid Pure White) -->
+            <div class="flex-1 bg-white flex flex-col justify-center p-8 sm:p-10 lg:p-12 relative overflow-hidden">
+                
+
+
+                <div class="max-w-sm w-full mx-auto relative z-10">
+                    
+                    <!-- 歡迎文案 -->
+                    <div class="text-left mb-8">
+                        <h1 class="text-2xl sm:text-3xl font-black text-slate-800 tracking-tight font-display">
+                            歡迎回來
+                        </h1>
+                        <p class="mt-2 text-sm font-medium text-slate-500">
+                            請輸入您的帳號與密碼，進入管理後台
+                        </p>
                     </div>
-                    <h1 class="block text-2xl font-bold text-gray-800 dark:text-white">登入</h1>
-                    <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
-                        請輸入您的帳號密碼以繼續
-                    </p>
-                </div>
 
-                <!-- Session Status -->
-                @if (session('status'))
-                    <div class="mb-4 text-sm font-medium text-green-600">
-                        {{ session('status') }}
-                    </div>
-                @endif
+                    <!-- Session 訊息狀態 -->
+                    @if (session('status'))
+                        <div class="mb-5 p-4 bg-emerald-50 border border-emerald-100 text-emerald-700 rounded-xl text-sm font-bold animate-luxury-in">
+                            {{ session('status') }}
+                        </div>
+                    @endif
 
-                <form method="POST" action="{{ route('login') }}">
-                    @csrf
+                    <form method="POST" action="{{ route('login') }}" class="space-y-6">
+                        @csrf
 
-                    <div class="grid gap-y-4">
-                        <!-- Form Group -->
-                        <div>
-                            <label for="username" class="block text-sm mb-2 dark:text-white">帳號</label>
+                        <!-- 帳號輸入框 -->
+                        <div class="space-y-2">
+                            <label for="username" class="block text-xs font-bold text-slate-500 uppercase tracking-widest">
+                                帳號
+                            </label>
                             <div class="relative">
-                                <input type="text" id="username" name="username" value="{{ old('username') }}" class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-slate-700 dark:text-gray-400 dark:focus:ring-gray-600" required autofocus autocomplete="username">
-                                <div class="hidden absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3">
-                                    <svg class="h-5 w-5 text-red-500" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
-                                        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
+                                <span class="absolute inset-y-0 start-0 flex items-center ps-4 pointer-events-none text-slate-400">
+                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
                                     </svg>
-                                </div>
+                                </span>
+                                <input type="text" id="username" name="username" value="{{ old('username') }}" 
+                                    class="py-3 ps-11 pe-4 block w-full border border-slate-200 rounded-xl text-sm font-medium text-slate-800 placeholder-slate-400 bg-slate-50/50 focus:bg-white focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10 focus:outline-none transition-all" 
+                                    placeholder="請輸入您的帳號" required autofocus autocomplete="username">
                             </div>
                             @if ($errors->get('username'))
-                                <p class="text-xs text-red-600 mt-2" id="username-error">{{ $errors->first('username') }}</p>
+                                <p class="text-xs text-rose-500 font-bold mt-1.5" id="username-error">
+                                    {{ $errors->first('username') }}
+                                </p>
                             @endif
                         </div>
-                        <!-- End Form Group -->
 
-                        <!-- Form Group -->
-                        <div x-data="{ showPassword: false }">
+                        <!-- 密碼輸入框 -->
+                        <div class="space-y-2" x-data="{ showPassword: false }">
                             <div class="flex items-center justify-between">
-                                <label for="password" class="block text-sm mb-2 dark:text-white font-bold">密碼</label>
+                                <label for="password" class="block text-xs font-bold text-slate-500 uppercase tracking-widest">
+                                    密碼
+                                </label>
                             </div>
                             <div class="relative">
+                                <span class="absolute inset-y-0 start-0 flex items-center ps-4 pointer-events-none text-slate-400">
+                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                                        <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
+                                    </svg>
+                                </span>
                                 <input :type="showPassword ? 'text' : 'password'" id="password" name="password" 
-                                    class="py-3 px-4 block w-full border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-900 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 dark:text-gray-400 dark:focus:ring-gray-600 transition-all pr-12" 
-                                    required autocomplete="current-password">
+                                    class="py-3 ps-11 pe-12 block w-full border border-slate-200 rounded-xl text-sm font-medium text-slate-800 placeholder-slate-400 bg-slate-50/50 focus:bg-white focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10 focus:outline-none transition-all" 
+                                    placeholder="請輸入您的密碼" required autocomplete="current-password">
                                 <button type="button" @click="showPassword = !showPassword" 
-                                    class="absolute inset-y-0 end-0 flex items-center z-20 px-4 cursor-pointer text-gray-400 hover:text-blue-600 transition-colors">
+                                    class="absolute inset-y-0 end-0 flex items-center z-20 px-4 cursor-pointer text-slate-400 hover:text-blue-600 transition-colors">
                                     <svg x-show="!showPassword" class="w-4.5 h-4.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                                         <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
                                         <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
@@ -103,29 +146,32 @@
                                 </button>
                             </div>
                             @if ($errors->get('password'))
-                                <p class="text-xs text-red-600 mt-2" id="password-error">{{ $errors->first('password') }}</p>
+                                <p class="text-xs text-rose-500 font-bold mt-1.5" id="password-error">
+                                    {{ $errors->first('password') }}
+                                </p>
                             @endif
                         </div>
-                        <!-- End Form Group -->
 
-                        <!-- Checkbox -->
+                        <!-- 記住我 -->
                         <div class="flex items-center">
-                            <div class="flex">
-                                <input id="remember-me" name="remember" type="checkbox" class="shrink-0 mt-0.5 border-gray-200 rounded text-blue-600 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800">
-                            </div>
-                            <div class="ms-3">
-                                <label for="remember-me" class="text-sm dark:text-white">記住我</label>
-                            </div>
+                            <input id="remember-me" name="remember" type="checkbox" 
+                                class="shrink-0 mt-0.5 border-slate-200 rounded text-blue-600 focus:ring-blue-500/20 cursor-pointer">
+                            <label for="remember-me" class="ms-3 text-sm font-semibold text-slate-600 cursor-pointer">
+                                記住我
+                            </label>
                         </div>
-                        <!-- End Checkbox -->
 
-                        <button type="submit" class="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
+                        <!-- 提交按鈕 -->
+                        <button type="submit" 
+                            class="w-full py-3.5 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-extrabold rounded-xl border border-transparent bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white shadow-lg shadow-blue-500/25 active:scale-[0.98] focus:outline-none transition-all cursor-pointer">
                             登入
                         </button>
-                    </div>
-                </form>
+                    </form>
+                </div>
             </div>
+
         </div>
     </div>
 </body>
 </html>
+
