diff --git a/app/pages/settings/theme.vue b/app/pages/settings/theme.vue
new file mode 100644
index 0000000..588a62b
--- /dev/null
+++ b/app/pages/settings/theme.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: "dashboard"
+})
+
+const color_choose = ref(["Cyan","Red","Green","Blue","Purple"])
+
+</script>
+
+<template>
+    <DashboardHeader title="Customization" />
+
+    <UContainer class="mt-4 max-w-full">
+        <UFormField
+          label="Color"
+          orientation="horizontal"
+          description="Select your color theme"
+          class=""
+        >
+          <UColorModeSelect class="" />
+        </UFormField>
+    </UContainer>
+</template>
+
diff --git a/app/pages/settings/ui.vue b/app/pages/settings/ui.vue
deleted file mode 100644
index 70df8c5..0000000
--- a/app/pages/settings/ui.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<script setup lang="ts">
-definePageMeta({
-  layout: "dashboard"
-})
-</script>
-
-<template>
-    <DashboardHeader title="Customization" />
-</template>
-
-<style scoped>
-
-</style>
\ No newline at end of file