diff --git a/assets/GitHubDark.svg b/assets/GitHubDark.svg
index 4d89c59..ddf0c10 100644
--- a/assets/GitHubDark.svg
+++ b/assets/GitHubDark.svg
@@ -1 +1,4 @@
-<?xml version="1.0"?><svg fill="#383838" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" width="24px" height="24px">    <path d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6 c0,0,1.4,0,2.8,1.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4 c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3 C22,6.1,16.9,1.4,10.9,2.1z"/></svg>
\ No newline at end of file
+<?xml version="1.0"?>
+<svg fill="#fff" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" width="24px" height="24px">
+    <path  fill="#fff" d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6 c0,0,1.4,0,2.8,1.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4 c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3 C22,6.1,16.9,1.4,10.9,2.1z"/>
+</svg>
\ No newline at end of file
diff --git a/assets/GitHubLight.svg b/assets/GitHubLight.svg
index 675f99a..441bdea 100644
--- a/assets/GitHubLight.svg
+++ b/assets/GitHubLight.svg
@@ -1 +1 @@
-<?xml version="1.0"?><svg fill="#fff" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" width="24px" height="24px">    <path d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6 c0,0,1.4,0,2.8,1.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4 c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3 C22,6.1,16.9,1.4,10.9,2.1z"/></svg>
\ No newline at end of file
+<?xml version="1.0"?><svg fill="rgb(122,122,122)" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" width="24px" height="24px" >    <path fill="rgb(122,122,122)" d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6 c0,0,1.4,0,2.8,1.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4 c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3 C22,6.1,16.9,1.4,10.9,2.1z"/></svg>
\ No newline at end of file
diff --git a/assets/MoonIcon.svg b/assets/MoonIcon.svg
index e7adf26..9d6d611 100644
--- a/assets/MoonIcon.svg
+++ b/assets/MoonIcon.svg
@@ -1,3 +1,3 @@
 <svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.83253 15C10.2484 15 12.4549 13.9475 13.9167 12.2229C14.133 11.9678 13.8972 11.5951 13.563 11.656C9.76289 12.349 6.27316 9.55904 6.27316 5.88586C6.27316 3.76998 7.45605 1.82429 9.37857 0.77666C9.67492 0.615176 9.60039 0.184951 9.26365 0.125391C8.79158 0.042039 8.31256 6.84474e-05 7.83253 0C3.50907 0 0 3.35481 0 7.5C0 11.6399 3.50356 15 7.83253 15Z" fill="#fff"/>
+<path d="M7.83253 15C10.2484 15 12.4549 13.9475 13.9167 12.2229C14.133 11.9678 13.8972 11.5951 13.563 11.656C9.76289 12.349 6.27316 9.55904 6.27316 5.88586C6.27316 3.76998 7.45605 1.82429 9.37857 0.77666C9.67492 0.615176 9.60039 0.184951 9.26365 0.125391C8.79158 0.042039 8.31256 6.84474e-05 7.83253 0C3.50907 0 0 3.35481 0 7.5C0 11.6399 3.50356 15 7.83253 15Z" fill="rgb(122,122,122)"/>
 </svg>
diff --git a/index.html b/index.html
index 6088c85..3aeb580 100644
--- a/index.html
+++ b/index.html
@@ -21,8 +21,8 @@
         <!-- This heading also notifies about the theme change.-->
         <h1 id="toast">Calculator</h1>
         <div class="top-buttons">
-          <a href="https://github.com/zxcodes/JavaScript-Calculator">
-            <img src="assets/GitHubLight.svg" alt="Sun Icon" height="22.5" width="22.5" id="github-icon">
+          <a target='_blank' href="https://github.com/zxcodes/JavaScript-Calculator">
+            <img src="assets/GitHubDark.svg" alt="Sun Icon" height="22.5" width="22.5" id="github-icon">
           </a>
           <button type="button" onclick="changeTheme()" class="theme-button">
             <img src="assets/SunIcon.svg" alt="Theme Icon" height="19" width="19" id="theme-icon">
@@ -34,28 +34,28 @@ <h1 id="toast">Calculator</h1>
         <input type="button" value="C" onclick="result.value=''" id="clear-button" />
       </div>
       <div class="second-row">
-        <input type="button" value="1" onclick="liveScreen(1)" />
-        <input type="button" value="2" onclick="liveScreen(2)" />
-        <input type="button" value="3" onclick="liveScreen(3)" />
-        <input type="button" value="+" onclick="liveScreen('+')" />
+        <input type="button" class='btn' value="1" onclick="liveScreen(1)" />
+        <input type="button" class='btn' value="2" onclick="liveScreen(2)" />
+        <input type="button" class='btn' value="3" onclick="liveScreen(3)" />
+        <input type="button" class='btn' value="+" onclick="liveScreen('+')" />
       </div>
       <div class="third-row">
-        <input type="button" value="4" onclick=" liveScreen(4)" />
-        <input type="button" value="5" onclick=" liveScreen(5)" />
-        <input type="button" value="6" onclick=" liveScreen(6)" />
-        <input type="button" value="-" onclick="liveScreen('-')" />
+        <input type="button" class='btn' value="4" onclick=" liveScreen(4)" />
+        <input type="button" class='btn' value="5" onclick=" liveScreen(5)" />
+        <input type="button" class='btn' value="6" onclick=" liveScreen(6)" />
+        <input type="button" class='btn' value="-" onclick="liveScreen('-')" />
       </div>
       <div class="fourth-row">
