diff --git a/Image/Team_page/Barbell_teampage.png b/Image/Team_page/Barbell_teampage.png
new file mode 100644
index 0000000..3e115fb
Binary files /dev/null and b/Image/Team_page/Barbell_teampage.png differ
diff --git a/Image/Team_page/Golf_teampage.png b/Image/Team_page/Golf_teampage.png
new file mode 100644
index 0000000..4f453f4
Binary files /dev/null and b/Image/Team_page/Golf_teampage.png differ
diff --git a/Image/Team_page/Kan_teampage.png b/Image/Team_page/Kan_teampage.png
new file mode 100644
index 0000000..88854e2
Binary files /dev/null and b/Image/Team_page/Kan_teampage.png differ
diff --git a/Image/Team_page/Kung_teampage.png b/Image/Team_page/Kung_teampage.png
new file mode 100644
index 0000000..8df0222
Binary files /dev/null and b/Image/Team_page/Kung_teampage.png differ
diff --git a/html/team_template.html b/html/Barbell_teampage.html
similarity index 56%
rename from html/team_template.html
rename to html/Barbell_teampage.html
index cacff5f..bb3e769 100644
--- a/html/team_template.html
+++ b/html/Barbell_teampage.html
@@ -9,19 +9,41 @@
   <link rel="icon" href="../Image/icon.png">
   <style>
     /* Additional CSS styles */
+    main {
+      display: flex;
+      height: 90vh;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../Image/mainPage/Bg3.png");
+      background-size: cover;
+      background-position: center;
+      padding: 50px 0;
+    }
+
     #section-template {
       display: flex;
-      flex-direction: row;
+      flex-direction: row-reverse; /* Reverses the order of elements */
       align-items: center;
       justify-content: space-around;
-      padding: 50px 0;
+      width: 80%; /* Adjust width as needed */
+      margin-top: 20px; /* Adjust margin-top as needed */
     }
+
     #section-template img {
-      width: 50%;
+      width: auto;
+      height: 90%;
     }
+
     #section-template .content {
       width: 40%;
     }
+
+    #section-details {
+      font-size: 30px;
+      margin: auto;
+    }
+
     @media screen and (max-width: 768px) {
       /* Responsive styles */
       #section-template {
@@ -36,13 +58,30 @@
         margin-top: 20px;
       }
     }
+    
+    #back-button {
+      margin-top: 20px; /* Adjust top margin */
+      padding: 12px;
+      color: black;
+      -webkit-text-stroke-color: black;
+      -webkit-text-stroke-width: 0.7px;
+      background-color: white;
+      border-radius: 20px;
+      border: solid #000000 2px;
+      margin-left: auto; /* Moves the button to the right */
+    }
+
+  ol {
+  list-style-type: none; /* Removes bullet points */
+  }
+
+    #section-title {
+      font-size: 55px;
+      text-align: center;
+    }
+
     #section-template {
-      background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../Image/mainPage/Bg3.png");
-      background-size: auto 50%; /* Set background size to auto width and 25% height */
-      background-size: cover;
-      background-position: center;
-      place-items: center;
-      height: 100%;
+      margin-right: 20px; /* Adjust as needed */
     }
   </style>
   <meta charset="UTF-8">
@@ -50,6 +89,7 @@
   <script src="../script.js"></script>
   <title>Magical Munchies</title>
 </head>
+
 <body>
 
   <nav>
@@ -63,31 +103,25 @@
   </nav>
 
   <main>
-    <section id="section-template">
-      <img id="section-image" src="" alt="Template Image">
-      <div class="content">
-        <h2 id="section-title">-Section Title-</h2>
-        <ul id="section-details">
-          <li>Name: </li>
-          <li>Birthday: </li>
-          <li>Instagram: </li>
-          <li>Proficiency: </li>
-        </ul>
-        <button onclick="history.back()">Back</button>
+    <h1 id="section-title">-The Tortured Bakers Department-</h1>
+    <div id="section-template">
+      <div class="content" id="section-details">
+          <br>Name: Jirakit Kanjanawaraporn </br>
+          <br>Birthday: 4 July 2005</br>
+          <br>Instagram: @barbell_jirakit</br>
+          <br>Proficiency:</br>
+          <ul>
+            <li>Master of Charms</li>
+          </ul>
+        <a id="back-button" href="mainPage.html">Back</a>
       </div>
-    </section>
+      <img id="section-image" src="../Image/Team_page/Barbell_teampage.png" alt="Template Image">
+    </div>
   </main>
 
   <footer>
     <p>Copyright © 2023. All Right Reserved - AnavinnCookie</p>
   </footer>
 
