diff --git a/frontend/components/dashboard/ScanTerminalDashboard.tsx b/frontend/components/dashboard/ScanTerminalDashboard.tsx
index 522fe953..5685914e 100644
--- a/frontend/components/dashboard/ScanTerminalDashboard.tsx
+++ b/frontend/components/dashboard/ScanTerminalDashboard.tsx
@@ -56,6 +56,8 @@ import {
   useScanTerminalTheme,
   useUserLocalClock,
 } from "@/components/dashboard/scan-terminal/use-scan-terminal-ui-state";
+import { ScanTerminalLoadingScreen } from "@/components/dashboard/scan-terminal/ScanTerminalShellParts";
+import { scanRootClass } from "@/components/dashboard/scan-root-styles";
 import { useRelativeTime } from "@/hooks/useRelativeTime";
 
 function createEmptyAccess(loading = true): ProAccessState {
@@ -1165,7 +1167,7 @@ function ScanTerminalScreen() {
   const isPro =
     hydrated && (proAccess.subscriptionActive || canUseLocalFullAccess);
   const userLocalTime = useUserLocalClock();
-  useScanTerminalTheme();
+  const { themeMode } = useScanTerminalTheme();
 
   useEffect(() => {
     let cancelled = false;
@@ -1253,11 +1255,12 @@ function ScanTerminalScreen() {
 
   if (!hydrated || (proAccess.loading && !canUseLocalFullAccess)) {
     return (
-      <div className="grid h-screen w-full place-items-center bg-[#e9edf3]">
-        <div className="rounded border border-slate-300 bg-white px-5 py-4 text-sm font-bold text-slate-600 shadow-sm">
-          Loading paid terminal...
-        </div>
-      </div>
+      <ScanTerminalLoadingScreen
+        isEn={isEn}
+        rootClassName={scanRootClass}
+        themeMode={themeMode}
+        userLocalTime={userLocalTime}
+      />
     );
   }
 
diff --git a/frontend/components/dashboard/ScanTerminalState.module.css b/frontend/components/dashboard/ScanTerminalState.module.css
index 24b82af3..a82b7dd7 100644
--- a/frontend/components/dashboard/ScanTerminalState.module.css
+++ b/frontend/components/dashboard/ScanTerminalState.module.css
@@ -124,8 +124,8 @@
 
 .root :global(.scan-loading-spinner-wrapper) {
   position: relative;
-  width: 90px;
-  height: 90px;
+  width: 96px;
+  height: 96px;
   display: grid;
   place-items: center;
   margin: 0 auto;
@@ -134,17 +134,19 @@
 .root :global(.scan-loading-spinner-ring) {
   position: absolute;
   inset: 0;
-  border: 1.5px solid transparent;
-  border-top-color: var(--color-text-primary);
-  border-right-color: var(--color-text-primary);
+  border: 2px solid transparent;
+  border-top-color: #3b82f6;
+  border-right-color: #60a5fa;
   border-radius: 50%;
-  animation: scan-loading-spin 1s linear infinite;
+  animation: scan-loading-spin 0.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  box-shadow: 0 0 12px rgba(59, 130, 246, 0.12);
 }
 
 .root :global(.scan-loading-spinner-logo) {
-  width: 44px;
-  height: 44px;
+  width: 48px;
+  height: 48px;
   object-fit: contain;
+  border-radius: 8px;
 }
 
 .root :global(.scan-loading-copy-block) {
diff --git a/frontend/components/dashboard/scan-terminal/LoadingSignal.tsx b/frontend/components/dashboard/scan-terminal/LoadingSignal.tsx
index 37d7a15c..514c9038 100644
--- a/frontend/components/dashboard/scan-terminal/LoadingSignal.tsx
+++ b/frontend/components/dashboard/scan-terminal/LoadingSignal.tsx
@@ -18,12 +18,9 @@ export function LoadingSignal({
       <div className="scan-loading-spinner-wrapper" aria-hidden="true">
         <div className="scan-loading-spinner-ring" />
         <img
-          src="/static/logo.png"
+          src="/apple-touch-icon.png"
           alt="PolyWeather"
           className="scan-loading-spinner-logo"
-          onError={(e) => {
-            (e.target as HTMLImageElement).src = "/logo.png";
-          }}
         />
       </div>
       <div className="scan-loading-copy-block">