diff --git a/locales/en.yml b/locales/en.yml
index 5942ec0..8539df1 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -96,4 +96,16 @@ brands:
     url: Url is required
     image: Image is required
 
+colors:
+  title: Colors
+  createButton: Create
+  create:
+    buttonTitle: Create
+    title: Create New Color
+    color: Color
+    name: Name
+  validations:
+    nameRequired: Name is required
+    colorRequired: Color not selected
+
 not-found: Not found
diff --git a/src/auto-imports.d.ts b/src/auto-imports.d.ts
index 8c42384..aa2bd66 100644
--- a/src/auto-imports.d.ts
+++ b/src/auto-imports.d.ts
@@ -144,6 +144,7 @@ declare global {
   const useClipboard: typeof import('@vueuse/core')['useClipboard']
   const useCloned: typeof import('@vueuse/core')['useCloned']
   const useColorMode: typeof import('@vueuse/core')['useColorMode']
+  const useColorStore: typeof import('./store/color.store')['useColorStore']
   const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
   const useCounter: typeof import('@vueuse/core')['useCounter']
   const useCssModule: typeof import('vue')['useCssModule']
@@ -454,6 +455,7 @@ declare module 'vue' {
     readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']>
     readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
     readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
+    readonly useColorStore: UnwrapRef<typeof import('./store/color.store')['useColorStore']>
     readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>
     readonly useCounter: UnwrapRef<typeof import('@vueuse/core')['useCounter']>
     readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
@@ -758,6 +760,7 @@ declare module '@vue/runtime-core' {
     readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']>
     readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
     readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
+    readonly useColorStore: UnwrapRef<typeof import('./store/color.store')['useColorStore']>
     readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>
     readonly useCounter: UnwrapRef<typeof import('@vueuse/core')['useCounter']>
     readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
diff --git a/src/components.d.ts b/src/components.d.ts
index ecadbd5..f5c9310 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -12,8 +12,10 @@ declare module 'vue' {
     Card: typeof import('./components/Card.vue')['default']
     CategoryManagement: typeof import('./components/Category/CategoryManagement.vue')['default']
     CategoryStatics: typeof import('./components/Category/CategoryStatics.vue')['default']
+    ColorManagement: typeof import('./components/Color/ColorManagement.vue')['default']
     CreateBrand: typeof import('./components/Brand/CreateBrand.vue')['default']
     CreateCategory: typeof import('./components/Category/CreateCategory.vue')['default']
+    CreateColor: typeof import('./components/Color/CreateColor.vue')['default']
     DashboardCard: typeof import('./components/DashboardCard.vue')['default']
     DonutChart: typeof import('./components/DonutChart.vue')['default']
     LanguageSelect: typeof import('./components/LanguageSelect.vue')['default']
@@ -21,6 +23,7 @@ declare module 'vue' {
     Navbar: typeof import('./components/Navbar.vue')['default']
     NBadge: typeof import('naive-ui')['NBadge']
     NButton: typeof import('naive-ui')['NButton']
+    NColorPicker: typeof import('naive-ui')['NColorPicker']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NDataTable: typeof import('naive-ui')['NDataTable']
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']
diff --git a/src/components/Brand/CreateBrand.vue b/src/components/Brand/CreateBrand.vue
index 4863724..93222ac 100644
--- a/src/components/Brand/CreateBrand.vue
+++ b/src/components/Brand/CreateBrand.vue
@@ -1,12 +1,13 @@
 <script setup lang='ts'>
 import type { FormInst, FormRules } from 'naive-ui/es/form'
+import type { UploadFileInfo } from 'naive-ui/es/upload'
 import { storeToRefs } from 'pinia'
-import type { CategoryCreateModel } from '~/models/Category'
+import type { BrandCreateModel } from '~/models/Brand'
 
 const emits = defineEmits(['close'])
 const brandStore = useBrandStore()
 const { isLoading } = storeToRefs(brandStore)
-const brandItem = ref<CategoryCreateModel>({ name: '', parentId: 0 })
+const brandItem = ref<BrandCreateModel>({ name: '', url: '', image: '' })
 const { t } = useI18n()
 const formRef = ref<FormInst | null>(null)
 async function create() {
@@ -46,7 +47,8 @@ const rules: FormRules = {
     },
   ],
 }
-
+const previewImageUrl = ref('')
+const showModal = ref(false)
 const showModalRef = ref(false)
 const previewImageUrlRef = ref('')
 function handlePreview(file: UploadFileInfo) {
@@ -78,10 +80,9 @@ function handlePreview(file: UploadFileInfo) {
     <div class="form-control">
       <n-form-item class="mb-5" path="image" :label="t('brands.create.image')">
         <n-upload
-          :default-file-list="previewFileList"
           list-type="image-card"
           accept="image/png, image/jpeg"
-          max="1"
+          :max="1"
           @preview="handlePreview"
         />
         <n-modal
diff --git a/src/components/Color/ColorManagement.vue b/src/components/Color/ColorManagement.vue
new file mode 100644
index 0000000..73dff16
--- /dev/null
+++ b/src/components/Color/ColorManagement.vue
@@ -0,0 +1,151 @@
+<script setup lang='ts'>
+import { type DataTableColumns, NButton, NIcon } from 'naive-ui/es/components'
+import type { RowData } from 'naive-ui/es/data-table/src/interface'
+import {
+  DismissCircle24Regular as DeleteIcon,
+  Edit32Regular as EditIcon,
+  AddCircle20Regular as PlusIcon,
+} from '@vicons/fluent'
+import { storeToRefs } from 'pinia'
+import { useDialog, useMessage } from 'naive-ui'
+
+const { t } = useI18n()
+const store = useColorStore()
+const { colors, isLoading } = storeToRefs(store)
+const dialog = useDialog()
+const message = useMessage()
+onMounted(getItems)
+const columns: DataTableColumns<RowData> = [
+  {
+    title: 'Color',
+    key: 'color',
+    width: 250,
+    render(row) {
+      return h(
+        'span',
+        {
+          style: { 'background-color': row.color },
+          class: 'color-preview',
+        },
+      )
+    },
+  },
+  {
+    title: 'Name',
+    key: 'name',
+  },
+  {
+    title: 'Actions',
+    key: 'actions',
+    width: 200,
+    render(row) {
+      return [
+        h(
+          NButton,
+          {
+            size: 'small',
+            renderIcon: renderIcon(EditIcon),
+            ghost: true,
+            class: 'mr-2',
+            onClick: () => edit(row),
+          },
+          { default: () => 'Edit' },
+        ),
+        h(
+          NButton,
+          {
+            size: 'small',
+            type: 'error',
+            ghost: true,
+            renderIcon: renderIcon(DeleteIcon),
+            onClick: () => handleDeleteItem(row),
+          },
+          { default: () => 'Delete' },
+        ),
+      ]
+    },
+  },
+]
+const { options } = storeToRefs(store)
+const showAddDialog = ref(false)
+function renderIcon(icon: any) {
+  return () => h(NIcon, null, { default: () => h(icon) })
+}
+
+function handleDeleteItem(row: RowData) {
+  dialog.error({
+    title: 'Confirm',
+    content: 'Are you sure?',
+    positiveText: 'Yes, Delete',
+    negativeText: 'Cancel',
+    onPositiveClick: () => {
+      store.deleteBrand(row.id)
+      message.success('Brand was deleted!')
+    },
+  })
+}
+
+function rowKey(row: RowData) {
+  return row.id
+}
+function getItems() {
+  store.getColors(options.value)
+}
+
+function handlePageChange(page: number) {
+  options.value.page = page
+  getItems()
+}
+
+function handleFiltersChange() {
+  getItems()
+}
+
+function createColor() {
+  showAddDialog.value = true
+}
+</script>
+
+<template>
+  <n-layout>
+    <n-layout-content>
+      <div>
+        <div class="flex items-center mb-5">
+          <h1 class="page-title mx-2">
+            {{ t('colors.title') }}
+          </h1>
+          <NButton type="primary" quaternary round @click="createColor">
+            <template #icon>
+              <NIcon>
+                <PlusIcon />
+              </NIcon>
+            </template>
+            {{ t('brands.createButton') }}
+          </NButton>
+        </div>
+        <n-data-table
+          remote :columns="columns" :data="colors" :loading="isLoading" :pagination="options"
+          :row-key="rowKey" @update:sorter="handleSorterChange" @update:filters="handleFiltersChange"
+          @update:page="handlePageChange"
+        />
+      </div>
+    </n-layout-content>
+
+    <n-drawer v-model:show="showAddDialog" :width="502" placement="right">
+      <n-drawer-content closable :title="t('colors.create.title')">
+        <CreateColor @close="showAddDialog = false" />
+      </n-drawer-content>
+    </n-drawer>
+  </n-layout>
+</template>
+
+<style lang='scss'>
+.color-preview {
+    display: inline-block;
+    width: 2rem;
+    height: 2rem;
+    border: solid 3px #FFF;
+    box-shadow: 0 0 3px 0 #989898;
+    border-radius: 50%;
+}
+</style>
diff --git a/src/components/Color/CreateColor.vue b/src/components/Color/CreateColor.vue
new file mode 100644
index 0000000..e04812a
--- /dev/null
+++ b/src/components/Color/CreateColor.vue
@@ -0,0 +1,75 @@
+<script setup lang='ts'>
+import type { FormInst, FormRules } from 'naive-ui/es/form'
+import { storeToRefs } from 'pinia'
+
+const emits = defineEmits(['close'])
+const colorStore = useColorStore()
+const { isLoading } = storeToRefs(colorStore)
+const colorItem = ref<ColorCreateModel>({ name: '', color: '#000000' })
+const { t } = useI18n()
+const formRef = ref<FormInst | null>(null)
+async function create() {
+  formRef.value?.validate(async (errors: any) => {
+    if (!errors) {
+      await colorStore.createColor(colorItem.value)
+      emits('close')
+    }
+  })
+}
+
+const nameInput = ref()
+onMounted(() => {
+  nameInput.value?.focus()
+})
+
+const rules: FormRules = {
+  name: [
+    {
+      required: true,
+      trigger: ['blur', 'change'],
+      message: t('colors.validations.nameRequired'),
+    },
+  ],
+  // color: [
+  //   {
+  //     required: true,
+  //     trigger: ['blur', 'change'],
+  //     message: t('colors.validations.colorRequired'),
+  //   },
+  // ],
+}
+</script>
+
+<template>
+  <n-form ref="formRef" :model="colorItem" :rules="rules" @submit.prevent="create()">
+    <div class="form-control">
+      <n-form-item class="mb-5" path="name" :label="t('colors.create.name')">
+        <n-input
+          id="name" ref="nameInput" v-model:value="colorItem.name" autofocus
+          :placeholder="t('brands.create.brandName')"
+        />
+      </n-form-item>
+    </div>
+    <div class="form-control flex flex-col mb-5">
+      <n-form-item :label="t('colors.create.color')">
+        <n-color-picker
+          v-model:value="colorItem.color"
+          :modes="['hex']" :show-alpha="false"
+          :swatches="[
+            '#FFFFFF',
+            '#18A058',
+            '#2080F0',
+            '#F0A020',
+            'rgba(208, 48, 80, 1)',
+          ]"
+        />
+      </n-form-item>
+    </div>
+
+    <n-button attr-type="submit" size="large" :block="true" type="primary" :loading="isLoading">
+      {{ t('brands.create.buttonTitle') }}
+    </n-button>
+  </n-form>
+</template>
+
+<style scoped lang='scss'></style>
diff --git a/src/mocks/handlers/color.handler.ts b/src/mocks/handlers/color.handler.ts
new file mode 100644
index 0000000..ff2657b
--- /dev/null
+++ b/src/mocks/handlers/color.handler.ts
@@ -0,0 +1,52 @@
+import { rest } from 'msw'
+import _ from 'lodash'
+import { faker } from '@faker-js/faker'
+import { CreatePagedResponse } from '../handlers.utility'
+import type { Color, ColorCreateModel } from '~/models/Color'
+
+const colors = _.times(7, createFakeColor)
+const handlers = [
+  rest.get('/api/Color', (req, res, ctx) => {
+    const response = CreatePagedResponse<Color>(req, colors)
+    return res(
+      ctx.status(200),
+      ctx.delay(200),
+      ctx.json(response),
+    )
+  }),
+  rest.post('/api/color', async (req, res, ctx) => {
+    const newItem = await req.json<ColorCreateModel>()
+    const color: Color = {
+      id: faker.datatype.number({ max: 2000 }).toString(),
+      name: newItem.name,
+      color: newItem.color,
+    }
+    colors.push(color)
+    return res(
+      ctx.status(200),
+      ctx.delay(200),
+      ctx.json(color),
+    )
+  }),
+  rest.delete('/api/Color/:id', (req, res, ctx) => {
+    const id = req.params.id.toString()
+    const itemIndex = colors.findIndex(x => x.id === id)
+    colors.splice(itemIndex, 1)
+    return res(
+      ctx.delay(1000),
+      ctx.status(200),
+      ctx.json(true),
+    )
+  }),
+
+]
+
+function createFakeColor(): Color {
+  return {
+    id: faker.datatype.number().toString(),
+    name: faker.color.human(),
+    color: faker.color.rgb(),
+  }
+}
+
+export default handlers
diff --git a/src/models/Brand.ts b/src/models/Brand.ts
index 248014c..14d62fb 100644
--- a/src/models/Brand.ts
+++ b/src/models/Brand.ts
@@ -5,4 +5,8 @@ export interface Brand {
   url: string
 }
 
-export interface BrandCreateModel extends Brand {}
+export interface BrandCreateModel {
+  name: string
+  image?: string
+  url: string
+}
diff --git a/src/models/Color.ts b/src/models/Color.ts
new file mode 100644
index 0000000..8184826
--- /dev/null
+++ b/src/models/Color.ts
@@ -0,0 +1,10 @@
+export interface Color {
+  id: string
+  name: string
+  color: string
+}
+
+export interface ColorCreateModel {
+  name: string
+  color: string
+}
diff --git a/src/pages/Colors/index.vue b/src/pages/Colors/index.vue
new file mode 100644
index 0000000..4b9b825
--- /dev/null
+++ b/src/pages/Colors/index.vue
@@ -0,0 +1,10 @@
+<script setup lang='ts'>
+
+</script>
+
+<template>
+  <ColorManagement />
+</template>
+
+<style scoped lang='scss'>
+</style>
diff --git a/src/services/color.service.ts b/src/services/color.service.ts
new file mode 100644
index 0000000..090b091
--- /dev/null
+++ b/src/services/color.service.ts
@@ -0,0 +1,11 @@
+import GenericService from './generic.service'
+import type { Color } from '~/models/Color'
+import { ApiService } from '~/common/api/api-service'
+
+const apiService = new ApiService('Color')
+class ColorService extends GenericService<Color, string> {
+  constructor() {
+    super(apiService)
+  }
+}
+export default new ColorService()
diff --git a/src/store/brand.store.ts b/src/store/brand.store.ts
index 02f6440..ce5effa 100644
--- a/src/store/brand.store.ts
+++ b/src/store/brand.store.ts
@@ -17,7 +17,7 @@ export const useBrandStore = defineStore('Brand', () => {
     try {
       const response = await brandService.getList(options)
       brands.value = response.items
-      options.pageSize = Number.parseInt(response.totalCount / options.itemsPerPage)
+      options.pageSize = Math.trunc(response.totalCount / options.itemsPerPage)
     }
     finally {
       isLoading.value = false
diff --git a/src/store/category.store.ts b/src/store/category.store.ts
index fb35a0a..95cb980 100644
--- a/src/store/category.store.ts
+++ b/src/store/category.store.ts
@@ -18,7 +18,7 @@ export const useCategoryStore = defineStore('Category', () => {
     try {
       const response = await categoryService.getList(options)
       categories.value = response.items
-      options.pageSize = Number.parseInt(response.totalCount / options.itemsPerPage)
+      options.pageSize = Math.trunc(response.totalCount / options.itemsPerPage)
     }
     finally {
       isLoading.value = false
diff --git a/src/store/color.store.ts b/src/store/color.store.ts
new file mode 100644
index 0000000..5e55755
--- /dev/null
+++ b/src/store/color.store.ts
@@ -0,0 +1,65 @@
+import { acceptHMRUpdate, defineStore } from 'pinia'
+import type { Color, ColorCreateModel } from '~/models/Color'
+import type { PagedAndSortedRequest } from '~/models/PagedAndSortedRequest'
+import colorService from '~/services/color.service'
+
+export interface ColorState {
+}
+export const useColorStore = defineStore('Color', () => {
+  const colors = ref<Color[]>([])
+  const colorItem = ref<Color>()
+  const isLoading = ref(false)
+  const isSaving = ref(false)
+  const { options } = useOptions()
+
+  async function getColors(options: PagedAndSortedRequest) {
+    isLoading.value = true
+    try {
+      const response = await colorService.getList(options)
+      colors.value = response.items
+      options.pageSize = Math.trunc(response.totalCount / options.itemsPerPage)
+    }
+    finally {
+      isLoading.value = false
+    }
+  }
+
+  function getColor() {
+
+  }
+
+  async function createColor(colorItem: ColorCreateModel) {
+    isLoading.value = true
+    try {
+      await colorService.create(colorItem)
+      getColors(options.value)
+    }
+    finally {
+      isLoading.value = false
+    }
+  }
+
+  async function deleteColor(id: string) {
+    await colorService.delete(id)
+    getColors(options.value)
+  }
+
+  function editColor() {
+
+  }
+
+  return {
+    isLoading,
+    isSaving,
+    colors,
+    options,
+    colorItem,
+    getColors,
+    getColor,
+    createColor,
+    deleteColor,
+    editColor,
+  }
+})
+if (import.meta.hot)
+  import.meta.hot.accept(acceptHMRUpdate(useColorStore, import.meta.hot))