diff --git a/components.d.ts b/components.d.ts
deleted file mode 100644
index 72f0bc3..0000000
--- a/components.d.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-// generated by vite-plugin-components
-// read more https://github.com/vuejs/vue-next/pull/3399
-
-declare module 'vue' {
-  export interface GlobalComponents {
-    AppAddMinusButton: typeof import('./src/components/molecules/AppAddMinusButton.vue')['default']
-    AppButton: typeof import('./src/components/atoms/AppButton.vue')['default']
-    AppCard: typeof import('./src/components/atoms/AppCard.vue')['default']
-    AppCheckbox: typeof import('./src/components/molecules/AppCheckbox.vue')['default']
-    AppContainer: typeof import('./src/components/atoms/layouts/AppContainer.vue')['default']
-    AppDatepicker: typeof import('./src/components/molecules/AppDatepicker.vue')['default']
-    AppDrawer: typeof import('./src/components/molecules/AppDrawer.vue')['default']
-    AppImage: typeof import('./src/components/atoms/AppImage.vue')['default']
-    AppInput: typeof import('./src/components/atoms/AppInput.vue')['default']
-    AppLabel: typeof import('./src/components/atoms/AppLabel.vue')['default']
-    AppLink: typeof import('./src/components/atoms/AppLink.vue')['default']
-    AppLogo: typeof import('./src/components/atoms/AppLogo.vue')['default']
-    ApplyHeader: typeof import('./src/components/organisms/apply/ApplyHeader.vue')['default']
-    ApplyListHeader: typeof import('./src/components/molecules/ApplyListHeader.vue')['default']
-    ApplyListItem: typeof import('./src/components/molecules/ApplyListItem.vue')['default']
-    ApplySupply: typeof import('./src/components/templates/ApplySupply.vue')['default']
-    ApplySupplyList: typeof import('./src/components/organisms/apply/ApplySupplyList.vue')['default']
-    ApplyToolbar: typeof import('./src/components/organisms/apply/ApplyToolbar.vue')['default']
-    AppPopover: typeof import('./src/components/molecules/AppPopover.vue')['default']
-    AppSelect: typeof import('./src/components/molecules/AppSelect.vue')['default']
-    AppTitle: typeof import('./src/components/atoms/AppTitle.vue')['default']
-    AuthLayout: typeof import('./src/components/atoms/layouts/AuthLayout.vue')['default']
-    ConfirmModel: typeof import('./src/components/organisms/ConfirmModel.vue')['default']
-    DonateSchedule: typeof import('./src/components/organisms/DonateSchedule.vue')['default']
-    DonatorRegisterForm: typeof import('./src/components/organisms/DonatorRegisterForm.vue')['default']
-    FlashMessage: typeof import('./src/components/global/FlashMessage.vue')['default']
-    'Fluent:checkboxChecked20Filled': typeof import('virtual:vite-icons/fluent/checkbox-checked20-filled')['default']
-    'Fluent:checkboxUnchecked20Regular': typeof import('virtual:vite-icons/fluent/checkbox-unchecked20-regular')['default']
-    FormActions: typeof import('./src/components/molecules/form/FormActions.vue')['default']
-    FormCheckbox: typeof import('./src/components/molecules/form/FormCheckbox.vue')['default']
-    FormErrorMessage: typeof import('./src/components/atoms/FormErrorMessage.vue')['default']
-    FormInput: typeof import('./src/components/molecules/form/FormInput.vue')['default']
-    FormRadio: typeof import('./src/components/molecules/form/FormRadio.vue')['default']
-    FormSelect: typeof import('./src/components/molecules/form/FormSelect.vue')['default']
-    HomePage: typeof import('./src/components/templates/HomePage.vue')['default']
-    'Ic:roundAccountCircle': typeof import('virtual:vite-icons/ic/round-account-circle')['default']
-    'Ic:roundMenu': typeof import('virtual:vite-icons/ic/round-menu')['default']
-    IconLoading: typeof import('./src/components/atoms/IconLoading.vue')['default']
-    JamCloseCircleF: typeof import('virtual:vite-icons/jam/close-circle-f')['default']
-    LoginForm: typeof import('./src/components/organisms/LoginForm.vue')['default']
-    LoginPage: typeof import('./src/components/templates/LoginPage.vue')['default']
-    'Mdi:close': typeof import('virtual:vite-icons/mdi/close')['default']
-    'Mdi:loading': typeof import('virtual:vite-icons/mdi/loading')['default']
-    'MdiLight:delete': typeof import('virtual:vite-icons/mdi-light/delete')['default']
-    'MdiLight:minus': typeof import('virtual:vite-icons/mdi-light/minus')['default']
-    'MdiLight:plus': typeof import('virtual:vite-icons/mdi-light/plus')['default']
-    NotFound: typeof import('./src/components/templates/NotFound.vue')['default']
-    OrgInfoNavBar: typeof import('./src/components/organisms/org/OrgInfoNavBar.vue')['default']
-    OrgListCard: typeof import('./src/components/organisms/org/OrgListCard.vue')['default']
-    OrgRegisterForm: typeof import('./src/components/organisms/org/OrgRegisterForm.vue')['default']
-    ProcessLine: typeof import('./src/components/molecules/ProcessLine.vue')['default']
-    RegisterDonator: typeof import('./src/components/templates/RegisterDonator.vue')['default']
-    RegisterLinks: typeof import('./src/components/organisms/RegisterLinks.vue')['default']
-    RegisterOrg: typeof import('./src/components/templates/RegisterOrg.vue')['default']
-    ResetPassword: typeof import('./src/components/templates/ResetPassword.vue')['default']
-    ResetPasswordForm: typeof import('./src/components/organisms/ResetPasswordForm.vue')['default']
-    SSOButtons: typeof import('./src/components/organisms/SSOButtons.vue')['default']
-    SupplyCardList: typeof import('./src/components/organisms/SupplyCardList.vue')['default']
-    SupplyModal: typeof import('./src/components/organisms/SupplyModal.vue')['default']
-    TheHeader: typeof import('./src/components/templates/TheHeader.vue')['default']
-    'Uil:angleDoubleLeft': typeof import('virtual:vite-icons/uil/angle-double-left')['default']
-    'Uil:angleDoubleRight': typeof import('virtual:vite-icons/uil/angle-double-right')['default']
-    'Uil:angleLeft': typeof import('virtual:vite-icons/uil/angle-left')['default']
-    'Uim:checkCircle': typeof import('virtual:vite-icons/uim/check-circle')['default']
-    'Uim:circle': typeof import('virtual:vite-icons/uim/circle')['default']
-    WithHeader: typeof import('./src/components/atoms/layouts/WithHeader.vue')['default']
-  }
-}
-
-export { }
diff --git a/src/components/organisms/SupplyModal.vue b/src/components/organisms/SupplyModal.vue
index a929c84..a228620 100644
--- a/src/components/organisms/SupplyModal.vue
+++ b/src/components/organisms/SupplyModal.vue
@@ -1,31 +1,44 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
+
 const isOpen = ref(true)
