diff --git a/src/components/common/ui/button-mui/Button.tsx b/src/components/common/ui/button-mui/Button.tsx
index 57b16cd2c..ca61e117e 100644
--- a/src/components/common/ui/button-mui/Button.tsx
+++ b/src/components/common/ui/button-mui/Button.tsx
@@ -21,6 +21,7 @@ interface ButtonProps {
   type?: 'button' | 'reset' | 'submit';
 }
 
+
 const Button: FC<ButtonProps> = ({
   text,
   color = ButtonColor.PRIMARY,
diff --git a/src/components/pages/admin/user-page/user-create/index.ts b/src/components/pages/admin/user-page/user-create/index.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/components/pages/admin/user-page/user-edit/index.ts b/src/components/pages/admin/user-page/user-edit/index.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/components/pages/admin/user-page/user-search/index.ts b/src/components/pages/admin/user-page/user-search/index.ts
new file mode 100644
index 000000000..e8fe7c9c8
--- /dev/null
+++ b/src/components/pages/admin/user-page/user-search/index.ts
@@ -0,0 +1 @@
+export { default } from './user-search-page';
\ No newline at end of file
diff --git a/src/components/pages/admin/user-page/user-search/search-form/constants.ts b/src/components/pages/admin/user-page/user-search/search-form/constants.ts
new file mode 100644
index 000000000..dcf9a313b
--- /dev/null
+++ b/src/components/pages/admin/user-page/user-search/search-form/constants.ts
@@ -0,0 +1,16 @@
+import UserSearchFormFields, {
+    SearchFilter,
+    SearchOrder,
+    SearchSort
+} from '@/components/pages/admin/user-page/user-search/search-form/types';
+
+const SearchInitialValues: UserSearchFormFields = {
+    search: '',
+    email: '',
+    username: '',
+    sort: SearchSort.NAME,
+    filter: SearchFilter.ALL,
+    order: SearchOrder.ASCENDING,
+}
+
+export default SearchInitialValues;
\ No newline at end of file
diff --git a/src/components/pages/admin/user-page/user-search/search-form/index.ts b/src/components/pages/admin/user-page/user-search/search-form/index.ts
new file mode 100644
index 000000000..d676dcef7
--- /dev/null
+++ b/src/components/pages/admin/user-page/user-search/search-form/index.ts
@@ -0,0 +1 @@
+export {default } from './searchForm';
\ No newline at end of file
diff --git a/src/components/pages/admin/user-page/user-search/search-form/searchForm.module.scss b/src/components/pages/admin/user-page/user-search/search-form/searchForm.module.scss
new file mode 100644
index 000000000..c84537c9f
--- /dev/null
+++ b/src/components/pages/admin/user-page/user-search/search-form/searchForm.module.scss
@@ -0,0 +1,32 @@
+@import "src/styles/partials/breakpoints";
+
+.form {
+  display: grid;
+  width: 100%;
+
+  //                     35  50      70
+  grid-template-columns: 35% 15% 15% 5% 27%;
+  grid-template-rows: 1fr;
+  gap: 12px;
+  margin-bottom: 34px;
+  align-items: center;
+
+}
+
+
+@media screen and (max-width: $breakpoint-tablet)  {
+  .form {
+    grid-template-columns: 35% 45% 10%;
+  }
+  .input {
+    grid-column: 1 / span 2;
+  }
+}
+
+@media only screen and (max-width: $breakpoint-mobile){
+  .form{
+    column-gap: 15px;
+    margin-bottom: 24px;
+  }
+}
+
diff --git a/src/components/pages/admin/user-page/user-search/search-form/searchForm.stories.ts b/src/components/pages/admin/user-page/user-search/search-form/searchForm.stories.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/components/pages/admin/user-page/user-search/search-form/searchForm.styles.ts b/src/components/pages/admin/user-page/user-search/search-form/searchForm.styles.ts
new file mode 100644
index 000000000..37c0e5d5b
--- /dev/null
+++ b/src/components/pages/admin/user-page/user-search/search-form/searchForm.styles.ts
@@ -0,0 +1,45 @@
+import { SxProps, Theme } from '@mui/material/styles';
+
+
+export const dropdown1: SxProps<Theme> = {
+    width: '100%',
+    maxWidth: '80%',
+};
+export const dropdown2: SxProps<Theme> = {
+    width: '100%',
+};
+
+export const collapseBtn: SxProps<Theme> = {
+    display: { tablet: 'none' },
+    alignSelf: { tablet: 'center' },
+};
+
+export const sortIcon: SxProps<Theme> = {
+    height: '48px',
+    aspectRatio: '1/1',
+    display: 'grid',
+};
+
+export const collapseIcon: SxProps<Theme> = {
+    height: '48px',
+    aspectRatio: '1/1',
+    alignSelf: { mobile: 'flex-start', tablet: 'center' },
+    display: { mobile: 'grid', tablet: 'block !important' },
+    '& .svg': { width: { tablet: '70%' } },
+};
+
+export const createButtonContainer: SxProps<Theme> = {
+    height: '48px',
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'column',
+    alignSelf: 'center',
+}
+
+export const createButton: SxProps<Theme> = {
+    height: '48px',
+    aspectRatio: '1/1',
+    flexShrink: 0,
+}
+
+
diff --git a/src/components/pages/admin/user-page/user-search/search-form/searchForm.tsx b/src/components/pages/admin/user-page/user-search/search-form/searchForm.tsx
new file mode 100644
index 000000000..f72618a7e
--- /dev/null
+++ b/src/components/pages/admin/user-page/user-search/search-form/searchForm.tsx
@@ -0,0 +1,275 @@
+import UserSearchFormFields, {
+    SearchFilter,
+    SearchSort
+} from "@/components/pages/admin/user-page/user-search/search-form/types";
+
+import Button from '@/components/common/ui/button-mui'
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { FC } from 'react';
+import { useQuery } from 'react-query';
+import {
+    BarsArrowDownIcon,
+    BarsArrowUpIcon,
+    ChevronDownIcon,
+    ChevronUpIcon,
+} from '@heroicons/react/24/outline';
+
+import {
+    Dropdown,
+    Input,
+    InputSize,
+    InputType,
+} from '@/components/common/ui/form';
+import { Form, Formik, FormikProps, useFormikContext } from 'formik';
+import { DropDownOption } from '@/components/common/ui/form/dropdown/types';
+import {
+    IconButtonColor,
+    IconButtonShape,
+} from '@/components/common/ui/icon-button';
+import IconButton from '@/components/common/ui/icon-button-mui';
+import GroupAPI from '@/lib/api/group/GroupAPI';
+import theme from '@/styles/theme';
+
+import {Box, useMediaQuery} from "@mui/material";
+import * as styles from '@/components/pages/admin/user-page/user-search/search-form/searchForm.styles' ;
+import stylesScss from '@/components/pages/admin/user-page/user-search/search-form/searchForm.module.scss';
+import formatters from "chart.js/dist/core/core.ticks";
+
+export interface SearchFormProps {
+    onSubmit: (values: Partial<UserSearchFormFields>) => void;
+    initialValues: UserSearchFormFields;
+    filterDropDownOptions: DropDownOption[];
+    searchPlaceholder: string;
+    localStorageName?: string;
+}
+
+const FormObserver = (props: { name?: string }) => {
+    const { values } = useFormikContext();
+    localStorage.setItem(props.name || '', JSON.stringify(values));
+    return null;
+};
+
+/*
+const initialDropdownValues = {
+    sort: 'username',
+    filter: 'none',
+};
+*/
+
+const filterOptions: DropDownOption[] = [
+    { id: SearchFilter.CONFIRMED, label: 'Верифікований' },
+    { id: SearchFilter.UNCONFIRMED, label: 'Не верифікований' },
+    { id: SearchFilter.ALL, label: 'Всі' },
+];
+
+const sortOptions: DropDownOption[] = [
+    { id: SearchSort.EMAIL, label: 'За поштою' },
+    { id: SearchSort.USERNAME, label: 'За юзернеймом' },
+]
+
+export const UserSearchForm: FC<SearchFormProps> = ({
+     onSubmit,
+     initialValues,
+     searchPlaceholder,
+     localStorageName,
+
+}) => {
+    const isTablet = useMediaQuery(theme.breakpoints.down('tablet'));
+    const [collapsed, setCollapsed] = useState(false);
+    const formikRef = useRef<FormikProps<UserSearchFormFields>>(null);
+
+    const handleStateDropdownChange  = useCallback((filter: string) => {
+        formikRef.current?.setFieldValue('filter', filter);
+        formikRef.current?.handleSubmit();
+    }, []);
+
+    const handleSortDropdownChange = useCallback((sort: string) => {
+        formikRef.current?.setFieldValue('sort', sort);
+        formikRef.current?.handleSubmit();
+    }, []);
+
+    const handleOrderChange = useCallback(() => {
+        const order = formikRef.current?.values.order;
+        formikRef.current?.setFieldValue('order', order === 'asc' ? 'desc' : 'asc');
+        formikRef.current?.handleSubmit();
+    }, []);
+
+    const handeDownload = useCallback(() => {
+        console.log("< called Створити button >")
+    }, []);
+
+    return (
+        <Formik
+            initialValues={initialValues}
+            onSubmit={onSubmit}
+            enableReinitialize
+            innerRef={formikRef}
+        >
+            {({ handleSubmit, values }) => (
+                <Form className={stylesScss['form']}>
+                    <FormObserver name={localStorageName} />
+                    <Input
+                        onDeterredChange={handleSubmit}
+                        className={stylesScss['input']}
+                        size={InputSize.LARGE}
+                        type={InputType.SEARCH}
+                        name="search"
+                        placeholder={searchPlaceholder}
+                        showRemark={false}
+                    />
+                    <Box sx={styles.collapseBtn}>
+                        <IconButton
+                            sx={styles.collapseIcon}
+                            shape={IconButtonShape.SQUARE}
+                            color={IconButtonColor.SECONDARY}
+                            icon={collapsed ? <ChevronDownIcon /> : <ChevronUpIcon />}
+                            onClick={() => setCollapsed(pr => !pr)}
+                        />
+                    </Box>
+                    {(!collapsed || (!isTablet && collapsed)) && (
+                        <>
+                            <>
+                            <Box sx={styles.dropdown1}>
+                                <Dropdown
+                                    label="Стан"
+                                    placeholder=""
+                                    onChange={handleStateDropdownChange}
+                                    showRemark={false}
+                                    value={values.filter}
+                                    options={filterOptions}
+                                />
+                            </Box>
+                            <Box sx={styles.dropdown2}>
+                                <Dropdown
+                                    label="Сортування"
+                                    placeholder=""
+                                    onChange={handleSortDropdownChange}
+                                    showRemark={false}
+                                    value={values.sort}
+                                    options={sortOptions}
+                                />
+                            </Box>
+                            <Box>
+                                <IconButton
+                                    sx={styles.sortIcon}
+                                    onClick={handleOrderChange}
+                                    shape={IconButtonShape.SQUARE}
+                                    color={IconButtonColor.SECONDARY}
+                                    icon={
+                                        values.order === 'asc' ? (
+                                            <BarsArrowDownIcon />
+                                        ) : (
+                                            <BarsArrowUpIcon />
+                                        )
+                                    }
+                                />
+                            </Box>
+                            <Box sx={styles.createButtonContainer}>
+                                <Button
+                                    sx={styles.createButton}
+                                    text="Створити"
+                                    onClick={handeDownload}
+                                />
+                            </Box>
+                        </>
+                    </>
+                    )}
+                </Form>
+            )}
+        </Formik>)
+};
+
+export default UserSearchForm;
+
+/*
+  text?: string;
+  color?: ButtonColor;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  startIcon?: ReactNode;
+  endIcon?: ReactNode;
+  sx?: SxProps<Theme>;
+  disabled?: boolean;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  href?: string;
+  type?: 'button' | 'reset' | 'submit';
+* */
+
+/*
+
+  return (
+    <Formik
+      initialValues={initialValues}
+      onSubmit={onSubmit}
+      enableReinitialize
+      innerRef={formikRef}
+    >
+      {({ handleSubmit, values }) => (
+        <Form className={stylesScss['form']}>
+          <FormObserver name={localStorageName} />
+          <Input
+            onDeterredChange={handleSubmit}
+            className={stylesScss['input']}
+            size={InputSize.LARGE}
+            type={InputType.SEARCH}
+            name="search"
+            placeholder={searchPlaceholder}
+            showRemark={false}
+          />
+          <Box sx={styles.collapseBtn}>
+            <IconButton
+              sx={styles.collapseIcon}
+              shape={IconButtonShape.SQUARE}
+              color={IconButtonColor.SECONDARY}
+              icon={collapsed ? <ChevronDownIcon /> : <ChevronUpIcon />}
+              onClick={() => setCollapsed(pr => !pr)}
+            />
+          </Box>
+          {(!collapsed || (!isTablet && collapsed)) && (
+            <>
+              <Box sx={styles.dropdown1}>
+                <Dropdown
+                  placeholder="ІП-22"
+                  label="Група"
+                  onChange={handleGroupChange}
+                  showRemark={false}
+                  value={values.group}
+                  options={groups}
+                />
+              </Box>
+              <Box sx={styles.dropdown2}>
+                <Dropdown
+                  label="Сортувати за"
+                  placeholder="Іменем"
+                  onChange={handleSortChange}
+                  showRemark={false}
+                  value={values.sort}
+                  options={filterDropDownOptions}
+                />
+              </Box>
+              <Box>
+                <IconButton
+                  sx={styles.sortIcon}
+                  onClick={handleOrderChange}
+                  shape={IconButtonShape.SQUARE}
+                  color={IconButtonColor.SECONDARY}
+                  icon={
+                    values.order === 'asc' ? (
+                      <BarsArrowDownIcon />
+                    ) : (
+                      <BarsArrowUpIcon />
+                    )
+                  }
+                />
+              </Box>
+            </>
+          )}
+        </Form>
+      )}
+    </Formik>
+  );
+};
+
+export default SearchForm;
+
+* */
\ No newline at end of file
diff --git a/src/components/pages/admin/user-page/user-search/search-form/types/index.ts b/src/components/pages/admin/user-page/user-search/search-form/types/index.ts
new file mode 100644
index 000000000..4dafdf2c0
--- /dev/null
+++ b/src/components/pages/admin/user-page/user-search/search-form/types/index.ts
@@ -0,0 +1,27 @@
+
+export enum SearchOrder {
+    ASCENDING  = 'asc',
+    DESCENDING = 'desc',
+}
+
+export enum SearchFilter {
+    ALL         = 'all',
+    CONFIRMED   = 'confirmed',
+    UNCONFIRMED = 'unconfirmed',
+}
+
+export enum SearchSort {
+    NAME =     'name',
+    EMAIL =    'email',
+    LASTNAME = 'lastname',
+    USERNAME = 'username',
+}
+
+export default interface  UserSearchFormFields {
+    email: string,
+    search: string,
+    username: string,
+    sort: SearchSort,
+    order: SearchOrder,
+    filter: SearchFilter;
+}
\ No newline at end of file
diff --git a/src/components/pages/admin/user-page/user-search/user-search-page.stories.ts b/src/components/pages/admin/user-page/user-search/user-search-page.stories.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/components/pages/admin/user-page/user-search/user-search-page.styles.tsx b/src/components/pages/admin/user-page/user-search/user-search-page.styles.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/components/pages/admin/user-page/user-search/user-search-page.tsx b/src/components/pages/admin/user-page/user-search/user-search-page.tsx
new file mode 100644
index 000000000..0b53f05ff
--- /dev/null
+++ b/src/components/pages/admin/user-page/user-search/user-search-page.tsx
@@ -0,0 +1,90 @@
+import React, {FC, useCallback, useEffect, useState} from 'react';
+import {SearchFormProps, UserSearchForm} from "@/components/pages/admin/user-page/user-search/search-form/searchForm";
+import userSearchForm from "@/components/pages/admin/user-page/user-search/search-form";
+import SearchInitialValues from "@/components/pages/admin/user-page/user-search/search-form/constants";
+import {DropDownOption} from "@/components/common/ui/form/dropdown/types";
+import {SearchFormFields} from "@/components/pages/search-pages/search-form/types";
+import {Box} from "@mui/material";
+import Breadcrumbs from "@/components/common/ui/breadcrumbs";
+
+const filterOptions: DropDownOption[] = [
+    { id: 'firstName', label: 'Іменем' },
+    { id: 'lastName', label: 'Прізвищем' },
+];
+
+const localStorageName = "userSearchPageStorage";
+
+export const UserSearchPage = () => {
+    const initialValues = localStorage.getItem(localStorageName)
+        ? JSON.parse(localStorage.getItem(localStorageName) || '{}')
+        : SearchInitialValues;
+    const [queryObj, setQueryObj] = useState<SearchFormFields>(initialValues);
+    const [curPage, setCurPage] = useState(0);
+    const submitHandler: SearchFormProps['onSubmit'] = useCallback(query => {
+        setQueryObj(prev => ({ ...prev, ...query }));
+        setCurPage(0);
+    }, []);
+
+    useEffect(() => {
+        void refetch();
+    }, [queryObj, curPage, refetch]);
+    /*
+      const { data, isLoading, refetch, isFetching } =
+        useQuery<GetTeachersResponse>(
+          'lecturers',
+          () => TeacherAPI.getAll(queryObj, PAGE_SIZE * (curPage + 1)),
+          { keepPreviousData: true, refetchOnWindowFocus: false },
+    );
+
+  useEffect(() => {
+    void refetch();
+  }, [queryObj, curPage, refetch]);
+//
+  return (
+    <Box sx={styles.layout}>
+      <Breadcrumbs items={breadcrumbs} sx={styles.breadcrumbs} />
+      <SearchForm
+        searchPlaceholder="Оберіть викладача"
+        filterDropDownOptions={filterOptions}
+        onSubmit={submitHandler}
+        initialValues={initialValues}
+        localStorageName={localStorageName}
+      />
+      {data && <TeacherSearchList teachers={data.teachers} />}
+      {isLoading ||
+        (isFetching && (
+          <Box sx={styles.pageLoader}>
+            <Progress />
+          </Box>
+        ))}
+      {data?.teachers.length === (curPage + 1) * PAGE_SIZE && (
+        <Button
+          sx={styles.loadBtn}
+          text="Завантажити ще"
+          variant={ButtonVariant.FILLED}
+          color={ButtonColor.SECONDARY}
+          onClick={() => setCurPage(pr => pr + 1)}
+        />
+      )}
+    </Box>
+  );
+      * */
+
+
+    return <>
+        <Box sx={styles.layout}>
+            <Breadcrumbs items={breadcrumbs} sx={styles.breadcrumbs} />
+            <UserSearchForm
+                onSubmit = {()=>{}}
+                initialValues = {SearchInitialValues}
+                filterDropDownOptions = {filterOptions}
+                searchPlaceholder={"Пошук"}
+                localStorageName={localStorageName}
+            />
+
+        </Box>
+    </>
+}
+
+
+export default  UserSearchPage;
\ No newline at end of file
diff --git a/src/components/pages/search-pages/search-form/SearchForm.tsx b/src/components/pages/search-pages/search-form/SearchForm.tsx
index d398e0862..43e7b6524 100644
--- a/src/components/pages/search-pages/search-form/SearchForm.tsx
+++ b/src/components/pages/search-pages/search-form/SearchForm.tsx
@@ -42,11 +42,11 @@ const FormObserver = (props: { name?: string }) => {
   return null;
 };
 const SearchForm: FC<SearchFormProps> = ({
-  onSubmit,
-  initialValues,
-  filterDropDownOptions,
-  searchPlaceholder,
-  localStorageName,
+    onSubmit,
+    initialValues,
+    filterDropDownOptions,
+    searchPlaceholder,
+    localStorageName,
 }) => {
   const isTablet = useMediaQuery(theme.breakpoints.down('tablet'));
   const [collapsed, setCollapsed] = useState(false);
diff --git a/src/pages/admin/index.tsx b/src/pages/admin/index.tsx
index 9ad740aa0..92edd37f5 100644
--- a/src/pages/admin/index.tsx
+++ b/src/pages/admin/index.tsx
@@ -1,11 +1,13 @@
 import React from 'react';
 
 import AdminPanelLayout from '@/components/common/layout/admin-panel-layout/AdminPanelLayout';
+import userSearchForm from "@/components/pages/admin/user-page/user-search/search-form";
+import UserSearchPage from "@/components/pages/admin/user-page/user-search";
 
 const Index = () => {
   return (
     <AdminPanelLayout>
-      <div></div>
+        <h1> users/index.tsx </h1>
     </AdminPanelLayout>
   );
 };
diff --git a/src/pages/admin/users/create.tsx b/src/pages/admin/users/create.tsx
index a30f8a061..2cdcdba47 100644
--- a/src/pages/admin/users/create.tsx
+++ b/src/pages/admin/users/create.tsx
@@ -5,7 +5,7 @@ import AdminPanelLayout from '@/components/common/layout/admin-panel-layout/Admi
 const Create = () => {
   return (
     <AdminPanelLayout>
-      <div></div>
+        <h1> 1 1 1 </h1>
     </AdminPanelLayout>
   );
 };
diff --git a/src/pages/admin/users/index.tsx b/src/pages/admin/users/index.tsx
index 9ad740aa0..77a289f7a 100644
--- a/src/pages/admin/users/index.tsx
+++ b/src/pages/admin/users/index.tsx
@@ -2,10 +2,24 @@ import React from 'react';
 
 import AdminPanelLayout from '@/components/common/layout/admin-panel-layout/AdminPanelLayout';
 
+
+import SearchInitialValues from "@/components/pages/admin/user-page/user-search/search-form/constants";
+
+import {DropDownOption} from "@/components/common/ui/form/dropdown/types";
+import UserSearchForm from "@/components/pages/admin/user-page/user-search/search-form";
+import UserSearchPage from "@/components/pages/admin/user-page/user-search";
+const filterOptions: DropDownOption[] = [
+    { id: 'firstName', label: 'Іменем' },
+    { id: 'lastName', label: 'Прізвищем' },
+];
+
+
 const Index = () => {
   return (
     <AdminPanelLayout>
-      <div></div>
+        <h5> users/edit/index.tsx </h5>
+        <UserSearchPage/>
+
     </AdminPanelLayout>
   );
 };