diff --git a/webapp/app.js b/webapp/app.js
index 56016b0..b52cf35 100644
--- a/webapp/app.js
+++ b/webapp/app.js
@@ -12,7 +12,7 @@ angular.module('app', [
   'app.login',
   'app.main',
   'app.newmodel',
-  'app.profile'
+  'app.user'
 ]).
 config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
     $locationProvider.hashPrefix('!');
diff --git a/webapp/css/own.css b/webapp/css/own.css
index e3b46ad..614ac60 100644
--- a/webapp/css/own.css
+++ b/webapp/css/own.css
@@ -1,5 +1,40 @@
 .o_nav {
-    background: #ffffff!important;
-    color: #000000!important;
-    /*border-bottom: 2px solid #4DD0E1!important;*/
+  background: #ffffff !important;
+  color: #000000 !important;
+  /*border-bottom: 2px solid #4DD0E1!important;*/
+}
+
+body {
+  background: #f5f8fa;
+}
+
+.o_userProfileBackground {
+  min-height: 30% !important;
+  width: 100%;
+  height: 150px;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  background-size: cover;
+  -o-background-size: cover;
+  background-position: center;
+  background-image: url('../img/background01.png');
+  text-align: center;
+  /*color: white;*/
+  /* Create the parallax scrolling effect */
+  /*background-attachment: fixed;*/
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  color: #ffffff;
+}
+
+.o_userImgCircular {
+  margin-top: -100px;
+  margin-left: 25%;
+  background: #ffffff;
+  width: 50%;
+  border: 4px #ffffff solid;
+  border-radius: 150px;
+  -webkit-border-radius: 150px;
+  -moz-border-radius: 150px;
 }
diff --git a/webapp/img/background01.png b/webapp/img/background01.png
new file mode 100755
index 0000000..2ae41b5
Binary files /dev/null and b/webapp/img/background01.png differ
diff --git a/webapp/index.html b/webapp/index.html
index ed820ff..51be385 100644
--- a/webapp/index.html
+++ b/webapp/index.html
@@ -24,7 +24,7 @@
 
 <body ng-app="webapp">
     <div ng-include="'views/navbar.html'"></div>
-    <br><br><br><br>
+    <br>
     <div ng-view></div>
 
 
@@ -61,7 +61,7 @@ Works for both browser and electron with the same code -->
     <script src="views/login/login.js"></script>
     <script src="views/main/main.js"></script>
     <script src="views/newmodel/newmodel.js"></script>
-    <script src="views/profile/profile.js"></script>
+    <script src="views/user/user.js"></script>
 
 
 <!-- ELECTRON
diff --git a/webapp/views/main/main.html b/webapp/views/main/main.html
index 3acdf08..5e651fe 100755
--- a/webapp/views/main/main.html
+++ b/webapp/views/main/main.html
@@ -2,7 +2,9 @@
   <div class="row">
     <div class="col-sm-3">
       <div class="card" style="width: 18rem;">
-        <img class="card-img-top" ng-src="http://localhost:8080/ipfs/QmUE6hhNsyUA5emj2dviVDNYK7mSbPeZmRKeCYthmtemeA" alt="Card image cap">
+        <a ng-href="#!/user">
+          <img class="card-img-top" ng-src="http://localhost:8080/ipfs/QmUE6hhNsyUA5emj2dviVDNYK7mSbPeZmRKeCYthmtemeA" alt="Card image cap">
+        </a>
         <div class="card-body">
           <h5 class="card-title">Post1</h5>
           <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
diff --git a/webapp/views/navbar.html b/webapp/views/navbar.html
index da1123a..a1d04aa 100755
--- a/webapp/views/navbar.html
+++ b/webapp/views/navbar.html
@@ -1,5 +1,5 @@
 <div ng-controller="NavbarCtrl">
-  <nav class="navbar navbar-expand-lg navbar-light bg-light">
+  <nav class="navbar navbar-expand-lg navbar-dark c_blue500">
     <a class="navbar-brand" href="#">
       <i title="Server" class="fa fa-cube fa-1x"></i> decentralized-blogging-platform
     </a>
@@ -18,7 +18,6 @@
       </ul>
       <form class="form-inline my-2 my-lg-0">
         <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
-        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
       </form>
       <ul class="navbar-nav" ng-show="user">
         <li class="nav-item">
