diff --git a/src/App.scss b/src/App.scss
index a41140efd6..e8aa58469a 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -430,6 +430,7 @@ nav {
   color: $fallback--faint;
   color: var(--faint, $fallback--faint);
   box-shadow: 0px 0px 4px rgba(0,0,0,.6);
+  box-shadow: var(--topBarShadow);
 }
 
 .fade-enter-active, .fade-leave-active {
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 751b048a46..1c79cab3ea 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -258,6 +258,8 @@
     position: absolute;
     z-index: 1;
     box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
+    // this doesn't match original but i don't care, making it uniform.
+    box-shadow: var(--popupShadow);
     min-width: 75%;
     background: $fallback--bg;
     background: var(--bg, $fallback--bg);
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index d0f7242760..c39aa95b67 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -259,7 +259,7 @@ export default {
       return [...Object.values(this.preview.rules), 'color: var(--text)'].join(';')
     },
     shadowsAvailable () {
-      return Object.keys(this.previewTheme.shadows)
+      return Object.keys(this.previewTheme.shadows).sort()
     },
     currentShadowOverriden: {
       get () {
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 60eec7eaf7..20f54a8417 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -301,6 +301,14 @@ const generateShadows = (input) => {
       color: '#000000',
       alpha: 0.6
     }],
+    topBar: [{
+      x: 0,
+      y: 0,
+      blur: 4,
+      spread: 0,
+      color: '#000000',
+      alpha: 0.6
+    }],
     popup: [{
       x: 2,
       y: 2,