diff --git a/css/leptonChrome.css b/css/leptonChrome.css
index 6e2eb2c..ddc3986 100644
--- a/css/leptonChrome.css
+++ b/css/leptonChrome.css
@@ -2972,16 +2972,26 @@
 /*= Panel UI Arrow ===========================================================*/
 @supports -moz-bool-pref("userChrome.decoration.panel_arrow") {
   #appMenu-popup {
-    margin-top: -8px !important;
-    /* Original: -4px */
-    padding-top: 4px;
     background-image: url("../icons/panelarrow-vertical.svg");
     background-repeat: no-repeat;
-    background-position: top right 10px;
+    background-position-x: right 10px;
+    background-position-y: top;
     -moz-context-properties: fill, stroke;
     fill: var(--panel-background);
     stroke: var(--panel-border-color);
   }
+  #appMenu-popup[side="top"] {
+    margin-top: -8px !important;
+    /* Original: -4px */
+    padding-top: 4px;
+  }
+  #appMenu-popup[side="bottom"] {
+    background-image: url("../icons/panelarrow-vertical-reverse.svg");
+    background-position-y: bottom;
+    margin-bottom: -8px !important;
+    /* Original: -4px */
+    padding-bottom: 4px;
+  }
 }
 @media (prefers-reduced-motion: no-preference) {
   /*= Field Border ===========================================================*/
diff --git a/icons/panelarrow-vertical-reverse.svg b/icons/panelarrow-vertical-reverse.svg
new file mode 100644
index 0000000..d274759
--- /dev/null
+++ b/icons/panelarrow-vertical-reverse.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="10">
+  <path fill="context-stroke" d="m0 0 10 10L20 0Z"/>
+  <path fill="context-fill" d="m1 0 9 9 9-9z"/>
+</svg>
diff --git a/icons/panelarrow-vertical.svg b/icons/panelarrow-vertical.svg
index 3e38a73..55d016c 100644
--- a/icons/panelarrow-vertical.svg
+++ b/icons/panelarrow-vertical.svg
@@ -2,6 +2,6 @@
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="10">
-  <path d="M 0,10 L 10,0 20,10 z" fill="context-stroke"/>
-  <path d="M 1,10 L 10,1 19,10 z" fill="context-fill"/>
-</svg>
\ No newline at end of file
+  <path fill="context-stroke" d="M 0,10 L 10,0 20,10 z"/>
+  <path fill="context-fill" d="M 1,10 L 10,1 19,10 z"/>
+</svg>
diff --git a/src/decoration/_panel_arrow.scss b/src/decoration/_panel_arrow.scss
index 93a5bbd..ff3587b 100644
--- a/src/decoration/_panel_arrow.scss
+++ b/src/decoration/_panel_arrow.scss
@@ -1,12 +1,22 @@
 #appMenu-popup {
-  margin-top: -8px !important; /* Original: -4px */
-  padding-top: 4px;
-
   background-image: url("../icons/panelarrow-vertical.svg");
   background-repeat: no-repeat;
-  background-position: top  right 10px;
+  background-position-x: right 10px;
+  background-position-y: top;
 
   -moz-context-properties: fill, stroke;
   fill: var(--panel-background);
   stroke: var(--panel-border-color);
+
+  &[side="top"] {
+    margin-top: -8px !important; /* Original: -4px */
+    padding-top: 4px;
+  }
+  &[side="bottom"] {
+    background-image: url("../icons/panelarrow-vertical-reverse.svg");
+    background-position-y: bottom;
+
+    margin-bottom: -8px !important; /* Original: -4px */
+    padding-bottom: 4px;
+  }
 }