diff --git a/Answer/css/styles.css b/Answer/css/styles.css
index 14d8e93..6a888c5 100644
--- a/Answer/css/styles.css
+++ b/Answer/css/styles.css
@@ -113,7 +113,7 @@ a {
   -------------------------------------------*/
 .articles {
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
+    grid-template-columns: 1fr 1fr 1fr;
   gap: 40px 16px;
 }
 
diff --git a/Answer/index.html b/Answer/index.html
index 6c329d9..d4a0cef 100644
--- a/Answer/index.html
+++ b/Answer/index.html
@@ -8,7 +8,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <!-- CSSファイルの適用 -->
   <link rel="stylesheet" href="css/styles.css">
-  
+
 </head>
 
 <body>
diff --git a/css/styles.css b/css/styles.css
index b3ea3c4..6c1e0b2 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1,4 +1,4 @@
-/*-------------------------------------------
+*-------------------------------------------
 	共通部分
   -------------------------------------------*/
 * {
@@ -41,28 +41,99 @@ a {
 /*-------------------------------------------
   ヘッダー
   -------------------------------------------*/
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 80px;
+  width: 100%;
+}
+
+.header-logo {
+  height: 24px;
+}
+
+.header ul {
+  display: flex;
+  gap: 24px;
+}
 
+.header li a:hover {
+  opacity: 0.7;
+}
 
 /*-------------------------------------------
   メインビジュアル
   -------------------------------------------*/
-
+.main-visual {
+  width: 100%;
+  height: 640px;
+  object-fit: cover;
+  border-radius: 16px;
+}
 
 /*-------------------------------------------
   セクション 共通部分
   -------------------------------------------*/
+.section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 40px;
+}
 
+.section-title {
+  border-bottom: solid 1px #383e45;
+}
 
 /* -------------------------------------------
   プロフィール
   -------------------------------------------*/
+.profile {
+  display: flex;
+  align-items: center;
+  gap: 40px;
+}
+
+.profile-image {
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+  object-fit: cover;
+}
 
+.profile-info {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
 
 /* -------------------------------------------
   記事
   -------------------------------------------*/
+.articles {
+  display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+  gap: 40px 16px;
+}
+
+.article {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
 
+.article-image {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+}
 
 /*-------------------------------------------
   フッター
-  -------------------------------------------*/
\ No newline at end of file
+  -------------------------------------------*/
+.footer {
+  font-size: small;
+  padding: 40px 0;
+  text-align: center;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 4ad8ef6..bc4dac7 100644
--- a/index.html
+++ b/index.html
@@ -3,28 +3,76 @@
 
 <head>
   <meta charset="utf-8" />
-  <title>自己紹介</title>
-  <meta name="description" content="自己紹介サイトです。" />
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <!-- CSSファイルの適用 -->
-  
+  <link rel="stylesheet" href="css/styles.css">
+  <title>自己紹介</title>
 </head>
 
 <body>
   <div class="page-wrapper">
     <!-- ヘッダー -->
-
+    <header class="header">
+      <img src="img/logo.png" alt="logo" class="header-logo" />
+      <nav>
+        <ul>
+          <li><a href="#profile">Profile</a></li>
+          <li><a href="#article">Article</a></li>
+        </ul>
+      </nav>
+    </header>
     <main class="main-content">
       <!-- メインビジュアル -->
-
+      <img src="img/main_visual.jpg" alt="メインビジュアル" class="main_visual" />
       <!-- プロフィール セクション -->
-
+      <section class="section" id="profile">
+        <h2 class="section-title">Profile</h2>
+        <div class="profile">
+          <img src="img/profile.png" alt="profile" class="profile-image" />
+          <div class="profile-info">
+            <h3>TARO RARETECH</h3>
+            <p>
+              出身: 東京都<br />
+              趣味: アプリ開発、散歩（公園を中心に歩き回っています）<br />
+              技術: Python,Django,JavaScript,React,AWS,GCP<br />
+              主な仕事:マネジメント,バックエンド開発
+            </p>
+          </div>
+        </div>
+      </section>
       <!-- 記事 セクション -->
+      <section class="section" id="articles">
+        <h2 class="section-title">Articles</h2>
+        <div class="articles">
+          <div class="article">
+            <img src="img/article.jpg" alt="記事サムネイル" class="article-image" />
+            <h3>記事のタイトル</h3>
+            <p>こんな記事を書きました。こんな記事を書きました。こんな記事を書きました。こんな記事を書きました。</p>
+          </div>
+          <div class="article">
+            <img src="img/article.jpg" alt="記事サムネイル" class="article-image" />
+            <h3>記事のタイトル</h3>
+            <p>こんな記事を書きました。こんな記事を書きました。こんな記事を書きました。こんな記事を書きました。</p>
+          </div>
+          <div class="article">
+            <img src="img/article.jpg" alt="記事サムネイル" class="article-image" />
+            <h3>記事のタイトル</h3>
+            <p>こんな記事を書きました。こんな記事を書きました。こんな記事を書きました。こんな記事を書きました。</p>
+          </div>
+          <div class="article">
+            <img src="img/article.jpg" alt="記事サムネイル" class="article-image" />
+            <h3>記事のタイトル</h3>
+            <p>こんな記事を書きました。こんな記事を書きました。こんな記事を書きました。こんな記事を書きました。</p>
+          </div>
+        </div>
+      </section>
 
     </main>
-
     <!-- フッター -->
+    <footer class="footer">
+      <p>&copy; 2024 Profile</p>
 
+    </footer>
   </div>
 </body>
 
