diff --git a/frontend/src/bundles/common/components/icon/components/icons.tsx b/frontend/src/bundles/common/components/icon/components/icons.tsx
deleted file mode 100644
index 107e67174..000000000
--- a/frontend/src/bundles/common/components/icon/components/icons.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { type IconProps } from '@chakra-ui/react';
-import { type ReactElement } from 'react';
-
-import { Icon } from '../../components.js';
-
-const HomeIcon = (properties: IconProps): ReactElement => {
-    return (
-        <Icon viewBox="0 0 16 18" {...properties}>
-            <path
-                d="M2 16H5V10H11V16H14V7L8 2.5L2 7V16ZM0 18V6L8 0L16 6V18H9V12H7V18H0Z"
-                fill="currentColor"
-            />
-        </Icon>
-    );
-};
-
-const LogOutIcon = (properties: IconProps): ReactElement => {
-    return (
-        <Icon viewBox="0 0 18 19" {...properties}>
-            <path
-                d="M2 18.5C1.45 18.5 0.979167 18.3042 0.5875 17.9125C0.195833 17.5208 0 17.05 0 16.5V2.5C0 1.95 0.195833 1.47917 0.5875 1.0875C0.979167 0.695833 1.45 0.5 2 0.5H8C8.28333 0.5 8.52083 0.595833 8.7125 0.7875C8.90417 0.979167 9 1.21667 9 1.5C9 1.78333 8.90417 2.02083 8.7125 2.2125C8.52083 2.40417 8.28333 2.5 8 2.5H2V16.5H8C8.28333 16.5 8.52083 16.5958 8.7125 16.7875C8.90417 16.9792 9 17.2167 9 17.5C9 17.7833 8.90417 18.0208 8.7125 18.2125C8.52083 18.4042 8.28333 18.5 8 18.5H2ZM14.175 10.5H7C6.71667 10.5 6.47917 10.4042 6.2875 10.2125C6.09583 10.0208 6 9.78333 6 9.5C6 9.21667 6.09583 8.97917 6.2875 8.7875C6.47917 8.59583 6.71667 8.5 7 8.5H14.175L12.3 6.625C12.1167 6.44167 12.025 6.21667 12.025 5.95C12.025 5.68333 12.1167 5.45 12.3 5.25C12.4833 5.05 12.7167 4.94583 13 4.9375C13.2833 4.92917 13.525 5.025 13.725 5.225L17.3 8.8C17.5 9 17.6 9.23333 17.6 9.5C17.6 9.76667 17.5 10 17.3 10.2L13.725 13.775C13.525 13.975 13.2875 14.0708 13.0125 14.0625C12.7375 14.0542 12.5 13.95 12.3 13.75C12.1167 13.55 12.0292 13.3125 12.0375 13.0375C12.0458 12.7625 12.1417 12.5333 12.325 12.35L14.175 10.5Z"
-                fill="currentColor"
-            />
-        </Icon>
-    );
-};
-
-export { HomeIcon, LogOutIcon };
diff --git a/frontend/src/bundles/common/components/icon/icon-map.ts b/frontend/src/bundles/common/components/icon/icon-map.ts
index ad4fb1768..f1bf962e4 100644
--- a/frontend/src/bundles/common/components/icon/icon-map.ts
+++ b/frontend/src/bundles/common/components/icon/icon-map.ts
@@ -1,10 +1,9 @@
 import { ArrowLeftIcon, ArrowRightIcon } from '@chakra-ui/icons';
-
-import { HomeIcon, LogOutIcon } from './components/icons.js';
+import { faHouse, faRightFromBracket } from '@fortawesome/free-solid-svg-icons';
 
 const IconMap = {
-    HOME: HomeIcon,
-    LOG_OUT: LogOutIcon,
+    HOME: faHouse,
+    LOG_OUT: faRightFromBracket,
     ARROW_LEFT: ArrowLeftIcon,
     ARROW_RIGHT: ArrowRightIcon,
 } as const;
diff --git a/frontend/src/bundles/common/components/icon/size.enum.ts b/frontend/src/bundles/common/components/icon/size.enum.ts
index 4c3debdd1..cbf8ec4b0 100644
--- a/frontend/src/bundles/common/components/icon/size.enum.ts
+++ b/frontend/src/bundles/common/components/icon/size.enum.ts
@@ -1,5 +1,5 @@
 const Size = {
     LG: 5,
-};
+} as const;
 
 export { Size };
diff --git a/frontend/src/bundles/common/components/side-bar/libs/components/collapse-button-link.tsx b/frontend/src/bundles/common/components/side-bar/libs/components/collapse-button-link.tsx
index a891c2e66..e06593c69 100644
--- a/frontend/src/bundles/common/components/side-bar/libs/components/collapse-button-link.tsx
+++ b/frontend/src/bundles/common/components/side-bar/libs/components/collapse-button-link.tsx
@@ -1,7 +1,6 @@
-import { useLocation } from 'react-router-dom';
-
 import { Link } from '~/bundles/common/components/components.js';
 import { type AppRoute } from '~/bundles/common/enums/enums.js';
