diff --git a/src/theme.scss b/src/theme.scss
index c66202a92..472ee55ec 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -1360,6 +1360,87 @@ footer {
     }
 }
 
+// ----------------------------
+// Branding
+// ----------------------------
+
+.branding-avatar {
+    position: relative;
+    cursor: pointer;
+    width: 64px;
+    height: 64px;
+    background-position: center;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    border: 1px solid gray;
+    border-radius: 3px;
+
+    img {
+        display: block;
+        width: 100%;
+        height: 100%;
+    }
+
+    .overlay {
+        position: absolute;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(127, 127, 127 ,0.3);
+        background-image: url('/img/plus.png');
+        background-repeat: no-repeat;
+        background-position: center;
+        transition: all 150ms;
+        opacity: 0;
+
+        &:hover {
+            opacity: 1;
+        }
+    }
+}
+
+.branding-avatar-selector {
+    text-align: center;
+
+    .grid {
+        margin-top: 20px;
+    }
+
+    .preview-avatar {
+        text-align: center;
+    }
+
+    .item {
+        display: inline-block;
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center;
+        width: 64px;
+        height: 64px;
+        margin: 5px;
+        cursor: pointer;
+        opacity: 0.6;
+        transform: scale(1.0);
+        transition: all 150ms;
+
+        &:hover {
+            opacity: 1;
+            transform: scale(1.1);
+        }
+
+        &.add {
+            border-radius: 2px;
+            width: 54px;
+            height: 54px;
+            background-color: $brand-primary;
+            background-image: url('/img/plus.png');
+            background-repeat: no-repeat;
+            background-position: center;
+            background-size: 50%;
+        }
+    }
+}
+
 // ----------------------------
 // Tag Input
 // ----------------------------
diff --git a/src/views/branding.html b/src/views/branding.html
index d95579fb6..63c3f6393 100644
--- a/src/views/branding.html
+++ b/src/views/branding.html
@@ -5,7 +5,7 @@
           <div class="modal-header">
               <h4 class="modal-title">Choose Cloudron Avatar</h4>
           </div>
-          <div class="modal-body settings-avatar-selector">
+          <div class="modal-body branding-avatar-selector">
               <img id="previewAvatar" width="128" height="128" ng-src="{{ avatarChange.avatarUrl() }}"/>
               <input type="file" id="avatarFileInput" style="display: none" accept="image/png"/>
 
@@ -47,7 +47,7 @@
               <div>
                 <label class="control-label">Logo</label>
               </div>
-              <div class="settings-avatar" ng-click="avatarChange.showChangeAvatar()">
+              <div class="branding-avatar" ng-click="avatarChange.showChangeAvatar()">
                 <img ng-src="{{ about.avatarUrl() }}"/>
                 <div class="overlay"></div>
               </div>