diff --git a/src/main/java/org/codiki/posts/PostController.java b/src/main/java/org/codiki/posts/PostController.java
index d6b5497..9ca880c 100755
--- a/src/main/java/org/codiki/posts/PostController.java
+++ b/src/main/java/org/codiki/posts/PostController.java
@@ -90,7 +90,7 @@ public class PostController {
 
 	@JsonView(View.PostDTO.class)
 	@GetMapping("/search/{searchCriteria}")
-	public List<PostDTO> search(@PathVariable("searchCriteria") final String pSearchCriteria) {
+	public List<Post> search(@PathVariable("searchCriteria") final String pSearchCriteria) {
 		return postService.search(pSearchCriteria);
 	}
 
diff --git a/src/main/java/org/codiki/posts/PostService.java b/src/main/java/org/codiki/posts/PostService.java
index e85506c..1c67f49 100755
--- a/src/main/java/org/codiki/posts/PostService.java
+++ b/src/main/java/org/codiki/posts/PostService.java
@@ -115,7 +115,7 @@ public class PostService {
 		}
 	}
 
-	public List<PostDTO> search(String pSearchCriteria) {
+	public List<Post> search(String pSearchCriteria) {
 		final String[] criteriasArray = pSearchCriteria.split(" ");
 		
 		final List<SearchEntity> listSearchEntities = new LinkedList<>();
@@ -125,7 +125,7 @@ public class PostService {
 		});
 		Collections.sort(listSearchEntities, (e1, e2) -> e2.getScore() - e1.getScore());
 		
-		return listSearchEntities.stream().map(SearchEntity::getPost).map(PostDTO::new).collect(Collectors.toList());
+		return listSearchEntities.stream().map(SearchEntity::getPost).collect(Collectors.toList());
 	}
 	
 	void calculateScore(final SearchEntity searchPost, final String[] pCriteriasArray) {
diff --git a/src/main/ts-v7/src/app/app.module.ts b/src/main/ts-v7/src/app/app.module.ts
index 72e45c0..2cfd654 100755
--- a/src/main/ts-v7/src/app/app.module.ts
+++ b/src/main/ts-v7/src/app/app.module.ts
@@ -34,10 +34,12 @@ import { NotFoundComponent } from './not-found/not-found.component';
 import { ByCategoryComponent } from './posts/byCategory/by-category.component';
 import { CreateUpdatePostComponent } from './posts/create-update/create-update-post.component';
 import { VersionRevisionComponent } from './version-revisions/version-revisions.component';
+import { SearchComponent } from './search/search.component';
 
 // Reusable components
 import { PostCardComponent } from './core/post-card/post-card.component';
 import { SpinnerComponent } from './core/directives/spinner/spinner.component';
+import { SearchBarComponent } from './core/directives/search-bar/search-bar.component';
 
 // Services
 import { HeaderService } from './header/header.service';
@@ -52,6 +54,7 @@ import { PostService } from './posts/post.service';
 import { ByCategoryService } from './posts/byCategory/by-category.service';
 import { CreateUpdatePostService } from './posts/create-update/create-update-post.service';
 import { VersionRevisionService } from './version-revisions/version-revisions.service';
+import { SearchService } from './search/search.service';
 
 @NgModule({
 	declarations: [
@@ -72,7 +75,9 @@ import { VersionRevisionService } from './version-revisions/version-revisions.se
 		NotFoundComponent,
 		ByCategoryComponent,
 		CreateUpdatePostComponent,
-		VersionRevisionComponent
+		VersionRevisionComponent,
+		SearchComponent,
+		SearchBarComponent
 	],
 	imports: [
 		BrowserModule,
@@ -82,8 +87,8 @@ import { VersionRevisionService } from './version-revisions/version-revisions.se
 		MDBBootstrapModule.forRoot(),
 		RouterModule.forRoot(
 			appRoutes,
-			// { enableTracing: true } // Enabling tracing
-			{ onSameUrlNavigation: 'reload' }
+			// { enableTracing: true }, // Enabling tracing
+			{ onSameUrlNavigation: 'reload'}
 		)
 	],
 	providers: [
@@ -100,6 +105,7 @@ import { VersionRevisionService } from './version-revisions/version-revisions.se
 		ByCategoryService,
 		CreateUpdatePostService,
 		VersionRevisionService,
+		SearchService,
 		{ provide: HTTP_INTERCEPTORS, useClass: UnauthorizedInterceptor, multi: true }
 	],
 	bootstrap: [AppComponent]
diff --git a/src/main/ts-v7/src/app/app.routing.ts b/src/main/ts-v7/src/app/app.routing.ts
index 418462f..4504b6c 100755
--- a/src/main/ts-v7/src/app/app.routing.ts
+++ b/src/main/ts-v7/src/app/app.routing.ts
@@ -14,6 +14,7 @@ import { PostComponent } from './posts/post.component';
 import { ByCategoryComponent } from './posts/byCategory/by-category.component';
 import { CreateUpdatePostComponent } from './posts/create-update/create-update-post.component';
 import { VersionRevisionComponent } from './version-revisions/version-revisions.component';
+import { SearchComponent } from './search/search.component';
 
 export const appRoutes: Routes = [
 	{ path: 'login', component: LoginComponent },
@@ -24,6 +25,7 @@ export const appRoutes: Routes = [
 	{ path: 'posts/update/:postKey', component: CreateUpdatePostComponent, canActivate: [AuthGuard] },
 	{ path: 'posts/:postKey', component: PostComponent },
 	{ path: 'posts/byCategory/:categoryId', component: ByCategoryComponent},
+	{ path: 'posts/search/:searchCriteria', component: SearchComponent },
 	{ path: 'myPosts', component: MyPostsComponent, canActivate: [AuthGuard] },
 	{ path: 'accountSettings', component: AccountSettingsComponent, canActivate: [AuthGuard] },
 	{ path: 'changePassword', component: ChangePasswordComponent, canActivate: [AuthGuard] },
diff --git a/src/main/ts-v7/src/app/core/directives/search-bar/search-bar.component.ts b/src/main/ts-v7/src/app/core/directives/search-bar/search-bar.component.ts
index 95ac79e..5fde5b4 100755
--- a/src/main/ts-v7/src/app/core/directives/search-bar/search-bar.component.ts
+++ b/src/main/ts-v7/src/app/core/directives/search-bar/search-bar.component.ts
@@ -27,9 +27,10 @@ import { Router } from '@angular/router';
 			color: white;
 			background-color: #5c6bc0;
 			border-radius: 2px;
-			border-style: unset;			
+			border-style: unset;
 			padding-left: 10px;
 			padding-right: 35px;
+			transition: all 0.2s ease-in;
 		}
 
 		input#search:focus {
diff --git a/src/main/ts-v7/src/app/header/header.component.html b/src/main/ts-v7/src/app/header/header.component.html
index 7a61d57..ae6b5e5 100755
--- a/src/main/ts-v7/src/app/header/header.component.html
+++ b/src/main/ts-v7/src/app/header/header.component.html
@@ -8,7 +8,7 @@
 	</logo>
 	<links>
 		<div class="navbar-nav ml-auto nav-flex-icons">
-			<!-- <app-search-bar></app-search-bar> -->
+			<app-search-bar></app-search-bar>
 		</div>
 		<ul class="navbar-nav ml-auto nav-flex-icons" style="margin-left: 0 !important;">
 			<li class="nav-item" *ngIf="!isAuthenticated()">
diff --git a/src/main/ts-v7/src/app/search/search.component.ts b/src/main/ts-v7/src/app/search/search.component.ts
new file mode 100644
index 0000000..e869198
--- /dev/null
+++ b/src/main/ts-v7/src/app/search/search.component.ts
@@ -0,0 +1,36 @@
+import { Component, OnInit } from '@angular/core';
+import { Post } from '../core/entities';
+import { SearchService } from './search.service';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+	selector: 'app-search',
+	template: `
+		<div>
+			<h1>Résultats de la recherche</h1>
+			<app-spinner *ngIf="!listArticle"></app-spinner>
+			<div *ngIf="listArticle" class="col-lg-8 offset-lg-2">
+				<app-post-card *ngFor="let post of listArticle" [post]="post"></app-post-card>
+			</div>
+		</div>
+	`
+})
+export class SearchComponent implements OnInit {
+	searchLoading: boolean;
+	listArticle: Array<Post>;
+
+	constructor(
+		private activatedRoute: ActivatedRoute,
+		private searchService: SearchService
+	) {
+		this.searchLoading = true;
+	}
+
+	ngOnInit(): void {
+		this.searchService.search(this.activatedRoute.snapshot.paramMap.get('searchCriteria'))
+				.subscribe(listArticle => {
+			this.listArticle = listArticle;
+			this.searchLoading = false;
+		});
+	}
+}
diff --git a/src/main/ts-v7/src/app/search/search.service.ts b/src/main/ts-v7/src/app/search/search.service.ts
new file mode 100644
index 0000000..4006df5
--- /dev/null
+++ b/src/main/ts-v7/src/app/search/search.service.ts
@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { Post } from '../core/entities';
+
+@Injectable()
+export class SearchService {
+
+	constructor(private http: HttpClient) {}
+
+	search(searchCriteria: string): Observable<Array<Post>> {
+		return this.http.get<Array<Post>>(`/api/posts/search/${searchCriteria}`);
+	}
+}