diff --git a/frontend-app/components/Footer.js b/frontend-app/components/Footer.js
new file mode 100644
index 0000000..7d4f87c
--- /dev/null
+++ b/frontend-app/components/Footer.js
@@ -0,0 +1,8 @@
+const Footer = () => {
+  return (
+    <div className="">
+      <h2>This is footer</h2>
+    </div>
+  );
+}
+export default Footer;
\ No newline at end of file
diff --git a/frontend-app/components/Header.js b/frontend-app/components/Header.js
new file mode 100644
index 0000000..9ae64cb
--- /dev/null
+++ b/frontend-app/components/Header.js
@@ -0,0 +1,17 @@
+import TitleXL from '@/components/common/TitleXL';
+import Avatar from '@/components/common/Avatar';
+
+const Header = () => {
+  return (
+    <nav className="flex justify-between h-14 border-b-2 border-neutral">
+      <div className='flex items-center'>
+        <TitleXL className="text-primary">Repair Community</TitleXL>
+      </div>
+
+      <div className='flex items-center'>
+        <Avatar src='https://placeimg.com/192/192/people' className='w-10' />
+      </div>
+    </nav>
+  );
+}
+export default Header;
\ No newline at end of file
diff --git a/frontend-app/components/PageLayout.js b/frontend-app/components/PageLayout.js
new file mode 100644
index 0000000..ec1ee90
--- /dev/null
+++ b/frontend-app/components/PageLayout.js
@@ -0,0 +1,17 @@
+import Layout from '@/components/common/Layout'
+import Header from '@/components/Header'
+import Footer from '@/components/Footer';
+
+const PageLayout = ({ children }) => {
+  return (
+    <Layout
+      header={<Header />}
+      footer={<Footer />}
+    >
+      {children}
+    </Layout>
+  );
+}
+
+
+export default PageLayout;
\ No newline at end of file
diff --git a/frontend-app/components/ShopItem.js b/frontend-app/components/ShopItem.js
new file mode 100644
index 0000000..30b9893
--- /dev/null
+++ b/frontend-app/components/ShopItem.js
@@ -0,0 +1,9 @@
+import Card from "@/components/common/Card"
+
+const ShopItem = () => {
+  return (
+    <Card></Card>
+  )
+}
+
+export default ShopItem
\ No newline at end of file
diff --git a/frontend-app/components/common/Avatar.js b/frontend-app/components/common/Avatar.js
new file mode 100644
index 0000000..f0de319
--- /dev/null
+++ b/frontend-app/components/common/Avatar.js
@@ -0,0 +1,11 @@
+const Avatar = ({ src, className = "" }) => {
+  return (
+    <div className="avatar">
+      <div className={`rounded-full ${className}`}>
+        <img src={src} />
+      </div>
+    </div>
+  )
+}
+
+export default Avatar;
\ No newline at end of file
diff --git a/frontend-app/components/common/Card.js b/frontend-app/components/common/Card.js
new file mode 100644
index 0000000..8a00438
--- /dev/null
+++ b/frontend-app/components/common/Card.js
@@ -0,0 +1,13 @@
+const Card = ({ children, className = "" }) => {
+  return (
+    <>
+      <div className="card w-56 bg-base-100 shadow-xl">
+        <div className={`card-body ${className}`}>
+          {children}
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default Card;
\ No newline at end of file
diff --git a/frontend-app/components/common/Layout.js b/frontend-app/components/common/Layout.js
new file mode 100644
index 0000000..67c50d2
--- /dev/null
+++ b/frontend-app/components/common/Layout.js
@@ -0,0 +1,23 @@
+const Layout = ({ header, children, footer }) => {
+  return (
+    <div className="flex flex-col space-y-4 w-full">
+      <div className="flex justify-center">
+        <div className="max-w-5xl w-full">
+          {header}
+        </div>
+      </div>
+      <div className="flex justify-center">
+        <div className="max-w-4xl w-full">
+          {children}
+        </div>
+      </div>
+      <div className="flex justify-center">
+        <div className=" max-w-5xl w-full">
+          {footer}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Layout;
\ No newline at end of file
diff --git a/frontend-app/components/common/TitleXL.js b/frontend-app/components/common/TitleXL.js
new file mode 100644
index 0000000..cb7dc7f
--- /dev/null
+++ b/frontend-app/components/common/TitleXL.js
@@ -0,0 +1,9 @@
+const TitleXL = ({ children, className = "" }) => {
+  return (
+    <>
+      <h1 className={`text-xl font-bold ${className}`}>{children}</h1>
+    </>
+  )
+}
+
+export default TitleXL;
\ No newline at end of file
diff --git a/frontend-app/components/header.js b/frontend-app/components/header.js
deleted file mode 100644
index 561a763..0000000
--- a/frontend-app/components/header.js
+++ /dev/null
@@ -1,8 +0,0 @@
-function Header() {
-    return (
-        <div className="header">
-            <h2>TEST app</h2>
-        </div>
-    );
-}
-export default Header;
\ No newline at end of file
diff --git a/frontend-app/package.json b/frontend-app/package.json
index 096a839..c85568c 100644
--- a/frontend-app/package.json
+++ b/frontend-app/package.json
@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "axios": "^0.27.2",
+    "daisyui": "^2.38.1",
     "next": "12.3.1",
     "react": "18.2.0",
     "react-dom": "18.2.0"
diff --git a/frontend-app/pages/index.js b/frontend-app/pages/index.js
index a938aea..34e9596 100644
--- a/frontend-app/pages/index.js
+++ b/frontend-app/pages/index.js
@@ -1,4 +1,15 @@
-const Home = () => {
-  return <div>Home page</div>;
+import PageLayout from '@/components/PageLayout';
+
+const HomePresenter = () => {
+  return (
+    <PageLayout>
+      <div>Home page</div>
+    </PageLayout>
+
+  );
+}
+
+const Page = () => {
+  return <HomePresenter />;
 };
-export default Home;
+export default Page;
diff --git a/frontend-app/tailwind.config.js b/frontend-app/tailwind.config.js
index 4842997..6c9876d 100644
--- a/frontend-app/tailwind.config.js
+++ b/frontend-app/tailwind.config.js
@@ -7,5 +7,13 @@ module.exports = {
   theme: {
     extend: {},
   },
-  plugins: [],
+  plugins: [require("daisyui")],
+  daisyui: {
+    themes: [{
+      light: {
+        ...require("daisyui/src/colors/themes")["[data-theme=light]"],
+        // Customize light theme here
+      }
+    }],
+  }
 };