diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx
index fcf9483..f0e470e 100644
--- a/frontend/src/components/Footer.jsx
+++ b/frontend/src/components/Footer.jsx
@@ -1,12 +1,12 @@
 import { useNavigate } from "react-router-dom";
 import siteLogo from "../assets/Исходники/logo.png";
 
-export default function Header() {
+export default function Footer() {
   const navigate = useNavigate();
 
   return (
     <footer className="bg-light-blue w-full h-27.5 px-16 flex items-center justify-between ">
-      <div className="flex flex-col items-center gap-2 text-lg tracking-widest text-gold">
+      <div className="flex flex-col items-center  text-lg tracking-widest text-gold">
         <img src={siteLogo} alt="Лого" className="w-12 h-12 object-contain" />
         <span>FISH FISH</span>
       </div>
diff --git a/frontend/src/components/PageLayout.jsx b/frontend/src/components/PageLayout.jsx
index e69de29..dcf1f18 100644
--- a/frontend/src/components/PageLayout.jsx
+++ b/frontend/src/components/PageLayout.jsx
@@ -0,0 +1,12 @@
+import Footer from "./Footer";
+import Header from "./Header";
+
+export default function PageLayout({ children }) {
+  return (
+    <body className="min-h-screen flex flex-col w-full">
+      <Header />
+      {children}
+      <Footer />
+    </body>
+  );
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 20f7f5c..9906936 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -27,4 +27,12 @@
     background-color: #051b26;
     font-family: var(--font-sans);
   }
+
+  #root {
+    width: 100%;
+    min-height: 100dvh;
+    display: flex;
+    flex-direction: column;
+    background-color: #051b26;
+  }
 }
diff --git a/frontend/src/pages/Main.jsx b/frontend/src/pages/Main.jsx
index 1a9a9e6..be29961 100644
--- a/frontend/src/pages/Main.jsx
+++ b/frontend/src/pages/Main.jsx
@@ -1,7 +1,6 @@
 import { useEffect, useState } from "react";
 import * as api from "../api"; // Импортируем все функции из api/index.js
-import Header from "../components/Header";
-import Footer from "../components/Footer";
+import PageLayout from "../components/PageLayout";
 
 export default function Dashboard() {
   const [items, setItems] = useState([]);
@@ -18,9 +17,8 @@ export default function Dashboard() {
   }, []);
 
   return (
-    <div>
-      <Header />
-      <div className="p-4 flex flex-col w-full gap-4">
+    <PageLayout>
+      <main className="p-16 grow w-full gap-4">
         {Array.isArray(items) &&
           items.map((item) => (
             <div
@@ -45,8 +43,7 @@ export default function Dashboard() {
               </div>
             </div>
           ))}
-      </div>
-      <Footer />
-    </div>
+      </main>
+    </PageLayout>
   );
 }
