diff --git a/style.css b/style.css
index b10d465..4487ecf 100644
--- a/style.css
+++ b/style.css
@@ -26,25 +26,10 @@ html *
   flex-direction: column;
 }
 
-.pfp {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-top: 3cm;
-}
-
 .middle {
   grid-area: middle;
   width: 15cm;
 }
-  
-.inner-grid {
-  display: grid;
-  align-items: center;
-  grid-template-columns: 3cm 1fr 3cm;
-  grid-template-areas: 
-    'inner-left inner-middle inner-right' 
-} 
 
 .description {
   font-size: 10pt;
@@ -60,6 +45,8 @@ html *
 
   .logo {
     color: #000;
+    font-weight: bold;
+    text-decoration: none;
   }
 
   .grid-container {
@@ -70,30 +57,7 @@ html *
         'left middle right' 
   } 
 
-  .button {
-    background-color: #EBEBEB;
-    color: black;
-    border: none;
-    border-radius: 8px;
-    justify-content: center;
-    align-items: center;
-    text-decoration: none;
-    display: flex;
-    font-size: 16px;
-    font-weight: bold;
-    margin: 4px 2px;
-    cursor: pointer;
-    width: 100px;
-    height: 35px;
-    transition-duration: 0.2s;
-  }
-
-  .button:hover {
-    background-color: #E0E0E0;
-  }
-
   .headerbutton {
-    background-color: #EBEBEB;
     color: black;
     border: none;
     border-radius: 8px;
@@ -102,7 +66,6 @@ html *
     text-decoration: none;
     display: flex;
     font-size: 16px;
-    font-weight: bold;
     margin: 4px 2px;
     padding-left: 0.3cm;
     padding-right: 0.3cm;
@@ -112,7 +75,7 @@ html *
   }
 
   .headerbutton:hover {
-    background-color: #E0E0E0;
+    background-color: #EBEBEB;
   }
 
   .list {
@@ -149,7 +112,6 @@ html *
   .topbar {
     position: fixed;
     width: 100%;
-    height: 1.2cm;
     top: 0px;
     left: 0px;
     background-color: rgba(255, 255, 255, 1);
@@ -158,42 +120,6 @@ html *
     z-index: 10;
   }
 
-
-  .backbutton {
-    position: absolute;
-    color: black;
-    border-radius:10px;
-    justify-content: center;
-    align-items: center;
-    text-decoration: none;
-    display: grid;
-    font-size: 14px;
-    cursor: pointer;
-    margin: 0.1cm;
-    transition-duration: 0.2s;
-    width: 1cm;
-    height: 1cm;
-  }
-
-  .backbutton:hover {
-    background-color: #DEDEDE;
-  }
-
-  .banner {
-    position: fixed;
-    background-color: #BFD7F3;
-    color: black;
-    width: 100%;
-    height: 1.2cm;
-    top: 0px;
-    left: 0px;
-    justify-content: center;
-    align-items: center;
-    display: flex;
-    font-weight: bold;
-    text-align: center;
-  }
-
   .gtk-button-pill {
     position: relative;
     width: auto;
@@ -217,6 +143,8 @@ html *
 
   .logo {
     color: #fff;
+    font-weight: bold;
+    text-decoration: none;
   }
 
   body {
@@ -231,30 +159,7 @@ html *
       'left middle right' 
   }
 
-  .button {
-    background-color: #4a4a4a;
-    color: #ffffff;
-    border: none;
-    border-radius: 8px;
-    justify-content: center;
-    align-items: center;
-    text-decoration: none;
-    display: flex;
-    font-size: 16px;
-    font-weight: bold;
-    margin: 4px 2px;
-    cursor: pointer;
-    width: 100px;
-    height: 35px;
-    transition-duration: 0.2s;
-  }
-
-  .button:hover {
-    background-color: #595959;
-  }
-
   .headerbutton {
-    background-color: #4a4a4a;
     color: #ffffff;
     border: none;
     border-radius: 8px;
@@ -263,7 +168,6 @@ html *
     text-decoration: none;
     display: flex;
     font-size: 16px;
-    font-weight: bold;
     margin: 4px 2px;
     padding-left: 0.3cm;
     padding-right: 0.3cm;
@@ -273,7 +177,7 @@ html *
   }
 
   .headerbutton:hover {
-    background-color: #595959;
+    background-color: #4a4a4a;
   }
 
   .list {
@@ -310,7 +214,6 @@ html *
   .topbar {
     position: fixed;
     width: 100%;
-    height: 1.2cm;
     top: 0px;
     left: 0px;
     background-color: #303030;
@@ -319,43 +222,6 @@ html *
     z-index: 10;
   }
 
-
-
-  .backbutton {
-    position: absolute;
-    color: #ffffff;
-    border-radius:10px;
-    justify-content: center;
-    align-items: center;
-    text-decoration: none;
-    display: grid;
-    font-size: 14px;
-    cursor: pointer;
-    margin: 0.1cm;
-    transition-duration: 0.2s;
-    width: 1cm;
-    height: 1cm;
-  }
-
-  .backbutton:hover {
-    background-color: #3e3e3e;
-  }
-
-  .banner {
-    position: fixed;
-    background-color: #29415E;
-    color: white;
-    width: 100%;
-    height: 1.2cm;
-    top: 0px;
-    left: 0px;
-    justify-content: center;
-    align-items: center;
-    display: flex;
-    font-weight: bold;
-    text-align: center;
-  }
-
   .gtk-button-pill {
     position: relative;
     width: auto;
diff --git a/team.html b/team.html
new file mode 100644
index 0000000..33d2eb0
--- /dev/null
+++ b/team.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="style.css">
+    <meta http-equiv="Content-Language" content="th">
+    <meta http-equiv="content-Type" content="text/html; charset=UTF-8">
+    <meta name="description" content="Home of TechTransThai's available services">
+    <title>TechTransThai</title>
+    <link rel="icon" type="image/png" href="icons/ttt-org.png">
+  </head>
+  
+<body>
+  <div class="header" >
+    <div class="topbar">
+
+        <div style="display: flex; justify-content: space-between; margin-left: 1cm; margin-right: 1cm;">
+          <a href="/" style="display: flex; align-items: center; text-decoration: none;">
+            <img src="icons/ttt-org.png" alt="TTT Logo" width="36" height="36" style="margin-right: 5px;"> 
+            <h4 class="logo">TechTransThai</h4>
+          </a>
+          <div style="display: flex; align-items: center">
+            <a target="_blank" rel="noopener noreferrer" href="/team.html" class="headerbutton">
+              ทีม
+            </a>
+            <a target="_blank" rel="noopener noreferrer" href="https://codeberg.org/latenightdef/ttt-org" class="headerbutton">
+              ซอร์สโคด
+            </a>
+            <a target="_blank" rel="noopener noreferrer" href="https://webring.wonderful.software#techtransthai.org" class="headerbutton">
+              วงแหวนเว็บ
+            </a>
+            
+            <a target="_blank" rel="noopener noreferrer" href="https://status.techtransthai.org/status/techtransthai" class="headerbutton">
+              สถานะการให้บริการ
+            </a>
+          </div>
+          
+        </div>
+
+    </div>
+  </div>
+  <div class="header" style="margin-top: 2cm;">
+    
+  </div>
+
+
+  <div class="grid-container">
+
+    <div class="middle">
+          
+
+      <div class="list">
+        <a class="listaction" href="https://latenightdef.techtransthai.org/">
+            <div style="display: flex; margin-left: 0.5cm; align-items: center;">
+              <p style="margin-right: 0.2cm;">Late Night Defender</p>
+            </div>
+            <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px" ><path fill="currentColor" d="m 4 0.996094 v 1 c 0 0.296875 0.125 0.558594 0.328125 0.742187 l 5.257813 5.257813 l -5.257813 5.261718 l -0.035156 0.03125 c -0.179688 0.183594 -0.292969 0.433594 -0.292969 0.707032 v 1 h 1 c 0.277344 0 0.527344 -0.109375 0.707031 -0.292969 l 0.035157 -0.03125 l 6.671874 -6.675781 l -6.671874 -6.671875 c -0.183594 -0.199219 -0.449219 -0.328125 -0.742188 -0.328125 z m 0 0"/></svg>
+
+        </a>
+        <div class="separator"></div>
+
+        <a class="listaction" href="https://nekovari.techtransthai.org/">
+          <div style="display: flex; margin-left: 0.5cm; align-items: center;">
+            <p style="margin-right: 0.2cm;">NekoVari</p>
+          </div>
+          <svg class="feather feather-external-link" viewBox="0 0 24 24" fill="none" height="20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" x2="21" y1="14" y2="3"></line></svg>
+        </a>
+        <div class="separator"></div>
+        <a class="listaction" href="https://srp-mangoeater.techtransthai.org/">
+          <div style="display: flex; margin-left: 0.5cm; align-items: center;">
+            <p style="margin-right: 0.2cm;">srp-mangoeater</p>
+          </div>
+          <svg class="feather feather-external-link" viewBox="0 0 24 24" fill="none" height="20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" x2="21" y1="14" y2="3"></line></svg>
+        </a>
+        <div class="separator"></div>
+        <a class="listaction" href="https://matsuri.techtransthai.org/">
+          <div style="display: flex; margin-left: 0.5cm; align-items: center;">
+            <p style="margin-right: 0.2cm;">matsuri</p>
+          </div>
+          <svg class="feather feather-external-link" viewBox="0 0 24 24" fill="none" height="20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" x2="21" y1="14" y2="3"></line></svg>
+        </a>
+        <div class="separator"></div>
+        <a class="listaction" href="https://blachp.techtransthai.org/">
+          <div style="display: flex; margin-left: 0.5cm; align-items: center;">
+            <p style="margin-right: 0.2cm;">BlaCHp</p>
+          </div>
+          <svg class="feather feather-external-link" viewBox="0 0 24 24" fill="none" height="20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" x2="21" y1="14" y2="3"></line></svg>
+        </a>
+        </div>
+    </div>
+  </div>
+
+</body>
+</html>