diff --git a/asset/css/portfolio.css b/asset/css/portfolio.css
index 7f8c3a0..462dbb2 100644
--- a/asset/css/portfolio.css
+++ b/asset/css/portfolio.css
@@ -10,7 +10,7 @@
     border-radius: 0.5rem;
 }
 ::-webkit-scrollbar-thumb:hover {
-    background-color: var(--main-color);
+    background-color: var(--accent-color);
 }
 ::-webkit-scrollbar-thumb {
     background-color: var(--scroolbar-color);
@@ -23,7 +23,7 @@
     --hover-box-shadow:rgba(0,0,0,0.19)0px 10px 20px,
     rgba(0,0,0,0.23)0px 6px 6px;     
     --gradient-white-bg2:linear-gradient(98deg,#e5eef7 0%,#fff 100%); 
-    --main-color:#0ef;  
+    --accent-color:#0ef;  
     --scroolbar-color:transparent;
     --skills-background-color:#383d52;
     --text-color:#000;
@@ -35,6 +35,9 @@
     --footer-color:#caf4f3;     
     --2nd-demac-color:grey;   
     --res-dec:#dddcdb;
+    --github-media-background-color:#000;
+    --github-media-text-color:#fff;
+
 
     /*---========Font Variables, Typo & Weight=======----*/
 
@@ -55,6 +58,7 @@ body.dark-theme {
     --input-background-color:#3e3e3e; 
     --2nd-demac-color:#fff; 
     --res-dec:#3e3e3e;
+    --github-media-background-color:#000;
     
 }
    *{
@@ -132,7 +136,7 @@ ul.navlist {
 .navlist li a:after {
     content: "";
     position: absolute;
-    background-color: var(--main-color);
+    background-color: var(--accent-color);
     height: 4px;
     width:0;
     left: 0;
@@ -160,14 +164,15 @@ ul.navlist {
     margin-right: 3rem;
     padding: 8px 10px;
     border-radius: 5px;
+    border: 1px solid var(--accent-color);
     font-family: var(--general-font);
-    font-weight: var(--font-bolder);
+    font-weight: var(--font-regular);
     transition: all .3s ease;
 }
 
 .btn:hover,.btn-box :hover {
     box-shadow: var(--hover-box-shadow);
-    background-color: var(--main-color);
+    background-color: var(--accent-color);
 }
 
 .navlist .resp {
@@ -274,7 +279,7 @@ section {
     font-weight: var(--font-bolder);
     font-family: var(--general-font);
     letter-spacing: 2px;
-    border: 2px solid var(--main-color);
+    border: 2px solid var(--accent-color);
     padding: 7px 20px;
     display: inline-block;
     position: relative;
@@ -296,7 +301,7 @@ section {
     position: absolute;
     width: 0;
     height: 100%;
-    background-color: var(--main-color);
+    background-color: var(--accent-color);
     left: -5%;
     bottom: 0;
     transform: skewX(-19deg);
@@ -404,7 +409,7 @@ section {
     font-family: var(--general-font);
     font-weight: var(--font-small);
     padding: .3rem;
-    color: var(--main-color);
+    color: var(--accent-color);
     text-align: center;
     display: inline-block;
     animation: scroll 0.6s linear infinite alternate-reverse;
@@ -454,7 +459,7 @@ justify-content: start;
 }
 
 .about-info1 h1 span {
-    text-decoration: 5px underline var(--main-color);
+    text-decoration: 5px underline var(--accent-color);
 }
 
 .about .info p {
@@ -479,7 +484,7 @@ justify-content: start;
 
 .download-btn {
     top: 5%;
-    background: var(--main-color);
+    background: var(--accent-color);
     padding:1rem;
     border: none;
     color: var(--text-color);
@@ -584,7 +589,7 @@ justify-content: start;
 }
 
 .skills .left .info h3 span {
-    text-decoration: 5px underline  var(--main-color);
+    text-decoration: 5px underline  var(--accent-color);
     z-index: 100;
 }
 
@@ -593,7 +598,7 @@ justify-content: start;
     font-size: 15.7px;
     font-family: var(--general-font);
     font-weight: var(--font-medium);
-    width: 90%;
+    width: 100%;
 }
 
 .coding {
@@ -615,7 +620,7 @@ justify-content: start;
 }
 
 .tool span {
-    text-decoration: underline var(--main-color);
+    text-decoration: underline var(--accent-color);
     font-family: var(--general-font);
     font-weight: var(--font-bold);
 }
@@ -686,7 +691,7 @@ justify-content: start;
 }
 
 #react {
-    color: var(--main-color);
+    color: var(--accent-color);
 }
 
 .coding .item-d {
@@ -719,7 +724,7 @@ justify-content: start;
 }
 
 .project-info h3 span {
-    text-decoration: 5px underline  var(--main-color);
+    text-decoration: 5px underline  var(--accent-color);
     font-family: var(--general-font);
     font-weight: var(--font-bolder);
 }
@@ -806,7 +811,7 @@ justify-content: start;
     font-family: var(--general-font);
     font-weight: var(--font-bold);
     font-size: 20px;
-    color: var(--main-color);
+    color: var(--accent-color);
     transform: scale(0);
     transition: 0.5s ease;
 }
@@ -825,7 +830,7 @@ justify-content: start;
 
 .card__button {
     display: inline-block;
-    background-color: var(--main-color);
+    background-color: var(--accent-color);
     padding: .75rem 1.5rem;
     border-radius: .35rem;
     color: var(--main-text-color);
@@ -835,7 +840,7 @@ justify-content: start;
 
 .card__button:hover {
     background-color: var(--main-text-color);
-    color: var(--main-color);
+    color: var(--accent-color);
     box-shadow: var(--hover-box-shadow);
     transition: all 0.5s ease-in;
 }
@@ -861,7 +866,7 @@ justify-content: start;
     width: initial;
     height: initial;
     font-size: 3.2rem;
-    color: var(--main-color);
+    color: var(--accent-color);
     margin-top: -5%;
 }
   
@@ -874,12 +879,12 @@ justify-content: start;
 }
   
 .swiper-pagination-bullet {
-    background-color: var(--main-color);
+    background-color: var(--accent-color);
     opacity: 1;
 }
   
 .swiper-pagination-bullet-active {
-    background-color: var(--main-color);
+    background-color: var(--accent-color);
 }
 
   /*-----======BreakPoints----=====*/
@@ -980,7 +985,7 @@ justify-content: start;
 }
 
 .con-btn {
-    background: var(--main-color);
+    background: var(--accent-color);
     width: 30%;
     padding: 10px;
     border-radius:1rem;
@@ -989,7 +994,7 @@ justify-content: start;
     font-size: 15px;
     font-weight: 900;
     color: #fff;  
-    border: 1px solid var(--main-color);
+    border: 1px solid var(--accent-color);
     overflow: hidden;
     transition: 0.29s ease-in;
     margin-left: 7px;
@@ -1002,9 +1007,9 @@ justify-content: start;
 }
 
 .con-btn:hover {
-    color: var(--main-color);
+    color: var(--accent-color);
     background: #333;
-    border: 1px solid var(--main-color);
+    border: 1px solid var(--accent-color);
     transition: 0.8s ease-in;
 }
 
@@ -1116,7 +1121,7 @@ animation: animate 1s linear infinite;
 
 .hire-me{
 position: relative;
-background: var(--main-color);
+background: var(--accent-color);
 text-align: center;
 margin-top: 20px;
 width: 40%;
@@ -1133,9 +1138,9 @@ transition: all 0.3s ease;
 }
 
 .hire-me:hover {
-border: 2px solid var(--main-color);
+border: 2px solid var(--accent-color);
 background-color: var(--bcg-color);
-color: var(--main-color);
+color: var(--accent-color);
 } 
 
 /* con demac*/
@@ -1173,7 +1178,7 @@ footer {
     align-items: end;
     justify-content: space-around;
     position: absolute;
-    background-color: var(--main-color);
+    background-color: var(--accent-color);
     padding: 30px 25px;
     border-radius: 10px;
     width: 60%;
@@ -1266,7 +1271,7 @@ footer .linkcol1 a {
     color: var(--main-text-color);
     font-family: var(--general-font);
     font-weight: var(--font-medium);
-    text-decoration: 2px underline var(--main-color);
+    text-decoration: 2px underline var(--accent-color);
     font-size: 20px;
     line-height: 26px;
 }
@@ -1332,7 +1337,7 @@ footer .youtube-description {
     color:var(--white-color);
     font-family: var(--general-font);
     font-weight: var(--font-medium);
-    text-decoration: 2px underline var(--main-color);
+    text-decoration: 2px underline var(--accent-color);
 }
 
 footer .youtube-link {
@@ -1378,7 +1383,7 @@ footer .youtube-link:hover {
     font-weight: var(--font-bold);
 }
 .footer-end a {
-    color: var(--main-color);
+    color: var(--accent-color);
 }
 
 #newdate {
@@ -1386,7 +1391,7 @@ footer .youtube-link:hover {
 }
 
 footer .footer-end a .dav-name {
-    text-decoration: 5px underline var(--main-color);
+    text-decoration: 5px underline var(--accent-color);
      font-family: var(--general-font);
     font-weight: var(--font-bold);
 }
@@ -1395,7 +1400,7 @@ footer .footer-end a .dav-name {
     position: fixed;
     right: 1rem;
     bottom: -50%;
-    background: var(--main-color);
+    background: var(--accent-color);
     display: inline-flex;
     padding: 6px;
     font-size: 1.25rem;
@@ -1612,7 +1617,7 @@ footer .footer-end a .dav-name {
     }
 
     .skills .left .info p {
-        width: 100%;
+        width: 115%;
         font-size: 25px;
     }
 
@@ -1749,7 +1754,7 @@ footer .footer-end a .dav-name {
     .navmenu li a:hover,
     .navmenu li a.active
     {
-        color: var(--main-color);   
+        color: var(--accent-color);   
     }
     
     .navmenu.open {
@@ -1778,7 +1783,11 @@ footer .footer-end a .dav-name {
     width: 100%;
 }
     .btn {
-        display: none;
+        background-color: var(--github-media-background-color);
+        margin-top: 45rem;
+        right: -8%;
+        font-size: 20px;
+        color: var(--github-media-text-color);
     }
 
     .guarantee .item {
@@ -1868,6 +1877,10 @@ footer .footer-end a .dav-name {
         font-size: 15px;
     }
 
+    .btn{
+        right: -9%;
+    }
+
     .seprator {
         margin-left: 15px;
     }
@@ -1982,7 +1995,32 @@ footer .footer-end a .dav-name {
     }
 
 }
-@media screen and (max-width:480px){
+@media screen and (max-width:499px){
+
+    .hi::before {
+        font-size: 12px;
+        left: 15rem;
+    }
+   
+    .hi::after {
+        font-size: 12px;
+    }
+
+    .home-detail h3 {
+        font-size: 2.5rem;
+    }
+
+    .home {
+        top: -2%;
+    }
+
+    .multiple-text {
+        font-size: 13px;
+    }
+
+    .btn{
+        right: -12%;
+    }
 
     .card__data {
         padding: 1rem;
@@ -2016,27 +2054,6 @@ footer .footer-end a .dav-name {
         font-weight: var(--font-bolder);
        }
 
-    .hi::before {
-        font-size: 12px;
-        left: 15rem;
-    }
-   
-    .hi::after {
-        font-size: 12px;
-    }
-
-    .home-detail h3 {
-        font-size: 2.5rem;
-    }
-
-    .home {
-        top: -2%;
-    }
-
-    .multiple-text {
-        font-size: 13px;
-    }
-
 }
 @media screen and (max-width:380px)
 {
@@ -2056,6 +2073,10 @@ footer .footer-end a .dav-name {
         top: 22vh;
         right: 5vh;
     }
+    .btn{
+        right: -15%;
+    }
+
     .guarantee .item .icon i {
         font-size: 25px;
     }
@@ -2063,7 +2084,9 @@ footer .footer-end a .dav-name {
     .guarantee .item .info h3 {
         font-size: 17px;
     }
-
+    .guarantee .item .info .resize{
+        font-size: 10px;
+    }
     .guarantee .item .info p {
         font-size: 13px;
         font-weight: var(--font-medium);
@@ -2108,13 +2131,17 @@ footer .footer-end a .dav-name {
     .hi::after,
     .hi::before
     {
-        font-size: 10px;
-    } 
+        font-size: 8px;
+    }
 
     .home-detail h3 {
         font-size: 1.7rem;
     }
 
+    .btn{
+        right: -17.5%;
+    }
+
     .guarantee .item .info h3 {
         font-size: 12px;
     }
@@ -2123,6 +2150,14 @@ footer .footer-end a .dav-name {
         font-size: 10px;
     }
 
+    .guarantee .item .icon i {
+        font-size: 17px;
+    }
+
+    .item #dirct {
+        font-size: 17px;
+    }
+
     .youtube .youtube-link {
         font-size: 15px;
     }
diff --git a/index.html b/index.html
index dd1aa2e..dadfadd 100644
--- a/index.html
+++ b/index.html
@@ -94,10 +94,10 @@
                     </ul>
             </nav>
                 <div class="right-header">
-            <a href="https://wa.me/message/G4U4JQ3CE5MCE1"
+            <a href="https://github.com/davistheweb"
             class="btn">
-            Let's chat 
-            <i class='bx bx-chat'></i>
+            Github 
+            <i class='bx bxl-github'></i>
             </a>
             <!--====== ChangeTheme=======-->
             <span class="dark-toogle" id="theme">
@@ -217,7 +217,7 @@ <h1>
                 </div>
                 <div class="info">
                     <h3>1+</h3>
-                    <p class="abt-name">
+                    <p class="abt-name resize">
                         Years Of Experiences
                     </p>
                 </div>
@@ -229,7 +229,7 @@ <h3>1+</h3>
                 </div>
                 <div class="info">
                     <h3>3+</h3>
-                    <p class="abt-name">
+                    <p class="abt-name resize">
                         Completed Projects
                     </p>
                 </div>
@@ -279,7 +279,7 @@ <h3>Nationality.</h3>
                 </div>
                 <div class="info">
                     <h3>Education.</h3>
-                    <p class="abt-name">
+                    <p class="abt-name resize">
                         BSC, Undergraduate.
                     </p>
                 </div>