diff --git a/src/app/components/explore/explore.component.html b/src/app/components/explore/explore.component.html
index bbbe679..7e90303 100644
--- a/src/app/components/explore/explore.component.html
+++ b/src/app/components/explore/explore.component.html
@@ -28,16 +28,18 @@
             <div class="flex w-full max-w-xs flex-col items-center justify-between sm:max-w-none sm:flex-row">
                 <!-- Search bar with clear button -->
                 <div class="flex w-full items-center space-x-2 sm:w-auto">
-                    <mat-form-field class="mt-4 w-full sm:w-80" [subscriptSizing]="'dynamic'">
+                    <mat-form-field class="mt-4 w-full sm:w-80" [subscriptSizing]="'dynamic'" (keyup.enter)="filterByQuery(query.value)">
                         <mat-icon matPrefix class="icon-size-5"
                             [svgIcon]="'heroicons_solid:magnifying-glass'"></mat-icon>
                         <input placeholder="Search ..." matInput #query />
                     </mat-form-field>
                     <!-- Clear search button -->
-                    <button mat-icon-button color="warn" class="mt-4">
+                    <button mat-icon-button color="warn" class="mt-4"  *ngIf="showCloseSearchButton"
+                    (click)="resetSearch(query)">
                         <mat-icon [svgIcon]="'heroicons_solid:x-mark'"></mat-icon>
                     </button>
-                    <button mat-icon-button color="success" class="mt-4">
+                    <button mat-icon-button color="success" class="mt-4" *ngIf="!showCloseSearchButton"
+                    (click)="filterByQuery(query.value)">
                         <mat-icon [svgIcon]="'heroicons_solid:magnifying-glass'"></mat-icon>
                     </button>
                 </div>
@@ -51,7 +53,7 @@
             <!-- Project Cards -->
             <div class="mt-10 grid w-full min-w-0 grid-cols-1 gap-6 sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-2">
                 <!-- Loop through projects and render cards -->
-                <ng-container *ngFor="let project of projects; trackBy: trackByFn">
+                <ng-container *ngFor="let project of filteredProjects; trackBy: trackByFn">
                     <angor-card class="filter-info flex w-full flex-col">
                         <div class="flex h-32">
                             <img class="object-cover" [src]="project.banner || '/images/pages/profile/cover.jpg'" alt="Card cover image"
@@ -141,7 +143,7 @@
                     </angor-card>
                 </ng-container>
             </div>
-            <ng-container *ngIf="projects.length == 0">
+            <ng-container *ngIf="filteredProjects.length == 0">
                 <div class="flex flex-auto flex-col items-center justify-center bg-gray-100 dark:bg-transparent">
                     <mat-icon class="icon-size-24" [svgIcon]="'heroicons_outline:archive-box-x-mark'"></mat-icon>
                     <div class="text-secondary mt-4 text-2xl font-semibold tracking-tight">
@@ -150,7 +152,7 @@
                 </div>
             </ng-container>
             <!-- Load More Button -->
-            <div *ngIf="projects.length > 0" class="mt-10 flex justify-center">
+            <div *ngIf="filteredProjects.length > 0" class="mt-10 flex justify-center">
                 <button mat-raised-button color="primary" (click)="loadMoreProjects()" [disabled]="loading">
                     {{ loading ? 'Loading...' : 'Load More Projects' }}
                 </button>
diff --git a/src/app/components/explore/explore.component.ts b/src/app/components/explore/explore.component.ts
index f90e85a..209b221 100644
--- a/src/app/components/explore/explore.component.ts
+++ b/src/app/components/explore/explore.component.ts
@@ -61,10 +61,14 @@ import { Contact } from '../chat/chat.types';
 })
 export class ExploreComponent implements OnInit, OnDestroy {
 
+
     projects: Project[] = [];
+    filteredProjects: Project[] = []
     loading: boolean = false;
     errorMessage: string = '';
     noMoreProjects: boolean = false;
+    showCloseSearchButton: boolean;
+
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
     constructor(
@@ -79,6 +83,7 @@ export class ExploreComponent implements OnInit, OnDestroy {
         this.subscribeToProjectsUpdates();
         this.subscribeToLoading();
         this.subscribeToNoMoreProjects();
+
     }
 
     // Load initial projects and fetch metadata for each
@@ -89,6 +94,7 @@ export class ExploreComponent implements OnInit, OnDestroy {
         ).subscribe({
             next: (projects: Project[]) => {
                 this.projects = projects;
+                this.filteredProjects = this.projects;
                 this.fetchMetadataForProjects(projects);
                 this._changeDetectorRef.detectChanges();
             },
@@ -146,6 +152,7 @@ export class ExploreComponent implements OnInit, OnDestroy {
                     )
                 );
                 this.projects = [...this.projects, ...uniqueNewProjects];
+                this.filteredProjects = [...this.projects];
                 this.fetchMetadataForProjects(uniqueNewProjects);
                 this._changeDetectorRef.detectChanges();
             },
@@ -206,6 +213,50 @@ export class ExploreComponent implements OnInit, OnDestroy {
 }
 
 
+    filterByQuery(query: string): void {
+        if (!query || query.trim() === '') {
+            this.filteredProjects = [...this.projects];
+            this.showCloseSearchButton = false;
+            this._changeDetectorRef.detectChanges();
+            return;
+        }
+
+        const lowerCaseQuery = query.toLowerCase();
+
+        this.filteredProjects = this.projects.filter((project) => {
+            return (
+                (project.displayName &&
+                    project.displayName
+                        .toLowerCase()
+                        .includes(lowerCaseQuery)) ||
+                (project.about &&
+                    project.about.toLowerCase().includes(lowerCaseQuery)) ||
+                (project.displayName &&
+                    project.displayName
+                        .toLowerCase()
+                        .includes(lowerCaseQuery)) ||
+                (project.nostrPubKey &&
+                    project.nostrPubKey
+                        .toLowerCase()
+                        .includes(lowerCaseQuery)) ||
+                (project.projectIdentifier &&
+                    project.projectIdentifier
+                        .toLowerCase()
+                        .includes(lowerCaseQuery))
+            );
+        });
+
+        this.showCloseSearchButton = this.projects.length > 0;
+
+        this._changeDetectorRef.detectChanges();
+    }
+
+    resetSearch(queryInput: HTMLInputElement): void {
+        queryInput.value = '';
+        this.filterByQuery('');
+        this.showCloseSearchButton = false;
+    }
+
     ngOnDestroy(): void {
         this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();