diff --git a/src/app/bookmark/bookmark.page.html b/src/app/bookmark/bookmark.page.html
index 70d2c53..2a9af4b 100644
--- a/src/app/bookmark/bookmark.page.html
+++ b/src/app/bookmark/bookmark.page.html
@@ -1,2 +1,10 @@
 <ion-content>
+    
+    <div class="header-bar">
+        <div class="heading-holder">
+            <button (click)="back()"> <ion-icon name="arrow-back"></ion-icon> </button>
+            <h3> Bookmarks </h3>
+        </div>
+    </div>
+
 </ion-content>
diff --git a/src/app/bookmark/bookmark.page.scss b/src/app/bookmark/bookmark.page.scss
index ae3f27b..ba8fecf 100644
--- a/src/app/bookmark/bookmark.page.scss
+++ b/src/app/bookmark/bookmark.page.scss
@@ -1,16 +1,48 @@
-@import '../mall-details/mall-details.page.scss';
-
 .header-bar {
-	position: sticky;
-}
+    background-image: url('../../assets/custom/background-5.svg');
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: left top;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 15px;
+    height: 75px;
+    z-index: 3;
+    top: 0;
+    left: 0;
+    width: 100%;
+    position: sticky;
+    box-shadow: 0px 3px 5px var(--brand-grey);
+
+    .heading-holder {
+        display: flex;
+        align-items: center;
+    }
+
+    button, a {
+        background-color: white;
+        color: var(--brand-blue);
+        font-size: 18px;
+        padding: 5px;
+        border-radius: 50%;
+        height: 30px;
+        width: 30px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
 
-ion-list {
-	ion-item {
-		display: none;
-		margin: 10px auto;
+        &.active {
+            color: white;
+            background-color: var(--brand-blue);
+        }
+    }
 
-		&.show {
-			display: block;
-		}
-	}
-}
+    h3 {
+        font-size: 16px;
+        color: white;
+        letter-spacing: 0.5px;
+        margin-left: 10px;
+        font-weight: 600;
+    }
+}
\ No newline at end of file
diff --git a/src/app/bookmark/bookmark.page.ts b/src/app/bookmark/bookmark.page.ts
index 0949ac6..762c9f2 100644
--- a/src/app/bookmark/bookmark.page.ts
+++ b/src/app/bookmark/bookmark.page.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { Location } from '@angular/common';
+import { MallService } from '../services/mall.service';
 
 @Component({
 	selector: 'app-bookmark',
@@ -12,10 +13,12 @@ export class BookmarkPage implements OnInit {
 
 	constructor(
 		private router: Router,
-		private location: Location,
+        private location: Location,
+        private mallService: MallService
 	) { }
 
 	ngOnInit() {
+        // this.mallService.getBookmarks().then((data) => console.log(data));
 	}
 
 	ionViewDidEnter() {
diff --git a/src/app/services/mall.service.ts b/src/app/services/mall.service.ts
index f792d78..9e2fc58 100644
--- a/src/app/services/mall.service.ts
+++ b/src/app/services/mall.service.ts
@@ -73,5 +73,17 @@ export class MallService {
 		};
 
 		return await this.http.put(URL + '/api/maioraservice/outlet/v1/update/', outletData , httpOptions).toPromise();
-	}
+    }
+    
+    async getBookmarks() {
+        const httpOptions = {
+			headers: new HttpHeaders({
+				'Access-Control-Allow-Origin': '*',
+				'Content-Type': 'application/json',
+				'Authorization': 'Bearer ' + localStorage.access_Token
+			})
+		};
+
+		return await this.http.get(URL + '/api/maioraservice/outlet/v1/is_bookmarked/true/', httpOptions).toPromise();
+    }
 }