diff --git a/src/base/Accordion/Accordion.tsx b/src/base/Accordion/Accordion.tsx
index dfec4994b..054a8780e 100644
--- a/src/base/Accordion/Accordion.tsx
+++ b/src/base/Accordion/Accordion.tsx
@@ -1,7 +1,8 @@
 import { Accordion as MuiAccordion, type AccordionProps as MuiAccordionProps } from '@mui/material';
+import React from 'react';
 
-export function Accordion(props: MuiAccordionProps): JSX.Element {
-  return <MuiAccordion {...props} />;
-}
+const Accordion = React.forwardRef<HTMLDivElement, MuiAccordionProps>((props, ref) => {
+  return <MuiAccordion {...props} ref={ref} />;
+});
 
 export default Accordion;
diff --git a/src/base/AccordionActions/AccordionActions.tsx b/src/base/AccordionActions/AccordionActions.tsx
index e78e798ce..79433bb75 100644
--- a/src/base/AccordionActions/AccordionActions.tsx
+++ b/src/base/AccordionActions/AccordionActions.tsx
@@ -3,8 +3,12 @@ import {
   type AccordionActionsProps as MuiAccordionActionsProps
 } from '@mui/material';
 
-export function AccordionActions(props: MuiAccordionActionsProps): JSX.Element {
-  return <MuiAccordionActions {...props} />;
-}
+import React from 'react';
+
+const AccordionActions = React.forwardRef<HTMLDivElement, MuiAccordionActionsProps>(
+  (props, ref) => {
+    return <MuiAccordionActions {...props} ref={ref} />;
+  }
+);
 
 export default AccordionActions;
diff --git a/src/base/AccordionDetails/AccordionDetails.tsx b/src/base/AccordionDetails/AccordionDetails.tsx
index f806de586..7c263f5f5 100644
--- a/src/base/AccordionDetails/AccordionDetails.tsx
+++ b/src/base/AccordionDetails/AccordionDetails.tsx
@@ -3,8 +3,12 @@ import {
   type AccordionDetailsProps as MuiAccordionDetailsProps
 } from '@mui/material';
 
-export function AccordionDetails(props: MuiAccordionDetailsProps): JSX.Element {
-  return <MuiAccordionDetails {...props} />;
-}
+import React from 'react';
+
+const AccordionDetails = React.forwardRef<HTMLDivElement, MuiAccordionDetailsProps>(
+  (props, ref) => {
+    return <MuiAccordionDetails {...props} ref={ref} />;
+  }
+);
 
 export default AccordionDetails;
diff --git a/src/base/AccordionSummary/AccordionSummary.tsx b/src/base/AccordionSummary/AccordionSummary.tsx
index f1369ad46..009cf4918 100644
--- a/src/base/AccordionSummary/AccordionSummary.tsx
+++ b/src/base/AccordionSummary/AccordionSummary.tsx
@@ -2,9 +2,12 @@ import {
   AccordionSummary as MuiAccordionSummary,
   type AccordionSummaryProps as MuiAccordionSummaryProps
 } from '@mui/material';
+import React from 'react';
 
-export function AccordionSummary(props: MuiAccordionSummaryProps): JSX.Element {
-  return <MuiAccordionSummary {...props} />;
-}
+const AccordionSummary = React.forwardRef<HTMLDivElement, MuiAccordionSummaryProps>(
+  (props, ref) => {
+    return <MuiAccordionSummary {...props} ref={ref} />;
+  }
+);
 
 export default AccordionSummary;
diff --git a/src/base/AppBar/AppBar.tsx b/src/base/AppBar/AppBar.tsx
index 9b38a3566..90c495b81 100644
--- a/src/base/AppBar/AppBar.tsx
+++ b/src/base/AppBar/AppBar.tsx
@@ -1,7 +1,8 @@
 import { AppBar as MuiAppBar, type AppBarProps as MuiAppBarProps } from '@mui/material';
+import React from 'react';
 
-export function AppBar(props: MuiAppBarProps): JSX.Element {
-  return <MuiAppBar {...props} />;
-}
+const AppBar = React.forwardRef<HTMLDivElement, MuiAppBarProps>((props, ref) => {
+  return <MuiAppBar {...props} ref={ref} />;
+});
 
 export default AppBar;
diff --git a/src/base/Avatar/Avatar.tsx b/src/base/Avatar/Avatar.tsx
index 64308e4e4..8b5e22890 100644
--- a/src/base/Avatar/Avatar.tsx
+++ b/src/base/Avatar/Avatar.tsx
@@ -1,7 +1,8 @@
 import { Avatar as MuiAvatar, type AvatarProps as MuiAvatarProps } from '@mui/material';
+import React from 'react';
 
-export function Avatar(props: MuiAvatarProps): JSX.Element {
-  return <MuiAvatar {...props} />;
-}
+const Avatar = React.forwardRef<HTMLDivElement, MuiAvatarProps>((props, ref) => {
+  return <MuiAvatar {...props} ref={ref} />;
+});
 
 export default Avatar;
diff --git a/src/base/Avatar/index.tsx b/src/base/Avatar/index.tsx
index ebee76eac..8c68572f9 100644
--- a/src/base/Avatar/index.tsx
+++ b/src/base/Avatar/index.tsx
@@ -1,5 +1,5 @@
 import { AvatarProps } from '@mui/material';
-import { Avatar } from './Avatar';
+import Avatar from './Avatar';
 
 export { Avatar };
 export type { AvatarProps };
diff --git a/src/base/AvatarGroup/AvatarGroup.tsx b/src/base/AvatarGroup/AvatarGroup.tsx
index 9ffdee189..d7fb9b666 100644
--- a/src/base/AvatarGroup/AvatarGroup.tsx
+++ b/src/base/AvatarGroup/AvatarGroup.tsx
@@ -2,9 +2,10 @@ import {
   AvatarGroup as MuiAvatarGroup,
   type AvatarGroupProps as MuiAvatarGroupProps
 } from '@mui/material';
