diff --git a/docs/stylesheets/singlePageTemplate.css b/docs/stylesheets/singlePageTemplate.css
index 2df79701..fe35c109 100644
--- a/docs/stylesheets/singlePageTemplate.css
+++ b/docs/stylesheets/singlePageTemplate.css
@@ -1,14 +1,29 @@
 /* Hero Section */
 .hero {
+    font-family: "Source Sans Pro", sans-serif;
     background-color: #CBE3F7;
     padding-top: 150px;
     padding-bottom: 150px;
-	text-align: center;
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto;
+    height: 500px;
+    width: 100%;
+}
+
+.hero_header {
+    text-align: center;
+    color: #6A33E6;
+    letter-spacing: 4px;
     font-weight: bold;
+    margin-left: auto;
+    margin-right: auto;
+    font-size: 2rem;
+    /* Default font size */
 }
 
-.pink {
-    color: #3693CD;
+.blue {
+    color: #0B7AEF;
 }
 
 .light {
@@ -21,17 +36,61 @@
     font-weight: lighter;
     text-transform: uppercase;
     letter-spacing: 1px;
+    font-size: 1.3rem;
+    /* Default font size */
+}
+
+/* Responsive adjustments */
+@media (max-width: 1200px) {
+    .hero_header {
+        font-size: 1.8rem;
+    }
+
+    .tagline {
+        font-size: 1.25rem;
+    }
+}
+
+@media (max-width: 768px) {
+    .hero_header {
+        font-size: 1.55rem;
+    }
+
+    .tagline {
+        font-size: 1rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .hero_header {
+        font-size: 1.3rem;
+        /* Adjust width for smaller screens */
+    }
+
+    .tagline {
+        font-size: 0.675rem;
+    }
 }
 
+
 .typewriter {
     display: inline-block;
     overflow: hidden;
-    border-right: solid black; /* Cursor effect */
+    border-right: solid black;
+    /* Cursor effect */
     animation: blink-caret 0.75s step-end infinite;
-    word-wrap: break-word; /* Ensure words break and wrap correctly */
+    word-wrap: break-word;
+    /* Ensure words break and wrap correctly */
 }
 
 @keyframes blink-caret {
-    from, to { border-color: transparent; }
-    50% { border-color: black; }
+
+    from,
+    to {
+        border-color: transparent;
+    }
+
+    50% {
+        border-color: black;
+    }
 }
\ No newline at end of file
diff --git a/material/overrides/home.html b/material/overrides/home.html
index 365e0dcc..6054405e 100644
--- a/material/overrides/home.html
+++ b/material/overrides/home.html
@@ -33,57 +33,63 @@
     }
   }
 </style>
