diff --git a/src/css/main.css b/src/css/main.css
index fed3ebd..f435bbe 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -133,7 +133,9 @@ ul.social-icons {
 }
 .add_to_discord:hover {
     background-color: rgb(152, 67, 233);
-}
+    text-decoration: none;
+  }
+  
 .commandstitle {
     color: #ffffff;
 }
@@ -199,6 +201,141 @@ ul.social-icons {
     font-family: 'Cairo';
   }
 
+  .card{
+    background-color: rgb(255, 251, 251);
+    color: red;
+    max-width: 360px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    border-radius: 2rem;
+    box-shadow: 0px 1rem 1.5rem rgba(0,0,0,0.5);
+  }
+  
+  .card .banner{
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    height: 11rem;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    box-sizing: border-box;
+  }
+  .card .banner img{
+    background-color: #fff;
+    width: 8rem;
+    height: 8rem;
+    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.3);
+    border-radius: 50%;
+    transform: translateY(50%);
+    transition: transform 200ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
+  }
+  
+  .card .banner img:hover{
+    transform: translateY(50%) scale(1.3);
+  }
+  
+  .card h2.name{
+    text-align: center;
+    padding: 0 2rem 0.5rem;
+    margin: 0;
+  }
+  
+  .card .title{
+    color: #a0a0a0;
+    font-size: 0.85rem;
+    text-align: center;
+    padding: 0 2rem 1.2rem;
+  }
+  
+  .card .actions{
+    padding: 0 2rem 1.2rem;
+    display: flex;
+    flex-direction: column;
+    order: 99;
+  }
+  
+  .card .actions .follow-info{
+    padding: 0 0 1rem;
+    display: flex;
+  }
+  
+  .card .actions .follow-info h2{
+    text-align: center;
+    width: 50%;
+    margin: 0;
+    box-sizing: border-box;
+  }
+  
+  .card .actions .follow-info h2 a{
+    text-decoration: none;
+    padding: 0.8rem;
+    display: flex;
+    flex-direction: column;
+    border-radius: 0.8rem;
+    transition: background-color 100ms ease-in-out;
+  }
+  
+  .card .actions .follow-info h2 a span{
+    color: #1c9eff;
+    font-weight: bold;
+    transform-origin: bottom;
+    transform: scaleY(1.3);
+    transition: color 100ms ease-in-out;
+  }
+  
+  .card .actions .follow-info h2 a small{
+    color: #afafaf;
+    font-size: 0.85rem;
+    font-weight: normal;
+  }
+  
+  .card .actions .follow-info h2 a:hover{
+    background-color: #f2f2f2;
+  }
+  
+  .card .actions .follow-info h2 a:hover span{
+    color: #007ad6;
+  }
+  
+  .card .actions .follow-btn button{
+    color: inherit;
+    font: inherit;
+    font-weight: bold;
+    background-color: #ffd01a;
+    width: 100%;
+    border: none;
+    padding: 1rem;
+    outline: none;
+    box-sizing: border-box;
+    border-radius: 1.5rem/50%;
+    transition: background-color 100ms ease-in-out, transform 200ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
+  }
+  
+  .card .actions .follow-btn button:hover{
+    background-color: #efb10a;
+    transform: scale(1.1);
+  }
+  
+  .card .actions .follow-btn button:active{
+    background-color: #e8a200;
+    transform: scale(1);
+  }
+
+  .licetitle {
+    color: #ffff;
+    margin: 5px;
+    font-family: monospace;
+  }
+
+  .textlice {
+    box-sizing: border-box;
+    color:  #ffff;
+    margin: 3px;
+    letter-spacing: 1px;
+  }
+
 .mastfoot.mb-auto{
     padding-bottom: 40px;
     padding: 20px;
@@ -207,7 +344,6 @@ ul.social-icons {
     height: auto;
     background-color: #212529;
     color: white;
-    position: initial;
 }
 
 
diff --git a/src/index.html b/src/index.html
index a501d37..310a367 100644
--- a/src/index.html
+++ b/src/index.html
@@ -30,7 +30,7 @@
             <a class="nav-link" href="pages/commands.html">Commands</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link" href="pages/team.html">Dev Team</a>
+            <a class="nav-link" href="pages/team.html">Staff</a>
           </li>
           <li class="nav-item dropdown">
             <a class="nav-link dropdown-toggle" href="#" id="linksdrop" role="button" data-bs-toggle="dropdown"
@@ -122,17 +122,15 @@ <h3 class="ttjoin ml-5"><span>Join our</span>
               </svg>Add To Discord</button></a></div>
       </div>
     </div>
+
     <footer class="mastfoot mb-auto">
       <div class="container-fluid mb-auto">
-        <div class="row">
-          <div class="col-md-6 mt-md-0 mt-3 text-center">
-            <h5 class="text-uppercase"><b>Additional Information</b></h5>
+        <div class="row d-flex justify-content-center">
+          <div class="">
             <p style="font-size: 19px; padding: 0px; margin: 0px;"><a href="/Hadi-Koubeissi"
-                style="text-decoration: none; color: white;">Made with 💖 by Hadi Koubeissi</a></br>Hbot © 2021. All
-              rights reserved.</br>[<a href="/license"><b>Terms Of Use</b></a>]</p>
-          </div>
-          <div class="col-md-6 mb-md-0 mb-3 text-center">
-            <h5 class="text-uppercase"><b>Custom settings</b></h5>
+                style="text-decoration: none; color: white;">Made with 💖 by Hadi Koubeissi</a></br>Hbot ©
+              2021. All
+              rights reserved.</br>[<a href="./pages/license.html"><b>Terms Of Use</b></a>]</p>
           </div>
         </div>
       </div>
diff --git a/src/js/license.js b/src/js/license.js
new file mode 100644
index 0000000..8450e01
--- /dev/null
+++ b/src/js/license.js
@@ -0,0 +1,9 @@
+const data = {
+    "text": "MIT License \n Copyright (c) 2021 Hadi Koubeissi. \n Permission is hereby granted, free of charge, to any person obtaining a copy \n of this software and associated documentation files (the 'Software'), to deal \n in the Software without restriction, including without limitation the rights \n to use, copy, modify, merge, publish, distribute, sublicense, and/or sell \n copies of the Software, and to permit persons to whom the Software is \n furnished to do so, subject to the following conditions: \n The above copyright notice and this permission notice shall be included in all \n copies or substantial portions of the Software. \n THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR \n IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, \n FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE \n AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER \n LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, \n OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE."
+}
+
+document.getElementById("text").innerText += data.text;
+
+function back(){
+    history.back();
+}
\ No newline at end of file
diff --git a/src/js/team.js b/src/js/team.js
index 8db2fa3..2f2d147 100644
--- a/src/js/team.js
+++ b/src/js/team.js
@@ -1,29 +1,35 @@
-// this code is created by LWJerri#3290 https://lwjerri.js.org/
-const teamContainer = document.getElementById(".team-container");
-const API = "https://japi.ohori.me/discord/avatar/";
+/*
+THIS CODE BY LWJerri#3290
+*/
+const boxOwners = document.getElementById("owners_list");
+/*
+you can use this api but if you need to create custome api check:
+ https://github.com/Hadi-Koubeissi/discord-web-api
+*/
+const API = "https://discord-web-api.glitch.me/discord/user/";
 
 const owners = [
     {
         "id": "442793591501357056",
-        "post": "Creator / Dev",
+        "post": "Bot Owner",
         "GHURL": "https://github.com/Hadi-Koubeissi",
         "InstaURL": "",
         "YTURL": "https://www.youtube.com/channel/UCmO0xdpxQr7fX2Csth_2JOQ"
     }
 ]
 
-for(let indexOne = 0; indexOne < owners.length; indexOne++){
+for (let indexOne = 0; indexOne < owners.length; indexOne++) {
     const elementOwners = owners[indexOne];
 
     $.getJSON(API + elementOwners.id)
-    .then(output => {
-        if(!output.username || !output.url){
-            setTimeout(function(){
-                document.querySelectorAll(".banner img").forEach(imgs => imgs.src = url + "/src/images/logo-default.png");
-            }, 1000);
-        }
+        .then(output => {
+            if (!output.username || !output.url) {
+                setTimeout(function () {
+                    document.querySelectorAll(".banner img").forEach(imgs => imgs.src = url + "../assets/bot.png");
+                }, 1000);
+            }
 
-        const ownerList = "<div id='trigger' class='card' style='margin: 15px;'><div class='banner'><img src='" + output.url + "'></div></br></br></br></br><h2 class='name'>" + output.username + "</h2><div class='title'><h1 id='trigger2' style='font-size: 26px; color: #000000;'>" + elementOwners.post + "</h2></div><div class='actions'><div class='follow-btn' style='margin-bottom: 5px;'><a href='" + elementOwners.GHURL + "' target='_blank'><button style='color: #000000;'>GitHub</button></a></div><div class='follow-btn'><a href='" + elementOwners.YTURL + "' target='_blank'><button style='color: #000000;'>YouTube</button></a></div></div></div>"
-        teamContainer.innerHTML += ownerList;
-    });
+            const ownerList = "<div id='trigger' class='card' style='margin: 15px;'><div class='banner'><img src='" + output.url + "'></div></br></br></br></br><h2 class='name'>" + output.username + "</h2><div class='title'><h1 id='trigger2' style='font-size: 26px; color: #000000;'>" + elementOwners.post + "</h2></div><div class='actions'><div class='follow-btn' style='margin-bottom: 5px;'><a href='" + elementOwners.GHURL + "' target='_blank'><button style='color: #000000;'>GitHub</button></a></div><div class='follow-btn'><a href='" + elementOwners.YTURL + "' target='_blank'><button style='color: #000000;'>YouTube</button></a></div></div></div>"
+            boxOwners.innerHTML += ownerList;
+        });
 }
\ No newline at end of file
diff --git a/src/pages/commands.html b/src/pages/commands.html
index edfc597..0e11a1b 100644
--- a/src/pages/commands.html
+++ b/src/pages/commands.html
@@ -32,7 +32,7 @@
                         <a class="nav-link" aria-current="page" href="#/">Commands</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link" href="./team.html">Dev Team</a>
+                        <a class="nav-link" href="./team.html">Staff</a>
                     </li>
                     <li class="nav-item dropdown">
                         <a class="nav-link dropdown-toggle" href="#" id="linksdrop" role="button"
@@ -119,21 +119,17 @@ <h4 style="color: #cccccc;">Examples:</h4>
     </div>
 
     <footer class="mastfoot mb-auto">
-        <div class="container-fluid mb-auto">
-            <div class="row">
-                <div class="col-md-6 mt-md-0 mt-3 text-center">
-                    <h5 class="text-uppercase"><b>Additional Information</b></h5>
-                    <p style="font-size: 19px; padding: 0px; margin: 0px;"><a href="/Hadi-Koubeissi"
-                            style="text-decoration: none; color: white;">Made with 💖 by Hadi Koubeissi</a></br>Hbot ©
-                        2021. All
-                        rights reserved.</br>[<a href="/license"><b>Terms Of Use</b></a>]</p>
-                </div>
-                <div class="col-md-6 mb-md-0 mb-3 text-center">
-                    <h5 class="text-uppercase"><b>Custom settings</b></h5>
+            <div class="container-fluid mb-auto">
+                <div class="row d-flex justify-content-center">
+                    <div class="">
+                        <p style="font-size: 19px; padding: 0px; margin: 0px;"><a href="/Hadi-Koubeissi"
+                                style="text-decoration: none; color: white;">Made with 💖 by Hadi Koubeissi</a></br>Hbot ©
+                            2021. All
+                            rights reserved.</br>[<a href="./license.html"><b>Terms Of Use</b></a>]</p>
+                    </div>
                 </div>
             </div>
-        </div>
-    </footer>
+        </footer>
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
diff --git a/src/pages/license.html b/src/pages/license.html
new file mode 100644
index 0000000..59b0da1
--- /dev/null
+++ b/src/pages/license.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <link rel="stylesheet" href="../css/bootstrap.min.css">
+    <link rel="stylesheet" href="../css/main.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="icon" href="../assets/favicon.png">
+    <title>Hbot</title>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+
+<body style="background-color: #38383b">
+    <div class="container-fluid text-center" style="margin: 25px 0 25px 0;">
+        <h1 class="display-5 licetitle" style="padding-bottom: 10px;"><b>LICENSE</b></h1>
+        <hr style="border: 1px solid #ffff; width: 170px;">
+        <blockquote class="blockquote">
+            <p class="mb-0 textlice" id="text"></p>
+        </blockquote>
+        <a class="btn btn-primary" href="/Hadi-koubeissi/Discord-bot-website-templat">Go to github
+            repository</a>
+        <a class="btn btn-success" href="../index.html">Back to main page</a>
+
+        <script src="../js/license.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/pages/team.html b/src/pages/team.html
index 78e6cae..cf199c7 100644
--- a/src/pages/team.html
+++ b/src/pages/team.html
@@ -32,7 +32,7 @@
                         <a class="nav-link" aria-current="page" href="./commands.html">Commands</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link" href="#/">Dev Team</a>
+                        <a class="nav-link" href="#/">Staff</a>
                     </li>
                     <li class="nav-item dropdown">
                         <a class="nav-link dropdown-toggle" href="#" id="linksdrop" role="button"
@@ -66,25 +66,21 @@
         </div>
     </nav>
 
-    <div class="team-page">
-        <div class="team-page-title">Neeko Team</div>
-        <div class="team-container">
-
+    <div class="container text-center">
+        <h3 style="color: #ffffff; margin: 20px">Dev Team</h3>
+        <hr style="border: 1px solid #ffffff">
+        <div class="row equal d-flex justify-content-center" style="margin: 20px" id="owners_list">
         </div>
     </div>
 
     <footer class="mastfoot mb-auto">
         <div class="container-fluid mb-auto">
-            <div class="row">
-                <div class="col-md-6 mt-md-0 mt-3 text-center">
-                    <h5 class="text-uppercase"><b>Additional Information</b></h5>
+            <div class="row d-flex justify-content-center">
+                <div class="">
                     <p style="font-size: 19px; padding: 0px; margin: 0px;"><a href="/Hadi-Koubeissi"
                             style="text-decoration: none; color: white;">Made with 💖 by Hadi Koubeissi</a></br>Hbot ©
                         2021. All
-                        rights reserved.</br>[<a href="/license"><b>Terms Of Use</b></a>]</p>
-                </div>
-                <div class="col-md-6 mb-md-0 mb-3 text-center">
-                    <h5 class="text-uppercase"><b>Custom settings</b></h5>
+                        rights reserved.</br>[<a href="./license.html"><b>Terms Of Use</b></a>]</p>
                 </div>
             </div>
         </div>