diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 1bfe3a9d..88209359 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -21,6 +21,7 @@ module.exports = {
       'warn',
       { allowConstantExport: true },
     ],
+    "react/react-in-jsx-scope": "off"
   },
   parserOptions: {
     tsconfigRootDir: './',
diff --git a/src/main.tsx b/src/main.tsx
index 38cbe85f..871fbea4 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,5 +1,4 @@
 import './index.css';
-
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
diff --git a/src/ui/Footer.tsx b/src/ui/Footer.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/ui/Header.tsx b/src/ui/Header.tsx
new file mode 100644
index 00000000..7857eb30
--- /dev/null
+++ b/src/ui/Header.tsx
@@ -0,0 +1,5 @@
+function Header({ pageName }: { pageName: string }) {
+  return <div>{pageName}</div>;
+}
+
+export default Header;
diff --git a/src/ui/Layout.tsx b/src/ui/Layout.tsx
new file mode 100644
index 00000000..95d439a2
--- /dev/null
+++ b/src/ui/Layout.tsx
@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+
+function Layout({
+  header,
+  children,
+  footer,
+}: {
+  header: ReactNode;
+  children: ReactNode;
+  footer: ReactNode;
+}) {
+  return (
+    <div className="max-w-[600px] min-w-[375px] h-[100vh]">
+      <header>{header}</header>
+      <main>{children}</main>
+      <footer>{footer}</footer>
+    </div>
+  );
+}
+
+export default Layout;