diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index a6de6eb..65555e8 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -10,6 +10,7 @@ const routes: Routes = [
   { path: 'outlet-details', loadChildren: './outlet-details/outlet-details.module#OutletDetailsPageModule' },
   { path: 'cart', loadChildren: './cart/cart.module#CartPageModule' },
   { path: 'profile', loadChildren: './profile/profile.module#ProfilePageModule' },
+  { path: 'bookmark', loadChildren: './bookmark/bookmark.module#BookmarkPageModule' },
 ];
 
 @NgModule({
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 9523830..52424c0 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -17,9 +17,9 @@
             <ion-icon src="assets/custom/001-house.svg"></ion-icon>
             <span> HOME </span>
         </button>
-        <button>
+        <button (click)="navigateTo('bookmark')">
             <ion-icon src="assets/custom/002-bookmark.svg"></ion-icon>
-            <span> BOOKMARKS </span>
+            <span class="smaller"> BOOKMARKS </span>
         </button>
         <button (click)="navigateTo('cart')">
             <ion-icon src="assets/custom/cart.svg"></ion-icon>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index bb5568d..805e540 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -92,18 +92,18 @@
 
         span {
             position: absolute;
-            bottom: -15px;
+            bottom: -13px;
             text-align: center;
             display: block;
             color: white;
             letter-spacing: 0.5px;
             font-weight: bold;
-            font-size: 10px;
+			font-size: 5px;
+			transform: scale(1.8);
             width: 100%;
             left: 0;
-            text-overflow: ellipsis;
             overflow: hidden;
-            white-space: nowrap;
+            white-space: wrap;
         }
 
         &:first-child {
diff --git a/src/app/bookmark/bookmark.module.ts b/src/app/bookmark/bookmark.module.ts
new file mode 100644
index 0000000..a24e654
--- /dev/null
+++ b/src/app/bookmark/bookmark.module.ts
@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { BookmarkPage } from './bookmark.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: BookmarkPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [BookmarkPage]
+})
+export class BookmarkPageModule {}
diff --git a/src/app/bookmark/bookmark.page.html b/src/app/bookmark/bookmark.page.html
new file mode 100644
index 0000000..8762ac0
--- /dev/null
+++ b/src/app/bookmark/bookmark.page.html
@@ -0,0 +1,18 @@
+<ion-content>
+	<section class="header-bar">
+		<button (click)="back()"> <ion-icon name="arrow-back"></ion-icon> </button>
+        <h2> Bookmarks </h2>
+        <button> <ion-icon src="assets/custom/search.svg"></ion-icon> </button>
+    </section>
+
+    <div class="top-bar-holder">
+        <div class="tabs-holder">
+            <button (click)="selected_tab = 'malls'" class="tab" [ngClass]="{'active' : selected_tab === 'malls'}">
+				Malls
+			</button>
+            <button (click)="selected_tab = 'outlets'" class="tab" [ngClass]="{'active' : selected_tab === 'outlets'}">
+				Outlets
+			</button>
+        </div>
+    </div>
+</ion-content>
diff --git a/src/app/bookmark/bookmark.page.scss b/src/app/bookmark/bookmark.page.scss
new file mode 100644
index 0000000..5addf38
--- /dev/null
+++ b/src/app/bookmark/bookmark.page.scss
@@ -0,0 +1,66 @@
+.top-bar-holder {
+    background-image: url('../../assets/custom/background-5.svg');
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: left top;
+    padding-top: 80px;
+}
+
+.header-bar {
+    color: white;
+    display: flex;
+    padding: 20px;
+    align-items: center;
+    background-image: url('../../assets/custom/background-5.svg');
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: left top;
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 2;
+    width: 100%;
+
+    h2 {
+        font-size: 20px;
+        margin: 0 auto 0 10px;
+    }
+
+    button {
+        margin: 0;
+        border-radius: 50%;
+        color: var(--brand-blue);
+        width: 30px;
+        height: 30px;
+        background-color: white;
+        font-size: 14px;
+
+		ion-icon[name="arrow-back"] {
+			font-size: 18px;
+		}
+    }
+}
+
+.tabs-holder {
+    width: 100%;
+    padding: 0 20px 20px;
+    overflow: scroll;
+    white-space: nowrap;
+
+    button {
+        display: inline-block;
+        border-radius: 20px;
+        background-color: transparent;
+        color: white;
+        font-size: 10px;
+        padding: 5px 15px;
+        height: 30px;
+        margin-right: 10px;
+        font-weight: bold;
+
+        &.active {
+            background-color: white;
+            color: var(--brand-blue);
+        }
+    }
+}
diff --git a/src/app/bookmark/bookmark.page.spec.ts b/src/app/bookmark/bookmark.page.spec.ts
new file mode 100644
index 0000000..37c241e
--- /dev/null
+++ b/src/app/bookmark/bookmark.page.spec.ts
@@ -0,0 +1,27 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BookmarkPage } from './bookmark.page';
+
+describe('BookmarkPage', () => {
+  let component: BookmarkPage;
+  let fixture: ComponentFixture<BookmarkPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BookmarkPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BookmarkPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/bookmark/bookmark.page.ts b/src/app/bookmark/bookmark.page.ts
new file mode 100644
index 0000000..fb89a62
--- /dev/null
+++ b/src/app/bookmark/bookmark.page.ts
@@ -0,0 +1,43 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Location } from '@angular/common';
+import { BookmarkService } from '../services/bookmark.service';
+import { IMall } from '../models/mall';
+import { IOutlet } from '../models/outlet';
+
+@Component({
+	selector: 'app-bookmark',
+	templateUrl: './bookmark.page.html',
+	styleUrls: ['./bookmark.page.scss'],
+})
+export class BookmarkPage implements OnInit {
+	selected_tab: string = 'malls';
+	malls: Array<string> = [];
+	outlets: Array<string> = [];
+
+	constructor(
+		private router: Router,
+		private location: Location,
+		private bookmarkService: BookmarkService
+	) { }
+
+	ngOnInit() {
+	}
+
+	ionViewDidEnter() {
+		this.bookmarkService.getMallBookmarks().then((data: Array<string>) => {
+			this.malls = data;
+			console.log(this.malls);
+		});
+
+		this.bookmarkService.getOutletBookmarks().then((data: Array<string>) => {
+			this.outlets = data;
+			console.log(this.outlets);
+		});
+	}
+
+	back() {
+		this.location.back();
+	}
+
+}
diff --git a/src/app/mocks/malls.ts b/src/app/mocks/malls.ts
index b6d12cb..9b828d7 100644
--- a/src/app/mocks/malls.ts
+++ b/src/app/mocks/malls.ts
@@ -5,7 +5,7 @@ export const MALLS: Mall[] = [new Mall({
     id: '0001',
     name: 'Gopalan Arcade Mall',
     address: 'Mysore Road, Bangalore',
-    is_bookmarked: true,
+    is_bookmarked: false,
     is_archived: false,
     image_url: 'https://www.gopalanmall.com/images/mall-arcade-01.jpg',
     description: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',