diff --git a/wwwroot/index.html b/wwwroot/index.html
index b674c01..b5f8a49 100644
--- a/wwwroot/index.html
+++ b/wwwroot/index.html
@@ -1,74 +1,53 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
-    <!-- 문자 인코딩 설정 -->
-    <meta charset="utf-8" />
-    <!-- 반응형 웹 설정 -->
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <!-- 브라우저의 탭에 표시되는 제목 -->
-    <title>AcaMate</title>
-    <!-- 라우팅 시스템을 위한 기본 주소. 절대 경로로 링크를 인식하게 함 -->
-    <base href="/" />
-    <!-- CSS 파일 연결 부분 -->
-    <link rel="stylesheet" href="_content/Blazored.Modal/blazored-modal.css" />
-        <!-- BootStrap 프레임 워크 스타일 -->
-    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
-        <!-- 프로젝트 전용 커스텀 스타일-->
-    <link rel="stylesheet" href="css/app.css" />
-        <!-- .razor.css 들을 묶어서 자동으로 생성된 파일 -->    
-    <link href="Front.styles.css" rel="stylesheet" />
-    
-    <!-- 브라우저 탭에 표시될 파비콘 설정 -->
-    <link rel="icon" type="image/png" href="favicon.png" />
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>AcaMate</title>
+  <base href="/" />
+  <link rel="stylesheet" href="css/tailwind.css" />
+  <link rel="stylesheet" href="css/app.css" />
+  <link rel="icon" type="image/png" href="favicon.png" />
 </head>
+<body class="bg-gray-50 text-gray-900 font-sans">
 
-
-<body>
-
-    <div class="loading-overlay">
-        <div class="custom-loading">
-                        <div class="logo-mask">
-                            <img src="logo.png" alt="logo" />
-                            <div class="logo-progress"></div>
-                        </div>
-            
-            <div class="loading-text">Loading...</div>
-        </div>
-        <!-- Blazor 가 제대로 실행이 되면 이 자리에 .razor UI가 들어가게 됨 -->
+<!-- 로딩 오버레이 -->
+<div class="fixed inset-0 z-50 flex items-center justify-center bg-gray-100" id="loading-overlay">
+  <!-- 로딩 오버레이 내부 -->
+  <div class="flex flex-col items-center">
+    <div class="relative w-48 h-48 overflow-hidden">
+      <img src="/logo.png" alt="logo"
+           class="absolute top-0 left-0 w-full h-full clip-reveal" />
     </div>
-    
-    <div id="app"></div>
+    <div class="mt-4 text-lg text-gray-700 animate-blink">Loading...</div>
+  </div>
+</div>
 
-    <div id="blazor-error-ui">
-        An unhandled error has occurred.
-        <a href="" class="reload">Reload</a>
-        <a class="dismiss">🗙</a>
-    </div>
-    
-    <!-- WASM 를 브라우저에서 실행시켜주는 핵심 JS 파일이며 이게 실행되어야 .razor 파일들이 렌더링된다. -->
-    <script src="_framework/blazor.webassembly.js" autostart="false"></script>
+<div id="app"></div>
 
-    <!-- 3초 유지 스크립트 -->
-    <script>
-        const MIN_LOADING_MS = 2700;
-        const loadingStart = performance.now();
+<!-- Blazor 에러 UI -->
+<div id="blazor-error-ui" class="hidden fixed bottom-0 left-0 w-full bg-yellow-100 text-red-800 p-4 shadow z-50">
+  An unhandled error has occurred.
+  <a href="" class="underline text-blue-600 ml-2">Reload</a>
+  <button class="ml-4 text-red-600 font-bold dismiss">✕</button>
+</div>
 
-        Blazor.start().then(() => {
-            console.log("✅ Blazor 로딩 완료됨");
-            const elapsed = performance.now() - loadingStart;
-            const remaining = Math.max(0, MIN_LOADING_MS - elapsed);
-            setTimeout(() => {
-                const overlay = document.querySelector('.loading-overlay');
-                if (overlay) {
-                    console.log("✅ 오버레이 제거");
-                    overlay.remove();
-                }
-            }, remaining);
-        }).catch(err => {
-            console.error("❌ Blazor 로딩 실패", err);
-        });
-    </script>
+<!-- Blazor WASM 로딩 스크립트 -->
+<script src="_framework/blazor.webassembly.js" autostart="false"></script>
+<script>
+  const MIN_LOADING_MS = 2700;
+  const loadingStart = performance.now();
+
+  Blazor.start().then(() => {
+    const elapsed = performance.now() - loadingStart;
+    const remaining = Math.max(0, MIN_LOADING_MS - elapsed);
+    setTimeout(() => {
+      const overlay = document.getElementById('loading-overlay');
+      if (overlay) overlay.remove();
+    }, remaining);
+  }).catch(err => {
+    console.error("❌ Blazor 로딩 실패", err);
+  });
+</script>
 </body>
-
 </html>
