diff --git a/src/components/ProfileInfo.vue b/src/components/ProfileInfo.vue
index 7b5b2ab7..7fe1c2a4 100644
--- a/src/components/ProfileInfo.vue
+++ b/src/components/ProfileInfo.vue
@@ -23,9 +23,9 @@
 <template>
 	<div class="user-profile" v-if="uid && accountInfo">
 		<div class="user-profile--info">
-			<avatar :user="profileInfo.uid" :displayName="displayName" :size="128" />
-			<h2 v-if="accountInfo.displayname">{{accountInfo.displayname.value}}</h2>
-			<p>{{accountInfo.cloudId}}</p>
+			<avatar :user="uid" :displayName="displayName" :size="128" />
+			<h2>{{ displayName }}</h2>
+			<p>{{ accountInfo.cloudId }}</p>
 			<p v-if="accountInfo.website">Website: <a :href="accountInfo.website.value">{{accountInfo.website.value}}</a></p>
 
 			<button v-if="!serverData.public" class="primary" @click="follow">Follow this user</button>
@@ -33,14 +33,14 @@
 
 
 		<ul class="user-profile--sections">
-			<li id="social-timeline" class="">
-				<a href="#" class="icon-category-monitoring">{{ accountInfo.posts }} posts</a>
+			<li>
+				<router-link to="./" class="icon-category-monitoring" >{{ accountInfo.posts }} posts</router-link>
 			</li>
-			<li id="social-timeline" class="">
-				<a href="#" class="icon-category-social">{{ accountInfo.following }} following</a>
+			<li>
+				<router-link to="./following" class="icon-category-social">{{ accountInfo.following }} following</router-link>
 			</li>
-			<li id="social-timeline" class="">
-				<a href="#" class="icon-category-social">{{ accountInfo.followers }} followers</a>
+			<li>
+				<router-link to="./followers" class="icon-category-social">{{ accountInfo.followers }} followers</router-link>
 			</li>
 		</ul>
 	</div>
@@ -71,7 +71,7 @@
 	}
 	.user-profile--sections li a {
 		padding-left: 24px;
-		background-position: 0px center;
+		background-position: 0 center;
 		height: 40px;
 	}
 </style>
@@ -92,20 +92,15 @@
 		},
 		computed: {
 			displayName() {
-				console.log(this.accountInfo);
-				return this.accountInfo.displayname.value || '';
+				if (typeof this.accountInfo.displayname !== 'undefined')
+					return this.accountInfo.displayname.value || '';
+				return this.uid;
 			},
 			serverData: function() {
 				return this.$store.getters.getServerData;
 			},
 			accountInfo: function() {
 				return this.$store.getters.getAccount(this.uid);
-			},
-			profileInfo() {
-				return {
-					uid: this.uid,
-					server: OC.getHost()
-				}
 			}
 		}
 	}
diff --git a/src/router.js b/src/router.js
index 4758068d..005e5d20 100644
--- a/src/router.js
+++ b/src/router.js
@@ -27,6 +27,9 @@ import Router from 'vue-router';
 // Dynamic loading
 const Timeline = () => import('./views/Timeline');
 const Profile = () => import('./views/Profile');
+const ProfileTimeline = () => import('./views/ProfileTimeline');
+const ProfileFollowers = () => import('./views/ProfileFollowers');
+
 Vue.use(Router);
 
 export default new Router({
@@ -38,15 +41,41 @@ export default new Router({
 	routes: [
 		{
 			path: '/:index(index.php/)?apps/social/',
-			component: Timeline,
+			components: {
+				default: Timeline,
+			},
 			props: true,
 			name: 'timeline'
 		},
 		{
 			path: '/:index(index.php/)?apps/social/account/:account',
-			component: Profile,
+			components: {
+				default: Profile,
+			},
 			props: true,
 			name: 'profile',
+			children: [
+				{
+					path: '',
+					components: {
+						details: ProfileTimeline,
+					}
+				},
+				{
+					path: 'followers',
+					components: {
+						default: Profile,
+						details: ProfileFollowers,
+					},
+				},
+				{
+					path: 'following',
+					components: {
+						default: Profile,
+						details: ProfileFollowers,
+					},
+				}
+			]
 		},
 		{
 			path: '/:index(index.php/)?apps/social/:account',
diff --git a/src/views/Profile.vue b/src/views/Profile.vue
index 27215af7..d75ff6d4 100644
--- a/src/views/Profile.vue
+++ b/src/views/Profile.vue
@@ -24,9 +24,7 @@
 	<div class="social__wrapper">
 		<profile-info :uid="uid"></profile-info>
 		<div class="social__container">
-			<div class="social__timeline">
-				<timeline-entry v-for="entry in timeline" :item="entry"></timeline-entry>
-			</div>
+			<router-view name="details"></router-view>
 		</div>
 	</div>
 </template>
@@ -120,7 +118,7 @@
 	import ProfileInfo from './../components/ProfileInfo';
 
 	export default {
-		name: 'Timeline',
+		name: 'Profile',
 		components: {
 			PopoverMenu, AppNavigation, TimelineEntry, Multiselect, Avatar,
 			ProfileInfo
diff --git a/src/views/ProfileFollowers.vue b/src/views/ProfileFollowers.vue
new file mode 100644
index 00000000..a90390b5
--- /dev/null
+++ b/src/views/ProfileFollowers.vue
@@ -0,0 +1,53 @@
+<!--
+  - @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
+  -
+  - @author Julius Härtl <jus@bitgrid.net>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<div class="social__timeline">
+		<ul>
+			<li>User List</li>
+		</ul>
+	</div>
+</template>
+
+<style scoped>
+	.social__timeline {
+		max-width: 700px;
+		margin: 15px auto;
+	}
+</style>
+
+
+<script>
+	import TimelineEntry from './../components/TimelineEntry';
+
+	export default {
+		name: 'ProfileFollowers',
+		components: {
+			TimelineEntry,
+		},
+		computed: {
+			timeline: function() {
+				return this.$store.getters.getTimeline;
+			}
+		}
+	}
+</script>
diff --git a/src/views/ProfileTimeline.vue b/src/views/ProfileTimeline.vue
new file mode 100644
index 00000000..29d79df5
--- /dev/null
+++ b/src/views/ProfileTimeline.vue
@@ -0,0 +1,51 @@
+<!--
+  - @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
+  -
+  - @author Julius Härtl <jus@bitgrid.net>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<div class="social__timeline">
+		<timeline-entry v-for="entry in timeline" :item="entry"></timeline-entry>
+	</div>
+</template>
+
+<style scoped>
+	.social__timeline {
+		max-width: 700px;
+		margin: 15px auto;
+	}
+</style>
+
+
+<script>
+	import TimelineEntry from './../components/TimelineEntry';
+
+	export default {
+		name: 'ProfileTimeline',
+		components: {
+			TimelineEntry,
+		},
+		computed: {
+			timeline: function() {
+				return this.$store.getters.getTimeline;
+			}
+		}
+	}
+</script>