diff --git a/assets/css/style.css b/assets/css/style.css
index c7b2803b..0aa3341d 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -6,7 +6,9 @@ body {
   color: var(--sonic-silver);
   user-select: none;
 }
-
+.visitor-counter{
+  font-family: var(--ff-philosopher);
+}
 .container {
   padding: 0px;
 }
diff --git a/assets/css/visitors.css b/assets/css/visitors.css
new file mode 100644
index 00000000..597e30a0
--- /dev/null
+++ b/assets/css/visitors.css
@@ -0,0 +1,52 @@
+.visitor-counter {
+    position: fixed;
+    top: 570px;
+    left: 10px;
+    background-color: transparent;
+    height: 100px;
+    width: 100px;
+    color: black;
+    font-weight: 700;
+    font-size: 18px;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    border-radius: 200px;
+    backdrop-filter: blur(5px);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1),
+                0 1px 3px rgba(0, 0, 0, 0.08);
+    z-index: 1000;
+  }
+  
+  .visitor-counter div:first-child {
+    margin-bottom: 5px;
+  }
+  
+  .website-counter {
+    font-size: 24px;
+  }
+  
+  @media screen and (max-width: 768px) {
+    .visitor-counter {
+      height: 100px;
+      width: 100px;
+      font-size: 16px;
+    }
+  
+    .website-counter {
+      font-size: 20px;
+    }
+  }
+  
+  @media screen and (max-width: 480px) {
+    .visitor-counter {
+      height: 80px;
+      width: 80px;
+      font-size: 14px;
+    }
+  
+    .website-counter {
+      font-size: 18px;
+    }
+  }
\ No newline at end of file
diff --git a/assets/js/visitors.js b/assets/js/visitors.js
new file mode 100644
index 00000000..5521127c
--- /dev/null
+++ b/assets/js/visitors.js
@@ -0,0 +1,21 @@
+ // Function to get the count from localStorage or initialize it
+ function getVisitorCount() {
+    return localStorage.getItem('visitorCount') || 0;
+  }
+  
+  // Function to increment and save the count
+  function incrementVisitorCount() {
+    let count = parseInt(getVisitorCount()) + 1;
+    localStorage.setItem('visitorCount', count);
+    return count;
+  }
+  
+  // Function to display the count
+  function displayVisitorCount() {
+    const counterElement = document.querySelector('.website-counter');
+    const count = incrementVisitorCount();
+    counterElement.textContent = count;
+  }
+  
+  // Call the display function when the page loads
+  document.addEventListener('DOMContentLoaded', displayVisitorCount);
\ No newline at end of file
diff --git a/index.html b/index.html
index 4a9004cb..b1264b51 100644
--- a/index.html
+++ b/index.html
@@ -2587,52 +2587,16 @@ <h4>How do I ensure the safety and security of my personal information on SwapRe
 
   </script>
   <br /><br />
-  <div style="
-    background-color: rgba(255, 178, 168, 0.041); /* Semi-transparent background */
-  height: 30rem;
-  width: 30rem; /* Make width and height equal for a circular shape */
-  color: rgb(99, 23, 23);
-  font-weight: 700;
-  font-size: 45px;
-  text-align: center;
-  line-height: 150px; /* Center text vertically */
-  border-radius: 30rem; /* Make the div circular */
-  backdrop-filter: blur(5rem); /* Glassmorphism effect */
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), /* Slight shadow for depth */
-              0 1px 3px rgba(0, 0, 0, 0.08); /* Additional subtle shadow */
-              align-items: center;
-              margin-left: 45%;
-              border-width: 4px;
-
-  ">
-  <div>Visitor</div>
-  <div class="website-counter" >
-
-    <script>
-var counterContainer = document.querySelector(".website-counter");
-var resetButton = document.querySelector("#reset");
-var visitCount = localStorage.getItem("page_view");
-
-// Check if page_view entry is present
-if (visitCount) {
-  visitCount = Number(visitCount) + 1;
-  localStorage.setItem("page_view", visitCount);
-} else {
-  visitCount = 1;
-  localStorage.setItem("page_view", 1);
-}
-counterContainer.innerHTML = visitCount;
-
-// Adding onClick event listener
-resetButton.addEventListener("click", () => {
-  visitCount = 1;
-  localStorage.setItem("page_view", 1);
-  counterContainer.innerHTML = visitCount;
-});
-    </script></div>
-</div>
+  <link rel="stylesheet" href="./assets/css/visitors.css">
+  <!-- ############### Footer ############### -->
+  <div class="visitor-counter">
+    <div>Visitor</div>
+    <div class="website-counter"></div>
+  </div>
+  <script src="path/to/visitorCounter.js"></script>
+  <script src="./assets/css/visitors.css"></script>
  
-    <script src="./assets/js/rate.js"></script>
+    <script src="./assets/js/visitors.js"></script>