diff --git a/.eslintrc.js b/.eslintrc.js
index 6314368afa71aab6d1bc2e9b29ae1a47d14c58d5..db23e77c14f01ca7f0650be965aca69675c1d07e 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -18,5 +18,6 @@ module.exports = {
     'object-curly-newline': 0,
     'implicit-arrow-linebreak': 0,
     'react/prop-types': 0,
+    'react/jsx-wrap-multilines': ['error', { arrow: true, return: true, declaration: true }],
   },
 };
diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 7ca2498d708a9936c1b3df418315319ecb43bdeb..3dc057ab013960fb9b2c3c8d22333a5f0d1a6db8 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -1,60 +1,20 @@
-# stages:
-#   - Build
-#   #  - Test
-#   - Docker build
-#   - Deploy
+ stages:
+   - Build
 
-# #services:
-# #  - mongo
-
-# variables:
-#   CONTAINER_IMAGE: 'registry.kszk.bme.hu/bodysch/frontend:$CI_COMMIT_REF_NAME'
-# #  MONGODB_TEST_URI: 'mongodb://mongo/bodysch-test'
-
-# Build:
-#   stage: Build
-#   tags: [kszk]
-#   image: node:14
-#   script:
-#     - npm install
-#     - npm run build
-#   cache:
-#     paths:
-#       - node_modules/
-#       - build/
-#   artifacts:
-#     expire_in: 1 day
-#     paths:
-#       - node_modules/
-#       - build/
-
-# Docker build:
-#   stage: Docker build
-#   tags: [kszk]
-#   only:
-#     - master
-#     - DEV
-#   image:
-#     name: gcr.io/kaniko-project/executor:debug
-#     entrypoint: ['']
-#   script:
-#     - echo "{\"auths\":{\"registry.kszk.bme.hu\":{\"username\":\"$REGISTRY_USER\",\"password\":\"$REGISTRY_PASSWORD\"}}}" > /kaniko/.docker/config.json
-#     - /kaniko/executor --context $CI_PROJECT_DIR --dockerfile $CI_PROJECT_DIR/Dockerfile --destination $CONTAINER_IMAGE
-
-# Deploy dev:
-#   stage: Deploy
-#   tags: [kszk-deploy] # request the custom SSH executor
-#   only:
-#     - DEV
-#   script: # your deploy logic
-#     - echo "$REGISTRY_PASSWORD" | docker login registry.kszk.bme.hu --username $REGISTRY_USER --password-stdin
-#     - cp docker-compose.dev.yml /home/kszk-gitlab-deployer/bodysch-dev/
-#     - cd /home/kszk-gitlab-deployer/bodysch-dev/
-#     - docker-compose -f docker-compose.dev.yml --no-ansi pull
-#     - docker-compose -f docker-compose.dev.yml up -d
-#     - docker system prune -f
-#   variables:
-#     SSH_HOST: donald.sch.bme.hu # required
-#     SSH_USER: kszk-gitlab-deployer # default: kszk-gitlab-deployer
-#     SSH_PORT: 10122 # default: 22
+ Build:
+   stage: Build
+   tags: [kszk]
+   image: node:16
+   script:
+     - npm install
+     - npm run build
+   cache:
+     paths:
+       - node_modules/
+       - build/
+   artifacts:
+     expire_in: 1 day
+     paths:
+       - node_modules/
+       - build/
 
diff --git a/Dockerfile b/Dockerfile
index 5e7308f4a21f5795d9a53d9c1e90e8aab24d68ed..b649438054712085e8a113bafc577ce730cf39fb 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,4 +1,4 @@
-FROM nginx:1.19.2
+FROM docker.io/nginx:1.21.0
 
 # copy the files builded with npm run build
 COPY build /var/www
diff --git a/README.md b/README.md
index b3d603f830e39045997f763f3f64ff1aa1d1ec73..7ba6c77ad27011d7bad745007fb019a36b276511 100644
--- a/README.md
+++ b/README.md
@@ -1,11 +1,3 @@
 ## BodySCH Frontend
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
-
-#### Local proxy
-
-`./tools/local_proxy/Caddyfile/`  
-Create a local proxy with caddy:  
-`docker run -d -it --name caddyFrontend -v /path/to/Caddyfile:/etc/caddy/Caddyfile --network host caddy`  
-When you change the config just `docker stop ...` and `docker start ...`.  
-If you experience any error check it with `docker logs ...`.
diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
deleted file mode 100644
index 64c933a5d11864d64ab63646c56187ee26566ea3..0000000000000000000000000000000000000000
--- a/docker-compose.dev.yml
+++ /dev/null
@@ -1,29 +0,0 @@
-version: '3.7'
-services:
-  bodysch-backend-dev:
-    container_name: bodysch-backend-dev
-    image: registry.kszk.bme.hu/bodysch/backend:dev
-    restart: always
-    ports:
-      - '3030:8000'
-    links:
-      - bodysch-mongo-dev
-    env_file:
-      - .env
-    depends_on:
-      - bodysch-mongo-dev
-  bodysch-mongo-dev:
-    container_name: bodysch-mongo-dev
-    image: mongo
-    volumes:
-      - ./data:/data/db
-    expose:
-      - '27017'
-  bodysch-frontend-dev:
-    container_name: bodysch-frontend-dev
-    image: registry.kszk.bme.hu/bodysch/frontend:DEV
-    restart: always
-    ports:
-      - '3040:3040'
-    depends_on:
-      - bodysch-backend-dev
diff --git a/package-lock.json b/package-lock.json
index 90006535679d09ccb90996b23a14fcd69e5824f1..67e91d751b54a9d34eb55ba77cf3f04a0d758717 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2081,6 +2081,11 @@
       "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=",
       "dev": true
     },
+    "@types/lodash": {
+      "version": "4.14.168",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.168.tgz",
+      "integrity": "sha512-oVfRvqHV/V6D1yifJbVRU3TMp8OT6o6BG+U9MkwuJ3U8/CsDHvalRpsxBqivn71ztOFZBTfJMvETbqHiaNSj7Q=="
+    },
     "@types/minimatch": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
