diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..8e32d15
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+	"cSpell.words": ["Sider"]
+}
diff --git a/src/App.tsx b/src/App.tsx
index 80df7cd..51e3038 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,20 +1,68 @@
-import React from 'react';
+import React from "react";
 
-import './App.scss';
-import { Outlet } from 'react-router';
+import "./App.scss";
+import { Outlet } from "react-router";
+import { Layout } from "antd";
+import { default as AppHeader} from "./components/Header";
+import { default as AppFooter} from "./components/Footer";
+import Menu from "./components/Menu";
+
+const { Header, Footer, Sider, Content } = Layout;
 
 function App() {
-  return (
-    <div className="App">
-      APP
-      <aside>
-        SIDE
-      </aside>
-      <div>
-        <Outlet />
-      </div>
-    </div>
-  );
+	const headerStyle: React.CSSProperties = {
+		textAlign: "center",
+		color: "#fff",
+		height: 64,
+		paddingInline: 48,
+		lineHeight: "64px",
+		backgroundColor: "#4096ff",
+	};
+
+	const contentStyle: React.CSSProperties = {
+		textAlign: "center",
+		minHeight: 120,
+		lineHeight: "120px",
+		color: "#fff",
+		backgroundColor: "#0958d9",
+	};
+
+	const siderStyle: React.CSSProperties = {
+		textAlign: "center",
+		lineHeight: "100vh",
+		color: "#fff",
+		backgroundColor: "#3165D2",
+	};
+
+	const footerStyle: React.CSSProperties = {
+		textAlign: "center",
+		color: "#fff",
+		backgroundColor: "#4096ff",
+	};
+
+	const layoutStyle = {
+		overflow: "hidden",
+	};
+	return (
+		<div className="">
+			<Layout style={layoutStyle}>
+				<Sider width="260px" style={siderStyle}>
+					<Menu />
+				</Sider>
+				<Layout>
+					<Header style={headerStyle}>
+            <AppHeader />
+          </Header>
+					<Content style={contentStyle}>
+            <Outlet />
+          </Content>
+					<Footer style={footerStyle}>
+            <AppFooter />
+          </Footer>
+				</Layout>
+			</Layout>
+		</div>
+	);
 }
 
 export default App;
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 73f9444..b442417 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,3 +1,3 @@
 export default function Footer() {
-    return <div>Footer</div>
+    return <div>AppFooter</div>
 }
\ No newline at end of file
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 6b7e272..de35ae4 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,3 +1,3 @@
 export default function Header() {
-    return <div>Header</div>
+    return <div>AppHeader</div>
 }
\ No newline at end of file
diff --git a/src/components/Menu.tsx b/src/components/Menu.tsx
new file mode 100644
index 0000000..da72563
--- /dev/null
+++ b/src/components/Menu.tsx
@@ -0,0 +1,3 @@
+export default function Menu() {
+    return <div>Menu</div>
+}
\ No newline at end of file
diff --git a/src/pages/login/Login.tsx b/src/pages/login/Login.tsx
index 4fb3606..17ebce3 100644
--- a/src/pages/login/Login.tsx
+++ b/src/pages/login/Login.tsx
@@ -18,7 +18,7 @@ export default function Login() {
 			className="bg-cover bg-center flex justify-center items-center h-[100vh]"
 			style={{ backgroundImage: `url(${img_bg})` }}>
 			<div
-				className="flex justify-center items-center px-[40px] pt-[28px] rounded-lg text-[#333] text-lg"
+				className="flex justify-center items-center px-[40px] pt-[28px] rounded-lg text-text text-lg"
 				style={{
 					background: "linear-gradient(180deg, rgba(250, 252, 255, 0.51) 0%, rgba(255, 255, 255, 0.52) 100%)",
 					backdropFilter: "blur(92px)",
diff --git a/tailwind.config.js b/tailwind.config.js
index 3555d90..f005ec6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,7 +3,7 @@ module.exports = {
 	content: ["./src/**/*.{js,jsx,ts,tsx}"],
 	theme: {
 		colors: {
-			primary: "#1989fa",
+			primary: "#3165D2",
 			white: "#FFF",
 			title: "#646566",
 			text: "#333",