-<section class="mdx-container">
-  <div class="md-grid md-typeset">
-    <div class="mdx-hero">
-      <link href="stylesheets/singlePageTemplate.css" rel="stylesheet" type="text/css">
-      <section class="hero" id="hero">
-        <h2 class="typewriter hero_header" id="typewriter-header">JY-HF <span class="light">Learning Site___</span>
-        </h2>
-        <br>
-        <p class="typewriter tagline" id="typewriter-tagline">Share the knowledge to you and <span
-            class="blue">Us</span></p>
-      </section>
-      <script>
-        document.addEventListener("DOMContentLoaded", function () {
-          function typeWriter(element, text, speed, callback) {
-            let i = 0;
-            function type() {
-              if (i < text.length) {
-                element.innerHTML += text.charAt(i); // Replace newline with <br> for line breaks
-                i++;
-                setTimeout(type, speed);
-              } else {
-    
-                if (callback) callback();
-              }
-            }
-            type();
-          }
+<link href="stylesheets/singlePageTemplate.css" rel="stylesheet" type="text/css">
+<section class="hero" id="hero">
+  <h2 class="typewriter hero_header" id="typewriter-header">JY-HF <span class="light">Learning Site___</span>
+  </h2>
+  <br>
+  <p class="typewriter tagline" id="typewriter-tagline">Share the knowledge to you and <span class="blue">Us</span></p>
+</section>
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    function typeWriter(element, text, speed, callback) {
+      let i = 0;
+      let isTag = false;
+      let temp = '';
+
+      function type() {
+        if (i < text.length) {
+          let char = text.charAt(i);
+          temp += char;
 
-          const headerElement = document.querySelector('.hero_header');
-          const taglineElement = document.querySelector('.tagline');
+          if (char === '<') {
+            isTag = true;
+          } else if (char === '>') {
+            isTag = false;
+            element.innerHTML = temp;  // Only update innerHTML when the tag is complete
+          } else if (!isTag) {
+            element.innerHTML = temp;
+          }
+          i++;
+          if (!isTag) setTimeout(type, speed);
+          else type();
+        } else {
+          if (callback) callback();
+        }
+      }
+      type();
+    }
 
-          const headerText = 'JY-HF Learning Site___';
-          const headerHTML = 'JY-HF <span class="light">Learning Site___</span>';
-          const taglineText = 'Share the knowledge to you and Us';
-          const taglineHTML = 'Share the knowledge to you and <span class="blue">Us</span>';
+    const headerElement = document.querySelector('.hero_header');
+    const taglineElement = document.querySelector('.tagline');
 
-          headerElement.textContent = '';
-          taglineElement.textContent = '';
+    const headerHTML = 'JY-HF <span class="light">Learning Site___</span>';
+    const taglineHTML = 'Share the knowledge to you and <span class="blue">Us</span>';
 
-          typeWriter(headerElement, headerText, 150, () => {
-            headerElement.innerHTML = headerHTML;
-            headerElement.setAttribute("class","hero_header");
-            console.log('Typing complete, pausing cursor animation for', headerElement); // Debug output
-            typeWriter(taglineElement, taglineText, 150, () => {
-              taglineElement.innerHTML = taglineHTML;
+    headerElement.textContent = '';
+    taglineElement.textContent = '';
 
-            });
-          });
-        });
+    typeWriter(headerElement, headerHTML, 150, () => {
+      headerElement.classList.remove('typewriter');
+      console.log('Typing complete, pausing cursor animation for', headerElement);
+      typeWriter(taglineElement, taglineHTML, 150);
+    });
+  });
+</script>
+<section class="mdx-container">
+  <div class="md-grid md-typeset">
+    <div class="mdx-hero">
 
-      </script>
       <div class="mdx-hero__content">
         <h1 style="color: antiquewhite;font-family: 'Courier New', Courier, monospace;font-weight: 1000;">Welcome to the
           coding space of JY-HF!</h1>
@@ -108,4 +114,4 @@ <h1 style="color: antiquewhite;font-family: 'Courier New', Courier, monospace;fo
 {% endblock %}
 {% block footer %}
 {{ super() }}
-{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/site/index.html b/site/index.html
index 7b145a00..ea80dd3b 100644
--- a/site/index.html
+++ b/site/index.html
@@ -337,57 +337,63 @@
     }
   }
 </style>
-<section class="mdx-container">
-  <div class="md-grid md-typeset">
-    <div class="mdx-hero">
-      <link href="stylesheets/singlePageTemplate.css" rel="stylesheet" type="text/css">
-      <section class="hero" id="hero">
-        <h2 class="typewriter hero_header" id="typewriter-header">JY-HF <span class="light">Learning Site___</span>
-        </h2>
-        <br>
-        <p class="typewriter tagline" id="typewriter-tagline">Share the knowledge to you and <span
-            class="blue">Us</span></p>
-      </section>
-      <script>
-        document.addEventListener("DOMContentLoaded", function () {
-          function typeWriter(element, text, speed, callback) {
-            let i = 0;
-            function type() {
-              if (i < text.length) {
-                element.innerHTML += text.charAt(i).replace('\n', '<br>'); // Replace newline with <br> for line breaks
-                i++;
-                setTimeout(type, speed);
-              } else {
-                console.log('Typing complete, pausing cursor animation for', element); // Debug output
-                if (callback) callback();
-              }
-            }
-            type();
+<link href="stylesheets/singlePageTemplate.css" rel="stylesheet" type="text/css">
+<section class="hero" id="hero">
+  <h2 class="typewriter hero_header" id="typewriter-header">JY-HF <span class="light">Learning Site___</span>
+  </h2>
+  <br>
+  <p class="typewriter tagline" id="typewriter-tagline">Share the knowledge to you and <span class="blue">Us</span></p>
+</section>
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    function typeWriter(element, text, speed, callback) {
+      let i = 0;
+      let isTag = false;
+      let temp = '';
+
+      function type() {
+        if (i < text.length) {
+          let char = text.charAt(i);
+          temp += char;
+
+          if (char === '<') {
+            isTag = true;
+          } else if (char === '>') {
+            isTag = false;
+            element.innerHTML = temp;  // Only update innerHTML when the tag is complete
+          } else if (!isTag) {
+            element.innerHTML = temp;
           }
+          i++;
+          if (!isTag) setTimeout(type, speed);
+          else type();
+        } else {
+          if (callback) callback();
+        }
+      }
+      type();
+    }
 
-          const headerElement = document.querySelector('.hero_header');
-          const taglineElement = document.querySelector('.tagline');
-
-          const headerText = 'JY-HF Learning Site___';
-          const headerHTML = 'JY-HF <span class="light">Learning Site___</span>';
-          const taglineText = 'Share the knowledge to you and Us';
-          const taglineHTML = 'Share the knowledge to you and <span class="blue">Us</span>';
+    const headerElement = document.querySelector('.hero_header');
+    const taglineElement = document.querySelector('.tagline');
 
-          headerElement.textContent = '';
-          taglineElement.textContent = '';
+    const headerHTML = 'JY-HF <span class="light">Learning Site___</span>';
+    const taglineHTML = 'Share the knowledge to you and <span class="blue">Us</span>';
 
-          typeWriter(headerElement, headerText, 300, () => {
-            headerElement.innerHTML = headerHTML;
-            headerElement.style.animationPlayState = 'paused'; // Pause the cursor animation
-            headerElement.style.borderRightColor = 'transparent'; // Make the cursor transparent
-            typeWriter(taglineElement, taglineText, 300, () => {
-              taglineElement.innerHTML = taglineHTML;
+    headerElement.textContent = '';
+    taglineElement.textContent = '';
 
-            });
-          });
-        });
+    typeWriter(headerElement, headerHTML, 150, () => {
+      headerElement.classList.remove('typewriter');
+      console.log('Typing complete, pausing cursor animation for', headerElement);
+      typeWriter(taglineElement, taglineHTML, 150);
+    });
+  });
+</script>
+<section class="mdx-container">
+  <div class="md-grid md-typeset">
+    <div class="mdx-hero">
 
