diff --git a/src/components/sidebar.vue b/src/components/sidebar.vue
index b8af8ce..a98f129 100644
--- a/src/components/sidebar.vue
+++ b/src/components/sidebar.vue
@@ -14,27 +14,6 @@
                 </nav>
             </div>
         </div>
-
-        <!-- User Profile -->
-        <div class="user_profile">
-            <a class="trigger">
-                <div class="image"><i class="icon icon-person" aria-hidden="true"></i></div>
-                <div class="text">Hans Zimmer <div class="role">Administrator</div></div>
-                <div class="btn"><i class="icon icon-arrow-up" aria-hidden="true"></i></div>
-            </a>
-            <div class="content">
-                <ul>
-                    <li><a href="#">
-                        <i class="icon icon-color-wand" aria-hidden="true"></i>
-                        <div class="title">Profil anpassen</div>
-                    </a></li>
-                    <li><a href="#">
-                        <i class="icon icon-log-out" aria-hidden="true"></i>
-                        <div class="title">Ausloggen</div>
-                    </a></li>
-                </ul>
-            </div>
-        </div>
     </div>
 </template>
 
@@ -155,54 +134,6 @@
         }
     }
 
-    /*--------------------------------------------------------------
-    # Left Sidebar (User Profile)
-    --------------------------------------------------------------*/
-    .user_profile {
-        position:fixed; bottom:0px; left:0px; right:0px; cursor:pointer; width:230px;
-        &>.trigger {
-            .clearfix();
-            display:block;
-
-            // a {display:block; width:100%; height:100%;}
-
-            .image {float:left; width:45px; height:45px; padding-top:7px; text-align:center;}
-            .image .icon {font-size:22px; color:#FFF;}
-            .image img {width:70%; margin:0 auto; display:block;}
-
-            .text {float:left; line-height:1; color:#FFF; font-size:14px; padding-left:15px; padding-top: 9px;}
-            .text .role {font-size:12px; color:rgba(255,255,255,0.5); display:block; margin-top:0px;}
-
-            &:hover {background:rgba(40,183,141,0.3);}
-
-            .btn {position:absolute; right:0px; top:0px; width:auto; height:auto; padding-top:12px; padding-right:20px;}
-            .btn .icon {color:#FFF; font-size:18px; transition:all 0.3s;}
-        }
-
-        &>.content {
-            display:none; color:#FFF; padding-bottom:30px;
-
-            ul{
-                list-style-type: none;
-
-                li{
-                    padding:0px; line-height:1.2; color:#FFF; position:relative;
-                    .icon {color:#FFF; font-size:20px; text-align:center; position:relative; left:0; float:left; height:45px; width:45px; line-height:45px;}
-                    .navigation_text {position:relative; font-size:14px; display:block; color:#FFF; text-align:left; float:left; padding:0px 10px 0px 15px; width:180px; line-height:45px;}
-                    a {color:#FFF; display:block; height:45px;}
-                    &:after {clear:both; content:""; display:block;}
-                    &:hover {background:rgba(40,183,141,0.3);}
-                }
-            }
-        }
-
-        &.open {
-            background:rgba(40,183,141,0.3);
-            &>.trigger{background:rgba(40,183,141,0.5);}
-            .icon-arrow-up{transform: rotate(180deg);}
-        }
-    }
-
     @media(max-width: @screen-xs-max) {
         .sidebar {
             left:inherit; position:relative; width:100%; top:0px; margin-bottom:30px;
diff --git a/src/components/topbar.vue b/src/components/topbar.vue
index 8af8a22..3dac660 100644
--- a/src/components/topbar.vue
+++ b/src/components/topbar.vue
@@ -2,12 +2,49 @@
 	<div class="topbar">
 	    <div class="logo"><a href="#"><img src="assets/images/cms_logo.png" alt=""></a></div>
 	    <div class="name">Meine Website</div>
+
+        <!-- User Profile -->
+        <div class="user_profile" ref="user_profile">
+            <a class="trigger" @click.prevent="toggleMenu">
+                <div class="image"><i class="icon icon-user" aria-hidden="true"></i></div>
+                <div class="text">Hans Zimmer <div class="role">Administrator</div></div>
+                <div class="trigger_btn"><i class="icon icon-arrow-down" aria-hidden="true"></i></div>
+            </a>
+            <nav class="user_menu">
+                <ul>
+                    <li><a href="#">
+                        <i class="icon icon-color-wand" aria-hidden="true"></i>
+                        <div class="title">Profil anpassen</div>
+                    </a></li>
+                    <li><a href="#">
+                        <i class="icon icon-log-out" aria-hidden="true"></i>
+                        <div class="title">Logout</div>
+                    </a></li>
+                </ul>
+            </nav>
+        </div>
 	</div>
 </template>
 
+<script>
+export default {
+    name: "Topbar",
+    methods: {
+        toggleMenu() {
+            this.$refs.user_profile.classList.toggle("open");
+        }
+    }
+}
+</script>
+
 <style lang="less">
 	@import "../mixins.less";
 
+	@barHeight: 40px;
+
+    /*--------------------------------------------------------------
+    # Topbar (Sitename)
+    --------------------------------------------------------------*/
 	.topbar {
 		.clearfix();
 		position: fixed;
@@ -16,13 +53,13 @@
 		left: 0px;
 		background: @cms_bg_light;
 		color: white;
-		height: 40px;
+		height: @barHeight;
 		z-index: 1500;
 
 		&>.logo {
 			display: block;
 			width: 70px;
-			height: 40px;
+			height:  @barHeight;
 			float: left;
 			position: relative;
 
@@ -48,33 +85,110 @@
         &>.name {
             float: left;
             width: auto;
-            line-height: 40px;
+            line-height: @barHeight;
             padding-left: 15px;
         }
 
-        &>.navbutton {
+        // &>.navbutton {
+        //     display: block;
+        //     float: left;
+        //     width: auto;
+        //     height: 100%;
+        //     font-size: 22px;
+        //     margin-left: 40px;
+        //     height: @barHeight;
+        //     width: 40px;
+        //     padding-top: 4px;
+        //     cursor: pointer;
+        //     text-align: center;
+        //     color: white;
+
+        //     &:hover {
+        //         background: fade(@cms_brand_primary, 30%);
+        //     }
+        // }
+	}
+
+    /*--------------------------------------------------------------
+    # Topbar (User Profile)
+    --------------------------------------------------------------*/
+    .user_profile {
+        float: right;
+
+        &>.trigger {
+            .clearfix();
             display: block;
-            float: left;
-            width: auto;
-            height: 100%;
-            font-size: 22px;
-            margin-left: 40px;
-            height: 40px;
-            width: 40px;
-            padding-top: 4px;
-            cursor: pointer;
-            text-align: center;
+            padding: 4px 10px;
+            font-size: 0;
             color: white;
 
             &:hover {
+                cursor: pointer;
                 background: fade(@cms_brand_primary, 30%);
             }
-        }
-	}
-</style>
 
-<script>
-export default {
-    name: "Topbar"
-}
-</script>
\ No newline at end of file
+            .icon{
+                font-size: 22px;
+            }
+
+            .image, .text, .trigger_btn{
+                float: left;
+            }
+
+            div+div{
+                margin-left: 10px;
+            }
+
+            .image {
+                max-height: @barHeight - 8px;
+                img{
+                    width:70%; margin:0 auto; display:block;
+                }
+            }
+
+            .text {
+                font-size: 12px;
+
+                .role{
+                    display: block;
+                    font-size: 11px;
+                    color: fade(white, 50%);
+                }
+            }
+        }
+
+        .user_menu {
+            display: none;
+            background: @cms_brand_primary;
+
+            ul{
+                list-style-type: none;
+
+                li{
+                    .icon {
+                        float:left;
+                        width: 45px;
+                        line-height:45px;
+                        text-align: center;
+                        font-size: 20px;
+                    }
+                    .title {
+                        float: left;
+                        font-size: 14px;
+                        line-height: 45px;
+                        padding: 0 10px;
+                    }
+                    a {color:#FFF; display:block; height:45px;}
+                    &:after {clear:both; content:""; display:block;}
+                    &:hover {background:rgba(40,183,141,0.3);}
+                }
+            }
+        }
+
+        &.open {
+            .user_menu{display: block;}
+            &>.trigger{background: rgba(40, 183, 141, 0.5);}
+            .trigger_btn .icon:before{transform: rotate(180deg);}
+        }
+    }
+</style>
\ No newline at end of file