diff --git a/src/components/app-menu-button/AppMenuButton.styles.ts b/src/components/app-menu-button/AppMenuButton.styles.ts
index 6f2862eec..ab57d4d1d 100644
--- a/src/components/app-menu-button/AppMenuButton.styles.ts
+++ b/src/components/app-menu-button/AppMenuButton.styles.ts
@@ -6,10 +6,8 @@ export const styles = {
   input: {
     m: '0 auto',
     width: '100%',
-    borderRadius: '6px',
-    p: { xs: 0, sm: 0 },
-    border: `1px solid ${palette.primary[400]}`,
-    '& div': { pl: '10px' }
+    height: '40px',
+    p: { xs: 0, sm: 0 }
   },
   clearAll: {
     display: 'flex',
diff --git a/src/components/app-menu-button/AppMenuButton.tsx b/src/components/app-menu-button/AppMenuButton.tsx
index 4394d875a..f16afe473 100644
--- a/src/components/app-menu-button/AppMenuButton.tsx
+++ b/src/components/app-menu-button/AppMenuButton.tsx
@@ -4,7 +4,9 @@ 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 InputField from '~scss-components/input-field/InputField'
+import { InputFieldVariantEnum } from '~scss-components/input-field/InputField.constants'
 
 import { styles } from '~/components/app-menu-button/AppMenuButton.styles'
 import { ButtonVariantEnum } from '~/types'
@@ -37,12 +39,14 @@ const AppMenuButton: FC<AppMenuButtonProps> = ({
   return (
     <>
       <Box sx={styles.inputWrapper}>
-        <InputWithIcon
+        <InputField
           onChange={handleInputChange}
           onClear={handleInputReset}
           placeholder={t('common.search')}
+          search
           sx={styles.input}
           value={inputValue}
+          variant={InputFieldVariantEnum.Outlined}
         />
       </Box>
       <AppButton
diff --git a/src/components/find-block/FindBlock.tsx b/src/components/find-block/FindBlock.tsx
index f419678a8..0e2f6160a 100644
--- a/src/components/find-block/FindBlock.tsx
+++ b/src/components/find-block/FindBlock.tsx
@@ -2,12 +2,11 @@ import { ChangeEvent, KeyboardEvent, useCallback, useState } from 'react'
 import { useNavigate } from 'react-router'
 import { Link } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-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 InputField from '~scss-components/input-field/InputField'
 
 import bag from '~/assets/img/student-home/bag.png'
 import { authRoutes } from '~/router/constants/authRoutes'
@@ -45,13 +44,12 @@ const FindBlock = ({ translationKey }: FindBlockProps) => {
       style={styles.container}
       translationKey={translationKey}
     >
-      <InputWithIcon
-        fullWidth={isMobile}
+      <InputField
         onChange={onChange}
         onClear={onClear}
         onKeyDown={handleEnterPress}
         placeholder={t(`${translationKey}.label`)}
-        startIcon={<SearchIcon />}
+        search
         sx={styles.input}
         value={inputValue}
       />
diff --git a/src/components/find-block/find-block.styles.ts b/src/components/find-block/find-block.styles.ts
index 63f80de8b..482048f9c 100644
--- a/src/components/find-block/find-block.styles.ts
+++ b/src/components/find-block/find-block.styles.ts
@@ -14,14 +14,11 @@ export const styles = {
   },
 
   input: {
-    py: { xs: 0 },
     display: 'flex',
     flexGrow: '1',
-    gap: '8px',
     mr: { sm: 3, xs: 0 },
     mb: { sm: 0, xs: 2 },
     backgroundColor: 'basic.white',
-    borderRadius: '4px',
     maxHeight: '48px'
   }
 }
diff --git a/src/components/search-by-message/SearchByMessage.tsx b/src/components/search-by-message/SearchByMessage.tsx
index 14325e94e..96b4a1c99 100644
--- a/src/components/search-by-message/SearchByMessage.tsx
+++ b/src/components/search-by-message/SearchByMessage.tsx
@@ -2,8 +2,8 @@ import { useState, ChangeEvent, useEffect, FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import Box from '@mui/material/Box'
 
-import InputWithIcon from '~/components/input-with-icon/InputWithIcon'
 import IconsWithCounter from '~/components/icons-with-counter/IconsWithCounter'
+import InputField from '~scss-components/input-field/InputField'
 import { useDebounce } from '~/hooks/use-debounce'
 
 import { styles } from '~/components/search-by-message/SearchByMessage.styles'
@@ -61,11 +61,12 @@ const SearchByMessage: FC<SearchByMessageProps> = ({
         maxValue={findMessage.length}
         onFilteredIndexChange={onFilteredIndexChange}
       />
-      <InputWithIcon
+      <InputField
         inputProps={{ maxLength: 30 }}
         onChange={onChange}
         onClear={onClose}
         placeholder={`${t('common.search')}...`}
+        search
         sx={styles.input}
         value={search}
       />
diff --git a/src/components/search-filter-input/SearchFilterInput.tsx b/src/components/search-filter-input/SearchFilterInput.tsx
index 837b81b5f..8f850e38f 100644
--- a/src/components/search-filter-input/SearchFilterInput.tsx
+++ b/src/components/search-filter-input/SearchFilterInput.tsx
@@ -2,13 +2,13 @@ import { KeyboardEvent, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 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 InputWithIcon from '~/components/input-with-icon/InputWithIcon'
+import InputField from '~scss-components/input-field/InputField'
 
 import { ButtonVariantEnum } from '~/types'
+import { InputFieldVariantEnum } from '~scss-components/input-field/InputField.constants'
+
 import { styles } from '~/components/search-filter-input/SearchFilterInput.styles'
 
 interface SearchFilterInputProps {
@@ -53,16 +53,16 @@ const SearchFilterInput = ({
 
   return (
     <Box sx={styles.container}>
-      <InputWithIcon
+      <InputField
         onChange={onChange}
         onClear={onClear}
         onKeyDown={onKeyDown}
-        startIcon={<SearchIcon sx={styles.searchIcon} />}
+        placeholder={t(`${textFieldProps?.placeholder}`)}
+        search
         sx={styles.input}
         value={search}
-        {...textFieldProps}
+        variant={InputFieldVariantEnum.Small}
       />
-
       <AppButton
         onClick={onSearch}
         sx={styles.searchBtn}
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..972b6ffda 100644
--- a/src/containers/cooperation-details/add-course-modal-modal/AddCourseTemplateModal.tsx
+++ b/src/containers/cooperation-details/add-course-modal-modal/AddCourseTemplateModal.tsx
@@ -3,7 +3,6 @@ import { useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { SelectChangeEvent } from '@mui/material/Select'
 import SimpleBar from 'simplebar-react'
-import SearchIcon from '@mui/icons-material/Search'
 import Box from '@mui/material/Box'
 
 import { useAppDispatch, useAppSelector } from '~/hooks/use-redux'
@@ -15,7 +14,7 @@ import useSort from '~/hooks/table/use-sort'
 import Loader from '~/components/loader/Loader'
 import AppButton from '~/components/app-button/AppButton'
 import NotFoundResults from '~/components/not-found-results/NotFoundResults'
-import InputWithIcon from '~/components/input-with-icon/InputWithIcon'
+import InputField from '~scss-components/input-field/InputField'
 import TitleWithDescription from '~/components/title-with-description/TitleWithDescription'
 import CoursesFilterBar from '~/containers/find-course/courses-filter-bar/CoursesFilterBar'
 import MyCorsesCardsList from '~/containers/my-courses/my-courses-container/MyCorsesCardsList'
@@ -38,6 +37,8 @@ import {
   UserRole,
   UserResponse
 } from '~/types'
+import { InputFieldVariantEnum } from '~scss-components/input-field/InputField.constants'
+
 import { setIsActivityCreated } from '~/redux/features/cooperationsSlice'
 
 interface AddCourseTemplateModalProps {
@@ -178,13 +179,14 @@ const AddCourseTemplateModal: FC<AddCourseTemplateModalProps> = ({
 
       <Box sx={styles.toolbar}>
         <Box sx={styles.toolbarContainer}>
-          <InputWithIcon
-            endAdornment={<SearchIcon sx={styles.searchIcon} />}
+          <InputField
             onChange={onSearchChange}
             onClear={onSearchReset}
             placeholder={t('common.search')}
+            search
             sx={styles.searchInput}
             value={searchValue}
+            variant={InputFieldVariantEnum.Small}
           />
           <Box onClick={toggleFilters} sx={styles.filtersBtn}>
             <FiltersToggle />
diff --git a/src/containers/my-cooperations/cooperation-offer-toolbar/CooperationOfferToolbar.styles.ts b/src/containers/my-cooperations/cooperation-offer-toolbar/CooperationOfferToolbar.styles.ts
index 3111699a3..e3913ca85 100644
--- a/src/containers/my-cooperations/cooperation-offer-toolbar/CooperationOfferToolbar.styles.ts
+++ b/src/containers/my-cooperations/cooperation-offer-toolbar/CooperationOfferToolbar.styles.ts
@@ -9,10 +9,8 @@ export const styles = {
   searchIcon: { color: 'primary.700' },
   input: {
     flex: 1,
-    maxWidth: '580px',
-    border: '1px solid',
-    borderColor: 'primary.500',
-    borderRadius: '6px'
+    height: '48px',
+    maxWidth: '580px'
   },
   actionBlock: { display: 'flex', gap: '24px' },
   select: { flex: { xs: 1, sm: 0 } }
diff --git a/src/containers/my-cooperations/cooperation-offer-toolbar/CooperationOfferToolbar.tsx b/src/containers/my-cooperations/cooperation-offer-toolbar/CooperationOfferToolbar.tsx
index 16f334d60..146afdfcd 100644
--- a/src/containers/my-cooperations/cooperation-offer-toolbar/CooperationOfferToolbar.tsx
+++ b/src/containers/my-cooperations/cooperation-offer-toolbar/CooperationOfferToolbar.tsx
@@ -1,10 +1,10 @@
-import SearchIcon from '@mui/icons-material/Search'
 import Box from '@mui/material/Box'
 import { ChangeEvent, FC, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import AppSelect from '~/components/app-select/AppSelect'
-import InputWithIcon from '~/components/input-with-icon/InputWithIcon'
+import InputField from '~scss-components/input-field/InputField'
+
 import ViewSwitcher from '~/components/view-switcher/ViewSwitcher'
 import { FilterHook } from '~/hooks/table/use-filter'
 import { SortHook } from '~/hooks/table/use-sort'
@@ -18,6 +18,7 @@ import {
   MyCooperationsFilters,
   SelectFieldType
 } from '~/types'
+import { InputFieldVariantEnum } from '~scss-components/input-field/InputField.constants'
 
 interface CooperationOfferToolbarProps {
   filterOptions: FilterHook<MyCooperationsFilters>
@@ -66,13 +67,14 @@ const CooperationOfferToolbar: FC<CooperationOfferToolbarProps> = ({
 
   return (
     <Box sx={styles.root}>
-      <InputWithIcon
+      <InputField
         onChange={handleInputChange}
         onClear={handleInputReset}
         placeholder={t('cooperationsPage.search')}
-        startIcon={<SearchIcon sx={styles.searchIcon} />}
+        search
         sx={styles.input}
         value={inputValue}
+        variant={InputFieldVariantEnum.Outlined}
       />
       <Box sx={styles.actionBlock}>
         {!withoutSort && (
diff --git a/src/containers/my-courses/add-course-with-input/AddCourseWithInput.styles.ts b/src/containers/my-courses/add-course-with-input/AddCourseWithInput.styles.ts
index a7aefb25b..9facdefee 100644
--- a/src/containers/my-courses/add-course-with-input/AddCourseWithInput.styles.ts
+++ b/src/containers/my-courses/add-course-with-input/AddCourseWithInput.styles.ts
@@ -18,13 +18,9 @@ export const styles = {
   addIcon: { width: { xs: '18px', sm: '22px' }, ml: '5px' },
   searchIcon: { color: 'primary.700' },
   input: {
-    flex: 1,
     maxWidth: '285px',
     width: '100%',
-    height: '44px',
-    border: '1px solid',
-    borderColor: 'primary.200',
-    borderRadius: '4px'
+    height: '44px'
   },
   addBtn: {
     width: '100%',
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..b2a539fc8 100644
--- a/src/containers/my-courses/add-course-with-input/AddCourseWithInput.tsx
+++ b/src/containers/my-courses/add-course-with-input/AddCourseWithInput.tsx
@@ -2,12 +2,11 @@ import { FC, ChangeEvent } from 'react'
 import { Link } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import AddIcon from '@mui/icons-material/Add'
-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 InputWithIcon from '~/components/input-with-icon/InputWithIcon'
+import InputField from '~scss-components/input-field/InputField'
 import CoursesFilterBar from '~/containers/find-course/courses-filter-bar/CoursesFilterBar'
 import CoursesFiltersDrawer from '~/containers/my-courses/courses-filters-drawer/CoursesFiltersDrawer'
 
@@ -17,6 +16,7 @@ import { useDrawer } from '~/hooks/use-drawer'
 import useBreakpoints from '~/hooks/use-breakpoints'
 
 import { CourseFilters, FiltersActions } from '~/types'
+import { InputFieldVariantEnum } from '~scss-components/input-field/InputField.constants'
 import { styles } from '~/containers/my-courses/add-course-with-input/AddCourseWithInput.styles'
 
 interface AddCoursesWithInputProps {
@@ -63,13 +63,14 @@ const AddCourseWithInput: FC<AddCoursesWithInputProps> = ({
         handleToggle={handleToggle}
       />
       <CoursesFilterBar onValueChange={setSort} value={sort} />
-      <InputWithIcon
-        endAdornment={<SearchIcon sx={styles.searchIcon} />}
+      <InputField
         onChange={onChange}
         onClear={onClear}
         placeholder={t('common.search')}
+        search
         sx={styles.input}
         value={filters.title}
+        variant={InputFieldVariantEnum.Outlined}
       />
     </Box>
   )
diff --git a/src/containers/my-resources/add-resource-modal/AddResourceModal.styles.ts b/src/containers/my-resources/add-resource-modal/AddResourceModal.styles.ts
index 78b80ee69..9f4e4549b 100644
--- a/src/containers/my-resources/add-resource-modal/AddResourceModal.styles.ts
+++ b/src/containers/my-resources/add-resource-modal/AddResourceModal.styles.ts
@@ -20,8 +20,8 @@ export const styles = {
   inputWithFilter: { display: 'flex', gap: '16px' },
   searchIcon: { color: 'primary.700' },
   titleInput: {
+    height: '48px',
     maxWidth: '350px',
-    border: '1px solid',
     ...input
   },
   categoryInput: { maxWidth: '200px', ...input },
diff --git a/src/containers/my-resources/add-resource-modal/AddResourceModal.tsx b/src/containers/my-resources/add-resource-modal/AddResourceModal.tsx
index 472cff4b1..64305de74 100644
--- a/src/containers/my-resources/add-resource-modal/AddResourceModal.tsx
+++ b/src/containers/my-resources/add-resource-modal/AddResourceModal.tsx
@@ -1,7 +1,6 @@
 import { ChangeEvent, useState, useMemo, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import SearchIcon from '@mui/icons-material/Search'
 import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
 
@@ -9,7 +8,7 @@ import EnhancedTable, {
   EnhancedTableProps
 } from '~/components/enhanced-table/EnhancedTable'
 import AppButton from '~/components/app-button/AppButton'
-import InputWithIcon from '~/components/input-with-icon/InputWithIcon'
+import InputField from '~scss-components/input-field/InputField'
 import AppButtonMenu from '~/components/app-button-menu/AppButtonMenu'
 import CheckboxWithTooltip from '~/components/checkbox-with-tooltip/CheckboxWithTooltip'
 
@@ -23,6 +22,7 @@ import {
   ResourcesTabsEnum,
   TableItem
 } from '~/types'
+import { InputFieldVariantEnum } from '~scss-components/input-field/InputField.constants'
 
 interface AddResourceModalProps<T>
   extends Omit<EnhancedTableProps<T, undefined>, 'data'> {
@@ -78,13 +78,14 @@ const AddResourceModal = <T extends TableItem>({
       </Typography>
 
       <Box sx={styles.inputWithFilter}>
-        <InputWithIcon
-          endAdornment={<SearchIcon sx={styles.searchIcon} />}
+        <InputField
           onChange={handleInputChange}
           onClear={handleInputReset}
           placeholder={t('common.search')}
+          search
           sx={styles.titleInput}
           value={inputValue}
+          variant={InputFieldVariantEnum.Outlined}
         />
         <AppButtonMenu<CategoryNameInterface>
           selectedItems={selectedItems}
diff --git a/src/containers/my-resources/add-resource-with-input/AddResourceWithInput.styles.ts b/src/containers/my-resources/add-resource-with-input/AddResourceWithInput.styles.ts
index 73d8509f9..cf4573697 100644
--- a/src/containers/my-resources/add-resource-with-input/AddResourceWithInput.styles.ts
+++ b/src/containers/my-resources/add-resource-with-input/AddResourceWithInput.styles.ts
@@ -8,10 +8,8 @@ export const styles = {
   searchIcon: { color: 'primary.700' },
   input: {
     flex: 1,
+    height: '48px',
     maxWidth: '500px',
-    border: '1px solid',
-    borderColor: 'primary.500',
-    borderRadius: '6px',
     width: '285px'
   },
   filterWithInput: {
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..9f321315b 100644
--- a/src/containers/my-resources/add-resource-with-input/AddResourceWithInput.tsx
+++ b/src/containers/my-resources/add-resource-with-input/AddResourceWithInput.tsx
@@ -9,7 +9,6 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
-import SearchIcon from '@mui/icons-material/Search'
 import AddIcon from '@mui/icons-material/Add'
 import Box from '@mui/material/Box'
 
@@ -18,12 +17,14 @@ 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 InputWithIcon from '~/components/input-with-icon/InputWithIcon'
+import InputField from '~scss-components/input-field/InputField'
+
 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 { InputFieldVariantEnum } from '~scss-components/input-field/InputField.constants'
 
 interface AddResourceWithInputProps {
   btnText?: string
@@ -93,13 +94,14 @@ const AddResourceWithInput: FC<AddResourceWithInputProps> = ({
           valueField={'name'}
         />
       )}
-      <InputWithIcon
-        endAdornment={<SearchIcon sx={styles.searchIcon} />}
+      <InputField
         onChange={onChange}
         onClear={onClear}
         placeholder={t(placeholder)}
+        search
         sx={styles.input}
         value={searchInput}
+        variant={InputFieldVariantEnum.Outlined}
       />
     </>
   )
diff --git a/src/containers/my-resources/resources-toolbar-drawer/ResourceToolbarDrawer.styles.ts b/src/containers/my-resources/resources-toolbar-drawer/ResourceToolbarDrawer.styles.ts
index bc5220b9d..376248a98 100644
--- a/src/containers/my-resources/resources-toolbar-drawer/ResourceToolbarDrawer.styles.ts
+++ b/src/containers/my-resources/resources-toolbar-drawer/ResourceToolbarDrawer.styles.ts
@@ -35,11 +35,9 @@ export const styles = {
     }
   },
   input: {
-    flex: 1,
-    border: '1px solid',
-    borderColor: 'primary.200',
-    borderRadius: '4px',
-    '&:hover': { borderColor: 'primary.900' }
+    width: '100%',
+    height: '40px',
+    flex: 1
   },
   select: { flexDirection: 'column', rowGap: '3px', alignItems: 'left' },
   buttons: { display: 'flex', flexDirection: 'column', rowGap: '16px' }
diff --git a/src/containers/my-resources/resources-toolbar-drawer/ResourcesToolbarDrawer.tsx b/src/containers/my-resources/resources-toolbar-drawer/ResourcesToolbarDrawer.tsx
index 977be8e33..652200c37 100644
--- a/src/containers/my-resources/resources-toolbar-drawer/ResourcesToolbarDrawer.tsx
+++ b/src/containers/my-resources/resources-toolbar-drawer/ResourcesToolbarDrawer.tsx
@@ -1,7 +1,6 @@
 import { Dispatch, FC, SetStateAction } from 'react'
 import { useTranslation } from 'react-i18next'
 import Box from '@mui/material/Box'
-import SearchIcon from '@mui/icons-material/Search'
 
 import { ResourceService } from '~/services/resource-service'
 import { useDrawer } from '~/hooks/use-drawer'
@@ -11,7 +10,7 @@ import AppDrawer from '~/components/app-drawer/AppDrawer'
 import AppSelect from '~/components/app-select/AppSelect'
 import AppButton from '~/components/app-button/AppButton'
 import FiltersToggle from '~/components/filters-toggle/FiltersToggle'
-import InputWithIcon from '~/components/input-with-icon/InputWithIcon'
+import InputField from '~scss-components/input-field/InputField'
 import AppButtonMenu from '~/components/app-button-menu/AppButtonMenu'
 
 import { sortTranslationKeys } from '~/containers/find-course/courses-filter-bar/CorseFilterBar.constants'
@@ -22,6 +21,7 @@ import {
   ResourceToolbarForm,
   SortEnum
 } from '~/types'
+import { InputFieldVariantEnum } from '~scss-components/input-field/InputField.constants'
 
 interface ResourcesToolBarDrawerProps {
   setCategories: Dispatch<SetStateAction<string[]>>
@@ -92,13 +92,14 @@ const ResourcesToolBarDrawer: FC<ResourcesToolBarDrawerProps> = ({
             title={t('myResourcesPage.categories.category')}
             valueField={'name'}
           />
-          <InputWithIcon
-            endAdornment={<SearchIcon />}
+          <InputField
             onChange={handleInputChange('name')}
             onClear={() => resetData(['name'])}
             placeholder={t('common.search')}
+            search
             sx={styles.input}
             value={data.name}
+            variant={InputFieldVariantEnum.Outlined}
           />
           <AppSelect
             fields={sortTranslationKeys}
diff --git a/src/design-system/components/input-field/InputField.tsx b/src/design-system/components/input-field/InputField.tsx
index bc575d9cc..89b0c8279 100644
--- a/src/design-system/components/input-field/InputField.tsx
+++ b/src/design-system/components/input-field/InputField.tsx
@@ -66,7 +66,11 @@ const InputField: React.FC<InputFieldProps> = ({
           <ErrorOutlineIcon className='s2s-error-icon' />
         ) : (
           shouldShowClearIcon && (
-            <ClearIcon className='s2s-clear-icon' onClick={onClear} />
+            <ClearIcon
+              className='s2s-clear-icon'
+              data-testid='clearIcon'
+              onClick={onClear}
+            />
           )
         )}
       </div>
diff --git a/tests/unit/containers/my-courses/add-course-with-input/AddCourseWithInput.spec.jsx b/tests/unit/containers/my-courses/add-course-with-input/AddCourseWithInput.spec.jsx
index c2c40753b..2cc87125c 100644
--- a/tests/unit/containers/my-courses/add-course-with-input/AddCourseWithInput.spec.jsx
+++ b/tests/unit/containers/my-courses/add-course-with-input/AddCourseWithInput.spec.jsx
@@ -36,7 +36,7 @@ describe('AddCourseWithInput test', () => {
 
     expect(mockedFilterActions.updateFiltersInQuery).toHaveBeenCalled()
 
-    const clearButton = screen.getByTestId('ClearRoundedIcon')
+    const clearButton = screen.getByTestId('clearIcon')
 
     fireEvent.click(clearButton)