diff --git a/typing-app/bun.lockb b/typing-app/bun.lockb
index f3a045a..46816c1 100755
Binary files a/typing-app/bun.lockb and b/typing-app/bun.lockb differ
diff --git a/typing-app/package.json b/typing-app/package.json
index bf700a1..cf71d76 100644
--- a/typing-app/package.json
+++ b/typing-app/package.json
@@ -11,6 +11,7 @@
     "format:ci": "prettier . --check"
   },
   "dependencies": {
+    "@chakra-ui/react": "^2.8.2",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.5",
     "class-variance-authority": "^0.7.0",
diff --git a/typing-app/src/app/(game)/typing/page.tsx b/typing-app/src/app/(game)/typing/page.tsx
deleted file mode 100644
index 8e9989d..0000000
--- a/typing-app/src/app/(game)/typing/page.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function Typing() {
-  return <div>Typing View</div>;
-}
diff --git a/typing-app/src/app/credit/page.tsx b/typing-app/src/app/credit/page.tsx
deleted file mode 100644
index c7f42df..0000000
--- a/typing-app/src/app/credit/page.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function Credit() {
-  return <div>Credit View</div>;
-}
diff --git a/typing-app/src/app/game/page.tsx b/typing-app/src/app/game/page.tsx
new file mode 100644
index 0000000..e654265
--- /dev/null
+++ b/typing-app/src/app/game/page.tsx
@@ -0,0 +1,5 @@
+import GamePage from "@/components/pages/Game";
+
+export default function Typing() {
+  return <GamePage />;
+}
diff --git a/typing-app/src/app/globals.css b/typing-app/src/app/globals.css
index 8abdb15..248d696 100644
--- a/typing-app/src/app/globals.css
+++ b/typing-app/src/app/globals.css
@@ -2,75 +2,19 @@
 @tailwind components;
 @tailwind utilities;
 
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
+:root {
+  --foreground-rgb: 255, 255, 255;
+  --background-start-rgb: 0, 0, 0;
+  --background-end-rgb: 0, 0, 0;
+}
 
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
-  }
+body {
+  color: rgb(var(--foreground-rgb));
+  background: rgb(var(--background-start-rgb));
 }
 
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
   }
 }
diff --git a/typing-app/src/app/layout.tsx b/typing-app/src/app/layout.tsx
index 3314e47..8b7263b 100644
--- a/typing-app/src/app/layout.tsx
+++ b/typing-app/src/app/layout.tsx
@@ -1,12 +1,14 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
+import Header from "../components/organism/Header";
+import Footer from "../components/organism/Footer";
 import "./globals.css";
+import { Box, ChakraProvider } from "@chakra-ui/react";
 
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "TypeMaster",
 };
 
 export default function RootLayout({
@@ -16,7 +18,17 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <ChakraProvider>
+          <Box minH="100vh" display="flex" flexDirection="column">
+            <Header />
+            <Box flex="1" bg="gray.100" py={2}>
+              {children}
+            </Box>
+            <Footer />
+          </Box>
+        </ChakraProvider>
+      </body>
     </html>
   );
 }
diff --git a/typing-app/src/app/page.tsx b/typing-app/src/app/page.tsx
index 70ab15e..ce49cf5 100644
--- a/typing-app/src/app/page.tsx
+++ b/typing-app/src/app/page.tsx
@@ -1,3 +1,5 @@
+import HomePage from "@/components/pages/Home";
+
 export default function Home() {
-  return <div>Home View</div>;
+  return <HomePage />;
 }
diff --git a/typing-app/src/app/ranking/page.tsx b/typing-app/src/app/ranking/page.tsx
index 5e243b1..4d81c0e 100644
--- a/typing-app/src/app/ranking/page.tsx
+++ b/typing-app/src/app/ranking/page.tsx
@@ -1,3 +1,5 @@
+import RankingPage from "@/components/pages/Ranking";
+
 export default function Ranking() {
-  return <div>Ranking View</div>;
+  return <RankingPage />;
 }