+import React from 'react';
 
-export function AvatarGroup(props: MuiAvatarGroupProps): JSX.Element {
-  return <MuiAvatarGroup {...props} />;
-}
+const AvatarGroup = React.forwardRef<HTMLDivElement, MuiAvatarGroupProps>((props, ref) => {
+  return <MuiAvatarGroup {...props} ref={ref} />;
+});
 
 export default AvatarGroup;
diff --git a/src/base/Backdrop/Backdrop.tsx b/src/base/Backdrop/Backdrop.tsx
index e4523868a..096f15aaf 100644
--- a/src/base/Backdrop/Backdrop.tsx
+++ b/src/base/Backdrop/Backdrop.tsx
@@ -1,7 +1,8 @@
 import { Backdrop as MuiBackdrop, type BackdropProps as MuiBackdropProps } from '@mui/material';
+import React from 'react';
 
-export function Backdrop(props: MuiBackdropProps): JSX.Element {
-  return <MuiBackdrop {...props} />;
-}
+const Backdrop = React.forwardRef<HTMLDivElement, MuiBackdropProps>((props, ref) => {
+  return <MuiBackdrop {...props} ref={ref} />;
+});
 
 export default Backdrop;
diff --git a/src/base/Badge/Badge.tsx b/src/base/Badge/Badge.tsx
index 735b4d61f..24ecc5527 100644
--- a/src/base/Badge/Badge.tsx
+++ b/src/base/Badge/Badge.tsx
@@ -1,7 +1,8 @@
 import { Badge as MuiBadge, type BadgeProps as MuiBadgeProps } from '@mui/material';
+import React from 'react';
 
-export function Badge(props: MuiBadgeProps): JSX.Element {
-  return <MuiBadge {...props} />;
-}
+const Badge = React.forwardRef<HTMLDivElement, MuiBadgeProps>((props, ref) => {
+  return <MuiBadge {...props} ref={ref} />;
+});
 
 export default Badge;
diff --git a/src/base/Box/Box.tsx b/src/base/Box/Box.tsx
index 848887046..a41ea187f 100644
--- a/src/base/Box/Box.tsx
+++ b/src/base/Box/Box.tsx
@@ -1,7 +1,8 @@
 import { Box as MuiBox, type BoxProps as MuiBoxProps } from '@mui/material';
+import React from 'react';
 
-export function Box(props: MuiBoxProps): JSX.Element {
-  return <MuiBox {...props} />;
-}
+const Box = React.forwardRef<HTMLDivElement, MuiBoxProps>((props, ref) => {
+  return <MuiBox {...props} ref={ref} />;
+});
 
 export default Box;
diff --git a/src/base/ButtonGroup/ButtonGroup.tsx b/src/base/ButtonGroup/ButtonGroup.tsx
index ee24c747d..ab0909cc2 100644
--- a/src/base/ButtonGroup/ButtonGroup.tsx
+++ b/src/base/ButtonGroup/ButtonGroup.tsx
@@ -2,9 +2,10 @@ import {
   ButtonGroup as MuiButtonGroup,
   type ButtonGroupProps as MuiButtonGroupProps
 } from '@mui/material';
+import React from 'react';
 
-export function ButtonGroup(props: MuiButtonGroupProps): JSX.Element {
-  return <MuiButtonGroup {...props} />;
-}
+const ButtonGroup = React.forwardRef<HTMLDivElement, MuiButtonGroupProps>((props, ref) => {
+  return <MuiButtonGroup {...props} ref={ref} />;
+});
 
 export default ButtonGroup;
diff --git a/src/base/Card/Card.tsx b/src/base/Card/Card.tsx
index db3e9b076..841812382 100644
--- a/src/base/Card/Card.tsx
+++ b/src/base/Card/Card.tsx
@@ -1,7 +1,8 @@
 import { Card as MuiCard, type CardProps as MuiCardProps } from '@mui/material';
+import React from 'react';
 
-export function Card(props: MuiCardProps): JSX.Element {
-  return <MuiCard {...props} />;
-}
+const Card = React.forwardRef<HTMLDivElement, MuiCardProps>((props, ref) => {
+  return <MuiCard {...props} ref={ref} />;
+});
 
 export default Card;
diff --git a/src/base/CardActions/CardActions.tsx b/src/base/CardActions/CardActions.tsx
index a36c30f83..b3a49a802 100644
--- a/src/base/CardActions/CardActions.tsx
+++ b/src/base/CardActions/CardActions.tsx
@@ -2,9 +2,10 @@ import {
   CardActions as MuiCardActions,
   CardActionsProps as MuiCardActionsProps
 } from '@mui/material';
+import React from 'react';
 
-export function CardActions(props: MuiCardActionsProps): JSX.Element {
-  return <MuiCardActions {...props} />;
-}
+const CardActions = React.forwardRef<HTMLDivElement, MuiCardActionsProps>((props, ref) => {
+  return <MuiCardActions {...props} ref={ref} />;
+});
 
 export default CardActions;
diff --git a/src/base/CardContent/CardContent.tsx b/src/base/CardContent/CardContent.tsx
index dc39e25a6..faf2111fe 100644
--- a/src/base/CardContent/CardContent.tsx
+++ b/src/base/CardContent/CardContent.tsx
@@ -2,9 +2,10 @@ import {
   CardContent as MuiCardContent,
   CardContentProps as MuiCardContentProps
 } from '@mui/material';
+import React from 'react';
 
-export function CardContent(props: MuiCardContentProps): JSX.Element {
-  return <MuiCardContent {...props} />;
-}
+const CardContent = React.forwardRef<HTMLDivElement, MuiCardContentProps>((props, ref) => {
+  return <MuiCardContent {...props} ref={ref} />;
+});
 
 export default CardContent;
