diff --git a/src/views/email-alerts/size768/index.vue b/src/views/email-alerts/size768/index.vue
index c6fc7d0..221a7bb 100644
--- a/src/views/email-alerts/size768/index.vue
+++ b/src/views/email-alerts/size768/index.vue
@@ -1,6 +1,6 @@
 <script setup>
-import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
-import { onUnmounted, ref, watch, onMounted, computed } from "vue";
+import { ref } from "vue";
+
 import axios from "axios";
 const form = ref({
   firstName: "",
@@ -8,9 +8,8 @@ const form = ref({
   email: "",
   company: "",
   phone: "",
-  alertType: "all",
 });
-const submitted = ref(false);
+const submitted = ref(true);
 
 async function handleSubmit(e) {
   e.preventDefault();
@@ -26,132 +25,271 @@ async function handleSubmit(e) {
 </script>
 
 <template>
-  <main ref="main">
-    <main
-      class="min-h-70vh flex flex-col items-center justify-center relative px-6 py-10"
+  <div class="alerts-container">
+    <!-- Title Section -->
+    <!-- 未提交 -->
+    <div v-if="!submitted" class="title-section">
+      <div class="title-decoration"></div>
+      <div class="title">E-Mail Alerts</div>
+      <div class="subtitle">* Required Fields</div>
+    </div>
+    <!-- 已提交 -->
+    <div v-else class="title-section">
+      <div class="title-decoration"></div>
+      <div class="title">Submitted successfully!</div>
+      <div class="subtitle">The information you submitted is as follows:</div>
+    </div>
+    <!-- Form Card -->
+    <div
+      class="form-card relative"
+      :style="{
+        width: '100%',
+        height: submitted ? '593px' : 'auto',
+      }"
     >
-      <div
-        class="w-[840px] max-w-90vw p-6 bg-white/95 rounded-2xl shadow-lg animate-bounce-in"
-      >
-        <template v-if="!submitted">
-          <h2
-            class="text-2xl font-bold text-#ff7bac mb-3 text-center tracking-wide"
-          >
-            E-Mail Alerts
-          </h2>
-          <p class="text-sm text-gray-500 mb-5 text-center">
-            * Required Fields
-          </p>
-          <form class="flex flex-col gap-4" @submit="handleSubmit">
-            <div>
-              <label class="block text-gray-700 font-semibold mb-1.5 text-base"
-                >* First Name</label
-              >
-              <input
-                v-model="form.firstName"
-                type="text"
-                class="w-full px-3 py-2 rounded-lg ring-4 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
-              />
+      <template v-if="!submitted">
+        <form class="form-content" @submit="handleSubmit">
+          <div class="form-group mt-[36px]">
+            <label for="firstName">* First Name</label>
+            <input
+              id="firstName"
+              v-model="form.firstName"
+              type="text"
+              required
+            />
+          </div>
+          <div class="form-group">
+            <label for="lastName">* Last Name</label>
+            <input id="lastName" v-model="form.lastName" type="text" required />
+          </div>
+          <div class="form-group">
+            <label for="email">* Email</label>
+            <input id="email" v-model="form.email" type="email" required />
+          </div>
+          <div class="form-group">
+            <label for="company">* Company</label>
+            <input id="company" v-model="form.company" type="text" required />
+          </div>
+          <div class="form-group">
+            <label for="phone">* Phone</label>
+            <input id="phone" v-model="form.phone" type="tel" />
+          </div>
+          <button type="submit" class="submit-btn">Submit</button>
+        </form>
+      </template>
+      <template v-else>
+        <div class="submitted-data">
+          <div class="submitted-data-content">
+            <div class="submitted-row">
+              <span class="label">First Name：</span>
+              <span class="value">{{ form.firstName || "Not filled in" }}</span>
             </div>
-            <div>
-              <label class="block text-gray-700 font-semibold mb-1.5 text-base"
-                >* Last Name</label
-              >
-              <input
-                v-model="form.lastName"
-                type="text"
-                class="w-full px-3 py-2 rounded-lg ring-4 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
-              />
+            <div class="submitted-row">
+              <span class="label">Last Name：</span>
+              <span class="value">{{ form.lastName || "Not filled in" }}</span>
             </div>
-            <div>
-              <label class="block text-gray-700 font-semibold mb-1.5 text-base"
-                >* Email</label
-              >
-              <input
-                v-model="form.email"
-                type="email"
-                class="w-full px-3 py-2 rounded-lg ring-4 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
-              />
+            <div class="submitted-row">
+              <span class="label">Email：</span>
+              <span class="value">{{ form.email || "Not filled in" }}</span>
             </div>
-            <div>
-              <label class="block text-gray-700 font-semibold mb-1.5 text-base"
-                >* Company</label
-              >
-              <input
-                v-model="form.company"
-                type="text"
-                class="w-full px-3 py-2 rounded-lg ring-4 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
-              />
+            <div class="submitted-row">
+              <span class="label">Company：</span>
+              <span class="value">{{ form.company || "Not filled in" }}</span>
             </div>
-            <div>
-              <label class="block text-gray-700 font-semibold mb-1.5 text-base"
-                >Phone</label
-              >
-              <input
-                v-model="form.phone"
-                type="tel"
-                class="w-full px-3 py-2 rounded-lg ring-4 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
-              />
-            </div>
-            <button
-              type="submit"
-              class="w-full py-3.5 rounded-xl text-white font-bold text-lg active:scale-95 transition-all duration-200 animate-bounce-in animate-delay-200 mt-3 submit-btn"
-            >
-              Submit
-            </button>
-          </form>
-        </template>
-        <template v-else>
-          <div
-            class="flex flex-col items-center justify-center min-h-[240px] animate-bounce-in"
-          >
-            <span
-              class="i-mdi:check-circle-outline text-green-500 text-5xl mb-4"
-            ></span>
-            <h2 class="text-xl font-bold text-#ff7bac mb-3">
-              Submitted successfully!
-            </h2>
-            <div class="text-gray-700 text-base mb-4">
-              The information you submitted is as follows:
-            </div>
-            <div
-              class="w-full bg-white/90 rounded-xl shadow p-4 space-y-2 text-gray-800 text-base"
-            >
-              <div>
-                <span class="font-semibold">First Name：</span
-                >{{ form.firstName }}
-              </div>
-              <div>
-                <span class="font-semibold">Last Name：</span
-                >{{ form.lastName }}
-              </div>
-              <div>
-                <span class="font-semibold">Email：</span>{{ form.email }}
-              </div>
-              <div>
-                <span class="font-semibold">Company：</span>{{ form.company }}
-              </div>
-              <div>
-                <span class="font-semibold">Phone：</span
-                >{{ form.phone || "(Not filled)" }}
-              </div>
-              <div>
-                <span class="font-semibold">Alert Type：</span
-                >{{
-                  form.alertType === "all" ? "All Alerts" : "Customize Alerts"
-                }}
-              </div>
+            <div class="submitted-row">
+              <span class="label">Phone：</span>
+              <span class="value">{{ form.phone || "Not filled in" }}</span>
             </div>
           </div>
-        </template>
-      </div>
-    </main>
-  </main>
+        </div>
+        <div class="submitted-bg"></div>
+      </template>
+    </div>
+  </div>
 </template>
 
 <style scoped lang="scss">
-/* Keep tablet background simple */
+.alerts-container {
+  width: 650 * 2.5px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.title-section {
+  margin-top: 38 * 2.5px;
+  display: flex;
+  flex-direction: column;
+  gap: 8 * 2.5px;
+  padding: 0 16 * 2.5px;
+  margin-bottom: 32 * 2.5px;
+  align-self: center;
+}
+
+.title-decoration {
+  width: 58 * 2.5px;
+  height: 7 * 2.5px;
+  background: #ff7bac;
+  margin: auto 0;
+  align-self: center;
+}
+
+.title {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 500;
+  font-size: 32 * 2.5px;
+  line-height: 1.4em;
+  color: #000000;
+  letter-spacing: 0.03em;
+}
+
+.subtitle {
+  font-family: "PingFang SC", sans-serif;
+  font-size: 14 * 2.5px;
+  line-height: 1.375em;
+  color: #455363;
+  letter-spacing: 0.48 * 2.5px;
+  align-self: center;
+}
+
+.form-card {
+  width: 100%;
+  background-color: white;
+  border-radius: 16 * 2.5px;
+  padding: 24 * 2.5px;
+  box-shadow: 0px 3 * 2.5px 14 * 2.5px 0px rgba(0, 0, 0, 0.16);
+  animation: fade-in 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.form-content {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 16 * 2.5px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8 * 2.5px;
+
+  label {
+    font-family: "PingFang SC", sans-serif;
+    font-weight: 500;
+    font-size: 14 * 2.5px;
+    line-height: 1.375em;
+    color: #000000;
+    letter-spacing: 0.48 * 2.5px;
+  }
+
+  input {
+    height: 38 * 2.5px;
+    border: 1 * 2.5px solid #e0e0e6;
+    border-radius: 8 * 2.5px;
+    padding: 0 12 * 2.5px;
+    font-size: 14 * 2.5px;
+    outline: none;
+    transition: border-color 0.3s;
+
+    &:focus {
+      border-color: #ff7bac;
+    }
+  }
+}
 .submit-btn {
-  background: linear-gradient(to right, #ff7bac, #00ffff);
+  height: 60 * 2.5px;
+  background: #ff7bac;
+  border-radius: 8 * 2.5px;
+  border: none;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 500;
+  font-size: 24 * 2.5px;
+  line-height: 32 * 2.5px;
+  color: white;
+  letter-spacing: 1.2 * 2.5px;
+  cursor: pointer;
+  transition: opacity 0.3s;
+  margin-top: 8 * 2.5px; // 16px (from figma form-group gap) + 8px = 24px
+  margin-bottom: 16 * 2.5px;
+
+  &:hover {
+    opacity: 0.9;
+  }
+}
+
+.success-title {
+  font-size: 24px;
+  font-weight: bold;
+  color: #ff7bac;
+  margin-bottom: 16px;
+}
+
+.success-info {
+  margin-bottom: 24px;
+  color: #455363;
+}
+
+.submitted-data {
+  padding: 36 * 2.5px 24 * 2.5px 24 * 2.5px;
+  border-radius: 16 * 2.5px;
+  width: 678 * 2.5px;
+  height: 428 * 2.5px;
+  flex-shrink: 0;
+}
+.submitted-bg {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url("@/assets/image/768/email-alerts-submit.png");
+  background-repeat: no-repeat;
+  background-position: bottom;
+  background-size: 100%;
+}
+
+.submitted-data-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16 * 2.5px;
+  padding: 16 * 2.5px 0;
+}
+
+.submitted-row {
+  display: flex;
+  font-family: "PingFang SC", sans-serif;
+  font-size: 14 * 2.5px;
+  line-height: 1.375em;
+  letter-spacing: 0.48 * 2.5px;
+  width: 280 * 2.5px;
+}
+
+.label {
+  font-weight: 500;
+  color: #000000;
+  width: 110 * 2.5px;
+  flex-shrink: 0;
+}
+
+.value {
+  font-weight: 400;
+  color: #455363;
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 </style>