diff --git a/website/client/components/creatorIntro.vue b/website/client/components/creatorIntro.vue
index a193cf2348..3b0c20cbb8 100644
--- a/website/client/components/creatorIntro.vue
+++ b/website/client/components/creatorIntro.vue
@@ -538,12 +538,6 @@ b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true
     padding-bottom: 2em;
   }
 
-  .option.locked {
-    border-radius: 2px;
-    background-color: #ffffff;
-    box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
-  }
-
   .option.hide {
     display: none !important;
   }
@@ -554,8 +548,17 @@ b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true
     padding: .5em;
     height: 90px;
     width: 90px;
-    margin-bottom: .5em;
-    margin-right: .5em;
+    margin: 1em .5em .5em 0;
+    border: 4px solid $gray-700;
+    border-radius: 4px;
+
+    &.locked {
+      border: none;
+      border-radius: 2px;
+      background-color: #ffffff;
+      box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
+      margin-top: 0;
+    }
 
     .sprite.customize-option {
       margin: 0 auto;
@@ -587,9 +590,7 @@ b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true
   }
 
   .option.active {
-    border: 4px solid $purple-200;
-    border-radius: 4px;
-    margin-top: 1em;
+    border-color: $purple-200;
   }
 
   .option:hover {