diff --git a/locales/en.yml b/locales/en.yml
index 23a074e..9deffcd 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -162,3 +162,9 @@ not-found: Not found
 
 notifications:
   empty: No notifications
+
+customize:
+  title: Customize
+  theme: Theme
+  color: Color
+  layout: Layout
diff --git a/locales/fa.yml b/locales/fa.yml
index 30503af..0d3db80 100644
--- a/locales/fa.yml
+++ b/locales/fa.yml
@@ -156,3 +156,9 @@ userMenu:
 
 notifications:
   empty: هیچ اعلانی وجود ندارد
+
+customize:
+  title: سفارشی سازی
+  theme: پوسته
+  color: رنگ
+  layout: چیدمان
diff --git a/src/App.vue b/src/App.vue
index 7b83aac..ff3eae1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -22,6 +22,8 @@ const rtlStyles = [
   tagRtl,
 ]
 
+const customTheme = ref({ ...themeOverrides })
+
 watch(() => layout.activeLanguage, () => {
   const body = document.querySelector('body') as HTMLElement
   if (layout.isRtl)
@@ -38,11 +40,16 @@ watch(() => layout.isDark, (newValue) => {
   else
     document.documentElement.classList.remove('dark')
 }, { immediate: true })
+
+watch(() => layout.themeColor, (newValue) => {
+  if (customTheme.value.common && newValue !== '')
+    customTheme.value.common.primaryColor = newValue
+}, { immediate: true })
 </script>
 
 <template>
   <n-config-provider
-    :theme="layout.isDark ? darkTheme : lightTheme" :theme-overrides="themeOverrides"
+    :theme="layout.isDark ? darkTheme : lightTheme" :theme-overrides="customTheme"
     :rtl="layout.isRtl ? rtlStyles : []" :preflight-style-disabled="false"
   >
     <n-notification-provider placement="bottom-right">
diff --git a/src/components.d.ts b/src/components.d.ts
index b499d48..de65ac5 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -20,6 +20,7 @@ declare module 'vue' {
     CreateColor: typeof import('./components/Color/CreateColor.vue')['default']
     CreateProduct: typeof import('./components/Products/CreateProduct.vue')['default']
     CustomerManagement: typeof import('./components/Customers/CustomerManagement.vue')['default']
+    CustomizeDialog: typeof import('./components/CustomizeDialog/CustomizeDialog.vue')['default']
     DashboardCard: typeof import('./components/DashboardCard.vue')['default']
     DashboardPage: typeof import('./components/Dahboard/DashboardPage.vue')['default']
     DonutChart: typeof import('./components/DonutChart.vue')['default']
@@ -27,9 +28,9 @@ declare module 'vue' {
     EnglandIcon: typeof import('./components/CountryIcons/EnglandIcon.vue')['default']
     GermanyIcon: typeof import('./components/CountryIcons/GermanyIcon.vue')['default']
     GithubButton: typeof import('./components/GithubButton.vue')['default']
-    LanguageSelect: typeof import('./components/LanguageSelect.vue')['default']
+    LanguageSelect: typeof import('./components/Navbar/LanguageSelect.vue')['default']
     LineChart: typeof import('./components/LineChart.vue')['default']
-    Navbar: typeof import('./components/Navbar.vue')['default']
+    Navbar: typeof import('./components/Navbar/Navbar.vue')['default']
     NBadge: typeof import('naive-ui')['NBadge']
     NBreadcrumb: typeof import('naive-ui')['NBreadcrumb']
     NBreadcrumbItem: typeof import('naive-ui')['NBreadcrumbItem']
@@ -51,10 +52,14 @@ declare module 'vue' {
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
     NModal: typeof import('naive-ui')['NModal']
     NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
-    Notifications: typeof import('./components/Notifications.vue')['default']
+    Notifications: typeof import('./components/Navbar/Notifications.vue')['default']
     NPageHeader: typeof import('naive-ui')['NPageHeader']
     NPopselect: typeof import('naive-ui')['NPopselect']
+    NRadioButton: typeof import('naive-ui')['NRadioButton']
+    NRadioGroup: typeof import('naive-ui')['NRadioGroup']
     NSpace: typeof import('naive-ui')['NSpace']
+    NSwitch: typeof import('naive-ui')['NSwitch']
+    NTag: typeof import('naive-ui')['NTag']
     NTooltip: typeof import('naive-ui')['NTooltip']
     NTreeSelect: typeof import('naive-ui')['NTreeSelect']
     NUpload: typeof import('naive-ui')['NUpload']
@@ -67,9 +72,10 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     Sidebar: typeof import('./components/Sidebar.vue')['default']
-    ThemeSwitch: typeof import('./components/ThemeSwitch.vue')['default']
+    ThemeCustomize: typeof import('./components/Navbar/ThemeCustomize.vue')['default']
+    ThemeSwitch: typeof import('./components/Navbar/ThemeSwitch.vue')['default']
     TrendingProducts: typeof import('./components/Dahboard/TrendingProducts.vue')['default']
     TurkishIcon: typeof import('./components/CountryIcons/TurkishIcon.vue')['default']
-    UserProfile: typeof import('./components/UserProfile.vue')['default']
+    UserProfile: typeof import('./components/Navbar/UserProfile.vue')['default']
   }
 }
diff --git a/src/components/BarChart.vue b/src/components/BarChart.vue
index 40126a7..2eb2380 100644
--- a/src/components/BarChart.vue
+++ b/src/components/BarChart.vue
@@ -42,7 +42,7 @@ const chartOptions = ref({
   dataLabels: {
     enabled: false,
   },
-  colors: ['#3db9af', '#37938d', '#276e6b', '#7fcdca'],
+  colors: buildThemeSeries(),
   plotOptions: {
     bar: {
       columnWidth: '17%',
@@ -71,6 +71,10 @@ const series = ref([
     data: [3, 4, 15, 5, 4, 60, 10],
   },
 ])
+
+function buildThemeSeries() {
+  return ['#3db9af', '#37938d', '#276e6b', '#7fcdca']
+}
 </script>
 
 <template>
diff --git a/src/components/CustomizeDialog/CustomizeDialog.vue b/src/components/CustomizeDialog/CustomizeDialog.vue
new file mode 100644
index 0000000..579bac6
--- /dev/null
+++ b/src/components/CustomizeDialog/CustomizeDialog.vue
@@ -0,0 +1,101 @@
+<script setup>
+import {
+  Checkmark48Filled as CheckIcon,
+  WeatherMoon48Regular as MoonIcon,
+  WeatherSunny48Regular as SunIcon,
+} from '@vicons/fluent'
+import { storeToRefs } from 'pinia'
+
+const { t } = useI18n()
+
+const layout = useLayoutStore()
+const { isRtl } = storeToRefs(layout)
+function setLight() {
+  if (layout.isDark)
+    layout.toggleTheme()
+}
+
+function setDark() {
+  if (!layout.isDark)
+    layout.toggleTheme()
+}
+
+const colors = [
+  '#00ad4c', '#ef4848', '#FC0', '#FF8000', '#22d3ee',
+]
+const selectedColorIndex = ref(0)
+function setColor(index) {
+  selectedColorIndex.value = index
+  layout.setThemeColor(colors[index])
+}
+
+onMounted(() => {
+  selectedColorIndex.value = colors.findIndex(x => x === layout.themeColor)
+})
+</script>
+
+<template>
+  <div class="section">
+    <NTag type="primary" :bordered="false" size="small" class="mb-3 font-bold">
+      {{ t('customize.theme') }}
+    </NTag>
+
+    <n-space justify="center" size="large">
+      <NButton ghost class="p-7" :type="layout.isDark === false ? 'primary' : 'default'" size="large" @click="setLight">
+        <template #icon>
+          <NIcon>
+            <SunIcon />
+          </NIcon>
+        </template>
+      </NButton>
+
+      <NButton ghost class="w-full p-7" :type="layout.isDark ? 'primary' : 'default'" size="large" @click="setDark">
+        <template #icon>
+          <NIcon>
+            <MoonIcon />
+          </NIcon>
+        </template>
+      </NButton>
+    </n-space>
+  </div>
+  <div class="section">
+    <NTag type="primary" :bordered="false" size="small" class="mb-3 font-bold">
+      {{ t('customize.color') }}
+    </NTag>
+
+    <div>
+      <NButton
+        v-for="(color, index) of colors" :key="index" :color="color" size="medium" circle icon="CheckIcon"
+        class="mx-1" @click="setColor(index)"
+      >
+        <template #icon>
+          <CheckIcon v-if="selectedColorIndex === index" />
+          <span v-else />
+        </template>
+      </NButton>
+    </div>
+  </div>
+  <div class="section">
+    <NTag type="primary" :bordered="false" size="small" class="mb-3 font-bold">
+      {{ t('customize.layout') }}
+    </NTag>
+
+    <div>
+      <n-switch v-model:value="isRtl" />
+      RTL Layout
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.section {
+    margin-bottom: 1rem;
+    padding: 1rem 0;
+    .section-title {
+        font-weight: 500;
+        padding: 0.2rem 0;
+        border-bottom: solid 1px #CCC;
+        margin-bottom:1rem;
+    }
+}
+</style>
diff --git a/src/components/GithubButton.vue b/src/components/GithubButton.vue
index 4f8be8e..98cab74 100644
--- a/src/components/GithubButton.vue
+++ b/src/components/GithubButton.vue
@@ -7,12 +7,9 @@
     <n-tooltip placement="top" trigger="hover">
       <template #trigger>
         <a href="https://github.com/doroudi/yummyadmin" block target="_blank">
-          <n-button strong round type="primary" class="pulse-animated" flex space-between py-5 px-3>
+          <n-button strong round color="#36ad6a" class="pulse-animated" flex space-between py-5 px-3>
             <NIcon size="1.6rem" class="mr-2">
-              <svg
-                xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-                viewBox="0 0 32 32"
-              >
+              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32">
                 <path
                   d="M16 2a14 14 0 0 0-4.43 27.28c.7.13 1-.3 1-.67v-2.38c-3.89.84-4.71-1.88-4.71-1.88a3.71 3.71 0 0 0-1.62-2.05c-1.27-.86.1-.85.1-.85a2.94 2.94 0 0 1 2.14 1.45a3 3 0 0 0 4.08 1.16a2.93 2.93 0 0 1 .88-1.87c-3.1-.36-6.37-1.56-6.37-6.92a5.4 5.4 0 0 1 1.44-3.76a5 5 0 0 1 .14-3.7s1.17-.38 3.85 1.43a13.3 13.3 0 0 1 7 0c2.67-1.81 3.84-1.43 3.84-1.43a5 5 0 0 1 .14 3.7a5.4 5.4 0 0 1 1.44 3.76c0 5.38-3.27 6.56-6.39 6.91a3.33 3.33 0 0 1 .95 2.59v3.84c0 .46.25.81 1 .67A14 14 0 0 0 16 2z"
                   fill-rule="evenodd" fill="currentColor"
diff --git a/src/components/LanguageSelect.vue b/src/components/Navbar/LanguageSelect.vue
similarity index 81%
rename from src/components/LanguageSelect.vue
rename to src/components/Navbar/LanguageSelect.vue
index 0491665..c2af2c6 100644
--- a/src/components/LanguageSelect.vue
+++ b/src/components/Navbar/LanguageSelect.vue
@@ -2,13 +2,13 @@
 import { storeToRefs } from 'pinia'
 import { Translate16Regular as TranslateIcon } from '@vicons/fluent'
 import { NIcon } from 'naive-ui/es/icon'
-import EnglandIcon from './CountryIcons/EnglandIcon.vue'
-import GermanyIcon from './CountryIcons/GermanyIcon.vue'
-import ChineseIcon from './CountryIcons/ChineseIcon.vue'
-import ArabicIcon from './CountryIcons/ArabicIcon.vue'
-import TurkishIcon from './CountryIcons/TurkishIcon.vue'
+import EnglandIcon from '../CountryIcons/EnglandIcon.vue'
+import GermanyIcon from '../CountryIcons/GermanyIcon.vue'
+import ChineseIcon from '../CountryIcons/ChineseIcon.vue'
+import ArabicIcon from '../CountryIcons/ArabicIcon.vue'
+import TurkishIcon from '../CountryIcons/TurkishIcon.vue'
 
-import PersianIcon from './CountryIcons/PersianIcon.vue'
+import PersianIcon from '../CountryIcons/PersianIcon.vue'
 
 const { t } = useI18n()
 const layoutStore = useLayoutStore()
diff --git a/src/components/Navbar.vue b/src/components/Navbar/Navbar.vue
similarity index 97%
rename from src/components/Navbar.vue
rename to src/components/Navbar/Navbar.vue
index b11f2ec..12f16fc 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar/Navbar.vue
@@ -21,6 +21,7 @@ const { t } = useI18n()
     </template>
     <template #extra>
       <div class="flex items-center">
+        <ThemeCustomize />
         <ThemeSwitch class="mx-1" />
         <LanguageSelect class="mx-1" />
         <Notifications class="mx-1" />
diff --git a/src/components/Notifications.vue b/src/components/Navbar/Notifications.vue
similarity index 100%
rename from src/components/Notifications.vue
rename to src/components/Navbar/Notifications.vue
diff --git a/src/components/Navbar/ThemeCustomize.vue b/src/components/Navbar/ThemeCustomize.vue
new file mode 100644
index 0000000..4d5806b
--- /dev/null
+++ b/src/components/Navbar/ThemeCustomize.vue
@@ -0,0 +1,32 @@
+<script setup lang='ts'>
+import {
+  Settings48Regular as CustomizeIcon,
+} from '@vicons/fluent'
+
+const showCustomizeDialog = ref(false)
+const { t } = useI18n()
+
+function toggleDialog() {
+  showCustomizeDialog.value = !showCustomizeDialog.value
+}
+</script>
+
+<template>
+  <div v-bind="$attrs">
+    <n-button quaternary circle @click="toggleDialog()">
+      <template #icon>
+        <NIcon size="1.4rem">
+          <CustomizeIcon class="rotate-animated" />
+        </NIcon>
+      </template>
+    </n-button>
+  </div>
+
+  <n-drawer v-model:show="showCustomizeDialog" :width="400" placement="right">
+    <n-drawer-content closable :title="t('customize.title')">
+      <CustomizeDialog @close="showCustomizeDialog = false" />
+    </n-drawer-content>
+  </n-drawer>
+</template>
+
+<style scoped lang='scss'></style>
diff --git a/src/components/ThemeSwitch.vue b/src/components/Navbar/ThemeSwitch.vue
similarity index 100%
rename from src/components/ThemeSwitch.vue
rename to src/components/Navbar/ThemeSwitch.vue
diff --git a/src/components/UserProfile.vue b/src/components/Navbar/UserProfile.vue
similarity index 100%
rename from src/components/UserProfile.vue
rename to src/components/Navbar/UserProfile.vue
diff --git a/src/store/layout.store.ts b/src/store/layout.store.ts
index a04b030..ca377fd 100644
--- a/src/store/layout.store.ts
+++ b/src/store/layout.store.ts
@@ -6,7 +6,7 @@ export const useLayoutStore = defineStore('layout', () => {
   const activeLanguage = ref('en')
   const isRtl = ref(false)
   const { t, locale } = useI18n()
-
+  const themeColor = ref('')
   const isDark = ref(false)
 
   watch(() => useWindowSize().width.value, (newValue: number) => {
@@ -28,6 +28,10 @@ export const useLayoutStore = defineStore('layout', () => {
     isRtl.value = (dir !== null && dir === 'rtl')
   }
 
+  function setThemeColor(color: string) {
+    themeColor.value = color
+  }
+
   return {
     collapsed,
     toggleSidebar,
@@ -37,6 +41,8 @@ export const useLayoutStore = defineStore('layout', () => {
     changeLanguage,
     forceCollapsed,
     isDark,
+    setThemeColor,
+    themeColor,
   }
 }, { persist: true })
 
diff --git a/src/styles/utils/_animations.scss b/src/styles/utils/_animations.scss
index 1a16934..255b17e 100644
--- a/src/styles/utils/_animations.scss
+++ b/src/styles/utils/_animations.scss
@@ -1,3 +1,23 @@
+.rotate-animated {
+    -webkit-animation: rotate 4s linear infinite;
+    -moz-animation: rotate 4s linear infinite;
+    animation: rotate 4s linear infinite;
+}
+
+@keyframes rotate {
+    0% {
+        transform: rotate(0);
+    }
+
+    50% {
+        transform: rotate(180deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
 .shake-item {
     -webkit-animation: bell-shake 40s ease infinite;
     -moz-animation: bell-shake 40s ease infinite;