diff --git a/.eslintrc.js b/.eslintrc.js
index 421d9e0ed2488fa04a0373da45614cbba4080bf4..5803798cdc303788a1ef350c8a4e9e93ad79fd18 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -15,5 +15,6 @@ module.exports = {
   rules: {
     'react/prop-types': 0,
     '@typescript-eslint/explicit-function-return-type': 2,
+    'object-curly-newline': 0,
   },
 };
diff --git a/src/News.tsx b/src/News.tsx
deleted file mode 100644
index fad39baf467f53496c032843d21ead7ee90aedcc..0000000000000000000000000000000000000000
--- a/src/News.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Grid, Typography } from '@material-ui/core';
-import React from 'react';
-
-interface NewsProps {
-  title: string;
-  content: string;
-  author: string;
-}
-
-const News: React.FC<NewsProps> = ({ title, content, author }) => (
-  <Grid container direction="column">
-    <Grid item>
-      <Typography variant="h6">{title}</Typography>
-    </Grid>
-    <Grid item>
-      <p>{content}</p>
-    </Grid>
-    <Grid item container justify="flex-end">
-      <Typography>{author}</Typography>
-    </Grid>
-  </Grid>
-);
-
-export default News;
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..95ecd05e6e7e50271a917ca327b4db184c8644b0
--- /dev/null
+++ b/src/components/NewsContainer.tsx
@@ -0,0 +1,30 @@
+import { Grid } from '@material-ui/core';
+import React from 'react';
+import News from './News';
+
+interface Props {}
+
+const NewsContainer: React.FC = () => {
+  const lorem = `
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae ullamcorper ligula. Praesent pretium ultrices pretium. Morbi purus lorem, elementum ut tempor quis, condimentum et nisl. Maecenas quis justo ac nibh dapibus porttitor. Nam felis mauris, ornare ut imperdiet eget, ultricies at leo. Integer in risus iaculis libero efficitur mollis. Quisque eget congue lorem, nec tincidunt tellus. Etiam auctor fermentum quam, non consequat tellus tempor at. Vivamus tellus orci, eleifend vel erat sed, viverra luctus sem.
+  Fusce viverra vehicula purus a elementum. Duis non orci mattis, tincidunt lorem ac, hendrerit lacus. Cras id feugiat nulla. Aenean mi quam, vulputate sit amet volutpat posuere, aliquet nec dolor. Nulla facilisi. Donec quis ullamcorper neque, in eleifend lorem. Quisque id nisl justo. Donec tristique a risus vitae consequat. Vestibulum quis velit magna. Aenean ultrices sapien vel justo varius finibus sit amet a turpis. Cras efficitur, ante at elementum sodales, elit enim fringilla mi, nec consectetur lacus lacus a nunc. Praesent condimentum porta accumsan. Phasellus sed dapibus nisl, eget tempor felis.
+  `;
+  return (
+    <Grid container spacing={2}>
+      <News
+        title="Az eső hír"
+        author="Anonymus"
+        content={lorem}
+        createDate={new Date().toLocaleDateString()}
+      />
+      <News
+        title="Második"
+        author="Anonymus"
+        content={lorem}
+        createDate={new Date().toLocaleDateString()}
+      />
+    </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/components/MainRouting.tsx b/src/core/components/MainRouting.tsx
index 882d03dd31c84c881e1648e00a21f0bc8d991c06..e4d65b987ed1f1fdaa30e6eb4d6f7d40a2708580 100644
--- a/src/core/components/MainRouting.tsx
+++ b/src/core/components/MainRouting.tsx
@@ -1,12 +1,15 @@
 import React from 'react';
 import { Route, Switch } from 'react-router';
+import NewsPage from '../../components/NewsPage';
 
-const Main = () => (
+const Main: React.FC = () => (
   <Switch>
     <Route path="/" exact>
       Hello
     </Route>
-    <Route path="/news">News</Route>
+    <Route path="/news">
+      <NewsPage />
+    </Route>
   </Switch>
 );