diff --git a/assets/css/style.css b/assets/css/style.css
index 292d432..e484a6f 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -93,9 +93,56 @@ body {
 
 /*placeholder for search and login section*/
 .search-and-login {
-    width: 277px;
+    display: flex;
+    align-items: center;
+    position: relative;
+    /* width: 277px;
     height: 49px;
-    border: #000 solid 1px;
+    border: #000 solid 1px; */
+}
+
+.search-input{
+    height: 36px;
+    background-color: #C7E2C9;
+    border: 1px solid #A8C9AA;
+    border-radius: 10px;
+    padding: 10px;
+    font-family: var(--common-font);
+    font-size: 14px;
+    color: var(--input-text-color);
+    padding-left: 2rem;
+    margin-right: 16px;
+    
+}
+
+.login-link{
+    background-color: #C7E2C9;
+    height: 36px;
+    width: 36px;
+    text-align: center;
+    border-radius: 10px;
+    color: rgba(0, 113, 91, 0.45);
+    font-size: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+     border: 1px solid #A8C9AA;
+
+}
+
+
+
+.search-input::placeholder {
+    color: rgba(0, 113, 91, 0.45);
+}
+
+.search-icon {
+  position: absolute;
+  left: 0.6rem;
+  top: 50%;
+  transform: translateY(-50%);
+  color: rgba(0, 113, 91, 0.45); 
+  pointer-events: none; 
 }
 
 .quote {
@@ -106,6 +153,7 @@ body {
     margin-top: 46px;
     margin-bottom: 30px;
     text-align: center;
+    
 }
 
 .black-qoute-word {
diff --git a/components/templates/layout/header.php b/components/templates/layout/header.php
index 64a9e45..b725af1 100644
--- a/components/templates/layout/header.php
+++ b/components/templates/layout/header.php
@@ -62,7 +62,11 @@
                 </nav>
                
                 <div class="search-and-login">
-                    placeholder
+                     <i class="fa-solid fa-magnifying-glass search-icon"></i>
+                    <input type="text" class="search-input" placeholder="Search recipes...">
+                    <a href="<?php the_permalink("users:login") ?>" class="login-link hover-anim">
+                        <i class="fa-regular fa-user"></i>
+                    </a>
                 </div>
                  <button id="menu-toggle" class="menu-toggle" aria-label="Toggle navigation">
                     <i id="menu-icon" class="fa-solid fa-bars"></i>