diff --git a/goofy-client/libs/navigation/src/lib/header-container/header/_header.theme.scss b/goofy-client/libs/navigation/src/lib/header-container/header/_header.theme.scss
index ce7457fdf37be14871074272be6ffc4cbe56e6f5..1f1faa3c8b04c61524f91cc7af656907e96de98e 100644
--- a/goofy-client/libs/navigation/src/lib/header-container/header/_header.theme.scss
+++ b/goofy-client/libs/navigation/src/lib/header-container/header/_header.theme.scss
@@ -1,4 +1,4 @@
-goofy-client-header {
+goofy-client-header header {
 	background-color: #fff;
 }
 
@@ -6,4 +6,4 @@ body.dark goofy-client-header {
 	header {
 		background-color: rgb(40, 40, 40);
 	}
-}
\ No newline at end of file
+}
diff --git a/goofy-client/libs/navigation/src/lib/header-container/header/header.component.scss b/goofy-client/libs/navigation/src/lib/header-container/header/header.component.scss
index 3b0e862b46d6ffb7dc41fae12a81a25c3e203b23..7613b2824c4fa91126729131b2b644ce8f523e03 100644
--- a/goofy-client/libs/navigation/src/lib/header-container/header/header.component.scss
+++ b/goofy-client/libs/navigation/src/lib/header-container/header/header.component.scss
@@ -23,6 +23,10 @@ header {
 	pointer-events: none;
 }
 
+.middle {
+	flex-grow: 1;
+}
+
 img {
 	margin: 0 14px;
 	height: 40px;
@@ -32,6 +36,7 @@ img {
 .left {
 	display: flex;
 	align-items: inherit;
+	min-width: 240px;
 
 	a {
 		outline: 0;
diff --git a/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/vorgang-search-container.component.html b/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/vorgang-search-container.component.html
index 2b5c40faa2270188717497841499f03234950336..3a19f4204caa88d53db6ed136ce99da8aabedf53 100644
--- a/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/vorgang-search-container.component.html
+++ b/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/vorgang-search-container.component.html
@@ -1,6 +1,17 @@
-<form (ngSubmit)="search()" [formGroup]="formService.form">
-	<div class="c-searchfield">
-		<button class="material-icons" type="submit" data-test-id="search-button" matTooltip="Suche ausführen">search</button>
-		<input type="text" [formControlName]="formService.SEARCH_FIELD" name="searchString" data-test-id="search-input" placeholder="Eingangskennzeichen" />
-	</div>
-</form>
\ No newline at end of file
+<form (ngSubmit)="search()" [formGroup]="formService.form" class="search-field">
+
+	<button type="submit" data-test-id="search-button" mat-icon-button aria-label="icon button with search icon">
+		<mat-icon>search</mat-icon>
+	</button>
+
+	<input type="text" maxlength="32" [formControlName]="formService.SEARCH_FIELD" name="searchString" data-test-id="search-input" placeholder="Eingangskennzeichen" />
+
+	<button
+			*ngIf="isSearchFieldFilled()"
+			(click)="formService.reset()"
+			mat-icon-button aria-label="icon button to clear the search field"
+			data-test-id="clear-button">
+		<mat-icon>close</mat-icon>
+	</button>
+
+</form>
diff --git a/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/vorgang-search-container.component.scss b/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/vorgang-search-container.component.scss
index f1f2eca0b1b72d46f16e0c2b00eab9aad2a44e82..213088c8085480167bc49c92e553d851568364f5 100644
--- a/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/vorgang-search-container.component.scss
+++ b/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/vorgang-search-container.component.scss
@@ -1,6 +1,28 @@
 @import "variables";
 
-.c-searchfield {
+input {
+	border: 0;
+	background-color: transparent;
+	outline: 0;
+	flex-grow: 1;
+	font-size: 18px;
+
+	&::placeholder {
+		color: rgba(#000, 0.2);
+	}
+}
+
+.search-field {
+	border-radius: 20px;
+	background-color: #fafafa;
+	max-width: 320px;
+	display: flex;
+	box-shadow: 0 0 0 1px rgba(#000, 0.08);
+	margin-left: 16px;
+}
+
+
+.xc-searchfield {
 	border: 1px solid grey;
 	display: flex;
 	border-radius: 25px;
@@ -31,4 +53,4 @@
 		color: mat-color($primaryPalette);
 		cursor: pointer;
 	}
-}
\ No newline at end of file
+}
diff --git a/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/vorgang-search-container.component.ts b/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/vorgang-search-container.component.ts
index f73a28c90e51cfd12a55bfd5a9c83a687c37817c..818dd96263bf55d453b70317ed19aea40a566534 100644
--- a/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/vorgang-search-container.component.ts
+++ b/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/vorgang-search-container.component.ts
@@ -14,4 +14,8 @@ export class VorgangSearchContainerComponent {
 	search(): void {
 		this.formService.submit();
 	}
-}
\ No newline at end of file
+
+	isSearchFieldFilled(): boolean {
+		return this.formService.hasSearchString();
+	}
+}
diff --git a/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/vorgang-search.formservice.ts b/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/vorgang-search.formservice.ts
index 07bec1dcf257e3770ccd25e65c5ab44574bb3d01..5cdb854253856dc9d4f9bb3e71751530503fc88f 100644
--- a/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/vorgang-search.formservice.ts
+++ b/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/vorgang-search.formservice.ts
@@ -24,8 +24,16 @@ export class VorgangSearchFormService {
 		return this.service.search(this.getFormValue());
 	}
 
+	reset(): void {
+		this.form.controls[this.SEARCH_FIELD].patchValue('');
+	}
+
+	hasSearchString(): boolean {
+		return !!this.form.controls[this.SEARCH_FIELD].value;
+	}
+
 	private getFormValue(){
 		const formValue: string = this.form.value.search;
 		return isEmpty(formValue) ? null : formValue;
 	}
-}
\ No newline at end of file
+}