diff --git a/assets/css/styles.css b/assets/css/styles.css
index 2cc7c9c..066cb51 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -22,6 +22,8 @@
   /*========== z index ==========*/
   --z-tooltip: 10;
   --z-fixed: 100;
+  /*========== width & height ==========*/
+  --main-navbar-width: 1120px;
 }
 @media screen and (min-width: 1024px) {
   :root {
@@ -54,10 +56,7 @@ a {
 }
 
 /*=============== REUSABLE CSS CLASSES ===============*/
-.container {
-  max-width: 1120px;
-  margin-inline: 1.5rem;
-}
+
 
 /*=============== HEADER ===============*/
 .header {
@@ -73,6 +72,8 @@ a {
 /*=============== NAV ===============*/
 .nav {
   height: var(--header-height);
+  max-width: var(--main-navbar-width);
+  margin-inline: 1.5rem;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -220,7 +221,8 @@ a {
   transform: rotate(180deg);
 }
 
-/* ========= navbar profile ========= */
+/* ============ navbar profile =============*/
+
 #navbar_profile{
   height: 100%;
   display: flex;
@@ -232,6 +234,10 @@ a {
 
 #navbar_profile > .navbar_profile_child{
   height: 100%;
+}
+
+#navbar_profile > .navbar_profile_child > .navbar_profile_child_title {
+  height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -240,16 +246,16 @@ a {
   cursor: pointer;
 }
 
-#navbar_profile .navbar_profile_icons{
+#navbar_profile > .navbar_profile_child > .navbar_profile_child_title > .navbar_profile_icons{
   font-size: 24px;
 }
 
-#navbar_profile .navbar_profile_name{
+#navbar_profile > .navbar_profile_child > .navbar_profile_child_title > .navbar_profile_name{
   font-size: 12px;
   font-weight: bold;
 }
 
-/* Account Dropdown Menu */
+/* === Account Dropdown Menu ===  */
 
 #navbar_profile_account{
   position: relative;
@@ -296,6 +302,85 @@ a {
   font-weight: bold;
 }
 
+/* === navbar search dropdown === */
+
+#navbar_profile_search > #navbar_search_dropdown{
+  position: absolute;
+  width: var(--main-navbar-width);
+  width: 100%;
+  padding: 1rem;
+  top: 110%;
+  left: 50%;
+  transform: translate(-50%, 0);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 1rem;
+  color: #696e79;
+  box-shadow: 0 6px 8px hsla(220, 68%, 12%, 0.05);
+  background-color: white;
+  visibility: hidden;
+  opacity: 0;
+  transition: all .5s;
+}
+
+#navbar_profile_search:hover #navbar_search_dropdown{
+  visibility: visible;
+  opacity: 1;
+  top: 95%;
+}
+#search_bar_input_container {
+  width: 100%;
+  background-color: #f5f5f6;
+  position: relative;
+}
+
+#search_bar_input_container > #search_bar_input{
+  display: inline-block;
+  width: 100%;
+  height: 45px;
+  line-height: 24px;
+  padding: 1rem;
+  padding-right: 3rem;
+  border: none;
+  font-size: var(--normal-font-size);
+  color: var(--text-color);
+  background-color: inherit;
+  letter-spacing: 0.5px;
+}
+
+#search_bar_input_container > #search_bar_input:focus{
+  outline: 0;
+  background-color: #fff;
+  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;
+}
+
+#navbar_search_dropdown_icon{
+  position: absolute;
+  font-size: 1.6rem;
+  color: #000;
+  right: .55rem;
+  top: .6rem;
+  cursor: pointer;
+}
+
+#search_suggetion {
+  padding-left: 1rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: .2rem;
+}
+
+.nav_search_suggessions {
+  cursor: pointer;
+}
+.nav_search_suggessions:hover {
+  color: #000;
+}
+
 /*=============== responsive ===============*/
 
 @media screen and (max-width: 375px) {
@@ -319,8 +404,6 @@ a {
   /* Nav */
   .nav {
     height: calc(var(--header-height) + 2rem);
-  }
-  .container {
     margin-inline: auto;
   }
   .nav__toggle {
@@ -417,6 +500,9 @@ a {
     pointer-events: initial;
     cursor: initial;
   }
+  #navbar_profile_search > #navbar_search_dropdown {
+    width: var(--main-navbar-width);
+  }
   #navbar_profile_account > #navbar_account_dropdown {
     display: flex;
   }
diff --git a/index.html b/index.html
index a79997f..73fb7fd 100644
--- a/index.html
+++ b/index.html
@@ -248,7 +248,27 @@
                 </div>
 
                 <section id="navbar_profile">
+                    <div id="navbar_profile_search" class="navbar_profile_child">
+                        <div class="navbar_profile_child_title">
+                            <span class="material-symbols-rounded navbar_profile_icons"> search </span>
+                            <span class="navbar_profile_name">Search</span>
+                        </div>
+                        <div id="navbar_search_dropdown">
+                            <div id="search_bar_input_container">
+                                <input type="text" id="search_bar_input" placeholder="Search for products, brands and more">
+                                <span id="navbar_search_dropdown_icon" class="material-symbols-rounded "> search </span>
+                            </div>
+                            <div id="search_suggetion">
+                                <span class="nav_search_suggessions">jeans</span>
+                                <span class="nav_search_suggessions">suits</span>
+                            </div>
+                        </div>
+                    </div>
                     <div id="navbar_profile_account" class="navbar_profile_child">
+                        <div class="navbar_profile_child_title">
+                            <span class="material-symbols-rounded navbar_profile_icons"> person </span>
+                            <span class="navbar_profile_name">Profile</span>
+                        </div>
                         <div id="navbar_account_dropdown">
                             <a href="/Profile/profile.html" id="navbar_account_dropdown_login" class="dropList">LOGIN/SIGNUP</a>
                             <a href="/Profile/signup.html" class="dropList">Gift Cards</a>
@@ -256,17 +276,18 @@
                             <a href="#" class="dropList">Saved Address</a>
                             <a href="#" class="dropList">Saved Cards</a>
                         </div>
-        
-                        <span class="material-symbols-rounded navbar_profile_icons"> person </span>
-                        <span class="navbar_profile_name">Profile</span>
                     </div>
                     <div class="navbar_profile_child">
-                        <span class="material-symbols-rounded navbar_profile_icons"> favorite </span>
-                        <span class="navbar_profile_name">Wishlist</span>
+                        <div class="navbar_profile_child_title">
+                            <span class="material-symbols-rounded navbar_profile_icons"> favorite </span>
+                            <span class="navbar_profile_name">Wishlist</span>
+                        </div>
                     </div>
                     <div class="navbar_profile_child">
-                        <span class="material-symbols-rounded navbar_profile_icons"> shopping_bag </span>
-                        <span class="navbar_profile_name">Cart</span>
+                        <div class="navbar_profile_child_title">
+                            <span class="material-symbols-rounded navbar_profile_icons"> shopping_bag </span>
+                            <span class="navbar_profile_name">Cart</span>
+                        </div>
                     </div>
                 </section>
             </nav>