diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..2518939
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,118 @@
+<!doctype html>
+<html lang="zh-Hant">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>Excel 檔案處理引擎</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
+
+        :root {
+            --primary-color: #00aeff;
+            --background-color: #121212;
+            --surface-color: #1e1e1e;
+            --text-color: #e0e0e0;
+            --text-muted-color: #888;
+            --border-color: #2c2c2c;
+        }
+
+        body {
+            background-color: var(--background-color);
+            color: var(--text-color);
+            font-family: 'Roboto', sans-serif;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            min-height: 100vh;
+        }
+        .container {
+            max-width: 600px;
+            background: var(--surface-color);
+            padding: 40px;
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px var(--primary-color-t);
+            transition: all 0.3s ease;
+        }
+        h2 {
+            color: var(--primary-color);
+            font-weight: 700;
+            letter-spacing: 1px;
+            text-shadow: 0 0 5px rgba(0, 174, 255, 0.5);
+        }
+        .text-muted {
+            color: var(--text-muted-color) !important;
+        }
+        .custom-file-input {
+            color: var(--text-color);
+        }
+        .custom-file-label {
+            background-color: #2a2a2a;
+            border: 1px solid var(--border-color);
+            color: var(--text-muted-color);
+        }
+        .custom-file-input:focus ~ .custom-file-label {
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 0.2rem rgba(0, 174, 255, 0.25);
+        }
+        .custom-file-input:lang(zh-Hant) ~ .custom-file-label::after {
+            content: "瀏覽";
+            background-color: var(--primary-color);
+            color: #fff;
+        }
+        .btn-primary {
+            background-color: var(--primary-color);
+            border-color: var(--primary-color);
+            font-weight: bold;
+            letter-spacing: 0.5px;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 15px rgba(0, 174, 255, 0.2);
+        }
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(0, 174, 255, 0.4);
+            background-color: #0099e6;
+            border-color: #0099e6;
+        }
+        .alert-danger {
+            background-color: #4a1a2c;
+            border-color: #a83c53;
+            color: #f8d7da;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h2 class="text-center mb-3">Safe launch 報告轉換</h2>
+        <p class="text-muted text-center mb-4">上傳SPC的Raw data (.xls/.xlsx)，系統將自動化執行數據轉換與統計。</p>
+        <form method=post enctype=multipart/form-data class="mt-4">
+            <div class="custom-file">
+                <input type=file name=file class="custom-file-input" id="customFile">
+                <label class="custom-file-label" for="customFile">選擇檔案...</label>
+            </div>
+            <button type="submit" class="btn btn-primary btn-block mt-4">上傳並處理</button>
+        </form>
+        {% with messages = get_flashed_messages() %}
+          {% if messages %}
+            <div class="alert alert-danger flash-message" role="alert">
+              {% for message in messages %}
+                {{ message }}
+              {% endfor %}
+            </div>
+          {% endif %}
+        {% endwith %}
+    </div>
+
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+    <script>
+        // 讓上傳框顯示選擇的檔名
+        $('.custom-file-input').on('change', function(event) {
+            var inputFile = event.currentTarget;
+            $(inputFile).parent()
+                .find('.custom-file-label')
+                .html(inputFile.files[0].name);
+        });
+    </script>
+</body>
+</html>
