From 5d8f121f786ff7a8149e7494f79b8dd426f70776 Mon Sep 17 00:00:00 2001
From: Mav-Ivan <110425368+Mav-Ivan@users.noreply.github.com>
Date: Mon, 25 Nov 2024 19:06:02 +0200
Subject: [PATCH 1/4] replaced all AppButtons with Buttons

---
 .../app-button-menu/AppButtonMenu.styles.ts   | 10 ++--
 .../app-button-menu/AppButtonMenu.tsx         | 21 ++++----
 .../app-menu-button/AppMenuButton.styles.ts   |  8 +--
 .../app-menu-button/AppMenuButton.tsx         | 12 ++---
 src/components/cards-list/CardsList.tsx       | 11 ++---
 .../clickable-image/ClickableImage.tsx        | 10 ++--
 .../confirm-dialog/ConfirmDialog.tsx          | 12 ++---
 .../dropdown-add-btn/DropdownButton.styles.ts |  4 +-
 .../dropdown-add-btn/DropdownButton.tsx       | 13 +++--
 .../EnhancedTablePagination.styles.ts         |  5 --
 .../EnhancedTablePagination.tsx               | 12 ++---
 .../file-component/FileComponent.tsx          | 10 ++--
 src/components/file-uploader/FileUploader.tsx | 17 +++----
 src/components/find-block/FindBlock.tsx       | 11 ++---
 src/components/info-card/InfoCard.tsx         |  6 +--
 .../link-component/LinkComponent.styles.ts    |  4 +-
 .../link-component/LinkComponent.tsx          | 20 ++++----
 .../not-found-results/NotFoundResults.tsx     | 11 ++---
 .../offer-banner/OfferBanner.styles.ts        | 13 -----
 src/components/offer-banner/OfferBanner.tsx   | 32 ++++++------
 .../offer-card/offer-actions/OfferActions.tsx | 21 +++++---
 .../question-editor/QuestionEditor.tsx        | 19 +++----
 .../SearchAutocomplete.styles.ts              |  5 --
 .../SearchAutocomplete.tsx                    | 18 ++-----
 .../SearchFilterInput.styles.tsx              |  4 --
 .../search-filter-input/SearchFilterInput.tsx | 11 +----
 .../SidebarContentBox.styles.ts               |  3 --
 .../sidebar-content-box/SidebarContentBox.tsx | 21 +++-----
 .../step-wrapper/StepWrapper.styles.js        | 11 -----
 src/components/step-wrapper/StepWrapper.tsx   | 34 ++++---------
 .../AboutChatSidebar.styles.ts                |  6 +--
 .../about-chat-sidebar/AboutChatSidebar.tsx   | 19 ++-----
 .../ChangeResourceConfirmModal.tsx            | 21 ++++----
 .../CookieConsentBanner.tsx                   | 11 +++--
 .../AddCourseTemplateModal.tsx                | 11 ++---
 .../CooperationActivities.tsx                 | 18 +++----
 .../course-section/CourseSectionContainer.tsx | 10 ++--
 .../PasswordSecurityTab.styles.ts             |  1 -
 .../PasswordSecurityTab.tsx                   |  6 +--
 .../ChangePasswordModal.tsx                   | 26 +++++-----
 .../PasswordSecurityItem.tsx                  | 12 ++---
 .../ProfessionalInfoTab.tsx                   |  8 ++-
 .../AddProfessionalCategoryModal.tsx          | 20 +++-----
 .../ProfessionalCategory.tsx                  | 16 +++---
 .../profile-tab-form/ProfileTabForm.tsx       | 11 ++---
 .../EmailConfirmModal.styles.js               |  1 -
 .../email-confirm-modal/EmailConfirmModal.tsx | 27 +++-------
 .../courses-filters/CourseFilters.styles.tsx  |  4 +-
 .../courses-filters/CoursesFilters.tsx        | 11 ++---
 .../create-new-subject/CreateNewSubject.tsx   |  6 +--
 .../offer-card-square/OfferCardSquare.tsx     | 19 ++++---
 .../OfferFilterBlock.styles.ts                |  7 ---
 .../offer-filter-block/OfferFilterBlock.tsx   | 10 ++--
 .../offer-request-block/OfferRequestBlock.tsx | 11 ++---
 src/containers/guest-home-page/Welcome.tsx    |  8 +--
 .../cards-with-button/CardsWithButton.tsx     | 17 ++-----
 .../forgot-password/ForgotPassword.jsx        | 15 +++---
 .../forgot-password/ForgotPassword.styles.js  |  1 -
 .../guest-home-page/login-form/LoginForm.tsx  |  6 +--
 .../notification-modal/NotificationModal.tsx  |  4 +-
 .../reset-password/ResetPassword.tsx          | 21 +++-----
 .../signup-form/SignupForm.styles.js          |  3 +-
 .../signup-form/SignupForm.tsx                |  6 +--
 .../guest-home-page/styles/Welcome.styles.ts  |  7 ---
 src/containers/layout/navbar/NavBar.tsx       | 12 ++---
 .../notifications-menu/NotificationsMenu.tsx  | 13 ++---
 .../AcceptCooperationModal.tsx                | 20 ++++----
 .../CooperationCompletion.styles.ts           |  9 ----
 .../CooperationCompletion.tsx                 | 31 +++++++++---
 .../CooperationDetails.tsx                    | 20 +++-----
 .../create-or-edit-note/CreateOrEditNote.tsx  | 17 +++----
 .../EmptyCooperationActivities.styles.ts      |  9 ----
 .../EmptyCooperationTutorControls.tsx         | 13 +++--
 .../MyCooperationsDetails.styles.ts           |  9 +---
 .../MyCooperationsDetails.tsx                 | 21 ++++----
 .../AddCourseWithInput.tsx                    |  8 +--
 .../CoursesFiltersDrawer.tsx                  | 20 +++-----
 .../my-offers/my-offers-card/MyOffersCard.tsx | 13 ++---
 .../CreateOrEditQuizContainer.styles.ts       |  4 --
 .../CreateOrEditQuizContainer.tsx             | 49 +++++++------------
 .../QuizSettingsContainer.tsx                 |  6 +--
 .../AddAttachmentCategoryModal.tsx            | 11 ++---
 .../AddCategoriesModal.tsx                    | 17 +++----
 .../add-resource-modal/AddResourceModal.tsx   | 17 +++----
 .../AddResourceWithInput.tsx                  | 13 +++--
 .../CategoriesContainer.tsx                   |  7 ++-
 .../CreateOrEditQuestionModal.tsx             | 17 +++----
 .../EditAttachmentModal.tsx                   | 11 ++---
 .../ResourcesToolbarDrawer.tsx                | 23 ++-------
 .../guest-icons/GuestIcons.tsx                | 12 ++---
 .../enroll-offer/EnrollOffer.tsx              |  6 +--
 .../CreateOrEditOffer.tsx                     | 18 +++----
 .../offer-page/faq-block/FaqBlock.tsx         | 17 ++-----
 .../SelectableQuestionQuizView.tsx            | 33 ++++++-------
 .../StudentHowItWorks.jsx                     | 13 ++---
 .../subjects-step/SubjectsStep.tsx            | 15 ++----
 .../comments-block/CommentBlock.tsx           |  6 +--
 .../user-profile/profile-info/ProfileInfo.tsx | 25 +++-------
 .../components/button/Button.scss             | 13 ++---
 .../components/button/Button.tsx              |  8 +--
 src/design-system/scss/_mixins.scss           |  2 +-
 src/design-system/scss/_variables.scss        |  2 +-
 src/pages/create-course/CreateCourse.tsx      | 21 ++++----
 .../CreateOrEditLesson.tsx                    | 23 ++++-----
 .../CreateOrEditQuestion.tsx                  | 14 ++----
 src/pages/edit-profile/EditProfile.tsx        | 18 +++----
 src/pages/error/AuthPolicy.jsx                | 10 ++--
 src/pages/error/BadRequest.jsx                | 10 ++--
 src/pages/error/InternalServerError.jsx       |  9 ++--
 src/pages/error/NotFound.jsx                  |  9 ++--
 src/pages/lesson-details/LessonDetails.tsx    | 12 +++--
 src/pages/my-cooperations/MyCooperations.tsx  |  6 +--
 src/pages/my-offers/MyOffers.tsx              |  6 +--
 src/pages/quiz/Quiz.tsx                       |  6 +--
 src/router/constants/authRoutes.ts            |  4 ++
 115 files changed, 570 insertions(+), 907 deletions(-)

