diff --git a/frontend/src/app/components/header/header.component.html b/frontend/src/app/components/header/header.component.html
index ff60834..b7254e9 100644
--- a/frontend/src/app/components/header/header.component.html
+++ b/frontend/src/app/components/header/header.component.html
@@ -8,10 +8,12 @@
     </a>
 </div>
 <div>
-    <input name="search-query" placeholder="Search something..." />
-    <button type="button">
-        <mat-icon>search</mat-icon>
-    </button>
+    <div class="search-bar">
+        <input name="search-query" placeholder="Search something..." />
+        <button type="button">
+            <mat-icon>search</mat-icon>
+        </button>
+    </div>
 </div>
 <div>
     <ng-container *ngIf="isAuthenticated; else anonymousRightMenu">
diff --git a/frontend/src/app/components/header/header.component.scss b/frontend/src/app/components/header/header.component.scss
index 0a74241..0433994 100644
--- a/frontend/src/app/components/header/header.component.scss
+++ b/frontend/src/app/components/header/header.component.scss
@@ -66,29 +66,39 @@ $headerHeight: 3.5em;
 
         &:nth-child(2) {
             flex: 1;
-            $borderRadiusValue: 10em;
-
-            input {
+            
+            .search-bar {
                 flex: 1;
-                width: 60%;
                 max-width: 50em;
-                border-radius: $borderRadiusValue 0 0 $borderRadiusValue;
-                background-color: white;
-                border: solid 1px #ccc;
-                margin: .5em 0;
-                padding: .2em .5em;
-            }
+                $borderRadiusValue: 10em;
+                position: relative;
 
-            button {
-                display: flex;
-                align-items: center;
-                border-radius: 0 $borderRadiusValue $borderRadiusValue 0;
-                background-color: white;
-                border: solid 1px #ccc;
-                margin: .5em 0;
-
-                &:hover {
-                    background-color: #eee;
+                input {
+                    flex: 1;
+                    width: 60%;
+                    max-width: 50em;
+                    border-radius: $borderRadiusValue;
+                    background-color: white;
+                    border: solid 1px #ddd;
+                    padding: .2em 2.7em .2em 1em;
+                    height: 2em;
+                }
+    
+                button {
+                    position: absolute;
+                    display: flex;
+                    align-items: center;
+                    border-radius: $borderRadiusValue;
+                    background-color: white;
+                    border: none;
+                    margin: .5em 0;
+                    right: 1.1em;
+                    color: #aaaaaa;
+    
+                    &:hover {
+                        background-color: #eee;
+                        cursor: pointer;
+                    }
                 }
             }
         }