diff --git a/src/base/CardHeader/CardHeader.tsx b/src/base/CardHeader/CardHeader.tsx
index f1e24f4bb..579c557f1 100644
--- a/src/base/CardHeader/CardHeader.tsx
+++ b/src/base/CardHeader/CardHeader.tsx
@@ -1,7 +1,8 @@
 import { CardHeader as MuiCardHeader, CardHeaderProps as MuiCardHeaderProps } from '@mui/material';
+import React from 'react';
 
-export function CardHeader(props: MuiCardHeaderProps): JSX.Element {
-  return <MuiCardHeader {...props} />;
-}
+const CardHeader = React.forwardRef<HTMLDivElement, MuiCardHeaderProps>((props, ref) => {
+  return <MuiCardHeader {...props} ref={ref} />;
+});
 
 export default CardHeader;
diff --git a/src/base/CardMedia/CardMedia.tsx b/src/base/CardMedia/CardMedia.tsx
index 922602d3a..3ad196d24 100644
--- a/src/base/CardMedia/CardMedia.tsx
+++ b/src/base/CardMedia/CardMedia.tsx
@@ -1,7 +1,8 @@
 import { CardMedia as MuiCardMedia, CardMediaProps as MuiCardMediaProps } from '@mui/material';
+import React from 'react';
 
-export function CardMedia(props: MuiCardMediaProps): JSX.Element {
-  return <MuiCardMedia {...props} />;
-}
+const CardMedia = React.forwardRef<HTMLDivElement, MuiCardMediaProps>((props, ref) => {
+  return <MuiCardMedia {...props} ref={ref} />;
+});
 
 export default CardMedia;
diff --git a/src/base/Checkbox/Checkbox.tsx b/src/base/Checkbox/Checkbox.tsx
index 02ed3d9aa..302a16dcb 100644
--- a/src/base/Checkbox/Checkbox.tsx
+++ b/src/base/Checkbox/Checkbox.tsx
@@ -1,7 +1,8 @@
 import { Checkbox as MuiCheckbox, type CheckboxProps } from '@mui/material';
+import React from 'react';
 
-export function Checkbox(props: CheckboxProps): JSX.Element {
-  return <MuiCheckbox {...props} />;
-}
+const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>((props, ref) => {
+  return <MuiCheckbox {...props} ref={ref} />;
+});
 
 export default Checkbox;
diff --git a/src/base/Chip/Chip.tsx b/src/base/Chip/Chip.tsx
index 2023a000a..249ee09f3 100644
--- a/src/base/Chip/Chip.tsx
+++ b/src/base/Chip/Chip.tsx
@@ -1,7 +1,8 @@
 import { Chip as MuiChip, type ChipProps } from '@mui/material';
+import React from 'react';
 
-export function Chip(props: ChipProps): JSX.Element {
-  return <MuiChip {...props} />;
-}
+const Chip = React.forwardRef<HTMLDivElement, ChipProps>((props, ref) => {
+  return <MuiChip {...props} ref={ref} />;
+});
 
 export default Chip;
diff --git a/src/base/CircularProgress/CircularProgress.tsx b/src/base/CircularProgress/CircularProgress.tsx
index 3c460201c..f6f2d99f6 100644
--- a/src/base/CircularProgress/CircularProgress.tsx
+++ b/src/base/CircularProgress/CircularProgress.tsx
@@ -2,9 +2,12 @@ import {
   CircularProgress as MuiCircularProgress,
   CircularProgressProps as MuiCircularProgressProps
 } from '@mui/material';
+import React from 'react';
 
-export function CircularProgress(props: MuiCircularProgressProps): JSX.Element {
-  return <MuiCircularProgress {...props} />;
-}
+const CircularProgress = React.forwardRef<HTMLDivElement, MuiCircularProgressProps>(
+  (props, ref) => {
+    return <MuiCircularProgress {...props} ref={ref} />;
+  }
+);
 
 export default CircularProgress;
diff --git a/src/base/ClickAwayListener/ClickAwayListener.tsx b/src/base/ClickAwayListener/ClickAwayListener.tsx
index b5db5295e..315794d2c 100644
--- a/src/base/ClickAwayListener/ClickAwayListener.tsx
+++ b/src/base/ClickAwayListener/ClickAwayListener.tsx
@@ -2,9 +2,10 @@ import {
   ClickAwayListener as MuiClickAwayListener,
   type ClickAwayListenerProps
 } from '@mui/material';
+import React from 'react';
 
-export function ClickAwayListener(props: ClickAwayListenerProps): JSX.Element {
-  return <MuiClickAwayListener {...props} />;
-}
+const ClickAwayListener = React.forwardRef<HTMLDivElement, ClickAwayListenerProps>((props, ref) => {
+  return <MuiClickAwayListener {...props} ref={ref} />;
+});
 
 export default ClickAwayListener;
diff --git a/src/base/Collapse/Collapse.tsx b/src/base/Collapse/Collapse.tsx
index 4279b06ae..cc6421ea0 100644
--- a/src/base/Collapse/Collapse.tsx
+++ b/src/base/Collapse/Collapse.tsx
@@ -1,5 +1,8 @@
 import { Collapse as MuiCollapse, CollapseProps as MuiCollapseProps } from '@mui/material';
+import React from 'react';
 
-export function Collapse(props: MuiCollapseProps): JSX.Element {
-  return <MuiCollapse {...props} />;
-}
+const Collapse = React.forwardRef<HTMLDivElement, MuiCollapseProps>((props, ref) => {
+  return <MuiCollapse {...props} ref={ref} />;
+});
+
+export { Collapse };
diff --git a/src/base/Container/Container.tsx b/src/base/Container/Container.tsx
index 4a290965b..ba9cbbe3a 100644
--- a/src/base/Container/Container.tsx
+++ b/src/base/Container/Container.tsx
@@ -1,7 +1,8 @@
 import { Container as MuiContainer, ContainerProps as MuiContainerProps } from '@mui/material';
+import React from 'react';
 
-export function Container(props: MuiContainerProps): JSX.Element {
-  return <MuiContainer {...props} />;
-}
+const Container = React.forwardRef<HTMLDivElement, MuiContainerProps>((props, ref) => {
+  return <MuiContainer {...props} ref={ref} />;
+});
 
 export default Container;