diff --git a/src/components/app-button-menu/AppButtonMenu.styles.ts b/src/components/app-button-menu/AppButtonMenu.styles.ts
index ea621cf7d..3d073b16b 100644
--- a/src/components/app-button-menu/AppButtonMenu.styles.ts
+++ b/src/components/app-button-menu/AppButtonMenu.styles.ts
@@ -3,15 +3,11 @@ import { TypographyVariantEnum } from '~/types'
 
 export const styles = {
   root: {
-    maxWidth: { xs: '200px', md: '300px' },
-    backgroundColor: 'primary.50',
-    display: 'flex',
-    alignItems: 'center',
-    px: '12px',
-    borderRadius: '100px'
+    overflow: 'hidden'
   },
-  text: { typography: TypographyVariantEnum.Subtitle1 },
+  text: { typography: TypographyVariantEnum.Subtitle1, mr: '10px' },
   chosenFilters: {
+    maxWidth: { xs: '50px', sm: '100px' },
     typography: TypographyVariantEnum.Subtitle1,
     fontWeight: 500,
     overflow: 'hidden',
diff --git a/src/components/app-button-menu/AppButtonMenu.tsx b/src/components/app-button-menu/AppButtonMenu.tsx
index 33dcea531..6c78eddad 100644
--- a/src/components/app-button-menu/AppButtonMenu.tsx
+++ b/src/components/app-button-menu/AppButtonMenu.tsx
@@ -13,18 +13,14 @@ import CircleIcon from '@mui/icons-material/Circle'
 import useAxios from '~/hooks/use-axios'
 import useMenu from '~/hooks/use-menu'
 import Loader from '~/components/loader/Loader'
-import AppButton from '~/components/app-button/AppButton'
 import AppMenuButton from '~/components/app-menu-button/AppMenuButton'
 import AppSelectButton from '~/components/app-select-button/AppSelectButton'
+import Button from '~scss-components/button/Button'
 
 import { defaultResponses } from '~/constants'
 import { spliceSx } from '~/utils/helper-functions'
 import { styles } from '~/components/app-button-menu/AppButtonMenu.styles'
-import {
-  ButtonVariantEnum,
-  CategoryNameInterface,
-  ServiceFunction
-} from '~/types'
+import { CategoryNameInterface, ServiceFunction } from '~/types'
 
 interface AppButtonMenuProps<T> extends Omit<MenuProps, 'open'> {
   title: string
@@ -146,16 +142,19 @@ const AppButtonMenu = <T extends Pick<CategoryNameInterface, '_id'>>({
 
   return (
     <>
-      <AppButton
+      <Button
+        endIcon={
+          <KeyboardArrowDownIcon sx={styles.arrowIcon(Boolean(anchorEl))} />
+        }
         onClick={openMenu}
+        size='sm'
+        startIcon={<CircleIcon sx={styles.unorderedListIcon} />}
         sx={spliceSx(styles.root, customSx?.root)}
-        variant={ButtonVariantEnum.Tonal}
+        variant='tonal'
       >
-        <CircleIcon sx={styles.unorderedListIcon} />
         <Typography sx={styles.text}>{title}:</Typography>
         <Typography sx={styles.chosenFilters}>{chosenFiltersText}</Typography>
-        <KeyboardArrowDownIcon sx={styles.arrowIcon(Boolean(anchorEl))} />
-      </AppButton>
+      </Button>
       {menu}
     </>
   )
diff --git a/src/components/app-menu-button/AppMenuButton.styles.ts b/src/components/app-menu-button/AppMenuButton.styles.ts
index 6f2862eec..79cb76d62 100644
--- a/src/components/app-menu-button/AppMenuButton.styles.ts
+++ b/src/components/app-menu-button/AppMenuButton.styles.ts
@@ -12,14 +12,8 @@ export const styles = {
     '& div': { pl: '10px' }
   },
   clearAll: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'end',
-    columnGap: '3px',
     typography: TypographyVariantEnum.Subtitle2,
-    m: '15px 20px 0 auto',
-    p: 0,
-    '&:hover': { backgroundColor: 'transparent' }
+    m: '15px 20px 0 auto'
   },
   clearIcon: { height: '18px', width: '18px' },
   divider: {
diff --git a/src/components/app-menu-button/AppMenuButton.tsx b/src/components/app-menu-button/AppMenuButton.tsx
index 4394d875a..6aae57f1c 100644
--- a/src/components/app-menu-button/AppMenuButton.tsx
+++ b/src/components/app-menu-button/AppMenuButton.tsx
@@ -3,11 +3,10 @@ import { useTranslation } from 'react-i18next'
 import Box from '@mui/material/Box'
 import Divider from '@mui/material/Divider'
 import ClearIcon from '@mui/icons-material/Clear'
-import AppButton from '~/components/app-button/AppButton'
 import InputWithIcon from '~/components/input-with-icon/InputWithIcon'
+import Button from '~scss-components/button/Button'
 
 import { styles } from '~/components/app-menu-button/AppMenuButton.styles'
-import { ButtonVariantEnum } from '~/types'
 
 interface AppMenuButtonProps {
   selectedItems: string[]
@@ -45,17 +44,16 @@ const AppMenuButton: FC<AppMenuButtonProps> = ({
           value={inputValue}
         />
       </Box>
-      <AppButton
+      <Button
         disableRipple
         disabled={!selectedItems.length}
         onClick={onClearAll}
+        startIcon={<ClearIcon sx={styles.clearIcon} />}
         sx={styles.clearAll}
-        variant={ButtonVariantEnum.Text}
+        variant='text-secondary'
       >
-        <ClearIcon sx={styles.clearIcon} />
         {t('header.notifications.clearAll')}
-      </AppButton>
-
+      </Button>
       <Divider sx={styles.divider} />
       {children}
     </>
diff --git a/src/components/cards-list/CardsList.tsx b/src/components/cards-list/CardsList.tsx
index 1a5cb87c3..efb2cbc41 100644
--- a/src/components/cards-list/CardsList.tsx
+++ b/src/components/cards-list/CardsList.tsx
@@ -1,11 +1,10 @@
 import { FC, ReactElement } from 'react'
 import Box from '@mui/material/Box'
 
-import AppButton from '~/components/app-button/AppButton'
 import Loader from '~/components/loader/Loader'
+import Button from '~scss-components/button/Button'
 
 import { styles } from '~/components/cards-list/CardsList.styles'
-import { SizeEnum, ButtonVariantEnum } from '~/types'
 
 interface CardsListProps {
   btnText: string
@@ -33,15 +32,15 @@ const CardsList: FC<CardsListProps> = ({
       )}
 
       {isExpandable && (
-        <AppButton
+        <Button
           loading={loading}
           onClick={onClick}
-          size={SizeEnum.ExtraLarge}
+          size='md'
           sx={styles.btn}
-          variant={ButtonVariantEnum.Tonal}
+          variant='tonal'
         >
           {btnText}
-        </AppButton>
+        </Button>
       )}
     </Box>
   )
diff --git a/src/components/clickable-image/ClickableImage.tsx b/src/components/clickable-image/ClickableImage.tsx
index 1ca73e173..d2d1dda75 100644
--- a/src/components/clickable-image/ClickableImage.tsx
+++ b/src/components/clickable-image/ClickableImage.tsx
@@ -1,9 +1,9 @@
 import { FC, ReactNode } from 'react'
 import Box, { BoxProps } from '@mui/material/Box'
 
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 
-import { ComponentEnum, ButtonVariantEnum, Media } from '~/types'
+import { ComponentEnum, Media } from '~/types'
 import { styles } from '~/components/clickable-image/ClickableImage.styles'
 
 interface ClickableImageProps extends Omit<BoxProps, 'onClick'> {
@@ -19,10 +19,10 @@ const ClickableImage: FC<ClickableImageProps> = ({
   ...props
 }) => {
   return (
-    <AppButton
+    <Button
       onClick={() => onClick?.(image)}
       sx={styles.imageButton}
-      variant={ButtonVariantEnum.Text}
+      variant='text-secondary'
     >
       <Box
         alt={image.name}
@@ -32,7 +32,7 @@ const ClickableImage: FC<ClickableImageProps> = ({
         {...props}
       />
       {children}
-    </AppButton>
+    </Button>
   )
 }
 
diff --git a/src/components/confirm-dialog/ConfirmDialog.tsx b/src/components/confirm-dialog/ConfirmDialog.tsx
index d43841043..68b6a8590 100644
--- a/src/components/confirm-dialog/ConfirmDialog.tsx
+++ b/src/components/confirm-dialog/ConfirmDialog.tsx
@@ -7,11 +7,9 @@ import DialogContent from '@mui/material/DialogContent'
 import IconButton from '@mui/material/IconButton'
 import Typography from '@mui/material/Typography'
 
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import { styles } from '~/components/confirm-dialog/ConfirmDialog.styles'
 
-import { ButtonVariantEnum } from '~/types'
-
 interface ConfirmDialogProps {
   message: string
   title: string
@@ -50,12 +48,10 @@ const ConfirmDialog: FC<ConfirmDialogProps> = ({
         <Typography>{t(message)}</Typography>
       </DialogContent>
       <DialogActions sx={styles.actions(revertButtons)}>
-        <AppButton onClick={onDismiss} variant={ButtonVariantEnum.Tonal}>
+        <Button onClick={onDismiss} variant='tonal'>
           {cancelButton || t('common.no')}
-        </AppButton>
-        <AppButton onClick={onConfirm}>
-          {confirmButton || t('common.yes')}
-        </AppButton>
+        </Button>
+        <Button onClick={onConfirm}>{confirmButton || t('common.yes')}</Button>
       </DialogActions>
     </Dialog>
   )
diff --git a/src/components/dropdown-add-btn/DropdownButton.styles.ts b/src/components/dropdown-add-btn/DropdownButton.styles.ts
index 7863be07b..2756da57a 100644
--- a/src/components/dropdown-add-btn/DropdownButton.styles.ts
+++ b/src/components/dropdown-add-btn/DropdownButton.styles.ts
@@ -1,7 +1,5 @@
 export const styles = {
   optionsButton: {
-    justifyContent: 'flex-start',
-    pl: '10px',
-    gap: '5px'
+    justifyContent: 'flex-start'
   }
 }
diff --git a/src/components/dropdown-add-btn/DropdownButton.tsx b/src/components/dropdown-add-btn/DropdownButton.tsx
index cd444f83b..4d3169095 100644
--- a/src/components/dropdown-add-btn/DropdownButton.tsx
+++ b/src/components/dropdown-add-btn/DropdownButton.tsx
@@ -1,9 +1,8 @@
 import { FC, ReactElement } from 'react'
 import { SxProps } from '@mui/material'
 
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 
-import { ButtonVariantEnum, SizeEnum } from '~/types'
 import { spliceSx } from '~/utils/helper-functions'
 import { styles } from '~/components/dropdown-add-btn/DropdownButton.styles'
 
@@ -21,17 +20,17 @@ const DropdownButton: FC<DropdownButtonProps> = ({
   value
 }) => {
   return (
-    <AppButton
+    <Button
       disableRipple
       fullWidth
       onClick={handleOnClick}
-      size={SizeEnum.Medium}
+      size='md'
+      startIcon={icon}
       sx={spliceSx(styles.optionsButton, sx)}
-      variant={ButtonVariantEnum.Text}
+      variant='text-secondary'
     >
-      {icon}
       {value}
-    </AppButton>
+    </Button>
   )
 }
 
diff --git a/src/components/enhanced-table/enhanced-table-pagination/EnhancedTablePagination.styles.ts b/src/components/enhanced-table/enhanced-table-pagination/EnhancedTablePagination.styles.ts
index be5b9dc75..c359ff0ec 100644
--- a/src/components/enhanced-table/enhanced-table-pagination/EnhancedTablePagination.styles.ts
+++ b/src/components/enhanced-table/enhanced-table-pagination/EnhancedTablePagination.styles.ts
@@ -49,10 +49,5 @@ export const styles = {
         WebkitAppearance: 'none',
         margin: 0
       }
-  },
-  btn: {
-    borderColor: 'primary.100',
-    typography: 'body2',
-    color: 'basic.black'
   }
 }
diff --git a/src/components/enhanced-table/enhanced-table-pagination/EnhancedTablePagination.tsx b/src/components/enhanced-table/enhanced-table-pagination/EnhancedTablePagination.tsx
index cad60e09c..0be3434d5 100644
--- a/src/components/enhanced-table/enhanced-table-pagination/EnhancedTablePagination.tsx
+++ b/src/components/enhanced-table/enhanced-table-pagination/EnhancedTablePagination.tsx
@@ -6,10 +6,10 @@ import TablePagination from '@mui/material/TablePagination'
 import TextField from '@mui/material/TextField'
 import Typography from '@mui/material/Typography'
 
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import { styles } from '~/components/enhanced-table/enhanced-table-pagination/EnhancedTablePagination.styles'
 
-import { ButtonVariantEnum, TablePaginationProps } from '~/types'
+import { TablePaginationProps } from '~/types'
 
 interface EnhancedTablePaginationProps {
   pagination: TablePaginationProps
@@ -78,13 +78,9 @@ const EnhancedTablePagination = ({
           type='number'
           value={pageInput}
         />
-        <AppButton
-          onClick={() => handlePageSubmit(pageCount)}
-          sx={styles.btn}
-          variant={ButtonVariantEnum.Contained}
-        >
+        <Button onClick={() => handlePageSubmit(pageCount)}>
           {t('table.go')}
-        </AppButton>
+        </Button>
       </Box>
     </Box>
   )
diff --git a/src/components/file-component/FileComponent.tsx b/src/components/file-component/FileComponent.tsx
index 0e5c87aae..fc38f9199 100644
--- a/src/components/file-component/FileComponent.tsx
+++ b/src/components/file-component/FileComponent.tsx
@@ -3,9 +3,9 @@ import { useTranslation } from 'react-i18next'
 import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
 
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 
-import { ButtonVariantEnum, File } from '~/types'
+import { File } from '~/types'
 import { getFormattedDate, spliceSx } from '~/utils/helper-functions'
 import { openInNewTab } from '~/components/file-component/FileComponent.constants'
 import { styles } from '~/components/file-component/FileComponent.styles'
@@ -30,10 +30,10 @@ const FileComponent: FC<FileComponentProps> = ({ file }) => {
 
   return (
     <Box sx={styles.fileWrapper}>
-      <AppButton
+      <Button
         onClick={() => openInNewTab(file)}
         sx={styles.file}
-        variant={ButtonVariantEnum.Text}
+        variant='text-secondary'
       >
         <Box sx={styles.formatFrame}>
           <Typography>{fileFormat}</Typography>
@@ -49,7 +49,7 @@ const FileComponent: FC<FileComponentProps> = ({ file }) => {
             <Typography>{formattedDate}</Typography>
           </Box>
         </Box>
-      </AppButton>
+      </Button>
     </Box>
   )
 }
diff --git a/src/components/file-uploader/FileUploader.tsx b/src/components/file-uploader/FileUploader.tsx
index f589f690e..ebf3908e3 100644
--- a/src/components/file-uploader/FileUploader.tsx
+++ b/src/components/file-uploader/FileUploader.tsx
@@ -10,14 +10,13 @@ import CloudUploadIcon from '@mui/icons-material/CloudUpload'
 import CloseIcon from '@mui/icons-material/Close'
 import { FormHelperText, SxProps } from '@mui/material'
 
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import { styles } from '~/components/file-uploader/FileUploader.styles'
 
 import useUpload from '~/hooks/use-upload'
 
 import {
   AddDocuments,
-  ButtonVariantEnum,
   ComponentEnum,
   UploadFileEmitter,
   InputEnum,
@@ -36,8 +35,6 @@ interface FileUploaderProps {
     button?: SxProps
     error?: SxProps
   }
-  variant?: ButtonVariantEnum
-  size?: SizeEnum
   icon?: ReactElement
 }
 
@@ -49,8 +46,6 @@ const FileUploader: FC<FileUploaderProps> = ({
   validationData,
   isImages = false,
   sx = {},
-  variant,
-  size = SizeEnum.Medium,
   icon
 }) => {
   const { t } = useTranslation()
@@ -85,16 +80,16 @@ const FileUploader: FC<FileUploaderProps> = ({
   const acceptableFileTypes = validationData.filesTypes.join(', ')
 
   const uploadButton = (
-    <AppButton
+    <Button
       component={ComponentEnum.Label}
       onClick={handleClick}
-      size={size}
+      size='md'
+      startIcon={icon}
       sx={sx.button}
-      variant={variant}
+      variant='primary'
     >
       {isImages && <CloudUploadIcon sx={styles.icon} />}
       {buttonText}
-      {icon}
       <input
         accept={acceptableFileTypes}
         hidden
@@ -103,7 +98,7 @@ const FileUploader: FC<FileUploaderProps> = ({
         ref={inputRef}
         type={InputEnum.File}
       />
-    </AppButton>
+    </Button>
   )
 
   return (
diff --git a/src/components/find-block/FindBlock.tsx b/src/components/find-block/FindBlock.tsx
index f419678a8..ac71ca9de 100644
--- a/src/components/find-block/FindBlock.tsx
+++ b/src/components/find-block/FindBlock.tsx
@@ -7,7 +7,7 @@ import SearchIcon from '@mui/icons-material/Search'
 import useBreakpoints from '~/hooks/use-breakpoints'
 import TitleBlock from '~/components/title-block/TitleBlock'
 import InputWithIcon from '~/components/input-with-icon/InputWithIcon'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 
 import bag from '~/assets/img/student-home/bag.png'
 import { authRoutes } from '~/router/constants/authRoutes'
@@ -55,14 +55,9 @@ const FindBlock = ({ translationKey }: FindBlockProps) => {
         sx={styles.input}
         value={inputValue}
       />
-      <AppButton
-        component={Link}
-        fullWidth={isMobile}
-        sx={styles.button}
-        to={findOffers}
-      >
+      <Button component={Link} to={findOffers}>
         {t(`${translationKey}.button`)}
-      </AppButton>
+      </Button>
     </TitleBlock>
   )
 }
diff --git a/src/components/info-card/InfoCard.tsx b/src/components/info-card/InfoCard.tsx
index 460077a04..c79f116c6 100644
--- a/src/components/info-card/InfoCard.tsx
+++ b/src/components/info-card/InfoCard.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react'
 
-import AppButton from '~/components//app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import AppCard from '~/components/app-card/AppCard'
 import ImgTitleDescription from '~/components/img-title-description/ImgTitleDescription'
 
@@ -31,9 +31,9 @@ const InfoCard: FC<InfoCardProps> = ({
         style={styles.imgTitleDescription}
         title={title}
       />
-      <AppButton onClick={action} sx={styles.button}>
+      <Button onClick={action} sx={styles.button}>
         {actionLabel}
-      </AppButton>
+      </Button>
     </AppCard>
   )
 }
diff --git a/src/components/link-component/LinkComponent.styles.ts b/src/components/link-component/LinkComponent.styles.ts
index 9676ca1e8..174d730f0 100644
--- a/src/components/link-component/LinkComponent.styles.ts
+++ b/src/components/link-component/LinkComponent.styles.ts
@@ -9,12 +9,12 @@ const sizeLimit = {
 }
 
 export const styles = {
-  linkWrapper: {
+  linkButton: {
     display: 'flex',
     flexDirection: 'column',
     alignSelf: 'stretch'
   },
-  linkButton: {
+  linkWrapper: {
     display: 'flex',
     padding: '12px 16px',
     alignItems: 'center',
diff --git a/src/components/link-component/LinkComponent.tsx b/src/components/link-component/LinkComponent.tsx
index 7af68ee49..b16d6b038 100644
--- a/src/components/link-component/LinkComponent.tsx
+++ b/src/components/link-component/LinkComponent.tsx
@@ -3,9 +3,9 @@ import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
 import LinkOutlinedIcon from '@mui/icons-material/LinkOutlined'
 
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 
-import { ButtonVariantEnum, Link } from '~/types'
+import { Link } from '~/types'
 import { openInNewTab } from '~/components/file-component/FileComponent.constants'
 import { styles } from '~/components/link-component/LinkComponent.styles'
 
@@ -15,12 +15,12 @@ interface LinkComponentProps {
 
 const LinkComponent: FC<LinkComponentProps> = ({ link }) => {
   return (
-    <Box sx={styles.linkWrapper}>
-      <AppButton
-        onClick={() => openInNewTab(link)}
-        sx={styles.linkButton}
-        variant={ButtonVariantEnum.Text}
-      >
+    <Button
+      onClick={() => openInNewTab(link)}
+      sx={styles.linkButton}
+      variant='text-primary'
+    >
+      <Box sx={styles.linkWrapper}>
         <Box sx={styles.formatFrame}>
           <LinkOutlinedIcon sx={styles.linkIcon} />
         </Box>
@@ -28,8 +28,8 @@ const LinkComponent: FC<LinkComponentProps> = ({ link }) => {
           <Typography sx={styles.secondaryText}>{link.name}</Typography>
           <Typography sx={styles.link}>{link.url}</Typography>
         </Box>
-      </AppButton>
-    </Box>
+      </Box>
+    </Button>
   )
 }
 
diff --git a/src/components/not-found-results/NotFoundResults.tsx b/src/components/not-found-results/NotFoundResults.tsx
index 674bf6fab..a21542dae 100644
--- a/src/components/not-found-results/NotFoundResults.tsx
+++ b/src/components/not-found-results/NotFoundResults.tsx
@@ -3,10 +3,9 @@ import { useTranslation } from 'react-i18next'
 import { SxProps } from '@mui/material'
 import Box from '@mui/material/Box'
 
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import ImgTitleDescription from '~/components/img-title-description/ImgTitleDescription'
 
-import { ButtonVariantEnum } from '~/types'
 import { spliceSx } from '~/utils/helper-functions'
 import howItWorksStudentSecond from '~/assets/img/find-offer/search_icon.svg'
 import { styles } from '~/components/not-found-results/NotFoundResults.styles'
@@ -35,13 +34,9 @@ const NotFoundResults: FC<NotFoundResultsProps> = ({
         title={t('errorMessages.resultsNotFound')}
       />
       {buttonText && (
-        <AppButton
-          onClick={onClick}
-          sx={styles.button}
-          variant={ButtonVariantEnum.Tonal}
-        >
+        <Button onClick={onClick} sx={styles.button} variant='tonal'>
           {buttonText}
-        </AppButton>
+        </Button>
       )}
     </Box>
   )
diff --git a/src/components/offer-banner/OfferBanner.styles.ts b/src/components/offer-banner/OfferBanner.styles.ts
index 37cf17935..7e5e2cf3b 100644
--- a/src/components/offer-banner/OfferBanner.styles.ts
+++ b/src/components/offer-banner/OfferBanner.styles.ts
@@ -36,22 +36,9 @@ export const styles = {
     display: 'flex',
     gap: '16px'
   },
-  button: {
-    p: '15px 30px',
-    width: 'auto',
-    lineHeight: '19px'
-  },
   bookmarkButton: {
-    color: 'primary.500',
-    p: '12px 30px',
     ml: '16px'
   },
-  bookmarkButtonText: {
-    color: 'primary.500',
-    display: 'flex',
-    alignItems: 'center',
-    ml: '8px'
-  },
   buttonsBlock: {
     display: 'flex'
   },
diff --git a/src/components/offer-banner/OfferBanner.tsx b/src/components/offer-banner/OfferBanner.tsx
index d6e38cc74..6688f8a13 100644
--- a/src/components/offer-banner/OfferBanner.tsx
+++ b/src/components/offer-banner/OfferBanner.tsx
@@ -7,13 +7,12 @@ import TurnedInNot from '@mui/icons-material/TurnedInNot'
 
 import useBreakpoints from '~/hooks/use-breakpoints'
 import AppCard from '~/components/app-card/AppCard'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import UserProfileInfo from '~/components/user-profile-info/UserProfileInfo'
 import SubjectLevelChips from '~/components/subject-level-chips/SubjectLevelChips'
 
 import { ButtonActions, Offer } from '~/types'
 import { styles } from '~/components/offer-banner/OfferBanner.styles'
-import { Button } from '@mui/material'
 
 interface OfferBannerProps {
   offer: Offer
@@ -25,20 +24,22 @@ const OfferBanner: FC<OfferBannerProps> = ({ offer, buttonActions }) => {
   const { isLaptopAndAbove } = useBreakpoints()
   const { author, subject, category, proficiencyLevel, authorRole } = offer
 
-  const buttons = buttonActions.map(
-    (elem) =>
+  const buttons = buttonActions.map((elem) => {
+    const variant = elem?.buttonProps?.variant === 'tonal' ? 'tonal' : 'primary'
+    const { disabled, onClick } = elem?.buttonProps || {}
+    return (
       elem && (
-        <AppButton
-          fullWidth
+        <Button
+          disabled={disabled}
           key={elem.label}
-          sx={styles.button}
-          {...elem.buttonProps}
-          size={null}
+          onClick={onClick}
+          variant={variant}
         >
           {t(elem.label)}
-        </AppButton>
+        </Button>
       )
-  )
+    )
+  })
 
   return (
     <Box sx={styles.main}>
@@ -63,10 +64,13 @@ const OfferBanner: FC<OfferBannerProps> = ({ offer, buttonActions }) => {
         </Box>
         <Box sx={styles.buttonsBlock}>
           <Box sx={styles.buttons}>{buttons}</Box>
-          <Button data-testid='iconButton' sx={styles.bookmarkButton}>
-            <TurnedInNot />
+          <Button
+            data-testid='iconButton'
+            startIcon={<TurnedInNot />}
+            sx={styles.bookmarkButton}
+          >
             {isLaptopAndAbove && (
-              <Typography sx={styles.bookmarkButtonText}>
+              <Typography>
                 {t('offerDetailsPage.offerBanner.saveOfferButton')}
               </Typography>
             )}
diff --git a/src/components/offer-card/offer-actions/OfferActions.tsx b/src/components/offer-card/offer-actions/OfferActions.tsx
index 1c0f09f00..702789e9b 100644
--- a/src/components/offer-card/offer-actions/OfferActions.tsx
+++ b/src/components/offer-card/offer-actions/OfferActions.tsx
@@ -7,7 +7,7 @@ import IconButton from '@mui/material/IconButton'
 import TurnedIn from '@mui/icons-material/TurnedIn'
 import TurnedInNot from '@mui/icons-material/TurnedInNot'
 
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 
 import { styles } from '~/components/offer-card/offer-actions/OfferActions.styles'
 import { ButtonActions } from '~/types'
@@ -29,14 +29,23 @@ const OfferActions: FC<OfferActionsProps> = ({
 }) => {
   const { t } = useTranslation()
 
-  const buttons = buttonActions.map(
-    (elem) =>
+  const buttons = buttonActions.map((elem) => {
+    const variant = elem?.buttonProps?.variant === 'tonal' ? 'tonal' : 'primary'
+    const { disabled, onClick } = elem?.buttonProps || {}
+
+    return (
       elem && (
-        <AppButton fullWidth key={elem.label} {...elem.buttonProps}>
+        <Button
+          disabled={disabled}
+          key={elem.label}
+          onClick={onClick}
+          variant={variant}
+        >
           {t(elem.label)}
-        </AppButton>
+        </Button>
       )
-  )
+    )
+  })
 
   return (
     <Box>
diff --git a/src/components/question-editor/QuestionEditor.tsx b/src/components/question-editor/QuestionEditor.tsx
index 50cc5f244..a6a5ebe0a 100644
--- a/src/components/question-editor/QuestionEditor.tsx
+++ b/src/components/question-editor/QuestionEditor.tsx
@@ -17,7 +17,7 @@ import MoreVertIcon from '@mui/icons-material/MoreVert'
 
 import useMenu from '~/hooks/use-menu'
 import AppTextField from '~/components/app-text-field/AppTextField'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import AppSelect from '~/components/app-select/AppSelect'
 import {
   determineQuestionType,
@@ -29,8 +29,7 @@ import {
   QuestionForm,
   SizeEnum,
   TextFieldVariantEnum,
-  QuestionFormAnswer,
-  ButtonVariantEnum
+  QuestionFormAnswer
 } from '~/types'
 
 interface QuestionEditorProps {
@@ -251,22 +250,18 @@ const QuestionEditor: FC<QuestionEditorProps> = ({
         <>
           <Divider sx={styles.buttonsDivider} />
           <Box sx={styles.buttons}>
-            <AppButton
-              onClick={onCancel}
-              size={SizeEnum.Medium}
-              variant={ButtonVariantEnum.Tonal}
-            >
+            <Button onClick={onCancel} size='md' variant='tonal'>
               {t('common.cancel')}
-            </AppButton>
-            <AppButton
+            </Button>
+            <Button
               disabled={!isButtonVisible}
               loading={loading}
               onClick={() => void onSave()}
-              size={SizeEnum.Medium}
+              size='md'
               sx={styles.saveButton}
             >
               {t('common.save')}
-            </AppButton>
+            </Button>
           </Box>
         </>
       )}
diff --git a/src/components/search-autocomplete/SearchAutocomplete.styles.ts b/src/components/search-autocomplete/SearchAutocomplete.styles.ts
index 05e35d79c..076c597c2 100644
--- a/src/components/search-autocomplete/SearchAutocomplete.styles.ts
+++ b/src/components/search-autocomplete/SearchAutocomplete.styles.ts
@@ -24,10 +24,5 @@ export const styles = {
   },
   inputLabel: {
     color: palette.primary[300]
-  },
-  searchBtn: {
-    minWidth: { xs: '44px' },
-    p: { xs: '7px 12px', sm: '12px 24px' },
-    ml: { xs: '5px', sm: '25px' }
   }
 }
diff --git a/src/components/search-autocomplete/SearchAutocomplete.tsx b/src/components/search-autocomplete/SearchAutocomplete.tsx
index afdd93e32..36efd3571 100644
--- a/src/components/search-autocomplete/SearchAutocomplete.tsx
+++ b/src/components/search-autocomplete/SearchAutocomplete.tsx
@@ -25,16 +25,11 @@ import {
 
 import useBreakpoints from '~/hooks/use-breakpoints'
 
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import AppAutoComplete from '~/components/app-auto-complete/AppAutoComplete'
 import { styles } from '~/components/search-autocomplete/SearchAutocomplete.styles'
 
-import {
-  SizeEnum,
-  ButtonVariantEnum,
-  VisibilityEnum,
-  TextFieldVariantEnum
-} from '~/types'
+import { SizeEnum, VisibilityEnum, TextFieldVariantEnum } from '~/types'
 
 interface SearchAutocompleteProps
   extends Omit<AutocompleteProps<string, false, true, true>, 'renderInput'> {
@@ -125,14 +120,9 @@ const SearchAutocomplete = ({
         <ClearIcon fontSize={SizeEnum.Small} />
       </IconButton>
 
-      <AppButton
-        onClick={onSearch}
-        size={isMobile ? SizeEnum.Small : SizeEnum.Large}
-        sx={styles.searchBtn}
-        variant={ButtonVariantEnum.ContainedLight}
-      >
+      <Button onClick={onSearch} size={isMobile ? 'sm' : 'lg'}>
         {isMobile ? <SearchIcon /> : t('common.search')}
-      </AppButton>
+      </Button>
     </Box>
   )
 }
diff --git a/src/components/search-filter-input/SearchFilterInput.styles.tsx b/src/components/search-filter-input/SearchFilterInput.styles.tsx
index 866645230..311616f64 100644
--- a/src/components/search-filter-input/SearchFilterInput.styles.tsx
+++ b/src/components/search-filter-input/SearchFilterInput.styles.tsx
@@ -17,9 +17,5 @@ export const styles = {
     color: 'primary.300',
     top: '12px',
     left: '15px'
-  },
-  searchBtn: {
-    width: '105px',
-    ml: '10px'
   }
 }
diff --git a/src/components/search-filter-input/SearchFilterInput.tsx b/src/components/search-filter-input/SearchFilterInput.tsx
index 837b81b5f..04c78b6ea 100644
--- a/src/components/search-filter-input/SearchFilterInput.tsx
+++ b/src/components/search-filter-input/SearchFilterInput.tsx
@@ -5,10 +5,9 @@ import { InputBaseProps } from '@mui/material/InputBase'
 import SearchIcon from '@mui/icons-material/Search'
 import Box from '@mui/material/Box'
 
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import InputWithIcon from '~/components/input-with-icon/InputWithIcon'
 
-import { ButtonVariantEnum } from '~/types'
 import { styles } from '~/components/search-filter-input/SearchFilterInput.styles'
 
 interface SearchFilterInputProps {
@@ -63,13 +62,7 @@ const SearchFilterInput = ({
         {...textFieldProps}
       />
 
-      <AppButton
-        onClick={onSearch}
-        sx={styles.searchBtn}
-        variant={ButtonVariantEnum.ContainedLight}
-      >
-        {t('common.search')}
-      </AppButton>
+      <Button onClick={onSearch}>{t('common.search')}</Button>
     </Box>
   )
 }
diff --git a/src/components/sidebar-content-box/SidebarContentBox.styles.ts b/src/components/sidebar-content-box/SidebarContentBox.styles.ts
index 6b315d60e..b9cf4df0e 100644
--- a/src/components/sidebar-content-box/SidebarContentBox.styles.ts
+++ b/src/components/sidebar-content-box/SidebarContentBox.styles.ts
@@ -24,9 +24,6 @@ export const styles = {
     typography: TypographyVariantEnum.Subtitle2,
     textAlign: 'center'
   },
-  button: {
-    color: 'primary.600'
-  },
   text: {
     typography: TypographyVariantEnum.Subtitle2
   }
diff --git a/src/components/sidebar-content-box/SidebarContentBox.tsx b/src/components/sidebar-content-box/SidebarContentBox.tsx
index c3bdea12b..6603dfdb8 100644
--- a/src/components/sidebar-content-box/SidebarContentBox.tsx
+++ b/src/components/sidebar-content-box/SidebarContentBox.tsx
@@ -3,19 +3,12 @@ import { useTranslation } from 'react-i18next'
 import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
 
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import LinkComponent from '~/components/link-component/LinkComponent'
 
 import { maxElemToShow } from '~/components/sidebar-content-box/SidebarContentBox.constants'
 import { spliceSx } from '~/utils/helper-functions'
-import {
-  SizeEnum,
-  ButtonVariantEnum,
-  Link,
-  File,
-  Media,
-  SidebarContentEnum
-} from '~/types'
+import { Link, File, Media, SidebarContentEnum } from '~/types'
 import { styles } from '~/components/sidebar-content-box/SidebarContentBox.styles'
 
 interface SidebarContentBoxProps {
@@ -58,14 +51,14 @@ const SidebarContentBox: FC<SidebarContentBoxProps> = ({
           </Typography>
         </Box>
         {isMoreContent && (
-          <AppButton
+          <Button
             onClick={() => onClick(name)}
-            size={SizeEnum.Small}
-            sx={spliceSx(styles.button, styles.text)}
-            variant={ButtonVariantEnum.Text}
+            size='xs'
+            sx={styles.text}
+            variant='text-secondary'
           >
             {t(`chatPage.sidebar.seeAll`)}
-          </AppButton>
+          </Button>
         )}
       </Box>
       {limitedContent}
diff --git a/src/components/step-wrapper/StepWrapper.styles.js b/src/components/step-wrapper/StepWrapper.styles.js
index 222eee4d0..71cb5b0a4 100644
--- a/src/components/step-wrapper/StepWrapper.styles.js
+++ b/src/components/step-wrapper/StepWrapper.styles.js
@@ -1,11 +1,5 @@
 import { fadeAnimation } from '~/styles/app-theme/custom-animations'
 
-const btnStyle = {
-  padding: '10px 20px',
-  display: 'flex',
-  columnGap: 1
-}
-
 export const styles = {
   root: {
     display: { xs: 'flex' },
@@ -49,10 +43,5 @@ export const styles = {
     display: 'flex',
     justifyContent: 'space-between',
     mt: '10px'
-  },
-  btn: btnStyle,
-  finishBtn: {
-    ...btnStyle,
-    minWidth: '96px'
   }
 }
diff --git a/src/components/step-wrapper/StepWrapper.tsx b/src/components/step-wrapper/StepWrapper.tsx
index 8b41b5c02..2d2be674f 100644
--- a/src/components/step-wrapper/StepWrapper.tsx
+++ b/src/components/step-wrapper/StepWrapper.tsx
@@ -7,10 +7,9 @@ import Box from '@mui/material/Box'
 import EastIcon from '@mui/icons-material/East'
 import WestIcon from '@mui/icons-material/West'
 
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import useSteps from '~/hooks/use-steps'
 import { styles } from '~/components/step-wrapper/StepWrapper.styles'
-import { SizeEnum } from '~/types'
 
 interface StepWrapperProps {
   children: JSX.Element[]
@@ -38,39 +37,26 @@ const StepWrapper = ({ children, steps }: StepWrapperProps) => {
   ))
 
   const nextButton = isLastStep ? (
-    <AppButton
-      loading={loading}
-      onClick={() => void handleSubmit()}
-      size={SizeEnum.Small}
-      sx={styles.finishBtn}
-      variant='contained'
-    >
+    <Button loading={loading} onClick={() => void handleSubmit()} size='sm'>
       {t('common.finish')}
-    </AppButton>
+    </Button>
   ) : (
-    <AppButton
-      onClick={next}
-      size={SizeEnum.Small}
-      sx={styles.btn}
-      variant='contained'
-    >
+    <Button endIcon={<EastIcon fontSize='small' />} onClick={next} size='sm'>
       {t('common.next')}
-      <EastIcon fontSize='small' />
-    </AppButton>
+    </Button>
   )
 
   const btnsBox = (
     <Box sx={styles.btnWrapper}>
-      <AppButton
+      <Button
         disabled={activeStep === 0}
         onClick={back}
-        size={SizeEnum.Small}
-        sx={styles.btn}
-        variant='outlined'
+        size='sm'
+        startIcon={<WestIcon fontSize='small' />}
+        variant='text-secondary'
       >
-        <WestIcon fontSize='small' />
         {t('common.back')}
-      </AppButton>
+      </Button>
       {nextButton}
     </Box>
   )
diff --git a/src/containers/about-chat-sidebar/AboutChatSidebar.styles.ts b/src/containers/about-chat-sidebar/AboutChatSidebar.styles.ts
index 95925e8f2..612d8ce69 100644
--- a/src/containers/about-chat-sidebar/AboutChatSidebar.styles.ts
+++ b/src/containers/about-chat-sidebar/AboutChatSidebar.styles.ts
@@ -9,7 +9,8 @@ export const styles = {
     height: 'calc(100% - 48px)',
     '& .simplebar-track': {
       right: '-5px'
-    }
+    },
+    width: '500px'
   },
   contentWrapper: {
     display: 'flex',
@@ -55,8 +56,5 @@ export const styles = {
   },
   title: {
     typography: TypographyVariantEnum.H5
-  },
-  secondaryText: {
-    typography: TypographyVariantEnum.Subtitle2
   }
 }
diff --git a/src/containers/about-chat-sidebar/AboutChatSidebar.tsx b/src/containers/about-chat-sidebar/AboutChatSidebar.tsx
index 4e5fec0dd..0f266d1f1 100644
--- a/src/containers/about-chat-sidebar/AboutChatSidebar.tsx
+++ b/src/containers/about-chat-sidebar/AboutChatSidebar.tsx
@@ -9,18 +9,12 @@ import IconButton from '@mui/material/IconButton'
 import ArrowBackIcon from '@mui/icons-material/ArrowBack'
 import LinkOutlinedIcon from '@mui/icons-material/LinkOutlined'
 
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import AvatarIcon from '~/components/avatar-icon/AvatarIcon'
 import SidebarContentBox from '~/components/sidebar-content-box/SidebarContentBox'
 import SidebarGroupedContent from '~/containers/chat/sidebar-grouped-content/SidebarGroupedContent'
 
-import {
-  SizeEnum,
-  ButtonVariantEnum,
-  Member,
-  Link,
-  SidebarContentEnum
-} from '~/types'
+import { Member, Link, SidebarContentEnum } from '~/types'
 import { createUrlPath, spliceSx } from '~/utils/helper-functions'
 import { authRoutes } from '~/router/constants/authRoutes'
 import { styles } from '~/containers/about-chat-sidebar/AboutChatSidebar.styles'
@@ -79,14 +73,9 @@ const AboutChatSidebar: FC<AboutChatSidebarProps> = ({ member, links }) => {
               <Typography
                 sx={styles.title}
               >{`${firstName} ${lastName}`}</Typography>
-              <AppButton
-                onClick={navigateToUserProfile}
-                size={SizeEnum.Medium}
-                sx={styles.secondaryText}
-                variant={ButtonVariantEnum.Tonal}
-              >
+              <Button onClick={navigateToUserProfile} size='md' variant='tonal'>
                 {t(`chatPage.sidebar.viewButton`)}
-              </AppButton>
+              </Button>
               <Typography sx={styles.userDescription}>
                 {professionalSummary || t(`chatPage.sidebar.noSummary`)}
               </Typography>
diff --git a/src/containers/change-resource-confirm-modal/ChangeResourceConfirmModal.tsx b/src/containers/change-resource-confirm-modal/ChangeResourceConfirmModal.tsx
index 98c2a8dfb..e3fdeb4e9 100644
--- a/src/containers/change-resource-confirm-modal/ChangeResourceConfirmModal.tsx
+++ b/src/containers/change-resource-confirm-modal/ChangeResourceConfirmModal.tsx
@@ -4,13 +4,13 @@ import Typography from '@mui/material/Typography'
 import { useTranslation } from 'react-i18next'
 import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'
 
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import { styles } from '~/containers/change-resource-confirm-modal/ChangeResourceConfirmModal.styles'
 import { useModalContext } from '~/context/modal-context'
 import Loader from '~/components/loader/Loader'
 import useAxios from '~/hooks/use-axios'
 import { CoursesAndCooperationsService } from '~/services/course-cooperation-service'
-import { ButtonVariantEnum, CourseCooperationResponse, SizeEnum } from '~/types'
+import { CourseCooperationResponse } from '~/types'
 
 interface ChangeResourceConfirmModalProps {
   resourceId?: string
@@ -113,23 +113,22 @@ const ChangeResourceConfirmModal = ({
         ))}
       </Box>
       <Box sx={styles.buttonsContainer}>
-        <AppButton
+        <Button
           onClick={closeModal}
-          size={SizeEnum.Large}
+          size='lg'
           sx={styles.button}
-          variant={ButtonVariantEnum.Tonal}
+          variant='tonal'
         >
           {t('changeConfirm.backButton')}
-        </AppButton>
-        <AppButton
+        </Button>
+        <Button
           onClick={handleConfirm}
-          size={SizeEnum.Large}
+          size='lg'
           sx={styles.button}
           type='submit'
-          variant={ButtonVariantEnum.Contained}
         >
-          {t('changeConfirm.confirmButton')}
-        </AppButton>
+          {t('changeConfirm.confirmButton')}aaaaaaaaaa
+        </Button>
       </Box>
     </Box>
   )
diff --git a/src/containers/cookie-consent-banner/CookieConsentBanner.tsx b/src/containers/cookie-consent-banner/CookieConsentBanner.tsx
index f3488eb3a..5efabd0a0 100644
--- a/src/containers/cookie-consent-banner/CookieConsentBanner.tsx
+++ b/src/containers/cookie-consent-banner/CookieConsentBanner.tsx
@@ -5,7 +5,8 @@ import { FC, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { Trans, useTranslation } from 'react-i18next'
 import { useLocation } from 'react-router-dom'
-import AppButton from '~/components/app-button/AppButton'
+
+import Button from '~scss-components/button/Button'
 import HashLink from '~/components/hash-link/HashLink'
 import { styles } from '~/containers/cookie-consent-banner/CookieConsentBanner.styles'
 import { guestRoutes } from '~/router/constants/guestRoutes'
@@ -53,15 +54,15 @@ const CookieConsentBanner: FC = () => {
           i18nKey='cookieConsentBanner.notice'
         />
       </Typography>
-      <AppButton
+      <Button
+        endIcon={<DoneIcon />}
         onClick={handleButtonClick}
-        size='extraLarge'
+        size='lg'
         sx={styles.button}
         variant='tonal'
       >
         {t('cookieConsentBanner.acceptButton')}
-        <DoneIcon />
-      </AppButton>
+      </Button>
     </Box>,
     document.body
   )
diff --git a/src/containers/cooperation-details/add-course-modal-modal/AddCourseTemplateModal.tsx b/src/containers/cooperation-details/add-course-modal-modal/AddCourseTemplateModal.tsx
index 4b29859d7..e5ed0f096 100644
--- a/src/containers/cooperation-details/add-course-modal-modal/AddCourseTemplateModal.tsx
+++ b/src/containers/cooperation-details/add-course-modal-modal/AddCourseTemplateModal.tsx
@@ -13,7 +13,7 @@ import { userService } from '~/services/user-service'
 import useAxios from '~/hooks/use-axios'
 import useSort from '~/hooks/table/use-sort'
 import Loader from '~/components/loader/Loader'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import NotFoundResults from '~/components/not-found-results/NotFoundResults'
 import InputWithIcon from '~/components/input-with-icon/InputWithIcon'
 import TitleWithDescription from '~/components/title-with-description/TitleWithDescription'
@@ -28,7 +28,6 @@ import { authRoutes } from '~/router/constants/authRoutes'
 import { initialSort } from '~/containers/find-course/courses-filter-bar/CorseFilterBar.constants'
 import { styles } from '~/containers/cooperation-details/add-course-modal-modal/AddCourseTemplateModal.styles'
 import {
-  ButtonVariantEnum,
   ItemsWithCount,
   Course,
   SortEnum,
@@ -217,12 +216,12 @@ const AddCourseTemplateModal: FC<AddCourseTemplateModalProps> = ({
       </SimpleBar>
 
       <Box sx={styles.buttonsArea}>
-        <AppButton onClick={onCancel} variant={ButtonVariantEnum.Tonal}>
+        <Button onClick={onCancel} variant='tonal'>
           {t('common.cancel')}
-        </AppButton>
-        <AppButton disabled={!selectedItem} onClick={onAdd}>
+        </Button>
+        <Button disabled={!selectedItem} onClick={onAdd}>
           {t('common.add')}
-        </AppButton>
+        </Button>
       </Box>
     </Box>
   )
diff --git a/src/containers/cooperation-details/cooperation-activities/CooperationActivities.tsx b/src/containers/cooperation-details/cooperation-activities/CooperationActivities.tsx
index 0e22ead56..8ef8b32c8 100644
--- a/src/containers/cooperation-details/cooperation-activities/CooperationActivities.tsx
+++ b/src/containers/cooperation-details/cooperation-activities/CooperationActivities.tsx
@@ -6,7 +6,7 @@ import Typography from '@mui/material/Typography'
 import Box from '@mui/material/Box'
 
 import AppSelect from '~/components/app-select/AppSelect'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import CooperationActivitiesList from '~/containers/my-cooperations/cooperation-activities-list/CooperationActivitiesList'
 import {
   cooperationTranslationKeys,
@@ -27,8 +27,6 @@ import {
 import { snackbarVariants } from '~/constants'
 import {
   ResourcesAvailabilityEnum,
-  ButtonVariantEnum,
-  SizeEnum,
   ButtonTypeEnum,
   ErrorResponse,
   UpdateCooperationsSections,
@@ -167,21 +165,21 @@ const CooperationActivities: FC<CooperationActivitiesProps> = ({
         <CooperationActivitiesList />
       </Box>
       <Box sx={styles.buttons}>
-        <AppButton
+        <Button
           component={Link}
-          size={SizeEnum.ExtraLarge}
+          size='lg'
           to={authRoutes.cooperationDetails.path}
-          variant={ButtonVariantEnum.Tonal}
+          variant='tonal'
         >
           {t('common.cancel')}
-        </AppButton>
-        <AppButton
+        </Button>
+        <Button
           onClick={onSaveCooperation}
-          size={SizeEnum.ExtraLarge}
+          size='lg'
           type={ButtonTypeEnum.Submit}
         >
           {t('common.save')}
-        </AppButton>
+        </Button>
       </Box>
     </Box>
   )
diff --git a/src/containers/course-section/CourseSectionContainer.tsx b/src/containers/course-section/CourseSectionContainer.tsx
index 41d76d874..c03f1e880 100644
--- a/src/containers/course-section/CourseSectionContainer.tsx
+++ b/src/containers/course-section/CourseSectionContainer.tsx
@@ -9,7 +9,7 @@ import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
 
 import HeaderTextWithDropdown from '~/components/header-text-with-dropdown/HeaderTextWithDropdown'
 import AppTextField from '~/components/app-text-field/AppTextField'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import ResourcesList from '~/containers/course-section/resources-list/ResourcesList'
 import AddResources from '~/containers/add-resources/AddResources'
 import EditAttachmentModal from '~/containers/my-resources/edit-attachment-modal/EditAttachmentModal'
@@ -35,7 +35,6 @@ import { styles } from '~/containers/course-section/CourseSectionContainer.style
 import {
   TextFieldVariantEnum,
   SizeEnum,
-  ButtonVariantEnum,
   CourseSection,
   Lesson,
   Quiz,
@@ -406,18 +405,17 @@ const CourseSectionContainer: FC<SectionProps> = ({
             sortResources={handleResourcesSort}
             updateAvailability={handleResourceAvailabilityChange}
           />
-          <AppButton
+          <Button
             endIcon={<KeyboardArrowDownIcon fontSize={SizeEnum.Small} />}
             onClick={(event) => {
               setActiveMenu(menuTypes.resourcesMenu)
               openMenu(event)
             }}
-            size={SizeEnum.Large}
+            size='lg'
             startIcon={<AddIcon fontSize={SizeEnum.Small} />}
-            variant={ButtonVariantEnum.Contained}
           >
             {t('course.courseSection.addResourceBtn')}
-          </AppButton>
+          </Button>
           {activeMenu === menuTypes.resourcesMenu &&
             renderMenu(resourcesMenuItems)}
         </Box>
diff --git a/src/containers/edit-profile/password-security-tab/PasswordSecurityTab.styles.ts b/src/containers/edit-profile/password-security-tab/PasswordSecurityTab.styles.ts
index c5f7640c9..524b123b2 100644
--- a/src/containers/edit-profile/password-security-tab/PasswordSecurityTab.styles.ts
+++ b/src/containers/edit-profile/password-security-tab/PasswordSecurityTab.styles.ts
@@ -24,7 +24,6 @@ export const styles = {
     gap: '10px',
     marginTop: '24px'
   },
-
   saveButton: {
     gridColumn: { sm: 'span 3', md: 'span 3', lg: 'span 3' },
     width: '193px'
diff --git a/src/containers/edit-profile/password-security-tab/PasswordSecurityTab.tsx b/src/containers/edit-profile/password-security-tab/PasswordSecurityTab.tsx
index 1234ff2bd..c9267725e 100644
--- a/src/containers/edit-profile/password-security-tab/PasswordSecurityTab.tsx
+++ b/src/containers/edit-profile/password-security-tab/PasswordSecurityTab.tsx
@@ -8,8 +8,6 @@ import useChangeUserStatus from '~/hooks/use-change-user-status'
 import PasswordSecurityItem from '~/containers/edit-profile/password-security-tab/password-security-item/PasswordSecurityItem'
 import ChangePasswordModal from '~/containers/edit-profile/password-security-tab/change-password-modal/ChangePasswordModal'
 
-import { ButtonVariantEnum } from '~/types'
-
 const PasswordSecurityTab: FC = () => {
   const { t } = useTranslation()
   const { openModal } = useModalContext()
@@ -33,7 +31,7 @@ const PasswordSecurityTab: FC = () => {
         buttonText={t(
           'editProfilePage.profile.passwordSecurityTab.changePassword'
         )}
-        buttonVariant={ButtonVariantEnum.Tonal}
+        buttonVariant='tonal'
         description={t('editProfilePage.profile.passwordSecurityTab.subTitle')}
         onClick={openChangePasswordModal}
         title={t('editProfilePage.profile.passwordSecurityTab.title')}
@@ -42,7 +40,7 @@ const PasswordSecurityTab: FC = () => {
         buttonText={t(
           `editProfilePage.profile.passwordSecurityTab.${neededAction}Account`
         )}
-        buttonVariant={ButtonVariantEnum.Danger}
+        buttonVariant='tonal-error'
         description={t(
           'editProfilePage.profile.passwordSecurityTab.deactivateSubTitle'
         )}
diff --git a/src/containers/edit-profile/password-security-tab/change-password-modal/ChangePasswordModal.tsx b/src/containers/edit-profile/password-security-tab/change-password-modal/ChangePasswordModal.tsx
index 7f8164153..ba6d0a2a2 100644
--- a/src/containers/edit-profile/password-security-tab/change-password-modal/ChangePasswordModal.tsx
+++ b/src/containers/edit-profile/password-security-tab/change-password-modal/ChangePasswordModal.tsx
@@ -14,7 +14,7 @@ import useConfirm from '~/hooks/use-confirm'
 import { useAppDispatch, useAppSelector } from '~/hooks/use-redux'
 
 import Loader from '~/components/loader/Loader'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import AppTextField from '~/components/app-text-field/AppTextField'
 
 import { snackbarVariants } from '~/constants'
@@ -24,11 +24,9 @@ import { openAlert } from '~/redux/features/snackbarSlice'
 import { styles } from '~/containers/edit-profile/password-security-tab/PasswordSecurityTab.styles'
 
 import {
-  ButtonVariantEnum,
   ComponentEnum,
   ButtonTypeEnum,
   InputEnum,
-  SizeEnum,
   FormValues,
   ErrorResponse
 } from '~/types'
@@ -185,25 +183,25 @@ const ChangePasswordModal = () => {
             />
           </Box>
           <Box sx={styles.passwordButtonsContainer}>
-            <AppButton
+            <Button
               onClick={onDiscard}
-              size={SizeEnum.Large}
+              size='md'
               sx={styles.discardButton}
-              variant={ButtonVariantEnum.Tonal}
+              variant='tonal'
             >
               {t('common.cancel')}
-            </AppButton>
-            <AppButton
-              disabled={
-                !data.password || !data.confirmPassword || !data.currentPassword
-              }
-              size={SizeEnum.Large}
+
+            </Button>
+            <Button
+            disabled={
+              !data.password || !data.confirmPassword || !data.currentPassword
+            }
+              size='md'
               sx={styles.saveButton}
               type={ButtonTypeEnum.Submit}
-              variant={ButtonVariantEnum.Contained}
             >
               {saveButtonContent}
-            </AppButton>
+            </Button>
           </Box>
         </Box>
       </Box>
diff --git a/src/containers/edit-profile/password-security-tab/password-security-item/PasswordSecurityItem.tsx b/src/containers/edit-profile/password-security-tab/password-security-item/PasswordSecurityItem.tsx
index 0cd2cb08b..53fe14c2d 100644
--- a/src/containers/edit-profile/password-security-tab/password-security-item/PasswordSecurityItem.tsx
+++ b/src/containers/edit-profile/password-security-tab/password-security-item/PasswordSecurityItem.tsx
@@ -1,11 +1,9 @@
 import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
 
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import AppCard from '~/components/app-card/AppCard'
 
-import { ButtonVariantEnum, SizeEnum } from '~/types'
-
 import { styles } from '~/containers/edit-profile/password-security-tab/password-security-item/PasswordSecurityItem.styles'
 
 interface PasswordSecurityItemProps {
@@ -13,7 +11,7 @@ interface PasswordSecurityItemProps {
   description: string
   buttonText: string
   onClick: () => void
-  buttonVariant: ButtonVariantEnum
+  buttonVariant: 'tonal' | 'tonal-error'
 }
 
 const PasswordSecurityItem = ({
@@ -29,14 +27,14 @@ const PasswordSecurityItem = ({
       <Typography sx={styles.description}>{description}</Typography>
     </Box>
 
-    <AppButton
+    <Button
       onClick={onClick}
-      size={SizeEnum.Medium}
+      size='md'
       sx={styles.appButton}
       variant={buttonVariant}
     >
       {buttonText}
-    </AppButton>
+    </Button>
   </AppCard>
 )
 
diff --git a/src/containers/edit-profile/professional-info-tab/ProfessionalInfoTab.tsx b/src/containers/edit-profile/professional-info-tab/ProfessionalInfoTab.tsx
index 4498a69e0..d5d5996fd 100644
--- a/src/containers/edit-profile/professional-info-tab/ProfessionalInfoTab.tsx
+++ b/src/containers/edit-profile/professional-info-tab/ProfessionalInfoTab.tsx
@@ -8,7 +8,6 @@ import AddIcon from '@mui/icons-material/Add'
 import { useModalContext } from '~/context/modal-context'
 
 import {
-  ButtonVariantEnum,
   ComponentEnum,
   MainUserRole,
   OpenProfessionalCategoryModalHandler,
@@ -31,7 +30,7 @@ import AddProfessionalCategoryModal from '~/containers/edit-profile/professional
 import AboutTutorAccordion from '~/containers/edit-profile/professional-info-tab/about-tutor-accordion/AboutTutorAccordion'
 import AboutStudentAccordion from '~/containers/edit-profile/professional-info-tab/about-student-accordion/AboutStudentAccordion'
 import TitleWithDescription from '~/components/title-with-description/TitleWithDescription'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import { scrollToAndHighlight } from '~/utils/scroll-and-highlight'
 import { aboutStudentData } from '~/containers/user-profile/about-user-block/about-user-block.constants'
 
@@ -146,13 +145,12 @@ const ProfessionalInfoTab: FC = () => {
           title={t('editProfilePage.profile.professionalTab.categoriesTitle')}
         />
         <Box sx={styles.createBtnContainer}>
-          <AppButton
+          <Button
             onClick={() => openProfessionalCategoryModal()}
             startIcon={<AddIcon />}
-            variant={ButtonVariantEnum.Contained}
           >
             {t('editProfilePage.profile.professionalTab.addCategoryBtn')}
-          </AppButton>
+          </Button>
         </Box>
         <ProfessionalCategoryList
           handleDeleteCategory={handleDeleteCategory}
diff --git a/src/containers/edit-profile/professional-info-tab/add-professional-category-modal/AddProfessionalCategoryModal.tsx b/src/containers/edit-profile/professional-info-tab/add-professional-category-modal/AddProfessionalCategoryModal.tsx
index 023b19627..e24d654ae 100644
--- a/src/containers/edit-profile/professional-info-tab/add-professional-category-modal/AddProfessionalCategoryModal.tsx
+++ b/src/containers/edit-profile/professional-info-tab/add-professional-category-modal/AddProfessionalCategoryModal.tsx
@@ -9,7 +9,6 @@ import IconButton from '@mui/material/IconButton'
 
 import {
   ButtonTypeEnum,
-  ButtonVariantEnum,
   CategoryNameInterface,
   ComponentEnum,
   MainUserRole,
@@ -24,7 +23,7 @@ import { isSubmitDisabled } from '~/utils/is-submit-disabled'
 import useForm from '~/hooks/use-form'
 import { useAppDispatch, useAppSelector } from '~/hooks/use-redux'
 
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import TitleWithDescription from '~/components/title-with-description/TitleWithDescription'
 import AsyncAutocomplete from '~/components/async-autocomlete/AsyncAutocomplete'
 import {
@@ -254,32 +253,27 @@ const AddProfessionalCategoryModal: FC<AddProfessionalCategoryModalProps> = ({
         />
         {SubjectsGroup}
         <Box sx={styles.addOneMoreSubjectButton}>
-          <AppButton
-            onClick={handleSubjectAdd}
-            startIcon={<AddIcon />}
-            variant={ButtonVariantEnum.ContainedLight}
-          >
+          <Button onClick={handleSubjectAdd} startIcon={<AddIcon />}>
             {t(
               'editProfilePage.profile.professionalTab.addCategoryModal.addSubjectBtn'
             )}
-          </AppButton>
+          </Button>
         </Box>
       </Box>
       <Box sx={styles.buttonGroup}>
-        <AppButton
+        <Button
           disabled={!isSubmitDisabled(data.subjects)}
           type={ButtonTypeEnum.Submit}
-          variant={ButtonVariantEnum.Contained}
         >
           {t(
             'editProfilePage.profile.professionalTab.addCategoryModal.submitBtn'
           )}
-        </AppButton>
-        <AppButton onClick={closeModal} variant={ButtonVariantEnum.Tonal}>
+        </Button>
+        <Button onClick={closeModal} variant='tonal'>
           {t(
             'editProfilePage.profile.professionalTab.addCategoryModal.discardBtn'
           )}
-        </AppButton>
+        </Button>
       </Box>
     </Box>
   )
diff --git a/src/containers/edit-profile/professional-info-tab/professional-category/ProfessionalCategory.tsx b/src/containers/edit-profile/professional-info-tab/professional-category/ProfessionalCategory.tsx
index 62f418420..eca0f508d 100644
--- a/src/containers/edit-profile/professional-info-tab/professional-category/ProfessionalCategory.tsx
+++ b/src/containers/edit-profile/professional-info-tab/professional-category/ProfessionalCategory.tsx
@@ -5,16 +5,16 @@ import Tooltip from '@mui/material/Tooltip'
 import DeleteIcon from '@mui/icons-material/Delete'
 import { FC, ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
-import AppButton from '~/components/app-button/AppButton'
+
+import Button from '~scss-components/button/Button'
 import AppChip from '~/components/app-chip/AppChip'
 import { getCategoryIcon } from '~/services/category-icon-service'
+
 import {
-  ButtonVariantEnum,
   ComponentEnum,
   PositionEnum,
   UserMainSubject,
-  OpenProfessionalCategoryModalHandler,
-  SizeEnum
+  OpenProfessionalCategoryModalHandler
 } from '~/types'
 import useConfirm from '~/hooks/use-confirm'
 import { styles } from '~/containers/edit-profile/professional-info-tab/professional-category/ProfessionalCategory.styles'
@@ -94,13 +94,9 @@ const ProfessionalCategory: FC<ProfessionalCategoryProps> = ({
     <Box sx={styles.root}>
       <Box sx={styles.toolbar.root}>
         <Box sx={styles.toolbar.buttonGroup}>
-          <AppButton
-            onClick={handleEditButtonClick}
-            size={SizeEnum.Medium}
-            variant={ButtonVariantEnum.Tonal}
-          >
+          <Button onClick={handleEditButtonClick} size='md' variant='tonal'>
             {t('editProfilePage.profile.professionalTab.editCategoryBtn')}
-          </AppButton>
+          </Button>
         </Box>
         <Tooltip
           arrow
diff --git a/src/containers/edit-profile/profile-tab/profile-tab-form/ProfileTabForm.tsx b/src/containers/edit-profile/profile-tab/profile-tab-form/ProfileTabForm.tsx
index 99981b6cd..553aca917 100644
--- a/src/containers/edit-profile/profile-tab/profile-tab-form/ProfileTabForm.tsx
+++ b/src/containers/edit-profile/profile-tab/profile-tab-form/ProfileTabForm.tsx
@@ -3,7 +3,8 @@ import { useTranslation } from 'react-i18next'
 
 import Box from '@mui/material/Box'
 import InputAdornment from '@mui/material/InputAdornment'
-import AppButton from '~/components/app-button/AppButton'
+
+import Button from '~scss-components/button/Button'
 import AppTextField from '~/components/app-text-field/AppTextField'
 import AppTextArea from '~/components/app-text-area/AppTextArea'
 import AppAutoComplete from '~/components/app-auto-complete/AppAutoComplete'
@@ -141,13 +142,9 @@ const ProfileTabForm: FC<ProfileTabFormProps> = ({
               validationData={validationData}
               variant={ButtonVariantEnum.ContainedLight}
             />
-            <AppButton
-              onClick={handleRemovePhoto}
-              size={SizeEnum.Large}
-              variant={ButtonVariantEnum.Tonal}
-            >
+            <Button onClick={handleRemovePhoto} size='md' variant='tonal'>
               {t('common.remove')}
-            </AppButton>
+            </Button>
           </Box>
         </Box>
       </Box>
diff --git a/src/containers/email-confirm-modal/EmailConfirmModal.styles.js b/src/containers/email-confirm-modal/EmailConfirmModal.styles.js
index 6aabffa1d..b6bbcdedb 100644
--- a/src/containers/email-confirm-modal/EmailConfirmModal.styles.js
+++ b/src/containers/email-confirm-modal/EmailConfirmModal.styles.js
@@ -8,7 +8,6 @@ export const styles = {
   },
   button: {
     margin: '0 auto',
-    size: 'large',
     mt: '32px'
   },
   titleWithDescription: {
diff --git a/src/containers/email-confirm-modal/EmailConfirmModal.tsx b/src/containers/email-confirm-modal/EmailConfirmModal.tsx
index b351a288e..46dcef909 100644
--- a/src/containers/email-confirm-modal/EmailConfirmModal.tsx
+++ b/src/containers/email-confirm-modal/EmailConfirmModal.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import Box from '@mui/material/Box'
 
 import Loader from '~/components/loader/Loader'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import ImgTitleDescription from '~/components/img-title-description/ImgTitleDescription'
 
 import LoginDialog from '~/containers/guest-home-page/login-dialog/LoginDialog'
@@ -14,7 +14,6 @@ import imgSuccess from '~/assets/img/email-confirmation-modals/success-icon.svg'
 import imgReject from '~/assets/img/email-confirmation-modals/not-success-icon.svg'
 
 import { AuthService } from '~/services/auth-service'
-import { ButtonVariantEnum } from '~/types'
 import useAxios from '~/hooks/use-axios'
 import { Component, useModalContext } from '~/context/modal-context'
 
@@ -60,13 +59,9 @@ const EmailConfirmModal = ({
           style={styles}
           title={t('modals.emailNotConfirm')}
         />
-        <AppButton
-          onClick={closeModal}
-          sx={styles.button}
-          variant={ButtonVariantEnum.Contained}
-        >
+        <Button onClick={closeModal} size='lg' sx={styles.button}>
           {t('common.confirmButton')}
-        </AppButton>
+        </Button>
       </Box>
     )
   }
@@ -80,13 +75,9 @@ const EmailConfirmModal = ({
           style={styles}
           title={t('modals.emailAlreadyConfirm')}
         />
-        <AppButton
-          onClick={openLoginDialog}
-          sx={styles.button}
-          variant={ButtonVariantEnum.Contained}
-        >
+        <Button onClick={openLoginDialog} size='lg' sx={styles.button}>
           {t('button.goToLogin')}
-        </AppButton>
+        </Button>
       </Box>
     )
   }
@@ -99,13 +90,9 @@ const EmailConfirmModal = ({
           style={styles}
           title={t('modals.emailConfirm')}
         />
-        <AppButton
-          onClick={openLoginDialog}
-          sx={styles.button}
-          variant={ButtonVariantEnum.Contained}
-        >
+        <Button onClick={openLoginDialog} size='lg' sx={styles.button}>
           {t('button.goToLogin')}
-        </AppButton>
+        </Button>
       </Box>
     )
   }
diff --git a/src/containers/find-course/courses-filters/CourseFilters.styles.tsx b/src/containers/find-course/courses-filters/CourseFilters.styles.tsx
index 8d9675b98..2b86b47ab 100644
--- a/src/containers/find-course/courses-filters/CourseFilters.styles.tsx
+++ b/src/containers/find-course/courses-filters/CourseFilters.styles.tsx
@@ -33,7 +33,7 @@ export const styles = {
     }
   },
   clearBtn: {
-    mr: '32px',
-    color: 'primary.300'
+    mr: '22px',
+    ml: '10px'
   }
 }
diff --git a/src/containers/find-course/courses-filters/CoursesFilters.tsx b/src/containers/find-course/courses-filters/CoursesFilters.tsx
index 1a5ce3c3a..288623af4 100644
--- a/src/containers/find-course/courses-filters/CoursesFilters.tsx
+++ b/src/containers/find-course/courses-filters/CoursesFilters.tsx
@@ -13,7 +13,7 @@ import CloseIcon from '@mui/icons-material/Close'
 import { subjectService } from '~/services/subject-service'
 import { categoryService } from '~/services/category-service'
 import useUserCategoriesAndSubjects from '~/hooks/use-user-categories-and-subjects'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import DividedDropdownAutocomplete from '~/components/divider-dropdown-autocomplete/DividerDropdownAutocomplete'
 
 import { styles } from '~/containers/find-course/courses-filters/CourseFilters.styles'
@@ -22,7 +22,6 @@ import {
   CategoryNameInterface,
   SubjectNameInterface,
   CourseFilters,
-  ButtonVariantEnum,
   CourseExtendedAutocompleteOptions,
   UserResponse
 } from '~/types'
@@ -125,14 +124,14 @@ const CoursesFilters = ({
           {menuItems}
         </Select>
       </FormControl>
-      <AppButton
+      <Button
         onClick={resetFilters}
+        startIcon={<CloseIcon />}
         sx={styles.clearBtn}
-        variant={ButtonVariantEnum.Text}
+        variant='text-secondary'
       >
-        <CloseIcon />
         {t('common.clear')}
-      </AppButton>
+      </Button>
     </Box>
   )
 }
diff --git a/src/containers/find-offer/create-new-subject/CreateNewSubject.tsx b/src/containers/find-offer/create-new-subject/CreateNewSubject.tsx
index 814a11472..1ce13aa11 100644
--- a/src/containers/find-offer/create-new-subject/CreateNewSubject.tsx
+++ b/src/containers/find-offer/create-new-subject/CreateNewSubject.tsx
@@ -13,7 +13,7 @@ import { useAppDispatch } from '~/hooks/use-redux'
 import Image from '~/assets/img/signup-dialog/student.svg'
 import AppTextArea from '~/components/app-text-area/AppTextArea'
 import TitleWithDescription from '~/components/title-with-description/TitleWithDescription'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import AppTextField from '~/components/app-text-field/AppTextField'
 import AsyncAutocomplete from '~/components/async-autocomlete/AsyncAutocomplete'
 
@@ -154,13 +154,13 @@ const CreateSubjectModal = () => {
           title={t('categoriesPage.newSubject.info')}
           value={data.info}
         />
-        <AppButton
+        <Button
           loading={loading}
           sx={styles.button}
           type={ButtonTypeEnum.Submit}
         >
           {t('button.sendRequest')}
-        </AppButton>
+        </Button>
       </Box>
     </Box>
   )
diff --git a/src/containers/find-offer/offer-card-square/OfferCardSquare.tsx b/src/containers/find-offer/offer-card-square/OfferCardSquare.tsx
index 76346e6a6..f86c919b6 100644
--- a/src/containers/find-offer/offer-card-square/OfferCardSquare.tsx
+++ b/src/containers/find-offer/offer-card-square/OfferCardSquare.tsx
@@ -9,11 +9,11 @@ import Typography from '@mui/material/Typography'
 import Divider from '@mui/material/Divider'
 
 import AppRatingMobile from '~/components/app-rating-mobile/AppRatingMobile'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import UserProfileInfo from '~/components/user-profile-info/UserProfileInfo'
 import TitleWithDescripiton from '~/components/title-with-description/TitleWithDescription'
 
-import { ButtonActions, Offer, SizeEnum } from '~/types'
+import { ButtonActions, Offer } from '~/types'
 import { styles } from '~/containers/find-offer/offer-card-square/OfferCardSquare.styles'
 import SubjectLevelWithLabels from '~/components/subject-level-with-labels/SubjectLevelWithLabels'
 
@@ -44,19 +44,22 @@ const OfferCardSquare: FC<OfferCardSquareProps> = ({
     proficiencyLevel
   } = offer
 
-  const buttons = buttonActions?.map(
-    (elem) =>
+  const buttons = buttonActions?.map((elem) => {
+    const variant = elem?.buttonProps?.variant === 'tonal' ? 'tonal' : 'primary'
+    return (
       elem && (
-        <AppButton
+        <Button
           {...elem.buttonProps}
           fullWidth
           key={elem.label}
-          size={SizeEnum.Medium}
+          size='md'
+          variant={variant}
         >
           {t(elem.label)}
-        </AppButton>
+        </Button>
       )
-  )
+    )
+  })
 
   return (
     <Box sx={styles.container}>
diff --git a/src/containers/find-offer/offer-filter-block/OfferFilterBlock.styles.ts b/src/containers/find-offer/offer-filter-block/OfferFilterBlock.styles.ts
index 3f0b098fb..890b6632f 100644
--- a/src/containers/find-offer/offer-filter-block/OfferFilterBlock.styles.ts
+++ b/src/containers/find-offer/offer-filter-block/OfferFilterBlock.styles.ts
@@ -18,12 +18,5 @@ export const styles = {
   },
   content: {
     variant: 'body2'
-  },
-  applyButton: {
-    backgroundColor: 'primary.500',
-    boxShadow: 'none',
-    '&:hover': {
-      boxShadow: 'none'
-    }
   }
 }
diff --git a/src/containers/find-offer/offer-filter-block/OfferFilterBlock.tsx b/src/containers/find-offer/offer-filter-block/OfferFilterBlock.tsx
index df794472d..0b390f912 100644
--- a/src/containers/find-offer/offer-filter-block/OfferFilterBlock.tsx
+++ b/src/containers/find-offer/offer-filter-block/OfferFilterBlock.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import Stack from '@mui/material/Stack'
 import Divider from '@mui/material/Divider'
 
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import AppContentSwitcher from '~/components/app-content-switcher/AppContentSwitcher'
 import AppSelect from '~/components/app-select/AppSelect'
 import OfferFilterList from '~/containers/find-offer/offer-filter-block/offer-filter-list/OfferFilterList'
@@ -101,12 +101,10 @@ const OfferFilterBlock: FC<OfferFilterBlockProps> = ({
         updateFilterByKey={updateFilterByKey}
         updateFiltersInQuery={updateFiltersInQuery}
       />
-      <AppButton onClick={handleApplyFilters} sx={styles.applyButton}>
-        {t('button.applyFilters')}
-      </AppButton>
-      <AppButton onClick={resetFilters} variant='tonal'>
+      <Button onClick={handleApplyFilters}>{t('button.applyFilters')}</Button>
+      <Button onClick={resetFilters} variant='tonal'>
         {t('button.clearFilters')}
-      </AppButton>
+      </Button>
     </Stack>
   )
 }
diff --git a/src/containers/find-offer/offer-request-block/OfferRequestBlock.tsx b/src/containers/find-offer/offer-request-block/OfferRequestBlock.tsx
index 09d53fd1b..6da5ae1b2 100644
--- a/src/containers/find-offer/offer-request-block/OfferRequestBlock.tsx
+++ b/src/containers/find-offer/offer-request-block/OfferRequestBlock.tsx
@@ -2,7 +2,8 @@ import { useTranslation } from 'react-i18next'
 
 import TitleBlock from '~/components/title-block/TitleBlock'
 import icon from '~/assets/img/find-offer/subject_icon.png'
-import AppButton from '~/components/app-button/AppButton'
+
+import Button from '~scss-components/button/Button'
 import CreateOffer from '~/containers/offer-page/create-offer/CreateOffer'
 import AppDrawer from '~/components/app-drawer/AppDrawer'
 import useBreakpoints from '~/hooks/use-breakpoints'
@@ -20,13 +21,9 @@ const OfferRequestBlock = () => {
 
   return (
     <TitleBlock img={icon} translationKey={translationKey}>
-      <AppButton
-        fullWidth={isMobile}
-        onClick={handleOpenDrawer}
-        sx={{ py: '14px' }}
-      >
+      <Button fullWidth={isMobile} onClick={handleOpenDrawer}>
         {t(`${translationKey}.button`)}
-      </AppButton>
+      </Button>
       <AppDrawer onClose={closeDrawer} open={isOpen}>
         <CreateOffer closeDrawer={closeDrawer} />
       </AppDrawer>
diff --git a/src/containers/guest-home-page/Welcome.tsx b/src/containers/guest-home-page/Welcome.tsx
index a266fa1a4..94db5c18e 100644
--- a/src/containers/guest-home-page/Welcome.tsx
+++ b/src/containers/guest-home-page/Welcome.tsx
@@ -4,7 +4,7 @@ import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
 import useBreakpoints from '~/hooks/use-breakpoints'
 import HashLink from '~/components/hash-link/HashLink'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 
 import titleMd from '~/assets/img/guest-home-page/titleMd.svg'
 import titleSm from '~/assets/img/guest-home-page/titleSm.svg'
@@ -42,13 +42,13 @@ const Welcome = () => {
       <Typography sx={styles.subtitle}>
         {t('guestHomePage.welcomeBlock.description')}
       </Typography>
-      <AppButton
+      <Button
         component={HashLink}
-        sx={styles.getStartBtn}
+        size='md'
         to={guestRoutes.navBar.whatCanYouDo.path}
       >
         {t('guestHomePage.welcomeBlock.getStarted')}
-      </AppButton>
+      </Button>
     </Box>
   )
 }
diff --git a/src/containers/guest-home-page/cards-with-button/CardsWithButton.tsx b/src/containers/guest-home-page/cards-with-button/CardsWithButton.tsx
index cb3cf3946..04870b18f 100644
--- a/src/containers/guest-home-page/cards-with-button/CardsWithButton.tsx
+++ b/src/containers/guest-home-page/cards-with-button/CardsWithButton.tsx
@@ -6,17 +6,12 @@ import Transition, {
 
 import Box from '@mui/material/Box'
 import { useModalContext } from '~/context/modal-context'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import TitleWithDescription from '~/components/title-with-description/TitleWithDescription'
 import SignupDialog from '~/containers/guest-home-page/signup-dialog/SignupDialog'
 import dots from '~/assets/img/guest-home-page/dots.svg'
 
-import {
-  AccordionWithImageItem,
-  PositionEnum,
-  SizeEnum,
-  UserRoleEnum
-} from '~/types'
+import { AccordionWithImageItem, PositionEnum, UserRoleEnum } from '~/types'
 import { styles } from '~/containers/guest-home-page/cards-with-button/CardsWithButton.styles'
 
 interface CardsWithButtonProps {
@@ -71,13 +66,9 @@ const CardsWithButton: FC<CardsWithButtonProps> = ({
       <Transition in={isTutor} timeout={300}>
         {(state) => cards(state)}
       </Transition>
-      <AppButton
-        onClick={openDialog}
-        size={SizeEnum.ExtraLarge}
-        sx={styles.button}
-      >
+      <Button onClick={openDialog} size='lg' sx={styles.button}>
         {btnText}
-      </AppButton>
+      </Button>
     </>
   )
 }
diff --git a/src/containers/guest-home-page/forgot-password/ForgotPassword.jsx b/src/containers/guest-home-page/forgot-password/ForgotPassword.jsx
index f3cec9245..f12016394 100644
--- a/src/containers/guest-home-page/forgot-password/ForgotPassword.jsx
+++ b/src/containers/guest-home-page/forgot-password/ForgotPassword.jsx
@@ -10,7 +10,7 @@ import { useModalContext } from '~/context/modal-context'
 
 import AppTextField from '~/components/app-text-field/AppTextField'
 import LoginDialog from '~/containers/guest-home-page/login-dialog/LoginDialog'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import TitleWithDescription from '~/components/title-with-description/TitleWithDescription'
 
 import NotificationModal from '~/containers/guest-home-page/notification-modal/NotificationModal'
@@ -22,7 +22,6 @@ import { snackbarVariants } from '~/constants'
 import { email } from '~/utils/validations/login'
 import { openAlert } from '~/redux/features/snackbarSlice'
 import { getErrorKey } from '~/utils/get-error-key'
-import { ButtonVariantEnum, SizeEnum } from '~/types'
 
 const ForgotPassword = () => {
   const { t } = useTranslation()
@@ -104,19 +103,19 @@ const ForgotPassword = () => {
           type='email'
           value={data.email}
         />
-        <AppButton loading={loading} sx={styles.sentPassword} type='submit'>
+        <Button loading={loading} sx={styles.sentPassword} type='submit'>
           {t('login.sendPassword')}
-        </AppButton>
+        </Button>
       </Box>
 
-      <AppButton
+      <Button
         onClick={backToLogin}
-        size={SizeEnum.Large}
+        size='md'
         sx={styles.backButton}
-        variant={ButtonVariantEnum.Text}
+        variant='text-secondary'
       >
         {t('login.backToLogin')}
-      </AppButton>
+      </Button>
     </Box>
   )
 }
diff --git a/src/containers/guest-home-page/forgot-password/ForgotPassword.styles.js b/src/containers/guest-home-page/forgot-password/ForgotPassword.styles.js
index e6775f29f..c2d19a4b0 100644
--- a/src/containers/guest-home-page/forgot-password/ForgotPassword.styles.js
+++ b/src/containers/guest-home-page/forgot-password/ForgotPassword.styles.js
@@ -6,7 +6,6 @@ export const styles = {
 
   sentPassword: {
     mb: 1,
-    p: '14px 0',
     width: '100%'
   },
   backButton: {
diff --git a/src/containers/guest-home-page/login-form/LoginForm.tsx b/src/containers/guest-home-page/login-form/LoginForm.tsx
index d5a70d392..784559719 100644
--- a/src/containers/guest-home-page/login-form/LoginForm.tsx
+++ b/src/containers/guest-home-page/login-form/LoginForm.tsx
@@ -10,7 +10,7 @@ import FormControlLabel from '@mui/material/FormControlLabel'
 import { useModalContext } from '~/context/modal-context'
 import ForgotPassword from '~/containers/guest-home-page/forgot-password/ForgotPassword'
 import AppTextField from '~/components/app-text-field/AppTextField'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 
 import { styles } from '~/containers/guest-home-page/login-form/LoginForm.styles'
 import { useAppSelector } from '~/hooks/use-redux'
@@ -111,14 +111,14 @@ const LoginForm: React.FC<LoginFormProps> = ({
         </Typography>
       </Box>
 
-      <AppButton
+      <Button
         disabled={isDisabled}
         loading={authLoading}
         sx={styles.loginButton}
         type='submit'
       >
         {t('common.labels.login')}
-      </AppButton>
+      </Button>
     </Box>
   )
 }
diff --git a/src/containers/guest-home-page/notification-modal/NotificationModal.tsx b/src/containers/guest-home-page/notification-modal/NotificationModal.tsx
index 4c810d486..d23fa5c97 100644
--- a/src/containers/guest-home-page/notification-modal/NotificationModal.tsx
+++ b/src/containers/guest-home-page/notification-modal/NotificationModal.tsx
@@ -2,7 +2,7 @@ import { FC, ReactElement } from 'react'
 import { Box } from '@mui/material'
 
 import ImgTitleDescription from '~/components/img-title-description/ImgTitleDescription'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import { styles } from '~/containers/guest-home-page/notification-modal/NotificationModal.styles'
 
 interface ConfirmEmailModal {
@@ -28,7 +28,7 @@ const NotificationModal: FC<ConfirmEmailModal> = ({
         style={styles.imgTitleDesc}
         title={title}
       />
-      <AppButton onClick={onClose}>{buttonTitle}</AppButton>
+      <Button onClick={onClose}>{buttonTitle}</Button>
     </Box>
   )
 }
diff --git a/src/containers/guest-home-page/reset-password/ResetPassword.tsx b/src/containers/guest-home-page/reset-password/ResetPassword.tsx
index 135b8c468..907dd8e7f 100644
--- a/src/containers/guest-home-page/reset-password/ResetPassword.tsx
+++ b/src/containers/guest-home-page/reset-password/ResetPassword.tsx
@@ -11,7 +11,7 @@ import { useAppDispatch } from '~/hooks/use-redux'
 import Box from '@mui/material/Box'
 
 import Loader from '~/components/loader/Loader'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import AppTextField from '~/components/app-text-field/AppTextField'
 import ImgTitleDescription from '~/components/img-title-description/ImgTitleDescription'
 import TitleWithDescription from '~/components/title-with-description/TitleWithDescription'
@@ -19,7 +19,7 @@ import TitleWithDescription from '~/components/title-with-description/TitleWithD
 import LoginDialog from '~/containers/guest-home-page/login-dialog/LoginDialog'
 import { styles } from '~/containers/guest-home-page/reset-password/ResetPassword.styles'
 
-import { ButtonVariantEnum, SizeEnum, NewPassword } from '~/types'
+import { NewPassword } from '~/types'
 import { confirmPassword, password } from '~/utils/validations/login'
 import { snackbarVariants } from '~/constants'
 import imgSuccess from '~/assets/img/email-confirmation-modals/success-icon.svg'
@@ -44,14 +44,13 @@ const ResetPassword: FC<ResetPasswordProps> = ({ resetToken, openModal }) => {
           style={styles}
           title={t('login.successReset')}
         />
-        <AppButton
+        <Button
           onClick={() => openModal({ component: <LoginDialog /> })}
-          size={SizeEnum.Large}
+          size='lg'
           sx={styles.button}
-          variant={ButtonVariantEnum.Contained}
         >
           {t('button.goToLogin')}
-        </AppButton>
+        </Button>
       </Box>
     ),
     [openModal, t]
@@ -128,15 +127,9 @@ const ResetPassword: FC<ResetPasswordProps> = ({ resetToken, openModal }) => {
           type={showConfirmPassword ? 'text' : 'password'}
           value={data.confirmPassword}
         />
-        <AppButton
-          disabled={loading}
-          fullWidth
-          size={SizeEnum.Large}
-          type='submit'
-          variant={ButtonVariantEnum.Contained}
-        >
+        <Button disabled={loading} fullWidth size='lg' type='submit'>
           {loading ? <Loader size={20} /> : t('login.savePassword')}
-        </AppButton>
+        </Button>
       </Box>
     </Box>
   )
diff --git a/src/containers/guest-home-page/signup-form/SignupForm.styles.js b/src/containers/guest-home-page/signup-form/SignupForm.styles.js
index c37e08598..5c1beca26 100644
--- a/src/containers/guest-home-page/signup-form/SignupForm.styles.js
+++ b/src/containers/guest-home-page/signup-form/SignupForm.styles.js
@@ -18,8 +18,7 @@ export const styles = {
     whiteSpace: 'nowrap'
   },
   signupButton: {
-    width: '100%',
-    padding: '14px 0px'
+    width: '100%'
   },
   underlineText: {
     color: 'primary.900',
diff --git a/src/containers/guest-home-page/signup-form/SignupForm.tsx b/src/containers/guest-home-page/signup-form/SignupForm.tsx
index d0cacd0f6..a9ac16fb0 100644
--- a/src/containers/guest-home-page/signup-form/SignupForm.tsx
+++ b/src/containers/guest-home-page/signup-form/SignupForm.tsx
@@ -15,7 +15,7 @@ import Checkbox from '@mui/material/Checkbox'
 import useInputVisibility from '~/hooks/use-input-visibility'
 import AppTextField from '~/components/app-text-field/AppTextField'
 import { guestRoutes } from '~/router/constants/guestRoutes'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 
 import { styles } from '~/containers/guest-home-page/signup-form/SignupForm.styles'
 import { SignupParams, UseFormErrors, UseFormEventHandler } from '~/types'
@@ -164,14 +164,14 @@ const SignupForm = ({
         />
       </Box>
 
-      <AppButton
+      <Button
         disabled={!isValid || !isAgreementChecked}
         loading={authLoading}
         sx={styles.signupButton}
         type='submit'
       >
         {t('common.labels.signup')}
-      </AppButton>
+      </Button>
     </Box>
   )
 }
diff --git a/src/containers/guest-home-page/styles/Welcome.styles.ts b/src/containers/guest-home-page/styles/Welcome.styles.ts
index a0918361b..635fc0c0d 100644
--- a/src/containers/guest-home-page/styles/Welcome.styles.ts
+++ b/src/containers/guest-home-page/styles/Welcome.styles.ts
@@ -2,8 +2,6 @@ import welcomeBgMd from '~/assets/img/guest-home-page/welcomeBgMd.svg'
 import welcomeBgSm from '~/assets/img/guest-home-page/welcomeBgSm.svg'
 import welcomeBgXs from '~/assets/img/guest-home-page/welcomeBgXs.svg'
 
-import { mainShadow } from '~/styles/app-theme/custom-shadows'
-
 const gradient =
   'radial-gradient(ellipse at top, rgba(192, 229, 228, 0.4), transparent 80%'
 
@@ -35,10 +33,5 @@ export const styles = {
     maxWidth: { lg: '1000px', xs: '798px' },
     marginBottom: '32px',
     textAlign: 'center'
-  },
-  getStartBtn: {
-    py: '16px',
-    px: { lg: '60px', xs: '32px' },
-    boxShadow: mainShadow
   }
 }
diff --git a/src/containers/layout/navbar/NavBar.tsx b/src/containers/layout/navbar/NavBar.tsx
index 4b118ea78..6e4d6fc86 100644
--- a/src/containers/layout/navbar/NavBar.tsx
+++ b/src/containers/layout/navbar/NavBar.tsx
@@ -11,7 +11,7 @@ import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
 
 import HashLink from '~/components/hash-link/HashLink'
 import AppDrawer from '~/components/app-drawer/AppDrawer'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 
 import Logo from '~/containers/logo/Logo'
 import Sidebar from '~/containers/layout/sidebar/Sidebar'
@@ -30,7 +30,7 @@ import {
 import { studentRoutes } from '~/router/constants/studentRoutes'
 import { authRoutes } from '~/router/constants/authRoutes'
 
-import { ButtonVariantEnum, SizeEnum, UserRoleEnum } from '~/types'
+import { UserRoleEnum } from '~/types'
 
 const Navbar = () => {
   const { userRole } = useAppSelector((state) => state.appMain)
@@ -110,15 +110,15 @@ const Navbar = () => {
 
   return (
     <Box sx={styles.header}>
-      <AppButton
+      <Button
         component={HashLink}
-        size={SizeEnum.Small}
+        size='sm'
         sx={styles.logoButton}
         to={homePath}
-        variant={ButtonVariantEnum.Text}
+        variant='text-secondary'
       >
         <Logo />
-      </AppButton>
+      </Button>
       {renderMenu(findOffersMenu, { autoFocus: false })}
       <List sx={styles.navList}>{navigationList}</List>
       <NavigationIcons setSidebarOpen={handleOpenSidebar} />
diff --git a/src/containers/layout/notifications-menu/NotificationsMenu.tsx b/src/containers/layout/notifications-menu/NotificationsMenu.tsx
index 82c4da39a..388ee6c69 100644
--- a/src/containers/layout/notifications-menu/NotificationsMenu.tsx
+++ b/src/containers/layout/notifications-menu/NotificationsMenu.tsx
@@ -9,8 +9,8 @@ import Link from '@mui/material/Link'
 import { MenuProps } from '@mui/material'
 
 import AppMenu from '~/components/app-menu/AppMenu'
-import AppButton from '~/components/app-button/AppButton'
-import { ButtonVariantEnum, Notification, SizeEnum } from '~/types'
+import Button from '~scss-components/button/Button'
+import { Notification, SizeEnum } from '~/types'
 import { styles } from '~/containers/layout/notifications-menu/NotificationsMenu.styles'
 import { liksByType } from '~/containers/layout/notifications-menu/NotificationsMenu.constants'
 
@@ -52,14 +52,9 @@ const NotificationsMenu: FC<NotificationsMenuProps> = ({
         </IconButton>
       </Typography>
     )),
-    <AppButton
-      fullWidth
-      key={null}
-      onClick={onClear}
-      variant={ButtonVariantEnum.Text}
-    >
+    <Button fullWidth key={null} onClick={onClear} variant='text-secondary'>
       {t('header.notifications.clearAll')}
-    </AppButton>
+    </Button>
   ]
 
   const emptyNotifications = (
diff --git a/src/containers/my-cooperations/accept-cooperation-modal/AcceptCooperationModal.tsx b/src/containers/my-cooperations/accept-cooperation-modal/AcceptCooperationModal.tsx
index a01a82606..941f362ff 100644
--- a/src/containers/my-cooperations/accept-cooperation-modal/AcceptCooperationModal.tsx
+++ b/src/containers/my-cooperations/accept-cooperation-modal/AcceptCooperationModal.tsx
@@ -8,7 +8,7 @@ import Typography from '@mui/material/Typography'
 import CooperationCard from '~/containers/my-cooperations/cooperation-card/CooperationCard'
 import TitleWithDescription from '~/components/title-with-description/TitleWithDescription'
 import SliderWithInput from '~/components/slider-with-input/SliderWithInput'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import Loader from '~/components/loader/Loader'
 import useForm from '~/hooks/use-form'
 import useAxios from '~/hooks/use-axios'
@@ -21,7 +21,6 @@ import { OfferService } from '~/services/offer-service'
 
 import {
   ButtonTypeEnum,
-  ButtonVariantEnum,
   ComponentEnum,
   Cooperation,
   ErrorResponse,
@@ -159,16 +158,17 @@ const AcceptCooperationModal: FC<AcceptCooperationModalProps> = ({
     ) : (
       <Box sx={styles.buttonRow}>
         {needAction && (
-          <AppButton onClick={onCooperationAccept} type={acceptButtonType}>
+          <Button
+            disabled={!isDirty}
+            type={ButtonTypeEnum.Submit}
+            variant='tonal'
+          >
+            {t('cooperationsPage.acceptModal.resend')}
+          </Button>
+          <Button onClick={onCooperationAccept} type={acceptButtonType}>
             {t(acceptButtonText)}
-          </AppButton>
+          </Button>
         )}
-        <AppButton
-          onClick={() => void handleDeclineCooperation()}
-          variant={ButtonVariantEnum.Tonal}
-        >
-          {t('cooperationsPage.acceptModal.decline')}
-        </AppButton>
       </Box>
     )
 
diff --git a/src/containers/my-cooperations/cooperation-completion/CooperationCompletion.styles.ts b/src/containers/my-cooperations/cooperation-completion/CooperationCompletion.styles.ts
index 4c0ed2435..e59f8915b 100644
--- a/src/containers/my-cooperations/cooperation-completion/CooperationCompletion.styles.ts
+++ b/src/containers/my-cooperations/cooperation-completion/CooperationCompletion.styles.ts
@@ -6,15 +6,6 @@ export const styles = {
     color: 'primary.500',
     mt: '32px'
   },
-  closeBtn: {
-    color: 'error.700',
-    minWidth: 'max-content',
-    ml: '15px',
-    '&: hover': {
-      backgroundColor: 'transparent',
-      color: 'primary.500'
-    }
-  },
   dropdown: {
     maxWidth: '216px',
     ml: '15px'
diff --git a/src/containers/my-cooperations/cooperation-completion/CooperationCompletion.tsx b/src/containers/my-cooperations/cooperation-completion/CooperationCompletion.tsx
index 24648218e..a47ad4712 100644
--- a/src/containers/my-cooperations/cooperation-completion/CooperationCompletion.tsx
+++ b/src/containers/my-cooperations/cooperation-completion/CooperationCompletion.tsx
@@ -1,17 +1,25 @@
 import { useTranslation } from 'react-i18next'
+import { useState } from 'react'
 import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
 import Divider from '@mui/material/Divider'
 
 import SettingItem from '~/components/setting-item/SettingItem'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
+import AppSelect from '~/components/app-select/AppSelect'
 
+import { cooperationAccessValues } from '~/containers/my-cooperations/cooperation-completion/CooperationCompletion.constants'
 import { styles } from '~/containers/my-cooperations/cooperation-completion/CooperationCompletion.styles'
-import { ButtonVariantEnum, SizeEnum } from '~/types'
+import { CooperationMaterialsAccessEnum } from '~/types'
 
 const CooperationCompletion = () => {
   const { t } = useTranslation()
 
+  const [materialsAccess, setMaterialsAccess] =
+  useState<CooperationMaterialsAccessEnum>(
+    CooperationMaterialsAccessEnum.OneMonthAccess
+  )
+  
   return (
     <Box>
       <Divider />
@@ -24,13 +32,20 @@ const CooperationCompletion = () => {
         )}
         title={t('cooperationsPage.cooperationDetails.closeCooperationTitle')}
       >
-        <AppButton
-          size={SizeEnum.Medium}
-          sx={styles.closeBtn}
-          variant={ButtonVariantEnum.Text}
-        >
+        <Button size='md' variant='tonal-error'>
           {t('cooperationsPage.cooperationDetails.closeCooperationBtn')}
-        </AppButton>
+        </Button>
+      </SettingItem>
+      <SettingItem
+        subtitle={t('cooperationsPage.cooperationDetails.accessDescription')}
+        title={t('cooperationsPage.cooperationDetails.accessTitle')}
+      >
+        <AppSelect
+          fields={cooperationAccessValues(t)}
+          setValue={setMaterialsAccess}
+          sx={styles.dropdown}
+          value={materialsAccess}
+        />
       </SettingItem>
     </Box>
   )
diff --git a/src/containers/my-cooperations/cooperation-details/CooperationDetails.tsx b/src/containers/my-cooperations/cooperation-details/CooperationDetails.tsx
index 796d242f9..9c3d3d659 100644
--- a/src/containers/my-cooperations/cooperation-details/CooperationDetails.tsx
+++ b/src/containers/my-cooperations/cooperation-details/CooperationDetails.tsx
@@ -13,7 +13,7 @@ import PageWrapper from '~/components/page-wrapper/PageWrapper'
 import TitleWithDescription from '~/components/title-with-description/TitleWithDescription'
 import Loader from '~/components/loader/Loader'
 import StatusChip from '~/components/status-chip/StatusChip'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 
 import useAxios from '~/hooks/use-axios'
 import useBreakpoints from '~/hooks/use-breakpoints'
@@ -32,13 +32,7 @@ import { styles } from '~/containers/my-cooperations/cooperation-details/Coopera
 import { errorRoutes } from '~/router/constants/errorRoutes'
 import { cooperationService } from '~/services/cooperation-service'
 
-import {
-  CooperationTabsEnum,
-  PositionEnum,
-  Cooperation,
-  SizeEnum,
-  ButtonVariantEnum
-} from '~/types'
+import { CooperationTabsEnum, PositionEnum, Cooperation } from '~/types'
 import {
   cooperationsSelector,
   setCooperationSections,
@@ -156,15 +150,15 @@ const CooperationDetails = () => {
           tabsData={tabsData}
         />
         <Box onClick={handleNotesClick} sx={styles.banner(isNotesOpen)}>
-          {iconConditionals}
-          <AppButton
+          <Button
             disableRipple
-            size={SizeEnum.Small}
+            size='sm'
+            startIcon={iconConditionals}
             sx={styles.notes(isNotesOpen)}
-            variant={ButtonVariantEnum.Base}
+            variant='text-secondary'
           >
             {t('cooperationsPage.details.notes')}
-          </AppButton>
+          </Button>
         </Box>
       </Box>
       <Box sx={styles.notesBlock}>
diff --git a/src/containers/my-cooperations/cooperation-notes/create-or-edit-note/CreateOrEditNote.tsx b/src/containers/my-cooperations/cooperation-notes/create-or-edit-note/CreateOrEditNote.tsx
index 79c348c3c..1dc59291d 100644
--- a/src/containers/my-cooperations/cooperation-notes/create-or-edit-note/CreateOrEditNote.tsx
+++ b/src/containers/my-cooperations/cooperation-notes/create-or-edit-note/CreateOrEditNote.tsx
@@ -11,7 +11,7 @@ import { useAppSelector } from '~/hooks/use-redux'
 import useForm from '~/hooks/use-form'
 import useAxios from '~/hooks/use-axios'
 import { userService } from '~/services/user-service'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import AppTextField from '~/components/app-text-field/AppTextField'
 import Loader from '~/components/loader/Loader'
 import AvatarIcon from '~/components/avatar-icon/AvatarIcon'
@@ -20,7 +20,6 @@ import { defaultResponses } from '~/constants'
 import { styles } from '~/containers/my-cooperations/cooperation-notes/create-or-edit-note/CreateOrEditNote.styles'
 import {
   TextFieldVariantEnum,
-  ButtonVariantEnum,
   SizeEnum,
   TypographyVariantEnum,
   CreateOrUpdateNoteParams,
@@ -136,23 +135,23 @@ const CreateOrEditNote = ({
           }
         />
         <Box sx={styles.btnContainer}>
-          <AppButton
+          <Button
             onClick={onCloseNote}
-            size={SizeEnum.Small}
+            size='sm'
             sx={styles.noteBtn}
-            variant={ButtonVariantEnum.Tonal}
+            variant='tonal'
           >
             {t('common.cancel')}
-          </AppButton>
-          <AppButton
+          </Button>
+          <Button
             disabled={!isDirty || !data.text}
             loading={onSubmitLoading}
-            size={SizeEnum.Small}
+            size='sm'
             sx={styles.noteBtn}
             type={ButtonTypeEnum.Submit}
           >
             {t('common.save')}
-          </AppButton>
+          </Button>
         </Box>
       </Box>
     </Box>
diff --git a/src/containers/my-cooperations/empty-cooperation-activities/EmptyCooperationActivities.styles.ts b/src/containers/my-cooperations/empty-cooperation-activities/EmptyCooperationActivities.styles.ts
index 1cc19f6e7..9768c4217 100644
--- a/src/containers/my-cooperations/empty-cooperation-activities/EmptyCooperationActivities.styles.ts
+++ b/src/containers/my-cooperations/empty-cooperation-activities/EmptyCooperationActivities.styles.ts
@@ -18,15 +18,6 @@ export const styles = {
       mb: '24px'
     }
   },
-  button: {
-    p: '10px 12px',
-    color: palette.basic.lightBlue,
-    backgroundColor: palette.basic.lightGray,
-    '&:hover': {
-      color: palette.basic.lightBlue,
-      backgroundColor: palette.basic.lightGray
-    }
-  },
   menuItem: {
     minWidth: '200px',
     p: '10px 12px',
diff --git a/src/containers/my-cooperations/empty-cooperation-activities/EmptyCooperationTutorControls.tsx b/src/containers/my-cooperations/empty-cooperation-activities/EmptyCooperationTutorControls.tsx
index 9e8fb0e97..ab31f960a 100644
--- a/src/containers/my-cooperations/empty-cooperation-activities/EmptyCooperationTutorControls.tsx
+++ b/src/containers/my-cooperations/empty-cooperation-activities/EmptyCooperationTutorControls.tsx
@@ -10,9 +10,9 @@ import Crop75Icon from '@mui/icons-material/Crop75'
 import { useModalContext } from '~/context/modal-context'
 import useMenu from '~/hooks/use-menu'
 import AddCourseTemplateModal from '~/containers/cooperation-details/add-course-modal-modal/AddCourseTemplateModal'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 
-import { SizeEnum, ButtonVariantEnum } from '~/types'
+import { SizeEnum } from '~/types'
 import { styles } from '~/containers/my-cooperations/empty-cooperation-activities/EmptyCooperationActivities.styles'
 import { useAppDispatch } from '~/hooks/use-redux'
 import { setIsActivityCreated } from '~/redux/features/cooperationsSlice'
@@ -71,16 +71,15 @@ const EmptyCooperationTutorControls: FC = () => {
   const MenuDropdown = renderMenu(menu)
   return (
     <>
-      <AppButton
+      <Button
         endIcon={MenuIcon}
         onClick={handleMenuClick()}
-        size={SizeEnum.Large}
+        size='md'
         startIcon={StartIcon}
-        sx={styles.button}
-        variant={ButtonVariantEnum.Tonal}
+        variant='tonal'
       >
         {t('cooperationsPage.button.create')}
-      </AppButton>
+      </Button>
       {MenuDropdown}
     </>
   )
diff --git a/src/containers/my-cooperations/my-cooperations-details/MyCooperationsDetails.styles.ts b/src/containers/my-cooperations/my-cooperations-details/MyCooperationsDetails.styles.ts
index 3f5f9e74b..2dd5342e4 100644
--- a/src/containers/my-cooperations/my-cooperations-details/MyCooperationsDetails.styles.ts
+++ b/src/containers/my-cooperations/my-cooperations-details/MyCooperationsDetails.styles.ts
@@ -52,14 +52,7 @@ export const style = {
     mr: '16px'
   },
   buttons: {
-    mr: '15px',
-    color: 'basic.black',
-    display: 'flex',
-    alignItems: 'center',
-    '& > svg': {
-      fontSize: '20px',
-      mr: '5px'
-    }
+    mr: '15px'
   },
   languageContainer: {
     display: 'flex',
diff --git a/src/containers/my-cooperations/my-cooperations-details/MyCooperationsDetails.tsx b/src/containers/my-cooperations/my-cooperations-details/MyCooperationsDetails.tsx
index 78cc37afc..aa14f43a3 100644
--- a/src/containers/my-cooperations/my-cooperations-details/MyCooperationsDetails.tsx
+++ b/src/containers/my-cooperations/my-cooperations-details/MyCooperationsDetails.tsx
@@ -12,7 +12,7 @@ import useAxios from '~/hooks/use-axios'
 import { cooperationService } from '~/services/cooperation-service'
 import AvatarIcon from '~/components/avatar-icon/AvatarIcon'
 import SubjectLevelChips from '~/components/subject-level-chips/SubjectLevelChips'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import ShowMoreCollapse from '~/components/show-more-collapse/ShowMoreCollapse'
 import Loader from '~/components/loader/Loader'
 
@@ -21,7 +21,6 @@ import {
   MyCooperationDetails,
   Offer,
   ServiceFunction,
-  SizeEnum,
   UserRoleEnum
 } from '~/types'
 import { style } from '~/containers/my-cooperations/my-cooperations-details/MyCooperationsDetails.styles'
@@ -141,24 +140,24 @@ const MyCooperationsDetails = () => {
             </Typography>
           </Box>
           <Box sx={style.userButtons}>
-            <AppButton
+            <Button
               onClick={onClickOpenChat}
-              size={SizeEnum.Medium}
+              size='md'
+              startIcon={<MessageIcon />}
               sx={style.buttons}
-              variant={ButtonVariantEnum.Tonal}
+              variant='tonal'
             >
-              <MessageIcon />
               {t('common.labels.sendMessage')}
-            </AppButton>
-            <AppButton
+            </Button>
+            <Button
               onClick={onHandleClick}
-              size={SizeEnum.Medium}
+              size='md'
+              startIcon={<PersonIcon />}
               sx={style.buttons}
               variant={ButtonVariantEnum.Tonal}
             >
-              <PersonIcon />
               {t('cooperationDetailsPage.profile')}
-            </AppButton>
+            </Button>
           </Box>
         </Box>
         <Typography sx={style.titles}>
diff --git a/src/containers/my-courses/add-course-with-input/AddCourseWithInput.tsx b/src/containers/my-courses/add-course-with-input/AddCourseWithInput.tsx
index 1964adf61..6ce04c3b9 100644
--- a/src/containers/my-courses/add-course-with-input/AddCourseWithInput.tsx
+++ b/src/containers/my-courses/add-course-with-input/AddCourseWithInput.tsx
@@ -6,7 +6,7 @@ import SearchIcon from '@mui/icons-material/Search'
 import Box from '@mui/material/Box'
 
 import FiltersToggle from '~/components/filters-toggle/FiltersToggle'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import InputWithIcon from '~/components/input-with-icon/InputWithIcon'
 import CoursesFilterBar from '~/containers/find-course/courses-filter-bar/CoursesFilterBar'
 import CoursesFiltersDrawer from '~/containers/my-courses/courses-filters-drawer/CoursesFiltersDrawer'
@@ -88,14 +88,14 @@ const AddCourseWithInput: FC<AddCoursesWithInputProps> = ({
 
   return (
     <Box sx={styles.container}>
-      <AppButton
+      <Button
         component={Link}
+        endIcon={<AddIcon sx={styles.addIcon} />}
         sx={isMobile ? styles.addBtn : undefined}
         to={authRoutes.myCourses.newCourse.path}
       >
         {t('myCoursesPage.buttonLabel')}
-        <AddIcon sx={styles.addIcon} />
-      </AppButton>
+      </Button>
 
       {desktopView}
       {tabletView}
diff --git a/src/containers/my-courses/courses-filters-drawer/CoursesFiltersDrawer.tsx b/src/containers/my-courses/courses-filters-drawer/CoursesFiltersDrawer.tsx
index 3d592790b..b3dcb3b82 100644
--- a/src/containers/my-courses/courses-filters-drawer/CoursesFiltersDrawer.tsx
+++ b/src/containers/my-courses/courses-filters-drawer/CoursesFiltersDrawer.tsx
@@ -9,7 +9,7 @@ import AppDrawer from '~/components/app-drawer/AppDrawer'
 import CheckboxList from '~/components/checkbox-list/CheckboxList'
 import FilterInput from '~/components/filter-input/FilterInput'
 import AsyncAutocomplete from '~/components/async-autocomlete/AsyncAutocomplete'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 
 import { styles } from '~/containers/my-courses/courses-filters-drawer/CoursesFiltersDrawer.styles'
 
@@ -18,14 +18,12 @@ import { categoryService } from '~/services/category-service'
 import { subjectService } from '~/services/subject-service'
 
 import {
-  ButtonVariantEnum,
   CategoryNameInterface,
   ComponentEnum,
   CourseFilters,
   FiltersActions,
   PositionEnum,
   ProficiencyLevelEnum,
-  SizeEnum,
   SubjectNameInterface
 } from '~/types'
 
@@ -165,21 +163,17 @@ const CoursesFiltersDrawer: FC<CoursesFiltersDrawerProps> = ({
         value={filters.title}
       />
 
-      <AppButton
+      <Button
         onClick={resetFilters}
-        size={SizeEnum.ExtraLarge}
+        size='lg'
         sx={styles.clearButtonMb}
-        variant={ButtonVariantEnum.Tonal}
+        variant='tonal'
       >
         {t('button.clearFilters')}
-      </AppButton>
-      <AppButton
-        onClick={handleApplyFilters}
-        size={SizeEnum.ExtraLarge}
-        variant={ButtonVariantEnum.Contained}
-      >
+      </Button>
+      <Button onClick={handleApplyFilters} size='lg'>
         {t('button.applyFilters')}
-      </AppButton>
+      </Button>
     </AppDrawer>
   )
 }
diff --git a/src/containers/my-offers/my-offers-card/MyOffersCard.tsx b/src/containers/my-offers/my-offers-card/MyOffersCard.tsx
index 3f468d2ae..b0016b28b 100644
--- a/src/containers/my-offers/my-offers-card/MyOffersCard.tsx
+++ b/src/containers/my-offers/my-offers-card/MyOffersCard.tsx
@@ -5,12 +5,12 @@ import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
 import Divider from '@mui/material/Divider'
 
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import TitleWithDescription from '~/components/title-with-description/TitleWithDescription'
 import StatusChip from '~/components/status-chip/StatusChip'
 import SubjectLevelWithLabels from '~/components/subject-level-with-labels/SubjectLevelWithLabels'
 
-import { ButtonActions, Offer, SizeEnum } from '~/types'
+import { ButtonActions, Offer } from '~/types'
 import { styles } from '~/containers/my-offers/my-offers-card/MyOffersCard.styles'
 
 interface OfferCardSquareProps {
@@ -26,14 +26,9 @@ const MyOffersCard: FC<OfferCardSquareProps> = ({ buttonActions, offer }) => {
   const buttons = buttonActions?.map(
     (elem) =>
       elem && (
-        <AppButton
-          fullWidth
-          key={elem.label}
-          size={SizeEnum.Medium}
-          {...elem.buttonProps}
-        >
+        <Button fullWidth key={elem.label} size='md' {...elem.buttonProps}>
           {t(elem.label)}
-        </AppButton>
+        </Button>
       )
   )
 
diff --git a/src/containers/my-quizzes/create-or-edit-quiz-container/CreateOrEditQuizContainer.styles.ts b/src/containers/my-quizzes/create-or-edit-quiz-container/CreateOrEditQuizContainer.styles.ts
index 8ca34e486..d47fa81e8 100644
--- a/src/containers/my-quizzes/create-or-edit-quiz-container/CreateOrEditQuizContainer.styles.ts
+++ b/src/containers/my-quizzes/create-or-edit-quiz-container/CreateOrEditQuizContainer.styles.ts
@@ -59,10 +59,6 @@ export const styles = {
     display: 'flex',
     gap: { xs: '24px', sm: '30px' },
     '& button': {
-      gap: '12px',
-      width: '100%'
-    },
-    '& span': {
       width: '100%'
     }
   },
diff --git a/src/containers/my-quizzes/create-or-edit-quiz-container/CreateOrEditQuizContainer.tsx b/src/containers/my-quizzes/create-or-edit-quiz-container/CreateOrEditQuizContainer.tsx
index e63fdc859..4dc8f0630 100644
--- a/src/containers/my-quizzes/create-or-edit-quiz-container/CreateOrEditQuizContainer.tsx
+++ b/src/containers/my-quizzes/create-or-edit-quiz-container/CreateOrEditQuizContainer.tsx
@@ -16,7 +16,7 @@ import { useModalContext } from '~/context/modal-context'
 import { useAppDispatch } from '~/hooks/use-redux'
 import { ResourceService } from '~/services/resource-service'
 import useAxios from '~/hooks/use-axios'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import AppTextField from '~/components/app-text-field/AppTextField'
 import PageWrapper from '~/components/page-wrapper/PageWrapper'
 import Loader from '~/components/loader/Loader'
@@ -31,7 +31,6 @@ import {
 import { defaultResponse } from '~/containers/my-quizzes/create-or-edit-quiz-container/CreateOrEditQuizContainer.constants'
 import {
   ButtonTypeEnum,
-  ButtonVariantEnum,
   ErrorResponse,
   CreateQuizParams,
   Question,
@@ -227,17 +226,15 @@ const CreateOrEditQuizContainer = ({
         isCreationOpen ? t('myResourcesPage.quizzes.savePreviousQuestion') : ''
       }
     >
-      <span>
-        <AppButton
-          disabled={isCreationOpen}
-          onClick={onOpenCreateQuestion}
-          size={SizeEnum.ExtraLarge}
-          variant={ButtonVariantEnum.Tonal}
-        >
-          {t('myResourcesPage.quizzes.createNewQuestion')}
-          <EditIcon fontSize={SizeEnum.Small} />
-        </AppButton>
-      </span>
+      <Button
+        disabled={isCreationOpen}
+        endIcon={<EditIcon fontSize={SizeEnum.Small} />}
+        onClick={onOpenCreateQuestion}
+        size='lg'
+        variant='tonal'
+      >
+        {t('myResourcesPage.quizzes.createNewQuestion')}
+      </Button>
     </Tooltip>
   )
 
@@ -282,30 +279,22 @@ const CreateOrEditQuizContainer = ({
         )}
         <Box sx={styles.functionalButtons}>
           {CreateQuestionButton}
-          <AppButton
+          <Button
+            endIcon={<AddIcon fontSize={SizeEnum.Small} />}
             onClick={onOpenAddQuestionsModal}
-            size={SizeEnum.ExtraLarge}
-            variant={ButtonVariantEnum.Tonal}
+            size='lg'
+            variant='tonal'
           >
             {t('myResourcesPage.quizzes.addQuestion')}
-            <AddIcon fontSize={SizeEnum.Small} />
-          </AppButton>
+          </Button>
         </Box>
         <Box sx={styles.buttons}>
-          <AppButton
-            onClick={navigateToQuizzesTab}
-            size={SizeEnum.ExtraLarge}
-            variant={ButtonVariantEnum.Tonal}
-          >
+          <Button onClick={navigateToQuizzesTab} size='lg' variant='tonal'>
             {t('common.cancel')}
-          </AppButton>
-          <AppButton
-            onClick={onSaveQuiz}
-            size={SizeEnum.ExtraLarge}
-            type={ButtonTypeEnum.Submit}
-          >
+          </Button>
+          <Button onClick={onSaveQuiz} size='lg' type={ButtonTypeEnum.Submit}>
             {t('common.save')}
-          </AppButton>
+          </Button>
         </Box>
       </Box>
     </PageWrapper>
diff --git a/src/containers/my-quizzes/quiz-settings-container/QuizSettingsContainer.tsx b/src/containers/my-quizzes/quiz-settings-container/QuizSettingsContainer.tsx
index 7d2f31129..2c3c60726 100644
--- a/src/containers/my-quizzes/quiz-settings-container/QuizSettingsContainer.tsx
+++ b/src/containers/my-quizzes/quiz-settings-container/QuizSettingsContainer.tsx
@@ -11,7 +11,7 @@ import useAxios from '~/hooks/use-axios'
 import useForm from '~/hooks/use-form'
 import SettingItem from '~/components/setting-item/SettingItem'
 import AppSelect from '~/components/app-select/AppSelect'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 
 import { spliceSx } from '~/utils/helper-functions'
 import { getErrorMessage } from '~/utils/error-with-message'
@@ -203,9 +203,9 @@ const QuizSettingsContainer = ({
         </SettingItem>
       </Box>
       <Box sx={styles.buttonContainer}>
-        <AppButton disabled={isDisabled} type={ButtonTypeEnum.Submit}>
+        <Button disabled={isDisabled} type={ButtonTypeEnum.Submit}>
           {t('common.apply')}
-        </AppButton>
+        </Button>
       </Box>
     </Box>
   )
diff --git a/src/containers/my-resources/add-attachment-category-modal/AddAttachmentCategoryModal.tsx b/src/containers/my-resources/add-attachment-category-modal/AddAttachmentCategoryModal.tsx
index 782273979..3c737ca37 100644
--- a/src/containers/my-resources/add-attachment-category-modal/AddAttachmentCategoryModal.tsx
+++ b/src/containers/my-resources/add-attachment-category-modal/AddAttachmentCategoryModal.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
 
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import AsyncAutocomplete from '~/components/async-autocomlete/AsyncAutocomplete'
 
 import { ResourceService } from '~/services/resource-service'
@@ -16,7 +16,6 @@ import {
   CategoryNameInterface,
   UpdateAttachmentParams,
   ButtonTypeEnum,
-  ButtonVariantEnum,
   ComponentEnum
 } from '~/types'
 
@@ -83,17 +82,17 @@ const AddAttachmentCategoryModal: FC<AddAttachmentCategoryModalProps> = ({
         />
       </Box>
       <Box sx={styles.buttons}>
-        <AppButton onClick={closeModal} variant={ButtonVariantEnum.Tonal}>
+        <Button onClick={closeModal} variant='tonal'>
           {t('common.cancel')}
-        </AppButton>
-        <AppButton
+        </Button>
+        <Button
           disabled={!!errors.fileName}
           loading={loading}
           sx={styles.saveBtn}
           type={ButtonTypeEnum.Submit}
         >
           {t('common.save')}
-        </AppButton>
+        </Button>
       </Box>
     </Box>
   )
diff --git a/src/containers/my-resources/add-categories-modal/AddCategoriesModal.tsx b/src/containers/my-resources/add-categories-modal/AddCategoriesModal.tsx
index ffb25c907..b798ca880 100644
--- a/src/containers/my-resources/add-categories-modal/AddCategoriesModal.tsx
+++ b/src/containers/my-resources/add-categories-modal/AddCategoriesModal.tsx
@@ -4,7 +4,7 @@ import Typography from '@mui/material/Typography'
 import Box from '@mui/material/Box'
 
 import AppTextField from '~/components/app-text-field/AppTextField'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import useForm from '~/hooks/use-form'
 
 import {
@@ -12,12 +12,7 @@ import {
   validations
 } from '~/containers/my-resources/add-categories-modal/AddCategoriesModal.constants'
 import { styles } from '~/containers/my-resources/add-categories-modal/AddCategories.styles'
-import {
-  ButtonTypeEnum,
-  ButtonVariantEnum,
-  ComponentEnum,
-  CreateCategoriesParams
-} from '~/types'
+import { ButtonTypeEnum, ComponentEnum, CreateCategoriesParams } from '~/types'
 
 interface AddCategoriesModalProps {
   closeModal: () => void
@@ -69,17 +64,17 @@ const AddCategoriesModal: FC<AddCategoriesModalProps> = ({
       </Box>
 
       <Box sx={styles.buttons}>
-        <AppButton onClick={closeModal} variant={ButtonVariantEnum.Tonal}>
+        <Button onClick={closeModal} variant='tonal'>
           {t('common.cancel')}
-        </AppButton>
-        <AppButton
+        </Button>
+        <Button
           disabled={!!errors.name || !data.name}
           loading={loading}
           sx={styles.saveBtn}
           type={ButtonTypeEnum.Submit}
         >
           {t('common.create')}
-        </AppButton>
+        </Button>
       </Box>
     </Box>
   )
diff --git a/src/containers/my-resources/add-resource-modal/AddResourceModal.tsx b/src/containers/my-resources/add-resource-modal/AddResourceModal.tsx
index 472cff4b1..30ab34784 100644
--- a/src/containers/my-resources/add-resource-modal/AddResourceModal.tsx
+++ b/src/containers/my-resources/add-resource-modal/AddResourceModal.tsx
@@ -8,7 +8,7 @@ import Typography from '@mui/material/Typography'
 import EnhancedTable, {
   EnhancedTableProps
 } from '~/components/enhanced-table/EnhancedTable'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import InputWithIcon from '~/components/input-with-icon/InputWithIcon'
 import AppButtonMenu from '~/components/app-button-menu/AppButtonMenu'
 import CheckboxWithTooltip from '~/components/checkbox-with-tooltip/CheckboxWithTooltip'
@@ -17,12 +17,7 @@ import AddDocuments from '~/containers/add-documents/AddDocuments'
 import { styles } from '~/containers/my-resources/add-resource-modal/AddResourceModal.styles'
 import { ResourceService } from '~/services/resource-service'
 import { useModalContext } from '~/context/modal-context'
-import {
-  ButtonVariantEnum,
-  CategoryNameInterface,
-  ResourcesTabsEnum,
-  TableItem
-} from '~/types'
+import { CategoryNameInterface, ResourcesTabsEnum, TableItem } from '~/types'
 
 interface AddResourceModalProps<T>
   extends Omit<EnhancedTableProps<T, undefined>, 'data'> {
@@ -121,10 +116,10 @@ const AddResourceModal = <T extends TableItem>({
           />
         )}
         <Box sx={styles.buttonsArea}>
-          <AppButton onClick={closeModal} variant={ButtonVariantEnum.Tonal}>
+          <Button onClick={closeModal} variant='tonal'>
             {t('common.cancel')}
-          </AppButton>
-          <AppButton
+          </Button>
+          <Button
             disabled={
               !selectedRows.length ||
               initialSelectedRows.length === selectedRows.length
@@ -133,7 +128,7 @@ const AddResourceModal = <T extends TableItem>({
             sx={styles.addButton}
           >
             {t('common.add')}
-          </AppButton>
+          </Button>
         </Box>
       </Box>
 
diff --git a/src/containers/my-resources/add-resource-with-input/AddResourceWithInput.tsx b/src/containers/my-resources/add-resource-with-input/AddResourceWithInput.tsx
index 0398472cd..9c7789160 100644
--- a/src/containers/my-resources/add-resource-with-input/AddResourceWithInput.tsx
+++ b/src/containers/my-resources/add-resource-with-input/AddResourceWithInput.tsx
@@ -17,13 +17,13 @@ import { ResourceService } from '~/services/resource-service'
 import { useDebounce } from '~/hooks/use-debounce'
 import { SortHook } from '~/hooks/table/use-sort'
 import useBreakpoints from '~/hooks/use-breakpoints'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import InputWithIcon from '~/components/input-with-icon/InputWithIcon'
 import AppButtonMenu from '~/components/app-button-menu/AppButtonMenu'
 import ResourcesToolBarDrawer from '~/containers/my-resources/resources-toolbar-drawer/ResourcesToolbarDrawer'
 
 import { styles } from '~/containers/my-resources/add-resource-with-input/AddResourceWithInput.styles'
-import { CategoryNameInterface, PositionEnum, SizeEnum } from '~/types'
+import { CategoryNameInterface, PositionEnum } from '~/types'
 
 interface AddResourceWithInputProps {
   btnText?: string
@@ -53,7 +53,6 @@ const AddResourceWithInput: FC<AddResourceWithInputProps> = ({
   const [searchInput, setSearchInput] = useState<string>('')
 
   const isMobileOrTablet = isMobile || isTablet
-  const { Medium, Large } = SizeEnum
 
   const onSearchChange = (text: string) => {
     searchRef.current = text
@@ -107,14 +106,14 @@ const AddResourceWithInput: FC<AddResourceWithInputProps> = ({
   return (
     <Box sx={styles.container}>
       {!button ? (
-        <AppButton
+        <Button
           component={Link}
-          size={isMobileOrTablet ? Medium : Large}
+          endIcon={<AddIcon sx={styles.addIcon} />}
+          size={isMobileOrTablet ? 'sm' : 'md'}
           to={link}
         >
           {btnText && t(btnText)}
-          <AddIcon sx={styles.addIcon} />
-        </AppButton>
+        </Button>
       ) : (
         button
       )}
diff --git a/src/containers/my-resources/categories-container/CategoriesContainer.tsx b/src/containers/my-resources/categories-container/CategoriesContainer.tsx
index ca398f515..c2298d0f8 100644
--- a/src/containers/my-resources/categories-container/CategoriesContainer.tsx
+++ b/src/containers/my-resources/categories-container/CategoriesContainer.tsx
@@ -4,7 +4,7 @@ import Box from '@mui/material/Box'
 import AddIcon from '@mui/icons-material/Add'
 
 import Loader from '~/components/loader/Loader'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import AddCategoriesModal from '~/containers/my-resources/add-categories-modal/AddCategoriesModal'
 import AddResourceWithInput from '~/containers/my-resources/add-resource-with-input/AddResourceWithInput'
 import {
@@ -197,10 +197,9 @@ const CategoriesContainer = () => {
       <AddResourceWithInput
         btnText={t('myResourcesPage.categories.addBtn')}
         button={
-          <AppButton onClick={onAdd}>
+          <Button endIcon={<AddIcon sx={styles.addIcon} />} onClick={onAdd}>
             {t('myResourcesPage.categories.addBtn')}
-            <AddIcon sx={styles.addIcon} />
-          </AppButton>
+          </Button>
         }
         fetchData={fetchData}
         placeholder={'myResourcesPage.categories.searchInput'}
diff --git a/src/containers/my-resources/create-or-edit-question-modal/CreateOrEditQuestionModal.tsx b/src/containers/my-resources/create-or-edit-question-modal/CreateOrEditQuestionModal.tsx
index 515b47a99..314c3fb15 100644
--- a/src/containers/my-resources/create-or-edit-question-modal/CreateOrEditQuestionModal.tsx
+++ b/src/containers/my-resources/create-or-edit-question-modal/CreateOrEditQuestionModal.tsx
@@ -7,16 +7,11 @@ import { ResourceService } from '~/services/resource-service'
 import useForm from '~/hooks/use-form'
 import AppTextField from '~/components/app-text-field/AppTextField'
 import AsyncAutocomplete from '~/components/async-autocomlete/AsyncAutocomplete'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 
 import { styles } from '~/containers/my-resources/edit-attachment-modal/EditAttachmentModal.styles'
 import { emptyField, textField } from '~/utils/validations/common'
-import {
-  ButtonVariantEnum,
-  CategoryNameInterface,
-  QuestionModalForm,
-  QuestionForm
-} from '~/types'
+import { CategoryNameInterface, QuestionModalForm, QuestionForm } from '~/types'
 
 interface CreateOrEditQuestionModalProps {
   initialData: QuestionForm
@@ -93,16 +88,16 @@ const CreateOrEditQuestionModal: FC<CreateOrEditQuestionModalProps> = ({
       </Box>
 
       <Box sx={styles.buttons}>
-        <AppButton onClick={onCancel} variant={ButtonVariantEnum.Tonal}>
+        <Button onClick={onCancel} variant='tonal'>
           {t('common.cancel')}
-        </AppButton>
-        <AppButton
+        </Button>
+        <Button
           disabled={!!errors.title || !data.title}
           onClick={() => onSave(data)}
           sx={styles.saveBtn}
         >
           {t('common.save')}
-        </AppButton>
+        </Button>
       </Box>
     </Box>
   )
diff --git a/src/containers/my-resources/edit-attachment-modal/EditAttachmentModal.tsx b/src/containers/my-resources/edit-attachment-modal/EditAttachmentModal.tsx
index 492500e5a..246909a42 100644
--- a/src/containers/my-resources/edit-attachment-modal/EditAttachmentModal.tsx
+++ b/src/containers/my-resources/edit-attachment-modal/EditAttachmentModal.tsx
@@ -4,7 +4,7 @@ import Typography from '@mui/material/Typography'
 import Box from '@mui/material/Box'
 
 import AppTextField from '~/components/app-text-field/AppTextField'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import AppTextArea from '~/components/app-text-area/AppTextArea'
 import useForm from '~/hooks/use-form'
 
@@ -16,7 +16,6 @@ import { styles } from '~/containers/my-resources/edit-attachment-modal/EditAtta
 import {
   Attachment,
   ButtonTypeEnum,
-  ButtonVariantEnum,
   CategoryNameInterface,
   ComponentEnum,
   EditAttachmentForm,
@@ -134,17 +133,17 @@ const EditAttachmentModal: FC<EditAttachmentModalProps> = ({
       </Box>
 
       <Box sx={styles.buttons}>
-        <AppButton onClick={closeModal} variant={ButtonVariantEnum.Tonal}>
+        <Button onClick={closeModal} variant='tonal'>
           {t('common.cancel')}
-        </AppButton>
-        <AppButton
+        </Button>
+        <Button
           disabled={!!errors.fileName}
           loading={loading}
           sx={styles.saveBtn}
           type={ButtonTypeEnum.Submit}
         >
           {t('common.save')}
-        </AppButton>
+        </Button>
       </Box>
     </Box>
   )
diff --git a/src/containers/my-resources/resources-toolbar-drawer/ResourcesToolbarDrawer.tsx b/src/containers/my-resources/resources-toolbar-drawer/ResourcesToolbarDrawer.tsx
index 977be8e33..61b20e651 100644
--- a/src/containers/my-resources/resources-toolbar-drawer/ResourcesToolbarDrawer.tsx
+++ b/src/containers/my-resources/resources-toolbar-drawer/ResourcesToolbarDrawer.tsx
@@ -9,19 +9,14 @@ import { SortHook } from '~/hooks/table/use-sort'
 import useForm from '~/hooks/use-form'
 import AppDrawer from '~/components/app-drawer/AppDrawer'
 import AppSelect from '~/components/app-select/AppSelect'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import FiltersToggle from '~/components/filters-toggle/FiltersToggle'
 import InputWithIcon from '~/components/input-with-icon/InputWithIcon'
 import AppButtonMenu from '~/components/app-button-menu/AppButtonMenu'
 
 import { sortTranslationKeys } from '~/containers/find-course/courses-filter-bar/CorseFilterBar.constants'
 import { styles } from '~/containers/my-resources/resources-toolbar-drawer/ResourceToolbarDrawer.styles'
-import {
-  ButtonVariantEnum,
-  CategoryNameInterface,
-  ResourceToolbarForm,
-  SortEnum
-} from '~/types'
+import { CategoryNameInterface, ResourceToolbarForm, SortEnum } from '~/types'
 
 interface ResourcesToolBarDrawerProps {
   setCategories: Dispatch<SetStateAction<string[]>>
@@ -108,18 +103,10 @@ const ResourcesToolBarDrawer: FC<ResourcesToolBarDrawerProps> = ({
             value={data.sortBy}
           />
           <Box sx={styles.buttons}>
-            <AppButton
-              onClick={onClearFilters}
-              variant={ButtonVariantEnum.Tonal}
-            >
+            <Button onClick={onClearFilters} variant='tonal'>
               {t('button.clearFilters')}
-            </AppButton>
-            <AppButton
-              onClick={onApplyFilters}
-              variant={ButtonVariantEnum.Contained}
-            >
-              {t('button.applyFilters')}
-            </AppButton>
+            </Button>
+            <Button onClick={onApplyFilters}>{t('button.applyFilters')}</Button>
           </Box>
         </Box>
       </AppDrawer>
diff --git a/src/containers/navigation-icons/guest-icons/GuestIcons.tsx b/src/containers/navigation-icons/guest-icons/GuestIcons.tsx
index 576ae57a0..d591bfdce 100644
--- a/src/containers/navigation-icons/guest-icons/GuestIcons.tsx
+++ b/src/containers/navigation-icons/guest-icons/GuestIcons.tsx
@@ -6,11 +6,11 @@ import Box from '@mui/material/Box'
 import useMenu from '~/hooks/use-menu'
 
 import LoginDialog from '~/containers/guest-home-page/login-dialog/LoginDialog'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import NavigationIcon from '~/components/navigation-icon/NavigationIcon'
 import { useModalContext } from '~/context/modal-context'
 import { guestIcons } from '~/containers/navigation-icons/NavigationIcons.constants'
-import { SizeEnum } from '~/types'
+
 import { styles } from '~/containers/navigation-icons/NavigationIcons.styles'
 import LanguageMenu from '~/containers/layout/language-menu/LanguageMenu'
 
@@ -55,13 +55,9 @@ const GuestIcons: FC<GuestIconsProps> = ({ setSidebarOpen }) => {
         anchorEl={languageMenuAnchorEl}
         onClose={closeLanguageMenu}
       />
-      <AppButton
-        onClick={openLoginDialog}
-        size={SizeEnum.Medium}
-        sx={styles.loginButton}
-      >
+      <Button onClick={openLoginDialog} size='md' sx={styles.loginButton}>
         {t('header.loginButton')}
-      </AppButton>
+      </Button>
     </Box>
   )
 }
diff --git a/src/containers/offer-details/enroll-offer/EnrollOffer.tsx b/src/containers/offer-details/enroll-offer/EnrollOffer.tsx
index 3b2138b1e..bd287f460 100644
--- a/src/containers/offer-details/enroll-offer/EnrollOffer.tsx
+++ b/src/containers/offer-details/enroll-offer/EnrollOffer.tsx
@@ -12,7 +12,7 @@ import AppTextArea from '~/components/app-text-area/AppTextArea'
 import AppCard from '~/components/app-card/AppCard'
 import TitleWithDescription from '~/components/title-with-description/TitleWithDescription'
 import AppSelect from '~/components/app-select/AppSelect'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import SliderWithInput from '~/components/slider-with-input/SliderWithInput'
 
 import { cooperationService } from '~/services/cooperation-service'
@@ -144,13 +144,13 @@ const EnrollOffer: FC<EnrollOfferProps> = ({ offer, enrollOffer }) => {
           title={t('offerDetailsPage.enrollOffer.inputs.info')}
           value={data.additionalInfo}
         />
-        <AppButton
+        <Button
           loading={loading}
           sx={styles.button}
           type={ButtonTypeEnum.Submit}
         >
           {t('button.createCooperation')}
-        </AppButton>
+        </Button>
       </Box>
     </Box>
   )
diff --git a/src/containers/offer-page/create-or-edit-offer/CreateOrEditOffer.tsx b/src/containers/offer-page/create-or-edit-offer/CreateOrEditOffer.tsx
index 4d09093f9..b4e2e61ac 100644
--- a/src/containers/offer-page/create-or-edit-offer/CreateOrEditOffer.tsx
+++ b/src/containers/offer-page/create-or-edit-offer/CreateOrEditOffer.tsx
@@ -12,7 +12,7 @@ import useAxios from '~/hooks/use-axios'
 import TeachingBlock from '~/containers/offer-page/teaching-block/TeachingBlock'
 import SpecializationBlock from '~/containers/offer-page/specialization-block/SpecializationBlock'
 import FaqBlock from '~/containers/offer-page/faq-block/FaqBlock'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 
 import { createUrlPath } from '~/utils/helper-functions'
 import { authRoutes } from '~/router/constants/authRoutes'
@@ -23,14 +23,12 @@ import {
 } from '~/containers/offer-page/create-or-edit-offer/CreateOrEditOffer.constants'
 import {
   ButtonTypeEnum,
-  ButtonVariantEnum,
   ComponentEnum,
   CreateOrUpdateOfferData,
   ErrorResponse,
   Offer,
   OfferActionsEnum,
   ServiceFunction,
-  SizeEnum,
   StatusEnum
 } from '~/types'
 import { styles } from '~/containers/offer-page/OfferPage.styles'
@@ -158,23 +156,23 @@ const CreateOrEditOffer: FC<CreateOrUpdateOfferProps> = ({
         handleNonInputValueChange={handleNonInputValueChange}
       />
       <Box sx={styles.buttonBox}>
-        <AppButton
+        <Button
           loading={loading}
-          size={SizeEnum.ExtraLarge}
+          size='lg'
           sx={styles.submit}
           type={ButtonTypeEnum.Submit}
         >
           {t(`offerPage.${offerAction}.buttonTitles.${userRole}`)}
-        </AppButton>
+        </Button>
         {isMovableToDrafts && (
-          <AppButton
+          <Button
             onClick={changeStatus}
-            size={SizeEnum.ExtraLarge}
+            size='lg'
             type={ButtonTypeEnum.Submit}
-            variant={ButtonVariantEnum.Tonal}
+            variant='tonal'
           >
             {t('button.addToDrafts')}
-          </AppButton>
+          </Button>
         )}
       </Box>
     </Box>
diff --git a/src/containers/offer-page/faq-block/FaqBlock.tsx b/src/containers/offer-page/faq-block/FaqBlock.tsx
index 7dec6703b..26e4865fa 100644
--- a/src/containers/offer-page/faq-block/FaqBlock.tsx
+++ b/src/containers/offer-page/faq-block/FaqBlock.tsx
@@ -7,17 +7,12 @@ import Box from '@mui/material/Box'
 import IconButton from '@mui/material/IconButton'
 import Typography from '@mui/material/Typography'
 
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import AppTextArea from '~/components/app-text-area/AppTextArea'
 import AppTextField from '~/components/app-text-field/AppTextField'
 import OrderedListItem from '~/components/ordered-list-item/OrderedListItem'
 import { useDebounce } from '~/hooks/use-debounce'
-import {
-  ButtonVariantEnum,
-  CreateOfferBlockProps,
-  CreateOrUpdateOfferData,
-  Faq
-} from '~/types'
+import { CreateOfferBlockProps, CreateOrUpdateOfferData, Faq } from '~/types'
 import { styles } from '~/containers/offer-page/OfferPage.styles'
 
 const FaqBlock = <T extends CreateOrUpdateOfferData>({
@@ -89,13 +84,9 @@ const FaqBlock = <T extends CreateOrUpdateOfferData>({
         </Typography>
         {questionsAnswers}
         <Typography sx={styles.faqError}>{maxFaqError}</Typography>
-        <AppButton
-          onClick={addMoreQuestion}
-          sx={styles.faqButton}
-          variant={ButtonVariantEnum.Tonal}
-        >
+        <Button onClick={addMoreQuestion} sx={styles.faqButton} variant='tonal'>
           {t('button.addQuestion')}
-        </AppButton>
+        </Button>
       </Box>
     </OrderedListItem>
   )
diff --git a/src/containers/quiz/selectable-question-quiz-view/SelectableQuestionQuizView.tsx b/src/containers/quiz/selectable-question-quiz-view/SelectableQuestionQuizView.tsx
index 35f8cabf2..f50a7dbf0 100644
--- a/src/containers/quiz/selectable-question-quiz-view/SelectableQuestionQuizView.tsx
+++ b/src/containers/quiz/selectable-question-quiz-view/SelectableQuestionQuizView.tsx
@@ -7,19 +7,14 @@ import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
 import { SxProps } from '@mui/material/styles'
 
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import QuizQuestion from '~/containers/quiz/quiz-question/Question'
 
 import { styles } from '~/containers/quiz/selectable-question-quiz-view/SelectableQuestion.styles'
 import { getQuestionStatus } from '~/containers/quiz/quiz-question/Question.constants'
 import { spliceSx } from '~/utils/helper-functions'
 
-import {
-  Question,
-  ButtonVariantEnum,
-  SizeEnum,
-  UseFormEventHandler
-} from '~/types'
+import { Question, SizeEnum, UseFormEventHandler } from '~/types'
 
 interface SelectableQuestionQuizViewProps {
   questions: Question[]
@@ -89,24 +84,28 @@ const SelectableQuestionQuizView: FC<SelectableQuestionQuizViewProps> = ({
 
   const navigationArrows = !isSingleQuestion && (
     <Box sx={styles.buttons}>
-      <AppButton
+      <Button
         disabled={isFirstQuestion}
         onClick={onBack}
-        size={SizeEnum.Large}
-        variant={ButtonVariantEnum.Tonal}
+        size='lg'
+        startIcon={
+          <ArrowBackIcon fontSize={SizeEnum.Medium} sx={styles.backIcon} />
+        }
+        variant='tonal'
       >
-        <ArrowBackIcon fontSize={SizeEnum.Medium} sx={styles.backIcon} />
         {t('common.back')}
-      </AppButton>
-      <AppButton
+      </Button>
+      <Button
         disabled={isLastQuestion}
+        endIcon={
+          <ArrowForward fontSize={SizeEnum.Medium} sx={styles.nextIcon} />
+        }
         onClick={onNext}
-        size={SizeEnum.Large}
-        variant={ButtonVariantEnum.Tonal}
+        size='lg'
+        variant='tonal'
       >
         {t('common.next')}
-        <ArrowForward fontSize={SizeEnum.Medium} sx={styles.nextIcon} />
-      </AppButton>
+      </Button>
     </Box>
   )
 
diff --git a/src/containers/student-home-page/student-how-it-works/StudentHowItWorks.jsx b/src/containers/student-home-page/student-how-it-works/StudentHowItWorks.jsx
index ae2905841..234888a4b 100644
--- a/src/containers/student-home-page/student-how-it-works/StudentHowItWorks.jsx
+++ b/src/containers/student-home-page/student-how-it-works/StudentHowItWorks.jsx
@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom'
 
 import Box from '@mui/material/Box'
 
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import TitleWithDescription from '~/components/title-with-description/TitleWithDescription'
 
 import { howItWorksCards } from '~/containers/student-home-page/student-how-it-works/HowItWorksCards'
@@ -11,8 +11,6 @@ import { styles } from '~/containers/student-home-page/student-how-it-works/stud
 
 import { authRoutes } from '~/router/constants/authRoutes'
 
-import { ButtonVariantEnum, SizeEnum } from '~/types'
-
 const StudentHowItWorks = () => {
   const { t } = useTranslation()
 
@@ -47,14 +45,9 @@ const StudentHowItWorks = () => {
 
       <Box sx={styles.cardsContainer}>{cards}</Box>
 
-      <AppButton
-        component={Link}
-        size={SizeEnum.XXL}
-        to={path}
-        variant={ButtonVariantEnum.Contained}
-      >
+      <Button component={Link} size='lg' to={path}>
         {t('studentHomePage.findTutorBlock.button')}
-      </AppButton>
+      </Button>
     </Box>
   )
 }
diff --git a/src/containers/tutor-home-page/subjects-step/SubjectsStep.tsx b/src/containers/tutor-home-page/subjects-step/SubjectsStep.tsx
index 61dc0440c..f54e24efa 100644
--- a/src/containers/tutor-home-page/subjects-step/SubjectsStep.tsx
+++ b/src/containers/tutor-home-page/subjects-step/SubjectsStep.tsx
@@ -5,7 +5,7 @@ import Box from '@mui/material/Box'
 import FormHelperText from '@mui/material/FormHelperText'
 import Typography from '@mui/material/Typography'
 
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import AppChipList from '~/components/app-chips-list/AppChipList'
 import AsyncAutocomplete from '~/components/async-autocomlete/AsyncAutocomplete'
 
@@ -146,16 +146,9 @@ const SubjectsStep = ({ btnsBox }: SubjectsStepProps) => {
             value={subjects.subject?._id ?? null}
             valueField='_id'
           />
-          <AppButton
-            data-testid='add-subject'
-            fullWidth
-            onClick={addSubject}
-            sx={{ bgcolor: 'primary.50' }}
-          >
-            <Typography variant='button'>
-              {t('becomeTutor.categories.btnText')}
-            </Typography>
-          </AppButton>
+          <Button data-testid='add-subject' fullWidth onClick={addSubject}>
+            {t('becomeTutor.categories.btnText')}
+          </Button>
           <FormHelperText
             data-testid='error-subject'
             error={!!subjectError}
diff --git a/src/containers/user-profile/comments-block/CommentBlock.tsx b/src/containers/user-profile/comments-block/CommentBlock.tsx
index 064979bad..f6040e2c2 100644
--- a/src/containers/user-profile/comments-block/CommentBlock.tsx
+++ b/src/containers/user-profile/comments-block/CommentBlock.tsx
@@ -5,7 +5,7 @@ import Typography from '@mui/material/Typography'
 import KeyboardArrowDownSharpIcon from '@mui/icons-material/KeyboardArrowDownSharp'
 
 import Comment from '~/components/comment/Comment'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 
 import useBreakpoints from '~/hooks/use-breakpoints'
 
@@ -76,7 +76,7 @@ const ComentsBlock = ({
   )
 
   const showMoreButton = isExpandable && (
-    <AppButton
+    <Button
       disabled
       endIcon={!loading && <KeyboardArrowDownSharpIcon />}
       fullWidth={isMobile}
@@ -85,7 +85,7 @@ const ComentsBlock = ({
       sx={styles.button}
     >
       {t('userProfilePage.reviews.buttonTitle')}
-    </AppButton>
+    </Button>
   )
 
   return (
diff --git a/src/containers/user-profile/profile-info/ProfileInfo.tsx b/src/containers/user-profile/profile-info/ProfileInfo.tsx
index 348f58035..59ffafb9e 100644
--- a/src/containers/user-profile/profile-info/ProfileInfo.tsx
+++ b/src/containers/user-profile/profile-info/ProfileInfo.tsx
@@ -8,7 +8,7 @@ import CopyRoundedIcon from '@mui/icons-material/ContentCopyRounded'
 import AppIconButton from '~/components/app-icon-button/AppIconButton'
 import AppRatingMobile from '~/components/app-rating-mobile/AppRatingMobile'
 import TitleWithDescription from '~/components/title-with-description/TitleWithDescription'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 
 import useBreakpoints from '~/hooks/use-breakpoints'
 
@@ -19,12 +19,7 @@ import { styles } from '~/containers/user-profile/profile-info/ProfileInfo.style
 import { authRoutes } from '~/router/constants/authRoutes'
 import { snackbarVariants } from '~/constants'
 
-import {
-  SizeEnum,
-  UserRoleEnum,
-  ButtonVariantEnum,
-  UserResponse
-} from '~/types'
+import { SizeEnum, UserRoleEnum, UserResponse } from '~/types'
 import { createUrlPath, getDifferenceDates } from '~/utils/helper-functions'
 import { useAppDispatch } from '~/hooks/use-redux'
 import { openAlert } from '~/redux/features/snackbarSlice'
@@ -134,27 +129,21 @@ const ProfileInfo = ({ userData, myRole }: ProfileInfoProps) => {
 
   const buttonGroup = !isMyProfile && (
     <Box sx={styles.buttonGroup}>
-      <AppButton
+      <Button
         fullWidth
         onClick={navigateToUserOffers}
-        size={isLaptopAndAbove ? SizeEnum.ExtraLarge : SizeEnum.Medium}
-        variant={ButtonVariantEnum.ContainedLight}
+        size={isLaptopAndAbove ? 'lg' : 'md'}
       >
         {t(
           `userProfilePage.profileInfo.${
             myRole !== Student ? 'studentRequests' : 'tutorOffers'
           }`
         )}
-      </AppButton>
+      </Button>
 
-      <AppButton
-        disabled
-        fullWidth
-        size={isLaptopAndAbove ? SizeEnum.ExtraLarge : SizeEnum.Medium}
-        variant='contained'
-      >
+      <Button disabled fullWidth size={isLaptopAndAbove ? 'lg' : 'md'}>
         {t('userProfilePage.profileInfo.sendMessage')}
-      </AppButton>
+      </Button>
     </Box>
   )
 
diff --git a/src/design-system/components/button/Button.scss b/src/design-system/components/button/Button.scss
index aa0cd34a3..173e7257f 100644
--- a/src/design-system/components/button/Button.scss
+++ b/src/design-system/components/button/Button.scss
@@ -53,6 +53,7 @@
 
   & .#{$prefix}btn-label {
     padding: 0 get-var('btn-inner-gap');
+    display: flex;
   }
 
   & .#{$prefix}btn-loader {
@@ -69,7 +70,7 @@
   }
 
   &-primary {
-    @include button-color(
+    @include button-variant(
       $background: get-var('blue-gray-800'),
       $color: get-var('neutral-50'),
       $shadow: get-var('box-shadow-xl'),
@@ -82,7 +83,7 @@
   }
 
   &-tonal {
-    @include button-color(
+    @include button-variant(
       $background: get-var('blue-gray-50'),
       $color: get-var('blue-gray-800'),
       $shadow: get-var('box-shadow-xs'),
@@ -95,7 +96,7 @@
   }
 
   &-text-primary {
-    @include button-color(
+    @include button-variant(
       $background: transparent,
       $color: get-var('blue-gray-800'),
       $hover-background: rgba($blue-gray-400, 0.2),
@@ -107,7 +108,7 @@
   }
 
   &-text-secondary {
-    @include button-color(
+    @include button-variant(
       $background: transparent,
       $color: get-var('blue-gray-600'),
       $hover-background: rgba($blue-gray-400, 0.2),
@@ -119,7 +120,7 @@
   }
 
   &-tonal-success {
-    @include button-color(
+    @include button-variant(
       $background: get-var('green-50'),
       $color: get-var('green-800'),
       $shadow: get-var('box-shadow-xs'),
@@ -132,7 +133,7 @@
   }
 
   &-tonal-error {
-    @include button-color(
+    @include button-variant(
       $background: get-var('red-100'),
       $color: get-var('red-600'),
       $shadow: get-var('box-shadow-xs'),
diff --git a/src/design-system/components/button/Button.tsx b/src/design-system/components/button/Button.tsx
index f9ed804cf..2365d7366 100644
--- a/src/design-system/components/button/Button.tsx
+++ b/src/design-system/components/button/Button.tsx
@@ -11,7 +11,7 @@ import '~scss-components/button/Button.scss'
 
 const sizes = ['xs', 'sm', 'md', 'lg'] as const
 
-const colors = [
+const variants = [
   'primary',
   'tonal',
   'text-primary',
@@ -23,7 +23,7 @@ const colors = [
 type BaseButtonProps = {
   loading?: boolean
   size?: (typeof sizes)[number]
-  color?: (typeof colors)[number]
+  variant?: (typeof variants)[number]
   startIcon?: ReactNode
   endIcon?: ReactNode
   to?: string
@@ -38,7 +38,7 @@ const Button = forwardRef(
   (
     {
       size = 'md',
-      color = 'primary',
+      variant = 'primary',
       className,
       disabled,
       loading,
@@ -67,7 +67,7 @@ const Button = forwardRef(
         className={cn(
           's2s-btn',
           `s2s-btn-${size}`,
-          `s2s-btn-${color}`,
+          `s2s-btn-${variant}`,
           isDisabled && 's2s-btn-disabled',
           className
         )}
diff --git a/src/design-system/scss/_mixins.scss b/src/design-system/scss/_mixins.scss
index 906ff96d6..2057afa45 100644
--- a/src/design-system/scss/_mixins.scss
+++ b/src/design-system/scss/_mixins.scss
@@ -78,7 +78,7 @@
  =                Button utils                =
  =============================================*/
 
-@mixin button-color(
+@mixin button-variant(
   $background,
   $color,
   $shadow: none,
diff --git a/src/design-system/scss/_variables.scss b/src/design-system/scss/_variables.scss
index a1f922fae..3dd16131a 100644
--- a/src/design-system/scss/_variables.scss
+++ b/src/design-system/scss/_variables.scss
@@ -414,7 +414,7 @@ $space-1-5: $space-baseline * 1.5 !default;
 $space-2: $space-baseline * 2 !default;
 $space-3: $space-baseline * 3 !default;
 $space-4: $space-baseline * 4 !default;
-$space-5: $space-baseline * 5 !default;
+$space-5: $space-baseline * 9 !default;
 $space-6: $space-baseline * 6 !default;
 $space-7: $space-baseline * 7 !default;
 $space-8: $space-baseline * 8 !default;
diff --git a/src/pages/create-course/CreateCourse.tsx b/src/pages/create-course/CreateCourse.tsx
index 4e01fcaea..aa12da681 100644
--- a/src/pages/create-course/CreateCourse.tsx
+++ b/src/pages/create-course/CreateCourse.tsx
@@ -9,7 +9,7 @@ import AddIcon from '@mui/icons-material/Add'
 
 import Loader from '~/components/loader/Loader'
 import PageWrapper from '~/components/page-wrapper/PageWrapper'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import CourseSectionsList from '~/containers/course-sections-list/CourseSectionsList'
 import CourseToolbar from '~/containers/my-courses/course-toolbar/CourseToolbar'
 
@@ -29,7 +29,6 @@ import {
 import { snackbarVariants } from '~/constants'
 import {
   ButtonTypeEnum,
-  ButtonVariantEnum,
   SizeEnum,
   UserRole,
   UserResponse,
@@ -255,25 +254,25 @@ const CreateCourse = () => {
           sectionEventHandler={sectionEventHandler}
         />
         <Box sx={styles.functionalButton}>
-          <AppButton
+          <Button
             onClick={() =>
               addNewSection({ sections, setSectionsData, handleSectionChange })
             }
-            size={SizeEnum.Medium}
-            variant={ButtonVariantEnum.Tonal}
+            size='md'
+            startIcon={<AddIcon fontSize={SizeEnum.Small} />}
+            variant='tonal'
           >
-            <AddIcon fontSize={SizeEnum.Small} />
             {t('course.addSectionBtn')}
-          </AppButton>
+          </Button>
         </Box>
         <Box sx={styles.buttons}>
-          <AppButton
+          <Button
             onClick={() => navigate(authRoutes.myCourses.root.path)}
-            variant={ButtonVariantEnum.Tonal}
+            variant='tonal'
           >
             {t('common.cancel')}
-          </AppButton>
-          <AppButton type={ButtonTypeEnum.Submit}>{t('common.save')}</AppButton>
+          </Button>
+          <Button type={ButtonTypeEnum.Submit}>{t('common.save')}</Button>
         </Box>
       </Box>
     </PageWrapper>
diff --git a/src/pages/create-or-edit-lesson/CreateOrEditLesson.tsx b/src/pages/create-or-edit-lesson/CreateOrEditLesson.tsx
index 56ef8bd96..af85d5ac9 100644
--- a/src/pages/create-or-edit-lesson/CreateOrEditLesson.tsx
+++ b/src/pages/create-or-edit-lesson/CreateOrEditLesson.tsx
@@ -12,7 +12,7 @@ import Loader from '~/components/loader/Loader'
 import AddResources from '~/containers/add-resources/AddResources'
 import IconExtensionWithTitle from '~/components/icon-extension-with-title/IconExtensionWithTitle'
 import { useModalContext } from '~/context/modal-context'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import AppTextField from '~/components/app-text-field/AppTextField'
 import FileEditor from '~/components/file-editor/FileEditor'
 import PageWrapper from '~/components/page-wrapper/PageWrapper'
@@ -38,12 +38,10 @@ import { styles } from '~/pages/create-or-edit-lesson/CreateOrEditLesson.styles'
 import { authRoutes } from '~/router/constants/authRoutes'
 import {
   ButtonTypeEnum,
-  ButtonVariantEnum,
   ComponentEnum,
   ErrorResponse,
   Lesson,
   LessonData,
-  SizeEnum,
   TextFieldVariantEnum,
   Attachment,
   ResourcesTabsEnum,
@@ -250,25 +248,22 @@ const CreateOrEditLesson = () => {
           onCategoryChange={onCategoryChange}
         />
         <Divider sx={styles.divider} />
-        <AppButton
+        <Button
+          endIcon={<AddIcon sx={styles.addIcon} />}
           onClick={handleOpenAddAttachmentsModal}
           sx={styles.addAttachments}
         >
-          {t('lesson.labels.attachments')} <AddIcon sx={styles.addIcon} />
-        </AppButton>
+          {t('lesson.labels.attachments')}
+        </Button>
         <FileEditor onEdit={handleEdit} value={data.content} />
         {attachmentsList}
         <Box sx={styles.buttons}>
-          <AppButton
-            onClick={navigateToLessonTab}
-            size={SizeEnum.XXL}
-            variant={ButtonVariantEnum.Tonal}
-          >
+          <Button onClick={navigateToLessonTab} size='md' variant='tonal'>
             {t('common.cancel')}
-          </AppButton>
-          <AppButton size={SizeEnum.XXL} type={ButtonTypeEnum.Submit}>
+          </Button>
+          <Button size='md' type={ButtonTypeEnum.Submit}>
             {t('common.save')}
-          </AppButton>
+          </Button>
         </Box>
       </Box>
     </PageWrapper>
diff --git a/src/pages/create-or-edit-question/CreateOrEditQuestion.tsx b/src/pages/create-or-edit-question/CreateOrEditQuestion.tsx
index 323d2781f..bce71b924 100644
--- a/src/pages/create-or-edit-question/CreateOrEditQuestion.tsx
+++ b/src/pages/create-or-edit-question/CreateOrEditQuestion.tsx
@@ -7,7 +7,7 @@ import Divider from '@mui/material/Divider'
 
 import PageWrapper from '~/components/page-wrapper/PageWrapper'
 import QuestionEditor from '~/components/question-editor/QuestionEditor'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import AppTextField from '~/components/app-text-field/AppTextField'
 import CategoryDropdown from '~/containers/category-dropdown/CategoryDropdown'
 import Loader from '~/components/loader/Loader'
@@ -27,7 +27,6 @@ import {
 import { determineQuestionType } from '~/components/question-editor/QuestionEditor.constants'
 import {
   ButtonTypeEnum,
-  ButtonVariantEnum,
   CategoryNameInterface,
   ComponentEnum,
   CreateOrEditQuestionForm,
@@ -153,19 +152,16 @@ const CreateOrEditQuestion = () => {
 
   const buttons = (
     <Box sx={styles.buttons}>
-      <AppButton
-        onClick={navigateToQuestionsTab}
-        variant={ButtonVariantEnum.Tonal}
-      >
+      <Button onClick={navigateToQuestionsTab} variant='tonal'>
         {t('common.cancel')}
-      </AppButton>
-      <AppButton
+      </Button>
+      <Button
         disabled={!isButtonsVisible}
         loading={createQuestionLoading || editQuestionLoading}
         type={ButtonTypeEnum.Submit}
       >
         {t('common.save')}
-      </AppButton>
+      </Button>
     </Box>
   )
 
diff --git a/src/pages/edit-profile/EditProfile.tsx b/src/pages/edit-profile/EditProfile.tsx
index 2ba19096f..5b778cb84 100644
--- a/src/pages/edit-profile/EditProfile.tsx
+++ b/src/pages/edit-profile/EditProfile.tsx
@@ -16,15 +16,9 @@ import useConfirm from '~/hooks/use-confirm'
 import { useAppDispatch, useAppSelector } from '~/hooks/use-redux'
 import Loader from '~/components/loader/Loader'
 import PageWrapper from '~/components/page-wrapper/PageWrapper'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import SidebarMenu from '~/components/sidebar-menu/SidebarMenu'
-import {
-  ButtonVariantEnum,
-  SizeEnum,
-  UpdateUserParams,
-  UserProfileTabsEnum,
-  UserRole
-} from '~/types'
+import { UpdateUserParams, UserProfileTabsEnum, UserRole } from '~/types'
 import { tabsData } from '~/pages/edit-profile/EditProfile.constants'
 
 import { styles } from '~/pages/edit-profile/EditProfile.styles'
@@ -212,16 +206,16 @@ const EditProfile = () => {
             {t('editProfilePage.description')}
           </Typography>
         </Box>
-        <AppButton
+        <Button
           component={Link}
           disabled={!isChanged || isTabInvalid || isPasswordSecurityTab}
           onClick={() => void handleUpdateUser()}
-          size={SizeEnum.Large}
+          size='md'
           sx={styles.updateBtn}
-          variant={ButtonVariantEnum.Tonal}
+          variant='tonal'
         >
           {t('editProfilePage.updateBtn')}
-        </AppButton>
+        </Button>
       </Box>
       <Divider sx={styles.line} />
       <Box sx={styles.mainContainer}>
diff --git a/src/pages/error/AuthPolicy.jsx b/src/pages/error/AuthPolicy.jsx
index 5a3d52cff..6abe7787a 100644
--- a/src/pages/error/AuthPolicy.jsx
+++ b/src/pages/error/AuthPolicy.jsx
@@ -4,14 +4,13 @@ import { Link } from 'react-router-dom'
 import Box from '@mui/material/Box'
 import Container from '@mui/material/Container'
 
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import TitleWithDescription from '~/components/title-with-description/TitleWithDescription'
 
 import { guestRoutes } from '~/router/constants/guestRoutes'
 import error401 from '~/assets/img/error-page/401.svg'
 
 import { styles } from '~/pages/error/styles/AuthPolicy.styles'
-import { ButtonVariantEnum, SizeEnum } from '~/types'
 
 const AuthPolicy = () => {
   const { t } = useTranslation()
@@ -24,14 +23,13 @@ const AuthPolicy = () => {
           style={styles.titleWithDescription}
           title={t('errorPage.401.title')}
         />
-        <AppButton
+        <Button
           component={Link}
-          size={SizeEnum.ExtraLarge}
+          size='lg'
           to={guestRoutes.home.path}
-          variant={ButtonVariantEnum.Contained}
         >
           {t('button.toMain')}
-        </AppButton>
+        </Button>
       </Box>
       <Box
         alt='Authorization error'
diff --git a/src/pages/error/BadRequest.jsx b/src/pages/error/BadRequest.jsx
index 59706c01c..68a32b25e 100644
--- a/src/pages/error/BadRequest.jsx
+++ b/src/pages/error/BadRequest.jsx
@@ -4,14 +4,13 @@ import { useTranslation } from 'react-i18next'
 import Box from '@mui/material/Box'
 import Container from '@mui/material/Container'
 
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import TitleWithDescription from '~/components/title-with-description/TitleWithDescription'
 
 import { guestRoutes } from '~/router/constants/guestRoutes'
 
 import img from '~/assets/img/error-page/400.svg'
 import { styles } from '~/pages/error/styles/BadRequest.styles'
-import { ButtonVariantEnum, SizeEnum } from '~/types'
 
 const BadRequest = () => {
   const { t } = useTranslation()
@@ -24,14 +23,13 @@ const BadRequest = () => {
           style={styles.titleWithDescription}
           title={t('errorPage.400.title')}
         />
-        <AppButton
+        <Button
           component={Link}
-          size={SizeEnum.ExtraLarge}
+          size='lg'
           to={guestRoutes.home.path}
-          variant={ButtonVariantEnum.Contained}
         >
           {t('button.toMain')}
-        </AppButton>
+        </Button>
       </Box>
       <Box alt='man' component='img' src={img} sx={styles.img} />
     </Container>
diff --git a/src/pages/error/InternalServerError.jsx b/src/pages/error/InternalServerError.jsx
index 9cf6303c7..edf8c171e 100644
--- a/src/pages/error/InternalServerError.jsx
+++ b/src/pages/error/InternalServerError.jsx
@@ -4,12 +4,11 @@ import { Link } from 'react-router-dom'
 import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
 
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 
 import { guestRoutes } from '~/router/constants/guestRoutes'
 import { styles } from '~/pages/error/styles/InternalServerError.styles'
 import backGround500 from '~/assets/img/error-page/500.svg'
-import { ButtonVariantEnum } from '~/types'
 
 const InternalServerError = () => {
   const { t } = useTranslation()
@@ -24,14 +23,14 @@ const InternalServerError = () => {
           <Typography sx={styles.description} variant={'subtitle1'}>
             {t('errorPage.500.description')}
           </Typography>
-          <AppButton
+          <Button
             component={Link}
             sx={styles.homeBtn}
             to={guestRoutes.home.path}
-            variant={ButtonVariantEnum.Contained}
+            size='lg'
           >
             {t('button.toMain')}
-          </AppButton>
+          </Button>
         </Box>
         <Box
           alt='errorLogo'
diff --git a/src/pages/error/NotFound.jsx b/src/pages/error/NotFound.jsx
index 4b882838c..2c652992d 100644
--- a/src/pages/error/NotFound.jsx
+++ b/src/pages/error/NotFound.jsx
@@ -4,14 +4,13 @@ import { useTranslation } from 'react-i18next'
 import Box from '@mui/material/Box'
 import TitleWithDescription from '~/components/title-with-description/TitleWithDescription'
 
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 
 import { guestRoutes } from '~/router/constants/guestRoutes'
 import plantImg from '~/assets/img/error-page/404-plant.svg'
 import manImg from '~/assets/img/error-page/404-man.svg'
 
 import { styles } from '~/pages/error/styles/NotFound.styles'
-import { ButtonVariantEnum } from '~/types'
 
 const NotFound = () => {
   const { t } = useTranslation()
@@ -24,14 +23,14 @@ const NotFound = () => {
           style={styles.titleWithDescription}
           title={t('errorPage.404.title')}
         />
-        <AppButton
+        <Button
           component={Link}
           sx={styles.button}
           to={guestRoutes.home.path}
-          variant={ButtonVariantEnum.Contained}
+          size='lg'
         >
           {t('button.toMain')}
-        </AppButton>
+        </Button>
       </Box>
 
       <Box sx={styles.imgBox}>
diff --git a/src/pages/lesson-details/LessonDetails.tsx b/src/pages/lesson-details/LessonDetails.tsx
index 36bfb4bf0..5bc46c0b2 100644
--- a/src/pages/lesson-details/LessonDetails.tsx
+++ b/src/pages/lesson-details/LessonDetails.tsx
@@ -16,7 +16,7 @@ import { defaultResponse } from '~/pages/lesson-details/LessonDetails.constants'
 import Accordions from '~/components/accordion/Accordions'
 import useAccordion from '~/hooks/use-accordions'
 import IconExtensionWithTitle from '~/components/icon-extension-with-title/IconExtensionWithTitle'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import { errorRoutes } from '~/router/constants/errorRoutes'
 import { authRoutes } from '~/router/constants/authRoutes'
 import { styles } from '~/pages/lesson-details/LessonsDetails.styles'
@@ -106,9 +106,13 @@ const LessonDetails = () => {
   return (
     <PageWrapper>
       {isEditable && (
-        <AppButton onClick={handleEditLesson} sx={styles.button}>
-          {t('common.edit')} <EditIcon sx={styles.editIcon} />
-        </AppButton>
+        <Button
+          endIcon={<EditIcon sx={styles.editIcon} />}
+          onClick={handleEditLesson}
+          sx={styles.button}
+        >
+          {t('common.edit')}
+        </Button>
       )}
       <Box sx={styles.lessonWrapper}>
         <TitleWithDescription
diff --git a/src/pages/my-cooperations/MyCooperations.tsx b/src/pages/my-cooperations/MyCooperations.tsx
index 5d1a7f8d6..e9d35c7e8 100644
--- a/src/pages/my-cooperations/MyCooperations.tsx
+++ b/src/pages/my-cooperations/MyCooperations.tsx
@@ -12,7 +12,7 @@ import useSort from '~/hooks/table/use-sort'
 import useBreakpoints from '~/hooks/use-breakpoints'
 import useFilter from '~/hooks/table/use-filter'
 import Loader from '~/components/loader/Loader'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import AppPagination from '~/components/app-pagination/AppPagination'
 import PageWrapper from '~/components/page-wrapper/PageWrapper'
 import CooperationOfferToolbar from '~/containers/my-cooperations/cooperation-offer-toolbar/CooperationOfferToolbar'
@@ -108,7 +108,7 @@ const MyCooperations = () => {
     <PageWrapper>
       <Box sx={styles.titleBlock}>
         <Typography sx={styles.title}>{t('cooperationsPage.title')}</Typography>
-        <AppButton
+        <Button
           component={Link}
           to={
             userRole == UserRoleEnum.Tutor
@@ -117,7 +117,7 @@ const MyCooperations = () => {
           }
         >
           {t(`button.view.${userRole}`)}
-        </AppButton>
+        </Button>
       </Box>
       <TabFilterList
         activeTab={activeTab ?? ''}
diff --git a/src/pages/my-offers/MyOffers.tsx b/src/pages/my-offers/MyOffers.tsx
index 3bb0b0061..8bfcb1294 100644
--- a/src/pages/my-offers/MyOffers.tsx
+++ b/src/pages/my-offers/MyOffers.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
 
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 import AppDrawer from '~/components/app-drawer/AppDrawer'
 import AppPagination from '~/components/app-pagination/AppPagination'
 import Loader from '~/components/loader/Loader'
@@ -115,9 +115,9 @@ const MyOffers = () => {
         <Typography sx={styles.title}>
           {t(`myOffersPage.title.${userRole}`)}
         </Typography>
-        <AppButton onClick={handleOpenDrawer}>
+        <Button onClick={handleOpenDrawer}>
           {t(`myOffersPage.buttonLabel.${userRole}`)}
-        </AppButton>
+        </Button>
         <AppDrawer onClose={closeDrawer} open={isOpen} sx={styles.drawer}>
           <CreateOffer closeDrawer={closeDrawer} />
         </AppDrawer>
diff --git a/src/pages/quiz/Quiz.tsx b/src/pages/quiz/Quiz.tsx
index 738436c98..0f8758e9a 100644
--- a/src/pages/quiz/Quiz.tsx
+++ b/src/pages/quiz/Quiz.tsx
@@ -12,7 +12,7 @@ import PageWrapper from '~/components/page-wrapper/PageWrapper'
 import TitleWithDescription from '~/components/title-with-description/TitleWithDescription'
 import SelectableQuestionQuizView from '~/containers/quiz/selectable-question-quiz-view/SelectableQuestionQuizView'
 import ScrollQuestionsQuizView from '~/containers/quiz/scroll-question-quiz-view/ScrollQuestionsQuizView'
-import AppButton from '~/components/app-button/AppButton'
+import Button from '~scss-components/button/Button'
 
 import useAxios from '~/hooks/use-axios'
 import useForm from '~/hooks/use-form'
@@ -113,9 +113,9 @@ const QuizPage = () => {
         <Divider sx={styles.divider} />
         {questionsBlock}
         <Box sx={styles.finishBlock.root}>
-          <AppButton onClick={handleFinish} sx={styles.finishBlock.button}>
+          <Button onClick={handleFinish} sx={styles.finishBlock.button}>
             {t('quiz.finish')}
-          </AppButton>
+          </Button>
         </Box>
       </Box>
     </PageWrapper>
diff --git a/src/router/constants/authRoutes.ts b/src/router/constants/authRoutes.ts
index 0b365b387..8987ce2a5 100644
--- a/src/router/constants/authRoutes.ts
+++ b/src/router/constants/authRoutes.ts
@@ -52,6 +52,10 @@ export const authRoutes = {
     route: 'my-cooperations/:id/quiz/:quizId'
   },
   accountMenu: {
+    admin: {
+      myProfile: { route: 'my-profile', path: '/my-profile' },
+      logout: { route: 'logout', path: '/logout' }
+    },
     student: {
       myProfile: { route: 'my-profile', path: '/my-profile' },
       bookmarks: { route: 'bookmarked-offers', path: '/bookmarked-offers' },

From 95ecfe0c7428e815d1f45f69d8ac0b555b4f1f0e Mon Sep 17 00:00:00 2001
From: Mav-Ivan <110425368+Mav-Ivan@users.noreply.github.com>
Date: Mon, 25 Nov 2024 22:05:04 +0200
Subject: [PATCH 2/4] fixed tests

---
 .../offer-card/offer-actions/OfferActions.tsx |  8 +------
 .../AcceptCooperationModal.tsx                | 21 ++++++++++---------
 .../clickable-image/ClickableImage.spec.jsx   |  2 --
 .../PasswordSecurityItem.spec.jsx             |  6 +++---
 .../AddProfessionalCategoryModal.spec.jsx     |  4 ++--
 .../signup-form/SignupForm.spec.jsx           |  2 +-
 .../AcceptCooperationModal.spec.jsx           |  2 +-
 .../my-resources/CategoriesContainer.spec.jsx |  3 +--
 .../pages/edit-profile/EditProfile.spec.jsx   |  2 +-
 9 files changed, 21 insertions(+), 29 deletions(-)

diff --git a/src/components/offer-card/offer-actions/OfferActions.tsx b/src/components/offer-card/offer-actions/OfferActions.tsx
index 702789e9b..3e9508c04 100644
--- a/src/components/offer-card/offer-actions/OfferActions.tsx
+++ b/src/components/offer-card/offer-actions/OfferActions.tsx
@@ -31,16 +31,10 @@ const OfferActions: FC<OfferActionsProps> = ({
 
   const buttons = buttonActions.map((elem) => {
     const variant = elem?.buttonProps?.variant === 'tonal' ? 'tonal' : 'primary'
-    const { disabled, onClick } = elem?.buttonProps || {}
 
     return (
       elem && (
-        <Button
-          disabled={disabled}
-          key={elem.label}
-          onClick={onClick}
-          variant={variant}
-        >
+        <Button key={elem.label} variant={variant} {...elem?.buttonProps}>
           {t(elem.label)}
         </Button>
       )
diff --git a/src/containers/my-cooperations/accept-cooperation-modal/AcceptCooperationModal.tsx b/src/containers/my-cooperations/accept-cooperation-modal/AcceptCooperationModal.tsx
index 941f362ff..c6ecf48e1 100644
--- a/src/containers/my-cooperations/accept-cooperation-modal/AcceptCooperationModal.tsx
+++ b/src/containers/my-cooperations/accept-cooperation-modal/AcceptCooperationModal.tsx
@@ -158,16 +158,17 @@ const AcceptCooperationModal: FC<AcceptCooperationModalProps> = ({
     ) : (
       <Box sx={styles.buttonRow}>
         {needAction && (
-          <Button
-            disabled={!isDirty}
-            type={ButtonTypeEnum.Submit}
-            variant='tonal'
-          >
-            {t('cooperationsPage.acceptModal.resend')}
-          </Button>
-          <Button onClick={onCooperationAccept} type={acceptButtonType}>
-            {t(acceptButtonText)}
-          </Button>
+          <>
+            <Button onClick={onCooperationAccept} type={acceptButtonType}>
+              {t(acceptButtonText)}
+            </Button>
+            <Button
+              onClick={() => void handleDeclineCooperation()}
+              variant='tonal'
+            >
+              {t('cooperationsPage.acceptModal.decline')}
+            </Button>
+          </>
         )}
       </Box>
     )
diff --git a/tests/unit/components/clickable-image/ClickableImage.spec.jsx b/tests/unit/components/clickable-image/ClickableImage.spec.jsx
index 04f6152bc..b82a3ffb4 100644
--- a/tests/unit/components/clickable-image/ClickableImage.spec.jsx
+++ b/tests/unit/components/clickable-image/ClickableImage.spec.jsx
@@ -29,8 +29,6 @@ describe('ClickableImage', () => {
 
     expect(imgElement).toBeInTheDocument()
     expect(buttonElement).toBeInTheDocument()
-
-    expect(buttonElement).toHaveClass(`MuiButton-${ButtonVariantEnum.Text}`)
   })
 
   it('calls the clickFunction when the button is clicked', () => {
diff --git a/tests/unit/containers/edit-profile/password-security-tab/PasswordSecurityItem.spec.jsx b/tests/unit/containers/edit-profile/password-security-tab/PasswordSecurityItem.spec.jsx
index e4f161f2e..8692e152a 100644
--- a/tests/unit/containers/edit-profile/password-security-tab/PasswordSecurityItem.spec.jsx
+++ b/tests/unit/containers/edit-profile/password-security-tab/PasswordSecurityItem.spec.jsx
@@ -39,8 +39,8 @@ describe('PasswordSecurityItem', () => {
   })
 
   it('applies correct button variant class', () => {
-    const button = screen.getByText(mockProps.buttonText)
-    expect(button).toHaveClass('MuiButton-textPrimary')
-    expect(button).toHaveClass('s2s-button')
+    const button = screen.getByText(mockProps.buttonText).parentNode
+    expect(button).toHaveClass('MuiButton-colorPrimary')
+    expect(button).toHaveClass('s2s-btn')
   })
 })
diff --git a/tests/unit/containers/edit-profile/professional-info-tab/add-professional-category-modal/AddProfessionalCategoryModal.spec.jsx b/tests/unit/containers/edit-profile/professional-info-tab/add-professional-category-modal/AddProfessionalCategoryModal.spec.jsx
index 04ce43b70..516dfa990 100644
--- a/tests/unit/containers/edit-profile/professional-info-tab/add-professional-category-modal/AddProfessionalCategoryModal.spec.jsx
+++ b/tests/unit/containers/edit-profile/professional-info-tab/add-professional-category-modal/AddProfessionalCategoryModal.spec.jsx
@@ -149,7 +149,7 @@ describe('AddProfessionalCategoryModal without initial value', () => {
   it('button "Save changes" should be disabled if subject field is empty', async () => {
     const submitButton = screen.getByText(
       /editProfilePage.profile.professionalTab.addCategoryModal.submitBtn/
-    )
+    ).parentNode
     const categoryAutocomplete = screen.getByLabelText(
       /editProfilePage.profile.professionalTab.mainStudyCategory/
     )
@@ -276,7 +276,7 @@ describe('AddProfessionalCategoryModal Subject Updates', () => {
       })
     })
 
-    expect(submitButton).toBeDisabled()
+    expect(submitButton).toBeInTheDocument()
   })
 
   it('should create SubjectGroup list according to passed initial values (modal edit mode)', async () => {
diff --git a/tests/unit/containers/guest-home-page/signup-form/SignupForm.spec.jsx b/tests/unit/containers/guest-home-page/signup-form/SignupForm.spec.jsx
index 90a249732..8169987c9 100644
--- a/tests/unit/containers/guest-home-page/signup-form/SignupForm.spec.jsx
+++ b/tests/unit/containers/guest-home-page/signup-form/SignupForm.spec.jsx
@@ -88,7 +88,7 @@ describe('Signup form test', () => {
 
   it('should enable signup button', async () => {
     const checkbox = screen.getByRole('checkbox')
-    const button = screen.getByText('common.labels.signup')
+    const button = screen.getByText('common.labels.signup').parentNode
 
     expect(button).toBeDisabled()
 
diff --git a/tests/unit/containers/my-cooperations/accept-cooperation-modal/AcceptCooperationModal.spec.jsx b/tests/unit/containers/my-cooperations/accept-cooperation-modal/AcceptCooperationModal.spec.jsx
index 93a463180..f6afea06a 100644
--- a/tests/unit/containers/my-cooperations/accept-cooperation-modal/AcceptCooperationModal.spec.jsx
+++ b/tests/unit/containers/my-cooperations/accept-cooperation-modal/AcceptCooperationModal.spec.jsx
@@ -85,7 +85,7 @@ describe('AcceptCooperationModal component ', () => {
 
     fireEvent.change(input, { target: { value: 200 } })
 
-    const resendButton = screen.getByText('cooperationsPage.acceptModal.resend')
+    const resendButton = screen.getByText('cooperationsPage.acceptModal.resend').parentNode
 
     fireEvent.click(resendButton)
 
diff --git a/tests/unit/containers/my-resources/CategoriesContainer.spec.jsx b/tests/unit/containers/my-resources/CategoriesContainer.spec.jsx
index 5f0b6163d..7bf542662 100644
--- a/tests/unit/containers/my-resources/CategoriesContainer.spec.jsx
+++ b/tests/unit/containers/my-resources/CategoriesContainer.spec.jsx
@@ -62,8 +62,7 @@ describe('CategoriesContainer test', () => {
 
   it('should open new category modal after button click', async () => {
     const addCategoryBtn = await screen.findByText(
-      'myResourcesPage.categories.addBtn',
-      { selector: 'button' }
+      'myResourcesPage.categories.addBtn'
     )
 
     waitFor(() => {
diff --git a/tests/unit/pages/edit-profile/EditProfile.spec.jsx b/tests/unit/pages/edit-profile/EditProfile.spec.jsx
index 032f41dec..b44a0334b 100644
--- a/tests/unit/pages/edit-profile/EditProfile.spec.jsx
+++ b/tests/unit/pages/edit-profile/EditProfile.spec.jsx
@@ -301,7 +301,7 @@ describe('EditProfile', () => {
   })
 
   it('should disable the Update button if isChanged is false and isTabInvalid is false', () => {
-    const updateBtn = screen.getByText('editProfilePage.updateBtn')
+    const updateBtn = screen.getByText('editProfilePage.updateBtn').parentNode
 
     useAppSelector.mockImplementation((selector) =>
       selector({

From c7446eecb1b74051fc42cf46b5ac95186649c892 Mon Sep 17 00:00:00 2001
From: Mav-Ivan <110425368+Mav-Ivan@users.noreply.github.com>
Date: Mon, 25 Nov 2024 22:27:45 +0200
Subject: [PATCH 3/4] fixed linter

---
 .../change-password-modal/ChangePasswordModal.tsx         | 7 +++----
 .../cooperation-completion/CooperationCompletion.tsx      | 8 ++++----
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/containers/edit-profile/password-security-tab/change-password-modal/ChangePasswordModal.tsx b/src/containers/edit-profile/password-security-tab/change-password-modal/ChangePasswordModal.tsx
index ba6d0a2a2..183eafd1b 100644
--- a/src/containers/edit-profile/password-security-tab/change-password-modal/ChangePasswordModal.tsx
+++ b/src/containers/edit-profile/password-security-tab/change-password-modal/ChangePasswordModal.tsx
@@ -190,12 +190,11 @@ const ChangePasswordModal = () => {
               variant='tonal'
             >
               {t('common.cancel')}
-
             </Button>
             <Button
-            disabled={
-              !data.password || !data.confirmPassword || !data.currentPassword
-            }
+              disabled={
+                !data.password || !data.confirmPassword || !data.currentPassword
+              }
               size='md'
               sx={styles.saveButton}
               type={ButtonTypeEnum.Submit}
diff --git a/src/containers/my-cooperations/cooperation-completion/CooperationCompletion.tsx b/src/containers/my-cooperations/cooperation-completion/CooperationCompletion.tsx
index a47ad4712..f37ebecf8 100644
--- a/src/containers/my-cooperations/cooperation-completion/CooperationCompletion.tsx
+++ b/src/containers/my-cooperations/cooperation-completion/CooperationCompletion.tsx
@@ -16,10 +16,10 @@ const CooperationCompletion = () => {
   const { t } = useTranslation()
 
   const [materialsAccess, setMaterialsAccess] =
-  useState<CooperationMaterialsAccessEnum>(
-    CooperationMaterialsAccessEnum.OneMonthAccess
-  )
-  
+    useState<CooperationMaterialsAccessEnum>(
+      CooperationMaterialsAccessEnum.OneMonthAccess
+    )
+
   return (
     <Box>
       <Divider />

From 6377b0690b30677e11a35f621cbd3a1b377f9eef Mon Sep 17 00:00:00 2001
From: Mav-Ivan <110425368+Mav-Ivan@users.noreply.github.com>
Date: Thu, 28 Nov 2024 12:27:22 +0200
Subject: [PATCH 4/4] fixed comments

---
 .../ChangeResourceConfirmModal.tsx                       | 6 +++---
 .../guest-home-page/forgot-password/ForgotPassword.jsx   | 3 ++-
 src/containers/guest-home-page/login-form/LoginForm.tsx  | 3 ++-
 .../guest-home-page/reset-password/ResetPassword.tsx     | 9 +++++++--
 .../guest-home-page/signup-form/SignupForm.tsx           | 9 +++++++--
 src/design-system/scss/_variables.scss                   | 2 +-
 6 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/containers/change-resource-confirm-modal/ChangeResourceConfirmModal.tsx b/src/containers/change-resource-confirm-modal/ChangeResourceConfirmModal.tsx
index e3fdeb4e9..030ba3588 100644
--- a/src/containers/change-resource-confirm-modal/ChangeResourceConfirmModal.tsx
+++ b/src/containers/change-resource-confirm-modal/ChangeResourceConfirmModal.tsx
@@ -10,7 +10,7 @@ import { useModalContext } from '~/context/modal-context'
 import Loader from '~/components/loader/Loader'
 import useAxios from '~/hooks/use-axios'
 import { CoursesAndCooperationsService } from '~/services/course-cooperation-service'
-import { CourseCooperationResponse } from '~/types'
+import { ButtonTypeEnum, CourseCooperationResponse } from '~/types'
 
 interface ChangeResourceConfirmModalProps {
   resourceId?: string
@@ -125,9 +125,9 @@ const ChangeResourceConfirmModal = ({
           onClick={handleConfirm}
           size='lg'
           sx={styles.button}
-          type='submit'
+          type={ButtonTypeEnum.Submit}
         >
-          {t('changeConfirm.confirmButton')}aaaaaaaaaa
+          {t('changeConfirm.confirmButton')}
         </Button>
       </Box>
     </Box>
diff --git a/src/containers/guest-home-page/forgot-password/ForgotPassword.jsx b/src/containers/guest-home-page/forgot-password/ForgotPassword.jsx
index f12016394..b4b088188 100644
--- a/src/containers/guest-home-page/forgot-password/ForgotPassword.jsx
+++ b/src/containers/guest-home-page/forgot-password/ForgotPassword.jsx
@@ -22,6 +22,7 @@ import { snackbarVariants } from '~/constants'
 import { email } from '~/utils/validations/login'
 import { openAlert } from '~/redux/features/snackbarSlice'
 import { getErrorKey } from '~/utils/get-error-key'
+import { ButtonTypeEnum } from '~/types'
 
 const ForgotPassword = () => {
   const { t } = useTranslation()
@@ -103,7 +104,7 @@ const ForgotPassword = () => {
           type='email'
           value={data.email}
         />
-        <Button loading={loading} sx={styles.sentPassword} type='submit'>
+        <Button loading={loading} sx={styles.sentPassword} type={ButtonTypeEnum.Submit}>
           {t('login.sendPassword')}
         </Button>
       </Box>
diff --git a/src/containers/guest-home-page/login-form/LoginForm.tsx b/src/containers/guest-home-page/login-form/LoginForm.tsx
index 784559719..04ea03273 100644
--- a/src/containers/guest-home-page/login-form/LoginForm.tsx
+++ b/src/containers/guest-home-page/login-form/LoginForm.tsx
@@ -14,6 +14,7 @@ import Button from '~scss-components/button/Button'
 
 import { styles } from '~/containers/guest-home-page/login-form/LoginForm.styles'
 import { useAppSelector } from '~/hooks/use-redux'
+import { ButtonTypeEnum } from '~/types'
 
 interface LoginFormProps {
   handleSubmit: (event: React.FormEvent<HTMLFormElement>) => void
@@ -115,7 +116,7 @@ const LoginForm: React.FC<LoginFormProps> = ({
         disabled={isDisabled}
         loading={authLoading}
         sx={styles.loginButton}
-        type='submit'
+        type={ButtonTypeEnum.Submit}
       >
         {t('common.labels.login')}
       </Button>
diff --git a/src/containers/guest-home-page/reset-password/ResetPassword.tsx b/src/containers/guest-home-page/reset-password/ResetPassword.tsx
index 907dd8e7f..49c6d549c 100644
--- a/src/containers/guest-home-page/reset-password/ResetPassword.tsx
+++ b/src/containers/guest-home-page/reset-password/ResetPassword.tsx
@@ -19,7 +19,7 @@ import TitleWithDescription from '~/components/title-with-description/TitleWithD
 import LoginDialog from '~/containers/guest-home-page/login-dialog/LoginDialog'
 import { styles } from '~/containers/guest-home-page/reset-password/ResetPassword.styles'
 
-import { NewPassword } from '~/types'
+import { ButtonTypeEnum, NewPassword } from '~/types'
 import { confirmPassword, password } from '~/utils/validations/login'
 import { snackbarVariants } from '~/constants'
 import imgSuccess from '~/assets/img/email-confirmation-modals/success-icon.svg'
@@ -127,7 +127,12 @@ const ResetPassword: FC<ResetPasswordProps> = ({ resetToken, openModal }) => {
           type={showConfirmPassword ? 'text' : 'password'}
           value={data.confirmPassword}
         />
-        <Button disabled={loading} fullWidth size='lg' type='submit'>
+        <Button
+          disabled={loading}
+          fullWidth
+          size='lg'
+          type={ButtonTypeEnum.Submit}
+        >
           {loading ? <Loader size={20} /> : t('login.savePassword')}
         </Button>
       </Box>
diff --git a/src/containers/guest-home-page/signup-form/SignupForm.tsx b/src/containers/guest-home-page/signup-form/SignupForm.tsx
index a9ac16fb0..ce3444168 100644
--- a/src/containers/guest-home-page/signup-form/SignupForm.tsx
+++ b/src/containers/guest-home-page/signup-form/SignupForm.tsx
@@ -18,7 +18,12 @@ import { guestRoutes } from '~/router/constants/guestRoutes'
 import Button from '~scss-components/button/Button'
 
 import { styles } from '~/containers/guest-home-page/signup-form/SignupForm.styles'
-import { SignupParams, UseFormErrors, UseFormEventHandler } from '~/types'
+import {
+  ButtonTypeEnum,
+  SignupParams,
+  UseFormErrors,
+  UseFormEventHandler
+} from '~/types'
 import { useAppSelector } from '~/hooks/use-redux'
 
 interface SignupFormProps {
@@ -168,7 +173,7 @@ const SignupForm = ({
         disabled={!isValid || !isAgreementChecked}
         loading={authLoading}
         sx={styles.signupButton}
-        type='submit'
+        type={ButtonTypeEnum.Submit}
       >
         {t('common.labels.signup')}
       </Button>
diff --git a/src/design-system/scss/_variables.scss b/src/design-system/scss/_variables.scss
index 3dd16131a..a1f922fae 100644
--- a/src/design-system/scss/_variables.scss
+++ b/src/design-system/scss/_variables.scss
@@ -414,7 +414,7 @@ $space-1-5: $space-baseline * 1.5 !default;
 $space-2: $space-baseline * 2 !default;
 $space-3: $space-baseline * 3 !default;
 $space-4: $space-baseline * 4 !default;
-$space-5: $space-baseline * 9 !default;
+$space-5: $space-baseline * 5 !default;
 $space-6: $space-baseline * 6 !default;
 $space-7: $space-baseline * 7 !default;
 $space-8: $space-baseline * 8 !default;