diff --git a/assets/c1.png b/assets/c1.png
new file mode 100644
index 00000000..03ed24e9
Binary files /dev/null and b/assets/c1.png differ
diff --git a/assets/c2.png b/assets/c2.png
new file mode 100644
index 00000000..a0c47252
Binary files /dev/null and b/assets/c2.png differ
diff --git a/assets/c3.png b/assets/c3.png
new file mode 100644
index 00000000..16273033
Binary files /dev/null and b/assets/c3.png differ
diff --git a/assets/c4.png b/assets/c4.png
new file mode 100644
index 00000000..7cf71ead
Binary files /dev/null and b/assets/c4.png differ
diff --git a/assets/c5.png b/assets/c5.png
new file mode 100644
index 00000000..a7c639bc
Binary files /dev/null and b/assets/c5.png differ
diff --git a/assets/c6.png b/assets/c6.png
new file mode 100644
index 00000000..13481a6c
Binary files /dev/null and b/assets/c6.png differ
diff --git a/assets/c7.png b/assets/c7.png
new file mode 100644
index 00000000..26b2d2ca
Binary files /dev/null and b/assets/c7.png differ
diff --git a/pages/help.html b/pages/help.html
index fab220a9..7d4641fa 100644
--- a/pages/help.html
+++ b/pages/help.html
@@ -59,33 +59,80 @@
           <a href="blog.html" class="navbar-links">Learn</a>
     </div>
 
-    <h1 style="font-size: 40px;text-align: center;">Help</h1>
    <div class="main-container">
        <div class="container-help">
-           <div class="content-block">
+            <div class="content-block">
+              <div class="text-section">
+                <h3 class="main-heading">Scroll into see how to get most out of this website</h3>
+                <p class="description">Follow the step by step guide to explore more about GitHub.</p>
+              </div>
+              <div class="steps-indicator">
+                <div class="step-line"></div>
+                <div class="step-dot" data-step=""></div>
+                <div class="step-dot" data-step=""></div>
+                <div class="step-dot" data-step=""></div>
+                <div class="step-box" style="top: -10px;right: calc(50% + 15px);">STEP 01</div>
+                <div class="step-box" style="top: calc(50% - 10px);left: calc(50% + 15px)">STEP 02</div>
+                <div class="step-box" style="bottom: -10px;right: calc(50% + 15px);">STEP 03</div>
+              </div>
+             </div>
                <div class="steps-clone">
                    <div class="step-block">
-                       <div class="img-block" style="opacity: 1;"><img src="https://assets.website-files.com/600af88b128ed6334f4b7ef6/600b04a36ffbc054a6c046c6_Sign%20up.svg" loading="lazy" alt="Sign up illustration"></div>
+                       <div class="img-block" style="opacity: 1;"><img src="../assets/c1.png" class="first" loading="lazy" alt="Sign up illustration"></div>
                        <div class="dot" style="background-color: rgb(0, 108, 208); width: 24px; height: 24px;"></div>
-                       <div class="content-wrap"><div class="step-content-block"><div class="step" style="background-color: rgb(255, 255, 255);"><div class="text-block"><div class="label" style="color: rgb(0, 108, 208);">01</div><div class="content" style="color: rgb(18, 18, 18);"><div class="heading">Open free account</div><p>Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.</p></div></div></div><div class="bg-shadow" style="display: block;"></div></div></div>
+                       <div class="content-wrap">
+                        <div class="step-content-block">
+                          <div class="step" style="background-color: rgb(255, 255, 255);">
+                            <div class="text-block"><div class="label" style="color: rgb(0, 108, 208);">01</div>
+                            <div class="content" style="color: rgb(18, 18, 18);"><div class="heading">Explore Profiles</div>
+                              <p>Browse various GitHub profiles that feature creative and well-designed README files. This can provide inspiration for your own profile, you can view their profile by clicking their block, and make sure to leave a star for their readme. Note down few of the elements you like in their profile. You can even use our compare option to <a href="https://recodehive.github.io/awesome-github-profiles/pages/compare.html">compare profiles</a>.</p>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="bg-shadow" style="display: block;"></div>
+                      </div>
+                    </div>
                    </div>
                    <div class="step-block">
                        <div class="scoll-wrap" ><div class="scroll-animate"  id="scroll1" ></div><div class="scroll-base"></div></div>
-                       <div class="img-block" style="opacity: 1;"><img src="https://assets.website-files.com/600af88b128ed6334f4b7ef6/600b04a36ffbc054a6c046c6_Sign%20up.svg" loading="lazy" alt="Sign up illustration"></div>
+                       <div class="img-block" style="opacity: 1;"><img src="../assets/c2.png" loading="lazy" alt="Sign up illustration"></div>
                        <div class="dot" style="background-color: rgb(0, 108, 208); width: 24px; height: 24px;"></div>