diff --git a/src/base/Dialog/Dialog.tsx b/src/base/Dialog/Dialog.tsx
index 170b5982f..7750e1baf 100644
--- a/src/base/Dialog/Dialog.tsx
+++ b/src/base/Dialog/Dialog.tsx
@@ -1,7 +1,8 @@
 import { Dialog as MuiDialog, type DialogProps as MuiDialogProps } from '@mui/material';
+import React from 'react';
 
-export function Dialog(props: MuiDialogProps): JSX.Element {
-  return <MuiDialog {...props} />;
-}
+const Dialog = React.forwardRef<HTMLDivElement, MuiDialogProps>((props, ref) => {
+  return <MuiDialog {...props} ref={ref} />;
+});
 
 export default Dialog;
diff --git a/src/base/DialogActions/DialogActions.tsx b/src/base/DialogActions/DialogActions.tsx
index 424e14797..08f6e5812 100644
--- a/src/base/DialogActions/DialogActions.tsx
+++ b/src/base/DialogActions/DialogActions.tsx
@@ -2,9 +2,10 @@ import {
   DialogActions as MuiDialogActions,
   type DialogActionsProps as MuiDialogActionsProps
 } from '@mui/material';
+import React from 'react';
 
-export function DialogActions(props: MuiDialogActionsProps): JSX.Element {
-  return <MuiDialogActions {...props} />;
-}
+const DialogActions = React.forwardRef<HTMLDivElement, MuiDialogActionsProps>((props, ref) => {
+  return <MuiDialogActions {...props} ref={ref} />;
+});
 
 export default DialogActions;
diff --git a/src/base/DialogContent/DialogContent.tsx b/src/base/DialogContent/DialogContent.tsx
index c82afed5e..7112613fe 100644
--- a/src/base/DialogContent/DialogContent.tsx
+++ b/src/base/DialogContent/DialogContent.tsx
@@ -2,9 +2,10 @@ import {
   DialogContent as MuiDialogContent,
   type DialogContentProps as MuiDialogContentProps
 } from '@mui/material';
+import React from 'react';
 
-export function DialogContent(props: MuiDialogContentProps): JSX.Element {
-  return <MuiDialogContent {...props} />;
-}
+const DialogContent = React.forwardRef<HTMLDivElement, MuiDialogContentProps>((props, ref) => {
+  return <MuiDialogContent {...props} ref={ref} />;
+});
 
 export default DialogContent;
diff --git a/src/base/DialogContentText/DialogContentText.tsx b/src/base/DialogContentText/DialogContentText.tsx
index 638c7617c..7b1a23aa8 100644
--- a/src/base/DialogContentText/DialogContentText.tsx
+++ b/src/base/DialogContentText/DialogContentText.tsx
@@ -2,9 +2,12 @@ import {
   DialogContentText as MuiDialogContentText,
   type DialogContentTextProps as MuiDialogContentTextProps
 } from '@mui/material';
+import React from 'react';
 
-export function DialogContentText(props: MuiDialogContentTextProps): JSX.Element {
-  return <MuiDialogContentText {...props} />;
-}
+const DialogContentText = React.forwardRef<HTMLDivElement, MuiDialogContentTextProps>(
+  (props, ref) => {
+    return <MuiDialogContentText {...props} ref={ref} />;
+  }
+);
 
 export default DialogContentText;
diff --git a/src/base/DialogTitle/DialogTitle.tsx b/src/base/DialogTitle/DialogTitle.tsx
index bec9f8ad7..2ea32a5df 100644
--- a/src/base/DialogTitle/DialogTitle.tsx
+++ b/src/base/DialogTitle/DialogTitle.tsx
@@ -2,9 +2,10 @@ import {
   DialogTitle as MuiDialogTitle,
   type DialogTitleProps as MuiDialogTitleProps
 } from '@mui/material';
+import React from 'react';
 
-export function DialogTitle(props: MuiDialogTitleProps): JSX.Element {
-  return <MuiDialogTitle {...props} />;
-}
+const DialogTitle = React.forwardRef<HTMLDivElement, MuiDialogTitleProps>((props, ref) => {
+  return <MuiDialogTitle {...props} ref={ref} />;
+});
 
 export default DialogTitle;
diff --git a/src/base/Drawer/Drawer.tsx b/src/base/Drawer/Drawer.tsx
index dd19345b5..bbad00531 100644
--- a/src/base/Drawer/Drawer.tsx
+++ b/src/base/Drawer/Drawer.tsx
@@ -1,7 +1,8 @@
 import { Drawer as MuiDrawer, type DrawerProps as MuiDrawerProps } from '@mui/material';
+import React from 'react';
 
-export function Drawer(props: MuiDrawerProps): JSX.Element {
-  return <MuiDrawer {...props} />;
-}
+const Drawer = React.forwardRef<HTMLDivElement, MuiDrawerProps>((props, ref) => {
+  return <MuiDrawer {...props} ref={ref} />;
+});
 
 export default Drawer;
diff --git a/src/base/FormControlLabel/FormControlLabel.tsx b/src/base/FormControlLabel/FormControlLabel.tsx
index b47f7892a..53087d6be 100644
--- a/src/base/FormControlLabel/FormControlLabel.tsx
+++ b/src/base/FormControlLabel/FormControlLabel.tsx
@@ -2,7 +2,12 @@ import {
   FormControlLabel as MuiFormControlLabel,
   FormControlLabelProps as MuiFormControlLabelProps
 } from '@mui/material';
+import React from 'react';
 
