diff --git a/components.d.ts b/components.d.ts
index 6487e8a..b7a1085 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -29,6 +29,8 @@ declare module 'vue' {
     IonCardTitle: typeof import('@ionic/vue')['IonCardTitle']
     IonCheckbox: typeof import('@ionic/vue')['IonCheckbox']
     IonContent: typeof import('@ionic/vue')['IonContent']
+    IonDatetime: typeof import('@ionic/vue')['IonDatetime']
+    IonDatetimeButton: typeof import('@ionic/vue')['IonDatetimeButton']
     IonHeader: typeof import('@ionic/vue')['IonHeader']
     IonIcon: typeof import('@ionic/vue')['IonIcon']
     IonImg: typeof import('@ionic/vue')['IonImg']
@@ -57,8 +59,10 @@ declare module 'vue' {
     RouterView: typeof import('vue-router')['RouterView']
     UiAvatar: typeof import('./src/components/ui/avatar/index.vue')['default']
     UiDivider: typeof import('./src/components/ui/divider/index.vue')['default']
+    UiForm: typeof import('./src/components/ui/form/index.vue')['default']
     UiInput: typeof import('./src/components/ui/input/index.vue')['default']
     UiInputLabel: typeof import('./src/components/ui/input-label/index.vue')['default']
+    UiSelect: typeof import('./src/components/ui/select/index.vue')['default']
     UiSelectLabel: typeof import('./src/components/ui/select-label/index.vue')['default']
   }
 }
