diff --git a/src/components/App.tsx b/src/components/App.tsx
index d96d8cc..a405ccc 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -3,6 +3,7 @@ import { BrowserRouter as Router, Route } from 'react-router-dom';
 import CalendarPage from '../pages/calendar/CalendarPage';
 import MainPage from '../pages/main/MainPage';
 import BaseStyle from './BaseStyle';
+import PrintablesAppBar from './PrintablesAppBar';
 
 const basePath = process.env.PUBLIC_URL;
 
@@ -10,9 +11,7 @@ function App(): JSX.Element {
   return (
     <>
       <BaseStyle />
-      <header>
-        <h1>Printables</h1>
-      </header>
+      <PrintablesAppBar />
       <main>
         <Router basename={basePath}>
           <Route exact path="/" component={MainPage} />
diff --git a/src/components/PrintablesAppBar.tsx b/src/components/PrintablesAppBar.tsx
new file mode 100644
index 0000000..22c7986
--- /dev/null
+++ b/src/components/PrintablesAppBar.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { AppBar, Toolbar, Typography } from '@material-ui/core';
+
+const PrintablesAppBar = (): JSX.Element => (
+  <AppBar>
+    <Toolbar>
+      <Typography variant="h6">Printables</Typography>
+    </Toolbar>
+  </AppBar>
+);
+
+export default PrintablesAppBar;