-export function FormControlLabel(props: MuiFormControlLabelProps): JSX.Element {
-  return <MuiFormControlLabel {...props} />;
-}
+const FormControlLabel = React.forwardRef<HTMLDivElement, MuiFormControlLabelProps>(
+  (props, ref) => {
+    return <MuiFormControlLabel {...props} ref={ref} />;
+  }
+);
+
+export { FormControlLabel };
diff --git a/src/base/FormGroup/FormGroup.tsx b/src/base/FormGroup/FormGroup.tsx
index 39d5855cf..169233db6 100644
--- a/src/base/FormGroup/FormGroup.tsx
+++ b/src/base/FormGroup/FormGroup.tsx
@@ -1,5 +1,8 @@
 import { FormGroup as MuiFormGroup, FormGroupProps as MuiFormGroupProps } from '@mui/material';
+import React from 'react';
 
-export function FormGroup(props: MuiFormGroupProps): JSX.Element {
-  return <MuiFormGroup {...props} />;
-}
+const FormGroup = React.forwardRef<HTMLDivElement, MuiFormGroupProps>((props, ref) => {
+  return <MuiFormGroup {...props} ref={ref} />;
+});
+
+export { FormGroup };
diff --git a/src/base/Grid/Grid.tsx b/src/base/Grid/Grid.tsx
index db7ddce91..6aa7bbac2 100644
--- a/src/base/Grid/Grid.tsx
+++ b/src/base/Grid/Grid.tsx
@@ -1,5 +1,8 @@
 import { Grid as MuiGrid, GridProps as MuiGridProps } from '@mui/material';
+import React from 'react';
 
-export function Grid(props: MuiGridProps): JSX.Element {
-  return <MuiGrid {...props} />;
-}
+const Grid = React.forwardRef<HTMLDivElement, MuiGridProps>((props, ref) => {
+  return <MuiGrid {...props} ref={ref} />;
+});
+
+export { Grid };
diff --git a/src/base/Grow/Grow.tsx b/src/base/Grow/Grow.tsx
index 558f294bc..204a70eaf 100644
--- a/src/base/Grow/Grow.tsx
+++ b/src/base/Grow/Grow.tsx
@@ -1,5 +1,8 @@
 import { Grow as MuiGrow, GrowProps as MuiGrowProps } from '@mui/material';
+import React from 'react';
 
-export function Grow(props: MuiGrowProps): JSX.Element {
-  return <MuiGrow {...props} />;
-}
+const Grow = React.forwardRef<HTMLDivElement, MuiGrowProps>((props, ref) => {
+  return <MuiGrow {...props} ref={ref} />;
+});
+
+export { Grow };
diff --git a/src/base/Input/input.tsx b/src/base/Input/input.tsx
index 393ae73cb..229870af0 100644
--- a/src/base/Input/input.tsx
+++ b/src/base/Input/input.tsx
@@ -1,5 +1,8 @@
 import { Input as MuiInput, type InputProps } from '@mui/material';
+import React from 'react';
 
-export function Input(props: InputProps): JSX.Element {
-  return <MuiInput {...props} />;
-}
+const Input = React.forwardRef<HTMLDivElement, InputProps>((props, ref) => {
+  return <MuiInput {...props} ref={ref} />;
+});
+
+export { Input };
diff --git a/src/base/Input/inputadornment.tsx b/src/base/Input/inputadornment.tsx
index 16d0d2875..1eafc49c3 100644
--- a/src/base/Input/inputadornment.tsx
+++ b/src/base/Input/inputadornment.tsx
@@ -1,5 +1,8 @@
 import { InputAdornment as MuiInputAdornment, type InputAdornmentProps } from '@mui/material';
+import React from 'react';
 
-export function InputAdornment(props: InputAdornmentProps): JSX.Element {
-  return <MuiInputAdornment {...props} />;
-}
+const InputAdornment = React.forwardRef<HTMLDivElement, InputAdornmentProps>((props, ref) => {
+  return <MuiInputAdornment {...props} ref={ref} />;
+});
+
+export { InputAdornment };
diff --git a/src/base/ListItem/ListItem.tsx b/src/base/ListItem/ListItem.tsx
index f324b40eb..bcb609aec 100644
--- a/src/base/ListItem/ListItem.tsx
+++ b/src/base/ListItem/ListItem.tsx
@@ -1,7 +1,8 @@
 import { ListItem as MuiListItem, ListItemProps as MuiListItemProps } from '@mui/material';
+import React from 'react';
 
-export function ListItem(props: MuiListItemProps): JSX.Element {
-  return <MuiListItem {...props} />;
-}
+const ListItem = React.forwardRef<HTMLLIElement, MuiListItemProps>((props, ref) => {
+  return <MuiListItem {...props} ref={ref} />;
+});
 
 export default ListItem;
diff --git a/src/base/ListItemAvatar/ListItemAvatar.tsx b/src/base/ListItemAvatar/ListItemAvatar.tsx
index b324798ec..70fac90fa 100644
--- a/src/base/ListItemAvatar/ListItemAvatar.tsx
+++ b/src/base/ListItemAvatar/ListItemAvatar.tsx
@@ -2,9 +2,10 @@ import {
   ListItemAvatar as MuiListItemAvatar,
   ListItemAvatarProps as MuiListItemAvatarProps
 } from '@mui/material';
+import React from 'react';
 
-export function ListItemAvatar(props: MuiListItemAvatarProps): JSX.Element {
-  return <MuiListItemAvatar {...props} />;
-}
+const ListItemAvatar = React.forwardRef<HTMLDivElement, MuiListItemAvatarProps>((props, ref) => {
+  return <MuiListItemAvatar {...props} ref={ref} />;
+});
 
 export default ListItemAvatar;
diff --git a/src/base/ListItemButton/ListItemButton.tsx b/src/base/ListItemButton/ListItemButton.tsx
index 83f9002bd..f19e4f3e9 100644
--- a/src/base/ListItemButton/ListItemButton.tsx
+++ b/src/base/ListItemButton/ListItemButton.tsx
@@ -2,9 +2,10 @@ import {
   ListItemButton as MuiListItemButton,
   ListItemButtonProps as MuiListItemButtonProps
 } from '@mui/material';
+import React from 'react';
 
