diff --git a/src-web/components/Board.tsx b/src-web/components/Board.tsx
index 7b60ccb..f3d3cab 100644
--- a/src-web/components/Board.tsx
+++ b/src-web/components/Board.tsx
@@ -1,11 +1,13 @@
 import { Accessor, Component, createSignal, For, Show } from "solid-js";
-import { Board as BoardData, Coordinate, Move, PieceType } from "../events";
+import { Board as BoardData, Coordinate, Move, PieceType, Side } from "../events";
 import './Board.css';
+import Button, { ButtonContainer } from "./Button";
 
 interface Props {
     board: Accessor<BoardData>;
     moves: Accessor<Move[]>;
     makeMove: (move: Move) => void;
+    side: Side;
 }
 
 const PIECE_CHARS: Record<PieceType, string> = {
@@ -19,6 +21,7 @@ const PIECE_CHARS: Record<PieceType, string> = {
 
 const Board: Component<Props> = (props) => {
     const [selectedSquare, setSelectedSquare] = createSignal<number | null>(null);
+    const [promotionMove, setPromotionMove] = createSignal<Move | null>(null);
 
     const validMoves = () => {
         const selected = selectedSquare();
@@ -29,45 +32,80 @@ const Board: Component<Props> = (props) => {
         }
     };
 
-    return <div class="board">
-        {props.board().map((piece, i) => {
-            const coord: Coordinate = {
-                rank: Math.floor(i / 8),
-                file: i % 8,
-            };
-            const isLight = () => ((i % 8) + Math.floor(i / 8)) % 2 == 0;
-            const hasMoves = () => props.moves().find((move) => move.from.rank === coord.rank && move.from.file === coord.file) !== undefined;
-            const targetMove = () => validMoves().find(move => move.to.rank === coord.rank && move.to.file === coord.file);
-            const isTarget = () => targetMove() !== undefined;
+    const board = () => {
+        if (props.side === 'white') {
+            return props.board().slice().reverse();
+        } else {
+            return props.board();
+        }
+    };
 
-            return <div classList={{
-                square: true,
-                light: isLight(),
-                dark: !isLight(),
-                black: piece?.side === 'black',
-                white: piece?.side === 'white',
-                selectable: hasMoves() || isTarget(),
-            }} onClick={() => {
-                if (hasMoves()) {
-                    if (selectedSquare() === i) {
+    return <>
+        <div class="board">
+            {board().map((piece, i_) => {
+                const i = props.side === 'white' ? 63 - i_ : i_;
+                const coord: Coordinate = {
+                    rank: Math.floor(i / 8),
+                    file: i % 8,
+                };
+                const isLight = () => ((i % 8) + Math.floor(i / 8)) % 2 == 0;
+                const hasMoves = () => props.moves().find((move) => move.from.rank === coord.rank && move.from.file === coord.file) !== undefined;
+                const targetMove = () => validMoves().find(move => move.to.rank === coord.rank && move.to.file === coord.file);
+                const isTarget = () => targetMove() !== undefined;
+
+                return <>
+                    <div classList={{
+                        square: true,
+                        light: isLight(),
+                        dark: !isLight(),
+                        black: piece?.side === 'black',
+                        white: piece?.side === 'white',
+                        selectable: hasMoves() || isTarget(),
+                    }} onClick={() => {
+                        if (hasMoves()) {
+                            if (selectedSquare() === i) {
+                                setSelectedSquare(null);
+                            } else {
+                                setSelectedSquare(i);
+                            }
+                        } else {
+                            const target = targetMove();
+                            console.log(target);
+                            if (target) {
+                                if (target.promotions) {
+                                    setPromotionMove(target);
+                                } else {
+                                    props.makeMove(target);
+                                    setSelectedSquare(null);
+                                    setPromotionMove(null);
+                                }
+                            }
+                        }
+                    }}>
+                        <Show when={selectedSquare() === i}><div class="borderSelected" /></Show>
+                        <Show when={isTarget()}><div class="borderTarget" /></Show>
+                        <Show when={piece !== null}>{PIECE_CHARS[piece!.ty]}</Show>
+                    </div>
+                </>
+            })}
+        </div>
+        <Show when={promotionMove() !== null}>
+            <ButtonContainer>
+                <For each={promotionMove()?.promotions!}>
+                    {(promotion, i) => <Button onClick={() => {
+                        props.makeMove({
+                            ...promotionMove()!,
+                            promotions: [promotion],
+                        });
                         setSelectedSquare(null);
-                    } else {
-                        setSelectedSquare(i);
-                    }
-                } else {
-                    const target = targetMove();
-                    if (target && !target.promotions) {
-                        props.makeMove(target);
-                        setSelectedSquare(null);
-                    }
-                }
-            }}>
-                <Show when={selectedSquare() === i}><div class="borderSelected" /></Show>
-                <Show when={isTarget()}><div class="borderTarget" /></Show>
-                <Show when={piece !== null}>{PIECE_CHARS[piece!.ty]}</Show>
-            </div>
-        })}
-    </div>
+                        setPromotionMove(null);
+                    }}>
+                        {promotion.ty}
+                    </Button>}
+                </For>
+            </ButtonContainer>
+        </Show>
+    </>
 }
 
 export default Board;
diff --git a/src/chess/mv.rs b/src/chess/mv.rs
index 79bc500..7c1e1b4 100644
--- a/src/chess/mv.rs
+++ b/src/chess/mv.rs
@@ -400,7 +400,13 @@ pub fn generate_legal(board: &Board) -> Vec<Move> {
                     return false;
                 }
             }
-            let test_board = mv.make(board);
+            let test_board = if mv.promotions.is_some() {
+                let mut fake_move = mv.clone();
+                fake_move.promotions = None;
+                fake_move.make(board)
+            } else {
+                mv.make(board)
+            };
             !*test_board.calc_check_state().get(board.to_move)
         })
         .collect::<Vec<_>>()
diff --git a/src/game.rs b/src/game.rs
index c60dae6..55576f4 100644
--- a/src/game.rs
+++ b/src/game.rs
@@ -110,7 +110,23 @@ impl Handler<IncomingEvent> for ChessGame {
                     return;
                 }
                 let legal_moves = generate_legal(&self.board);
-                if legal_moves.contains(&mv) {
+                let legal = if let Some(promotions) = &mv.promotions {
+                    if promotions.len() == 1 {
+                        legal_moves.iter().any(|m| {
+                            m.from == mv.from
+                            && m.to == mv.to
+                            && m.set_en_passant == mv.set_en_passant
+                            && m.other == mv.other
+                            && matches!(&m.promotions, Some(p) if p.contains(&promotions[0]))
+                        })
+                    } else {
+                        tracing::warn!(?incoming_event.side, ?mv, "cannot promote to more than one piece");
+                        false
+                    }
+                } else {
+                    legal_moves.contains(&mv)
+                };
+                if legal {
                     self.board = mv.make(&self.board);
                     self.broadcast_new_board();
                     self.send_possible_moves();