-  <script>
-    // Replace placeholders with actual content
-    document.getElementById('section-image').src = "../Image/mainPage/Barbell.png"; // Replace with actual image URL
-    document.getElementById('section-title').innerText = "The Tortured Bakers Department"; // Replace with actual title
-    document.querySelectorAll('#section-details li')[0].innerText = "Name: MagicalMunchies@gmail.com"; // Replace with actual detail
-    // Add more lines to replace other details as needed
-  </script>
 </body>
 </html>
diff --git a/html/Golf_teampage.html b/html/Golf_teampage.html
new file mode 100644
index 0000000..79caf0a
--- /dev/null
+++ b/html/Golf_teampage.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <link rel="stylesheet" href="../css/styles_mainPage.css">
+  <link rel="stylesheet" href="../css/nav_footer.css">
+  <meta name="description" content="Magical Munchies is a captivating store that specializes in a selection of fantasy themed cookies and potions.">
+  <meta name="keywords" content="Magical Munchies, Anavinn-Cookies, Napatkrit Asavarojpanich, Kaninpat Janthasri, Jirakit Kanjanawaraporn, Natchapol Mingmahaphan, Anavinn Rujithanyapat">
+  <title>Magical Munchies</title>
+  <link rel="icon" href="../Image/icon.png">
+  <style>
+    /* Additional CSS styles */
+    main {
+      display: flex;
+      height: 90vh;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../Image/mainPage/Bg3.png");
+      background-size: cover;
+      background-position: center;
+      padding: 50px 0;
+    }
+
+    #section-template {
+      display: flex;
+      flex-direction: row-reverse; /* Reverses the order of elements */
+      align-items: center;
+      justify-content: space-around;
+      width: 80%; /* Adjust width as needed */
+      margin-top: 20px; /* Adjust margin-top as needed */
+    }
+
+    #section-template img {
+      width: auto;
+      height: 90%;
+    }
+
+    #section-template .content {
+      width: 40%;
+    }
+
+    #section-details {
+      font-size: 30px;
+      margin: auto;
+    }
+
+    @media screen and (max-width: 768px) {
+      /* Responsive styles */
+      #section-template {
+        flex-direction: column;
+        align-items: center;
+      }
+      #section-template img {
+        width: 80%;
+      }
+      #section-template .content {
+        width: 80%;
+        margin-top: 20px;
+      }
+    }
+    #back-button {
+      margin-top: 20px; /* Adjust top margin */
+      padding: 12px;
+      color: black;
+      -webkit-text-stroke-color: black;
+      -webkit-text-stroke-width: 0.7px;
+      background-color: white;
+      border-radius: 20px;
+      border: solid #000000 2px;
+      margin-left: auto; /* Moves the button to the right */
+    }
+
+  ol {
+  list-style-type: none; /* Removes bullet points */
+  }
+
+    #section-title {
+      font-size: 55px;
+      text-align: center;
+    }
+
+    #section-template {
+      margin-right: 20px; /* Adjust as needed */
+    }
+  </style>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script src="../script.js"></script>
+  <title>Magical Munchies</title>
+</head>
+
+<body>
+
+  <nav>
+    <img src="../Image/NAV/text_logo 2.png" alt="Magical Munchies Logo">
+    <p>Magical Munchies</p>
+    <div class="nav-links-wrapper">
+      <a href="mainPage.html">Home</a>
+      <a href="#">Store</a>
+      <a href="admin.html">Login</a>
+    </div>
+  </nav>
+
+  <main>
+    <h1 id="section-title">-The Tortured Bakers Department-</h1>
+    <div id="section-template">
+      <div class="content" id="section-details">
+          <br>Name: Natchapol Mingmahaphan </br>
+          <br>Birthday: 13 September 2004</br>
+          <br>Instagram: @nnatcha.g</br>
+          <br>Proficiency:</br>
+          <ul>
+            <li>Master of Defense Against the Dark Arts</li>
+          </ul>
+        <a id="back-button" href="mainPage.html">Back</a>
+      </div>
+      <img id="section-image" src="../Image/Team_page/Golf_teampage.png" alt="Template Image">
+    </div>
+  </main>
+
+  <footer>
+    <p>Copyright © 2023. All Right Reserved - AnavinnCookie</p>
+  </footer>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/html/Kan_teampage.html b/html/Kan_teampage.html
new file mode 100644
index 0000000..d5973d9
--- /dev/null
+++ b/html/Kan_teampage.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <link rel="stylesheet" href="../css/styles_mainPage.css">
+  <link rel="stylesheet" href="../css/nav_footer.css">
+  <meta name="description" content="Magical Munchies is a captivating store that specializes in a selection of fantasy themed cookies and potions.">
+  <meta name="keywords" content="Magical Munchies, Anavinn-Cookies, Napatkrit Asavarojpanich, Kaninpat Janthasri, Jirakit Kanjanawaraporn, Natchapol Mingmahaphan, Anavinn Rujithanyapat">
+  <title>Magical Munchies</title>
+  <link rel="icon" href="../Image/icon.png">
+  <style>
+    /* Additional CSS styles */
+    main {
+      display: flex;
+      height: 90vh;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../Image/mainPage/Bg3.png");
+      background-size: cover;
+      background-position: center;
+      padding: 50px 0;
+    }
+
+    #section-template {
+      display: flex;
+      flex-direction: row-reverse; /* Reverses the order of elements */
+      align-items: center;
+      justify-content: space-around;
+      width: 80%; /* Adjust width as needed */
+      margin-top: 20px; /* Adjust margin-top as needed */
+    }
+
+    #section-template img {
+      width: auto;
+      height: 90%;
+    }
+
+    #section-template .content {
+      width: 40%;
+    }
+
+    #section-details {
+      font-size: 30px;
+      margin: auto;
+    }
+
+    @media screen and (max-width: 768px) {
+      /* Responsive styles */
+      #section-template {
+        flex-direction: column;
+        align-items: center;
+      }
+      #section-template img {
+        width: 80%;
+      }
+      #section-template .content {
+        width: 80%;
+        margin-top: 20px;
+      }
+    }
+    #back-button {
+      margin-top: 20px; /* Adjust top margin */
+      padding: 12px;
+      color: black;
+      -webkit-text-stroke-color: black;
+      -webkit-text-stroke-width: 0.7px;
+      background-color: white;
+      border-radius: 20px;
+      border: solid #000000 2px;
+      margin-left: auto; /* Moves the button to the right */
+    }
+
+  ol {
+  list-style-type: none; /* Removes bullet points */
+  }
+
+    #section-title {
+      font-size: 55px;
+      text-align: center;
+    }
+
+    #section-template {
+      margin-right: 20px; /* Adjust as needed */
+    }
+  </style>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script src="../script.js"></script>
+  <title>Magical Munchies</title>
+</head>
+
+<body>
+
+  <nav>
+    <img src="../Image/NAV/text_logo 2.png" alt="Magical Munchies Logo">
+    <p>Magical Munchies</p>
+    <div class="nav-links-wrapper">
+      <a href="mainPage.html">Home</a>
+      <a href="#">Store</a>
+      <a href="admin.html">Login</a>
+    </div>
+  </nav>
+
+  <main>
+    <h1 id="section-title">-The Tortured Bakers Department-</h1>
+    <div id="section-template">
+      <div class="content" id="section-details">
+          <br>Name: Kaninpat Janthasri </br>
+          <br>Birthday: 17 October 2003</br>
+          <br>Instagram: @k.n_jt</br>
+          <br>Proficiency:</br>
+          <ul>
+            <li>Master of Care of Magical Creatures</li>
+          </ul>
+        <a id="back-button" href="mainPage.html">Back</a>
+      </div>
+      <img id="section-image" src="../Image/Team_page/Kan_teampage.png" alt="Template Image">
+    </div>
+  </main>
+
+  <footer>
+    <p>Copyright © 2023. All Right Reserved - AnavinnCookie</p>
+  </footer>
+
+</body>
+</html>
diff --git a/html/Kung_teampage.html b/html/Kung_teampage.html
new file mode 100644
index 0000000..29a9551
--- /dev/null
+++ b/html/Kung_teampage.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <link rel="stylesheet" href="../css/styles_mainPage.css">
+  <link rel="stylesheet" href="../css/nav_footer.css">
+  <meta name="description" content="Magical Munchies is a captivating store that specializes in a selection of fantasy themed cookies and potions.">
+  <meta name="keywords" content="Magical Munchies, Anavinn-Cookies, Napatkrit Asavarojpanich, Kaninpat Janthasri, Jirakit Kanjanawaraporn, Natchapol Mingmahaphan, Anavinn Rujithanyapat">
+  <title>Magical Munchies</title>
+  <link rel="icon" href="../Image/icon.png">
+  <style>
+    /* Additional CSS styles */
+    main {
+      display: flex;
+      height: 90vh;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../Image/mainPage/Bg3.png");
+      background-size: cover;
+      background-position: center;
+      padding: 50px 0;
+    }
+
+    #section-template {
+      display: flex;
+      flex-direction: row-reverse; /* Reverses the order of elements */
+      align-items: center;
+      justify-content: space-around;
+      width: 80%; /* Adjust width as needed */
+      margin-top: 20px; /* Adjust margin-top as needed */
+    }
+
+    #section-template img {
+      width: auto;
+      height: 90%;
+    }
+
+    #section-template .content {
+      width: 40%;
+    }
+
+    #section-details {
+      font-size: 30px;
+      margin: auto;
+    }
+
+    @media screen and (max-width: 768px) {
+      /* Responsive styles */
+      #section-template {
+        flex-direction: column;
+        align-items: center;
+      }
+      #section-template img {
+        width: 80%;
+      }
+      #section-template .content {
+        width: 80%;
+        margin-top: 20px;
+      }
+    }
+    #back-button {
+      margin-top: 20px; /* Adjust top margin */
+      padding: 12px;
+      color: black;
+      -webkit-text-stroke-color: black;
+      -webkit-text-stroke-width: 0.7px;
+      background-color: white;
+      border-radius: 20px;
+      border: solid #000000 2px;
+      margin-left: auto; /* Moves the button to the right */
+    }
+
+  ol {
+  list-style-type: none; /* Removes bullet points */
+  }
+
+    #section-title {
+      font-size: 55px;
+      text-align: center;
+    }
+
+    #section-template {
+      margin-right: 20px; /* Adjust as needed */
+    }
+  </style>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script src="../script.js"></script>
+  <title>Magical Munchies</title>
+</head>
+
+<body>
+
+  <nav>
+    <img src="../Image/NAV/text_logo 2.png" alt="Magical Munchies Logo">
+    <p>Magical Munchies</p>
+    <div class="nav-links-wrapper">
+      <a href="mainPage.html">Home</a>
+      <a href="#">Store</a>
+      <a href="admin.html">Login</a>
+    </div>
+  </nav>
+
+  <main>
+    <h1 id="section-title">-The Tortured Bakers Department-</h1>
+    <div id="section-template">
+      <div class="content" id="section-details">
+          <br>Name: Napatkrit Asavarojpanich </br>
+          <br>Birthday: 10 November 2003</br>
+          <br>Instagram: @napatkrit</br>
+          <br>Proficiency:</br>
+          <ul>
+            <li>Master of History of Magic</li>
+          </ul>
+        <a id="back-button" href="mainPage.html">Back</a>
+      </div>
+      <img id="section-image" src="../Image/Team_page/Kung_teampage.png" alt="Template Image">
+    </div>
+  </main>
+
+  <footer>
+    <p>Copyright © 2023. All Right Reserved - AnavinnCookie</p>
+  </footer>
+
+</body>
+</html>
+
+ 
\ No newline at end of file
diff --git a/html/Son_teampage.html b/html/Son_teampage.html
index 5ff2175..f80e2ab 100644
--- a/html/Son_teampage.html
+++ b/html/Son_teampage.html
@@ -11,7 +11,7 @@
     /* Additional CSS styles */
     main {
       display: flex;
-      height: 88vh;
+      height: 90vh;
       flex-direction: column;
       align-items: center;
       justify-content: center;
@@ -32,7 +32,7 @@
 
     #section-template img {
       width: auto;
-      height: 95%;
+      height: 90%;
     }
 
     #section-template .content {