-export function ListItemButton(props: MuiListItemButtonProps): JSX.Element {
-  return <MuiListItemButton {...props} />;
-}
+const ListItemButton = React.forwardRef<HTMLDivElement, MuiListItemButtonProps>((props, ref) => {
+  return <MuiListItemButton {...props} ref={ref} />;
+});
 
-export default ListItemButton;
+export { ListItemButton };
diff --git a/src/base/ListItemIcon/ListItemIcon.tsx b/src/base/ListItemIcon/ListItemIcon.tsx
index c2cb357d1..2b18ce56e 100644
--- a/src/base/ListItemIcon/ListItemIcon.tsx
+++ b/src/base/ListItemIcon/ListItemIcon.tsx
@@ -2,9 +2,10 @@ import {
   ListItemIcon as MuiListItemIcon,
   ListItemIconProps as MuiListItemIconProps
 } from '@mui/material';
+import React from 'react';
 
-export function ListItemIcon(props: MuiListItemIconProps): JSX.Element {
-  return <MuiListItemIcon {...props} />;
-}
+const ListItemIcon = React.forwardRef<HTMLDivElement, MuiListItemIconProps>((props, ref) => {
+  return <MuiListItemIcon {...props} ref={ref} />;
+});
 
-export default ListItemIcon;
+export { ListItemIcon };
diff --git a/src/base/ListItemSecondaryAction/ListItemSecondaryAction.tsx b/src/base/ListItemSecondaryAction/ListItemSecondaryAction.tsx
index bedcfb06f..c8473f168 100644
--- a/src/base/ListItemSecondaryAction/ListItemSecondaryAction.tsx
+++ b/src/base/ListItemSecondaryAction/ListItemSecondaryAction.tsx
@@ -2,9 +2,12 @@ import {
   ListItemSecondaryAction as MuiListItemSecondaryAction,
   ListItemSecondaryActionProps as MuiListItemSecondaryActionProps
 } from '@mui/material';
+import React from 'react';
 
-export function ListItemSecondaryAction(props: MuiListItemSecondaryActionProps): JSX.Element {
-  return <MuiListItemSecondaryAction {...props} />;
-}
+const ListItemSecondaryAction = React.forwardRef<HTMLDivElement, MuiListItemSecondaryActionProps>(
+  (props, ref) => {
+    return <MuiListItemSecondaryAction {...props} ref={ref} />;
+  }
+);
 
 export default ListItemSecondaryAction;
diff --git a/src/base/Menu/Menu.tsx b/src/base/Menu/Menu.tsx
index 24701fcdc..e844b4be0 100644
--- a/src/base/Menu/Menu.tsx
+++ b/src/base/Menu/Menu.tsx
@@ -1,7 +1,8 @@
 import { Menu as MuiMenu, MenuProps as MuiMenuProps } from '@mui/material';
+import React from 'react';
 
-export function Menu(props: MuiMenuProps): JSX.Element {
-  return <MuiMenu {...props} />;
-}
+const Menu = React.forwardRef<HTMLDivElement, MuiMenuProps>((props, ref) => {
+  return <MuiMenu {...props} ref={ref} />;
+});
 
 export default Menu;
diff --git a/src/base/OutlinedInput/OutlinedInput.tsx b/src/base/OutlinedInput/OutlinedInput.tsx
index a8edd7df3..4f2b00a3c 100644
--- a/src/base/OutlinedInput/OutlinedInput.tsx
+++ b/src/base/OutlinedInput/OutlinedInput.tsx
@@ -2,7 +2,10 @@ import {
   OutlinedInput as MuiOutlinedInput,
   OutlinedInputProps as MuiOutlinedInputProps
 } from '@mui/material';
+import React from 'react';
 
-export function OutlinedInput(props: MuiOutlinedInputProps): JSX.Element {
-  return <MuiOutlinedInput {...props} />;
-}
+const OutlinedInput = React.forwardRef<HTMLDivElement, MuiOutlinedInputProps>((props, ref) => {
+  return <MuiOutlinedInput {...props} ref={ref} />;
+});
+
+export { OutlinedInput };
diff --git a/src/base/Pagination/Pagination.tsx b/src/base/Pagination/Pagination.tsx
index f29298a54..728ad7fee 100644
--- a/src/base/Pagination/Pagination.tsx
+++ b/src/base/Pagination/Pagination.tsx
@@ -1,7 +1,8 @@
 import { Pagination as MuiPagination, PaginationProps as MuiPaginationProps } from '@mui/material';
+import React from 'react';
 
-export function Pagination(props: MuiPaginationProps): JSX.Element {
-  return <MuiPagination {...props} />;
-}
+const Pagination = React.forwardRef<HTMLDivElement, MuiPaginationProps>((props, ref) => {
+  return <MuiPagination {...props} ref={ref} />;
+});
 
 export default Pagination;
diff --git a/src/base/Paper/Paper.tsx b/src/base/Paper/Paper.tsx
index 58dedda54..9e3190f1a 100644
--- a/src/base/Paper/Paper.tsx
+++ b/src/base/Paper/Paper.tsx
@@ -1,7 +1,8 @@
 import { Paper as MuiPaper, type PaperProps as MuiPaperProps } from '@mui/material';
+import React from 'react';
 
-export function Paper(props: MuiPaperProps): JSX.Element {
-  return <MuiPaper {...props}>{props.children}</MuiPaper>;
-}
+const Paper = React.forwardRef<HTMLDivElement, MuiPaperProps>((props, ref) => {
+  return <MuiPaper {...props} ref={ref} />;
+});
 
 export default Paper;
diff --git a/src/base/Popper/Popper.tsx b/src/base/Popper/Popper.tsx
index 896a2f783..24ea015a3 100644
--- a/src/base/Popper/Popper.tsx
+++ b/src/base/Popper/Popper.tsx
@@ -1,7 +1,8 @@
 import { Popper as MuiPopper, type PopperProps as MuiPopperProps } from '@mui/material';
+import React from 'react';
 
