diff --git a/frontends/nextjs/src/components/molecules/form/SearchBar.tsx b/frontends/nextjs/src/components/molecules/form/SearchBar.tsx
index f7a97ff9a..8466eb546 100644
--- a/frontends/nextjs/src/components/molecules/form/SearchBar.tsx
+++ b/frontends/nextjs/src/components/molecules/form/SearchBar.tsx
@@ -1,10 +1,12 @@
 'use client'
 
-import { Box, IconButton, InputAdornment, TextField } from '@mui/material'
 import { forwardRef, ReactNode } from 'react'
 
+import { Box, IconButton, TextField } from '@/fakemui'
 import { Clear, FilterList, Search } from '@/fakemui/icons'
 
+import styles from './SearchBar.module.scss'
+
 export interface SearchBarProps {
   value?: string
   onChange?: (value: string) => void
@@ -34,6 +36,7 @@ const SearchBar = forwardRef<HTMLInputElement, SearchBarProps>(
       disabled = false,
       loading = false,
       endAdornment,
+      className,
       ...props
     },
     ref
@@ -49,65 +52,42 @@ const SearchBar = forwardRef<HTMLInputElement, SearchBarProps>(
 
     return (
       <TextField
-        inputRef={ref}
+        ref={ref}
         value={value}
         onChange={handleChange}
         placeholder={placeholder}
         fullWidth={fullWidth}
         disabled={disabled}
-        size="small"
-        slotProps={{
-          input: {
-            startAdornment: (
-              <InputAdornment position="start">
-                <Search size={16} style={{ color: 'rgba(0,0,0,0.54)' }} />
-              </InputAdornment>
-            ),
-            endAdornment: (
-              <InputAdornment position="end">
-                <Box sx={{ display: 'flex', gap: 0.5 }}>
-                  {showClearButton && value && !disabled && (
-                    <IconButton
-                      aria-label="clear search"
-                      onClick={handleClear}
-                      edge="end"
-                      size="small"
-                      sx={{ p: 0.5 }}
-                    >
-                      <Clear size={16} />
-                    </IconButton>
-                  )}
-                  {showFilterButton && (
-                    <IconButton
-                      aria-label="open filters"
-                      onClick={onFilterClick}
-                      edge="end"
-                      size="small"
-                      disabled={disabled}
-                      sx={{ p: 0.5 }}
-                    >
-                      <FilterList size={16} />
-                    </IconButton>
-                  )}
-                  {endAdornment}
-                </Box>
-              </InputAdornment>
-            ),
-          },
-        }}
-        sx={{
-          '& .MuiOutlinedInput-root': {
-            borderRadius: 2,
-            bgcolor: 'background.paper',
-            transition: 'box-shadow 0.2s',
-            '&:hover': {
-              boxShadow: 1,
-            },
-            '&.Mui-focused': {
-              boxShadow: 2,
-            },
-          },
-        }}
+        className={`${styles.searchBar} ${className || ''}`}
+        startAdornment={
+          <Search size={16} className={styles.searchIcon} />
+        }
+        endAdornment={
+          <Box className={styles.endAdornments}>
+            {showClearButton && value && !disabled && (
+              <IconButton
+                aria-label="clear search"
+                onClick={handleClear}
+                sm
+                className={styles.clearButton}
+              >
+                <Clear size={16} />
+              </IconButton>
+            )}
+            {showFilterButton && (
+              <IconButton
+                aria-label="open filters"
+                onClick={onFilterClick}
+                disabled={disabled}
+                sm
+                className={styles.filterButton}
+              >
+                <FilterList size={16} />
+              </IconButton>
+            )}
+            {endAdornment}
+          </Box>
+        }
         {...props}
       />
     )
diff --git a/frontends/nextjs/src/components/molecules/form/Select.tsx b/frontends/nextjs/src/components/molecules/form/Select.tsx
index 433609468..d449366df 100644
--- a/frontends/nextjs/src/components/molecules/form/Select.tsx
+++ b/frontends/nextjs/src/components/molecules/form/Select.tsx
@@ -1,14 +1,8 @@
 'use client'
 
-import {
-  FormControl,
-  FormHelperText,
-  InputLabel,
-  Select as MuiSelect,
-  SelectProps as MuiSelectProps,
-} from '@mui/material'
-import { forwardRef, ReactNode } from 'react'
+import { forwardRef, ReactNode, SelectHTMLAttributes } from 'react'
 
+import { Box, FormControl, FormHelperText, FormLabel, Select as FakeMuiSelect } from '@/fakemui'
 import { KeyboardArrowDown } from '@/fakemui/icons'
 
 import { SelectContent } from './SelectContent'
@@ -20,12 +14,17 @@ import { SelectSeparator } from './SelectSeparator'
 import { SelectTrigger } from './SelectTrigger'
 import { SelectValue } from './SelectValue'
 
-export interface SelectProps extends Omit<MuiSelectProps<string>, 'onChange'> {
+import styles from './Select.module.scss'
+
+export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'onChange'> {
   onValueChange?: (value: string) => void
   helperText?: ReactNode
+  label?: ReactNode
+  error?: boolean
+  fullWidth?: boolean
 }
 
-const Select = forwardRef<HTMLDivElement, SelectProps>(
+const Select = forwardRef<HTMLSelectElement, SelectProps>(
   (
     {
       onValueChange,
@@ -35,27 +34,30 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(
       error,
       helperText,
       children,
-      sx,
-      variant = 'outlined',
+      className,
+      fullWidth = true,
       ...props
     },
     ref
   ) => {
     return (
-      <FormControl ref={ref} fullWidth error={error} sx={sx}>
-        {label && <InputLabel>{label}</InputLabel>}
-        <MuiSelect<string>
-          value={value}
-          defaultValue={defaultValue}
-          label={label}
-          variant={variant}
-          onChange={e => onValueChange?.(e.target.value as string)}
-          IconComponent={KeyboardArrowDownIcon}
-          {...props}
-        >
-          {children}
-        </MuiSelect>
-        {helperText && <FormHelperText>{helperText}</FormHelperText>}
+      <FormControl className={`${styles.selectWrapper} ${fullWidth ? styles.fullWidth : ''} ${className || ''}`}>
+        {label && <FormLabel>{label}</FormLabel>}
+        <Box className={styles.selectContainer}>
+          <FakeMuiSelect
+            ref={ref}
+            value={value as string}
+            defaultValue={defaultValue as string}
+            onChange={e => onValueChange?.(e.target.value)}
+            error={error}
+            className={styles.select}
+            {...props}
+          >
+            {children}
+          </FakeMuiSelect>
+          <KeyboardArrowDown size={16} className={styles.icon} />
+        </Box>
+        {helperText && <FormHelperText error={error}>{helperText}</FormHelperText>}
       </FormControl>
     )
   }