diff --git a/typing-app/src/assets/images/banner.png b/typing-app/src/assets/images/banner.png
new file mode 100644
index 0000000..2bf2e54
Binary files /dev/null and b/typing-app/src/assets/images/banner.png differ
diff --git a/typing-app/src/components/atoms/Banner.tsx b/typing-app/src/components/atoms/Banner.tsx
new file mode 100644
index 0000000..36762ce
--- /dev/null
+++ b/typing-app/src/components/atoms/Banner.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import { Box, Image } from "@chakra-ui/react";
+import bannerImage from "@/assets/images/banner.png";
+
+const Banner: React.FC = () => {
+  return (
+    <Box>
+      <Image src={bannerImage.src} alt="Logo" maxH={100} />
+    </Box>
+  );
+};
+
+export default Banner;
diff --git a/typing-app/src/components/atoms/Separater.tsx b/typing-app/src/components/atoms/Separater.tsx
new file mode 100644
index 0000000..52aef62
--- /dev/null
+++ b/typing-app/src/components/atoms/Separater.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import { Box } from "@chakra-ui/react";
+
+interface SeparatorProps {
+  height?: string;
+  backgroundColor?: string;
+}
+
+const Separator: React.FC<SeparatorProps> = ({ height = "5px", backgroundColor = "white" }) => {
+  return <Box height={height} bg={backgroundColor} width="100%" />;
+};
+
+export default Separator;
diff --git a/typing-app/src/components/molecules/BrandText.tsx b/typing-app/src/components/molecules/BrandText.tsx
new file mode 100644
index 0000000..a46bcfa
--- /dev/null
+++ b/typing-app/src/components/molecules/BrandText.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { Box, HStack, Text } from "@chakra-ui/react";
+
+const BrandText: React.FC = () => {
+  return (
+    <Box>
+      <HStack>
+        <Text fontSize="50px">ITS</Text>
+        <Text fontSize="sm">静岡大学ITソルーション室</Text>
+      </HStack>
+    </Box>
+  );
+};
+
+export default BrandText;
diff --git a/typing-app/src/components/molecules/UserCard.tsx b/typing-app/src/components/molecules/UserCard.tsx
new file mode 100644
index 0000000..f1d7f7b
--- /dev/null
+++ b/typing-app/src/components/molecules/UserCard.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+import { Avatar, Box, Text, HStack, VStack } from "@chakra-ui/react";
+
+const UserCard: React.FC = () => {
+  const bgColor = "#0000cd"; // 濃い青の背景色
+
+  // モックのユーザー情報
+  const user = {
+    name: "テストユーザー",
+    studentId: "24AB1234",
+    avatarUrl: "https://avatars.githubusercontent.com/u/12345678?v=4",
+  };
+
+  return (
+    user && (
+      <Box bg={bgColor} p={4} maxH="120px">
+        <HStack spacing={4}>
+          <Avatar src={user.avatarUrl} maxW="100px" borderRadius="9" />
+          <VStack align="start" spacing={1}>
+            <Text fontSize="lg" fontWeight="bold">
+              名前: {user.name}
+            </Text>
+            <Text>学籍番号: {user.studentId}</Text>
+          </VStack>
+        </HStack>
+      </Box>
+    )
+  );
+};
+
+export default UserCard;
diff --git a/typing-app/src/components/organism/Footer.tsx b/typing-app/src/components/organism/Footer.tsx
new file mode 100644
index 0000000..721c23b
--- /dev/null
+++ b/typing-app/src/components/organism/Footer.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import { Flex, Box } from "@chakra-ui/react";
+import BrandText from "../molecules/BrandText";
+import Separator from "../atoms/Separater";
+
+const Footer: React.FC = () => {
+  return (
+    <>
+      <Separator />
+      <Flex alignItems="center" justifyContent="space-between">
+        <BrandText />
+      </Flex>
+    </>
+  );
+};
+
+export default Footer;
diff --git a/typing-app/src/components/organism/Header.tsx b/typing-app/src/components/organism/Header.tsx
new file mode 100644
index 0000000..deecf68
--- /dev/null
+++ b/typing-app/src/components/organism/Header.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { Box, Flex } from "@chakra-ui/react";
+// import { useAuth } from "@/hooks/useAuth";　// TODO: 実装
+import Banner from "@/components/atoms/Banner";
+import UserCard from "@/components/molecules/UserCard";
+import Separator from "@/components/atoms/Separater";
+
+const Header: React.FC = () => {
+  return (
+    <>
+      <Flex alignItems="center" justifyContent="space-between">
+        <Banner />
+        <UserCard />
+      </Flex>
+      <Separator />
+    </>
+  );
+};
+
+export default Header;
diff --git a/typing-app/src/components/organism/footer/index.ts b/typing-app/src/components/organism/footer/index.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/typing-app/src/components/organism/header/index.ts b/typing-app/src/components/organism/header/index.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/typing-app/src/components/pages/Game.tsx b/typing-app/src/components/pages/Game.tsx
new file mode 100644
index 0000000..d345602
--- /dev/null
+++ b/typing-app/src/components/pages/Game.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { Text, VStack } from "@chakra-ui/react";
+
+const GamePage: React.FC = () => {
+  return (
+    <>
+      <VStack>
+        <Text fontSize="2xl">Hello, World!</Text>
+        <Text fontSize="xl">Welcome to the Game Page</Text>
+      </VStack>
+    </>
+  );
+};
+
+export default GamePage;
diff --git a/typing-app/src/components/pages/Home.tsx b/typing-app/src/components/pages/Home.tsx
new file mode 100644
index 0000000..440ae8f
--- /dev/null
+++ b/typing-app/src/components/pages/Home.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { Text, VStack } from "@chakra-ui/react";
+
+const HomePage: React.FC = () => {
+  return (
+    <>
+      <VStack>
+        <Text fontSize="2xl">Hello, World!</Text>
+        <Text fontSize="xl">Welcome to the ITS Room</Text>
+      </VStack>
+    </>
+  );
+};
+
+export default HomePage;
diff --git a/typing-app/src/components/pages/Ranking.tsx b/typing-app/src/components/pages/Ranking.tsx
new file mode 100644
index 0000000..22964e0
--- /dev/null
+++ b/typing-app/src/components/pages/Ranking.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { Text, VStack } from "@chakra-ui/react";
+
+const RankingPage: React.FC = () => {
+  return (
+    <>
+      <VStack>
+        <Text fontSize="2xl">Hello, World!</Text>
+        <Text fontSize="xl">Welcome to the Ranking Page</Text>
+      </VStack>
+    </>
+  );
+};
+
+export default RankingPage;