-export function Popper(props: MuiPopperProps): JSX.Element {
-  return <MuiPopper {...props} />;
-}
+const Popper = React.forwardRef<HTMLDivElement, MuiPopperProps>((props, ref) => {
+  return <MuiPopper {...props} ref={ref} />;
+});
 
 export default Popper;
diff --git a/src/base/RadioGroup/RadioGroup.tsx b/src/base/RadioGroup/RadioGroup.tsx
index f5506d849..aea4e747f 100644
--- a/src/base/RadioGroup/RadioGroup.tsx
+++ b/src/base/RadioGroup/RadioGroup.tsx
@@ -2,9 +2,10 @@ import {
   RadioGroup as MuiRadioGroup,
   type RadioGroupProps as MuiRadioGroupProps
 } from '@mui/material';
+import React from 'react';
 
-export function RadioGroup(props: MuiRadioGroupProps): JSX.Element {
-  return <MuiRadioGroup {...props} />;
-}
+const RadioGroup = React.forwardRef<HTMLDivElement, MuiRadioGroupProps>((props, ref) => {
+  return <MuiRadioGroup {...props} ref={ref} />;
+});
 
 export default RadioGroup;
diff --git a/src/base/Select/Select.tsx b/src/base/Select/Select.tsx
index 74562025c..a21c5f4eb 100644
--- a/src/base/Select/Select.tsx
+++ b/src/base/Select/Select.tsx
@@ -1,7 +1,8 @@
 import { Select as MuiSelect, type SelectProps as MuiSelectProps } from '@mui/material';
+import React from 'react';
 
-export function Select(props: MuiSelectProps): JSX.Element {
-  return <MuiSelect {...props} />;
-}
+const Select = React.forwardRef<HTMLDivElement, MuiSelectProps>((props, ref) => {
+  return <MuiSelect {...props} ref={ref} />;
+});
 
 export default Select;
diff --git a/src/base/Skeleton/Skeleton.tsx b/src/base/Skeleton/Skeleton.tsx
index da7150074..045b1b0b1 100644
--- a/src/base/Skeleton/Skeleton.tsx
+++ b/src/base/Skeleton/Skeleton.tsx
@@ -1,7 +1,8 @@
 import { Skeleton as MuiSkeleton, type SkeletonProps as MuiSkeletonProps } from '@mui/material';
+import React from 'react';
 
-export function Skeleton(props: MuiSkeletonProps): JSX.Element {
-  return <MuiSkeleton {...props} />;
-}
+const Skeleton = React.forwardRef<HTMLDivElement, MuiSkeletonProps>((props, ref) => {
+  return <MuiSkeleton {...props} ref={ref} />;
+});
 
 export default Skeleton;
diff --git a/src/base/Slide/Slide.tsx b/src/base/Slide/Slide.tsx
index 3e3c2bf3a..273e6f3cd 100644
--- a/src/base/Slide/Slide.tsx
+++ b/src/base/Slide/Slide.tsx
@@ -1,7 +1,8 @@
 import { Slide as MuiSlide, type SlideProps as MuiSlideProps } from '@mui/material';
+import React from 'react';
 
-export function Slide(props: MuiSlideProps): JSX.Element {
-  return <MuiSlide {...props} />;
-}
+const Slide = React.forwardRef<HTMLDivElement, MuiSlideProps>((props, ref) => {
+  return <MuiSlide {...props} ref={ref} />;
+});
 
 export default Slide;
diff --git a/src/base/Stack/Stack.tsx b/src/base/Stack/Stack.tsx
index 79b6e0f4e..315c3671e 100644
--- a/src/base/Stack/Stack.tsx
+++ b/src/base/Stack/Stack.tsx
@@ -1,7 +1,8 @@
 import { Stack as MuiStack, type StackProps as MuiStackProps } from '@mui/material';
+import React from 'react';
 
-export function Stack(props: MuiStackProps): JSX.Element {
-  return <MuiStack {...props} />;
-}
+const Stack = React.forwardRef<HTMLDivElement, MuiStackProps>((props, ref) => {
+  return <MuiStack {...props} ref={ref} />;
+});
 
 export default Stack;
diff --git a/src/base/Switch/Switch.tsx b/src/base/Switch/Switch.tsx
index c15b5073b..820c12cc8 100644
--- a/src/base/Switch/Switch.tsx
+++ b/src/base/Switch/Switch.tsx
@@ -1,7 +1,8 @@
 import { Switch as MuiSwitch, type SwitchProps as MuiSwitchProps } from '@mui/material';
+import React from 'react';
 
-export function Switch(props: MuiSwitchProps): JSX.Element {
-  return <MuiSwitch {...props} />;
-}
+const Switch = React.forwardRef<HTMLButtonElement, MuiSwitchProps>((props, ref) => {
+  return <MuiSwitch {...props} ref={ref} />;
+});
 
 export default Switch;
diff --git a/src/base/Tab/Tab.tsx b/src/base/Tab/Tab.tsx
index 174e958cd..d19ec2b46 100644
--- a/src/base/Tab/Tab.tsx
+++ b/src/base/Tab/Tab.tsx
@@ -1,7 +1,8 @@
 import { Tab as MuiTab, type TabProps as MuiTypeProps } from '@mui/material';
+import React from 'react';
 
-export function Tab(props: MuiTypeProps): JSX.Element {
-  return <MuiTab {...props} />;
-}
+const Tab = React.forwardRef<HTMLDivElement, MuiTypeProps>((props, ref) => {
+  return <MuiTab {...props} ref={ref} />;
+});
 
 export default Tab;
diff --git a/src/base/Tabs/Tabs.tsx b/src/base/Tabs/Tabs.tsx
index 490dc10bf..578cc4d9b 100644
--- a/src/base/Tabs/Tabs.tsx
+++ b/src/base/Tabs/Tabs.tsx
@@ -1,7 +1,8 @@
 import { Tabs as MuiTabs, type TabsProps as MuiTabsProps } from '@mui/material';
+import React from 'react';
 
