diff --git a/client/src/components/cards.rs b/client/src/components/cards.rs
index 7aaf1d3..266dd6d 100644
--- a/client/src/components/cards.rs
+++ b/client/src/components/cards.rs
@@ -2,11 +2,11 @@ use leptos::*;
 use lib::WhiteCardMeta;
 
 #[component]
-pub fn BlackCard(card_data: ReadSignal<(String, u8)>) -> impl IntoView {
+pub fn BlackCard(card_data: (String, u8)) -> impl IntoView {
     view! {
         <div class="relative m-2 w-40 h-60 text-white bg-black rounded-lg">
-            <p class="p-4">{move || card_data().0}</p>
-            <p class="absolute right-4 bottom-4">Pick: {move || card_data().1}</p>
+            <p class="p-4">{card_data.0}</p>
+            <p class="absolute right-4 bottom-4">Pick: {card_data.1}</p>
         </div>
     }
 }
diff --git a/client/src/components/game.rs b/client/src/components/game.rs
index 3342b16..6d5acf9 100644
--- a/client/src/components/game.rs
+++ b/client/src/components/game.rs
@@ -1,169 +1,105 @@
 use crate::components::cards::*;
+use crate::components::game::header::*;
 use crate::components::websocket::WebSocketContext;
 use leptos::*;
 use leptos_use::core::ConnectionReadyState;
 use lib::*;
 use serde_json::to_string;
 use std::collections::HashMap;
+pub mod header;
+pub mod meta;
+pub mod scoreboard;
 
 #[component]
 pub fn Game() -> impl IntoView {
+    // Websocket stuff
     let websocket = expect_context::<WebSocketContext>();
     let tx = websocket.clone();
     let (websocket_send, set_websocket_send) = create_signal("".to_string());
     create_effect(move |_| {
         tx.send(&websocket_send());
     });
+
+    // Incoming
     let connected = move || websocket.ready_state.get() == ConnectionReadyState::Open;
     let game_meta = expect_context::<ReadSignal<Option<GameStateMeta>>>();
     let judge_round = expect_context::<ReadSignal<Option<JudgeRound>>>();
 
-    let (game_id, set_game_id) = create_signal("".to_string());
-    let (game_name, set_game_name) = create_signal("".to_string());
-    let (game_host, set_game_host) = create_signal("".to_string());
-    let (game_players, set_game_players) = create_signal(vec![]);
-    let (game_czar, set_game_czar) = create_signal("".to_string());
-    let (game_white_count, set_game_white_count) = create_signal(0usize);
-    let (game_black_count, set_game_black_count) = create_signal(0usize);
-    let (game_white_discard_count, set_game_white_discard_count) = create_signal(0usize);
-    let (game_black, set_game_black) = create_signal(("".to_string(), 0u8));
-    let (selected_cards_ordered, set_selected_cards_ordered) = create_signal::<Vec<String>>(vec![]);
-    let (player_hand, set_player_hand) = create_signal::<Vec<String>>(vec![]);
-    let (player_white, set_player_white) =
-        create_signal::<HashMap<String, WhiteCardMeta>>(HashMap::new());
+    // Internal
+    let (selected_cards, set_selected_cards) = create_signal::<Vec<WhiteCardMeta>>(vec![]);
     let (card_clicked, set_card_clicked) = create_signal::<String>(String::new());
+    let (white_map, set_white_map) =
+        create_signal::<HashMap<String, WhiteCardMeta>>(HashMap::new());
+
+    // For subcomponents
     provide_context::<WriteSignal<String>>(set_card_clicked);
 
-    // Clear everything on disconnect
+    // Put cards in a map for easier lookup
+    // The server sends a vec to preserve ordering
     create_effect(move |_| {
-        if !connected() {
-            set_game_id("".to_string());
-            set_game_name("".to_string());
-            set_game_host("".to_string());
-            set_game_players(vec![]);
-            set_game_czar("".to_string());
-            set_game_black(("".to_string(), 0u8));
-            set_selected_cards_ordered(vec![]);
-            set_player_hand(vec![]);
-            set_player_white.update(|hand| {
-                hand.clear();
-            });
-            set_game_white_count(0usize);
-            set_game_black_count(0usize);
-            set_game_white_discard_count(0usize);
-        }
-    });
-
-    // Handle incoming judge message
-    create_effect(move |_| {
-        judge_round.with(move |judge_round| {
-            set_player_hand.update(|list| {
-                list.clear();
-            });
-            set_player_white.update(|list| {
-                list.clear();
-            });
-            set_card_clicked.update(|list| {
-                list.clear();
-            });
-
-            // Load hand
-            if let Some(judge) = judge_round {
-                for cards in judge.cards_to_judge.clone() {
-                    for card in cards {
-                        set_player_white.update(|hand| {
-                            hand.insert(card.uuid.clone(), card.clone());
-                        });
-                        set_player_hand.update(|hand| {
-                            hand.push(card.uuid.clone());
-                        });
-                    }
-                }
-            }
-        });
-    });
-
-    // Handle incoming state update
-    create_effect(move |_| {
-        if let Some(game) = game_meta() {
-            // Clear in case of (re-)joining game
-            set_card_clicked.update(|list| {
-                list.clear();
-            });
-            set_selected_cards_ordered.update(|list| {
-                list.clear();
-            });
-            set_player_hand.update(|list| {
-                list.clear();
-            });
-            set_player_white.update(|list| {
-                list.clear();
-            });
-
-            // Load meta
-            set_game_id(game.uuid.clone());
-            set_game_name(game.name.clone());
-            set_game_host(game.host.clone());
-            set_game_players(game.players.clone());
-            set_game_czar(game.czar.clone());
-            set_game_black(game.black.clone());
-            set_game_white_count(game.white_count.clone());
-            set_game_black_count(game.black_count.clone());
-            set_game_white_discard_count(game.white_discard_count.clone());
-
-            // Load hand
-            for card in game.white {
-                set_player_white.update(|hand| {
-                    hand.insert(card.uuid.clone(), card.clone());
-                });
-                set_player_hand.update(|hand| {
-                    hand.push(card.uuid.clone());
+        if game_meta().is_some() {
+            for card in game_meta().unwrap().white {
+                set_white_map.update(|map| {
+                    map.insert(card.uuid.clone(), card.clone());
                 });
             }
         }
     });
 
-    // Move cards back and forth between hand and selected when clicked
+    // Toggle selected status of cards
     create_effect(move |_| {
-        if let Some(card_index) = player_hand()
-            .iter()
-            .position(|card| *card == card_clicked())
-        {
-            set_player_hand.update(|list| {
-                list.remove(card_index);
-            });
+        if card_clicked() != "".to_string() {
+            if !selected_cards().contains(white_map().get(&card_clicked()).unwrap()) {
+                set_selected_cards
+                    .update(|cards| cards.push(white_map().get(&card_clicked()).unwrap().clone()))
+            } else if selected_cards().contains(white_map().get(&card_clicked()).unwrap()) {
+                set_selected_cards.update(|cards| {
+                    cards.remove(
+                        cards
+                            .iter()
+                            .position(|card| card == white_map().get(&card_clicked()).unwrap())
+                            .unwrap(),
+                    );
+                })
+            }
 
-            set_selected_cards_ordered.update(|list| {
-                list.push(card_clicked());
-            })
-        } else if let Some(card_index) = selected_cards_ordered()
-            .iter()
-            .position(|card| *card == card_clicked())
-        {
-            set_selected_cards_ordered.update(|list| {
-                list.remove(card_index);
-            });
-
-            set_player_hand.update(|list| {
-                list.push(card_clicked());
-            })
+            // You can't clear selected_cards without this line so don't fuck with it
+            set_card_clicked("".to_string());
         }
     });
 
+    // Runs when submit button is clicked
     let submit_move = move |_| {
         let msg = to_string(&PlayerMoveRequest {
-            game_id: game_id(),
-            card_ids: selected_cards_ordered(),
+            game_id: game_meta().unwrap().uuid.clone(),
+            card_ids: selected_cards()
+                .iter()
+                .map(|card| card.uuid.clone())
+                .collect(),
         })
         .unwrap();
 
         set_websocket_send(msg);
     };
 
+    // On incoming judge
+    create_effect(move |_| {
+        // Clear selected cards
+        if judge_round().is_some() {
+            set_selected_cards.update(|list| {
+                list.clear();
+            });
+        }
+    });
+
+    // Runs when judging submit button is clicked
     let submit_judge = move |_| {
         let msg = to_string(&JudgeDecisionRequest {
-            game_id: game_id(),
-            winning_cards: selected_cards_ordered(),
+            game_id: game_meta().unwrap().uuid.clone(),
+            winning_cards: selected_cards()
+                .iter()
+                .map(|card| card.uuid.clone())
+                .collect(),
         })
         .unwrap();
 
@@ -172,80 +108,106 @@ pub fn Game() -> impl IntoView {
 
     view! {
         <div class="p-1">
-            <div class="relative">
-                <h2 class="text-2xl">Game</h2>
-                <span>
-                    <p>Name: {move || game_name()}</p>
-                    <p>Host: {move || game_host()}</p>
-                    <p>Czar: {move || game_czar()}</p>
-                    <p>White Deck: {move || game_white_count().to_string()}</p>
-                    <p>White Discard: {move || game_white_discard_count().to_string()}</p>
-                    <p>Black Deck: {move || game_black_count().to_string()}</p>
-                </span>
-                <span class="absolute top-0 right-0">
-                    <p>Players:</p>
-                    <table class="min-w-full border border-collapse table-auto">
-                        <thead>
-                            <tr>
-                                <th class="border-b">Name</th>
-                                <th class="border-b">Score</th>
-                            </tr>
-                        </thead>
-                        {move || {
-                            game_players()
-                                .iter()
-                                .map(|player| {
-                                    view! {
-                                        <tr>
-                                            <td class="text-center border-b">{&player.name}</td>
-                                            <td class="text-center border-b">
-                                                {&player.score.to_string()}
-                                            </td>
-                                        </tr>
+            <h2 class="text-2xl">Game</h2>
+            <Show
+                when=move || game_meta.get().is_some() && connected()
+                fallback=|| view! { "You are not in a game" }
+            >
+                <Header game_meta=game_meta().unwrap() />
+            </Show>
+
+            // ////////////////////
+            // Player is judging //
+            // ////////////////////
+
+            <Show when=move || { judge_round.get().is_some() && connected() }>
+                <div class="w-full ms-16 inline-flex flex-wrap">
+                    <BlackCard card_data=game_meta().unwrap().black />
+
+                    // Selected cards
+                    <For
+                        each=move || selected_cards()
+                        key=move |card| card.uuid.clone()
+                        children=move |card| {
+                            view! { <WhiteCard card_data=card.clone() /> }
+                        }
+                    />
+                </div>
+
+                {judge_round()
+                    .unwrap()
+                    .cards_to_judge
+                    .iter()
+                    .map(|group| view! { {format!("{:#?}", group)} })
+                    .collect_view()}
+
+                <For
+                    each=move || judge_round().unwrap().cards_to_judge
+                    key=move |_| 69
+                    children=move |group| { { format!("{:#?}", group) } }
+                />
+
+                // Submit button
+                <div class="w-full inline-flex flex-wrap justify-center">
+                    <button type="button" on:click=submit_judge>
+                        Submit
+                    </button>
+                </div>
+            </Show>
+
+            // ////////////////////
+            // Player is playing //
+            // ////////////////////
+
+            <Show when=move || game_meta.get().is_some() && connected() && !judge_round().is_some()>
+
+                // Play cards
+                <div class="w-full ms-16 inline-flex flex-wrap">
+                    <BlackCard card_data=game_meta().unwrap().black />
+
+                    // Selected cards
+                    <For
+                        each=move || selected_cards()
+                        key=move |card| card.uuid.clone()
+                        children=move |card| {
+                            view! { <WhiteCard card_data=card.clone() /> }
+                        }
+                    />
+                </div>
+
+                // Submit button
+                <div class="w-full inline-flex flex-wrap justify-center">
+                    <button type="button" on:click=submit_move>
+                        Submit
+                    </button>
+                </div>
+
+                // Player hand
+                <div class="inline-flex flex-wrap justify-center">
+                    <For
+                        each=move || game_meta().unwrap().white
+                        key=move |card| card.uuid.clone()
+                        children=move |card| {
+                            view! {
+                                // Hide cards from hand view when they exist as selected
+                                <Show when={
+                                    let id = card.uuid.clone();
+                                    move || {
+                                        if let Some(card) = white_map().get(&id) {
+                                            !selected_cards().contains(card)
+                                        } else {
+                                            true
+                                        }
                                     }
-                                })
-                                .collect_view()
-                        }}
-                    </table>
-                </span>
-            </div>
+                                }>
+                                    <WhiteCard card_data=card.clone() />
+                                </Show>
+                            }
+                        }
+                    />
+                </div>
+            </Show>
 
-            // Game cards
-            // TODO: offset this correctly
-            <div class="w-full ms-16 inline-flex flex-wrap">
-                <BlackCard card_data=game_black />
-
-                // Card selection
-                <For
-                    each=move || selected_cards_ordered()
-                    key=move |card| player_white().get(card).unwrap().uuid.clone()
-                    children=move |card| {
-                        view! { <WhiteCard card_data=player_white().get(&card).unwrap().clone() /> }
-                    }
-                />
-            </div>
-            <div class="w-full inline-flex flex-wrap justify-center">
-                <button type="button" on:click=submit_move>
-                    Submit
-                </button>
-            </div>
-            <div class="w-full inline-flex flex-wrap justify-center">
-                <button type="button" on:click=submit_judge>
-                    Judge
-                </button>
-            </div>
-
-            // Player cards
-            <div class="inline-flex flex-wrap justify-center">
-                <For
-                    each=move || player_hand()
-                    key=move |card| player_white().get(card).unwrap().uuid.clone()
-                    children=move |card| {
-                        view! { <WhiteCard card_data=player_white().get(&card).unwrap().clone() /> }
-                    }
-                />
-
-            </div>
         </div>
     }
 }
diff --git a/client/src/components/game/header.rs b/client/src/components/game/header.rs
new file mode 100644
index 0000000..8788752
--- /dev/null
+++ b/client/src/components/game/header.rs
@@ -0,0 +1,14 @@
+use crate::components::game::meta::*;
+use crate::components::game::scoreboard::*;
+use leptos::*;
+use lib::*;
+
+#[component]
+pub fn Header(game_meta: GameStateMeta) -> impl IntoView {
+    view! {
+        <div class="relative">
+            <Meta game_meta=game_meta.clone() />
+            <Scoreboard game_meta=game_meta.clone() />
+        </div>
+    }
+}
diff --git a/client/src/components/game/meta.rs b/client/src/components/game/meta.rs
new file mode 100644
index 0000000..4781c57
--- /dev/null
+++ b/client/src/components/game/meta.rs
@@ -0,0 +1,17 @@
+use leptos::*;
+use lib::*;
+
+#[component]
+pub fn Meta(game_meta: GameStateMeta) -> impl IntoView {
+    view! {
+        <span>
+            <p>Name: {game_meta.name}</p>
+            <p>Host: {game_meta.host}</p>
+            <p>Czar: {game_meta.czar}</p>
+            <p>White Deck: {game_meta.white_count.to_string()}</p>
+            <p>White Discard: {move || game_meta.white_discard_count.to_string()}</p>
+            <p>Black Deck: {move || game_meta.black_count.to_string()}</p>
+        </span>
+    }
+}
+
diff --git a/client/src/components/game/scoreboard.rs b/client/src/components/game/scoreboard.rs
new file mode 100644
index 0000000..6c48632
--- /dev/null
+++ b/client/src/components/game/scoreboard.rs
@@ -0,0 +1,31 @@
+use leptos::*;
+use lib::*;
+
+#[component]
+pub fn Scoreboard(game_meta: GameStateMeta) -> impl IntoView {
+    view! {
+        <span class="absolute top-0 right-0">
+            <p>Players:</p>
+            <table class="min-w-full border border-collapse table-auto">
+                <thead>
+                    <tr>
+                        <th class="border-b">Name</th>
+                        <th class="border-b">Score</th>
+                    </tr>
+                </thead>
+                {game_meta
+                    .players
+                    .iter()
+                    .map(|player| {
+                        view! {
+                            <tr>
+                                <td class="text-center border-b">{&player.name}</td>
+                                <td class="text-center border-b">{&player.score.to_string()}</td>
+                            </tr>
+                        }
+                    })
+                    .collect_view()}
+            </table>
+        </span>
+    }
+}
diff --git a/client/src/components/game_old.rs b/client/src/components/game_old.rs
new file mode 100644
index 0000000..9cc027d
--- /dev/null
+++ b/client/src/components/game_old.rs
@@ -0,0 +1,211 @@
+use crate::components::cards::*;
+use crate::components::websocket::WebSocketContext;
+use leptos::*;
+use leptos_use::core::ConnectionReadyState;
+use lib::*;
+use serde_json::to_string;
+use std::collections::HashMap;
+
+#[component]
+pub fn Game() -> impl IntoView {
+    let websocket = expect_context::<WebSocketContext>();
+    let tx = websocket.clone();
+    let (websocket_send, set_websocket_send) = create_signal("".to_string());
+    create_effect(move |_| {
+        tx.send(&websocket_send());
+    });
+    let connected = move || websocket.ready_state.get() == ConnectionReadyState::Open;
+    let game_meta = expect_context::<ReadSignal<Option<GameStateMeta>>>();
+    let judge_round = expect_context::<ReadSignal<Option<JudgeRound>>>();
+
+    let (game_id, set_game_id) = create_signal("".to_string());
+    let (game_name, set_game_name) = create_signal("".to_string());
+    let (game_host, set_game_host) = create_signal("".to_string());
+    let (game_players, set_game_players) = create_signal(vec![]);
+    let (game_czar, set_game_czar) = create_signal("".to_string());
+    let (game_white_count, set_game_white_count) = create_signal(0usize);
+    let (game_black_count, set_game_black_count) = create_signal(0usize);
+    let (game_white_discard_count, set_game_white_discard_count) = create_signal(0usize);
+    let (game_black, set_game_black) = create_signal(("".to_string(), 0u8));
+    let (selected_cards_ordered, set_selected_cards_ordered) = create_signal::<Vec<String>>(vec![]);
+    let (player_hand, set_player_hand) = create_signal::<Vec<String>>(vec![]);
+    let (player_white, set_player_white) =
+        create_signal::<HashMap<String, WhiteCardMeta>>(HashMap::new());
+    let (card_clicked, set_card_clicked) = create_signal::<String>(String::new());
+    provide_context::<WriteSignal<String>>(set_card_clicked);
+
+    // Clear everything on disconnect
+    create_effect(move |_| {
+        if !connected() {
+            set_game_id("".to_string());
+            set_game_name("".to_string());
+            set_game_host("".to_string());
+            set_game_players(vec![]);
+            set_game_czar("".to_string());
+            set_game_black(("".to_string(), 0u8));
+            set_selected_cards_ordered(vec![]);
+            set_player_hand(vec![]);
+            set_player_white.update(|hand| {
+                hand.clear();
+            });
+            set_game_white_count(0usize);
+            set_game_black_count(0usize);
+            set_game_white_discard_count(0usize);
+        }
+    });
+
+    // Handle incoming judge message
+    create_effect(move |_| {
+        judge_round.with(move |judge_round| {
+            set_player_hand.update(|list| {
+                list.clear();
+            });
+            set_player_white.update(|list| {
+                list.clear();
+            });
+            set_card_clicked.update(|list| {
+                list.clear();
+            });
+
+            // Load hand
+            if let Some(judge) = judge_round {
+                for cards in judge.cards_to_judge.clone() {
+                    for card in cards {
+                        set_player_white.update(|hand| {
+                            hand.insert(card.uuid.clone(), card.clone());
+                        });
+                        set_player_hand.update(|hand| {
+                            hand.push(card.uuid.clone());
+                        });
+                    }
+                }
+            }
+        });
+    });
+
+    // Handle incoming state update
+    create_effect(move |_| {
+        if let Some(game) = game_meta() {
+            // Clear in case of (re-)joining game
+            set_card_clicked.update(|list| {
+                list.clear();
+            });
+            set_selected_cards_ordered.update(|list| {
+                list.clear();
+            });
+            set_player_hand.update(|list| {
+                list.clear();
+            });
+            set_player_white.update(|list| {
+                list.clear();
+            });
+
+            // Load meta
+            set_game_id(game.uuid.clone());
+            set_game_name(game.name.clone());
+            set_game_host(game.host.clone());
+            set_game_players(game.players.clone());
+            set_game_czar(game.czar.clone());
+            set_game_black(game.black.clone());
+            set_game_white_count(game.white_count.clone());
+            set_game_black_count(game.black_count.clone());
+            set_game_white_discard_count(game.white_discard_count.clone());
+
+            // Load hand
+            for card in game.white {
+                set_player_white.update(|hand| {
+                    hand.insert(card.uuid.clone(), card.clone());
+                });
+                set_player_hand.update(|hand| {
+                    hand.push(card.uuid.clone());
+                });
+            }
+        }
+    });
+
+    // Move cards back and forth between hand and selected when clicked
+    create_effect(move |_| {
+        if let Some(card_index) = player_hand()
+            .iter()
+            .position(|card| *card == card_clicked())
+        {
+            set_player_hand.update(|list| {
+                list.remove(card_index);
+            });
+
+            set_selected_cards_ordered.update(|list| {
+                list.push(card_clicked());
+            })
+        } else if let Some(card_index) = selected_cards_ordered()
+            .iter()
+            .position(|card| *card == card_clicked())
+        {
+            set_selected_cards_ordered.update(|list| {
+                list.remove(card_index);
+            });
+
+            set_player_hand.update(|list| {
+                list.push(card_clicked());
+            })
+        }
+    });
+
+    let submit_move = move |_| {
+        let msg = to_string(&PlayerMoveRequest {
+            game_id: game_id(),
+            card_ids: selected_cards_ordered(),
+        })
+        .unwrap();
+
+        set_websocket_send(msg);
+    };
+
+    let submit_judge = move |_| {
+        let msg = to_string(&JudgeDecisionRequest {
+            game_id: game_id(),
+            winning_cards: selected_cards_ordered(),
+        })
+        .unwrap();
+
+        set_websocket_send(msg);
+    };
+
+    view! {
+        <div class="p-1">
+            // Game cards
+            // TODO: offset this correctly
+            <div class="w-full ms-16 inline-flex flex-wrap">
+                // Card selection
+                <For
+                    each=move || selected_cards_ordered()
+                    key=move |card| player_white().get(card).unwrap().uuid.clone()
+                    children=move |card| {
+                        view! { <WhiteCard card_data=player_white().get(&card).unwrap().clone() /> }
+                    }
+                />
+            </div>
+            <div class="w-full inline-flex flex-wrap justify-center">
+                <button type="button" on:click=submit_move>
+                    Submit
+                </button>
+            </div>
+            <div class="w-full inline-flex flex-wrap justify-center">
+                <button type="button" on:click=submit_judge>
+                    Judge
+                </button>
+            </div>
+
+            // Player cards
+            <div class="inline-flex flex-wrap justify-center">
+                <For
+                    each=move || player_hand()
+                    key=move |card| player_white().get(card).unwrap().uuid.clone()
+                    children=move |card| {
+                        view! { <WhiteCard card_data=player_white().get(&card).unwrap().clone() /> }
+                    }
+                />
+
+            </div>
+        </div>
+    }
+}
diff --git a/client/src/components/mod.rs b/client/src/components/mod.rs
index a994774..4f663e7 100644
--- a/client/src/components/mod.rs
+++ b/client/src/components/mod.rs
@@ -1,6 +1,6 @@
 pub mod auth;
-pub mod cards;
 pub mod browser;
+pub mod cards;
 pub mod chat;
 pub mod debug;
 pub mod game;
diff --git a/lib/src/lib.rs b/lib/src/lib.rs
index 6268cca..ed73e4b 100644
--- a/lib/src/lib.rs
+++ b/lib/src/lib.rs
@@ -33,7 +33,7 @@ pub struct PlayerMoveRequest {
 }
 
 /// White Card Meta
-#[derive(Clone, Debug, Serialize, Deserialize)]
+#[derive(Clone, Debug, PartialEq, Serialize, Deserialize)]
 pub struct WhiteCardMeta {
     pub uuid: String,
     pub text: String,