-                       <div class="content-wrap"><div class="step-content-block"><div class="step" style="background-color: rgb(255, 255, 255);"><div class="text-block"><div class="label" style="color: rgb(0, 108, 208);">01</div><div class="content" style="color: rgb(18, 18, 18);"><div class="heading">Open free account</div><p>Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.</p></div></div></div><div class="bg-shadow" style="display: block;"></div></div></div>
+                       <div class="content-wrap"><div class="step-content-block"><div class="step" style="background-color: rgb(255, 255, 255);"><div class="text-block"><div class="label" style="color: rgb(0, 108, 208);">02</div><div class="content" style="color: rgb(18, 18, 18);"><div class="heading">Learn & Build</div><p>Now it's your time to build something from the inspiration you got it. Try learning the basic of the github <a href="https://recodehive.github.io/awesome-github-profiles/pages/blog.html">from here</a>. This includes presise summary of the github learning path from beginner to advanced. Make sure you build an awsome reademe profile by now.</p></div></div></div><div class="bg-shadow" style="display: block;"></div></div></div>
                    </div>         
                    <div class="step-block">
                        <div class="scoll-wrap"><div class="scroll-animate"  id="scroll2" style="transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg); transform-style: preserve-3d;"></div><div class="scroll-base"></div></div>
-                       <div class="img-block" style="opacity: 1;"><img src="https://assets.website-files.com/600af88b128ed6334f4b7ef6/600b04a36ffbc054a6c046c6_Sign%20up.svg" loading="lazy" alt="Sign up illustration"></div>
+                       <div class="img-block" style="opacity: 1;"><img src="../assets/c3.png" loading="lazy" alt="Sign up illustration"></div>
                        <div class="dot" style="background-color: rgb(0, 108, 208); width: 24px; height: 24px;"></div>
-                       <div class="content-wrap"><div class="step-content-block"><div class="step" style="background-color: rgb(255, 255, 255);"><div class="text-block"><div class="label" style="color: rgb(0, 108, 208);">01</div><div class="content" style="color: rgb(18, 18, 18);"><div class="heading">Open free account</div><p>Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.</p></div></div></div><div class="bg-shadow" style="display: block;"></div></div></div>
+                       <div class="content-wrap"><div class="step-content-block"><div class="step" style="background-color: rgb(255, 255, 255);"><div class="text-block"><div class="label" style="color: rgb(0, 108, 208);">03</div><div class="content" style="color: rgb(18, 18, 18);"><div class="heading">Add your profile</div><p>Submit your GitHub profile to be listed on the website by clicking on "<a href="https://github.com/recodehive/awesome-github-profiles/issues/new?assignees=&labels=%E2%9E%95+profile&projects=&template=add_profile.md&title=Add+Profile%3A+">Add Your Profile</a>". Follow the provided guidelines to ensure your profile meets the submission criteria. </p></div></div></div><div class="bg-shadow" style="display: block;"></div></div></div>
+                   </div>
+                   <div class="step-block">
+                    <div class="scoll-wrap"><div class="scroll-animate"  id="scroll3" style="transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg); transform-style: preserve-3d;"></div><div class="scroll-base"></div></div>
+                    <div class="img-block" style="opacity: 1;"><img src="../assets/c4.png" loading="lazy" alt="Sign up illustration"></div>
+                    <div class="dot" style="background-color: rgb(0, 108, 208); width: 24px; height: 24px;"></div>
+                    <div class="content-wrap"><div class="step-content-block"><div class="step" style="background-color: rgb(255, 255, 255);"><div class="text-block"><div class="label" style="color: rgb(0, 108, 208);">04</div><div class="content" style="color: rgb(18, 18, 18);"><div class="heading">Join the Organization</div><p>Click on "<a href="https://github.com/recodehive/Support/issues/new?assignees=&labels=invite+me+to+the+community&projects=&template=invitation.yml&title=Please+invite+me+to+the+Recode-Hive+GitHub+Community+Organization">Join the Organization</a>" to become part of the community. This allows you to contribute and engage with others. Get Involved in an inclusive and diverse community. You will enable some github profile features by doing so. </p></div></div></div><div class="bg-shadow" style="display: block;"></div></div></div>
                    </div>
