diff --git a/src/views/calculator/size375/index.vue b/src/views/calculator/size375/index.vue
index f3e7467..c3cb577 100644
--- a/src/views/calculator/size375/index.vue
+++ b/src/views/calculator/size375/index.vue
@@ -1,22 +1,63 @@
 <script setup>
-import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
-import { onUnmounted, ref, watch, onMounted, computed } from "vue";
+import { ref } from 'vue'
+import { NCard, NRadioGroup, NRadio, NInput, NDatePicker, NButton } from 'naive-ui'
 
+const investmentType = ref('amount')
+const amount = ref(10000)
+const dividendType = ref('notReinvested')
+const investmentDate = ref(null)
+
+const handleSubmit = () => {
+}
 </script>
 
 <template>
-  <header className="header">
-  375
-  </header>
-  <main ref="main">
-
-  </main>
-  <footer>
-
-  </footer>
+  <div class="flex-center h-60vh  px-2 py-4 animate-bg-move">
+    <n-card
+      class="w-full max-w-90vw glass-card animate-bounce-in shadow-lg border-none"
+      :content-style="{padding: '20px 10px'}"
+      :header-style="{background: 'transparent'}"
+    >
+      <div class="flex flex-col gap-6">
+        <!-- 投资类型 -->
+        <div>
+          <div class="text-base font-bold mb-2">Investment Type</div>
+          <n-radio-group v-model:value="investmentType" name="investmentType">
+            <n-radio value="amount">Amount invested (in dollars)</n-radio>
+            <n-radio value="shares">Number of shares purchased</n-radio>
+          </n-radio-group>
+        </div>
+        <!-- 金额与分红 -->
+        <div>
+          <div class="text-base font-bold mb-2">Amount to Calculate</div>
+          <n-input v-model:value="amount" type="number" class="mb-2" size="medium" placeholder="Enter amount" />
+          <n-radio-group v-model:value="dividendType" name="dividendType">
+            <n-radio value="reinvested">Dividends reinvested</n-radio>
+            <n-radio value="notReinvested">Dividends not reinvested</n-radio>
+          </n-radio-group>
+        </div>
+        <!-- 投资日期 -->
+        <div>
+          <div class="text-base font-bold mb-2">Investment Date</div>
+          <n-date-picker v-model:value="investmentDate" type="date" class="w-full" size="medium" placeholder="Select date" />
+        </div>
+      </div>
+      <div class="flex justify-end mt-6">
+        <n-button type="primary" size="medium" class="px-6 py-2 rounded-full animate-bounce-in hover:scale-105 transition-transform duration-300 shadow" @click="handleSubmit">
+          Submit
+        </n-button>
+      </div>
+    </n-card>
+  </div>
 </template>
 
-<style scoped lang="scss">
-
+<style scoped>
+.glass-card {
+  background: rgba(255,255,255,0.18);
+  box-shadow: 0 4px 16px 0 rgba(31, 38, 135, 0.18);
+  backdrop-filter: blur(10px);
+  border-radius: 20px;
+  border: 1px solid rgba(255,255,255,0.18);
+}
 </style>