diff --git a/frontend/src/components/generic/IconButton/index.js b/frontend/src/components/generic/IconButton/index.js
index 3f910ab47..82bee9e49 100644
--- a/frontend/src/components/generic/IconButton/index.js
+++ b/frontend/src/components/generic/IconButton/index.js
@@ -1,87 +1,42 @@
 import React from 'react'
 import { IconButton as MuiButton, CircularProgress } from '@mui/material'
-import clsx from 'clsx'
+import { styled } from '@mui/material/styles'
 
-const baseStyles = strong => ({
-    'rounded-md px-4 py-1.5 text-base tracking-wide leading-tight': true,
-    'font-bold uppercase': strong,
-    'font-normal normal-case': !strong,
-})
+const baseStyles = () => {
+    return {
+        boxSizing: 'border-box',
+        boxShadow: 'none',
+        '&:focus': {
+            boxShadow: 'none',
+        },
+        outline: 'none',
+    }
+}
 
-const variantStyles = (variant, color) => {
+const variantStyles = (theme, variant, color) => {
+    const colorPalette = theme.palette[color]
     switch (variant) {
-        case 'contained':
-            return {
-                'bg-current text-white border-2 border-current hover:bg-current': true,
-                [`bg-${color}-600 border-${color}-600 hover:bg-${color}-700`]: true,
-                'disabled:bg-current disabled:text-white disabled:opacity-50': true,
-                [`disabled:bg-${color}-700`]: true,
-            }
-        case 'containedNew':
-            return {
-                'text-current underline uppercase text-center': true,
-                'hover:no-underline': true,
-                [`text-${color}-600`]: true,
-                'disabled:bg-transparent disabled:opacity-50': true,
-            }
-        case 'applicationsClosed':
-            return {
-                'text-current mt-6 uppercase text-lg text-center': true,
-                [`text-${color}-600`]: true,
-                'hover:no-underline': true,
-                'disabled:bg-transparent disabled:opacity-50': true,
-            }
-        case 'containedCard':
-            return {
-                'bg-current text-white rounded-tl-lg rounded-br-lg uppercase text-sm opacity-75 hover:opacity-100': true,
-                [`bg-${color}-600`]: true,
-                'disabled:bg-transparent disabled:opacity-100': true,
-            }
-        case 'outlined':
-            return {
-                'bg-transparent text-current border-2': true,
-                [`text-${color}-600 border-${color}-800`]: true,
-            }
-        case 'outlinedNew':
-            return {
-                'bg-transparent text-current border-2 rounded-full h-12 w-52 mt-6': true,
-                [`text-${color}-600 border-${color}-800`]: true,
-            }
-        case 'contained-large':
-            return {
-                'bg-current text-white border-2 border-current h-12 text-2xl': true,
-                [`bg-${color}-600 border-${color}-600 hover:bg-${color}-700`]: true,
-                'disabled:bg-current disabled:text-white disabled:opacity-50': true,
-                [`disabled:bg-${color}-700`]: true,
-            }
-        case 'jOutlined':
-            return {
-                'bg-transparent text-current border-2 rounded-full px-4 py-1': true,
-                [`text-${color}-600 border-${color}-800`]: true,
-            }
-        case 'jContained':
-            return {
-                'bg-current text-white border-2 border-current rounded-md px-4 py-1': true,
-                [`bg-${color}-600 border-${color}-600 hover:bg-${color}-700 hover:border-${color}-700`]: true,
-                'disabled:bg-current disabled:text-white disabled:opacity-50': true,
-                [`disabled:bg-${color}-700`]: true,
-            }
-        case 'jOutlinedBox':
-            return {
-                'bg-current text-white border border-light rounded-md px-4 py-2 w-full': true,
-                [`bg-${color}-600 border-${color}-200`]: true,
-            }
         case 'roundedBlack':
             return {
-                'bg-black text-current border-2 rounded-full px-4 py-1': true,
-                [`text-${color}-600 border-${color}-600 hover:text-black hover:bg-${color}-700 hover:border-${color}-700`]: true,
-                'disabled:bg-current disabled:text-white disabled:opacity-50': true,
-                [`disabled:bg-${color}-700`]: true,
+                backgroundColor: 'black',
+                color: colorPalette.main,
+                border: `2px solid ${colorPalette.main}`,
+                borderRadius: '50%',
+                '&:hover': {
+                    color: 'black',
+                    background: colorPalette.dark,
+                    border: `2px solid ${colorPalette.dark}`,
+                },
+                '&.Mui-disabled': {
+                    backgroundColor: colorPalette.dark,
+                    color: colorPalette.contrastText,
+                    opacity: 0.5,
+                },
             }
         default:
             return {
-                'rounded-none text-current': true,
-                [`text-${color}-600`]: true,
+                borderRadius: 0,
+                color: colorPalette.main,
             }
     }
 }
@@ -92,17 +47,18 @@ const IconButton = ({
     loading = false,
     ...props
 }) => {
-    const baseClasses = baseStyles(strong)
-    const variantClasses = variantStyles(props.variant, color)
+    const CustomIconButton = styled(MuiButton, {
+        // MUI IconButtons don't have variants so no point in forwarding them
+        shouldForwardProp: prop => prop !== 'variant',
+    })(({ theme }) => ({
+        ...baseStyles(),
+        ...variantStyles(theme, props.variant, color),
+    }))
 
     return (
-        <MuiButton
-            {...props}
-            className={clsx(baseClasses, variantClasses)}
-            disabled={loading || props.disabled}
-        >
+        <CustomIconButton {...props} disabled={loading || props.disabled}>
             {loading ? <CircularProgress size={20} /> : props.children}
-        </MuiButton>
+        </CustomIconButton>
     )
 }
 
diff --git a/frontend/src/components/layouts/SidebarLayout/index.js b/frontend/src/components/layouts/SidebarLayout/index.js
index 419668577..84b84f33e 100644
--- a/frontend/src/components/layouts/SidebarLayout/index.js
+++ b/frontend/src/components/layouts/SidebarLayout/index.js
@@ -3,7 +3,6 @@ import { useDispatch } from 'react-redux'
 import { findIndex } from 'lodash-es'
 import { Routes, Route, Navigate, useNavigate, Link } from 'react-router-dom'
 
-import Container from 'components/generic/Container/index'
 import MenuIcon from '@mui/icons-material/Menu'
 import LockIcon from '@mui/icons-material/Lock'
 import StorageIcon from '@mui/icons-material/Storage'
@@ -13,13 +12,15 @@ import {
     Drawer,
     List,
     ListItem,
+    ListItemButton,
     ListItemIcon,
     ListItemText,
-    Hidden,
     Box,
 } from '@mui/material'
+import { styled } from '@mui/material/styles'
 
 import PlatformLogo from 'assets/logos/JO_wordmark_white.png'
+import Container from 'components/generic/Container/index'
 import IconButton from 'components/generic/IconButton'
 import EventsPage from 'pages/_dashboard/renderDashboard/default/events'
 import ProfilePage from 'pages/_account/profile' //TODO: fix the profile view
@@ -27,6 +28,62 @@ import ProfilePage from 'pages/_account/profile' //TODO: fix the profile view
 import config from 'constants/config'
 import { useTranslation } from 'react-i18next'
 
+const SIDEBAR_WIDTH = '300px'
+
+const Logo = styled('img')({
+    height: '70px',
+    margin: '0 auto',
+    padding: '5px',
+    backgroundColor: 'black',
+})
+
+const RouteList = styled(List)({
+    color: 'rgba(255,255,255,0.6)',
+    '& .MuiListItem-root': {
+        padding: 0,
+    },
+    '& .MuiListItemButton-root': {
+        '&.Mui-selected': {
+            color: 'white',
+            backgroundColor: 'black',
+        },
+    },
+    '& .MuiListItemIcon-root': {
+        color: 'inherit',
+    },
+})
+
+const MenuButtonBox = styled(Box, {
+    // This specifies which props should not get passed down to the DOM, will throw a console error if you do.
+    shouldForwardProp: prop => prop !== 'desktopOpen',
+})(({ theme, desktopOpen }) => ({
+    position: 'fixed',
+    top: '0.5rem',
+    left: '0.5rem',
+    zIndex: 100, // to make sure the text boxes doesn't go over the button
+    [theme.breakpoints.up('md')]: {
+        top: '0.75rem',
+        transition: 'all 225ms cubic-bezier(0, 0, 0.2, 1) 0ms',
+        left: desktopOpen ? `calc(${SIDEBAR_WIDTH} + 0.5rem)` : '0.5rem',
+        transform: desktopOpen ? 'rotate(-90deg)' : 'rotate(0)',
+    },
+}))
+
+const LineDivider = styled('hr')({
+    margin: '2rem auto',
+    width: '80%',
+    height: '1px',
+})
+
+const Main = styled('main', {
+    shouldForwardProp: prop => prop !== 'desktopOpen',
+})(({ theme, desktopOpen }) => ({
+    [theme.breakpoints.up('md')]: {
+        marginLeft: desktopOpen ? SIDEBAR_WIDTH : 0,
+    },
+    transition: 'margin-left 225ms cubic-bezier(0, 0, 0.2, 1) 0ms',
+}))
+
 export default React.memo(
     ({
         topContent,
@@ -111,162 +168,140 @@ export default React.memo(
         }
 
         const drawerContent = (
-            <>
-                <Box>
-                    <Link to="/home">
-                        <img
-                            src={
-                                PlatformLogo /*config.LOGO_LIGHT_URL TODO: switch this to cloudinary*/
-                            }
-                            className="tw-block tw-mx-auto tw-p-1.5 tw-h-18 tw-bg-black"
-                            alt={config.PLATFORM_OWNER_NAME + ' logo'}
-                        />
-                    </Link>
-                </Box>
-                <Box p={2}>{sidebarTopContent}</Box>
-                <List>
+            <Box>
+                <Link to="/home">
+                    <Logo
+                        src={
+                            PlatformLogo /*config.LOGO_LIGHT_URL TODO: switch this to cloudinary*/
+                        }
+                        alt={config.PLATFORM_OWNER_NAME + ' logo'}
+                    />
+                </Link>
+                <Box sx={{ p: 2 }}>{sidebarTopContent}</Box>
+                <RouteList>
                     {routes
                         .filter(route => !route.hidden)
                         .map((route, index) => {
                             return (
-                                <ListItem
-                                    disabled={route.locked}
-                                    button
-                                    key={route?.onClickPath || route.path}
-                                    selected={index === safeIndex}
-                                    className={`${
-                                        index === safeIndex
-                                            ? 'text-white'
-                                            : 'text-gray-400'
-                                    }`}
-                                    onClick={() =>
-                                        pushRoute(
-                                            route?.onClickPath || route.path,
-                                        )
-                                    }
-                                >
-                                    <ListItemIcon className="text-inherit">
-                                        {route.locked ? (
-                                            <LockIcon />
-                                        ) : (
-                                            route.icon
-                                        )}
-                                    </ListItemIcon>
-                                    <ListItemText
-                                        className="text-inherit"
-                                        primary={route.label}
-                                        secondary={
-                                            route.locked
-                                                ? route.lockedDescription
-                                                : ''
+                                <ListItem>
+                                    <ListItemButton
+                                        disabled={route.locked}
+                                        key={route?.onClickPath || route.path}
+                                        selected={index === safeIndex}
+                                        onClick={() =>
+                                            pushRoute(
+                                                route?.onClickPath ||
+                                                    route.path,
+                                            )
                                         }
-                                    />
+                                    >
+                                        <ListItemIcon>
+                                            {route.locked ? (
+                                                <LockIcon />
+                                            ) : (
+                                                route.icon
+                                            )}
+                                        </ListItemIcon>
+                                        <ListItemText
+                                            primary={route.label}
+                                            secondary={
+                                                route.locked
+                                                    ? route.lockedDescription
+                                                    : ''
+                                            }
+                                        />
+                                    </ListItemButton>
                                 </ListItem>
                             )
                         })}
-                    <hr className="tw-h-px tw-my-8 tw-w-4/5 tw-bg-gray-500 tw-border-0 tw-dark:bg-gray-900"></hr>
-                    <div className="tw-grid tw-place-items-center">
-                        <ListItem
-                            button
+                    <LineDivider />
+                    <ListItem>
+                        <ListItemButton
                             key={'/events'}
                             selected={routes.length === safeIndex}
-                            className={`${
-                                routes.length === safeIndex
-                                    ? 'text-white'
-                                    : 'text-gray-400'
-                            }`}
                             onClick={() => {
                                 pushRoute('/events')
                             }}
                         >
-                            <ListItemIcon className="text-inherit">
+                            <ListItemIcon>
                                 <StorageIcon />
                             </ListItemIcon>
-                            <ListItemText
-                                className="text-inherit"
-                                primary={t('Events_')}
-                            />
-                        </ListItem>
-                        <ListItem
-                            button
+                            <ListItemText primary={t('Events_')} />
+                        </ListItemButton>
+                    </ListItem>
+                    <ListItem>
+                        <ListItemButton
                             key={'/profile'}
                             selected={routes.length + 1 === safeIndex}
-                            className={`${
-                                routes.length + 1 === safeIndex
-                                    ? 'text-white'
-                                    : 'text-gray-400'
-                            }`}
                             onClick={() => pushRoute('/profile')}
                         >
-                            <ListItemIcon className="text-inherit">
+                            <ListItemIcon>
                                 <AccountBoxIcon />
                             </ListItemIcon>
-                            <ListItemText
-                                className="text-inherit"
-                                primary={t('Profile_')}
-                            />
-                        </ListItem>
-                        <ListItem
-                            button
+                            <ListItemText primary={t('Profile_')} />
+                        </ListItemButton>
+                    </ListItem>
+                    <ListItem>
+                        <ListItemButton
                             key={'/logout'}
-                            selected={routes.length + 2 === safeIndex}
-                            className={`${
-                                routes.length + 2 === safeIndex
-                                    ? 'text-white'
-                                    : 'text-gray-400'
-                            }`}
                             onClick={() => navigate('/logout')}
                         >
-                            <ListItemIcon className="text-inherit">
+                            <ListItemIcon>
                                 <ExitToAppIcon />
                             </ListItemIcon>
-                            <ListItemText
-                                className="text-inherit"
-                                primary={t('Log_out_')}
-                            />
-                        </ListItem>
-                    </div>
-                </List>
-            </>
+                            <ListItemText primary={t('Log_out_')} />
+                        </ListItemButton>
+                    </ListItem>
+                </RouteList>
+            </Box>
         )
 
         return (
             <div>
-                {/* <Hidden mdUp implementation="css">
+                {/* Menu button for small screens */}
+                <MenuButtonBox sx={{ display: { xs: 'block', md: 'none' } }}>
                     <IconButton
                         variant="roundedBlack"
                         onClick={handleDrawerToggle}
-                        className="p-2 fixed top-2 left-2 z-50"
+                        sx={{ padding: '10px' }}
                         aria-label="toggle drawer"
                     >
                         <MenuIcon fontSize="large" />
                     </IconButton>
-                </Hidden>
-                <Hidden smDown implementation="css">
+                </MenuButtonBox>
+                {/* Menu button for bigger screens */}
+                <MenuButtonBox
+                    desktopOpen={desktopOpen}
+                    sx={{ display: { xs: 'none', md: 'block' } }}
+                >
                     <IconButton
                         variant="roundedBlack"
                         onClick={handleDrawerToggleDesktop}
-                        className={`p-2 fixed top-2 z-50 transition-all ${
-                            desktopOpen ? 'left-[calc(300px+0.5rem)]' : 'left-2'
-                        }`}
+                        sx={{ padding: '10px' }}
                         aria-label="toggle drawer desktop"
                     >
-                        <MenuIcon
-                            className={`transition-transform ${
-                                desktopOpen ? 'rotate-[-90deg]' : 'rotate-0'
-                            }`}
-                        />
+                        <MenuIcon />
                     </IconButton>
-                </Hidden>
-                <Hidden mdUp implementation="css">
-                    <nav className="fixed top-0 left-0 md:w-[300px] md:flex-shrink-0">
+                </MenuButtonBox>
+
+                {/* Small screen drawer */}
+                <Box
+                    sx={{
+                        display: { xs: 'block', md: 'none' },
+                    }}
+                >
+                    <nav>
                         <Drawer
                             variant="temporary"
                             anchor="left"
                             open={mobileOpen}
                             onClose={handleDrawerToggle}
-                            classes={{
-                                paper: 'w-[300px] max-w-[80%] bg-black z-[998]',
+                            sx={{
+                                '& .MuiDrawer-paper': {
+                                    width: SIDEBAR_WIDTH,
+                                    backgroundColor: 'black',
+                                    maxWidth: '80%',
+                                },
                             }}
                             ModalProps={{
                                 keepMounted: true, // Better open performance on mobile.
@@ -275,75 +310,83 @@ export default React.memo(
                             {drawerContent}
                         </Drawer>
                     </nav>
-                </Hidden>
-                <Hidden smDown implementation="css">
-                    <nav className="fixed top-0 left-0 md:w-[300px] md:flex-shrink-0">
+                </Box>
+                {/* Bigger screen drawer */}
+                <Box
+                    sx={{
+                        display: { xs: 'none', md: 'block' },
+                    }}
+                >
+                    <nav>
                         <Drawer
-                            classes={{
-                                paper: 'w-[300px] max-w-[80%] bg-black z-[998]',
-                            }}
                             variant="persistent"
                             anchor="left"
                             open={desktopOpen}
                             onClose={handleDrawerToggleDesktop}
+                            sx={{
+                                '& .MuiDrawer-paper': {
+                                    width: SIDEBAR_WIDTH,
+                                    backgroundColor: 'black',
+                                    /* maxWidth: '80%', */
+                                },
+                            }}
                         >
                             {drawerContent}
                         </Drawer>
                     </nav>
-                </Hidden> */}
-                {drawerContent}
-                <main
-                    className={`flex-grow relative transition-all ${
-                        desktopOpen ? 'ml-[300px]' : 'ml-0'
-                    }`}
-                >
+                </Box>
+
+                <Main desktopOpen={desktopOpen}>
                     {topContent}
-                    <Container className="p-0 md:p-8">
-                        <div className="p-8 max-w-[1400px]">
-                            <Routes>
-                                {routes.map(
-                                    (
-                                        {
-                                            key,
-                                            path,
-                                            hidden,
-                                            component: Component,
-                                            locked,
-                                        },
-                                        index,
-                                    ) => {
-                                        if (hidden || locked) {
-                                            return null
-                                        } else {
-                                            return (
-                                                <Route
-                                                    key={key}
-                                                    path={`${path}`}
-                                                    element={<Component />}
-                                                />
-                                            )
-                                        }
+                    <Container
+                        sx={{
+                            padding: { xs: '1rem', md: '2rem' },
+                            maxWidth: '1440px',
+                        }}
+                    >
+                        <Routes>
+                            {routes.map(
+                                (
+                                    {
+                                        key,
+                                        path,
+                                        hidden,
+                                        component: Component,
+                                        locked,
                                     },
-                                )}
+                                    index,
+                                ) => {
+                                    if (hidden || locked) {
+                                        return null
+                                    } else {
+                                        return (
+                                            <Route
+                                                key={key}
+                                                path={`${path}`}
+                                                element={<Component />}
+                                            />
+                                        )
+                                    }
+                                },
+                            )}
 
-                                <Route
-                                    key={'profile'}
-                                    path={`profile`}
-                                    element={<ProfilePage />}
-                                />
-                                <Route
-                                    key={'events'}
-                                    path={`events/*`}
-                                    element={<EventsPage />}
-                                />
-                                <Route
-                                    path="*"
-                                    element={<Navigate to="events" replace />}
-                                />
-                            </Routes>
-                        </div>
+                            <Route
+                                key={'profile'}
+                                path={`profile`}
+                                element={<ProfilePage />}
+                            />
+                            <Route
+                                key={'events'}
+                                path={`events/*`}
+                                element={<EventsPage />}
+                            />
+                            <Route
+                                path="*"
+                                element={<Navigate to="events" replace />}
+                            />
+                        </Routes>
                     </Container>
-                </main>
+                </Main>
             </div>
         )
     },
diff --git a/frontend/src/components/navbars/BasicNavBar/index.js b/frontend/src/components/navbars/BasicNavBar/index.js
index 9144f7cfc..37ae0e0b2 100644
--- a/frontend/src/components/navbars/BasicNavBar/index.js
+++ b/frontend/src/components/navbars/BasicNavBar/index.js
@@ -1,15 +1,27 @@
 import React from 'react'
+
+import { styled } from '@mui/material/styles'
+
+import WavePattern from 'assets/images/nawbar_waves.svg'
 import UserAvatar from 'components/UserAvatar'
 import LanguageMenu from 'components/LanguageMenu'
 
+const NavbarWrapper = styled('div')({
+    width: '100%',
+    background: `url(${WavePattern})`,
+    backgroundColor: 'black',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'end',
+    padding: '0.5rem',
+})
+
 const BasicNavBar = () => {
     return (
-        <div className="tw-w-full tw-p-2 tw-bg-wave-pattern tw-bg-black ">
-            <div className={'tw-flex tw-justify-end tw-items-center'}>
-                <LanguageMenu />
-                <UserAvatar />
-            </div>
-        </div>
+        <NavbarWrapper>
+            <LanguageMenu />
+            <UserAvatar />
+        </NavbarWrapper>
     )
 }