diff --git a/apps/web/src/app/home/home.component.html b/apps/web/src/app/home/home.component.html
index a7574a9b1..5566a0b05 100644
--- a/apps/web/src/app/home/home.component.html
+++ b/apps/web/src/app/home/home.component.html
@@ -1,5 +1,9 @@
 <app-header
     [title]="'HOME.TITLE' | translate"
     [subtitle]="'HOME.SUBTITLE' | translate"
+    (searchQuery)="onSearchQueryChange($event)"
+/>
+<app-recent-playlists
+    class="recent-playlists"
+    [searchQueryInput]="searchQuery()"
 />
-<app-recent-playlists class="recent-playlists" />
diff --git a/apps/web/src/app/home/home.component.ts b/apps/web/src/app/home/home.component.ts
index c46fe0596..e71b073dc 100644
--- a/apps/web/src/app/home/home.component.ts
+++ b/apps/web/src/app/home/home.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, signal } from '@angular/core';
 import { TranslatePipe } from '@ngx-translate/core';
 import { RecentPlaylistsComponent } from 'components';
 import { HeaderComponent } from '../shared/components/header/header.component';
@@ -9,4 +9,10 @@ import { HeaderComponent } from '../shared/components/header/header.component';
     styleUrls: ['./home.component.scss'],
     imports: [HeaderComponent, RecentPlaylistsComponent, TranslatePipe],
 })
-export class HomeComponent {}
+export class HomeComponent {
+    searchQuery = signal<string>('');
+
+    onSearchQueryChange(query: string): void {
+        this.searchQuery.set(query);
+    }
+}
diff --git a/apps/web/src/app/shared/components/header/header.component.html b/apps/web/src/app/shared/components/header/header.component.html
index 8c6938a93..2056884f0 100644
--- a/apps/web/src/app/shared/components/header/header.component.html
+++ b/apps/web/src/app/shared/components/header/header.component.html
@@ -1,16 +1,29 @@
-<mat-toolbar>
-    <div class="logo">
-        <img
-            src="./assets/icons/icon-tv-256.png"
-            height="100"
-            alt="iptvnator logo"
-        />
-    </div>
-    <div class="main">
-        <div class="title">{{ title() }}</div>
-        <div class="subtitle">{{ subtitle() }}</div>
+<mat-toolbar class="modern-header">
+    <div class="brand-block">
+        <div class="logo-pulse">
+            <img
+                src="./assets/icons/icon-tv-256.png"
+                alt="iptvnator logo"
+            />
+        </div>
+        <div class="brand-text">
+            <div class="title">{{ title() }}</div>
+        </div>
     </div>