+const supplement = ref('')
+const deliveryDays = ref(1)
+
+watch(deliveryDays, () => {
+  if (deliveryDays.value < 0)deliveryDays.value = 1
+})
+
 </script>
 <template>
   <transition name="fade">
     <div v-if="isOpen" class="relative flex flex-col items-end justify-end w-full h-screen">
-      <div class="fixed inset-0 bg-black opacity-50 abso " @click="isOpen=false" />
-      <div class="relative w-full p-4 bg-white rounded-t text-darkblue">
-        <div class="flex justify-between">
-          <h3 class="text-lg font-bold">
-            本次捐贈項目
-          </h3>
-          <button type="button" @click="isOpen=false">
-            <mdi:close />
-          </button>
+      <div class="fixed inset-0 bg-black opacity-50 " @click="isOpen=false" />
+      <div class="relative w-full px-4 pb-4 bg-white rounded-t text-darkblue  h-screen overflow-scroll">
+        <div class="bg-white py-2 sticky top-0">
+          <div class="flex justify-between ">
+            <h3 class="text-lg font-bold">
+              本次捐贈項目
+            </h3>
+            <button type="button" @click="isOpen=false">
+              <mdi:close />
+            </button>
+          </div>
+          <p class="pb-3 mt-3 text-sm font-light text-gray-400 border-gray-300">
+            請填寫可贊助數量與天數
+          </p>
         </div>
-        <p class="pb-3 mt-3 text-sm font-light text-gray-400 border-gray-300">
-          請填寫可贊助數量與天數
-        </p>
-        <div class="p-4 border border-gray-300 rounded">
+        <!-- v-for="(item, index) in items" :key="index" -->
+        <div class="p-4 border border-gray-300 rounded mb-4">
           <div class="flex justify-between">
+            <!-- item -->
             <h2>大型 X 光機</h2>
             <button type="button" class="text-red-500">
               <mdi-light:delete />
             </button>
           </div>
           <p class="pb-3 mt-3 text-sm font-light text-gray-400 border-b border-gray-300">
+            <!-- item.number -->
             06/18 前，尚需 <span class="text-primary-medium"> 100 </span> 個
           </p>
           <div class="grid grid-cols-3 gap-2 my-3 text-sm">
@@ -39,14 +52,104 @@ const isOpen = ref(true)
               <h3 class="mb-1.5">
                 預計可送達天數 <span class="text-primary-medium">*</span>
               </h3>
-              <input type="number" class="w-full p-2 text-gray-400 border border-gray-300 rounded" placeholder="請輸入天數">
+              <input v-model.number="deliveryDays" type="number" class="w-full p-2 text-gray-400 border border-gray-300 rounded" :class="{'border-red-500':deliveryDays>10,'focus:border-red-500':deliveryDays>10}" placeholder="請輸入天數">
+              <p v-show="deliveryDays>10" class="text-sm text-red-500 mt-2">
+                天數請限制於 10 天內
+              </p>
             </div>
           </div>
           <div class="mb-3">
