diff --git a/src/Mocs/NewTestMoc.ts b/src/Mocs/NewTestMoc.ts
index 85756a5..a4fbd30 100644
--- a/src/Mocs/NewTestMoc.ts
+++ b/src/Mocs/NewTestMoc.ts
@@ -1,3 +1,3 @@
-export const types = ['Select type...', 'single', 'multi'];
-export const difficulties = ['Select difficulty...', 'light', 'medium', 'hard'];
+export const types = ['single', 'multi'];
+export const difficulties = ['light', 'medium', 'hard'];
 export const numberQuestions = [10, 15, 20, 25, 30];
diff --git a/src/api/quizesApi.ts b/src/api/quizesApi.ts
index e96b7d8..7297b1c 100644
--- a/src/api/quizesApi.ts
+++ b/src/api/quizesApi.ts
@@ -1,4 +1,5 @@
 import { FieldValues } from 'react-hook-form';
+import axios from 'axios';
 import { instance } from './Instance/instance';
 import { CardType } from '../types/CardTypes';
 import { CreateQuizType, TopicType } from '../types/CreateQuizType';
@@ -10,7 +11,14 @@ export const quizesApi = {
   getQuiz(cardId: number) {
     return instance.get<CardType>(`quiz/${cardId}`);
   },
-  postQuizes(quizData: CreateQuizType) {
+  postQuizes(quizData: {
+    topicId: axios.AxiosResponse<any> | number;
+    description: string;
+    comment: string;
+    numberOfQuestions: null;
+    id?: number;
+    title: string;
+  }) {
     return instance.post<CreateQuizType>('quiz', quizData);
   },
   postQuestion(questionData: FieldValues) {
diff --git a/src/api/topicApi.ts b/src/api/topicApi.ts
new file mode 100644
index 0000000..32e06bb
--- /dev/null
+++ b/src/api/topicApi.ts
@@ -0,0 +1,12 @@
+import { instance } from "./Instance/instance";
+import { TopicType } from "../types/CreateQuizType";
+
+
+export const topicApi = {
+  postTopic(title: string) {
+    return instance.post<TopicType>(`/topic`, { title });
+  },
+  getTopic() {
+    return instance.get<TopicType[]>(`/topic`);
+  },
+};
\ No newline at end of file
diff --git a/src/components/common/Tabs/QuestionTabs/QuestionTabs.tsx b/src/components/common/Tabs/QuestionTabs/QuestionTabs.tsx
index 89f5b22..ba8bd3e 100644
--- a/src/components/common/Tabs/QuestionTabs/QuestionTabs.tsx
+++ b/src/components/common/Tabs/QuestionTabs/QuestionTabs.tsx
@@ -57,7 +57,7 @@ export const QuestionTabs = ({
   );
 
   return (
-    <Box className='my-5'>
+    <Box sx={{ padding:'0.5rem', borderRadius: '1rem', backgroundColor: '' }}>
       <Tabs ref={tabsRef}>
         {amountOfQuestionsTabs.map((id) => (
           <QuestionTabsItem
diff --git a/src/pages/create-test/FieldsComponents/CreateAnswer/CreateAnswer.tsx b/src/pages/create-test/FieldsComponents/CreateAnswer/CreateAnswer.tsx
index 84626c8..4acbba7 100644
--- a/src/pages/create-test/FieldsComponents/CreateAnswer/CreateAnswer.tsx
+++ b/src/pages/create-test/FieldsComponents/CreateAnswer/CreateAnswer.tsx
@@ -15,107 +15,151 @@ import {
   TextField,
   Typography,
 } from '@mui/material';
-import React from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'next-i18next';
 import { BasketIcon } from '../../../../assets/icons/BasketIcon';
 
 type CreateAnswerPropsType<T extends FieldValues> = {
   control: any;
-  name: any;
+  name: string;
+  // typeOfQuestion: string; // for single multi
 };
 
 const CreateAnswer = <T extends FieldValues>({
   control,
   name,
+  // typeOfQuestion // for single multi
 }: CreateAnswerPropsType<T>) => {
   const { t } = useTranslation('createAnswer');
+  // const [correctAnswers, setCorrectAnswers] = useState<string[]>([]); // for single multi
   const { fields, append, remove } = useFieldArray({
     control,
     name,
   });
-  const handleAppendNewAnswer = () => append({ name: '', checked: false });
+
+  const handleAppendNewAnswer = () => {
+    if (fields.length < 4) {
+      append({ name: '', checked: false });
+    }
+  };
+  // const handleCheckboxChange = (index: number) => {  // for single multi
+  //   const questionAnswer = fields[index].id;
+  //   if (correctAnswers.includes(questionAnswer)) {
+  //     setCorrectAnswers((prevAnswers) =>
+  //       prevAnswers.filter((answer) => answer !== questionAnswer)
+  //     );
+  //   } else {
+  //     setCorrectAnswers((prevAnswers) => [...prevAnswers, questionAnswer]);
+  //   }
+  // };
+  // const checkCorrect = () => {
+  //   if (typeOfQuestion === 'single' && correctAnswers.length === 1) {  // for single multi
+  //     return true
+  //   }
+  //   if (typeOfQuestion === 'multi' && correctAnswers.length === 2) {
+  //     return true
+  //   }
+  //   return false;
+  // };
   return (
     <Stack>
       <Typography>{t('Answer choice :')}</Typography>
-      {fields.map((field, index) => (
-        <Stack
-          sx={{ marginY: '0.7rem' }}
-          direction='row'
-          flexWrap='wrap'
-          key={field.id}
-        >
-          <Box sx={{ flexGrow: 0.1, verticalAlign: 'middle' }}>
-            <Typography>{t(`${index + 1}.`)}</Typography>
-          </Box>
-          <Controller
-            control={control}
-            name={`${name}.${index}.name`}
-            defaultValue=''
-            rules={{ required: true }}
-            render={({ field: { onChange, value }, fieldState: { error } }) => (
-              <Box sx={{ flexGrow: 2 }}>
-                <TextField
-                  fullWidth
-                  InputLabelProps={{ color: 'primary' }}
-                  label=''
-                  variant='outlined'
-                  value={value}
-                  onChange={onChange}
-                  error={!!error}
-                  helperText={error ? t('This field is required') : ''}
-                />
+      {fields.map((field, index) => {
+        if (index < 4) {
+          return (
+            <Stack
+              sx={{ marginY: '0.7rem' }}
+              direction='row'
+              flexWrap='wrap'
+              key={field.id}
+            >
+              <Box sx={{ flexGrow: 0.1, verticalAlign: 'middle' }}>
+                <Typography>{t(`${index + 1}.`)}</Typography>
               </Box>
-            )}
-          />
-          <Controller
-            control={control}
-            name={`${name}.${index}.checked`}
-            defaultValue={false}
-            render={({ field: { onChange, value } }) => (
-              <Box
-                sx={{
-                  flexGrow: 0.1,
-                  backgroundColor: 'background.default',
-                  marginX: '1rem',
-                  borderRadius: '2rem',
-                  textAlign: 'center',
-                }}
-              >
-                <FormControlLabel
-                  sx={{ marginX: '0' }}
-                  control={
-                    <Checkbox
-                      color='primary'
-                      size='small'
-                      checked={value}
+              <Controller
+                control={control}
+                name={`${name}.${index}.name`}
+                defaultValue=''
+                rules={{ required: true }}
+                render={({
+                  field: { onChange, value },
+                  fieldState: { error },
+                }) => (
+                  <Box sx={{ flexGrow: 2 }}>
+                    <TextField
+                      fullWidth
+                      InputLabelProps={{ color: 'primary' }}
+                      label=''
+                      variant='outlined'
+                      value={value}
                       onChange={onChange}
+                      error={!!error}
+                      helperText={error ? t('This field is required') : ''}
                     />
-                  }
-                  label=''
-                />
+                  </Box>
+                )}
+              />
+              <Controller
+                control={control}
+                name={`${name}.${index}.checked`}
+                defaultValue={false}
+                render={({ field: { onChange, value } }) => (
+                  <Box
+                    sx={{
+                      flexGrow: 0.1,
+                      backgroundColor: 'background.default',
+                      marginX: '1rem',
+                      borderRadius: '2rem',
+                      textAlign: 'center',
+                    }}
+                  >
+                    <FormControlLabel
+                      sx={{ marginX: '0' }}
+                      control={
+                        <Checkbox
+                          color='primary'
+                          size='small'
+                          // disabled={checkCorrect()}                    // for single multi
+                          // checked={correctAnswers.includes(field.id)}
+                          // onChange={() => handleCheckboxChange(index)}
+                          checked={value}
+                          onChange={onChange}
+                        />
+                      }
+                      label=''
+                    />
+                  </Box>
+                )}
+              />
+              <Box sx={{ flexGrow: 0.1 }}>
+                <Button
+                  sx={{ backgroundColor: 'background.default' }}
+                  onClick={() => remove(index)}
+                  size='medium'
+                >
+                  <BasketIcon />
+                </Button>
               </Box>
-            )}
-          />
-          <Box sx={{ flexGrow: 0.1 }}>
-            <Button
-              sx={{ backgroundColor: 'background.default' }}
-              onClick={() => remove(index)}
-              size='medium'
-            >
-              <BasketIcon />
-            </Button>
-          </Box>
-        </Stack>
-      ))}
-      <Box sx={{ flexGrow: 0.1, marginY: '0.5rem' }}>
-        <Button
-          variant='contained'
-          color='primary'
-          onClick={handleAppendNewAnswer}
-        >
-          {t('Add Answer')}
-        </Button>
-      </Box>
+            </Stack>
+          );
+        }
+        return null;
+      })}
+      {fields.length < 4 ? (
+        <Box sx={{ flexGrow: 0.1, marginY: '0.5rem' }}>
+          <Button
+            variant='contained'
+            color='primary'
+            onClick={handleAppendNewAnswer}
+          >
+            {t('Add Answer')}
+          </Button>
+        </Box>
+      ) : (
+        <Box sx={{ margin: '1rem' }}>
+          <Typography>Maximum 4 answers !</Typography>
+        </Box>
+      )}
     </Stack>
   );
 };
diff --git a/src/pages/create-test/FieldsComponents/CreateTopic/CreateTopic.tsx b/src/pages/create-test/FieldsComponents/CreateTopic/CreateTopic.tsx
index 2c5decd..8753a19 100644
--- a/src/pages/create-test/FieldsComponents/CreateTopic/CreateTopic.tsx
+++ b/src/pages/create-test/FieldsComponents/CreateTopic/CreateTopic.tsx
@@ -1,108 +1,148 @@
-import React, { ChangeEvent, useState } from 'react';
-import {
-  Button,
-  FormControl,
-  Input,
-  InputLabel,
-  MenuItem,
-  Select,
-  Stack,
-  TextField,
-  Typography,
-} from '@mui/material';
-import { Controller } from 'react-hook-form';
-import { Box } from '@mui/system';
+import React, { ChangeEvent, SyntheticEvent, useEffect, useState } from 'react';
+import Autocomplete from '@mui/material/Autocomplete';
+import TextField from '@mui/material/TextField';
+import { Controller, useController } from 'react-hook-form';
+import { Box, Button, Stack, Typography } from '@mui/material';
 import { useTranslation } from 'next-i18next';
-import { InputField } from '../InputFieald';
+import CircularProgress from '@mui/material/CircularProgress';
 import { useAppDispatch, useAppSelector } from '../../../../store/store';
-import { getOneQuizes } from '../../../../store/reducers/quizzes-reducer';
-import { createTopic } from '../../../../store/reducers/topic-reducer';
-import { selectOneQuizes, selectTopic } from '../../../../store/selectors';
-
-type Props = {
-  name: string;
-  control: any;
-};
+import {
+  createTopic,
+  getAllTopics,
+} from '../../../../store/reducers/topic-reducer';
+import { PlusIcon } from '../../../../assets/icons/PlusIcon';
 
 type Topic = {
   id: number;
-  name: string;
+  title: string;
 };
 
-const topicOptions: Topic[] = [
-  { id: 1, name: 'Select topic...' },
-  { id: 2, name: 'NodeJS' },
-  { id: 3, name: 'React' },
-  { id: 4, name: 'Angular' },
-];
+type AutocompleteProps = {
+  name: string;
+  control: any;
+};
 
-export default function TopicSelect({ name, control }: Props) {
-  const [newTopicName, setNewTopicName] = useState('');
-  const { t } = useTranslation('createTopic');
-  const [showNewTopicInput, setShowNewTopicInput] = useState(false);
-  const [topics, setTopics] = useState(topicOptions);
+const CreateTopicComponent: React.FC<AutocompleteProps> = ({
+  name,
+  control,
+}) => {
+  const {
+    field: { value, onChange },
+  } = useController({
+    name,
+    control,
+  });
   const dispatch = useAppDispatch();
-  const topic = useAppSelector(selectTopic);
+  const { t } = useTranslation('Topic');
+  const topics = useAppSelector((state) => state.topics.topicData);
+  // const [topics, setTopics] = useState<Topic[]>([]);
+  const [newTopicName, setNewTopicName] = useState('');
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  useEffect(() => {
+    dispatch(getAllTopics());
+  }, []);
+
+  console.log(topics);
 
   const addNewTopicHandler = () => {
     dispatch(createTopic(newTopicName));
   };
 
   const handleNewTopicNameChange = (
-    event: React.ChangeEvent<HTMLInputElement>
+    event: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
   ) => {
-    setNewTopicName(event.target.value);
-  };
-
-  const handleNewTopicButtonClick = () => {
-    setShowNewTopicInput(true);
+    if (event.target.value !== '') {
+      setNewTopicName(event.target.value);
+    }
   };
-
-  const handleNewTopicCancel = () => {
-    setShowNewTopicInput(false);
-    setNewTopicName('');
+  const getTopicTitles = () => {
+    const allTopicsTitle = [];
+    for (const topic of topics) {
+      const topicTitles = topic.title;
+      allTopicsTitle.push(topicTitles);
+    }
+    return allTopicsTitle;
   };
-
-  const handleNewTopicSave = () => {
-    const newId = topics.length + 1;
-    const newTopic = { id: newId, name: newTopicName };
-    setTopics([...topics, newTopic]);
-    handleNewTopicCancel();
-  };
-
+  console.log(getTopicTitles());
+  const cher = topics.filter(
+    (e) => (e.title && e.title !== '') === newTopicName
+  );
+  console.log(cher, 'cher');
   return (
-    <Box>
-      <Typography typography='inputTitle'>{t('Choose a topic :')}</Typography>
-      <Stack spacing={3} marginBottom='1rem'>
-        <TextField
-          value={newTopicName}
-          placeholder='Type new topic...'
-          onChange={(e) => setNewTopicName(e.currentTarget.value)}
-        />
-      </Stack>
-      <Box>
-        {!showNewTopicInput && (
-          <Button variant='outlined' onClick={addNewTopicHandler}>
-            {t('Add New Topic')}
-          </Button>
+    <Box sx={{ width: '19rem' }}>
+      <Typography typography='inputTitle'>{t('Test topic')}</Typography>
+      <Autocomplete
+        value={value}
+        loading={isLoading}
+        filterOptions={(options, params) => {
+          setIsLoading(true);
+          const filtered = options.filter((option) =>
+            option.title.toLowerCase().includes(params.inputValue.toLowerCase())
+          );
+          // if (params.inputValue !== '') {
+          //   filtered.push({
+          //     id: topics.length + 1,
+          //     title: params.inputValue,
+          //   });
+          // }
+          setTimeout(() => {
+            setIsLoading(false);
+          }, 500);
+          return filtered;
+        }}
+        selectOnFocus
+        handleHomeEndKeys
+        options={topics}
+        getOptionLabel={(option) => option.title}
+        renderOption={(props, option) => <li {...props}>{option.title}</li>}
+        renderInput={(params) => (
+          <Controller
+            name={name}
+            control={control}
+            render={() => (
+              <Stack>
+                <TextField
+                  {...params}
+                  placeholder='Choose topic or add your own...'
+                  size='small'
+                  value={newTopicName}
+                  onChange={handleNewTopicNameChange}
+                  InputProps={{
+                    ...params.InputProps,
+                    endAdornment: (
+                      <>
+                        {isLoading ? (
+                          <CircularProgress color='inherit' size={20} />
+                        ) : null}
+                        {params.InputProps.endAdornment}
+                      </>
+                    ),
+                  }}
+                />
+                {!getTopicTitles().includes(newTopicName) && (
+                  <Button
+                    sx={{ marginTop: '1rem', width: '15rem' }}
+                    variant='outlined'
+                    onClick={addNewTopicHandler}
+                  >
+                    {t('Add New Topic')}
+                    <Stack sx={{ marginLeft: '1rem' }}>
+                      <PlusIcon />
+                    </Stack>
+                  </Button>
+                )}
+              </Stack>
+            )}
+          />
         )}
-      </Box>
-      {showNewTopicInput && (
-        <>
-          <Stack spacing={3}>
-            <TextField
-              id='new-topic'
-              value={newTopicName}
-              placeholder='Type new topic...'
-              onChange={handleNewTopicNameChange}
-            />
-          </Stack>
-          <Button sx={{ margin: '1rem' }} onClick={handleNewTopicSave}>
-            {t('Save')}
-          </Button>
-          <Button onClick={handleNewTopicCancel}>{t('Cancel')}</Button>
-        </>
-      )}
+        freeSolo
+        multiple={false}
+        limitTags={1}
+        fullWidth
+      />
     </Box>
   );
-}
+};
+
+export default CreateTopicComponent;
diff --git a/src/pages/create-test/FieldsComponents/InputFieald.tsx b/src/pages/create-test/FieldsComponents/InputFieald.tsx
index ea7c720..9612d3c 100644
--- a/src/pages/create-test/FieldsComponents/InputFieald.tsx
+++ b/src/pages/create-test/FieldsComponents/InputFieald.tsx
@@ -1,27 +1,37 @@
 import { FormGroup, TextField, Typography } from '@mui/material';
 import React from 'react';
-import { Controller } from 'react-hook-form';
+import { Control, Controller, FieldValues } from 'react-hook-form';
 import { useTranslation } from 'next-i18next';
 
 type InputFieldType = {
   nameTitle: string;
   nameControl: string;
   control: any;
+  placeholder: string;
 };
 
 export function InputField({
   nameTitle,
   nameControl,
   control,
+  placeholder,
 }: InputFieldType) {
   const { t } = useTranslation('SwitchSelector');
   return (
     <FormGroup sx={{ marginY: '1rem' }}>
       <Typography typography='inputTitle'>{t(`${nameTitle}`)}</Typography>
       <Controller
-        render={({ field }) => <TextField {...field} />}
         name={nameControl}
+        rules={{ required: true }}
         control={control}
+        render={({ field, fieldState: { error } }) => (
+          <TextField
+            {...field}
+            error={!!error}
+            placeholder={placeholder}
+            helperText={error ? t('This field is required') : ''}
+          />
+        )}
       />
     </FormGroup>
   );
diff --git a/src/pages/create-test/FieldsComponents/QuestionTimer/QuestionTimer.tsx b/src/pages/create-test/FieldsComponents/QuestionTimer/QuestionTimer.tsx
index 3ee4a84..7fad049 100644
--- a/src/pages/create-test/FieldsComponents/QuestionTimer/QuestionTimer.tsx
+++ b/src/pages/create-test/FieldsComponents/QuestionTimer/QuestionTimer.tsx
@@ -24,7 +24,7 @@ export const QuestionTimer: React.FC<TimerProps> = ({ name, control }) => {
               InputProps={{ inputProps: { min: 0 } }}
               fullWidth
             />
-            <Typography>{t('Minutes')}</Typography>
+            <Typography>{t('Min')}</Typography>
           </Box>
         )}
       />
@@ -40,7 +40,7 @@ export const QuestionTimer: React.FC<TimerProps> = ({ name, control }) => {
               InputProps={{ inputProps: { min: 0, max: 59 } }}
               fullWidth
             />
-            <Typography>{t('Seconds')}</Typography>
+            <Typography>{t('Sec')}</Typography>
           </Box>
         )}
       />
diff --git a/src/pages/create-test/FieldsComponents/SelectorField/SelectorFieldDifficulty/SelectorFieldDifficulty.tsx b/src/pages/create-test/FieldsComponents/SelectorField/SelectorFieldDifficulty/SelectorFieldDifficulty.tsx
new file mode 100644
index 0000000..b61f5d6
--- /dev/null
+++ b/src/pages/create-test/FieldsComponents/SelectorField/SelectorFieldDifficulty/SelectorFieldDifficulty.tsx
@@ -0,0 +1,45 @@
+import { Control, Controller, FieldPath, FieldValues } from 'react-hook-form';
+import React from 'react';
+import { Box } from '@mui/system';
+import { Typography } from '@mui/material';
+import { useTranslation } from 'next-i18next';
+import { TypeSwitchSelect } from '../../../../../types/SelectorType';
+import { SwitchSelectorDifficulty } from './SwitchSelectorDifficulty';
+
+type SelectorFieldType<T extends FieldValues> = {
+  name: FieldPath<T>;
+  type: TypeSwitchSelect;
+  label?: string | null;
+  rules?: object;
+  control: Control<T>;
+};
+
+export const SelectorFieldDifficulty = <T extends FieldValues>({
+  name,
+  label,
+  type,
+  rules,
+  control,
+}: SelectorFieldType<T>) => {
+  const { t } = useTranslation('selectorField');
+  return (
+    <Box>
+      {label && (
+        <Typography typography='inputTitle'>{t(`${label}`)}</Typography>
+      )}
+      <Controller
+        control={control}
+        name={name}
+        rules={rules}
+        render={({ field: { onChange, value } }) => (
+          <SwitchSelectorDifficulty
+            type={type}
+            onPressDifficulty={onChange}
+            valueDifficulty={value}
+            name={name}
+          />
+        )}
+      />
+    </Box>
+  );
+};
diff --git a/src/pages/create-test/FieldsComponents/SelectorField/SelectorFieldDifficulty/SwitchSelectorDifficulty.tsx b/src/pages/create-test/FieldsComponents/SelectorField/SelectorFieldDifficulty/SwitchSelectorDifficulty.tsx
new file mode 100644
index 0000000..003c6aa
--- /dev/null
+++ b/src/pages/create-test/FieldsComponents/SelectorField/SelectorFieldDifficulty/SwitchSelectorDifficulty.tsx
@@ -0,0 +1,44 @@
+import { useMemo } from 'react';
+import SwitchSelector from 'react-switch-selector';
+import { useTranslation } from 'next-i18next';
+import { palette } from '../../../../../styles/theme/commonDefaultTheme';
+import { SelectorDifficultyType } from '../../../../../types/SelectorType';
+
+export const SwitchSelectorDifficulty = ({
+  onPressDifficulty,
+  type,
+  valueDifficulty,
+  name,
+}: SelectorDifficultyType) => {
+  const { t } = useTranslation('SwitchSelector');
+  const SelectorsDataDifficulty = useMemo(() => {
+    if (type === 'difficulty') {
+      return [
+        { label: `${t('light')}`, value: 'light' },
+        { label: `${t('medium')}`, value: 'medium' },
+        { label: `${t('hard')}`, value: 'hard' },
+      ];
+    }
+    return [
+      { label: `${t('All')}`, value: 'All' },
+      { label: `${t('My')}`, value: 'My' },
+    ];
+  }, [type]);
+
+  return (
+    <div className='h-10'>
+      <SwitchSelector
+        options={SelectorsDataDifficulty}
+        initialSelectedIndex={0}
+        forcedSelectedIndex={SelectorsDataDifficulty.findIndex(
+          (el) => el.value === valueDifficulty
+        )}
+        onChange={onPressDifficulty}
+        selectedBackgroundColor={palette.primary.main}
+        backgroundColor={palette.background.paperAccent2}
+        fontSize={15}
+        name={name}
+      />
+    </div>
+  );
+};
diff --git a/src/pages/create-test/FieldsComponents/SelectorField/SelectorField.tsx b/src/pages/create-test/FieldsComponents/SelectorField/SelectorFieldNumOfQuestion/SelectorFieldNOQ.tsx
similarity index 72%
rename from src/pages/create-test/FieldsComponents/SelectorField/SelectorField.tsx
rename to src/pages/create-test/FieldsComponents/SelectorField/SelectorFieldNumOfQuestion/SelectorFieldNOQ.tsx
index e3aaed6..20bbfa4 100644
--- a/src/pages/create-test/FieldsComponents/SelectorField/SelectorField.tsx
+++ b/src/pages/create-test/FieldsComponents/SelectorField/SelectorFieldNumOfQuestion/SelectorFieldNOQ.tsx
@@ -3,8 +3,8 @@ import React from 'react';
 import { Box } from '@mui/system';
 import { Typography } from '@mui/material';
 import { useTranslation } from 'next-i18next';
-import { TypeSwitchSelect } from '../../../../types/SelectorType';
-import { SwitchSelectors } from './SwitchSelector';
+import { TypeSwitchSelect } from '../../../../../types/SelectorType';
+import { SwitchSelectorNOQ } from './SwitchSelectorNOQ';
 
 type SelectorFieldType<T extends FieldValues> = {
   name: FieldPath<T>;
@@ -14,7 +14,7 @@ type SelectorFieldType<T extends FieldValues> = {
   control: Control<T>;
 };
 
-export const SelectorField = <T extends FieldValues>({
+export const SelectorFieldNOQ = <T extends FieldValues>({
   name,
   label,
   type,
@@ -32,7 +32,11 @@ export const SelectorField = <T extends FieldValues>({
         name={name}
         rules={rules}
         render={({ field: { onChange, value } }) => (
-          <SwitchSelectors type={type} onPress={onChange} value={value} />
+          <SwitchSelectorNOQ
+            type={type}
+            onPressNOQ={onChange}
+            valueNOQ={value}
+          />
         )}
       />
     </Box>
diff --git a/src/pages/create-test/FieldsComponents/SelectorField/SwitchSelector.tsx b/src/pages/create-test/FieldsComponents/SelectorField/SelectorFieldNumOfQuestion/SwitchSelectorNOQ.tsx
similarity index 57%
rename from src/pages/create-test/FieldsComponents/SelectorField/SwitchSelector.tsx
rename to src/pages/create-test/FieldsComponents/SelectorField/SelectorFieldNumOfQuestion/SwitchSelectorNOQ.tsx
index 25fe84d..927411a 100644
--- a/src/pages/create-test/FieldsComponents/SelectorField/SwitchSelector.tsx
+++ b/src/pages/create-test/FieldsComponents/SelectorField/SelectorFieldNumOfQuestion/SwitchSelectorNOQ.tsx
@@ -1,21 +1,19 @@
 import { useMemo } from 'react';
 import SwitchSelector from 'react-switch-selector';
 import { useTranslation } from 'next-i18next';
-import { palette } from '../../../../styles/theme/commonDefaultTheme';
-import { SelectorType } from '../../../../types/SelectorType';
+import { palette } from '../../../../../styles/theme/commonDefaultTheme';
+import { SelectorNOQType } from '../../../../../types/SelectorType';
 
-export const SwitchSelectors = ({ onPress, type, value }: SelectorType) => {
+export const SwitchSelectorNOQ = ({
+  onPressNOQ,
+  type,
+  valueNOQ,
+}: SelectorNOQType) => {
   const { t } = useTranslation('SwitchSelector');
-  const SelectorsData = useMemo(() => {
-    if (type === 'level') {
-      return [
-        { label: `${t('Easy')}`, value: 'light' },
-        { label: `${t('Medium')}`, value: 'medium' },
-        { label: `${t('Hard')}`, value: 'hard' },
-      ];
-    }
+  const SelectorsDataNOQ = useMemo(() => {
     if (type === 'number') {
       return [
+        { label: '5', value: '5' },
         { label: '10', value: '10' },
         { label: '15', value: '15' },
         { label: '20', value: '20' },
@@ -32,12 +30,12 @@ export const SwitchSelectors = ({ onPress, type, value }: SelectorType) => {
   return (
     <div className='h-10'>
       <SwitchSelector
-        options={SelectorsData}
+        options={SelectorsDataNOQ}
         initialSelectedIndex={0}
-        forcedSelectedIndex={SelectorsData.findIndex(
-          (el) => el.value === value
+        forcedSelectedIndex={SelectorsDataNOQ.findIndex(
+          (el) => el.value === valueNOQ
         )}
-        onChange={onPress}
+        onChange={onPressNOQ}
         selectedBackgroundColor={palette.primary.main}
         backgroundColor={palette.primary.contrastText}
         fontSize={15}
diff --git a/src/pages/create-test/FieldsComponents/SelectorField/SelectorFieldType/SelectorFieldType.tsx b/src/pages/create-test/FieldsComponents/SelectorField/SelectorFieldType/SelectorFieldType.tsx
new file mode 100644
index 0000000..71818bc
--- /dev/null
+++ b/src/pages/create-test/FieldsComponents/SelectorField/SelectorFieldType/SelectorFieldType.tsx
@@ -0,0 +1,45 @@
+import { Control, Controller, FieldPath, FieldValues } from 'react-hook-form';
+import React from 'react';
+import { Box } from '@mui/system';
+import { Typography } from '@mui/material';
+import { useTranslation } from 'next-i18next';
+import { TypeSwitchSelect } from '../../../../../types/SelectorType';
+import { SwitchSelectorType } from './SwitchSelectorType';
+
+type SelectorFieldType<T extends FieldValues> = {
+  name: FieldPath<T>;
+  type: TypeSwitchSelect;
+  label?: string | null;
+  rules?: object;
+  control: Control<T>;
+};
+
+export const SelectorFieldType = <T extends FieldValues>({
+  name,
+  label,
+  type,
+  rules,
+  control,
+}: SelectorFieldType<T>) => {
+  const { t } = useTranslation('selectorField');
+  return (
+    <Box>
+      {label && (
+        <Typography typography='inputTitle'>{t(`${label}`)}</Typography>
+      )}
+      <Controller
+        control={control}
+        name={name}
+        rules={rules}
+        render={({ field: { value, onChange } }) => (
+          <SwitchSelectorType
+            type={type}
+            onPressType={onChange}
+            valueType={value}
+            name={name}
+          />
+        )}
+      />
+    </Box>
+  );
+};
diff --git a/src/pages/create-test/FieldsComponents/SelectorField/SelectorFieldType/SwitchSelectorType.tsx b/src/pages/create-test/FieldsComponents/SelectorField/SelectorFieldType/SwitchSelectorType.tsx
new file mode 100644
index 0000000..95a66d0
--- /dev/null
+++ b/src/pages/create-test/FieldsComponents/SelectorField/SelectorFieldType/SwitchSelectorType.tsx
@@ -0,0 +1,43 @@
+import { useMemo } from 'react';
+import SwitchSelector from 'react-switch-selector';
+import { useTranslation } from 'next-i18next';
+import { palette } from '../../../../../styles/theme/commonDefaultTheme';
+import { SelectorTypeOfQuestionType } from '../../../../../types/SelectorType';
+
+export const SwitchSelectorType = ({
+  onPressType,
+  type,
+  valueType,
+  name,
+}: SelectorTypeOfQuestionType) => {
+  const { t } = useTranslation('SwitchSelector');
+  const SelectorsDataType = useMemo(() => {
+    if (type === 'type') {
+      return [
+        { label: `${t('single')}`, value: 'single' },
+        { label: `${t('multi')}`, value: 'multi' },
+      ];
+    }
+    return [
+      { label: `${t('All')}`, value: 'All' },
+      { label: `${t('My')}`, value: 'My' },
+    ];
+  }, [type]);
+
+  return (
+    <div className='h-10'>
+      <SwitchSelector
+        options={SelectorsDataType}
+        initialSelectedIndex={0}
+        forcedSelectedIndex={SelectorsDataType.findIndex(
+          (el) => el.value === valueType
+        )}
+        onChange={onPressType}
+        selectedBackgroundColor={palette.primary.main}
+        backgroundColor={palette.background.paperAccent2}
+        fontSize={15}
+        name={name}
+      />
+    </div>
+  );
+};
diff --git a/src/pages/create-test/create-question/index.tsx b/src/pages/create-test/create-question/index.tsx
index 1fa8e0d..fd688f8 100644
--- a/src/pages/create-test/create-question/index.tsx
+++ b/src/pages/create-test/create-question/index.tsx
@@ -2,11 +2,9 @@ import React, { useState, useEffect, useMemo } from 'react';
 import { Box, Button, Stack, Typography } from '@mui/material';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { useRouter } from 'next/router';
-import Link from 'next/link';
 import { useTranslation } from 'next-i18next';
 import { QuestionTabs } from '../../../components/common/Tabs/QuestionTabs/QuestionTabs';
 import { InputField } from '../FieldsComponents/InputFieald';
-import { DropDownField } from '../FieldsComponents/DropDownField';
 import { types } from '../../../Mocs/NewTestMoc';
 import CreateAnswer from '../FieldsComponents/CreateAnswer/CreateAnswer';
 import { quizesApi } from '../../../api/quizesApi';
@@ -16,6 +14,9 @@ import { ButtonBackHome } from '../../../components/common/ButtonBackHome';
 import { Layout } from '../../../components/layout/Layout';
 import { StylizedPaper } from '../../../components/common/StylizedPaper/StylizedPaper';
 import { QuestionTimer } from '../FieldsComponents/QuestionTimer/QuestionTimer';
+import { TypeSwitchSelect } from '../../../types/SelectorType';
+import { SelectorFieldDifficulty } from '../FieldsComponents/SelectorField/SelectorFieldDifficulty/SelectorFieldDifficulty';
+import { SelectorFieldType } from '../FieldsComponents/SelectorField/SelectorFieldType/SelectorFieldType';
 
 const CreateQuestion = () => {
   const { t } = useTranslation('create-question');
@@ -42,6 +43,10 @@ const CreateQuestion = () => {
   });
 
   const [questions, setQuestions] = useState([{ ...getNewQuestion() }]);
+  // const [selectedTypeOfQuestion, setTypeOfQuestion] = useState(''); // for single && multi
+  // const onChangeSelectType = (e: any) => {
+  //   setTypeOfQuestion(e.currentTarget.value);
+  // };
   const currentQuestion = useMemo(
     () =>
       questions[currentQuestionIndex] || {
@@ -53,8 +58,8 @@ const CreateQuestion = () => {
     defaultValues: {
       title: currentQuestion.title,
       description: currentQuestion.description,
-      difficulty: currentQuestion.difficulty,
-      type: currentQuestion.type,
+      difficulty: currentQuestion.difficulty[0],
+      type: currentQuestion.type[0],
       content: {
         options: [],
         correctAnswer: [],
@@ -147,38 +152,56 @@ const CreateQuestion = () => {
                   nameTitle={t('Question :')}
                   nameControl='title'
                   control={control}
+                  placeholder='Add question title...'
                 />
                 <InputField
                   nameTitle={t('Description of question :')}
                   nameControl='description'
                   control={control}
+                  placeholder='Add question description...'
                 />
               </Box>
             </Stack>
             <Stack direction='row' spacing={3}>
-              <Box sx={{ flexGrow: 1 }}>
-                <DropDownField
+              <Box sx={{ flexGrow: 2 }}>
+                {/* <DropDownField */}
+                {/*   control={control} */}
+                {/*   controlName='type' */}
+                {/*   name={t('Questions type :')} */}
+                {/*   items={types} */}
+                {/* /> */}
+                <SelectorFieldType
+                  label={t('Type of question')}
+                  name='type'
                   control={control}
-                  controlName='type'
-                  name={t('Questions type :')}
-                  items={types}
+                  type={TypeSwitchSelect.TYPE}
                 />
               </Box>
-              <Box sx={{ flexGrow: 1 }}>
-                <DropDownField
+              <Box sx={{ flexGrow: 10 }}>
+                {/* <DropDownField */}
+                {/*   control={control} */}
+                {/*   controlName='difficulty' */}
+                {/*   name={t('Difficulty :')} */}
+                {/*   items={difficultyItems} */}
+                {/* /> */}
+                <SelectorFieldDifficulty
+                  label={t('Difficulty of question')}
+                  name='difficulty'
                   control={control}
-                  controlName='difficulty'
-                  name={t('Difficulty :')}
-                  items={difficultyItems}
+                  type={TypeSwitchSelect.DIFFICULTY}
                 />
               </Box>
-              <Box sx={{ flexGrow: 2 }}>
+              <Box sx={{ flexGrow: 0 }}>
                 <Typography typography='inputTitle'>{t('Timer :')}</Typography>
                 <QuestionTimer name='timerquestion' control={control} />
               </Box>
             </Stack>
             <Stack spacing={1}>
-              <CreateAnswer control={control} name='options' />
+              <CreateAnswer
+                control={control}
+                name='options'
+                // typeOfQuestion={selectedTypeOfQuestion}
+              />
             </Stack>
           </Stack>
           <Stack alignItems='center'>
diff --git a/src/pages/create-test/create-quiz/CreateQuizContainer.tsx b/src/pages/create-test/create-quiz/CreateQuizContainer.tsx
index 8df697b..9673ce4 100644
--- a/src/pages/create-test/create-quiz/CreateQuizContainer.tsx
+++ b/src/pages/create-test/create-quiz/CreateQuizContainer.tsx
@@ -1,22 +1,27 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { Box, Button, Stack } from '@mui/material';
 import { useTranslation } from 'next-i18next';
 import { ButtonBackHome } from '../../../components/common/ButtonBackHome';
 import { StylizedPaper } from '../../../components/common/StylizedPaper/StylizedPaper';
 import { InputField } from '../FieldsComponents/InputFieald';
-import TopicSelect from '../FieldsComponents/CreateTopic/CreateTopic';
-import { SelectorField } from '../FieldsComponents/SelectorField/SelectorField';
 import { TypeSwitchSelect } from '../../../types/SelectorType';
 import { Layout } from '../../../components/layout/Layout';
 import { CreateQuizType } from '../../../types/CreateQuizType';
+import { SelectorFieldNOQ } from '../FieldsComponents/SelectorField/SelectorFieldNumOfQuestion/SelectorFieldNOQ';
+import CreateTopicComponent from "../FieldsComponents/CreateTopic/CreateTopic";
 
 type CreateQuizContainerType = {
   onSubmit: SubmitHandler<CreateQuizType>;
 };
 
+type Topic = {
+  id: number;
+  title: string;
+};
+
 export const CreateQuizContainer = ({ onSubmit }: CreateQuizContainerType) => {
-  const { handleSubmit, control } = useForm<CreateQuizType>();
+  const { handleSubmit, control } = useForm<CreateQuizType>({defaultValues: {numberOfQuestions: 5}});
   const { t } = useTranslation('create-quiz');
   return (
     <Layout>
@@ -37,6 +42,7 @@ export const CreateQuizContainer = ({ onSubmit }: CreateQuizContainerType) => {
                   nameTitle={t('Test title')}
                   nameControl='title'
                   control={control}
+                  placeholder='Add title for test...'
                 />
               </Box>
               <Box sx={{ flexGrow: 2 }}>
@@ -44,6 +50,7 @@ export const CreateQuizContainer = ({ onSubmit }: CreateQuizContainerType) => {
                   nameControl='description'
                   nameTitle={t('Test description')}
                   control={control}
+                  placeholder='Add description for test...'
                 />
               </Box>
             </Stack>
@@ -52,11 +59,11 @@ export const CreateQuizContainer = ({ onSubmit }: CreateQuizContainerType) => {
               flexWrap='wrap'
               spacing={3}
             >
-              <Box flexGrow={1}>
-                <TopicSelect name='topic' control={control} />
+              <Box flexGrow={2}>
+                <CreateTopicComponent control={control} name='topic' />
               </Box>
-              <Box flexGrow={1}>
-                <SelectorField
+              <Box flexGrow={10}>
+                <SelectorFieldNOQ
                   label={t('Number of questions')}
                   name='numberOfQuestions'
                   control={control}
@@ -68,6 +75,7 @@ export const CreateQuizContainer = ({ onSubmit }: CreateQuizContainerType) => {
               nameControl='comment'
               nameTitle={t('Comment')}
               control={control}
+              placeholder='Add comment for test...'
             />
             <Stack alignItems='center' marginTop='20px'>
               <Button type='submit'>{t('Save quiz')}</Button>
diff --git a/src/pages/testPage/index.tsx b/src/pages/testPage/index.tsx
index 4f411b4..76505c0 100644
--- a/src/pages/testPage/index.tsx
+++ b/src/pages/testPage/index.tsx
@@ -6,8 +6,6 @@ import { wrapper } from '../../store/store';
 import { getQuestions } from '../../store/reducers/questions-reducer';
 
 export default function TestPage() {
-  const { t } = useTranslation('testPage');
-
   return (
     <Layout>
       {/* <ButtonBackHome /> */}
diff --git a/src/store/reducers/topic-reducer.ts b/src/store/reducers/topic-reducer.ts
index 02f5e67..4ac5ca6 100644
--- a/src/store/reducers/topic-reducer.ts
+++ b/src/store/reducers/topic-reducer.ts
@@ -3,6 +3,7 @@ import { HYDRATE } from 'next-redux-wrapper';
 import { AxiosError } from 'axios';
 import { quizesApi } from '../../api/quizesApi';
 import { TopicType } from '../../types/CreateQuizType';
+import { topicApi } from "../../api/topicApi";
 
 export const createTopic = createAsyncThunk(
   'topic/createTopicTC',
@@ -17,6 +18,19 @@ export const createTopic = createAsyncThunk(
   }
 );
 
+export const getAllTopics = createAsyncThunk(
+  'topic/getTopics',
+  async (_, { rejectWithValue }) => {
+    try {
+      const response = await topicApi.getTopic();
+      return response.data;
+    } catch (e) {
+      const err = e as AxiosError;
+      return rejectWithValue(err.message);
+    }
+  }
+);
+
 export const slice = createSlice({
   name: 'topic',
   initialState: {
@@ -31,11 +45,15 @@ export const slice = createSlice({
   extraReducers: {
     [HYDRATE]: (state, action) => ({
       ...state,
-      ...action.payload.topic,
+      ...action.payload.topicData,
+
     }),
     [createTopic.fulfilled.type]: (state, action) => {
       state.topic = action.payload;
     },
+    [getAllTopics.fulfilled.type]: (state, action) => {
+      state.topicData = action.payload;
+    }
   },
 });
 
diff --git a/src/store/selectors.ts b/src/store/selectors.ts
index cf96ea7..5cc5175 100644
--- a/src/store/selectors.ts
+++ b/src/store/selectors.ts
@@ -1,7 +1,5 @@
-import React from 'react';
-import { AppState } from './store';
-import { createTopic } from './reducers/topic-reducer';
+import { AppState } from "./store";
 
 export const selectOneQuizes = (state: AppState) => state.quizes.oneQuizes;
 export const selectResulData = (state: AppState) => state.resultData.result;
-export const selectTopic = (state: AppState) => state.topics.topic;
+export const selectTopic = (state: AppState) => state.topics.topic;
\ No newline at end of file
diff --git a/src/types/CreateQuizType.ts b/src/types/CreateQuizType.ts
index a65df20..5cfec92 100644
--- a/src/types/CreateQuizType.ts
+++ b/src/types/CreateQuizType.ts
@@ -2,8 +2,8 @@ export type CreateQuizType = {
   title: string;
   description: string;
   comment: string;
-  topicId: any;
-  numberOfQuestions: any;
+  topicId: number;
+  numberOfQuestions: number;
   id?: number;
 };
 export type TopicType = {
diff --git a/src/types/SelectorType.ts b/src/types/SelectorType.ts
index 650231d..ea304c1 100644
--- a/src/types/SelectorType.ts
+++ b/src/types/SelectorType.ts
@@ -1,11 +1,26 @@
-export type SelectorType = {
-  onPress?: <T>(selectedOptionValue: T | unknown) => void;
-  value?: string | number;
+export type SelectorDifficultyType = {
+  onPressDifficulty?: <T>(selectedOptionValue: T | unknown) => void;
+  valueDifficulty?: string | number;
   type: TypeSwitchSelect;
+  name: string;
+};
+
+export type SelectorNOQType = {
+  onPressNOQ?: <T>(selectedOptionValue: T | unknown) => void;
+  valueNOQ?: string | number;
+  type: TypeSwitchSelect;
+};
+
+export type SelectorTypeOfQuestionType = {
+  onPressType?: <T>(selectedOptionValue: T | unknown) => void;
+  valueType?: string | number;
+  type: TypeSwitchSelect;
+  name: string;
 };
 
 export enum TypeSwitchSelect {
-  LEVEL = 'level',
+  DIFFICULTY = 'difficulty',
+  TYPE = 'type',
   NUMBER = 'number',
   FILTER = 'filter',
 }