+
     @if (isHome) {
+        <div class="search-container">
+            <mat-icon class="search-icon">search</mat-icon>
+            <input
+                #searchInput
+                type="search"
+                class="search-input"
+                spellcheck="false"
+                autocomplete="off"
+                [placeholder]="'HOME.PLAYLISTS.SEARCH_PLAYLISTS' | translate"
+                (input)="onSearchQueryUpdate(searchInput.value)"
+            />
+        </div>
         <div class="menu">
             <button
                 mat-icon-button
diff --git a/apps/web/src/app/shared/components/header/header.component.scss b/apps/web/src/app/shared/components/header/header.component.scss
index 6ad6e69cf..59f0ce49d 100644
--- a/apps/web/src/app/shared/components/header/header.component.scss
+++ b/apps/web/src/app/shared/components/header/header.component.scss
@@ -1,44 +1,298 @@
 :host {
-    background: #1b1c1c;
+    background: linear-gradient(135deg, #0a0a0b 0%, #1b1c1c 100%);
     color: #fff;
     display: flex;
     width: 100%;
-    --mat-toolbar-standard-height: 100px;
+    --mat-toolbar-standard-height: 70px;
+    //padding-left: 80px; // Space for macOS traffic lights
+    app-region: drag;
+    position: relative;
+    overflow: hidden;
 }
 
-.logo {
-    flex: 1 1 100px;
+// Premium home page gradient - dark theme
+:host.home-header {
+    background: linear-gradient(
+        135deg,
+        #0f0c1d 0%,
+        #1a1428 25%,
+        #1e1535 50%,
+        #151121 75%,
+        #0d0a18 100%
+    );
+
+    // Subtle animated glow overlay
+    &::before {
+        content: '';
+        position: absolute;
+        top: -50%;
+        left: -50%;
+        width: 200%;
+        height: 200%;
+        background: radial-gradient(
+            circle at 30% 50%,
+            rgba(139, 92, 246, 0.08) 0%,
+            rgba(99, 102, 241, 0.05) 25%,
+            transparent 50%
+        );
+        animation: headerGlow 15s ease-in-out infinite;
+        pointer-events: none;
+    }
+
+    // Edge accent
+    &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 1px;
+        background: linear-gradient(
+            90deg,
+            transparent 0%,
+            rgba(139, 92, 246, 0.3) 20%,
+            rgba(99, 102, 241, 0.4) 50%,
+            rgba(139, 92, 246, 0.3) 80%,
+            transparent 100%
+        );
+        opacity: 0.6;
+    }
+}
+
+@keyframes headerGlow {
+    0%,
+    100% {
+        transform: translate(0, 0) rotate(0deg);
+        opacity: 1;
+    }
+    33% {
+        transform: translate(-10%, -5%) rotate(120deg);
+        opacity: 0.8;
+    }
+    66% {
+        transform: translate(5%, 10%) rotate(240deg);
+        opacity: 0.9;
+    }
+}
+
+// Compact brand block with pulsing logo
+.brand-block {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 0 16px 0 8px;
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 35px;
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    backdrop-filter: blur(10px);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    app-region: no-drag; // Allow interaction with brand block
+    position: relative;
+    z-index: 1;
+
+    &:hover {
+        background: rgba(255, 255, 255, 0.05);
+        border-color: rgba(255, 255, 255, 0.1);
+    }
+}
+
+// Enhanced brand block on home page - dark theme
+:host.home-header .brand-block {
+    background: rgba(139, 92, 246, 0.08);
+    border-color: rgba(139, 92, 246, 0.15);
+    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.1);
+
+    &:hover {
+        background: rgba(139, 92, 246, 0.12);
+        border-color: rgba(139, 92, 246, 0.25);
+        box-shadow: 0 6px 20px rgba(139, 92, 246, 0.15);
+    }
+}
+
+.logo-pulse {
+    position: relative;
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
     img {
-        height: 100px;
+        width: 38px;
+        height: 38px;
+        object-fit: contain;
+        position: relative;
+        z-index: 2;
+        filter: drop-shadow(0 2px 8px rgba(255, 59, 48, 0.3));
+    }
+
+    // Pulsing effect - like a live broadcast indicator
+    &::before {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background: radial-gradient(
+            circle,
+            rgba(255, 59, 48, 0.4) 0%,
+            transparent 70%
+        );
+        border-radius: 50%;
+        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    }
+
+    &::after {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background: radial-gradient(
+            circle,
+            rgba(255, 59, 48, 0.2) 0%,
+            transparent 70%
+        );
+        border-radius: 50%;
+        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite 0.5s;
     }
 }
 
-.main {
-    place-content: center flex-start;
-    align-self: center;
-    flex-direction: column;
-    box-sizing: border-box;
+@keyframes pulse {
+    0%,
+    100% {
+        transform: scale(1);
+        opacity: 1;
+    }
+    50% {
+        transform: scale(1.4);
+        opacity: 0;
+    }
+}
+
+.brand-text {
     display: flex;
-    flex: 1 1 100%;
-    max-width: 100%;
+    flex-direction: column;
+    justify-content: center;
 
     .title {
-        font-size: 1em;
+        font-size: 1.1rem;
+        font-weight: 600;
+        letter-spacing: -0.02em;
+        background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+    }
+}
+
+// Modern centered search field
+.search-container {
+    flex: 1;
+    max-width: 500px;
+    margin: 0 24px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 24px;
+    padding: 0 20px;
+    height: 48px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    app-region: no-drag; // Allow search interaction
+    z-index: 1;
+
+    &:focus-within {
+        background: rgba(255, 255, 255, 0.06);
+        border-color: rgba(255, 59, 48, 0.4);
+        box-shadow:
+            0 0 0 3px rgba(255, 59, 48, 0.1),
+            0 4px 16px rgba(0, 0, 0, 0.2);
+        transform: translateY(-1px);
     }
 
-    .subtitle {
-        color: #999;
-        font-size: 0.7em;
-        margin-top: 5px;
-        text-wrap: pretty;
+    &:hover:not(:focus-within) {
+        background: rgba(255, 255, 255, 0.05);
+        border-color: rgba(255, 255, 255, 0.12);
+    }
+}
+
+// Enhanced search field on home page
+:host.home-header .search-container {
+    background: rgba(139, 92, 246, 0.06);
+    border-color: rgba(139, 92, 246, 0.12);
+
+    &:focus-within {
+        background: rgba(139, 92, 246, 0.1);
+        border-color: rgba(139, 92, 246, 0.4);
+        box-shadow:
+            0 0 0 3px rgba(139, 92, 246, 0.15),
+            0 4px 20px rgba(139, 92, 246, 0.2);
+        transform: translateY(-1px);
+    }
+
+    &:hover:not(:focus-within) {
+        background: rgba(139, 92, 246, 0.08);
+        border-color: rgba(139, 92, 246, 0.2);
+    }
+}
+
+:host.home-header .search-icon {
+    color: rgba(139, 92, 246, 0.6);
+
+    .search-container:focus-within & {
+        color: rgba(139, 92, 246, 0.9);
+    }
+}
+
+.search-icon {
+    color: rgba(255, 255, 255, 0.4);
+    margin-right: 12px;
+    font-size: 22px;
+    width: 22px;
+    height: 22px;
+    transition: color 0.3s ease;
+
+    .search-container:focus-within & {
+        color: rgba(255, 59, 48, 0.8);
+    }
+}
+
+.search-input {
+    flex: 1;
+    background: transparent;
+    border: none;
+    outline: none;
+    color: #ffffff;
+    font-size: 15px;
+    font-weight: 400;
+    letter-spacing: -0.01em;
+
+    &::placeholder {
+        color: rgba(255, 255, 255, 0.3);
+        font-weight: 400;
+    }
+
+    &::-webkit-search-cancel-button {
+        -webkit-appearance: none;
+        appearance: none;
+        height: 16px;
+        width: 16px;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,255,255,0.4)'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
+        cursor: pointer;
+        opacity: 0.6;
+        transition: opacity 0.2s ease;
+
+        &:hover {
+            opacity: 1;
+        }
     }
 }
 
 .menu {
-    place-content: center;
-    align-self: center;
     display: flex;
+    align-items: center;
+    gap: 4px;
+    app-region: no-drag; // Allow button interactions
 }
 
 .filter-container {
@@ -55,6 +309,7 @@
     margin: 8px 0;
     font-size: 12px;
     font-weight: 500;
+    color: rgba(255, 255, 255, 0.6);
 }
 
 .active-sort {
@@ -65,12 +320,50 @@
     margin-left: 8px;
 }
 
-@media (max-width: 599px) {
-    .subtitle {
-        display: none;
-    }
-
-    .logo > img {
-        height: 48px;
+// Responsive design
+@media (max-width: 899px) {
+    .search-container {
+        max-width: 300px;
+        margin: 0 16px;
+    }
+}
+
+@media (max-width: 599px) {
+    :host {
+        --mat-toolbar-standard-height: 64px;
+        padding-left: 70px; // Reduced padding for smaller screens
+    }
+
+    .brand-block {
+        padding: 6px 12px 6px 6px;
+        gap: 8px;
+    }
+
+    .logo-pulse {
+        width: 40px;
+        height: 40px;
+
+        img {
+            width: 32px;
+            height: 32px;
+        }
+    }
+
+    .brand-text .title {
+        font-size: 0.95rem;
+    }
+
+    .search-container {
+        margin: 0 12px;
+        height: 42px;
+        padding: 0 16px;
+
+        .search-input {
+            font-size: 14px;
+        }
+    }
+
+    .menu {
+        gap: 2px;
     }
 }
diff --git a/apps/web/src/app/shared/components/header/header.component.ts b/apps/web/src/app/shared/components/header/header.component.ts
index 9f0eae444..1dcff104c 100644
--- a/apps/web/src/app/shared/components/header/header.component.ts
+++ b/apps/web/src/app/shared/components/header/header.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, effect, inject, input } from '@angular/core';
+import { Component, HostBinding, OnInit, effect, inject, input, output } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -39,6 +39,9 @@ import {
     ],
 })
 export class HeaderComponent implements OnInit {
+    @HostBinding('class.home-header') get isHomeHeader() {
+        return this.isHome;
+    }
     private activatedRoute = inject(ActivatedRoute);
     private dialog = inject(MatDialog);
     private dataService = inject(DataService);
@@ -49,6 +52,7 @@ export class HeaderComponent implements OnInit {
     readonly isDesktop = !!window.electron;
     readonly title = input.required<string>();
     readonly subtitle = input.required<string>();
+    readonly searchQuery = output<string>();
 
     isHome = true;
 
@@ -160,4 +164,8 @@ export class HeaderComponent implements OnInit {
             this.currentSortOptions?.order === order
         );
     }
+
+    onSearchQueryUpdate(query: string): void {
+        this.searchQuery.emit(query);
+    }
 }
diff --git a/libs/ui/components/src/lib/recent-playlists/recent-playlists.component.html b/libs/ui/components/src/lib/recent-playlists/recent-playlists.component.html
index a8d5690f4..db9f73b0b 100644
--- a/libs/ui/components/src/lib/recent-playlists/recent-playlists.component.html
+++ b/libs/ui/components/src/lib/recent-playlists/recent-playlists.component.html
@@ -1,16 +1,4 @@
 @if (allPlaylistsLoaded()) {
-    <mat-form-field class="search-field" subscriptSizing="dynamic">
-        <mat-icon matPrefix>search</mat-icon>
-        <input
-            matInput
-            #searchQuery
-            type="search"
-            spellcheck="false"
-            autocomplete="off"
-            [placeholder]="'HOME.PLAYLISTS.SEARCH_PLAYLISTS' | translate"
-            (input)="onSearchQueryUpdate(searchQuery.value)"
-        />
-    </mat-form-field>
     @defer {
         @if (playlists$ | async; as playlists) {
             <mat-nav-list class="playlists-list">
diff --git a/libs/ui/components/src/lib/recent-playlists/recent-playlists.component.scss b/libs/ui/components/src/lib/recent-playlists/recent-playlists.component.scss
index 4249be841..438c9c68c 100644
--- a/libs/ui/components/src/lib/recent-playlists/recent-playlists.component.scss
+++ b/libs/ui/components/src/lib/recent-playlists/recent-playlists.component.scss
@@ -15,25 +15,16 @@
     width: 100%;
 }
 
-.search-field {
-    width: 96%;
-    margin: 10px 0;
-}
-
 .meta {
     font-size: 12px !important;
     color: #666;
     margin-top: 2px !important;
 }
 
-
-::ng-deep {
-    div[matformfieldlineripple] {
-        display: none;
-    }
-
-    .search-field > .mat-mdc-text-field-wrapper {
-        border-radius: 30px;
+// Light theme
+@media (prefers-color-scheme: light) {
+    .meta {
+        color: #757575;
     }
 }
 
@@ -62,8 +53,4 @@
         padding-left: 0 !important;
         display: none
     }
-
-    .search-field {
-        @include mat.form-field-density(-2);
-    }
 }
diff --git a/libs/ui/components/src/lib/recent-playlists/recent-playlists.component.ts b/libs/ui/components/src/lib/recent-playlists/recent-playlists.component.ts
index e7493eb6d..d856ed674 100644
--- a/libs/ui/components/src/lib/recent-playlists/recent-playlists.component.ts
+++ b/libs/ui/components/src/lib/recent-playlists/recent-playlists.component.ts
@@ -2,11 +2,10 @@ import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import { AsyncPipe } from '@angular/common';
 import {
     Component,
-    ElementRef,
+    effect,
     inject,
     input,
     output,
-    viewChild,
 } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatIcon } from '@angular/material/icon';
@@ -60,19 +59,24 @@ export class RecentPlaylistsComponent {
     private readonly translate = inject(TranslateService);
 
     readonly sidebarMode = input(false);
+    readonly searchQueryInput = input<string>('');
     readonly playlistClicked = output<string>();
 
     readonly allPlaylistsLoaded = this.store.selectSignal(
         selectPlaylistsLoadingFlag
     );
 
-    readonly searchQueryInput =
-        viewChild<ElementRef<HTMLInputElement>>('searchQuery');
-
     readonly searchQuery = new BehaviorSubject<string>('');
 
     readonly ghostElements = new Array(10);
 
+    constructor() {
+        // Update searchQuery when input changes
+        effect(() => {
+            this.searchQuery.next(this.searchQueryInput());
+        });
+    }
+
     readonly playlists$ = combineLatest([
         this.store.select(selectAllPlaylistsMeta),
         this.searchQuery,
@@ -278,16 +282,4 @@ export class RecentPlaylistsComponent {
         });
     }
 
-    onSearchQueryUpdate(searchQuery: string) {
-        this.searchQuery.next(searchQuery);
-    }
-
-    /* @HostListener('window:keydown.control.f', ['$event'])
-    @HostListener('window:keydown.meta.f', ['$event']) */
-    onSearchHotkey(event: KeyboardEvent) {
-        // Prevent default browser search behavior
-        event.preventDefault();
-        event.stopPropagation();
-        this.searchQueryInput()?.nativeElement?.focus();
-    }
 }