diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 1653cd7..1316a02 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,11 +1,14 @@
-import './App.css'
+import "./App.css";
+import Layout from "./layout/Layout";
 
 function App() {
   return (
     <>
-      
+      <Layout>
+        <h1>Hello World</h1>
+      </Layout>
     </>
-  )
+  );
 }
 
-export default App
+export default App;
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
new file mode 100644
index 0000000..20f4c90
--- /dev/null
+++ b/frontend/src/components/Header.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+const Header: React.FC = () => {
+  return (
+    <header>
+      <h1>Header</h1>
+    </header>
+  );
+};
+
+export default Header;
diff --git a/frontend/src/layout/Layout.tsx b/frontend/src/layout/Layout.tsx
new file mode 100644
index 0000000..7467f20
--- /dev/null
+++ b/frontend/src/layout/Layout.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import Header from "../components/Header";
+
+type LayoutProps = {
+  children: React.ReactNode;
+};
+
+const Layout: React.FC<LayoutProps> = ({ children }) => {
+  return (
+    <>
+      <Header />
+      <main>{children}</main>
+      <footer></footer>
+    </>
+  );
+};
+
+export default Layout;