diff --git a/html/mainPage.html b/html/mainPage.html
index 1c63299..0675420 100644
--- a/html/mainPage.html
+++ b/html/mainPage.html
@@ -93,27 +93,27 @@ <h2>-The Tortured Bakers Department-</h2>
 
       <ul>
         <li id="Kung">
-          <img src="../Image/mainPage/Kung.png" alt="Napatkrit Image">
+          <a href="Kung_teampage.html"><img src="../Image/Team_page/Kung_teampage.png" alt="Napatkrit Image"></a>
           <br>
           Napatkrit Asavarojpanich
         </li>
         <li id="Kan">
-          <img src="../Image/mainPage/Kan.png" alt="Kaninpat Image">
+          <a href="Kan_teampage.html"><img src="../Image/Team_page/Kan_teampage.png" alt="Kaninpat Image"></a>
           <br>
           Kaninpat Janthasri
         </li>
         <li id="Barbell">
-          <img src="../Image/mainPage/Barbell.png" alt="Jirakit Image">
+          <a href="Barbell_teampage.html"><img src="../Image/Team_page/Barbell_teampage.png" alt="Jirakit Image"></a>
           <br>
           Jirakit Kanjanawaraporn
         </li>
         <li id="Golf">
-          <img src="../Image/mainPage/Golf.png" alt="Natchapol Image">
+          <a href="Golf_teampage.html"><img src="../Image/Team_page/Golf_teampage.png" alt="Natchapol Image"></a>
           <br>
           Natchapol Mingmahaphan
         </li>
         <li id="Son">
-          <img src="../Image/mainPage/Son.png" alt="Anavinn Image">
+          <a href="Son_teampage.html"><img src="../Image/Team_page/Son_teampage.png" alt="Anavinn Image"></a>
           <br>
           Anavinn Rujithanyapat
         </li>
