diff --git a/002_source/cms/src/app/dashboard/lesson_categories/create/page.tsx b/002_source/cms/src/app/dashboard/lesson_categories/create/page.tsx
index e69b0c4..166b21d 100644
--- a/002_source/cms/src/app/dashboard/lesson_categories/create/page.tsx
+++ b/002_source/cms/src/app/dashboard/lesson_categories/create/page.tsx
@@ -1,20 +1,19 @@
 'use client';
 
 import * as React from 'react';
-
 import RouterLink from 'next/link';
 import Box from '@mui/material/Box';
 import Link from '@mui/material/Link';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/ArrowLeft';
+import { useTranslation } from 'react-i18next';
 
-import { config } from '@/config';
 import { paths } from '@/paths';
-import { CustomerCreateForm } from '@/components/dashboard/lesson_category/lesson-category-create-form';
-
+import { LessonCategoryCreateForm } from '@/components/dashboard/lesson_category/lesson-category-create-form';
 
 export default function Page(): React.JSX.Element {
+  const { t } = useTranslation();
   return (
     <Box
       sx={{
@@ -35,14 +34,14 @@ export default function Page(): React.JSX.Element {
               variant="subtitle2"
             >
               <ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
-              Lesson Categories
+              {t('dashboard.lessonCategories.title')}
             </Link>
           </div>
           <div>
-            <Typography variant="h4">Create customer</Typography>
+            <Typography variant="h4">{t('dashboard.lessonCategories.create.title')}</Typography>
           </div>
         </Stack>
-        <CustomerCreateForm />
+        <LessonCategoryCreateForm />
       </Stack>
     </Box>
   );
diff --git a/002_source/cms/src/app/dashboard/lesson_categories/lesson-categories-sample-data.tsx b/002_source/cms/src/app/dashboard/lesson_categories/lesson-categories-sample-data.tsx
index f44c56d..e11a638 100644
--- a/002_source/cms/src/app/dashboard/lesson_categories/lesson-categories-sample-data.tsx
+++ b/002_source/cms/src/app/dashboard/lesson_categories/lesson-categories-sample-data.tsx
@@ -12,6 +12,12 @@ export const lessonCategoriesSampleData = [
     quota: 50,
     status: 'active',
     createdAt: dayjs().subtract(1, 'hour').toDate(),
+    cat_name: '',
+    pos: 99,
+    visible: 'visible',
+    lesson_id: 'lid_00001',
+    description: '',
+    remarks: '',
   },
   {
     id: 'USR-004',
@@ -22,6 +28,12 @@ export const lessonCategoriesSampleData = [
     quota: 100,
     status: 'active',
     createdAt: dayjs().subtract(3, 'hour').toDate(),
+    cat_name: '',
+    pos: 99,
+    visible: 'visible',
+    lesson_id: 'lid_00001',
+    description: '',
+    remarks: '',
   },
   {
     id: 'USR-003',
@@ -32,6 +44,12 @@ export const lessonCategoriesSampleData = [
     quota: 10,
     status: 'blocked',
     createdAt: dayjs().subtract(1, 'hour').subtract(1, 'day').toDate(),
+    cat_name: '',
+    pos: 99,
+    visible: 'visible',
+    lesson_id: 'lid_00001',
+    description: '',
+    remarks: '',
   },
   {
     id: 'USR-002',
@@ -42,6 +60,12 @@ export const lessonCategoriesSampleData = [
     quota: 0,
     status: 'pending',
     createdAt: dayjs().subtract(7, 'hour').subtract(1, 'day').toDate(),
+    cat_name: '',
+    pos: 99,
+    visible: 'visible',
+    lesson_id: 'lid_00001',
+    description: '',
+    remarks: '',
   },
   {
     id: 'USR-001',
@@ -52,5 +76,11 @@ export const lessonCategoriesSampleData = [
     quota: 50,
     status: 'active',
     createdAt: dayjs().subtract(2, 'hour').subtract(2, 'day').toDate(),
+    cat_name: '',
+    pos: 99,
+    visible: 'visible',
+    lesson_id: 'lid_00001',
+    description: '',
+    remarks: '',
   },
 ] satisfies LessonCategory[];
diff --git a/002_source/cms/src/app/dashboard/lesson_categories/page.tsx b/002_source/cms/src/app/dashboard/lesson_categories/page.tsx
index 0193343..cdb0111 100644
--- a/002_source/cms/src/app/dashboard/lesson_categories/page.tsx
+++ b/002_source/cms/src/app/dashboard/lesson_categories/page.tsx
@@ -5,7 +5,6 @@ import { useRouter } from 'next/navigation';
 import { COL_LESSON_CATEGORIES } from '@/constants';
 import { LoadingButton } from '@mui/lab';
 import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
 import Card from '@mui/material/Card';
 import Divider from '@mui/material/Divider';
 import Stack from '@mui/material/Stack';
@@ -19,8 +18,8 @@ import { logger } from '@/lib/default-logger';
 import { pb } from '@/lib/pb';
 import { toast } from '@/components/core/toaster';
 import {
+  DBLessonCategory,
   defaultLessonCategory,
-  type emptyLessonCategory,
   type LessonCategory,
 } from '@/components/dashboard/lesson_category/interfaces';
 import { LessonCategoriesFilters } from '@/components/dashboard/lesson_category/lesson-categories-filters';
@@ -64,7 +63,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
       .then((lessonCategories: ListResult<RecordModel>) => {
         // console.log(lessonTypes);
         const { items, page, perPage, totalItems, totalPages } = lessonCategories;
-        const tempLessonCategories: LessonCategory[] = items.map((item) => {
+        const tempLessonCategories: DBLessonCategory[] = items.map((item) => {
           return { ...defaultLessonCategory, ...item };
         });
 
diff --git a/002_source/cms/src/components/dashboard/lesson_category/file-to-base64.tsx b/002_source/cms/src/components/dashboard/lesson_category/file-to-base64.tsx
new file mode 100644
index 0000000..b94321a
--- /dev/null
+++ b/002_source/cms/src/components/dashboard/lesson_category/file-to-base64.tsx
@@ -0,0 +1,12 @@
+export function fileToBase64(file: Blob): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => {
+      resolve(reader.result as string);
+    };
+    reader.onerror = () => {
+      reject(new Error('Error converting file to base64'));
+    };
+  });
+}
diff --git a/002_source/cms/src/components/dashboard/lesson_category/interfaces.ts b/002_source/cms/src/components/dashboard/lesson_category/interfaces.ts
index 96e2c63..bbca72f 100644
--- a/002_source/cms/src/components/dashboard/lesson_category/interfaces.ts
+++ b/002_source/cms/src/components/dashboard/lesson_category/interfaces.ts
@@ -1,11 +1,21 @@
 import { dayjs } from '@/lib/dayjs';
 
 export interface LessonCategory {
-  id: string;
   isEmpty?: boolean;
-  name: string;
+  //
+  id: string;
+  cat_name: string;
+  cat_image_url?: string;
+  cat_image?: string;
+  pos: number;
+  visible: string;
+  lesson_id: string;
+  description: string;
+  remarks: string;
+  //
+  name?: string;
   avatar?: string;
-  email: string;
+  email?: string;
   phone?: string;
   quota: number;
   status: 'pending' | 'active' | 'blocked' | 'NA';
@@ -14,26 +24,49 @@ export interface LessonCategory {
 
 export interface DBLessonCategory {
   id: string;
-  name: string;
-  avatar?: string;
-  email: string;
-  phone?: string;
-  quota: number;
-  status: 'pending' | 'active' | 'blocked';
+  cat_name: string;
+  cat_image_url?: string;
+  cat_image?: string;
+  pos: number;
+  visible: string;
+  lesson_id: string;
+  description: string;
+  remarks: string;
   createdAt: Date;
+  status: string;
 }
 
 export const defaultLessonCategory: LessonCategory = {
-  isEmpty: true,
-  id: '',
-  name: '',
-  email: '',
-  quota: -Infinity,
-  status: 'NA',
+  id: 'default-id',
+  cat_name: 'default-category-name',
+  cat_image_url: undefined,
+  cat_image: undefined,
+  pos: 0,
+  visible: 'hidden',
+  lesson_id: 'default-lesson-id',
+  description: 'default-description',
+  remarks: 'default-remarks',
+
   createdAt: dayjs('2099-01-01').toDate(),
+  quota: 0,
+  status: 'NA',
 };
 
 export const emptyLessonCategory: LessonCategory = {
   ...defaultLessonCategory,
   isEmpty: true,
 };
+
+export interface CreateForm {
+  name: string;
+  type: string;
+  pos: number;
+  visible: string;
+}
+
+export const LessonCategoryCreateFormDefault: CreateForm = {
+  name: '',
+  type: '',
+  pos: 1,
+  visible: 'visible',
+};
diff --git a/002_source/cms/src/components/dashboard/lesson_category/lesson-category-create-form.tsx b/002_source/cms/src/components/dashboard/lesson_category/lesson-category-create-form.tsx
index c8c4f35..17b53c4 100644
--- a/002_source/cms/src/components/dashboard/lesson_category/lesson-category-create-form.tsx
+++ b/002_source/cms/src/components/dashboard/lesson_category/lesson-category-create-form.tsx
@@ -4,7 +4,8 @@ import * as React from 'react';
 import RouterLink from 'next/link';
 import { useRouter } from 'next/navigation';
 import { zodResolver } from '@hookform/resolvers/zod';
-import Avatar from '@mui/material/Avatar';
+import { Avatar } from '@mui/material';
+// import Avatar from '@mui/material/Avatar';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Card from '@mui/material/Card';
@@ -22,6 +23,7 @@ import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import Grid from '@mui/material/Unstable_Grid2';
 import { Camera as CameraIcon } from '@phosphor-icons/react/dist/ssr/Camera';
+// import axios from 'axios';
 import { Controller, useForm } from 'react-hook-form';
 import { z as zod } from 'zod';
 
@@ -30,18 +32,7 @@ import { logger } from '@/lib/default-logger';
 import { Option } from '@/components/core/option';
 import { toast } from '@/components/core/toaster';
 
-function fileToBase64(file: Blob): Promise<string> {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.readAsDataURL(file);
-    reader.onload = () => {
-      resolve(reader.result as string);
-    };
-    reader.onerror = () => {
-      reject(new Error('Error converting file to base64'));
-    };
-  });
-}
+import { fileToBase64 } from './file-to-base64';
 
 const schema = zod.object({
   avatar: zod.string().optional(),
@@ -78,7 +69,7 @@ const defaultValues = {
   currency: 'USD',
 } satisfies Values;
 
-export function CustomerCreateForm(): React.JSX.Element {
+export function LessonCategoryCreateForm(): React.JSX.Element {
   const router = useRouter();
 
   const {
diff --git a/002_source/cms/src/components/dashboard/lesson_type/interfaces.ts b/002_source/cms/src/components/dashboard/lesson_type/interfaces.ts
index e18a1c6..0f63c18 100644
--- a/002_source/cms/src/components/dashboard/lesson_type/interfaces.ts
+++ b/002_source/cms/src/components/dashboard/lesson_type/interfaces.ts
@@ -17,14 +17,14 @@ export interface RestLessonTypeUpdateForm {
   data: LessonTypeEditFormProps;
 }
 
-export interface LessonTypeCreateForm {
+export interface CreateForm {
   name: string;
   type: string;
   pos: number;
   visible: string;
 }
 
-export const LessonTypeCreateFormDefault: LessonTypeCreateForm = {
+export const LessonTypeCreateFormDefault: CreateForm = {
   name: '',
   type: '',
   pos: 1,
diff --git a/002_source/cms/src/components/dashboard/lesson_type/lesson-type-create-form.tsx b/002_source/cms/src/components/dashboard/lesson_type/lesson-type-create-form.tsx
index 7e3d21d..2b0e518 100644
--- a/002_source/cms/src/components/dashboard/lesson_type/lesson-type-create-form.tsx
+++ b/002_source/cms/src/components/dashboard/lesson_type/lesson-type-create-form.tsx
@@ -24,8 +24,6 @@ import Select from '@mui/material/Select';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import Grid from '@mui/material/Unstable_Grid2';
-import type { RecordModel } from 'pocketbase';
-import PocketBase from 'pocketbase';
 // import { Camera as CameraIcon } from '@phosphor-icons/react/dist/ssr/Camera';
 // import axios from 'axios';
 import { Controller, useForm } from 'react-hook-form';
@@ -34,31 +32,15 @@ import { z as zod } from 'zod';
 
 import { paths } from '@/paths';
 import { logger } from '@/lib/default-logger';
+import { pb } from '@/lib/pb';
 // import { Option } from '@/components/core/option';
 import { toast } from '@/components/core/toaster';
-import { defaultLessonType, LessonTypeCreateForm, LessonTypeCreateFormDefault } from './interfaces';
-import type { LessonType } from './ILessonType';
-import { pb } from '@/lib/pb';
 
+import { CreateForm, LessonTypeCreateFormDefault } from './interfaces';
 
 // import { createLessonType } from './http-actions';
 // import { LessonTypeCreateForm, LessonTypeCreateFormDefault } from './interfaces';
 
-// import { createLessonType } from './httpActions';
-
-// function fileToBase64(file: Blob): Promise<string> {
-//   return new Promise((resolve, reject) => {
-//     const reader = new FileReader();
-//     reader.readAsDataURL(file);
-//     reader.onload = () => {
-//       resolve(reader.result as string);
-//     };
-//     reader.onerror = () => {
-//       reject(new Error('Error converting file to base64'));
-//     };
-//   });
-// }
-
 const schema = zod.object({
   name: zod.string().min(1, 'Name is required').max(255),
   type: zod.string().min(1, 'Name is required').max(255),
@@ -92,19 +74,22 @@ export function LessonTypeCreateForm(): React.JSX.Element {
     async (values: Values): Promise<void> => {
       setIsCreating(true);
 
-      const data: LessonTypeCreateForm = {...LessonTypeCreateFormDefault, ...values}
+      const data: CreateForm = { ...LessonTypeCreateFormDefault, ...values };
 
-      pb.collection(COL_LESSON_TYPES).create(data).then((res)=>{
-        console.log(res)
-        logger.debug(res);
-        toast.success(t('dashboard.lessonTypes.update.success'));
-        setIsCreating(false);
-        router.push(paths.dashboard.lesson_types.list);
-
-      }).catch((err) => {
-        logger.error(err);
-              toast.error('Something went wrong!');
-              setIsCreating(false);})
+      pb.collection(COL_LESSON_TYPES)
+        .create(data)
+        .then((res) => {
+          console.log(res);
+          logger.debug(res);
+          toast.success(t('dashboard.lessonTypes.update.success'));
+          setIsCreating(false);
+          router.push(paths.dashboard.lesson_types.list);
+        })
+        .catch((err) => {
+          logger.error(err);
+          toast.error('Something went wrong!');
+          setIsCreating(false);
+        });
 
       // const tempCreate: LessonTypeCreateForm = LessonTypeCreateFormDefault;
       // tempCreate.name = values.name;
@@ -158,7 +143,7 @@ export function LessonTypeCreateForm(): React.JSX.Element {
                         display: 'inline-flex',
                         p: '4px',
                       }}
-                     />
+                    />
                     <Stack spacing={1} sx={{ alignItems: 'flex-start' }}>
                       <Typography variant="subtitle1">{t('dashboard.lessonTypes.create.avatar')}</Typography>
                       <Typography variant="caption">{t('dashboard.lessonTypes.create.avatarRequirements')}</Typography>
@@ -208,7 +193,13 @@ export function LessonTypeCreateForm(): React.JSX.Element {
                     render={({ field }) => (
                       <FormControl error={Boolean(errors.pos)} fullWidth>
                         <InputLabel required>{t('dashboard.lessonTypes.create.position')}</InputLabel>
-                        <OutlinedInput {...field} onChange={e => {field.onChange(parseInt(e.target.value))} } type="number"/>
+                        <OutlinedInput
+                          {...field}
+                          onChange={(e) => {
+                            field.onChange(parseInt(e.target.value));
+                          }}
+                          type="number"
+                        />
                         {errors.pos ? <FormHelperText>{errors.pos.message}</FormHelperText> : null}
                       </FormControl>
                     )}