diff --git a/002_source/cms/src/app/dashboard/lesson_types/lesson-types-data.tsx b/002_source/cms/src/app/dashboard/lesson_types/lesson-types-data.tsx
new file mode 100644
index 0000000..cf88d17
--- /dev/null
+++ b/002_source/cms/src/app/dashboard/lesson_types/lesson-types-data.tsx
@@ -0,0 +1,37 @@
+import { dayjs } from '@/lib/dayjs';
+import type { LessonType } from '@/components/dashboard/lesson_type/ILessonType';
+
+// import { helloworld } from '@/components/dashboard/lesson_type/helloworld';
+// export const metadata = { title: `List | Customers | Dashboard | ${config.site.name}` } satisfies Metadata;
+export const lessonTypesSampleData = [
+  {
+    id: 'USR-005',
+    name: 'Fran Perez',
+    type: 'vocabulary',
+    pos: 1,
+    visible: 'visible',
+    avatar: '/assets/avatar-5.png',
+    email: 'fran.perez@domain.com',
+    phone: '(815) 704-0045',
+    quota: 50,
+    status: 'active',
+    createdAt: dayjs().subtract(1, 'hour').toDate(),
+  },
+  {
+    id: 'USR-004',
+    name: 'Penjani Inyene',
+    type: 'connectives',
+    pos: 1,
+    visible: 'visible',
+    avatar: '/assets/avatar-4.png',
+    email: 'penjani.inyene@domain.com',
+    phone: '(803) 937-8925',
+    quota: 100,
+    status: 'active',
+    createdAt: dayjs().subtract(3, 'hour').toDate(),
+  },
+] satisfies LessonType[];
+
+export const lessonTypesData = (): LessonType[] => {
+  return lessonTypesSampleData;
+};
diff --git a/002_source/cms/src/components/dashboard/lesson_type/helloworld.tsx b/002_source/cms/src/components/dashboard/lesson_type/helloworld.tsx
new file mode 100644
index 0000000..3989cb1
--- /dev/null
+++ b/002_source/cms/src/components/dashboard/lesson_type/helloworld.tsx
@@ -0,0 +1,3 @@
+const helloworld = 'helloworld';
+
+export { helloworld };
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
new file mode 100644
index 0000000..1d0a7cd
--- /dev/null
+++ b/002_source/cms/src/components/dashboard/lesson_type/lesson-type-create-form.tsx
@@ -0,0 +1,229 @@
+'use client';
+
+import * as React from 'react';
+import RouterLink from 'next/link';
+import { useRouter } from 'next/navigation';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { LoadingButton } from '@mui/lab';
+import { MenuItem } 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';
+import CardActions from '@mui/material/CardActions';
+import CardContent from '@mui/material/CardContent';
+// import Checkbox from '@mui/material/Checkbox';
+import Divider from '@mui/material/Divider';
+import FormControl from '@mui/material/FormControl';
+// import FormControlLabel from '@mui/material/FormControlLabel';
+import FormHelperText from '@mui/material/FormHelperText';
+import InputLabel from '@mui/material/InputLabel';
+import OutlinedInput from '@mui/material/OutlinedInput';
+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 { Camera as CameraIcon } from '@phosphor-icons/react/dist/ssr/Camera';
+// import axios from 'axios';
+import { Controller, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { z as zod } from 'zod';
+
+import { paths } from '@/paths';
+import { logger } from '@/lib/default-logger';
+// import { Option } from '@/components/core/option';
+import { toast } from '@/components/core/toaster';
+
+// 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),
+  pos: zod.string().min(1, 'Phone is required').max(15),
+  visible_to_user: zod.string().max(255),
+});
+
+type Values = zod.infer<typeof schema>;
+
+const defaultValues = {
+  name: '',
+  type: '',
+  pos: '1',
+  visible_to_user: 'visible',
+} satisfies Values;
+
+export function LessonTypeCreateForm(): React.JSX.Element {
+  const router = useRouter();
+  const { t } = useTranslation();
+  const [isCreating, setIsCreating] = React.useState<boolean>(false);
+
+  const {
+    control,
+    handleSubmit,
+    formState: { errors, isSubmitting, isSubmitted },
+    setValue,
+    // watch,
+  } = useForm<Values>({ defaultValues, resolver: zodResolver(schema) });
+
+  const onSubmit = React.useCallback(
+    async (values: Values): Promise<void> => {
+      setIsCreating(true);
+      // const tempCreate: LessonTypeCreateForm = LessonTypeCreateFormDefault;
+      // tempCreate.name = values.name;
+      // tempCreate.type = values.type;
+      // tempCreate.pos = 1;
+      // tempCreate.visible = 'visible';
+
+      // createLessonType(tempCreate)
+      //   .then((res) => {
+      //     router.push(paths.dashboard.lesson_types.list);
+      //     toast.success(t('dashboard.lessonTypes.create.success'));
+      //   })
+      //   .catch((err) => {
+      //     logger.error(err);
+      //     toast.error(t('dashboard.lessonTypes.create.error'));
+      //     setIsCreating(false);
+      //   });
+    },
+    [router]
+  );
+
+  const avatarInputRef = React.useRef<HTMLInputElement>(null);
+  // const avatar = watch('avatar');
+
+  const handleAvatarChange = React.useCallback(
+    async (event: React.ChangeEvent<HTMLInputElement>) => {
+      const file = event.target.files?.[0];
+
+      if (file) {
+        // const url = await fileToBase64(file);
+        // setValue('avatar', url);
+      }
+    },
+    [setValue]
+  );
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Card>
+        <CardContent>
+          <Stack divider={<Divider />} spacing={4}>
+            <Stack spacing={3}>
+              <Typography variant="h6">{t('dashboard.lessonTypes.create.typeInformation')}</Typography>
+              <Grid container spacing={3}>
+                <Grid xs={12}>
+                  <Stack direction="row" spacing={3} sx={{ alignItems: 'center' }}>
+                    <Box
+                      sx={{
+                        border: '1px dashed var(--mui-palette-divider)',
+                        borderRadius: '50%',
+                        display: 'inline-flex',
+                        p: '4px',
+                      }}
+                    ></Box>
+                    <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>
+                      <Button
+                        color="secondary"
+                        onClick={() => {
+                          avatarInputRef.current?.click();
+                        }}
+                        variant="outlined"
+                      >
+                        {t('dashboard.lessonTypes.create.select')}
+                      </Button>
+                      <input hidden onChange={handleAvatarChange} ref={avatarInputRef} type="file" />
+                    </Stack>
+                  </Stack>
+                </Grid>
+                <Grid md={6} xs={12}>
+                  <Controller
+                    control={control}
+                    name="name"
+                    render={({ field }) => (
+                      <FormControl error={Boolean(errors.name)} fullWidth>
+                        <InputLabel required>{t('dashboard.lessonTypes.create.name')}</InputLabel>
+                        <OutlinedInput {...field} />
+                        {errors.name ? <FormHelperText>{errors.name.message}</FormHelperText> : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+                <Grid md={6} xs={12}>
+                  <Controller
+                    control={control}
+                    name="type"
+                    render={({ field }) => (
+                      <FormControl error={Boolean(errors.type)} fullWidth>
+                        <InputLabel required>{t('dashboard.lessonTypes.create.type')}</InputLabel>
+                        <OutlinedInput {...field} />
+                        {errors.type ? <FormHelperText>{errors.type.message}</FormHelperText> : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+                <Grid md={6} xs={12}>
+                  <Controller
+                    control={control}
+                    name="pos"
+                    render={({ field }) => (
+                      <FormControl error={Boolean(errors.pos)} fullWidth>
+                        <InputLabel required>{t('dashboard.lessonTypes.create.position')}</InputLabel>
+                        <OutlinedInput {...field} />
+                        {errors.pos ? <FormHelperText>{errors.pos.message}</FormHelperText> : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+                <Grid md={6} xs={12}>
+                  <Controller
+                    control={control}
+                    name="visible_to_user"
+                    render={({ field }) => (
+                      <FormControl error={Boolean(errors.visible_to_user)} fullWidth>
+                        <InputLabel>{t('dashboard.lessonTypes.create.visibleToUser')}</InputLabel>
+                        <Select {...field}>
+                          <MenuItem value="visible">visible</MenuItem>
+                          <MenuItem value="hidden">hidden</MenuItem>
+                        </Select>
+
+                        {errors.visible_to_user ? (
+                          <FormHelperText>{errors.visible_to_user.message}</FormHelperText>
+                        ) : null}
+                      </FormControl>
+                    )}
+                  />
+                </Grid>
+              </Grid>
+            </Stack>
+          </Stack>
+        </CardContent>
+        <CardActions sx={{ justifyContent: 'flex-end' }}>
+          <Button color="secondary" component={RouterLink} href={paths.dashboard.lesson_types.list}>
+            {t('dashboard.lessonTypes.create.cancelButton')}
+          </Button>
+          <LoadingButton disabled={isCreating} loading={isCreating} type="submit" variant="contained">
+            {t('dashboard.lessonTypes.create.createButton')}
+          </LoadingButton>
+        </CardActions>
+      </Card>
+    </form>
+  );
+}