diff --git a/client-ts/src/app/about/About.tsx b/client-ts/src/app/about/About.tsx
new file mode 100644
index 0000000..a0af584
--- /dev/null
+++ b/client-ts/src/app/about/About.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+class About extends React.Component {
+  render() {
+    return (
+      <div>
+        <h3>TODO About component</h3>
+        <p>Work in progress...</p>
+      </div>
+    );
+  }
+}
+
+export default About;
diff --git a/client-ts/src/app/layout/Layout.tsx b/client-ts/src/app/layout/Layout.tsx
index cadc6b4..9f380fd 100644
--- a/client-ts/src/app/layout/Layout.tsx
+++ b/client-ts/src/app/layout/Layout.tsx
@@ -10,6 +10,7 @@ import Typography from '@material-ui/core/Typography';
 import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { DrawerMenu } from './DrawerMenu';
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import About from './../about/About';
 
 const drawerWidth = 240;
 
@@ -119,7 +120,7 @@ function Layout(props: { container?: any }) {
               <h3>TODO shoppinglist component</h3>
             </Route>
             <Route path="/about">
-              <h3>TODO about component</h3>
+              <About />
             </Route>
             <Route path="/">
               <h3>TODO home component</h3>