diff --git a/src/chessboard/components/PromotionDialog.tsx b/src/chessboard/components/PromotionDialog.tsx
index 9d9e7e0..16c636f 100644
--- a/src/chessboard/components/PromotionDialog.tsx
+++ b/src/chessboard/components/PromotionDialog.tsx
@@ -19,14 +19,23 @@ export function PromotionDialog() {
     `${promotePieceColor ?? "w"}B`,
   ];
 
+  // Determines if promotion is happening on the bottom rank
+  const isBottomRank =
+    (boardOrientation === "white" && promoteToSquare?.[1] === "1") ||
+    (boardOrientation === "black" && promoteToSquare?.[1] === "8");
+
   const dialogStyles = {
     default: {
       display: "grid",
       gridTemplateColumns: "1fr 1fr",
-      transform: `translate(${-boardWidth / 8}px, ${-boardWidth / 8}px)`,
+      transform: isBottomRank
+        ? `translate(${-boardWidth / 8}px, ${+boardWidth / 8}px)`
+        : `translate(${-boardWidth / 8}px, ${-boardWidth / 8}px)`,
     },
     vertical: {
-      transform: `translate(${-boardWidth / 16}px, ${-boardWidth / 16}px)`,
+      transform: isBottomRank
+        ? `translate(${-boardWidth / 16}px, ${+boardWidth / 16}px)`
+        : `translate(${-boardWidth / 16}px, ${-boardWidth / 16}px)`,
     },
     modal: {
       display: "flex",
@@ -44,21 +53,29 @@ export function PromotionDialog() {
   const dialogCoords = getRelativeCoords(
     boardOrientation,
     boardWidth,
-    promoteToSquare || "a8"
+    promoteToSquare || "a8",
   );
 
+  // Reversing the order in which piece icons appear for vertical dialog if promotion occurs on the bottom rank
+  const orderedPromotionOptions =
+    isBottomRank && promotionDialogVariant === "vertical"
+      ? promotionOptions.reverse()
+      : promotionOptions;
+
   return (
     <div
       style={{
         position: "absolute",
-        top: `${dialogCoords?.y}px`,
+        // Bottom rank promotion forces the dialog to start from the bottom edge
+        top: isBottomRank ? undefined : `${dialogCoords?.y}px`,
+        bottom: isBottomRank ? `${boardWidth - dialogCoords?.y}px` : undefined,
         left: `${dialogCoords?.x}px`,
         zIndex: 1000,
         ...dialogStyles[promotionDialogVariant],
       }}
       title="Choose promotion piece"
     >
-      {promotionOptions.map((option) => (
+      {orderedPromotionOptions.map((option) => (
         <PromotionOption key={option} option={option} />
       ))}
     </div>
diff --git a/stories/Chessboard.stories.tsx b/stories/Chessboard.stories.tsx
index 8622f6e..f39aae8 100644
--- a/stories/Chessboard.stories.tsx
+++ b/stories/Chessboard.stories.tsx
@@ -309,7 +309,7 @@ export const ClickToMove = () => {
         verbose: true,
       });
       const foundMove = moves.find(
-        (m) => m.from === moveFrom && m.to === square
+        (m) => m.from === moveFrom && m.to === square,
       );
       // not a valid move
       if (!foundMove) {
@@ -833,7 +833,7 @@ export const CustomSquare = () => {
           </div>
         </div>
       );
-    }
+    },
   );
 
   return (
@@ -865,7 +865,7 @@ export const AnalysisBoard = () => {
 
       positionEvaluation &&
         setPositionEvaluation(
-          ((game.turn() === "w" ? 1 : -1) * Number(positionEvaluation)) / 100
+          ((game.turn() === "w" ? 1 : -1) * Number(positionEvaluation)) / 100,
         );
       possibleMate && setPossibleMate(possibleMate);
       depth && setDepth(depth);
@@ -1036,8 +1036,9 @@ export const BoardWithCustomArrows = () => {
 ///////////////////////////////////
 export const ManualBoardEditor = () => {
   const game = useMemo(() => new Chess("8/8/8/8/8/8/8/8 w - - 0 1"), []); // empty board
-  const [boardOrientation, setBoardOrientation] =
-    useState<"white" | "black">("white");
+  const [boardOrientation, setBoardOrientation] = useState<"white" | "black">(
+    "white",
+  );
   const [boardWidth, setBoardWidth] = useState(360);
   const [fenPosition, setFenPosition] = useState(game.fen());
 
@@ -1051,7 +1052,7 @@ export const ManualBoardEditor = () => {
       setFenPosition(game.fen());
     } else {
       alert(
-        `The board already contains ${color === "w" ? "WHITE" : "BLACK"} KING`
+        `The board already contains ${color === "w" ? "WHITE" : "BLACK"} KING`,
       );
     }
 
@@ -1180,7 +1181,7 @@ export const ManualBoardEditor = () => {
             style={buttonStyle}
             onClick={() => {
               setBoardOrientation(
-                boardOrientation === "white" ? "black" : "white"
+                boardOrientation === "white" ? "black" : "white",
               );
             }}
           >