-      </script>
       <div class="mdx-hero__content">
         <h1 style="color: antiquewhite;font-family: 'Courier New', Courier, monospace;font-weight: 1000;">Welcome to the
           coding space of JY-HF!</h1>
diff --git a/site/stylesheets/singlePageTemplate.css b/site/stylesheets/singlePageTemplate.css
index 47f34297..fe35c109 100644
--- a/site/stylesheets/singlePageTemplate.css
+++ b/site/stylesheets/singlePageTemplate.css
@@ -1,17 +1,32 @@
 /* Hero Section */
 .hero {
+    font-family: "Source Sans Pro", sans-serif;
     background-color: #CBE3F7;
     padding-top: 150px;
     padding-bottom: 150px;
-	text-align: center;
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto;
+    height: 500px;
+    width: 100%;
 }
 
-.pink {
-    color: #3693CD;
+.hero_header {
+    text-align: center;
+    color: #6A33E6;
+    letter-spacing: 4px;
+    font-weight: bold;
+    margin-left: auto;
+    margin-right: auto;
+    font-size: 2rem;
+    /* Default font size */
+}
+
+.blue {
+    color: #0B7AEF;
 }
 
 .light {
-    font-weight: bold;
     color: #0B3ADC;
 }
 
@@ -21,17 +36,61 @@
     font-weight: lighter;
     text-transform: uppercase;
     letter-spacing: 1px;
+    font-size: 1.3rem;
+    /* Default font size */
+}
+
+/* Responsive adjustments */
+@media (max-width: 1200px) {
+    .hero_header {
+        font-size: 1.8rem;
+    }
+
+    .tagline {
+        font-size: 1.25rem;
+    }
+}
+
+@media (max-width: 768px) {
+    .hero_header {
+        font-size: 1.55rem;
+    }
+
+    .tagline {
+        font-size: 1rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .hero_header {
+        font-size: 1.3rem;
+        /* Adjust width for smaller screens */
+    }
+
+    .tagline {
+        font-size: 0.675rem;
+    }
 }
 
+
 .typewriter {
     display: inline-block;
     overflow: hidden;
-    border-right: solid black; /* Cursor effect */
+    border-right: solid black;
+    /* Cursor effect */
     animation: blink-caret 0.75s step-end infinite;
-    word-wrap: break-word; /* Ensure words break and wrap correctly */
+    word-wrap: break-word;
+    /* Ensure words break and wrap correctly */
 }
 
 @keyframes blink-caret {
-    from, to { border-color: transparent; }
-    50% { border-color: black; }
+
+    from,
+    to {
+        border-color: transparent;
+    }
+
+    50% {
+        border-color: black;
+    }
 }
\ No newline at end of file