diff --git a/src/renderer/index.html b/src/renderer/index.html
index f21888d3f9..e1e049fa6c 100644
--- a/src/renderer/index.html
+++ b/src/renderer/index.html
@@ -6,9 +6,25 @@
     <meta
       http-equiv="Content-Security-Policy"
       content="default-src 'self'; connect-src *; script-src 'self' *; worker-src 'self' blob:; style-src 'self' 'unsafe-inline' *; font-src 'self' data: *; img-src 'self' data: file: *; frame-src * file:" />
+    <style>
+      #spinner {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+      #spinner img {
+        width: 100px;
+        height: 100px;
+        border-radius: 50%;
+      }
+    </style>
   </head>
   <body>
     <div id="root"></div>
+    <div id="spinner">
+      <img src="/src/assets/images/logo.png" />
+    </div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/src/renderer/src/hooks/useAppInit.ts b/src/renderer/src/hooks/useAppInit.ts
index 673ff3f995..21e71deb6c 100644
--- a/src/renderer/src/hooks/useAppInit.ts
+++ b/src/renderer/src/hooks/useAppInit.ts
@@ -21,6 +21,7 @@ export function useAppInit() {
   }, [avatar, dispatch])
 
   useEffect(() => {
+    document.getElementById('spinner')?.remove()
     runAsyncFunction(async () => {
       const { isPackaged } = await window.api.getAppInfo()
       isPackaged && setTimeout(window.api.checkForUpdate, 3000)