@@ -82,6 +86,8 @@ declare global {
   const IonCardTitle: typeof import('@ionic/vue')['IonCardTitle']
   const IonCheckbox: typeof import('@ionic/vue')['IonCheckbox']
   const IonContent: typeof import('@ionic/vue')['IonContent']
+  const IonDatetime: typeof import('@ionic/vue')['IonDatetime']
+  const IonDatetimeButton: typeof import('@ionic/vue')['IonDatetimeButton']
   const IonHeader: typeof import('@ionic/vue')['IonHeader']
   const IonIcon: typeof import('@ionic/vue')['IonIcon']
   const IonImg: typeof import('@ionic/vue')['IonImg']
@@ -110,7 +116,9 @@ declare global {
   const RouterView: typeof import('vue-router')['RouterView']
   const UiAvatar: typeof import('./src/components/ui/avatar/index.vue')['default']
   const UiDivider: typeof import('./src/components/ui/divider/index.vue')['default']
+  const UiForm: typeof import('./src/components/ui/form/index.vue')['default']
   const UiInput: typeof import('./src/components/ui/input/index.vue')['default']
   const UiInputLabel: typeof import('./src/components/ui/input-label/index.vue')['default']
+  const UiSelect: typeof import('./src/components/ui/select/index.vue')['default']
   const UiSelectLabel: typeof import('./src/components/ui/select-label/index.vue')['default']
 }
\ No newline at end of file
diff --git a/src/api/enum.ts b/src/api/enum.ts
index 2a9572e..cca8cc7 100644
--- a/src/api/enum.ts
+++ b/src/api/enum.ts
@@ -19,3 +19,9 @@ export enum ChainEnum {
   ERC20 = "ERC20",
   TRC20 = "TRC20",
 }
+
+export enum GenderEnum {
+  MALE = "male",
+  FEMALE = "female",
+  OTHER = "other",
+}
diff --git a/src/api/types.ts b/src/api/types.ts
index 83a269b..a96953a 100644
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -18,4 +18,4 @@ export type WithdrawBody = Omit<Parameters<typeof client.api.withdraw.post>[0],
 
 export type UserProfileData = Treaty.Data<typeof client.api.user.profile.get>["userProfile"];
 
-export type UpdateUserProfileBody = Parameters<typeof client.api.user.profile.put>[0];
+export type UpdateUserProfileBody = NonNullable<Parameters<typeof client.api.user.profile.put>[0]>;
diff --git a/src/components/ui/form/index.vue b/src/components/ui/form/index.vue
new file mode 100644
index 0000000..4a8f3df
--- /dev/null
+++ b/src/components/ui/form/index.vue
@@ -0,0 +1,9 @@
+<script lang='ts' setup>
+
+</script>
+
+<template>
+  hello world
+</template>
+
+<style lang='css' scoped></style>
diff --git a/src/views/user/settings.vue b/src/views/user/settings.vue
index 3a3b92b..f63d020 100644
--- a/src/views/user/settings.vue
+++ b/src/views/user/settings.vue
@@ -3,6 +3,7 @@ import type { UpdateUserProfileBody, UserProfileData } from "@/api/types";
 import { alertController, toastController } from "@ionic/vue";
 import { arrowBackOutline } from "ionicons/icons";
 import { client } from "@/api";
+import { GenderEnum } from "@/api/enum";
 import { authClient } from "@/auth";
 
 const router = useRouter();
@@ -69,6 +70,14 @@ async function handleEditField(field: keyof UpdateUserProfileBody, label: string
   await alert.present();
 }
 
+async function onUpdateSelect(value: UpdateUserProfileBody["gender"]) {
+  await updateProfile({ gender: value } as UpdateUserProfileBody);
+}
+async function onChangeDateTime(event: CustomEvent) {
+  const selectedDate = useDateFormat(event.detail.value, "YYYY-MM-DD");
+  await updateProfile({ birthday: selectedDate.value } as UpdateUserProfileBody);
+}
+
 async function handleSignOut() {
   const alert = await alertController.create({
     header: "Sign Out",
@@ -133,48 +142,19 @@ onMounted(() => {
           </ion-label>
         </ion-item>
 
-        <ion-item button @click="handleEditField('gender', 'Gender')">
-          <ion-label>
-            <p class="text-xs text-text-400">
-              Gender
-            </p>
-            <h2 class="mt-1">
-              {{ userProfile?.gender || 'Not set' }}
-            </h2>
-          </ion-label>
+        <ion-item button>
+          <ion-select interface="action-sheet" toggle-icon="" label-placement="floating" :model-value="userProfile?.gender" label="Gender" placeholder="Select Gender" @update:model-value="onUpdateSelect">
+            <ion-select-option v-for="item in GenderEnum" :key="item" :value="item">
+              {{ item }}
+            </ion-select-option>
+          </ion-select>
         </ion-item>
 
-        <ion-item button @click="handleEditField('birthday', 'Birthday')">
-          <ion-label>
-            <p class="text-xs text-text-400">
-              Birthday
-            </p>
-            <h2 class="mt-1">
-              {{ userProfile?.birthday || 'Not set' }}
-            </h2>
-          </ion-label>
-        </ion-item>
-
-        <ion-item button @click="handleEditField('country', 'Country')">
-          <ion-label>
-            <p class="text-xs text-text-400">
-              Country
-            </p>
-            <h2 class="mt-1">
-              {{ userProfile?.country || 'Not set' }}
-            </h2>
-          </ion-label>
-        </ion-item>
-
-        <ion-item button @click="handleEditField('city', 'City')">
-          <ion-label>
-            <p class="text-xs text-text-400">
-              City
-            </p>
-            <h2 class="mt-1">
-              {{ userProfile?.city || 'Not set' }}
-            </h2>
-          </ion-label>
+        <ion-item button>
+          <ion-datetime-button datetime="datetime" color="primary" />
+          <ion-modal :keep-contents-mounted="true">
+            <ion-datetime id="datetime" :value="userProfile?.birthday" presentation="date" :prefer-wheel="true" @ion-change="onChangeDateTime" />
+          </ion-modal>
         </ion-item>
       </ion-list>
 
@@ -192,4 +172,24 @@ onMounted(() => {
 ion-avatar {
   --border-radius: 50%;
 }
+ion-item {
+  --min-height: 60px;
+}
+ion-datetime {
+  --background: rgb(255 255 255);
+  --background-rgb: 255, 255, 255;
+  --wheel-highlight-background: rgb(194 194 194);
+  --wheel-fade-background-rgb: 255, 255, 255;
+  border-radius: 16px;
+  overflow: hidden;
+}
+@media (prefers-color-scheme: dark) {
+  ion-datetime {
+    --background: rgb(15, 15, 15);
+    --background-rgb: 15, 15, 15;
+    --wheel-highlight-background: rgb(50, 50, 50);
+    --wheel-highlight-border-radius: 48px;
+    --wheel-fade-background-rgb: 15, 15, 15;
+  }
+}
 </style>