diff --git a/webapp/views/profile/profile.html b/webapp/views/profile/profile.html
deleted file mode 100644
index fd95768..0000000
--- a/webapp/views/profile/profile.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<div class="container">
-  <div class="row">
-    <div class="col-sm-4">
-      <div ng-include="'views/user_template.html'"></div>
-    </div>
-    <div class="col-sm-8">
-      <div class="card">
-        <table class="table table-striped table-hover ">
-          <thead>
-            <tr>
-              <th>#</th>
-              <th>Title</th>
-              <th>Description</th>
-              <th>Accuracy</th>
-              <th>Rating</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr ng-repeat="model in user.models">
-              <td>1</td>
-              <td>{{model.title}}</td>
-              <td>{{model.description}}</td>
-              <td>{{model.accuracy}}</td>
-              <td>{{model.rating}}</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/webapp/views/profile/profile.js b/webapp/views/profile/profile.js
deleted file mode 100644
index 08d681c..0000000
--- a/webapp/views/profile/profile.js
+++ /dev/null
@@ -1,24 +0,0 @@
-'use strict';
-
-angular.module('app.profile', ['ngRoute'])
-
-    .config(['$routeProvider', function($routeProvider) {
-        $routeProvider.when('/profile', {
-            templateUrl: 'views/profile/profile.html',
-            controller: 'ProfileCtrl'
-        });
-    }])
-
-    .controller('ProfileCtrl', function($scope, $rootScope, $http) {
-
-        $http.get(clienturl + 'user')
-            .then(function(data) {
-                console.log('data success');
-                console.log(data);
-                $scope.user = data.data;
-                localStorage.setItem("ai_user", JSON.stringify($scope.user));
-
-            }, function(data) {
-                console.log('no user');
-            });
-    });
diff --git a/webapp/views/user/user.html b/webapp/views/user/user.html
new file mode 100644
index 0000000..ff98b2f
--- /dev/null
+++ b/webapp/views/user/user.html
@@ -0,0 +1,85 @@
+<div class="container">
+  <div class="row">
+    <div class="col-sm-3">
+      <div class="card">
+        <div class="o_userProfileBackground">
+        </div>
+        <div class="card-body">
+          <img class="o_userImgCircular" ng-src="https://www.eyerys.com/sites/default/files/mark_zuckerberg.jpg" />
+          <h4>
+                {{user.name}} {{user.lastname}}
+            </h4>
+          <p>{{user.description}}</p>
+          <p>
+            <a ng-href="#!/userLikes/{{user._id}}">
+                14 followers
+            </a> |
+            <a ng-href="#!/userLikes/{{user._id}}">
+                20 following
+            </a>
+          </p>
+        </div>
+      </div>
+      <br>
+      <div class="card">
+        <div class="card-body">
+          <b>About</b>
+          <p>
+            Twitter <a ng-href="https://twitter.com/{{user.twitter}}" target="_blank">{{user.twitter}}</a>
+          </p>
+          <p>
+            Github <a ng-href="https://github.com/{{user.github}}" target="_blank">{{user.github}}</a>
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="col-sm-6">
+      <div ng-repeat="post in user.posts">
+        <div class="card">
+          <div class="card-body">
+            <h5 class="card-title">{{post.title}}</h5>
+            <h6 class="card-subtitle mb-2 text-muted">{{post.subtitle}}</h6>
+            <img ng-src="{{post.img}}" class="img-fluid" />
+            <p class="card-text">{{post.content}}</p>
+            <div class="pull-right">
+              <i title="Server" class="fa fa-heart ct_red300 fa-1x"></i> 37
+            </div>
+          </div>
+        </div>
+        <br>
+      </div>
+    </div>
+    <div class="col-sm-3">
+      <div class="card">
+        <div class="card-body">
+          <b>Discover</b>
+          <p>
+            bla bla bla bla bla
+          </p>
+          <p>
+            bla bla bla bla bla
+          </p>
+        </div>
+      </div>
+      <br>
+      <div class="card">
+        <div class="card-body">
+          <b>Featured posts</b>
+        </div>
+        <div ng-repeat="post in featured_posts">
+          <div class="card-body">
+            <h5 class="card-title">{{post.title}}</h5>
+            <h6 class="card-subtitle mb-2 text-muted">{{post.subtitle}}</h6>
+            <img ng-src="{{post.img}}" class="img-fluid" />
+            <p class="card-text">{{post.content}}</p>
+            <div class="pull-right">
+              <i title="Server" class="fa fa-heart ct_red300 fa-1x"></i> 37
+            </div>
+          </div>
+          <hr>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+</div>
diff --git a/webapp/views/user/user.js b/webapp/views/user/user.js
new file mode 100644
index 0000000..bbb6bef
--- /dev/null
+++ b/webapp/views/user/user.js
@@ -0,0 +1,59 @@
+'use strict';
+
+angular.module('app.user', ['ngRoute'])
+
+    .config(['$routeProvider', function($routeProvider) {
+        $routeProvider.when('/user', {
+            templateUrl: 'views/user/user.html',
+            controller: 'UserCtrl'
+        });
+    }])
+
+    .controller('UserCtrl', function($scope, $rootScope, $http) {
+
+        /*$http.get(apiurl + 'user/' + )
+            .then(function(data) {
+                console.log('data success');
+                console.log(data);
+                $scope.user = data.data;
+            }, function(data) {
+                console.log('no user');
+            });*/
+            //fake data
+          $scope.user = {
+            username: "mark_zuckerberg",
+            name: "Mark",
+            lastname: "Zuckerberg",
+            description: "Hi all, I'm here to write decentralized blog posts.",
+            twitter: "arnaucode",
+            github: "arnaucode",
+            posts: [
+              {
+                title: "This is the second post",
+                subtitle: "this is the subtitle of the second post",
+                img: "https://cdn-images-1.medium.com/fit/t/800/240/1*4_E6m7J0112DBi1Lmdniiw.png",
+                content: "Some quick example text to build on the card title and make up the bulk of the card's content."
+              },
+              {
+              title: "This is the first post",
+              subtitle: "this is the subtitle of the first post",
+              img: "https://bootstrap-themes.github.io/application/assets/img/unsplash_1.jpg",
+              content: "Some quick example text to build on the card title and make up the bulk of the card's content."
+            }
+            ]
+          };
+          $scope.featured_posts= [
+            {
+              title: "Thinking about python development",
+              subtitle: "this is the subtitle of the second post",
+              img: "https://cdn.static-economist.com/sites/default/files/images/2015/09/blogs/economist-explains/code2.png",
+              content: "Some quick example text to build on the card title and make up the bulk of the card's content."
+            },
+            {
+            title: "Thinking about G",
+            subtitle: "this is the subtitle of the first post",
+            img: "https://cdn-images-1.medium.com/max/1600/1*RNkyx-Zq7w61eR74nMYgnA.jpeg",
+            content: "Some quick example text to build on the card title and make up the bulk of the card's content."
+          }
+          ]
+    });