-export function Tabs(props: MuiTabsProps): JSX.Element {
-  return <MuiTabs {...props} />;
-}
+const Tabs = React.forwardRef<HTMLDivElement, MuiTabsProps>((props, ref) => {
+  return <MuiTabs {...props} ref={ref} />;
+});
 
 export default Tabs;
diff --git a/src/base/TextField/TextField.tsx b/src/base/TextField/TextField.tsx
index 7ebcb8484..e8fd8b555 100644
--- a/src/base/TextField/TextField.tsx
+++ b/src/base/TextField/TextField.tsx
@@ -1,7 +1,8 @@
 import { TextField as MuiTextField, type TextFieldProps as MuiTextFieldProps } from '@mui/material';
+import React from 'react';
 
-export function TextField(props: MuiTextFieldProps): JSX.Element {
-  return <MuiTextField {...props} />;
-}
+const TextField = React.forwardRef<HTMLDivElement, MuiTextFieldProps>((props, ref) => {
+  return <MuiTextField {...props} ref={ref} />;
+});
 
 export default TextField;
diff --git a/src/base/ToggleButtonGroup/ToggleButtonGroup.tsx b/src/base/ToggleButtonGroup/ToggleButtonGroup.tsx
index e614624c4..73348807a 100644
--- a/src/base/ToggleButtonGroup/ToggleButtonGroup.tsx
+++ b/src/base/ToggleButtonGroup/ToggleButtonGroup.tsx
@@ -2,9 +2,12 @@ import {
   ToggleButtonGroup as MuiToggleButtonGroup,
   type ToggleButtonGroupProps as MuiToggleButtonGroupProps
 } from '@mui/material';
+import React from 'react';
 
-export function ToggleButtonGroup(props: MuiToggleButtonGroupProps): JSX.Element {
-  return <MuiToggleButtonGroup {...props} />;
-}
+const ToggleButtonGroup = React.forwardRef<HTMLDivElement, MuiToggleButtonGroupProps>(
+  (props, ref) => {
+    return <MuiToggleButtonGroup {...props} ref={ref} />;
+  }
+);
 
 export default ToggleButtonGroup;
diff --git a/src/base/Toolbar/Toolbar.tsx b/src/base/Toolbar/Toolbar.tsx
index 98b2fd35e..390d8eccf 100644
--- a/src/base/Toolbar/Toolbar.tsx
+++ b/src/base/Toolbar/Toolbar.tsx
@@ -1,7 +1,8 @@
 import { Toolbar as MuiToolbar, type ToolbarProps as MuiToolbarProps } from '@mui/material';
+import React from 'react';
 
-export function Toolbar(props: MuiToolbarProps): JSX.Element {
-  return <MuiToolbar {...props} />;
-}
+const Toolbar = React.forwardRef<HTMLDivElement, MuiToolbarProps>((props, ref) => {
+  return <MuiToolbar {...props} ref={ref} />;
+});
 
 export default Toolbar;
diff --git a/src/base/Typography/Typography.tsx b/src/base/Typography/Typography.tsx
index a0b08d7c6..70ea97827 100644
--- a/src/base/Typography/Typography.tsx
+++ b/src/base/Typography/Typography.tsx
@@ -2,9 +2,10 @@ import {
   Typography as MuiTypography,
   type TypographyProps as MuiTypographyProps
 } from '@mui/material';
+import React from 'react';
 
-export function Typography(props: MuiTypographyProps): JSX.Element {
-  return <MuiTypography {...props} />;
-}
+const Typography = React.forwardRef<HTMLDivElement, MuiTypographyProps>((props, ref) => {
+  return <MuiTypography {...props} ref={ref} />;
+});
 
 export default Typography;
diff --git a/src/theme/components.ts b/src/theme/components.ts
index b04270d12..6f9e3eaaf 100644
--- a/src/theme/components.ts
+++ b/src/theme/components.ts
@@ -17,7 +17,8 @@ import { MuiOutlinedInput } from './components/outlinedinput.modifier';
 import { MuiPagination } from './components/pagination.modifier';
 import { MuiSvgIcon } from './components/svgicon.modifier';
 import { MuiSwitch } from './components/switch.modifier';
-import { MuiTab } from './components/tab.modifier.ts';
+import { MuiTab } from './components/tab.modifier';
+import { MuiTabs } from './components/tabs.modifier';
 
 export const components: Components<Theme> = {
   MuiAppBar,
@@ -35,6 +36,7 @@ export const components: Components<Theme> = {
   MuiPagination,
   MuiSvgIcon,
   MuiTab,
+  MuiTabs,
   MuiSwitch,
   MuiButtonGroup,
   MuiButton,
diff --git a/src/theme/components/tab.modifier.ts.ts b/src/theme/components/tab.modifier.ts
similarity index 86%
rename from src/theme/components/tab.modifier.ts.ts
rename to src/theme/components/tab.modifier.ts
index 835ce0ea1..ed7ca5875 100644
--- a/src/theme/components/tab.modifier.ts.ts
+++ b/src/theme/components/tab.modifier.ts
@@ -14,8 +14,8 @@ export const MuiTab: Components<Theme>['MuiTab'] = {
           color: defaultText,
           backgroundColor: defaultBackground
         },
-        backgroundColor: defaultText,
-        color: defaultBackground
+        backgroundColor: 'none',
+        color: defaultText
       };
     }
   }
diff --git a/src/theme/components/tabs.modifier.ts b/src/theme/components/tabs.modifier.ts
new file mode 100644
index 000000000..63173a06c
--- /dev/null
+++ b/src/theme/components/tabs.modifier.ts
@@ -0,0 +1,12 @@
+import { Components, Theme } from '@mui/material';
+
+export const MuiTabs: Components<Theme>['MuiTabs'] = {
+  styleOverrides: {
+    root: ({ theme }) => ({
+      backgroundColor: theme.palette.background.default
+    }),
+    indicator: ({ theme }) => ({
+      backgroundColor: theme.palette.background.brand?.default
+    })
+  }
+};