diff --git a/src/app/page.tsx b/src/app/page.tsx
index 0b2200d..e593261 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -75,15 +75,7 @@ export default function Home() {
           </Menu>
         </Box>
 
-        <Box
-          ml={isMobile ? 2 : 0}
-          mr={isMobile ? 2 : 0}
-          flex={1}
-          overflowY={"auto"}
-          mb={4}
-        >
-          <Instructions />
-        </Box>
+        <Instructions />
       </Flex>
     </GradientBackground>
   );
diff --git a/src/components/Game.tsx b/src/components/Game.tsx
index 244e21d..4ef4ac0 100644
--- a/src/components/Game.tsx
+++ b/src/components/Game.tsx
@@ -27,6 +27,7 @@ import { COLUMNS } from "@/lib/constants";
 import { useSocket } from "@/hooks/useSocket";
 import { GameType } from "@/lib/gameType";
 import { usePathname } from "next/navigation";
+import InstructionsModal from "./InstructionsModal";
 
 interface GameProps {
   clientId: string;
@@ -64,6 +65,11 @@ export default function Game({ clientId }: GameProps): JSX.Element {
     onClose: closeGuessCharacterModal,
   } = useDisclosure();
 
+  const {
+    isOpen: isInstructionsModalOpen,
+    onClose: closeInstructionsModal,
+  } = useDisclosure({ defaultIsOpen: true });
+
   const {
     socketConnection,
     yourCharacter,
@@ -302,6 +308,10 @@ export default function Game({ clientId }: GameProps): JSX.Element {
               playerCount={playerCount}
             />
           )}
+          <InstructionsModal
+            isOpen={isInstructionsModalOpen}
+            onClose={closeInstructionsModal}
+          />
           <QuestionModal
             isOpen={isQuestionModalOpen}
             onClose={closeQuestionModal}
diff --git a/src/components/Instructions.tsx b/src/components/Instructions.tsx
index 1f30e0f..10c6a92 100644
--- a/src/components/Instructions.tsx
+++ b/src/components/Instructions.tsx
@@ -24,120 +24,137 @@ import {
   Link,
   ButtonGroup,
   Kbd,
+  Box,
 } from "@chakra-ui/react";
 import { HeartFillIcon, MarkGithubIcon } from "@primer/octicons-react";
 import styles from "../styles/styles.module.css";
 import NextLink from "next/link";
 
-export default function Instructions(): JSX.Element {
+interface InstructionsProps {
+  variant?: string;
+}
+
+export default function Instructions({
+  variant = "elevated",
+}: InstructionsProps): JSX.Element {
   const isMobile = useBreakpointValue({ base: true, md: false });
 
   return (
-    <Card>
-      <CardHeader p={isMobile ? 5 : 10}>
-        <Heading size={isMobile ? "md" : "xl"}>How it works</Heading>
-      </CardHeader>
-      <Divider />
-      <CardBody>
-        <List className="how-to">
-          <ListItem mb={3}>
-            <ListIcon as={CheckCircleIcon} color="green.500" />
-            <strong className={styles["how-to-header"]}>Goal</strong>
-            <Code ml={isMobile ? 0 : 2} mt={isMobile ? 2 : 0}>
-              {
-                "Guess your opponent's secret character before they guess who you are."
-              }
-            </Code>
-          </ListItem>
-          <ListItem mb={3}>
-            <ListIcon as={ArrowRightIcon} />
-            <strong className={styles["how-to-header"]}>Start Up</strong>
-            <Code ml={isMobile ? 0 : 2} mt={isMobile ? 2 : 0}>
-              {"Copy the invite link in the game room and send it to a friend."}
-            </Code>
-          </ListItem>
-          <ListItem mb={3}>
-            <ListIcon as={RepeatIcon} color="blue.500" />
-            <strong className={styles["how-to-header"]}>Playing</strong>
-            <Code ml={isMobile ? 0 : 2} mt={isMobile ? 2 : 0}>
-              {
-                "You and your opponent take turns asking and answering questions."
-              }
-            </Code>
-          </ListItem>
-          <ListItem mb={3}>
-            <ListIcon as={ChatIcon} color="green.500" />
-            <strong className={styles["how-to-header"]}>Your Turn</strong>
-            <Code ml={isMobile ? 0 : 2} mt={isMobile ? 2 : 0}>
-              {
-                "Answer your opponent's question, then ask your opponent a question about their secret character."
-              }
-            </Code>
-          </ListItem>
-          <ListItem mb={3}>
-            <ListIcon as={InfoOutlineIcon} color="blue.500" />
-            <strong className={styles["how-to-header"]}>Tip</strong>
-            <Code ml={isMobile ? 0 : 2} mt={isMobile ? 2 : 0}>
-              {"If you can't think of a question, click the "}
-            </Code>
-            <Kbd ml={2} mr={2}>
-              Ask AI ✨
-            </Kbd>
-            <Code>{" button for some inspiration!"}</Code>
-          </ListItem>
-          <ListItem mb={3}>
-            <ListIcon as={SpinnerIcon} />
-            <strong className={styles["how-to-header"]}>Their Turn</strong>
-            <Code ml={isMobile ? 0 : 2} mt={isMobile ? 2 : 0}>
-              {
-                "Eliminate characters on your board while your opponent thinks of their next question."
-              }
-            </Code>
-          </ListItem>
-          <ListItem mb={3}>
-            <ListIcon as={StarIcon} color="yellow.500" />
-            <strong className={styles["how-to-header"]}>Winning</strong>
-            <Code ml={isMobile ? 0 : 2} mt={isMobile ? 2 : 0}>
-              {"Guess your opponent's secret character correctly!"}
-            </Code>
-          </ListItem>
-          <ListItem mb={3}>
-            <ListIcon as={MoonIcon} color="black.500" />
-            <strong className={styles["how-to-header"]}>Theme</strong>
-            <Code ml={isMobile ? 0 : 2} mt={isMobile ? 2 : 0}>
-              {
-                "Toggle dark and light mode by clicking the button in the top left."
-              }
-            </Code>
-          </ListItem>
-          <ListItem mb={3}>
-            <ListIcon as={HeartFillIcon} color="red.500" />
-            <strong className={styles["how-to-header"]}>Donate</strong>
-            <Code ml={isMobile ? 0 : 2} mt={isMobile ? 2 : 0}>
-              {"Support this project by sponsoring me on GitHub"}
-            </Code>
-          </ListItem>
-        </List>
-      </CardBody>
-      <Divider />
-      <CardFooter
-        display={"flex"}
-        justifyContent={"flex-end"}
-        alignItems={"flex-end"}
-      >
-        <ButtonGroup gap={3}>
-          <Link as={NextLink} href="https://github.com/sponsors/lineville">
-            <Button colorScheme="pink" leftIcon={<HeartFillIcon />}>
-              Donate
-            </Button>
-          </Link>
-          <Link as={NextLink} href="https://github.com/lineville/guess-who">
-            <Button colorScheme={"blackAlpha"} leftIcon={<MarkGithubIcon />}>
-              Source Code
-            </Button>
-          </Link>
-        </ButtonGroup>
-      </CardFooter>
-    </Card>
+    <Box
+      ml={isMobile ? 2 : 0}
+      mr={isMobile ? 2 : 0}
+      flex={1}
+      overflowY={"auto"}
+      mb={4}
+    >
+      <Card variant={variant}>
+        <CardHeader p={isMobile ? 5 : 10}>
+          <Heading size={isMobile ? "md" : "xl"}>How it works</Heading>
+        </CardHeader>
+        <Divider />
+        <CardBody>
+          <List className="how-to">
+            <ListItem mb={3}>
+              <ListIcon as={CheckCircleIcon} color="green.500" />
+              <strong className={styles["how-to-header"]}>Goal</strong>
+              <Code ml={isMobile ? 0 : 2} mt={isMobile ? 2 : 0}>
+                {
+                  "Guess your opponent's secret character before they guess who you are."
+                }
+              </Code>
+            </ListItem>
+            <ListItem mb={3}>
+              <ListIcon as={ArrowRightIcon} />
+              <strong className={styles["how-to-header"]}>Start Up</strong>
+              <Code ml={isMobile ? 0 : 2} mt={isMobile ? 2 : 0}>
+                {
+                  "Copy the invite link in the game room and send it to a friend."
+                }
+              </Code>
+            </ListItem>
+            <ListItem mb={3}>
+              <ListIcon as={RepeatIcon} color="blue.500" />
+              <strong className={styles["how-to-header"]}>Playing</strong>
+              <Code ml={isMobile ? 0 : 2} mt={isMobile ? 2 : 0}>
+                {
+                  "You and your opponent take turns asking and answering questions."
+                }
+              </Code>
+            </ListItem>
+            <ListItem mb={3}>
+              <ListIcon as={ChatIcon} color="green.500" />
+              <strong className={styles["how-to-header"]}>Your Turn</strong>
+              <Code ml={isMobile ? 0 : 2} mt={isMobile ? 2 : 0}>
+                {
+                  "Answer your opponent's question, then ask your opponent a question about their secret character."
+                }
+              </Code>
+            </ListItem>
+            <ListItem mb={3}>
+              <ListIcon as={InfoOutlineIcon} color="blue.500" />
+              <strong className={styles["how-to-header"]}>Tip</strong>
+              <Code ml={isMobile ? 0 : 2} mt={isMobile ? 2 : 0}>
+                {"If you can't think of a question, click the "}
+              </Code>
+              <Kbd ml={2} mr={2}>
+                Ask AI ✨
+              </Kbd>
+              <Code>{" button for some inspiration!"}</Code>
+            </ListItem>
+            <ListItem mb={3}>
+              <ListIcon as={SpinnerIcon} />
+              <strong className={styles["how-to-header"]}>Their Turn</strong>
+              <Code ml={isMobile ? 0 : 2} mt={isMobile ? 2 : 0}>
+                {
+                  "Eliminate characters on your board while your opponent thinks of their next question."
+                }
+              </Code>
+            </ListItem>
+            <ListItem mb={3}>
+              <ListIcon as={StarIcon} color="yellow.500" />
+              <strong className={styles["how-to-header"]}>Winning</strong>
+              <Code ml={isMobile ? 0 : 2} mt={isMobile ? 2 : 0}>
+                {"Guess your opponent's secret character correctly!"}
+              </Code>
+            </ListItem>
+            <ListItem mb={3}>
+              <ListIcon as={MoonIcon} color="black.500" />
+              <strong className={styles["how-to-header"]}>Theme</strong>
+              <Code ml={isMobile ? 0 : 2} mt={isMobile ? 2 : 0}>
+                {
+                  "Toggle dark and light mode by clicking the button in the top left."
+                }
+              </Code>
+            </ListItem>
+            <ListItem mb={3}>
+              <ListIcon as={HeartFillIcon} color="red.500" />
+              <strong className={styles["how-to-header"]}>Donate</strong>
+              <Code ml={isMobile ? 0 : 2} mt={isMobile ? 2 : 0}>
+                {"Support this project by sponsoring me on GitHub"}
+              </Code>
+            </ListItem>
+          </List>
+        </CardBody>
+        <Divider />
+        <CardFooter
+          display={"flex"}
+          justifyContent={"flex-end"}
+          alignItems={"flex-end"}
+        >
+          <ButtonGroup gap={3}>
+            <Link as={NextLink} href="https://github.com/sponsors/lineville">
+              <Button colorScheme="pink" leftIcon={<HeartFillIcon />}>
+                Donate
+              </Button>
+            </Link>
+            <Link as={NextLink} href="https://github.com/lineville/guess-who">
+              <Button colorScheme={"blackAlpha"} leftIcon={<MarkGithubIcon />}>
+                Source Code
+              </Button>
+            </Link>
+          </ButtonGroup>
+        </CardFooter>
+      </Card>
+    </Box>
   );
 }
diff --git a/src/components/InstructionsModal.tsx b/src/components/InstructionsModal.tsx
new file mode 100644
index 0000000..96bb5b4
--- /dev/null
+++ b/src/components/InstructionsModal.tsx
@@ -0,0 +1,33 @@
+import {
+  Checkbox,
+  HStack,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalOverlay,
+  Text,
+} from "@chakra-ui/react";
+import Instructions from "./Instructions";
+
+interface InstructionsModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export default function InstructionsModal({
+  isOpen,
+  onClose,
+}: InstructionsModalProps): JSX.Element {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} size="6xl" scrollBehavior="inside">
+      <ModalOverlay />
+      <ModalContent>
+        <ModalCloseButton onClick={onClose} />
+        <ModalBody overflowY="auto" style={{ touchAction: "auto" }} mr={6}>
+          <Instructions variant="filled" />
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+}
diff --git a/src/components/QuestionModal.tsx b/src/components/QuestionModal.tsx
index 1fc4bfc..4a32c56 100644
--- a/src/components/QuestionModal.tsx
+++ b/src/components/QuestionModal.tsx
@@ -106,7 +106,7 @@ export default function QuestionModal({
         </ModalBody>
 
         <ModalFooter>
-          <Button colorScheme="blue" mr={3} onClick={handleAskQuestion}>
+          <Button colorScheme="blue" mr={3} onClick={handleAskQuestion} isDisabled={!question.trim()}>
             Ask
           </Button>
           <Button variant="ghost" onClick={onClose}>