-        <input type="button" value="7" onclick="liveScreen(7)" />
-        <input type="button" value="8" onclick="liveScreen(8)" />
-        <input type="button" value="9" onclick=" liveScreen(9)" />
-        <input type="button" value="x" onclick="liveScreen('*')" />
+        <input type="button" class='btn' value="7" onclick="liveScreen(7)" />
+        <input type="button" class='btn' value="8" onclick="liveScreen(8)" />
+        <input type="button" class='btn' value="9" onclick=" liveScreen(9)" />
+        <input type="button" class='btn' value="x" onclick="liveScreen('*')" />
       </div>
       <div class="fifth-row">
-        <input type="button" value="/" onclick="liveScreen('/')" />
-        <input type="button" value="0" onclick="liveScreen(0)" />
-        <input type="button" value="." onclick="liveScreen('.')" />
-        <input type="button" value="=" onclick="calculate(result.value)" />
+        <input type="button" class='btn' value="/" onclick="liveScreen('/')" />
+        <input type="button" class='btn' value="0" onclick="liveScreen(0)" />
+        <input type="button" class='btn' value="." onclick="liveScreen('.')" />
+        <input type="button" class='btn' value="=" onclick="calculate(result.value)" />
       </div>
     </div>
   </div>
diff --git a/scripts/script.js b/scripts/script.js
index 6793119..78f3035 100644
--- a/scripts/script.js
+++ b/scripts/script.js
@@ -2,6 +2,9 @@ const lightTheme = "styles/light.css";
 const darkTheme = "styles/dark.css";
 const sunIcon = "assets/SunIcon.svg";
 const moonIcon = "assets/MoonIcon.svg";
+const githubLight = "assets/githubLight.svg";
+const githubDark = "assets/githubDark.svg";
+const githubIcon = document.getElementById('github-icon');
 const themeIcon = document.getElementById("theme-icon");
 const res = document.getElementById("result");
 const toast = document.getElementById("toast");
@@ -27,11 +30,13 @@ function changeTheme() {
   if (theme.getAttribute("href") === lightTheme) {
     theme.setAttribute("href", darkTheme);
     themeIcon.setAttribute("src", sunIcon);
-    toast.innerHTML = "Dark Mode 🌙";
+    githubIcon.setAttribute("src", githubDark);
+    toast.innerHTML = "Dark Mode";
   } else {
     theme.setAttribute("href", lightTheme);
     themeIcon.setAttribute("src", moonIcon);
-    toast.innerHTML = "Light Mode ☀️";
+    githubIcon.setAttribute("src", githubLight);
+    toast.innerHTML = "Light Mode";
   }
 }
 
diff --git a/styles/dark.css b/styles/dark.css
index 0fe1e6d..6635683 100644
--- a/styles/dark.css
+++ b/styles/dark.css
@@ -18,22 +18,27 @@
   justify-content: center;
   flex-direction: column;
   align-items: center;
-  background-color: rgb(20, 19, 19);
+  background-color: #292826;
   transition: 0.8s all;
 }
 
 h1 {
   margin-bottom: 1.5%;
   color: #fff;
-  font-weight: normal;
+  font-weight: bolder;
+  font-size: 25px;
 }
 
 .container {
-  width: 350px;
+  width: 400px;
   display: flex;
   justify-content: center;
   flex-direction: column;
-  align-items: center;
+  align-items: center;  /* border:1px solid #000; */
+  padding:12px;
+  border-radius: 10px;
+  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+
 }
 
 .header-container {
@@ -43,10 +48,13 @@ h1 {
   width: 80%;
 }
 
+#result{
+  width:238px;
+}
+
 .top-buttons {
   display: flex;
   align-items: center;
-
 }
 
 input {
@@ -59,7 +67,17 @@ input {
   border: none;
   outline: none;
   border-radius: 100px;
-  margin: 0.2em;
+  margin: 0.3em;
+  font-weight:600 ;
+  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
+  transition: all 0.2s ease;
+
+}
+
+.btn:active{
+  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
+  background-color: rgb(37, 35, 59);
+  color: #fff;
 }
 
 .first-row,
diff --git a/styles/light.css b/styles/light.css
index 218ca85..adab80b 100644
--- a/styles/light.css
+++ b/styles/light.css
@@ -14,22 +14,26 @@
   justify-content: center;
   flex-direction: column;
   align-items: center;
-  background-color: rgb(7, 210, 199);
+  background-color: #f8f6f4;
   transition: 0.8s all;
 }
 
 h1 {
   margin-bottom: 1.5%;
-  color: #fff;
-  font-weight: normal;
+  color: rgb(122, 122, 122);
+  font-weight: bolder;
+  font-size: 25px;
 }
 
 .container {
-  width: 350px;
+  width: 400px;
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
+  padding:12px;
+  border-radius: 10px;
+  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
 }
 
 .header-container {
@@ -39,6 +43,10 @@ h1 {
   width: 80%;
 }
 
+#result{
+  width:238px;
+}
+
 .top-buttons {
   display: flex;
   align-items: center;
@@ -54,7 +62,15 @@ input {
   border: none;
   outline: none;
   border-radius: 100px;
-  margin: 0.2em;
+  margin: 0.3em;
+  font-weight:600 ;
+  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
+}
+
+.btn:active{
+  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
+  background-color: rgb(37, 35, 59);
+  color: #fff;
 }
 
 .first-row,
@@ -66,6 +82,7 @@ input {
 }
 
 input[type="button"] {
+  transition: all 0.2s ease;
   color: rgb(122, 122, 122);
 }
 
@@ -75,7 +92,7 @@ input[type="text"] {
 }
 
 input[type="button"]:hover {
-  background-color: rgb(37, 35, 59);
+  background-color: rgb(107, 107, 107);
   color: #fff;
 }