diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index b0e1d8e..6165640 100644
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -1,3 +1,9 @@
-<h1>Welcome to {{title}}!</h1>
-<i class="fa-brands fa-airbnb"></i>
-<h2>test</h2>
\ No newline at end of file
+<app-nav-bar></app-nav-bar>
+<div class="container" style="margin-top: 140px;">
+    <h1>Welcome to {{title}}</h1>
+    <ul>
+        <li class="list-unstyled" *ngFor="let product of products">
+            {{product.name}}
+        </li>
+    </ul>
+</div>
\ No newline at end of file
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index 3af1f57..1fef4b2 100644
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -1,10 +1,26 @@
-import { Component } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { IPagination } from './models/pagination';
+import { IProduct } from './models/product';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   title = 'E-Commerce';
-}
+  products: IProduct[];
+
+  constructor(private http: HttpClient) {}
+
+  ngOnInit(): void {
+    this.http.get('https://localhost:5001/api/products?pageSize=50').subscribe(
+      {
+        next: (response: IPagination) => { this.products = response.data; },
+        error: (e: any) => { console.log(e); },
+        complete: () => { console.log('complete'); }
+      }
+    );
+  }
+}
\ No newline at end of file
diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts
index c92602a..11749b0 100644
--- a/client/src/app/app.module.ts
+++ b/client/src/app/app.module.ts
@@ -1,18 +1,22 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { HttpClientModule } from '@angular/common/http';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NavBarComponent } from './nav-bar/nav-bar.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    NavBarComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     BrowserAnimationsModule,
+    HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/client/src/app/models/pagination.ts b/client/src/app/models/pagination.ts
new file mode 100644
index 0000000..dc43aac
--- /dev/null
+++ b/client/src/app/models/pagination.ts
@@ -0,0 +1,8 @@
+import { IProduct } from "./product"
+
+export interface IPagination {
+    pageIndex: number
+    pageSize: number
+    count: number
+    data: IProduct[]
+  }
\ No newline at end of file
diff --git a/client/src/app/models/product.ts b/client/src/app/models/product.ts
new file mode 100644
index 0000000..a49d31c
--- /dev/null
+++ b/client/src/app/models/product.ts
@@ -0,0 +1,9 @@
+export interface IProduct {
+    id: number
+    name: string
+    description: string
+    price: number
+    pictureUrl: string
+    productType: string
+    productBrand: string
+  }  
\ No newline at end of file
diff --git a/client/src/app/nav-bar/nav-bar.component.html b/client/src/app/nav-bar/nav-bar.component.html
new file mode 100644
index 0000000..f7e16f4
--- /dev/null
+++ b/client/src/app/nav-bar/nav-bar.component.html
@@ -0,0 +1,17 @@
+<div class="d-flex flex-column flex-md-row align-items-center justify-content-between p-3 px-md-4 mb-3 bg-white border-bottom shadown-sm fixed-top">
+    <img src="/assets/images/logo.png" style="max-height: 70px;" alt="logo">
+    <nav class="me-3 my-md-0 mr-md-3 text-uppercase" style="font-size: larger;">
+        <a class="me-3 py-2 text-dark" href="#">Home</a>
+        <a class="me-3 py-2 text-dark" href="#">Shop</a>
+        <a class="me-3 py-2 text-dark" href="#">Contact</a>
+    </nav>
+    <div class="d-flex align-items-center">
+        <a class="position-relative">
+            <i class="fa fa-shopping-cart fa-2x me-3 text-dark"></i>
+            <div class="cart-no">5</div>
+        </a>
+        <a class="btn btn-outline-secondary me-3" href="#">Login</a>
+        <a class="btn btn-outline-secondary me-3" href="#">Sign up</a>
+    </div>
+
+</div>
\ No newline at end of file
diff --git a/client/src/app/nav-bar/nav-bar.component.scss b/client/src/app/nav-bar/nav-bar.component.scss
new file mode 100644
index 0000000..e61ee7d
--- /dev/null
+++ b/client/src/app/nav-bar/nav-bar.component.scss
@@ -0,0 +1,12 @@
+.cart-no {
+    position: absolute;
+    min-height: 25px;
+    min-width: 25px;
+    border-radius: 50%;
+    font-size: 1em;
+    background: blue;
+    color: white;
+    text-align: center;
+    top: -12px;
+    right: 5px;
+}
\ No newline at end of file
diff --git a/client/src/app/nav-bar/nav-bar.component.ts b/client/src/app/nav-bar/nav-bar.component.ts
new file mode 100644
index 0000000..6082d5b
--- /dev/null
+++ b/client/src/app/nav-bar/nav-bar.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-nav-bar',
+  templateUrl: './nav-bar.component.html',
+  styleUrls: ['./nav-bar.component.scss']
+})
+export class NavBarComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/client/src/assets/images/hero1.jpg b/client/src/assets/images/hero1.jpg
new file mode 100644
index 0000000..c7972f5
Binary files /dev/null and b/client/src/assets/images/hero1.jpg differ
diff --git a/client/src/assets/images/hero2.jpg b/client/src/assets/images/hero2.jpg
new file mode 100644
index 0000000..5a3c1cb
Binary files /dev/null and b/client/src/assets/images/hero2.jpg differ
diff --git a/client/src/assets/images/hero3.jpg b/client/src/assets/images/hero3.jpg
new file mode 100644
index 0000000..4e631c1
Binary files /dev/null and b/client/src/assets/images/hero3.jpg differ
diff --git a/client/src/assets/images/logo.png b/client/src/assets/images/logo.png
new file mode 100644
index 0000000..6a7d0ca
Binary files /dev/null and b/client/src/assets/images/logo.png differ
diff --git a/client/src/assets/images/placeholder.png b/client/src/assets/images/placeholder.png
new file mode 100644
index 0000000..862e166
Binary files /dev/null and b/client/src/assets/images/placeholder.png differ