diff --git a/css/style.css b/css/style.css
index e3a7432..94530c8 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1687,6 +1687,12 @@ h5,
 .review-slider .swiper-wrapper .swiper-slide h3 {
   font-weight: 400;
 }
+.swiper-wrapper .swiper-slide img{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: auto;
+}
 
 #contact button:hover {
   background: rgb(199, 35, 199);
@@ -1880,3 +1886,60 @@ body {
 .gotopbtn i {
   color: white !important; /* Ensure the icon color stays white */
 }
+.dropdown-menu {
+  background-color: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 0.25rem;
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);
+}
+
+ .dropdown-item {
+  color: #333;
+  padding: 0.5rem 1rem;
+  transition: background-color 0.2s, color 0.2s;
+}
+
+.dropdown-item:hover, .navbar-nav .dropdown-item:focus {
+  background-color: rgba(0, 0, 0, 0.075);
+  color: #000;
+}
+ .dropdown-toggle::after {
+  margin-left: 0.255em;
+  vertical-align: 0.255em;
+}
+
+/* .navbar-nav .nav-link {
+  color: #555;
+  font-weight: 500;
+  padding: 0.5rem 1rem;
+  transition: color 0.2s;
+} */
+
+/* .navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus {
+  color: #000;
+} */
+
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  display: none;
+  float: left;
+  min-width: 10rem;
+  padding: 0.5rem 0;
+  margin: 0.125rem 0 0;
+  font-size: 1rem;
+  color: #212529;
+  text-align: left;
+  list-style: none;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 0.25rem;
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);
+}
+
+.nav-item.show .dropdown-menu {
+  display: block;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 7e11297..651edff 100644
--- a/index.html
+++ b/index.html
@@ -95,21 +95,33 @@
             Sorting Visualizers
           </a>
         </li>
-                  <li class="nav-item">
-                      <a class="nav-link" style="font-weight: 500;" href="#programs-section">Algorithms</a>
-                  </li>
-                  <li class="nav-item">
-                    <a class="nav-link" style="font-weight: 500;" href="#features-section">Features</a>
-                </li>
-                  <li class="nav-item">
-                      <a class="nav-link" style="font-weight: 500;" href="#About-Us">About Us</a>
-                  </li>
-                  <li class="nav-item ">
-                    <a class="nav-link log" style="font-weight: 500; background-color: rgb(55, 55, 172);border-radius: 0.4rem; margin-left: 0.7rem;" href="login.html">Login</a>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link log" style="font-weight: 500;  background-color:  rgb(55, 55, 172); border-radius: 0.4rem; margin-left: 0.7rem;" href="signup.html">Sign Up</a>
-              </li>
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle" style="font-weight: 500;" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+              Algorithms
+          </a>
+          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+              <li><a class="dropdown-item" href="#bubble-sort-section">Bubble Sort</a></li>
+              <li><a class="dropdown-item" href="#merge-sort-section">Merge Sort</a></li>
+              <li><a class="dropdown-item" href="#quick-sort-section">Quick Sort</a></li>
+              <li><a class="dropdown-item" href="#selection-sort-section">Selection Sort</a></li>
+              <li><a class="dropdown-item" href="#bubble-sort-section">Insertion Sort</a></li>
+              <li><a class="dropdown-item" href="#bubble-sort-section">Heap Sort</a></li>
+              <li><a class="dropdown-item" href="#bubble-sort-section">Comb Sort</a></li>
+              <!-- Add more sorting algorithms as needed -->
+          </ul>
+      </li>
+      <li class="nav-item">
+          <a class="nav-link" style="font-weight: 500;" href="#features-section">Features</a>
+      </li>
+      <li class="nav-item">
+          <a class="nav-link" style="font-weight: 500;" href="#About-Us">About Us</a>
+      </li>
+      <li class="nav-item">
+          <a class="nav-link log" style="font-weight: 500; background-color: rgb(55, 55, 172); border-radius: 0.4rem; margin-left: 0.7rem;" href="login.html">Login</a>
+      </li>
+      <li class="nav-item">
+          <a class="nav-link log" style="font-weight: 500; background-color: rgb(55, 55, 172); border-radius: 0.4rem; margin-left: 0.7rem;" href="signup.html">Sign Up</a>
+      </li>
                
               </ul>
           </div>