diff --git a/index.html b/index.html
index 9b1b9141..b64637b3 100644
--- a/index.html
+++ b/index.html
@@ -527,7 +527,7 @@ <h2>Contact Us</h2>
         </ul>
     </div>
     <div class="toggle-arrow" onclick="toggleSidebar()" title="Open Sidebar" style="display: none;">
-        <i class="fas fa-arrow-right"></i>
+        <i class="fas fa-arrow-left"></i>
     </div>
 
 
diff --git a/script.js b/script.js
index 17c4bac3..b89f67a1 100644
--- a/script.js
+++ b/script.js
@@ -75,14 +75,18 @@ window.onload = () => {
 
 //function to remove sidebar upon clicking close button
 function toggleSidebar() {
-  var sidebar = document.getElementById("SideBar");
-  var sidebarContent = document.getElementById("sidebar-content");
-  if (sidebar) {
-    // Remove the sidebar element and its content
-    sidebar.remove();
-    sidebarContent.remove();
+  const sidebar = document.querySelector('.social-sidebar');
+  const toggleArrow = document.querySelector('.toggle-arrow');
+  
+  // Check if the sidebar is currently visible
+  if (sidebar.style.display === "none") {
+      // If hidden, show the sidebar and hide the toggle arrow
+      sidebar.style.display = "block";
+      toggleArrow.style.display = "none";
   } else {
-    console.error("Sidebar element not found");
+      // If visible, hide the sidebar and show the toggle arrow
+      sidebar.style.display = "none";
+      toggleArrow.style.display = "block";
   }
 }
 
diff --git a/style.css b/style.css
index 01e0c7ac..2eb75548 100644
--- a/style.css
+++ b/style.css
@@ -712,7 +712,7 @@ button:hover img {
 .close-btn {
     position: absolute;
     top: -10px;
-    right: -10px; 
+    left: -10px; 
     width: 25px;
     height: 25px;
     font-size: 20px;
@@ -730,29 +730,30 @@ button:hover img {
   .toggle-arrow {
     position: fixed;
     top: 50%;
-    left: 0;
+    right: 0;
     transform: translateY(-50%);
     transition: transform 0.3s ease-in-out;
     background-color: #333;
-    padding: 5px;
-    border-radius: 0 10px 10px 0;
+    border-radius: 10px 0 0 10px;
     cursor: pointer;
     color: white;
     font-size: 25px;
     padding: 12px;
+    z-index: 1;
 }
 
+
 .social-sidebar {
     position: fixed;
     top: 55%;
-    left: 0;
+    right: 0;
     transform: translateY(-50%);
     display: flex;
     flex-direction: column;
     gap: 15px;
     background-color: #333;
     padding: 3px;
-    border-radius: 0 15px 15px 0;
+    border-radius: 15px 0 0 15px;
     border: none;
     transition: background-color 0.3s ease, transform 0.3s ease; 
     z-index: 1;