diff --git a/.eslintrc.js b/.eslintrc.js
index f1281fe4ed12edeaf22626d69001e31d8a896500..ef676d02f2e2bf6e1caa598d9f3452300bc4ed53 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -17,5 +17,6 @@ module.exports = {
     '@typescript-eslint/explicit-function-return-type': 1,
     'object-curly-newline': 0,
     'implicit-arrow-linebreak': 0,
+    'react/prop-types': 0,
   },
 };
diff --git a/.gitignore b/.gitignore
index a76b6de4a008d55a2d491c7f5aaa994e36cfb078..6a72e614340944f47898294ba08a634f3db03f44 100644
--- a/.gitignore
+++ b/.gitignore
@@ -51,9 +51,5 @@ package-lock.json
 *.jpg
 *.ico
 
-# Docker files
-Dockerfile*
-Dockerfile.*
-docker-compose.*
 # Configuration files
 config/*
diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
new file mode 100644
index 0000000000000000000000000000000000000000..ea92fc89f7be734c2a61c29d4dc1ee86870e6d37
--- /dev/null
+++ b/.gitlab-ci.yml
@@ -0,0 +1,89 @@
+stages:
+  - Build
+  #  - Test
+  - Docker build
+  - Deploy
+
+#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/
+
+#Test:
+#  stage: Test
+#  tags: [kszk]
+#  image: node:14
+#  script:
+#    - npm test
+#  artifacts:
+#    expire_in: 1 week
+#    paths:
+#      - junit.xml
+#    reports:
+#      junit: junit.xml
+
+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
+
+# Deploy prod:
+#   stage: Deploy
+#   tags: [kszk-deploy] # request the custom SSH executor
+#   only:
+#     - master
+#   script: # your deploy logic
+#     - echo "$REGISTRY_PASSWORD" | docker login registry.kszk.bme.hu --username $REGISTRY_USER --password-stdin
+#     - cp docker-compose.yml /home/kszk-gitlab-deployer/kszkepzes-prod/
+#     - cd /home/kszk-gitlab-deployer/kszkepzes-prod/
+#     - docker-compose --no-ansi pull
+#     - docker-compose 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
diff --git a/.prettierignore b/.prettierignore
index 18a79da9d9afe8f54cdf97bc1d83bc5618009c1c..9bb1f58d5b979095018e764130581c0e33cc6d3e 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -62,4 +62,10 @@ config/*
 
 # Auto generated by React
 serviceWorker.*
-setupTests.*
\ No newline at end of file
+setupTests.*
+
+tools/*
+
+.gitlab-ci.yml
+
+nginx.conf
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000000000000000000000000000000000000..5e7308f4a21f5795d9a53d9c1e90e8aab24d68ed
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,9 @@
+FROM nginx:1.19.2
+
+# copy the files builded with npm run build
+COPY build /var/www
+COPY nginx.conf /etc/nginx/nginx.conf
+
+EXPOSE 3040
+
+ENTRYPOINT ["nginx","-g","daemon off;"]
diff --git a/README.md b/README.md
index 5f6fa9352035a5fdd0be9124202fa33d846be0ef..b3d603f830e39045997f763f3f64ff1aa1d1ec73 100644
--- a/README.md
+++ b/README.md
@@ -1,37 +1,11 @@
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
-
-Environment variables needed in development found in `.env.example` !
-
-## Available Scripts
-
-In the project directory, you can run:
-
-### `npm start`
-
-Runs the app in the development mode.<br />
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-
-### `npm test`
-
-Launches the test runner in the interactive watch mode.<br />
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+## BodySCH Frontend
 
-### `npm run build`
-
-Builds the app
-
-### `npm run lint`
-
-Runs the linter in the console.
-
-### `npm run format`
-
-Format the files in the project with prettier.
-
-### `npm run validate`
-
-Checks the formatting and linter rules for all the files in the source.
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
-### `npm run fix`
+#### Local proxy
 
-It runs the formatting and the linter with --fix option
+`./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
new file mode 100644
index 0000000000000000000000000000000000000000..64c933a5d11864d64ab63646c56187ee26566ea3
--- /dev/null
+++ b/docker-compose.dev.yml
@@ -0,0 +1,29 @@
+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/nginx.conf b/nginx.conf
new file mode 100644
index 0000000000000000000000000000000000000000..cefc7c4efe67080625d7d9930ac12bb034dc2dae
--- /dev/null
+++ b/nginx.conf
@@ -0,0 +1,61 @@
+# auto detects a good number of processes to run
+worker_processes auto;
+
+#Provides the configuration file context in which the directives that affect connection processing are specified.
+events {
+    # Sets the maximum number of simultaneous connections that can be opened by a worker process.
+    worker_connections 8000;
+    # Tells the worker to accept multiple connections at a time
+    multi_accept on;
+}
+
+
+http {
+    # what times to include
+    include       /etc/nginx/mime.types;
+    # what is the default one
+    default_type  application/octet-stream;
+
+    # Sets the path, format, and configuration for a buffered log write
+    log_format compression '$remote_addr - $remote_user [$time_local] '
+        '"$request" $status $upstream_addr '
+        '"$http_referer" "$http_user_agent"';
+
+    server {
+        # listen on port 80
+        listen 3040;
+        # save logs here
+        access_log /var/log/nginx/access.log compression;
+
+        # where the root here
+        root /var/www;
+        # what file to server as index
+        index index.html index.htm;
+
+        location / {
+            # First attempt to serve request as file, then
+            # as directory, then fall back to redirecting to index.html
+            try_files $uri $uri/ /index.html;
+        }
+
+        # Media: images, icons, video, audio, HTC
+        location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
+          expires 1M;
+          access_log off;
+          add_header Cache-Control "public";
+        }
+
+        # Javascript and CSS files
+        location ~* \.(?:css|js)$ {
+            try_files $uri =404;
+            expires 1y;
+            access_log off;
+            add_header Cache-Control "public";
+        }
+
+        # Any route containing a file extension (e.g. /devicesfile.js)
+        location ~ ^.+\..+$ {
+            try_files $uri =404;
+        }
+    }
+}
diff --git a/package-lock.json b/package-lock.json
index 1809a4e2106aef7b676b8dd119da39e14f77a134..a1fa745d694cc2f577fd86ec711188fb7d69af0b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2512,6 +2512,14 @@
         }
       }
     },
+    "@material-ui/icons": {
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.9.1.tgz",
+      "integrity": "sha512-GBitL3oBWO0hzBhvA9KxqcowRUsA0qzwKkURyC8nppnC3fw54KPKZ+d4V1Eeg/UnDRSzDaI9nGCdel/eh9AQMg==",
+      "requires": {
+        "@babel/runtime": "^7.4.4"
+      }
+    },
     "@material-ui/styles": {
       "version": "4.10.0",
       "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.10.0.tgz",
@@ -2934,7 +2942,6 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
       "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
-      "dev": true,
       "requires": {
         "@types/react": "*",
         "hoist-non-react-statics": "^3.3.0"
@@ -3037,7 +3044,6 @@
       "version": "0.63.6",
       "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.63.6.tgz",
       "integrity": "sha512-qAv/VOyXAk4it9MOsQoyUjUnEJ3kAW1FCRGi0OvfQDKLH1/FFogVFvoB6xAlBNc6lPyBtCg+nvzj/ScYe0PqCQ==",
-      "dev": true,
       "requires": {
         "@types/react": "*"
       }
@@ -3080,7 +3086,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.2.tgz",
       "integrity": "sha512-HNocYLfrsnNNm8NTS/W53OERSjRA8dx5Bn6wBd2rXXwt4Z3s+oqvY6/PbVt3e6sgtzI63GX//WiWiRhWur08qQ==",
-      "dev": true,
       "requires": {
         "@types/hoist-non-react-statics": "*",
         "@types/react": "*",
@@ -3091,8 +3096,7 @@
         "csstype": {
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.2.tgz",
-          "integrity": "sha512-ofovWglpqoqbfLNOTBNZLSbMuGrblAf1efvvArGKOZMBrIoJeu5UsAipQolkijtyQx5MtAzT/J9IHj/CEY1mJw==",
-          "dev": true
+          "integrity": "sha512-ofovWglpqoqbfLNOTBNZLSbMuGrblAf1efvvArGKOZMBrIoJeu5UsAipQolkijtyQx5MtAzT/J9IHj/CEY1mJw=="
         }
       }
     },
diff --git a/package.json b/package.json
index 337d77d817d78cf3920f2b1503b53dbf8d31c583..f4161caa1e5a932a1400ad84c664ef8b42e6aab9 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,8 @@
   },
   "dependencies": {
     "@material-ui/core": "^4.11.0",
+    "@material-ui/icons": "^4.9.1",
+    "@types/styled-components": "^5.1.2",
     "axios": "^0.20.0",
     "http-proxy-middleware": "^1.0.5",
     "react": "^16.13.1",
diff --git a/public/style.css b/public/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..5b9993abe8a209887cfbbd3a1959bc6a720bb93e
--- /dev/null
+++ b/public/style.css
@@ -0,0 +1,24 @@
+#modal {
+  background-color: rgba(0, 0, 0, 0.4);
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#modal:empty {
+  display: none;
+}
+
+#modal > div {
+  background-color: #ffffff;
+  max-width: 500px;
+  padding: 10px;
+  border-radius: 5px;
+  text-align: center;
+}
diff --git a/src/core/App.tsx b/src/core/App.tsx
index f9243ddba1c4f5508331442f87cb184322ba0c32..00d70f3d25ef7e15a784a3c7624c98e35d417e5e 100644
--- a/src/core/App.tsx
+++ b/src/core/App.tsx
@@ -5,6 +5,7 @@ import useAddNews from '../hooks/useAddNews';
 import Footer from './components/Footer';
 import Header from './components/Header';
 import MainRouting from './components/MainRouting';
+import { UserStateProvider } from './context/UserContext';
 
 const Container = styled.div`
   height: 100%;
@@ -31,15 +32,17 @@ function App(): React.ReactElement {
   }, [response.data]);
 
   return (
-    <Router>
-      <Container>
-        <Header />
-        <MainContent>
-          <MainRouting />
-        </MainContent>
-        <Footer />
-      </Container>
-    </Router>
+    <UserStateProvider>
+      <Router>
+        <Container>
+          <Header />
+          <MainContent>
+            <MainRouting />
+          </MainContent>
+          <Footer />
+        </Container>
+      </Router>
+    </UserStateProvider>
   );
 }
 
diff --git a/src/core/components/CustomModal.tsx b/src/core/components/CustomModal.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e0c6af7a42e9cf8c739090064058120c217d9a35
--- /dev/null
+++ b/src/core/components/CustomModal.tsx
@@ -0,0 +1,75 @@
+import { Modal } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import React, { Dispatch, SetStateAction } from 'react';
+
+type Dispatcher<S> = Dispatch<SetStateAction<S>>;
+
+interface ICustomModalProps {
+  isOpen: boolean;
+  setIsOpen: Dispatcher<boolean>;
+  children: React.ReactNode;
+  customStyle: {
+    backgroundColor?: string;
+    padding?: string;
+    width?: string;
+    border?: string;
+    borderRadius?: string;
+  };
+}
+
+const useStyles = makeStyles((theme) => ({
+  modal: (customStyle: ICustomModalProps['customStyle']) => ({
+    backgroundColor: 'transparent',
+    margin: '7% auto',
+    padding: 'none',
+    border: 'none',
+    width: customStyle.width || '85%',
+    [theme.breakpoints.down(700)]: {
+      margin: '3% auto',
+      width: '95%',
+    },
+  }),
+  modalContent: (customStyle: ICustomModalProps['customStyle']) => ({
+    ...{
+      backgroundColor: customStyle.backgroundColor || 'theme.palette.background.paper',
+      border: customStyle.border || 'none',
+      padding: customStyle.padding || 'none',
+      borderRadius: customStyle.borderRadius || 'none',
+      boxShadow: theme.shadows[5],
+      '&:focus': {
+        outline: 'none',
+      },
+    },
+  }),
+}));
+
+export const CustomModal = ({
+  isOpen,
+  setIsOpen,
+  customStyle = {},
+  children,
+}: ICustomModalProps) => {
+  const classes = useStyles(customStyle);
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
+  const body = <div className={classes.modalContent}>{children}</div>;
+
+  return (
+    <div>
+      <Modal
+        className={classes.modal}
+        open={isOpen}
+        onClose={handleClose}
+        aria-labelledby="custom-modal"
+        aria-describedby="custom-modal"
+      >
+        {body}
+      </Modal>
+    </div>
+  );
+};
+
+export default CustomModal;
diff --git a/src/core/components/MainRouting.tsx b/src/core/components/MainRouting.tsx
index 0fbdfe5a262e29071d8171c0d43962645a43f3a4..7230169b536bba8987c8f4f8bd6888735594d496 100644
--- a/src/core/components/MainRouting.tsx
+++ b/src/core/components/MainRouting.tsx
@@ -5,7 +5,7 @@ import NewsPage from '../../components/NewsPage';
 const MainRouting: React.FC = () => (
   <Switch>
     <Route path="/" exact>
-      Hello
+      <ProfileButton />
     </Route>
     <Route path="/news">
       <NewsPage />
diff --git a/src/core/components/ProfileButton.tsx b/src/core/components/ProfileButton.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..34451f47da81afa65fbc46141699763f75aee43a
--- /dev/null
+++ b/src/core/components/ProfileButton.tsx
@@ -0,0 +1,22 @@
+import { Button } from '@material-ui/core';
+import React, { useState } from 'react';
+import { ProfileModal } from './ProfileModal';
+
+export const ProfileButton = () => {
+  const [isProfileModalOpen, setIsProfileModalOpen] = useState<boolean>(true);
+
+  const handleProfileModalOpen = () => {
+    setIsProfileModalOpen(true);
+  };
+
+  return (
+    <div>
+      <Button variant="contained" color="primary" onClick={handleProfileModalOpen}>
+        Open Profile
+      </Button>
+      <ProfileModal isOpen={isProfileModalOpen} setIsOpen={setIsProfileModalOpen} />
+    </div>
+  );
+};
+
+export default ProfileButton;
diff --git a/src/core/components/ProfileModal.tsx b/src/core/components/ProfileModal.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e97aba03daf8c8023a6ab7345b82544e5f119b4f
--- /dev/null
+++ b/src/core/components/ProfileModal.tsx
@@ -0,0 +1,77 @@
+// eslint-disable-next-line object-curly-newline
+import { Avatar, Box, Button, IconButton, TextField, Typography } from '@material-ui/core';
+import CloseIcon from '@material-ui/icons/Close';
+import React, { Dispatch, SetStateAction } from 'react';
+import { CustomModal } from './CustomModal';
+
+type Dispatcher<S> = Dispatch<SetStateAction<S>>;
+
+interface IProfileModalProps {
+  isOpen: boolean;
+  setIsOpen: Dispatcher<boolean>;
+}
+
+export const ProfileModal = ({ isOpen, setIsOpen }: IProfileModalProps) => {
+  const onClose = () => {
+    setIsOpen(false);
+  };
+  return (
+    <CustomModal
+      isOpen={isOpen}
+      setIsOpen={setIsOpen}
+      customStyle={{
+        backgroundColor: '#EBEBEB',
+        padding: '15px',
+        width: '500px',
+        borderRadius: '8px',
+      }}
+    >
+      <Box
+        fontWeight="fontWeightBold"
+        display="flex"
+        justifyContent="space-between"
+        alignItems="center"
+        pl={2}
+      >
+        <Typography variant="h5" component="h5">
+          Profilom
+        </Typography>
+        <IconButton onClick={onClose}>
+          <CloseIcon />
+        </IconButton>
+      </Box>
+      <Box display="flex" justifyContent="center" my={3}>
+        <Avatar alt="Profile image" variant="rounded" style={{ width: '200px', height: '200px' }} />
+      </Box>
+      <Box px={1} mt={2} mb={1}>
+        <Box my={1}>
+          <TextField
+            label="Diákigazolvány szám"
+            variant="outlined"
+            color="secondary"
+            fullWidth
+            size="small"
+            style={{ backgroundColor: 'white' }}
+          />
+        </Box>
+        <Box my={1}>
+          <TextField
+            label="Szobaszám"
+            variant="outlined"
+            color="secondary"
+            fullWidth
+            size="small"
+            style={{ backgroundColor: 'white' }}
+          />
+        </Box>
+        <Box display="flex" justifyContent="flex-end" mt={3}>
+          <Button variant="contained" onClick={onClose}>
+            Mentés
+          </Button>
+        </Box>
+      </Box>
+    </CustomModal>
+  );
+};
+
+export default ProfileModal;
diff --git a/src/core/context/UserContext.tsx b/src/core/context/UserContext.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0c8730888f2d7442b21a156755c96ab92c60975d
--- /dev/null
+++ b/src/core/context/UserContext.tsx
@@ -0,0 +1,29 @@
+import React, { createContext, useState } from 'react';
+import { Profile, Role } from '../types';
+
+interface ContextProps {
+  profile: Profile;
+  setProfile: (profile: Profile) => void;
+}
+
+// Context
+const initialState: Profile = {
+  external_id: 'abcd',
+  studentCardNumber: '1234',
+  roomNumber: '104',
+  picture: 'alma.jpg',
+  role: Role.User,
+  email: 'alma@gmail.com',
+  name: 'Nagy Gizike',
+  warnings: [],
+};
+export const userContext = createContext({} as ContextProps);
+const { Provider } = userContext;
+
+export const UserStateProvider: React.FC = ({ children }) => {
+  const [profile, setProfile] = useState<Profile>(initialState);
+
+  return <Provider value={{ profile, setProfile }}>{children}</Provider>;
+};
+
+export default { userContext, UserStateProvider };
diff --git a/src/core/types.ts b/src/core/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..23e1422b2a7f798168c27ff6a29b9d89c0b7e753
--- /dev/null
+++ b/src/core/types.ts
@@ -0,0 +1,31 @@
+export enum Role {
+  Admin,
+  Staff,
+  User,
+}
+
+export interface Profile {
+  external_id: string;
+  studentCardNumber: string;
+  roomNumber?: string;
+  picture: string;
+  role: Role.Admin | Role.Staff | Role.User;
+  email?: string;
+  name?: string;
+  warnings: [Warnings] | [];
+}
+
+export interface Warnings {
+  text: string;
+  date: Date;
+  given_by: {
+    _id: string;
+    name: string;
+  };
+}
+
+export interface News {
+  title: string;
+  text: string;
+  publishedAt: string;
+}
diff --git a/src/hooks/types.ts b/src/hooks/types.ts
index d639a344b70e94866b43d4923f40304dcbb6421c..ab423a80b1fbedf8aebb5dfd10604e9440956365 100644
--- a/src/hooks/types.ts
+++ b/src/hooks/types.ts
@@ -21,9 +21,3 @@ export interface RequestParams {
 export type ApiRequest<T> = (params: RequestParams) => AxiosPromise<T>;
 
 export type Refetch = (params?: RequestParams) => void;
-
-export interface INews {
-  title: string;
-  text: string;
-  publishedAt: string;
-}
diff --git a/src/hooks/useAddNews.ts b/src/hooks/useAddNews.ts
index 0afeea1a19ca924ff4bee70407b2c9e92f41a9ff..51d2eb199c2749d2cbdf945825a17b80f0de649b 100644
--- a/src/hooks/useAddNews.ts
+++ b/src/hooks/useAddNews.ts
@@ -1,12 +1,12 @@
-import { INews } from './types';
+import { News } from '../core/types';
 import useRequest from './useRequest';
-import userRestQueries from './useRestQueries';
+import useRestQueries from './useRestQueries';
 
 const useAddNews = () => {
-  const { post } = userRestQueries();
-  const request = post<INews>('/api/v1/news');
+  const { post } = useRestQueries();
+  const request = post<News>('/api/v1/news');
 
-  return useRequest<INews>({ request });
+  return useRequest<News>({ request });
 };
 
 export default useAddNews;
diff --git a/src/hooks/useGetNewsList.ts b/src/hooks/useGetNewsList.ts
index 2cca43ad421fba11731dd1aad220f0ac83dd0af2..850572353916fa2cc58ba0ab293c4b32e50c4fc7 100644
--- a/src/hooks/useGetNewsList.ts
+++ b/src/hooks/useGetNewsList.ts
@@ -1,12 +1,12 @@
-import { INews } from './types';
+import { News } from '../core/types';
 import useRequest from './useRequest';
-import userRestQueries from './useRestQueries';
+import useRestQueries from './useRestQueries';
 
-const useGetNewsList = (data?: INews[]) => {
-  const { get } = userRestQueries();
-  const request = get<INews[]>('/api/v1/news');
+const useGetNewsList = (data?: News[]) => {
+  const { get } = useRestQueries();
+  const request = get<News[]>('/api/v1/news');
 
-  return useRequest<INews[]>({ request, initialData: data });
+  return useRequest<News[]>({ request, initialData: data });
 };
 
 export default useGetNewsList;
diff --git a/src/hooks/useRestQueries.ts b/src/hooks/useRestQueries.ts
index 1201e5c74ff6438a529af36d11dd6d789719be31..3b91a068b9f7b4bf32667fbaee378c329c095f8c 100644
--- a/src/hooks/useRestQueries.ts
+++ b/src/hooks/useRestQueries.ts
@@ -1,7 +1,7 @@
 import axios, { AxiosRequestConfig } from 'axios';
 import { ApiRequest, RequestParams } from './types';
 
-function userRestQueries(
+function useRestQueries(
   // When a request needs more config like CancelToken, etc.
   config?: AxiosRequestConfig,
 ): Record<string, <Data>(path: string) => ApiRequest<Data>> {
@@ -17,4 +17,4 @@ function userRestQueries(
   };
 }
 
-export default userRestQueries;
+export default useRestQueries;
diff --git a/src/index.css b/src/index.css
index 03ca6df615575b3d885d8e0efd68c2556beecbea..65137f8e0fbdd391412f19afdcaf81fe8ac5375b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3,4 +3,5 @@ body,
 #root {
   margin: 0;
   height: 100%;
+  margin: 0;
 }