+                   <div class="step-block">
+                    <div class="scoll-wrap"><div class="scroll-animate"  id="scroll4" style="transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg); transform-style: preserve-3d;"></div><div class="scroll-base"></div></div>
+                    <div class="img-block" style="opacity: 1;"><img src="../assets/c5.png" loading="lazy" alt="Sign up illustration"></div>
+                    <div class="dot" style="background-color: rgb(0, 108, 208); width: 24px; height: 24px;"></div>
+                    <div class="content-wrap"><div class="step-content-block"><div class="step" style="background-color: rgb(255, 255, 255);"><div class="text-block"><div class="label" style="color: rgb(0, 108, 208);">05</div><div class="content" style="color: rgb(18, 18, 18);"><div class="heading">Explore Tools & Events</div><p>This is the place where you can optimize your profile by referring to the video we have created, learning goes to live 1:1 sessions over here: Feel free to explore the new horizon of this area. <a href="https://recodehive.github.io/awesome-github-profiles/pages/events.html">Check it out</a> </p></div></div></div><div class="bg-shadow" style="display: block;"></div></div></div>
+                  </div>
+                  <div class="step-block">
+                    <div class="scoll-wrap"><div class="scroll-animate"  id="scroll5" style="transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg); transform-style: preserve-3d;"></div><div class="scroll-base"></div></div>
+                    <div class="img-block" style="opacity: 1;"><img src="../assets/c6.png" loading="lazy" alt="Sign up illustration"></div>
+                    <div class="dot" style="background-color: rgb(0, 108, 208); width: 24px; height: 24px;"></div>
+                    <div class="content-wrap"><div class="step-content-block"><div class="step" style="background-color: rgb(255, 255, 255);"><div class="text-block"><div class="label" style="color: rgb(0, 108, 208);">06</div><div class="content" style="color: rgb(18, 18, 18);"><div class="heading">Time to Earn More Badges</div><p>Now it's time to earn more GitHub badges by referring to this page, it's quite an easy and long consistent process. Explore this section: <a href="https://recodehive.github.io/awesome-github-profiles/pages/githubbadge.html">Github-Badges</a> </p></div></div></div><div class="bg-shadow" style="display: block;"></div></div></div>
+                  </div>
+                  <div class="step-block">
+                    <div class="scoll-wrap"><div class="scroll-animate"  id="scroll6" style="transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg); transform-style: preserve-3d;"></div><div class="scroll-base"></div></div>
+                    <div class="img-block" style="opacity: 1;"><img src="../assets/c7.png" class="first" loading="lazy" alt="Sign up illustration"></div>
+                    <div class="dot" style="background-color: rgb(0, 108, 208); width: 24px; height: 24px;"></div>
+                    <div class="content-wrap"><div class="step-content-block"><div class="step" style="background-color: rgb(255, 255, 255);"><div class="text-block"><div class="label" style="color: rgb(0, 108, 208);">07</div><div class="content" style="color: rgb(18, 18, 18);"><div class="heading">Book a consultation</div><p>Book a consultation with me to explore more about GitHub and how to unlock future potential with the GitHub profile you created.</p></div></div></div><div class="bg-shadow" style="display: block;"></div></div></div>
+                  </div>
        
                </div>
            </div>
        </div>
-   </div>
     
    
     <footer id="Contact" class="footer-2">
@@ -154,11 +201,36 @@ <h5>
             const contentDiv = document.getElementById('scroll2');
             contentDiv.style.height='100%'
         }