-            <h3 class="mb-1.5">
+            <!-- item.id -->
+            <label for="message" class="block mb-1.5" @click="supplement='123'">
               備註欄
-            </h3>
+            </label>
+            <textarea
+              v-show="supplement==='123' "
+              id="message"
+              class="w-full h-20 p-3 text-sm border border-gray-300 rounded"
+              placeholder="補充說明"
+            />
+          </div>
+        </div>
+        <div class="p-4 border border-gray-300 rounded mb-4">
+          <div class="flex justify-between">
+            <!-- item -->
+            <h2>大型 X 光機</h2>
+            <button type="button" class="text-red-500">
+              <mdi-light:delete />
+            </button>
+          </div>
+          <p class="pb-3 mt-3 text-sm font-light text-gray-400 border-b border-gray-300">
+            <!-- item.number -->
+            06/18 前，尚需 <span class="text-primary-medium"> 100 </span> 個
+          </p>
+          <div class="grid grid-cols-3 gap-2 my-3 text-sm">
+            <div class="col-span-1 ">
+              <h3 class="mb-1.5">
+                可贊助數量 <span class="text-primary-medium">*</span>
+              </h3>
+              <AppAddMinusButton />
+            </div>
+            <div class="col-span-2">
+              <h3 class="mb-1.5">
+                預計可送達天數 <span class="text-primary-medium">*</span>
+              </h3>
+              <input v-model.number="deliveryDays" type="number" class="w-full p-2 text-gray-400 border border-gray-300 rounded" :class="{'border-red-500':deliveryDays>10,'focus:border-red-500':deliveryDays>10}" placeholder="請輸入天數">
+              <p v-show="deliveryDays>10" class="text-sm text-red-500 mt-2">
+                天數請限制於 10 天內
+              </p>
+            </div>
+          </div>
+          <div class="mb-3">
+            <!-- item.id -->
+            <label for="message" class="block mb-1.5" @click="supplement='123'">
+              備註欄
+            </label>
+            <textarea
+              v-show="supplement==='123' "
+              id="message"
+              class="w-full h-20 p-3 text-sm border border-gray-300 rounded"
+              placeholder="補充說明"
+            />
+          </div>
+        </div>
+        <div class="p-4 border border-gray-300 rounded mb-4">
+          <div class="flex justify-between">
+            <!-- item -->
+            <h2>大型 X 光機</h2>
+            <button type="button" class="text-red-500">
+              <mdi-light:delete />
+            </button>
+          </div>
+          <p class="pb-3 mt-3 text-sm font-light text-gray-400 border-b border-gray-300">
+            <!-- item.number -->
+            06/18 前，尚需 <span class="text-primary-medium"> 100 </span> 個
+          </p>
+          <div class="grid grid-cols-3 gap-2 my-3 text-sm">
+            <div class="col-span-1 ">
+              <h3 class="mb-1.5">
+                可贊助數量 <span class="text-primary-medium">*</span>
+              </h3>
+              <AppAddMinusButton />
+            </div>
+            <div class="col-span-2">
+              <h3 class="mb-1.5">
+                預計可送達天數 <span class="text-primary-medium">*</span>
+              </h3>
+              <input v-model.number="deliveryDays" type="number" class="w-full p-2 text-gray-400 border border-gray-300 rounded" :class="{'border-red-500':deliveryDays>10,'focus:border-red-500':deliveryDays>10}" placeholder="請輸入天數">
+              <p v-show="deliveryDays>10" class="text-sm text-red-500 mt-2">
+                天數請限制於 10 天內
+              </p>
+            </div>
+          </div>
+          <div class="mb-3">
+            <!-- item.id -->
+            <label for="message" class="block mb-1.5" @click="supplement='123'">
+              備註欄
+            </label>
             <textarea
+              v-show="supplement==='123' "
+              id="message"
               class="w-full h-20 p-3 text-sm border border-gray-300 rounded"
               placeholder="補充說明"
             />
diff --git a/src/constants.ts b/src/constants.ts
deleted file mode 100644
index 782740c..0000000
--- a/src/constants.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const API_ENDPOINT = import.meta.env.VITE_API_ENDPOINT
diff --git a/src/pages/login.vue b/src/pages/login.vue
index c700028..a2d7119 100644
--- a/src/pages/login.vue
+++ b/src/pages/login.vue
@@ -1,6 +1,5 @@
 <template>
   <WithHeader>
     <LoginPage />
-    <SupplyModal />
   </WithHeader>
 </template>
diff --git a/src/pages/text.vue b/src/pages/text.vue
deleted file mode 100644
index 0552646..0000000
--- a/src/pages/text.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <SupplyModal />
-</template>