diff --git a/src/ts/components/shared/chat-log/chat-log.pug b/src/ts/components/shared/chat-log/chat-log.pug
index 2d1aa0e..ba43e59 100644
--- a/src/ts/components/shared/chat-log/chat-log.pug
+++ b/src/ts/components/shared/chat-log/chat-log.pug
@@ -13,7 +13,9 @@
 				| Party
 			a.link-plain.chat-log-tab(#whisperTab tabindex (click)="switchTab('whisper')")
 				| Whisper
-			input.link-plain.chat-log-tab.chat-log-filter(#filterTab type="text" [style.background-color]="filterColor" (keyup.enter)="(unFocus())" (keyup.esc)="(unFocus())" [placeholder]="'Filter'" (keyup)="filterChat()")
+			a.link-plain.chat-log-tab([style.background-color]="filterColor" (click)="focus()")
+				fa-icon.search-icon([icon]="searchIcon")
+				input.chat-log-filter(#filterInput type="text" (keyup.enter)="(unFocus())" (keyup.esc)="(unFocus())" [placeholder]="'Filter'" (keyup)="filterChat()")
 		.chat-log-scroll-outer()
 			.chat-log-scroll-inner(#scroll)
 				.chat-log-scroll-inner-inner(#lines)
diff --git a/src/ts/components/shared/chat-log/chat-log.scss b/src/ts/components/shared/chat-log/chat-log.scss
index f9cfce1..398cc7b 100644
--- a/src/ts/components/shared/chat-log/chat-log.scss
+++ b/src/ts/components/shared/chat-log/chat-log.scss
@@ -159,10 +159,18 @@ $resizer-offset: $resizer-size / 2;
 	color: rgba(255, 255, 255, 0.2);
 }
 
+.search-icon {
+	padding-right: 5px;
+}
+
 .chat-log-filter {
 	padding-bottom: 5px;
 	border: none;
 	width: 100px;
+	background-color: rgba(0, 0, 0, 0);
+	border: none;
+	outline: none;
+    color: white;
 }
 
 .chat-log-filter::-webkit-input-placeholder {
diff --git a/src/ts/components/shared/chat-log/chat-log.ts b/src/ts/components/shared/chat-log/chat-log.ts
index 67e56dd..c6c8734 100644
--- a/src/ts/components/shared/chat-log/chat-log.ts
+++ b/src/ts/components/shared/chat-log/chat-log.ts
@@ -9,7 +9,7 @@ import { SettingsService } from '../../services/settingsService';
 import { AgDragEvent } from '../directives/agDrag';
 import { element, textNode, removeAllNodes, replaceNodes } from '../../../client/htmlUtils';
 import { DEFAULT_CHATLOG_OPACITY, PONY_TYPE, SECOND } from '../../../common/constants';
-import { faCaretUp, faArrowDown } from '../../../client/icons';
+import { faCaretUp, faArrowDown, faSearch } from '../../../client/icons';
 import { sampleMessages } from '../../../common/debugData';
 import { findEntityById } from '../../../common/worldMap';
 import { colorToRGBA, rgb2hsl, HSL, hsl2CSS } from '../../../common/color';
@@ -209,13 +209,14 @@ function findUserIndex(users: IndexEntryUser[], id: number, crc: number | undefi
 export class ChatLog implements AfterViewInit, OnDestroy, DoCheck {
 	readonly toBottomIcon = faArrowDown;
 	readonly resizeIcon = faCaretUp;
+	readonly searchIcon = faSearch;
 	@ViewChild('chatLog', { static: true }) chatLog!: ElementRef;
 	@ViewChild('scroll', { static: true }) scroll!: ElementRef;
 	@ViewChild('lines', { static: true }) lines!: ElementRef;
 	@ViewChild('localTab', { static: true }) localTab!: ElementRef;
 	@ViewChild('partyTab', { static: true }) partyTab!: ElementRef;
 	@ViewChild('whisperTab', { static: true }) whisperTab!: ElementRef;
-	@ViewChild('filterTab', { static: true }) filterTab!: ElementRef;
+	@ViewChild('filterInput', { static: true }) filterInput!: ElementRef;
 	@ViewChild('toggleButton', { static: true }) toggleButton!: ElementRef;
 	@ViewChild('count', { static: true }) countElement!: ElementRef;
 	@ViewChild('content', { static: true }) contentElement!: ElementRef;
@@ -449,7 +450,7 @@ export class ChatLog implements AfterViewInit, OnDestroy, DoCheck {
 	filterChat() {
 		this.clearTimeOutAutoClear();
 		this.clearTimeOutAutoUnfocus();
-		let value = this.filterTab.nativeElement.value;
+		let value = this.filterInput.nativeElement.value;
 		if (!value) {
 			this.clearTimeOutAutoClear();
 			this.unFocus();
@@ -460,7 +461,7 @@ export class ChatLog implements AfterViewInit, OnDestroy, DoCheck {
 		}
 
 		this.autoClear = setTimeout(() => {
-			this.filterTab.nativeElement.value = '';
+			this.filterInput.nativeElement.value = '';
 			this.filterChat();
 			this.unFocus();
 		}, SECOND * 30);
@@ -478,10 +479,10 @@ export class ChatLog implements AfterViewInit, OnDestroy, DoCheck {
 			try {
 				const regExp = new RegExp(value);
 				this.filterChatLogLines(regExp, toLowerCase);
-				this.filterTab.nativeElement.style.color = '';
+				this.filterInput.nativeElement.style.color = '';
 			} catch (err) {// If the user inputs invalid regExp we just notify him by changing text color to red
 				if (DEVELOPMENT) console.error(err);
-				this.filterTab.nativeElement.style.color = '#ff6666';
+				this.filterInput.nativeElement.style.color = '#ff6666';
 			}
 			return;
 		} else {
@@ -566,10 +567,15 @@ export class ChatLog implements AfterViewInit, OnDestroy, DoCheck {
 		if (this.autoUnfocus) clearTimeout(this.autoUnfocus);
 		this.autoUnfocus = undefined;
 	}
+	focus() {
+		this.clearTimeOutAutoUnfocus();
+		if (this.filterInput.nativeElement)
+			this.filterInput.nativeElement.focus();
+	}
 	unFocus() {
 		this.clearTimeOutAutoUnfocus();
-		if (this.filterTab.nativeElement)
-			this.filterTab.nativeElement.blur();
+		if (this.filterInput.nativeElement)
+			this.filterInput.nativeElement.blur();
 	}
 	addMessage(message: ChatMessage) {
 		if (message.name && message.message) {