+        function active2(){
+            const contentDiv = document.getElementById('scroll3');
+            contentDiv.style.height='100%'
+        }
+        function active3(){
+            const contentDiv = document.getElementById('scroll4');
+            contentDiv.style.height='100%'
+        }
+        function active4(){
+            const contentDiv = document.getElementById('scroll5');
+            contentDiv.style.height='100%'
+        }
+        function active5(){
+            const contentDiv = document.getElementById('scroll6');
+            contentDiv.style.height='100%'
+        }
+
         document.addEventListener('DOMContentLoaded', () => {
           const contentDiv = document.getElementById('scroll1');
           const contentDiv1 = document.getElementById('scroll2');
+          const contentDiv2 = document.getElementById('scroll3');
+          const contentDiv3 = document.getElementById('scroll4');
+          const contentDiv4 = document.getElementById('scroll5');
+          const contentDiv5 = document.getElementById('scroll6');
             contentDiv.style.height='0%'
             contentDiv1.style.height='0%'
+            contentDiv2.style.height='0%'
+            contentDiv3.style.height='0%'
+            contentDiv4.style.height='0%'
+            contentDiv5.style.height='0%'
           // Function to call when the content div comes into view
           function handleIntersection(entries, observer) {
             entries.forEach(entry => {
@@ -166,8 +238,20 @@ <h5>
                 // Call your function here
                 if(entry.target.id=="scroll1"){
                     active();
-                }else{
-                    active1()
+                }else if(entry.target.id=="scroll2"){
+                    active1();
+                }
+                else if(entry.target.id=="scroll3"){
+                    active2();
+                }
+                else if(entry.target.id=="scroll4"){
+                    active3();
+                }
+                else if(entry.target.id=="scroll5"){
+                    active4();
+                }
+                else{
+                    active5();
                 }
     
                 // Optionally, stop observing after the first intersection
@@ -186,6 +270,10 @@ <h5>
           // Start observing the target element
           observer.observe(contentDiv);
           observer.observe(contentDiv1);
+          observer.observe(contentDiv2);
+          observer.observe(contentDiv3);
+          observer.observe(contentDiv4);
+          observer.observe(contentDiv5);
 
           // Example function to call when content div is in view
         
diff --git a/styles/help.css b/styles/help.css
index a68ab174..8f140607 100644
--- a/styles/help.css
+++ b/styles/help.css
@@ -1,25 +1,116 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
 .container-help {
-    position: relative;
-    display: flex;
-    width: 100%;
-    margin-bottom: 10%;
-    padding-bottom: 0px;
-    flex-direction: column;
-    align-items: flex-start;
-  }
-.main-container{
-    width: 100vw;
-    display: flex;
-    justify-content: center;
+  display: flex;
+  font-family: "Poppins", sans-serif;
+  flex-direction: column;
+  align-items: center;
 }
-  .container-help .content-block {
-    position: sticky;
-    top: 0px;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: center;
-  }
+
+.content-block {
+  display: flex;
+  gap: 200px;
+  justify-content: center;
+  align-items: center;
+  width: 80%;
+  margin-top: 60px;
+  margin-bottom: 30px;
+  background-color: #fff;
+  height: 450px;
+}
+
+body.dark-mode .content-block{
+  background-color: #333;
+
+}
+
+.main-heading {
+  font-size: 48px;
+  font-weight: 500;
+  color: #121212;
+  margin-bottom: 20px;
+  width: 450px;
+  word-wrap: break-word;
+}
+
+body.dark-mode .main-heading{
+  color: #fff;
+}
+
+.description {
+  font-size: 16px;
+  font-family: "Poppins", sans-serif;
+  font-weight: 400;
+  color: #666;
+}
+
+body.dark-mode .description{
+  color: #c0c0c0;
+}
+
+.steps-indicator {
+  position: relative;
+  height: 300px;
+}
+
+.step-line {
+  position: absolute;
+  left: 50%;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  background-color: #0066cc;
+}
+
+body.dark-mode .step-line{
+  background-color: #c0c0c0;
+}
+
+.step-dot {
+  position: absolute;
+  left: 50%;
+  width: 20px;
+  height: 20px;
+  background-color: #0066cc;
+  border-radius: 50%;
+  transform: translateX(-40%);
+}
+
+body.dark-mode .step-dot{
+  background-color: #c0c0c0;
+}
+
+.step-dot::after {
+  content: attr(data-step);
+  position: absolute;
+  left: 30px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #0066cc;
+  font-weight: bold;
+}
+
+.step-dot:nth-child(2) { top: 0; }
+.step-dot:nth-child(3) { top: 50%; }
+.step-dot:nth-child(4) { bottom: 0; }
+
+.step-box {
+  position: absolute;
+  background-color: #fff;
+  box-shadow: 7px 7px 20px 0 rgba(18, 18, 18, 0.2);
+  padding: 16px;
+  border-radius: 16px;
+  font-size: 12px;
+  font-weight: 700;
+  color: #0066cc;
+  white-space: nowrap;
+}
+
+body.dark-mode .step-box{
+  background-color: #555;
+  color: #fff;
+}
+
   .steps-clone {
     position: relative;
     display: flex;
@@ -77,7 +168,9 @@
     margin-bottom: 0px;
     align-self: center;
     order: 2;
-  }.step-block {
+  }
+  
+  .step-block {
     position: relative;
     display: flex;
     width: 100vw !important;
@@ -88,6 +181,7 @@
     align-items: center;
     align-content: center;
   }
+  
   @media only screen and (max-width:700px){
     .step-block{
         flex-direction: column;
@@ -124,12 +218,25 @@
     z-index: 1;
     height: 100%;
   }
-  .img-block{
+  .img-block {
     width: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
   }
+
+  .img-block img{
+    width: 350px;
+  }
+
+  .img-block .first{
+    width: 450px;
+  }
+
+  .content .heading{
+    font-size: 20px;
+  }
+
   .scroll-animate {
     position: absolute;
     top: 0px;
@@ -137,4 +244,30 @@
     transition: all 1.5s ease-out;
    z-index: 0;
       background-color: #3b9cdd !important;
-  }
\ No newline at end of file
+  }
+
+  body.dark-mode .text-block{
+    background-color: #333;
+  }
+
+  body.dark-mode .text-block .content{
+    color: #f0f0f0 !important;
+  }
+
+  body.dark-mode .text-block .content a{
+    color: #3b9cdd;
+  }
+
+  body.dark-mode .scroll-wrap{
+    border: none !important;
+    background-color: #fff !important;
+  }
+
+  body.dark-mode .scroll-animate{
+    border: none !important;
+    background-color: #c0c0c0 !important;
+  }
+
+  body.dark-mode .dot{
+    background-color: #c0c0c0 !important;
+  }