diff --git a/app/app.css b/app/app.css
index 8e8804679..8bd0517f6 100644
--- a/app/app.css
+++ b/app/app.css
@@ -6,4 +6,5 @@ md-toolbar .md-menu{
 }
 #sidebar-menu__account-types{
 	margin-left: 1rem;
-}
\ No newline at end of file
+}
+
diff --git a/app/app.routes.js b/app/app.routes.js
index 81228a1f6..86a79e506 100644
--- a/app/app.routes.js
+++ b/app/app.routes.js
@@ -104,9 +104,9 @@
                     }
                 })
                 .state('app.profile', {
-                    url: '/charges',
-                    templateUrl: 'src/common/coming-soon.html',
-                    controller: 'ClientCtrl',
+                    url: '/profile',
+                    templateUrl: 'src/profile/profile.html',
+                    controller: 'ProfileViewCtrl',
                     controllerAs: 'vm',
                     data: {
                         title: 'Profile',
diff --git a/app/src/common/main.component.js b/app/src/common/main.component.js
index 52ffa37bc..dd0e14157 100644
--- a/app/src/common/main.component.js
+++ b/app/src/common/main.component.js
@@ -35,7 +35,9 @@
 
         function selectItem(itemName) {
             vm.title = itemName;
-            vm.toggleItemsList();
+            if(itemName!='Profile') {
+                vm.toggleItemsList();
+            }
         }
 
         function getUserData() {
diff --git a/app/src/common/main.html b/app/src/common/main.html
index b25a3b0c1..f97082143 100644
--- a/app/src/common/main.html
+++ b/app/src/common/main.html
@@ -69,6 +69,13 @@ <h1 class="sidenav-title md-title">{{'nav.msg.welcome' | translate}} {{vm.profil
             </div>
         </md-button>
         <md-divider></md-divider>
+        <md-button ng-click="vm.selectItem('Profile')" ui-sref-active="md-warn" ui-sref=".profile"
+                   style="text-align: left;display: block;">
+            <div class="md-tile-content">
+                <i hide-sm hide-md class="material-icons md-18">face</i>{{'Profile'}}
+            </div>
+        </md-button>
+        <md-divider></md-divider>
         <md-button ng-click="vm.selectItem('About Us')" ui-sref-active="md-warn" ui-sref=".aboutus"
                    style="text-align: left;display: block;">
             <div class="md-tile-content">
@@ -98,7 +105,7 @@ <h1 class="sidenav-title md-title">{{'nav.msg.welcome' | translate}} {{vm.profil
             </md-button>
             <md-menu-content width="3">
                 <md-menu-item>
-                    <md-button ng-click="vm.selectItem('Profile');" ui-sref=".profile">
+                    <md-button ng-click="vm.selectItem('Profile')" ui-sref-active="md-warn" ui-sref=".profile">
                         <div layout="row">
                             <p flex>Profile</p>
                         </div>
diff --git a/app/src/profile/profile.components.js b/app/src/profile/profile.components.js
new file mode 100644
index 000000000..d735fb921
--- /dev/null
+++ b/app/src/profile/profile.components.js
@@ -0,0 +1,39 @@
+(function(){
+	'use strict';
+
+		angular.module('selfService')
+			.controller('ProfileViewCtrl', ['$state', '$stateParams', '$filter', 'navService', 'AccountService', ProfileViewCtrl]);
+
+		function ProfileViewCtrl($state, $stateParams, $filter, navService, AccountService) {
+
+		    var vm=this;
+
+		    vm.profileImage = null;
+		    vm.profile = getUserData();
+		    vm.profileAddress = 'N/A';
+
+		    function getClient(clientId) {
+				AccountService.getClient(clientId).get().$promise.then( function (data) {
+					vm.profile = data;
+				})
+        	}
+
+        	function getClientImage(clientId) {
+				AccountService.getClientImage(clientId).then( function (resp) {
+					vm.profileImage = resp.data;
+				}).catch(function(err) {
+					// Not Found Profile image
+					vm.profileImage = 'assets/images/ic_person_black_24px.svg';
+				});
+        	}
+
+        	function getUserData() {
+				AccountService.getClientId().then(function (clientId) {
+					vm.clientId = clientId;
+					getClient(clientId);
+					getClientImage(clientId);
+				});
+        	}
+		}
+
+})();
\ No newline at end of file
diff --git a/app/src/profile/profile.html b/app/src/profile/profile.html
new file mode 100644
index 000000000..1badd1889
--- /dev/null
+++ b/app/src/profile/profile.html
@@ -0,0 +1,100 @@
+<div layout="row" class="md-padding loan-account-detail-cont" flex>
+
+    <div container layout="row" flex>
+     <div layout="row" flex-gt-md="40">
+
+            <md-card class="summary-card">
+                 <img ng-src="{{vm.profileImage}}" class="md-media-sm" style="height: 300px" alt="Washed Out">
+                <md-card-title>
+                    <md-card-title-text>
+                        <span class="md-headline">{{vm.profile.displayName}}</span>
+                    </md-card-title-text>
+                </md-card-title>
+
+                <md-divider></md-divider>
+                <br>
+
+                <md-input-container class="md-icon-float md-block">
+                  <label>Name</label>
+                  <md-icon><i  class="material-icons md-24" style="color: #1e88e5">account_circle</i></md-icon>
+                  <input ng-model="vm.profile.displayName" type="text" readonly>
+                </md-input-container>
+                <md-input-container class="md-icon-float md-block">
+                  <label>Mobile Number</label>
+                  <md-icon><i  class="material-icons md-24" style="color: #1e88e5">phone</i></md-icon>
+                  <input ng-model="vm.profile.mobileNo" type="text" readonly>
+                </md-input-container>
+                <md-input-container class="md-icon-float md-block">
+                  <label>Address</label>
+                  <md-icon><i  class="material-icons md-24" style="color: #1e88e5">place</i></md-icon>
+                  <input ng-model="vm.profileAddress" type="text" readonly>
+                </md-input-container>
+                <md-divider></md-divider>
+                <br>
+                <md-input-container class="md-icon-float md-block">
+                  <label>Date of Birth</label>
+                  <md-icon><i  class="material-icons md-24" style="color: #1e88e5">calendar_today</i></md-icon>
+                  <input ng-model="vm.profile.dateOfBirth | DateFormat" type="text" readonly>
+                </md-input-container>
+                <md-input-container class="md-icon-float md-block">
+                  <label>Gender</label>
+                  <md-icon><i  class="material-icons md-24" style="color: #1e88e5">face</i></md-icon>
+                  <input ng-model="vm.profile.gender.name" type="text" readonly>
+                </md-input-container>
+                <br>
+                <br>
+                <md-divider></md-divider>
+                </br>
+                <md-input-container class="md-icon-float md-block">
+                  <label>Activation Date</label>
+                  <md-icon><i  class="material-icons md-24" style="color: #1e88e5">calendar_today</i></md-icon>
+                  <input ng-model="vm.profile.activationDate | DateFormat" type="text" readonly>
+                </md-input-container>
+                </md-card>
+
+
+
+     </div>
+     <div layout="row" flex-gt-md="50">
+
+            <md-card class="summary-card">
+                <br>
+                <md-input-container class="md-icon-float md-block">
+                  <label>First Name</label>
+                  <md-icon></md-icon>
+                  <input ng-model="vm.profile.firstname" type="text" readonly>
+                </md-input-container>
+                <md-input-container class="md-icon-float md-block">
+                  <label>Middle Name</label>
+                  <md-icon></md-icon>
+                  <input ng-model="vm.profile.middlename" type="text" readonly>
+                </md-input-container>
+                <md-input-container class="md-icon-float md-block">
+                  <label>Last Name</label>
+                  <md-icon></md-icon>
+                  <input ng-model="vm.profile.lastname" type="text" readonly>
+                </md-input-container>
+                <md-input-container class="md-block" md-no-float>
+                  <label>Mobile</label>
+                  <md-icon></md-icon>
+                  <input ng-model="vm.profile.mobileNo" type="text" readonly>
+                </md-input-container>
+                <md-input-container class="md-icon-float md-block">
+                  <label>Account Number</label>
+                  <md-icon></md-icon>
+                  <input ng-model="vm.profile.accountNo" type="text" readonly>
+                </md-input-container>
+                <md-input-container class="md-icon-float md-block">
+                  <label>Office Name</label>
+                  <md-icon></md-icon>
+                  <input ng-model="vm.profile.officeName" type="text" readonly>
+                </md-input-container>
+
+            </md-card>
+     </div>
+</div>
+</div>
+    <md-button aria-label="menu" class="md-fab md-fab-bottom-right" style="position: fixed">
+        <i hide-sm hide-md class="material-icons md-24">edit</i>
+    </md-button>
+