diff --git a/.eslintrc.js b/.eslintrc.js
index 518fe41d0379f3dde5e05f5645fc505ce9be3961..ef676d02f2e2bf6e1caa598d9f3452300bc4ed53 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -13,6 +13,9 @@ module.exports = {
   },
 
   rules: {
+    'react/prop-types': 0,
+    '@typescript-eslint/explicit-function-return-type': 1,
+    'object-curly-newline': 0,
     'implicit-arrow-linebreak': 0,
     'react/prop-types': 0,
   },
diff --git a/src/components/News.tsx b/src/components/News.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d674e392308f147b57dbfa910004eb7aae255b22
--- /dev/null
+++ b/src/components/News.tsx
@@ -0,0 +1,44 @@
+import { Grid, makeStyles, Typography } from '@material-ui/core';
+import React from 'react';
+
+interface NewsProps {
+  title: string;
+  content: string;
+  author: string;
+  createDate: string;
+}
+
+const useStyles = makeStyles((theme) => ({
+  container: {
+    borderRadius: '8px',
+    backgroundColor: '#E5E5E5',
+    margin: theme.spacing(2),
+    padding: theme.spacing(1),
+  },
+}));
+
+const News: React.FC<NewsProps> = ({ title, content, author, createDate }) => {
+  const classes = useStyles();
+  return (
+    <Grid className={classes.container} container direction="column">
+      <Grid item>
+        <Typography variant="h6">{title}</Typography>
+      </Grid>
+      <Grid item>
+        <Typography variant="body1">{content}</Typography>
+      </Grid>
+      <Grid item container justify="flex-end">
+        <Grid item>
+          <Typography variant="subtitle2">
+            <i>{author}</i>
+          </Typography>
+          <Typography variant="subtitle2">
+            <i>{createDate}</i>
+          </Typography>
+        </Grid>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default News;
diff --git a/src/components/NewsContainer.tsx b/src/components/NewsContainer.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4301292e7770c33cef30df6528d659657d35939c
--- /dev/null
+++ b/src/components/NewsContainer.tsx
@@ -0,0 +1,32 @@
+import { CircularProgress, Grid } from '@material-ui/core';
+import React, { useEffect } from 'react';
+import useGetNewsList from '../hooks/useGetNewsList';
+import News from './News';
+
+interface Props {}
+
+const NewsContainer: React.FC = () => {
+  const [{ data, isLoading }, getNews] = useGetNewsList();
+
+  useEffect(() => {
+    getNews();
+  }, [getNews]);
+
+  return isLoading ? (
+    <CircularProgress />
+  ) : (
+    <Grid container spacing={2}>
+      {data
+        && data.map((item) => (
+          <News
+            title={item.title}
+            author="Anonymus"
+            content={item.text}
+            createDate={item.publishedAt}
+          />
+        ))}
+    </Grid>
+  );
+};
+
+export default NewsContainer;
diff --git a/src/components/NewsPage.tsx b/src/components/NewsPage.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..82b744c859b836b9467d60e5eab4a9ec08cf1306
--- /dev/null
+++ b/src/components/NewsPage.tsx
@@ -0,0 +1,11 @@
+import { Container } from '@material-ui/core';
+import React from 'react';
+import NewsContainer from './NewsContainer';
+
+const NewsPage: React.FC = () => (
+  <Container>
+    <NewsContainer />
+  </Container>
+);
+
+export default NewsPage;
diff --git a/src/core/App.tsx b/src/core/App.tsx
index dfc8390cced54f587d768a05a8940dac437416f6..00d70f3d25ef7e15a784a3c7624c98e35d417e5e 100644
--- a/src/core/App.tsx
+++ b/src/core/App.tsx
@@ -18,7 +18,7 @@ const MainContent = styled.div`
   height: 100%;
 `;
 
-function App() {
+function App(): React.ReactElement {
   const [response, addNews] = useAddNews();
 
   useEffect(() => {
diff --git a/src/core/components/Footer.tsx b/src/core/components/Footer.tsx
index 000b6629c5ecc9bc2ac55a025aefdac03f0692b1..23bc3e2fab51c1e4464a64ba5d630da394961d41 100644
--- a/src/core/components/Footer.tsx
+++ b/src/core/components/Footer.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
 
-const Footer = () => <div>Footer</div>;
+const Footer: React.FC = () => <div>Footer</div>;
 
 export default Footer;
diff --git a/src/core/components/Header.tsx b/src/core/components/Header.tsx
index fef7cc09770da760fa21d9477d1a207269712d44..e6c3963ea9142a26c02d0d0cff4d2fed04ca67ef 100644
--- a/src/core/components/Header.tsx
+++ b/src/core/components/Header.tsx
@@ -73,7 +73,7 @@ const Header: React.FC = () => {
           <Grid className={classes.navItem} item container justify="flex-start">
             <Tabs
               value={value}
-              onChange={(event, val) => {
+              onChange={(event, val): void => {
                 setValue(val);
               }}
               TabIndicatorProps={{ className: classes.indicator }}
@@ -83,7 +83,7 @@ const Header: React.FC = () => {
                   key={item.id}
                   className={classes.tab}
                   label={item.title}
-                  onClick={() => {
+                  onClick={(): void => {
                     history.push(item.redirectTo);
                   }}
                 />
@@ -94,7 +94,7 @@ const Header: React.FC = () => {
             <Typography variant="h4">SCH-BODY</Typography>
           </Grid>
           <Grid className={classes.navItem} item container justify="flex-end">
-            <Button>Login</Button>
+            <Button variant="contained">Login</Button>
           </Grid>
         </Grid>
       </Toolbar>
diff --git a/src/core/components/MainRouting.tsx b/src/core/components/MainRouting.tsx
index 10d1ee86a868ff0ed9ef2e06119013b0366cd61e..7230169b536bba8987c8f4f8bd6888735594d496 100644
--- a/src/core/components/MainRouting.tsx
+++ b/src/core/components/MainRouting.tsx
@@ -1,13 +1,15 @@
 import React from 'react';
 import { Route, Switch } from 'react-router';
-import { ProfileButton } from './ProfileButton';
+import NewsPage from '../../components/NewsPage';
 
 const MainRouting: React.FC = () => (
   <Switch>
     <Route path="/" exact>
       <ProfileButton />
     </Route>
-    <Route path="/news">News</Route>
+    <Route path="/news">
+      <NewsPage />
+    </Route>
   </Switch>
 );