+import { useLocation } from '~/bundles/common/hooks/hooks.js';
 import { type ValueOf } from '~/bundles/common/types/types.js';
 
 import {
diff --git a/frontend/src/bundles/common/components/side-bar/libs/components/collapse-button.tsx b/frontend/src/bundles/common/components/side-bar/libs/components/collapse-button.tsx
index 9663162ac..53c592f9c 100644
--- a/frontend/src/bundles/common/components/side-bar/libs/components/collapse-button.tsx
+++ b/frontend/src/bundles/common/components/side-bar/libs/components/collapse-button.tsx
@@ -3,21 +3,21 @@ import { type ReactElement } from 'react';
 import { Box } from '~/bundles/common/components/components.js';
 
 type Properties = {
-    bg?: string;
-    color?: string;
-    handleClick?: () => void;
     icon: ReactElement;
     isCollapsed: boolean;
     label: string;
+    bg?: string;
+    color?: string;
+    handleClick?: () => void;
 };
 
 const CollapseButton = ({
-    bg = 'none',
-    color = 'white',
-    handleClick = (): void => {},
     icon,
     isCollapsed,
     label,
+    bg = 'none',
+    color = 'white',
+    handleClick = (): void => {},
 }: Properties): JSX.Element => {
     return (
         <Box
diff --git a/frontend/src/bundles/common/components/side-bar/side-bar.tsx b/frontend/src/bundles/common/components/side-bar/side-bar.tsx
index 50de0e201..8665e259a 100644
--- a/frontend/src/bundles/common/components/side-bar/side-bar.tsx
+++ b/frontend/src/bundles/common/components/side-bar/side-bar.tsx
@@ -1,5 +1,4 @@
-import { useCallback, useState } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import {
     Box,
@@ -10,6 +9,12 @@ import {
     Spacer,
 } from '~/bundles/common/components/components.js';
 import { AppRoute } from '~/bundles/common/enums/enums.js';
+import {
+    useCallback,
+    useLocation,
+    useNavigate,
+    useState,
+} from '~/bundles/common/hooks/hooks.js';
 import { type ValueOf } from '~/bundles/common/types/types.js';
 
 import { Size } from '../icon/icon.js';
@@ -23,7 +28,7 @@ const SideBar = (): JSX.Element => {
     const { pathname } = useLocation();
     const navigate = useNavigate();
 
-    const toggle = useCallback(
+    const handleToggle = useCallback(
         (): void => setIsCollapsed(!isCollapsed),
         [isCollapsed],
     );
@@ -32,7 +37,7 @@ const SideBar = (): JSX.Element => {
         return pathname === page ? 'white' : 'background.600';
     };
 
-    const logOut = useCallback(() => {
+    const handleLogOut = useCallback(() => {
         //ToDo: log out user with token
         navigate(AppRoute.SIGN_IN);
     }, [navigate]);
@@ -49,7 +54,6 @@ const SideBar = (): JSX.Element => {
             pb="20px"
         >
             <IconButton
-                bg="none"
                 aria-label={isCollapsed ? 'expand' : 'collapse'}
                 icon={
                     isCollapsed ? (
@@ -58,18 +62,17 @@ const SideBar = (): JSX.Element => {
                         <Icon as={IconMap.ARROW_LEFT} />
                     )
                 }
-                mb="10px"
-                onClick={toggle}
-                _active={{ bg: 'none' }}
-                _hover={{ bg: 'none' }}
+                onClick={handleToggle}
                 justifyContent={isCollapsed ? 'center' : 'flex-end'}
+                variant="icon"
             />
 
             <Box>
                 <CollapseButtonLink
                     icon={
                         <Icon
-                            as={IconMap.HOME}
+                            as={FontAwesomeIcon}
+                            icon={IconMap.HOME}
                             boxSize={Size.LG}
                             color={activeIconPage('/')}
                         />
@@ -86,14 +89,15 @@ const SideBar = (): JSX.Element => {
                 color="brand.secondary.600"
                 icon={
                     <Icon
-                        as={IconMap.LOG_OUT}
+                        as={FontAwesomeIcon}
+                        icon={IconMap.LOG_OUT}
                         boxSize={Size.LG}
                         color="brand.secondary.600"
                     />
                 }
                 isCollapsed={isCollapsed}
                 label={'log out'}
-                handleClick={logOut}
+                handleClick={handleLogOut}
             />
         </Flex>
     );
diff --git a/frontend/src/bundles/common/hooks/hooks.ts b/frontend/src/bundles/common/hooks/hooks.ts
index 2c429faa8..63a176ece 100644
--- a/frontend/src/bundles/common/hooks/hooks.ts
+++ b/frontend/src/bundles/common/hooks/hooks.ts
@@ -3,4 +3,4 @@ export { useAppForm } from './use-app-form/use-app-form.hook.js';
 export { useAppSelector } from './use-app-selector/use-app-selector.hook.js';
 export { useField as useFormField } from 'formik';
 export { useCallback, useEffect, useMemo, useState } from 'react';
-export { useLocation } from 'react-router-dom';
+export { useLocation, useNavigate } from 'react-router-dom';
diff --git a/frontend/src/framework/theme/styles/components.styles.ts b/frontend/src/framework/theme/styles/components.styles.ts
index 070571443..5d74b2f26 100644
--- a/frontend/src/framework/theme/styles/components.styles.ts
+++ b/frontend/src/framework/theme/styles/components.styles.ts
@@ -85,6 +85,12 @@ const components = {
                     color: colors.brand.secondary[300],
                 },
             },
+            icon: {
+                color: colors.white,
+                bg: 'none',
+                _active: { bg: 'none' },
+                _hover: { bg: 'none' },
+            },
         },
     },
     Link: {