diff --git a/package.json b/package.json
index 84dd7b32fb44853e495ed6cfa5f424e7f01dceb6..3ba9c4d1ebacb71de7b2963287185f442e1e71c0 100644
--- a/package.json
+++ b/package.json
@@ -47,8 +47,10 @@
   "dependencies": {
     "@material-ui/core": "^4.11.2",
     "@material-ui/icons": "^4.11.2",
+    "@types/lodash": "^4.14.168",
     "axios": "^0.21.1",
     "http-proxy-middleware": "^1.0.6",
+    "lodash": "^4.17.20",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "react-hook-form": "^6.14.2",
diff --git a/public/index.html b/public/index.html
index 678cb12482ad593ac63c85a3206165b84545d348..43547803880d14b76501ae8b2a14c4c36c9fe9e1 100644
--- a/public/index.html
+++ b/public/index.html
@@ -12,6 +12,11 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+    />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
diff --git a/src/App.tsx b/src/App.tsx
index 8739ebcd63334457ce1cdc73d64d50a97955958e..a1a599fd482756e7f8e022b7f30dd3bd5b87523c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,7 +5,7 @@ import { ClientContextProvider } from './context';
 import ThemeProvider from './context/ThemeProvider';
 import { UserStateProvider } from './context/UserContext';
 import Routes from './Routes';
-import { darkTheme } from './theme';
+import darkTheme from './styles/darkTheme';
 
 const queryClient = new QueryClient();
 
diff --git a/src/Routes.tsx b/src/Routes.tsx
index 91222e78ed40c53345c35309b587f634847f2bf0..4a1bc69a200c55a180baf76ec2a3ac6693fffdb0 100644
--- a/src/Routes.tsx
+++ b/src/Routes.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
-import { Route, Switch } from 'react-router';
-import ProfileButton from './components/ProfileButton';
+import { Redirect, Route, Switch } from 'react-router';
 import AboutPage from './pages/AboutPage';
 import NewsPage from './pages/NewsPage';
+import RulesPage from './pages/RulesPage';
 
 const Routes: React.FC = () => (
   <Switch>
     <Route path="/" exact>
-      <ProfileButton />
+      <Redirect to="/news" />
     </Route>
     <Route path="/about" exact>
       <AboutPage />
@@ -15,6 +15,9 @@ const Routes: React.FC = () => (
     <Route path="/news">
       <NewsPage />
     </Route>
+    <Route path="/rules">
+      <RulesPage />
+    </Route>
   </Switch>
 );
 
diff --git a/src/components/DrawerMenu.tsx b/src/components/DrawerMenu.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5fe4920a51762ffa94d50447f6c57ade958ed796
--- /dev/null
+++ b/src/components/DrawerMenu.tsx
@@ -0,0 +1,62 @@
+import { Divider, Drawer, Grid, List, ListItem, ListItemText, makeStyles } from '@material-ui/core';
+import React from 'react';
+import SCHBodyIcon from '../svg/SCHBodyIcon';
+import { MENU_ITEMS } from './Header';
+import WrapperLink from './WrapperLink';
+
+type DrawerMenuProps = {
+  open: boolean;
+  toggleOpen: () => void;
+  handleLogout: () => void;
+};
+
+const useStyles = makeStyles((theme) => ({
+  item: {
+    textAlign: 'center',
+    fontWeight: 500,
+    color: theme.palette.secondary.main,
+    '&:hover': {
+      color: theme.palette.text.primary,
+      backgroundColor: theme.palette.grey[700],
+    },
+  },
+  grid: {
+    marginTop: `${theme.spacing(2)}px`,
+    marginBottom: `${theme.spacing(2)}px`,
+  },
+  list: {
+    minWidth: '250px',
+  },
+}));
+
+const DrawerMenu: React.FC<DrawerMenuProps> = ({ open, toggleOpen, handleLogout }) => {
+  const classes = useStyles();
+  return (
+    <Drawer anchor="left" open={open} onClose={toggleOpen}>
+      <div className={classes.list}>
+        <Grid className={classes.grid} container justify="center">
+          <div>
+            <SCHBodyIcon width="64px" height="48px" />
+          </div>
+        </Grid>
+        <List>
+          {MENU_ITEMS.map((item) => (
+            <WrapperLink key={item.id} to={item.redirectTo}>
+              <ListItem className={classes.item}>
+                <ListItemText>{item.title}</ListItemText>
+              </ListItem>
+            </WrapperLink>
+          ))}
+        </List>
+        <Divider />
+        <List>
+          <ListItem className={classes.item} button onClick={handleLogout}>
+            <ListItemText>Kijelentkezés</ListItemText>
+          </ListItem>
+        </List>
+      </div>
+    </Drawer>
+  );
+};
+
+export default DrawerMenu;
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 23bc3e2fab51c1e4464a64ba5d630da394961d41..15df3a1c58b0bc71d9e11a0501e6eb8b8539b120 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,5 +1,222 @@
+import {
+  Box,
+  IconButton,
+  makeStyles,
+  Typography,
+  useMediaQuery,
+  useTheme,
+} from '@material-ui/core';
+import FacebookIcon from '@material-ui/icons/Facebook';
+import MailIcon from '@material-ui/icons/Mail';
 import React from 'react';
+import DevTeamIcon from './svg/DevTeamIcon';
+import SchdesignIcon from './svg/SchdesignIcon';
 
-const Footer: React.FC = () => <div>Footer</div>;
+const useMobileStyles = makeStyles((theme) => ({
+  footer: {
+    background: theme.footer.background,
+    padding: theme.spacing(1),
+  },
+  contactText: {
+    color: theme.palette.primary.contrastText,
+    fontSize: '1.7rem',
+    fontWeight: 500,
+    marginBottom: theme.spacing(1),
+    marginTop: theme.spacing(1),
+  },
+  social: {
+    color: theme.palette.secondary.main,
+    marginLeft: theme.spacing(3),
+    marginRight: theme.spacing(3),
+    marginBottom: theme.spacing(1),
+    marginTop: theme.spacing(1),
+    fontSize: '2rem',
+  },
+  socialButton: {
+    margin: 0,
+    padding: 0,
+  },
+  devteam: {
+    color: '#3051bf',
+    fontSize: '1.5rem',
+    paddingLeft: theme.spacing(1),
+    fontWeight: 500,
+  },
+  schdesign: {
+    marginTop: '0.65rem',
+  },
+  groups: {
+    marginTop: theme.spacing(1),
+  },
+  groupButton: {
+    paddingTop: '0.1rem',
+    paddingBottom: '0.1rem',
+  },
+}));
+
+const useDesktopStyles = makeStyles((theme) => ({
+  footer: {
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
+  },
+  contactText: {
+    fontSize: '1.8rem',
+  },
+  devteam: {
+    fontSize: '1.7rem',
+    paddingLeft: theme.spacing(1),
+  },
+  schdesignButton: {
+    paddingTop: '0.55rem',
+  },
+  contact: {
+    marginRight: theme.spacing(3),
+  },
+  social: {
+    fontSize: '1.5rem',
+    margin: '0',
+    marginRight: theme.spacing(1),
+    marginTop: theme.spacing(0.5),
+    marginBottom: theme.spacing(0.5),
+  },
+  socialText: {
+    color: theme.palette.secondary.main,
+  },
+}));
+
+const Footer: React.FC = () => {
+  const mClasses = useMobileStyles();
+  const dClasses = useDesktopStyles();
+  const theme = useTheme();
+
+  const isSmallScreen = useMediaQuery(theme.breakpoints.down('xs'));
+
+  const SmallScreen: React.FC = () => (
+    <Box display="flex" justifyContent="center" flexDirection="column">
+      <Typography align="center" className={mClasses.contactText}>
+        Kapcsolat
+      </Typography>
+      <Box display="flex" justifyContent="center">
+        <IconButton
+          className={mClasses.socialButton}
+          onClick={(): void => {
+            window.open('https://www.facebook.com/groups/schbody/');
+          }}
+        >
+          <FacebookIcon className={mClasses.social} />
+        </IconButton>
+        <IconButton
+          className={mClasses.socialButton}
+          onClick={(): void => {
+            window.location.href = 'mailto:body@sch.bme.hu';
+          }}
+        >
+          <MailIcon className={mClasses.social} />
+        </IconButton>
+      </Box>
+      <Box display="flex" justifyContent="space-around" className={mClasses.groups}>
+        <IconButton
+          className={mClasses.groupButton}
+          onClick={(): void => {
+            window.open('https://kszk.bme.hu/');
+          }}
+        >
+          <Box display="flex" justifyContent="center" alignItems="center">
+            <DevTeamIcon width="1.8rem" height="1.8rem" />
+            <Typography className={mClasses.devteam}>DevTeam</Typography>
+          </Box>
+        </IconButton>
+        <IconButton
+          className={mClasses.groupButton}
+          onClick={(): void => {
+            window.open('https://schdesign.hu/');
+          }}
+        >
+          <Box className={mClasses.schdesign}>
+            <SchdesignIcon
+              width="7.5rem"
+              height="2.5rem"
+              color1={theme.palette.primary.contrastText}
+            />
+          </Box>
+        </IconButton>
+      </Box>
+    </Box>
+  );
+
+  const LargeScreen: React.FC = () => (
+    <Box display="flex" justifyContent="space-between">
+      <Box
+        display="flex"
+        justifyContent="space-around"
+        alignItems="center"
+        className={mClasses.groups}
+      >
+        <IconButton
+          className={mClasses.groupButton}
+          onClick={(): void => {
+            window.open('https://kszk.bme.hu/');
+          }}
+        >
+          <Box display="flex" justifyContent="center" alignItems="center">
+            <DevTeamIcon width="2.25rem" height="2.25rem" />
+            <Typography className={`${mClasses.devteam} ${dClasses.devteam}`}>DevTeam</Typography>
+          </Box>
+        </IconButton>
+        <IconButton
+          className={`${mClasses.groupButton} ${dClasses.schdesignButton}`}
+          onClick={(): void => {
+            window.open('https://schdesign.hu/');
+          }}
+        >
+          <SchdesignIcon
+            width="8.75rem"
+            height="3.125rem"
+            color1={theme.palette.primary.contrastText}
+          />
+        </IconButton>
+      </Box>
+      <Box
+        display="flex"
+        flexDirection="column"
+        alignItems="flex-start"
+        className={dClasses.contact}
+      >
+        <Typography align="center" className={`${mClasses.contactText} ${dClasses.contactText}`}>
+          Kapcsolat
+        </Typography>
+        <Box display="flex" flexDirection="column" alignItems="flex-start">
+          <IconButton
+            className={mClasses.socialButton}
+            onClick={(): void => {
+              window.open('https://www.facebook.com/groups/schbody/');
+            }}
+          >
+            <Box display="flex" alignItems="center" justifyContent="center">
+              <FacebookIcon className={`${mClasses.social} ${dClasses.social}`} />
+              <Typography className={dClasses.socialText}>Facebook</Typography>
+            </Box>
+          </IconButton>
+
+          <IconButton
+            className={mClasses.socialButton}
+            onClick={(): void => {
+              window.location.href = 'mailto:body@sch.bme.hu';
+            }}
+          >
+            <MailIcon className={`${mClasses.social} ${dClasses.social}`} />
+            <Typography className={dClasses.socialText}>body@sch.bme.hu</Typography>
+          </IconButton>
+        </Box>
+      </Box>
+    </Box>
+  );
+
+  return (
+    <Box component="footer" className={`${mClasses.footer} ${!isSmallScreen && dClasses.footer}`}>
+      {isSmallScreen ? <SmallScreen /> : <LargeScreen />}
+    </Box>
+  );
+};
 
 export default Footer;
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 191c5bc6b9fed4543f0ddc9d4ad8bebb29f839fa..fccb5b18fab9e0c8802d88738f508a25dd4a6ffa 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,85 +1,126 @@
 import {
   AppBar,
+  Badge,
+  Box,
   Button,
   Grid,
+  IconButton,
   makeStyles,
   Tab,
   Tabs,
   Toolbar,
   Typography,
 } from '@material-ui/core';
+import { ExitToApp, MailOutline, Report } from '@material-ui/icons';
+import { isNil } from 'lodash';
 import React, { useState } from 'react';
 import { useHistory } from 'react-router';
+import { useUserContext } from '../hooks/useUserContext';
+import SCHBodyIcon from '../svg/SCHBodyIcon';
 
-interface AppBarMenuItem {
+export interface AppBarMenuItem {
   id: number;
   title: string;
   redirectTo: string;
 }
 
-const MENU_ITEMS: AppBarMenuItem[] = [
+export const MENU_ITEMS: AppBarMenuItem[] = [
   {
     id: 0,
-    title: 'News',
+    title: 'Hírek',
     redirectTo: '/news',
   },
   {
     id: 1,
-    title: 'About',
+    title: 'Rólunk',
     redirectTo: '/about',
   },
   {
     id: 2,
-    title: 'FAQ',
-    redirectTo: '/faq',
+    title: 'Házirend',
+    redirectTo: '/rules',
+  },
+];
+
+const USER_MENU_ITEMS: AppBarMenuItem[] = [
+  {
+    id: 3,
+    title: 'Időszakok',
+    redirectTo: '/terms',
+  },
+];
+
+const ADMIN_MENU_ITEMS: AppBarMenuItem[] = [
+  {
+    id: 4,
+    title: 'Felhasználók',
+    redirectTo: '/users',
   },
 ];
 
 const useStyles = makeStyles((theme) => ({
   appBar: {
     backgroundColor: theme.palette.primary.main,
-    padding: theme.spacing(1),
+  },
+  tabContainer: {
+    flexGrow: 1,
+    height: '100%',
+  },
+  tabs: {
+    height: '100%',
+    marginRight: `${theme.spacing(1)}px`,
   },
   tab: {
     color: theme.palette.secondary.main,
     fontWeight: 600,
-    padding: '0px',
+    minWidth: '0px',
   },
   indicator: {
+    height: '5px',
     backgroundColor: theme.palette.secondary.main,
   },
-  navItem: {
-    flex: 1,
-    alignItems: 'center',
-    '&:first-child': {
-      marginRight: 'auto;',
-    },
-    '&:last-child': {
-      marginRight: 'auto;',
-    },
+  texts: {
+    flexShrink: 0,
+    marginRight: `${theme.spacing(1)}px`,
+    marginLeft: `${theme.spacing(1)}px`,
   },
 }));
 
-const Header: React.FC = () => {
+export type HeaderProps = {
+  customToolbar?: React.ReactElement;
+  menuItems?: AppBarMenuItem[];
+  handleLogout?: () => void;
+};
+
+const Header: React.FC<HeaderProps> = ({ customToolbar, handleLogout, menuItems = MENU_ITEMS }) => {
   const classes = useStyles();
   const history = useHistory();
+  const { profile } = useUserContext();
   const [value, setValue] = useState(
-    MENU_ITEMS.find((item) => history.location.pathname === item.redirectTo)?.id ?? 0,
+    menuItems.find((item) => history.location.pathname === item.redirectTo)?.id ?? 0,
   );
 
   return (
     <AppBar className={classes.appBar} position="static">
-      <Toolbar>
-        <Grid container>
-          <Grid className={classes.navItem} item container justify="flex-start">
+      {customToolbar !== undefined ? (
+        customToolbar
+      ) : (
+        <Toolbar>
+          <div>
+            <SCHBodyIcon width="64px" height="48px" />
+          </div>
+
+          <Grid item className={classes.tabContainer} container justify="flex-end">
             <Tabs
+              className={classes.tabs}
+              classes={{ flexContainer: classes.tabs }}
               value={value}
               onChange={(event, val): void => {
                 setValue(val);
               }}
               TabIndicatorProps={{ className: classes.indicator }}
             >
-              {MENU_ITEMS.map((item) => (
+              {menuItems.map((item) => (
                 <Tab
                   key={item.id}
                   className={classes.tab}
@@ -89,18 +130,70 @@ const Header: React.FC = () => {
                   }}
                 />
               ))}
+              {!isNil(profile) && (
+                <>
+                  {USER_MENU_ITEMS.map((item) => (
+                    <Tab
+                      key={item.id}
+                      className={classes.tab}
+                      label={item.title}
+                      onClick={(): void => {
+                        history.push(item.redirectTo);
+                      }}
+                    />
+                  ))}
+
+                  {profile.role === 'ADMIN' && (
+                    <>
+                      {ADMIN_MENU_ITEMS.map((item) => (
+                        <Tab
+                          key={item.id}
+                          className={classes.tab}
+                          label={item.title}
+                          onClick={(): void => {
+                            history.push(item.redirectTo);
+                          }}
+                        />
+                      ))}
+                    </>
+                  )}
+                </>
+              )}
             </Tabs>
           </Grid>
-          <Grid className={classes.navItem} item container justify="center">
-            <Typography variant="h4">SCH-BODY</Typography>
-          </Grid>
-          <Grid className={classes.navItem} item container justify="flex-end">
+
+          {!isNil(profile) ? (
+            <>
+              <IconButton size="medium">
+                <Badge
+                  badgeContent={profile.notices.filter((item) => !item.isSeen).length}
+                  color="error"
+                >
+                  <MailOutline style={{ color: 'white' }} />
+                </Badge>
+              </IconButton>
+
+              {profile.warnings.length > 0 && (
+                <IconButton size="medium" disableRipple>
+                  <Report color="error" />
+                </IconButton>
+              )}
+              <Typography variant="h6" align="center" className={classes.texts}>
+                {profile.name}
+              </Typography>
+              <Box color="secondary.main">
+                <IconButton color="inherit" size="medium" onClick={handleLogout}>
+                  <ExitToApp />
+                </IconButton>
+              </Box>
+            </>
+          ) : (
             <Button color="secondary" variant="contained">
-              Login
+              Belépés
             </Button>
-          </Grid>
-        </Grid>
-      </Toolbar>
+          )}
+        </Toolbar>
+      )}
     </AppBar>
   );
 };
diff --git a/src/components/MobileHeader.tsx b/src/components/MobileHeader.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..76dee9a3cf6333bf20bd32d763184012e90472f2
--- /dev/null
+++ b/src/components/MobileHeader.tsx
@@ -0,0 +1,30 @@
+import { IconButton, Toolbar } from '@material-ui/core';
+import { Menu as MenuIcon, Person } from '@material-ui/icons';
+import React from 'react';
+import SCHBodyIcon from '../svg/SCHBodyIcon';
+import Header, { HeaderProps } from './Header';
+
+export type MobileHeaderProps = HeaderProps & {
+  onMenuClick: () => void;
+};
+
+const MobileHeader: React.FC<MobileHeaderProps> = ({ onMenuClick }) => {
+  return (
+    <Header
+      customToolbar={
+        <Toolbar>
+          <IconButton edge="start" color="inherit" aria-label="menu" onClick={onMenuClick}>
+            <MenuIcon />
+          </IconButton>
+          <div style={{ flexGrow: 1 }}>
+            <SCHBodyIcon width="64px" height="48px" />
+          </div>
+          {/* TODO: Profile image if present */}
+          <Person />
+        </Toolbar>
+      }
+    />
+  );
+};
+
+export default MobileHeader;
diff --git a/src/components/WrapperLink.tsx b/src/components/WrapperLink.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..99e9d2fb1cb1cbc7db5d428e7583731a7b315133
--- /dev/null
+++ b/src/components/WrapperLink.tsx
@@ -0,0 +1,20 @@
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+
+// Link component with removed underline style
+// For wrap components, which needs navigation
+
+const WrapperLink = styled(Link)`
+  text-decoration: none;
+
+  &:focus,
+  &:hover,
+  &:visited,
+  &:link,
+  &:active {
+    text-decoration: none;
+    color: inherit;
+  }
+`;
+
+export default WrapperLink;
diff --git a/src/components/svg/DevTeamIcon.tsx b/src/components/svg/DevTeamIcon.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4aa9a8137d71b36646825c5a90e361153b4af2f2
--- /dev/null
+++ b/src/components/svg/DevTeamIcon.tsx
@@ -0,0 +1,44 @@
+import * as React from 'react';
+
+interface IDevTeamIconProps extends React.SVGProps<SVGSVGElement> {
+  color1?: string;
+  color2?: string;
+}
+
+const DevTeamIcon: React.FC<IDevTeamIconProps> = ({
+  height = '1.5rem',
+  width = '1.5rem',
+  color1 = '#3051bf',
+  color2 = '#a806c9',
+  ...props
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height={height}
+      width={width}
+      viewBox="0 0 1024 1024"
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+    >
+      <title>devteam</title>
+      <g id="prefix__Layer_2" data-name="Layer 2">
+        <path
+          id="prefix__path4536"
+          d="M550.27 281.1L433.38 631.8a577.52 577.52 0 0067 30.16l119.25-357.74z"
+          fill={color2}
+        />
+        <path
+          d="M511.22 1023.85A511.83 511.83 0 11611.18 10c117.09 23.11 223.44 86 299.46 177 77.74 93 117.85 209 113 326.55 0 .86-.1 1.72-.19 2.58C1010.52 630 954 713.64 860.07 758.1c-71.2 33.68-160.89 43.27-259.39 27.72-89.68-14.17-180.26-48.58-254.93-96.91l-.41-.27L126 542.41a36.56 36.56 0 010-60.83l219.34-146.22 40.55 60.83L212.18 512l173.51 115.67c121.63 78.64 312.82 126 443.11 64.34 70.56-33.38 111.53-94.88 121.8-182.83 7.75-202.4-144-386-353.61-427.51-204.84-40.54-411.24 70.18-490.77 263.27s-11 417 163 532.53C442.85 992.73 675.38 969 822.15 821.06l51.9 51.49a510.56 510.56 0 01-362.83 151.3z"
+          fill={color1}
+        />
+        <path
+          d="M678.34 688.64l-40.55-60.84L811.5 512 637.79 396.19l40.55-60.83 219.34 146.22a36.55 36.55 0 010 60.83z"
+          fill={color1}
+        />
+      </g>
+    </svg>
+  );
+};
+
+export default DevTeamIcon;
diff --git a/src/components/svg/SchdesignIcon.tsx b/src/components/svg/SchdesignIcon.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..81ce7204c0f74b4bd70295a56e5294bdf3d390de
--- /dev/null
+++ b/src/components/svg/SchdesignIcon.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+
+interface ISchdesignIconProps extends React.SVGProps<SVGSVGElement> {
+  color1?: string;
+  color2?: string;
+}
+
+const SchdesignIcon: React.FC<ISchdesignIconProps> = ({
+  height = '2.5rem',
+  width = '6.25rem',
+  color1 = '#3d3d3d',
+  color2 = '#f8485e',
+  ...props
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 1259.51 337.41"
+      height={height}
+      width={width}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+    >
+      <title>{'logoEszk\xF6z 2'}</title>
+      <g id="prefix__R\xE9teg_2" data-name="R\xE9teg 2">
+        <g id="prefix__Layer_1" data-name="Layer 1">
+          <path
+            d="M563 0v93.23l-.08-.06a70 70 0 00-113.35 52.55v4.77A69.6 69.6 0 00460 184.93a71 71 0 0010 12.68 70 70 0 0092.87 5.39h.13a68.51 68.51 0 006-5.37A70.46 70.46 0 00579 185a69.61 69.61 0 0010.51-36.2V78h.15V0zm-43.49 191.42a43.39 43.39 0 1143.36-44.87v2.98a43.39 43.39 0 01-43.36 41.89zM919.66 78.53h26.49V218.1h-26.49zM1249.08 111.15a70 70 0 00-129.59 34.35v5a69.86 69.86 0 0020.51 47.11 70.64 70.64 0 006.15 5.45v-52.83c0-.76-.06-1.52-.06-2.29s0-1.52.06-2.28a43.12 43.12 0 016.41-20.52 43.77 43.77 0 016.25-7.88 43.38 43.38 0 0161.32 0 43.78 43.78 0 016.27 7.93 43.06 43.06 0 016.43 21.28V218h26.67v-70.78a69.63 69.63 0 00-10.42-36.07zM745 134.63a70 70 0 00-138.73 11v4.9a70 70 0 00119.47 47.11L707 178.77a43.39 43.39 0 01-72-17.28h110a69.82 69.82 0 001.28-12.69v-1.45a70.06 70.06 0 00-1.28-12.72zm-110 0a43.4 43.4 0 0182.52 0zM1092.4 111.1a71 71 0 00-10.12-12.76 71.82 71.82 0 00-6.12-5.44 70 70 0 00-86.68 0 68.35 68.35 0 00-6.18 5.48A69.89 69.89 0 00963.21 140c-.2 1.8-.34 3.61-.4 5.45v4.89a69.67 69.67 0 0010.45 34.45 70.91 70.91 0 0010.07 12.67 70 70 0 0098.95 0 69.91 69.91 0 0020.55-48.83v-1.45a69.66 69.66 0 00-10.43-36.08zm-59.6 80.19a43.37 43.37 0 01-43.32-41.11q-.06-1.12-.06-2.28t.06-2.28a43.38 43.38 0 0186.68.79v2.98a43.29 43.29 0 01-6.49 21.4 43.9 43.9 0 01-6.22 7.82 43.26 43.26 0 01-30.65 12.68zM1102.83 267.38a69.89 69.89 0 01-20.55 49.55 69.77 69.77 0 01-49.48 20.48 69.71 69.71 0 01-43.32-15 70.83 70.83 0 01-6.15-5.45l6.15-6.16 12.68-12.71a43.37 43.37 0 0074-29.21v-1.49-1.49a43.25 43.25 0 00-12.71-29.21l12.71-12.69 6.12-6.13a70.65 70.65 0 0110.12 12.76 69.75 69.75 0 0110.43 36.75z"
+            fill={color2}
+          />
+          <path
+            d="M276.15 197.63a70 70 0 01-119.47-47.11v-4.9a70 70 0 01119.47-47.11l-18.83 18.86a43.39 43.39 0 100 61.4zM412.31 98.48a68.9 68.9 0 00-6.14-5.48 70.06 70.06 0 00-86.67 0V0h-26.69v150.46a69.77 69.77 0 0020.52 47.12 70.51 70.51 0 006.14 5.45v-52.71q-.06-1.14-.06-2.28t.06-2.28a43.13 43.13 0 016.42-20.53 43.39 43.39 0 0180.25 20.88v71.99h26.69V148a69.83 69.83 0 00-20.52-49.52zM138.73 134.63h-110A43.39 43.39 0 0170 104.69a43.22 43.22 0 0130.65 12.68l18.83-18.86a70 70 0 00-92.8-5.46 68.35 68.35 0 00-6.18 5.48 70.33 70.33 0 00-10.07 12.7A69.83 69.83 0 000 145.62v4.9a70.69 70.69 0 001.24 11h110a43.39 43.39 0 01-71.91 17.29l-12.68 12.7-6.15 6.16a70 70 0 0099 0A69.79 69.79 0 00140 148.8v-1.45a71 71 0 00-1.27-12.72zM70 148.13l-.16.1.12-.12.07.07z"
+            fill={color1}
+          />
+          <circle cx={932.35} cy={13.33} r={13.33} fill={color2} />
+          <path
+            d="M901.72 134.63h-110a43.68 43.68 0 014.35-9.37 44.48 44.48 0 016.25-7.88 43.4 43.4 0 0161.32 0l18.82-18.86a70 70 0 00-92.8-5.46 68.23 68.23 0 00-6.17 5.48A69.66 69.66 0 00763 145.62v4.9a69.49 69.49 0 001.24 11h110a43.39 43.39 0 01-71.91 17.29l-12.68 12.7-6.15 6.16a70.76 70.76 0 006.15 5.46 70.06 70.06 0 0092.81-5.47 70.55 70.55 0 0010-12.64A69.79 69.79 0 00903 148.8v-1.45a70.06 70.06 0 00-1.28-12.72zM833 148.13l-.17.1.13-.12.06.07z"
+            fill={color2}
+          />
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+export default SchdesignIcon;
diff --git a/src/context/ThemeProvider.tsx b/src/context/ThemeProvider.tsx
index a32c2249373bd7826f228c0c1251a6631e180453..49bdd30dbe98d2a3ea1e4d71e905e5403efcd952 100644
--- a/src/context/ThemeProvider.tsx
+++ b/src/context/ThemeProvider.tsx
@@ -6,17 +6,16 @@ import {
 } from '@material-ui/core/styles';
 import React, { useMemo } from 'react';
 import { ThemeProvider as SCThemeProvider } from 'styled-components';
-import { theme as defaultTheme } from '../theme';
+import lightTheme from '../styles/lightTheme';
 
 export interface ThemeProviderProps {
   theme?: Theme;
 }
 
 const ThemeProvider: React.FC<ThemeProviderProps> = ({ theme: themeProp, children }) => {
-  const theme = useMemo(
-    () => (themeProp ? createMuiTheme(defaultTheme, themeProp) : defaultTheme),
-    [themeProp],
-  );
+  const theme = useMemo(() => (themeProp ? createMuiTheme(lightTheme, themeProp) : lightTheme), [
+    themeProp,
+  ]);
   return (
     <StylesProvider injectFirst>
       <MUIThemeProvider theme={theme}>
diff --git a/src/context/UserContext.tsx b/src/context/UserContext.tsx
index 6dbe3ef4ed5241ff2d06c7fac61b90dd2b54c403..e05fe777084579ce0c6318cc70b19cdbff831ca8 100644
--- a/src/context/UserContext.tsx
+++ b/src/context/UserContext.tsx
@@ -1,29 +1,32 @@
 import React, { createContext, useState } from 'react';
 import { IProfile, Role } from '../types/Profile';
 
-interface ContextProps {
-  profile: IProfile;
+export interface UserContextType {
+  profile: IProfile | undefined;
   setProfile: (profile: IProfile) => void;
 }
 
 // Context
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const initialState: IProfile = {
   externalId: 'abcd',
   studentCardNumber: '1234',
   roomNumber: 104,
-  role: Role.User,
+  role: Role.Admin,
   email: 'alma@gmail.com',
   name: 'Nagy Gizike',
   warnings: [],
-  notices: [],
+  notices: [{ _id: '123', text: 'Asd', isSeen: false }],
 };
-export const userContext = createContext({} as ContextProps);
-const { Provider } = userContext;
+
+export const UserContext = createContext({} as UserContextType);
+
+const { Provider } = UserContext;
 
 export const UserStateProvider: React.FC = ({ children }) => {
-  const [profile, setProfile] = useState<IProfile>(initialState);
+  const [profile, setProfile] = useState<IProfile | undefined>(initialState);
 
   return <Provider value={{ profile, setProfile }}>{children}</Provider>;
 };
 
-export default { userContext, UserStateProvider };
+export default { UserContext, UserStateProvider };
diff --git a/src/hooks/useToggle.ts b/src/hooks/useToggle.ts
new file mode 100644
index 0000000000000000000000000000000000000000..89eec270f3c3b0e817429cd99573917e7bbeaa98
--- /dev/null
+++ b/src/hooks/useToggle.ts
@@ -0,0 +1,19 @@
+import { useRef, useState } from 'react';
+
+// eslint-disable-next-line import/prefer-default-export
+export function useToggle(
+  defaultState = false,
+): [boolean, { toggleOn: () => void; toggleOff: () => void; toggle: () => void }] {
+  const [state, setState] = useState(defaultState);
+  const toggleOn = useRef(() => setState(true));
+  const toggleOff = useRef(() => setState(false));
+  const toggle = useRef(() => setState((s) => !s));
+  return [
+    state,
+    {
+      toggleOn: toggleOn.current,
+      toggleOff: toggleOff.current,
+      toggle: toggle.current,
+    },
+  ];
+}
diff --git a/src/hooks/useUserContext.ts b/src/hooks/useUserContext.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6813b61a8972fdcc93b534c189569ba390b8b9e7
--- /dev/null
+++ b/src/hooks/useUserContext.ts
@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import { UserContext, UserContextType } from '../context';
+
+// eslint-disable-next-line import/prefer-default-export
+export function useUserContext(): UserContextType {
+  const userContext = useContext(UserContext);
+  if (!userContext) {
+    throw new Error('You must use `UserContextProvider` to access the `IntervalContext`.');
+  }
+  return userContext;
+}
diff --git a/src/pages/Page.tsx b/src/pages/Page.tsx
index d2204f6460d05e80232a5c3bd71f695facb3f575..c0e23b076a7b286fac1f120201c1aebd7a3dd1b5 100644
--- a/src/pages/Page.tsx
+++ b/src/pages/Page.tsx
@@ -1,30 +1,40 @@
+import { Box, makeStyles, Theme, useMediaQuery } from '@material-ui/core';
 import React from 'react';
-import styled from 'styled-components';
+import DrawerMenu from '../components/DrawerMenu';
 import Footer from '../components/Footer';
 import Header from '../components/Header';
+import MobileHeader from '../components/MobileHeader';
+import { useToggle } from '../hooks/useToggle';
 
-const Container = styled.div(
-  (props) => `
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-
-  background-color: ${props.theme.palette.background.default};
-`,
-);
-
-const MainContent = styled.div`
-  height: 100%;
-`;
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    minHeight: '100vh',
+    background: theme.palette.background.default,
+  },
+}));
 
 const Page: React.FC = ({ children }) => {
+  const [openDrawer, { toggleOn, toggleOff }] = useToggle(false);
+  const isMobile = useMediaQuery((theme: Theme) => theme.breakpoints.down('xs'));
+  const classes = useStyles();
+
   return (
-    <Container>
-      <Header />
-      <MainContent>{children}</MainContent>
+    <Box className={classes.root}>
+      {isMobile ? (
+        <MobileHeader onMenuClick={toggleOn} />
+      ) : (
+        <Header handleLogout={(): void => {}} />
+      )}
+      {isMobile && (
+        <DrawerMenu open={openDrawer} toggleOpen={toggleOff} handleLogout={(): void => {}} />
+      )}
+      <Box flexGrow={1} flexShrink={0} flexBasis="auto">
+        {children}
+      </Box>
       <Footer />
-    </Container>
+    </Box>
   );
 };
 
diff --git a/src/pages/RulesPage.tsx b/src/pages/RulesPage.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..fd06edd9be9660a64dc2d862f540451e44ede44d
--- /dev/null
+++ b/src/pages/RulesPage.tsx
@@ -0,0 +1,77 @@
+import { Box, Container, Divider, List, ListItem, makeStyles, Typography } from '@material-ui/core';
+import React from 'react';
+import Page from './Page';
+
+const useStyles = makeStyles((theme) => ({
+  title: {
+    marginTop: 30,
+    marginBottom: 30,
+    fontSize: '36px',
+    color: theme.palette.primary.contrastText,
+  },
+  container: {
+    color: theme.palette.primary.contrastText,
+    backgroundColor: theme.palette.background.paper,
+    margin: theme.spacing(2),
+    padding: theme.spacing(1),
+  },
+  text: {
+    fontSize: '18px',
+  },
+}));
+
+const RulesPage: React.FC = () => {
+  const classes = useStyles();
+
+  return (
+    <Page>
+      <Container>
+        <Typography className={classes.title} align="center">
+          Házirend
+        </Typography>
+        <List className={classes.container}>
+          <ListItem divider>
+            <Typography className={classes.text}>
+              Mindenki a saját testi épségéért felelős! Alkohol vagy drog hatása alatt a teremben
+              tartózkodni, edzeni tilos!
+            </Typography>
+          </ListItem>
+          <ListItem>
+            <Typography className={classes.text}>
+              A konditerem csak érvényes
+              <Box component="span" fontWeight="fontWeightBold" px={1}>
+                BELÉPŐVEL
+              </Box>
+              és megfelelő
+              <Box component="span" fontWeight="fontWeightBold" pl={1}>
+                TISZTA CIPŐBEN, ALSÓ- ÉS FELSŐRUHÁZATBAN HASZNÁLHATÓ
+              </Box>
+              ! A félmeztelen edzés tilos! A kondi belépőnek az edzés ideje alatt végig nálad kell
+              lennie a teremben!
+            </Typography>
+          </ListItem>
+          <Divider />
+          <ListItem>
+            <Typography className={classes.text}>
+              A teremben higiéniai okok miatt mindenkinek saját, megfelelő méretű
+              <Box component="span" fontWeight="fontWeightBold" pl={1}>
+                TÖRÖLKÖZŐ HASZNÁLATA KÖTELEZŐ
+              </Box>
+              ! Csak a kardió részleg használata esetén is kell törölköző!
+            </Typography>
+          </ListItem>
+          <Divider />
+          <ListItem>
+            <Typography className={classes.text}>
+              A terem csak tiszta, zárt, gumitalpú cipőben használható! Mezítlábas, zoknis és
+              papucsos edzés tilos! A terembe utcai cipőben belépni tilos! Aki megfelelő ruházat
+              nélkül edz, az edzés azonnali megszakítására, és a terem elhagyására kötelezhető.
+            </Typography>
+          </ListItem>
+        </List>
+      </Container>
+    </Page>
+  );
+};
+
+export default RulesPage;
diff --git a/src/setupProxy.js b/src/setupProxy.js
index a4b1c75f070cdcf2248b8bdef529c9b826bc4cb3..971e3679702d6223d3a9cb4534c0a84612fae486 100644
--- a/src/setupProxy.js
+++ b/src/setupProxy.js
@@ -4,7 +4,7 @@ module.exports = function (app) {
   app.use(
     '/api/v1',
     createProxyMiddleware({
-      target: 'http://localhost:8000',
+      target: 'https://body-dev.maze.sch.bme.hu/dev',
       changeOrigin: true,
     }),
   );
diff --git a/src/theme.ts b/src/styles/darkTheme.ts
similarity index 57%
rename from src/theme.ts
rename to src/styles/darkTheme.ts
index b40cff6a6f63846c622d1abc6dc226dde0fb738f..719abe9478baa6319bb395fdcc517b8f922cecd5 100644
--- a/src/theme.ts
+++ b/src/styles/darkTheme.ts
@@ -1,25 +1,9 @@
 import { createMuiTheme } from '@material-ui/core';
 
-// eslint-disable-next-line import/prefer-default-export
-export const theme = createMuiTheme({
-  // TODO: Create default theme
-  /*   palette: {
-    primary: {},
-    secondary: {},
-    error: {},
-    success: {},
-    info: {},
-    warning: {},
-    grey: {},
-
-    text: {},
-  }, */
-  typography: {
-    fontFamily: 'Roboto',
+const darkTheme = createMuiTheme({
+  footer: {
+    background: '#222222',
   },
-});
-
-export const darkTheme = createMuiTheme({
   palette: {
     primary: {
       main: '#1A6B97',
@@ -36,6 +20,8 @@ export const darkTheme = createMuiTheme({
       default: '#2A2A28',
       paper: '#202020',
     },
+
+    divider: '#444444',
     /* success: {},
     info: {},
     warning: {}, */
@@ -48,3 +34,5 @@ export const darkTheme = createMuiTheme({
     fontFamily: 'Roboto',
   },
 });
+
+export default darkTheme;
diff --git a/src/styles/lightTheme.ts b/src/styles/lightTheme.ts
new file mode 100644
index 0000000000000000000000000000000000000000..157b6cfeb25b2e724111ca3330fc735e65777f1f
--- /dev/null
+++ b/src/styles/lightTheme.ts
@@ -0,0 +1,24 @@
+import { createMuiTheme } from '@material-ui/core';
+
+const lightTheme = createMuiTheme({
+  // TODO: Create default theme
+  /*   palette: {
+      primary: {},
+      secondary: {},
+      error: {},
+      success: {},
+      info: {},
+      warning: {},
+      grey: {},
+  
+      text: {},
+    }, */
+  footer: {
+    background: '#E0E0E0',
+  },
+  typography: {
+    fontFamily: 'Roboto',
+  },
+});
+
+export default lightTheme;
diff --git a/src/styles/material-ui.d.ts b/src/styles/material-ui.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..93c7b56235c73cd6cc11933e9de3347372a4b2a3
--- /dev/null
+++ b/src/styles/material-ui.d.ts
@@ -0,0 +1,10 @@
+import '@material-ui/core/styles/createMuiTheme';
+
+declare module '@material-ui/core/styles/createMuiTheme' {
+  interface Theme {
+    footer: {
+      background: React.CSSProperties['background'];
+    };
+  }
+  interface ThemeOptions extends Theme {}
+}
diff --git a/src/styled-components.d.ts b/src/styles/styled-components.d.ts
similarity index 100%
rename from src/styled-components.d.ts
rename to src/styles/styled-components.d.ts
diff --git a/src/svg/SCHBodyIcon.tsx b/src/svg/SCHBodyIcon.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3289d74d2d62b63d31a79d44ef544c27c169a00d
--- /dev/null
+++ b/src/svg/SCHBodyIcon.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+
+interface ISCHBodyIconProps extends React.SVGProps<SVGSVGElement> {
+  color?: string;
+}
+
+const SCHBodyIcon: React.FC<ISCHBodyIconProps> = ({
+  height = '24px',
+  width = '24px',
+  color = '#FFFFFF',
+  ...props
+}) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 103 45"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+    >
+      <g clipPath="url(#clip0)">
+        <path
+          d="M7.19328 0.249505C7.04203 0.387624 6.3703 1.01139 5.69858 1.6396C5.02685 2.26782 4.15938 3.07871 3.76791 3.4396C3.38089 3.80049 2.80703 4.33515 2.49563 4.62475C2.18423 4.91881 1.49916 5.55594 0.969781 6.04604C0.903053 6.10396 0.582758 6.39802 0.00444854 6.93267L0.0266912 11.2678L0.0489339 15.6074C6.59273 15.6208 10.2316 15.6252 10.9612 15.6297C16.9623 15.6386 21.8868 15.6653 21.9046 15.6832C21.9224 15.701 21.5398 16.0842 21.0505 16.5342C20.9926 16.5876 20.6946 16.8594 20.1652 17.3495H10.0804H0V20.7936V24.2332C7.82053 24.2332 12.1623 24.2332 13.0298 24.2332C20.2008 24.2332 26.0773 24.202 26.0951 24.1619C26.1129 24.1262 26.4866 23.7564 26.927 23.3421C27.3674 22.9322 28.0881 22.2549 28.5285 21.8361C29.5071 20.9094 31.6069 18.9579 32.59 18.0579C32.6345 18.0134 32.8747 17.795 33.3106 17.3985L33.3195 13.0366L33.3284 8.67475L22.3361 8.6703L11.3438 8.66584L12.2379 7.82376L13.1321 6.98168H23.2303L33.3284 6.97723V3.48861V0H20.3965H7.46464L7.19328 0.249505ZM42.1321 0.436634C41.4604 1.05594 40.6418 1.82228 39.8233 2.58861C39.4363 2.95842 38.5911 3.74257 37.946 4.3396C37.301 4.93663 36.3979 5.77871 35.9442 6.21535C35.8908 6.26881 35.615 6.53168 35.1167 7.00841V12.1678V17.3272C35.4726 17.6525 35.6684 17.8351 35.704 17.8708C37.688 19.7109 38.6355 20.5931 39.3028 21.2213C39.721 21.6134 40.2904 22.1436 40.5706 22.402C40.8509 22.6559 41.4025 23.1728 41.794 23.547C41.8429 23.5916 42.0787 23.8188 42.5058 24.2287L55.4777 24.2332H68.4452V20.7936V17.3495H58.3959H48.3467C48.1109 17.1356 47.9819 17.0198 47.9552 16.9975C47.7372 16.8015 46.8609 15.9906 46.0023 15.1931C45.8955 15.095 45.3751 14.6094 44.4364 13.7406V12.1634V10.5817C45.1882 9.88218 45.6019 9.49455 45.6865 9.41881C46.3715 8.77723 47.2346 7.96634 47.5993 7.61436C47.6438 7.5698 47.8662 7.3604 48.2666 6.97723H58.3559H68.4452V3.48861V0L55.5266 0.00445544H42.6036L42.1321 0.436634ZM70.3314 12.1188V24.2332H74.9445H79.5576V19.9426V15.652H86.9466H94.3357V19.9693V24.2822L98.9977 24.2554L103.66 24.2287L103.633 12.1411L103.611 0.0490099H98.9977H94.3846L94.3579 4.36188L94.3357 8.67475H86.9466H79.5576V4.3396V0H74.9445H70.3314V12.1188ZM0 35.6926V45.3564H12.4292H24.854V41.8901V38.4282C24.0577 37.6262 23.6173 37.1851 23.5283 37.096C21.9624 35.5233 21.9491 35.853 23.6262 34.1911C23.7107 34.1109 24.12 33.7054 24.854 32.9748V29.4995V26.0243H12.4292H0V35.6926ZM28.9733 28.7955L26.2686 31.5356V35.7059V39.8807L29.0045 42.6163L31.7403 45.3564H38.68H45.6197L48.3734 42.5941L51.1226 39.8317V35.6926V31.549L48.3734 28.7866L45.6197 26.0243L38.6489 26.0421L31.6825 26.0554L28.9733 28.7955ZM52.4393 35.6926V45.3564H62.1149H71.7905L74.5441 42.5985L77.2978 39.8406V35.6881V31.5401L74.5397 28.7822L71.786 26.0243H62.1149H52.4393V35.6926ZM78.6145 30.15V34.2757L81.4127 37.0827L84.2108 39.8851H85.8834H87.5605V42.6208V45.3564H91.0437H94.527V42.6208V39.8851H96.2396H97.9568L100.71 37.1317L103.469 34.3738V30.199V26.0243H100.034H96.5955V28.6886V31.3574L95.1142 32.8411L93.6283 34.3247H91.0393H88.4502L87.0178 32.8856L85.5809 31.4465V28.7376V26.0243H82.0977H78.6145V30.15ZM16.2861 31.6559C16.2861 31.696 16.0236 31.9901 15.7033 32.3153C15.6633 32.3554 15.4676 32.5559 15.1161 32.9079H11.0413H6.96641V32.2485V31.5891C9.76454 31.5891 11.3171 31.5891 11.6285 31.5891C14.1908 31.5891 16.2861 31.6203 16.2861 31.6559ZM42.7193 33.0238L44.1562 34.4629V35.6881V36.9134L42.7193 38.3525L41.2869 39.7916H38.6489H36.0154L34.5785 38.3569L33.1416 36.9178V35.6926V34.4673L34.574 33.0282L36.0109 31.5891H38.6444H41.2824L42.7193 33.0238ZM68.9434 32.9792L70.3314 34.3738V35.6926V37.0069L68.9434 38.4015L67.5555 39.7916H63.4851H59.4102L59.388 35.6926L59.3613 31.5891H63.4584H67.5555L68.9434 32.9792ZM15.6989 39.0609C16.0236 39.3817 16.2861 39.6802 16.2861 39.7203C16.2861 39.7604 14.1908 39.7916 11.6285 39.7916C11.3171 39.7916 9.76454 39.7916 6.96641 39.7916V39.1322V38.4728H11.0368H15.1072L15.6989 39.0609Z"
+          fill={color}
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0">
+          <rect width="102.761" height="45" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default SCHBodyIcon;