diff --git a/css/about.css b/css/about.css
new file mode 100644
index 0000000..a9292b6
--- /dev/null
+++ b/css/about.css
@@ -0,0 +1,15 @@
+#about .description{
+    font-family: monospace;
+    font-size: 1.5rems;
+    font-weight: normal;
+    overflow-y: auto;
+    overflow-x: hidden;
+    white-space: normal;
+    word-wrap: break-word;
+    height: 100rem;
+    width: 40rem;
+}
+
+#about .tittle_text{
+    padding-bottom: 2rem;
+}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index 41b740e..93cb864 100644
--- a/css/style.css
+++ b/css/style.css
@@ -11,6 +11,11 @@
     overflow: hidden;
 
 }
+/* trying to make the color change */
+*{
+    transition: background-color 0.4s ease, color 0.4s ease;
+}
+
 /* darkmode color */
 .dark{
     --primary-background-color: #78B9B5;
@@ -85,3 +90,24 @@
     color: var(--text-color);
 }
 
+.header{
+    display: flex;
+    flex-direction: row;
+}
+
+#home_button{
+    border-style: none;
+    background: none;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+}
+
+#home_button svg{
+    width: 3.5rem;
+    height: auto;
+    fill:var(--secondary-background-color);
+    
+}
diff --git a/image/home_40dp_E3E3E3_FILL1_wght400_GRAD0_opsz40.svg b/image/home_40dp_E3E3E3_FILL1_wght400_GRAD0_opsz40.svg
new file mode 100644
index 0000000..d383e18
--- /dev/null
+++ b/image/home_40dp_E3E3E3_FILL1_wght400_GRAD0_opsz40.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M160-120v-480l320-240 320 240v480H560v-280H400v280H160Z"/></svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index 87e3242..496226d 100644
--- a/index.html
+++ b/index.html
@@ -55,7 +55,7 @@
                     <div class = "social">
 
                         <div class = "about_button_placement">
-                            <button class = "about_button" id="social_button">
+                            <button class = "about_button" id="social_button" onclick="location.href='info.html'">
                                 <svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M448.67-280h66.66v-240h-66.66v240Zm31.32-316q15.01 0 25.18-9.97 10.16-9.96 10.16-24.7 0-15.3-10.15-25.65-10.16-10.35-25.17-10.35-15.01 0-25.18 10.35-10.16 10.35-10.16 25.65 0 14.74 10.15 24.7 10.16 9.97 25.17 9.97Zm.19 516q-82.83 0-155.67-31.5-72.84-31.5-127.18-85.83Q143-251.67 111.5-324.56T80-480.33q0-82.88 31.5-155.78Q143-709 197.33-763q54.34-54 127.23-85.5T480.33-880q82.88 0 155.78 31.5Q709-817 763-763t85.5 127Q880-563 880-480.18q0 82.83-31.5 155.67Q817-251.67 763-197.46q-54 54.21-127 85.84Q563-80 480.18-80Z"/></svg>
                                 <h2 id = "social_text">About</h2>
                             </button>
diff --git a/js/darkmode.js b/js/darkmode.js
index 3ad04a9..f7ba5d4 100644
--- a/js/darkmode.js
+++ b/js/darkmode.js
@@ -1,19 +1,21 @@
-let darkmode = localStorage.getItem('dark')
-const switch_button = document.getElementById("theme_switch")
+let darkmode = localStorage.getItem('dark');
+const switch_button = document.getElementById("theme_switch");
 
 const enableDarkmode = () => {
-    document.body.classList.add('dark')
-    localStorage.setItem('darkmode' , 'active')
+    document.body.classList.add('dark');
+    localStorage.setItem('dark' , 'active');
 }
 
 const disableDarkmode = () => {
-    document.body.classList.remove('dark')
-    localStorage.setItem('darkmode', null)
-}
+    document.body.classList.remove('dark');
+     localStorage.removeItem('dark'); 
+};
 
-if(darkmode === 'avtive') enableDarkmode()
+if (darkmode === 'active') enableDarkmode();
 
 switch_button.addEventListener("click", () => {
-    darkmode = localStorage.getItem('darkmode')
-    darkmode !== "active" ? enableDarkmode() : disableDarkmode()
-}) 
\ No newline at end of file
+    darkmode = localStorage.getItem('dark');
+    darkmode !== "active" ? enableDarkmode() : disableDarkmode();
+});
+
+