diff --git a/TODO.md b/TODO.md
index d2ab521..a5f6b0a 100644
--- a/TODO.md
+++ b/TODO.md
@@ -31,7 +31,6 @@ For screenshots:
 
 // todo later PR:
 
-- improve large screen
 - Use the hasVisited state to announce
 - add some custom daily puzzles
 - consolidate control buttons into hamburger menu (and add share button)
@@ -45,3 +44,4 @@ For screenshots:
 - just rename dispatch params to dispatcher everywhere
 - put arrayToGrid to common or to word-logic package
 - piecesOverlapQ should use getGridFromPieces
+- // todo put screenshots of lexlet and blobble and wordfall ()as webp/compressed images? in MoreGames.js
diff --git a/src/components/App.js b/src/components/App.js
index 19161bb..68bd5a1 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -2,10 +2,14 @@ import React from "react";
 import Game from "./Game";
 import Heart from "./Heart";
 import Rules from "./Rules";
+import ExtendedMenu from "./ExtendedMenu";
+import MoreGames from "./MoreGames";
 import Stats from "./Stats";
 import CustomCreation from "./CustomCreation";
 import CustomShare from "./CustomShare";
 import ControlBar from "./ControlBar";
+import FallbackInstall from "./FallbackInstall";
+import CustomError from "./CustomError";
 import {
   handleAppInstalled,
   handleBeforeInstallPrompt,
@@ -185,15 +189,7 @@ export default function App() {
       return <Rules setDisplay={setDisplay}></Rules>;
 
     case "heart":
-      return (
-        <Heart
-          setDisplay={setDisplay}
-          appName="Crossjig"
-          shareText="Check out this word puzzle!"
-          repoName="crossjig"
-          url="https://crossjig.com"
-        />
-      );
+      return <Heart setDisplay={setDisplay} repoName="crossjig" />;
 
     case "settings":
       return (
@@ -217,12 +213,12 @@ export default function App() {
         <div className="App" id="crossjig">
           <div id="exitDaily">
             <button
-              id="helpButton"
+              id="hintIcon"
               className="controlButton"
               disabled={dailyGameState.gameIsSolved}
               onClick={() => dailyDispatchGameState({action: "getHint"})}
             ></button>
-            <button id="exitDailyButton" onClick={() => setDisplay("game")}>
+            <button id="exitDailyIcon" onClick={() => setDisplay("game")}>
               Exit daily challenge
             </button>
           </div>
@@ -248,7 +244,8 @@ export default function App() {
         <div className="App" id="crossjig">
           <div id="controls">
             <button
-              id="playCustomButton"
+              id="playIcon"
+              className="controlButton"
               onClick={() => {
                 let representativeString;
                 try {
@@ -269,11 +266,11 @@ export default function App() {
                 });
                 setDisplay("game");
               }}
-            >
-              Play
-            </button>
+            ></button>
+
             <button
-              id="shareCustomButton"
+              id="shareIcon"
+              className="controlButton"
               onClick={() => {
                 let representativeString;
                 try {
@@ -304,11 +301,10 @@ export default function App() {
                   setDisplay("customShare");
                 }
               }}
-            >
-              Share
-            </button>
+            ></button>
+
             <button id="exitCustomButton" onClick={() => setDisplay("game")}>
-              Cancel
+              Exit custom creation
             </button>
           </div>
           <CustomCreation
@@ -322,20 +318,11 @@ export default function App() {
 
     case "customError":
       return (
-        <div className="App customMessage">
-          <div>{`Your game isn't ready to share yet: \n\n${customState.invalidReason}`}</div>
-          <button
-            onClick={() => {
-              dispatchCustomState({
-                action: "updateInvalidReason",
-                invalidReason: "",
-              });
-              setDisplay("custom");
-            }}
-          >
-            Ok
-          </button>
-        </div>
+        <CustomError
+          invalidReason={customState.invalidReason}
+          dispatchCustomState={dispatchCustomState}
+          setDisplay={setDisplay}
+        ></CustomError>
       );
 
     case "customShare":
@@ -347,14 +334,27 @@ export default function App() {
         ></CustomShare>
       );
 
+    case "moreGames":
+      return <MoreGames setDisplay={setDisplay}></MoreGames>;
+
+    case "fallbackInstall":
+      return <FallbackInstall setDisplay={setDisplay}></FallbackInstall>;
+
+    case "extendedMenu":
+      return (
+        <ExtendedMenu
+          setDisplay={setDisplay}
+          setInstallPromptEvent={setInstallPromptEvent}
+          showInstallButton={showInstallButton}
+          installPromptEvent={installPromptEvent}
+        ></ExtendedMenu>
+      );
+
     default:
       return (
         <div className="App" id="crossjig">
           <ControlBar
             setDisplay={setDisplay}
-            setInstallPromptEvent={setInstallPromptEvent}
-            showInstallButton={showInstallButton}
-            installPromptEvent={installPromptEvent}
             dispatchGameState={dispatchGameState}
             gameState={gameState}
             dailyIsSolved={dailyGameState.gameIsSolved}
diff --git a/src/components/ControlBar.js b/src/components/ControlBar.js
index 59303c2..0fec7db 100644
--- a/src/components/ControlBar.js
+++ b/src/components/ControlBar.js
@@ -1,19 +1,11 @@
 import React from "react";
-import {handleInstall} from "../common/handleInstall";
+import {handleShare} from "../common/handleShare";
 
-function ControlBar({
-  dispatchGameState,
-  gameState,
-  setDisplay,
-  setInstallPromptEvent,
-  showInstallButton,
-  installPromptEvent,
-  dailyIsSolved,
-}) {
+function ControlBar({dispatchGameState, gameState, setDisplay, dailyIsSolved}) {
   return (
     <div id="controls">
       <button
-        id="newGameButton"
+        id="newGameIcon"
         className="controlButton"
         onClick={() => {
           dispatchGameState({
@@ -22,35 +14,17 @@ function ControlBar({
           });
         }}
       ></button>
+
       <button
-        id="helpButton"
+        id="hintIcon"
         className="controlButton"
         disabled={gameState.gameIsSolved}
         onClick={() => dispatchGameState({action: "getHint"})}
       ></button>
-      <button
-        id="settingsButton"
-        className="controlButton"
-        onClick={() => setDisplay("settings")}
-      ></button>
-      <button
-        id="rulesButton"
-        className="controlButton"
-        onClick={() => setDisplay("rules")}
-      ></button>
-      <button
-        id="customButton"
-        className="controlButton"
-        onClick={() => setDisplay("custom")}
-      ></button>
-      <button
-        id="heartButton"
-        className="controlButton"
-        onClick={() => setDisplay("heart")}
-      ></button>
+
       {dailyIsSolved ? (
         <button
-          id="calendarButtonSolved"
+          id="calendarIconSolved"
           className="controlButton"
           onClick={() => {
             dispatchGameState({action: "clearStreakIfNeeded"});
@@ -59,22 +33,39 @@ function ControlBar({
         ></button>
       ) : (
         <button
-          id="calendarButton"
+          id="calendarIcon"
           className="controlButton"
           onClick={() => setDisplay("daily")}
         ></button>
       )}
-      {showInstallButton && installPromptEvent ? (
+
+      <button
+        id="customIcon"
+        className="controlButton"
+        onClick={() => setDisplay("custom")}
+      ></button>
+
+      {navigator.canShare ? (
         <button
-          id="installButton"
+          id="shareIcon"
           className="controlButton"
           onClick={() =>
-            handleInstall(installPromptEvent, setInstallPromptEvent)
+            handleShare({
+              appName: "Crossjig",
+              text: "Check out this word game!",
+              url: "https://crossjig.com",
+            })
           }
         ></button>
       ) : (
         <></>
       )}
+
+      <button
+        id="menuIcon"
+        className="controlButton"
+        onClick={() => setDisplay("extendedMenu")}
+      ></button>
     </div>
   );
 }
diff --git a/src/components/CustomError.js b/src/components/CustomError.js
new file mode 100644
index 0000000..cc4317a
--- /dev/null
+++ b/src/components/CustomError.js
@@ -0,0 +1,24 @@
+import React from "react";
+
+export default function CustomError({
+  invalidReason,
+  dispatchCustomState,
+  setDisplay,
+}) {
+  return (
+    <div className="App customMessage">
+      <div>{`Your custom crossjig isn't ready to play yet: \n\n${invalidReason}`}</div>
+      <button
+        onClick={() => {
+          dispatchCustomState({
+            action: "updateInvalidReason",
+            invalidReason: "",
+          });
+          setDisplay("custom");
+        }}
+      >
+        Ok
+      </button>
+    </div>
+  );
+}
diff --git a/src/components/ExtendedMenu.js b/src/components/ExtendedMenu.js
new file mode 100644
index 0000000..90b7b17
--- /dev/null
+++ b/src/components/ExtendedMenu.js
@@ -0,0 +1,80 @@
+import React from "react";
+import packageJson from "../../package.json";
+import {handleShare} from "../common/handleShare";
+import {handleInstall} from "../common/handleInstall";
+
+export default function ExtendedMenu({
+  setDisplay,
+  setInstallPromptEvent,
+  showInstallButton,
+  installPromptEvent,
+}) {
+  return (
+    <div className="App" id="extendedMenu">
+      <h1>Crossjig</h1>
+      <button onClick={() => setDisplay("rules")}>
+        <div id="rulesIcon" className="extendedMenuIcon"></div>
+        <span>How to play</span>
+      </button>
+
+      <button onClick={() => setDisplay("custom")}>
+        <div id="customIcon" className="extendedMenuIcon"></div>
+        <span>Create a custom crossjig</span>
+      </button>
+
+      <button onClick={() => setDisplay("settings")}>
+        <div id="settingsIcon" className="extendedMenuIcon"></div>
+        <span>Settings</span>
+      </button>
+
+      {navigator.canShare ? (
+        <button
+          onClick={() =>
+            handleShare({
+              appName: "Crossjig",
+              text: "Check out this word game!",
+              url: "https://crossjig.com",
+            })
+          }
+        >
+          <div id="shareIcon" className="extendedMenuIcon"></div>
+          <span>Share</span>
+        </button>
+      ) : (
+        <></>
+      )}
+
+      {showInstallButton && installPromptEvent ? (
+        <button
+          onClick={() =>
+            handleInstall(installPromptEvent, setInstallPromptEvent)
+          }
+        >
+          <div id="installIcon" className="extendedMenuIcon"></div>
+          <span>{"Install (offline play and easy access)"}</span>
+        </button>
+      ) : (
+        <button onClick={() => setDisplay("fallbackInstall")}>
+          <div id="installIcon" className="extendedMenuIcon"></div>
+          <span>{"Install (play offline)"}</span>
+        </button>
+      )}
+
+      <button onClick={() => setDisplay("moreGames")}>
+        <div id="heartIcon" className="extendedMenuIcon"></div>
+        <span>More games like this</span>
+      </button>
+
+      <button onClick={() => setDisplay("heart")}>
+        <div id="infoIcon" className="extendedMenuIcon"></div>
+        <span>Info and feedback</span>
+      </button>
+
+      <button onClick={() => setDisplay("game")}>
+        <div id="backIcon" className="extendedMenuIcon"></div>
+        <span>Return to game</span>
+      </button>
+      <small id="version">version {packageJson.version}</small>
+    </div>
+  );
+}
diff --git a/src/components/FallbackInstall.js b/src/components/FallbackInstall.js
new file mode 100644
index 0000000..f23ad81
--- /dev/null
+++ b/src/components/FallbackInstall.js
@@ -0,0 +1,31 @@
+import React from "react";
+
+export default function FallbackInstall({setDisplay}) {
+  return (
+    <div className="App info">
+      <div className="infoText">
+        <p>
+          Crossjig is a progressive web app, which means that it can be
+          installed on your phone for easy access and offline play.
+        </p>
+        <p>
+          {
+            "For iOS: Open Crossjig in Safari and select 'add to home screen' (under the Safari 'share' menu)."
+          }
+        </p>
+        <p>
+          {
+            "For Android: Open Crossjig in Chrome and select 'install' (under the Chrome ⋮ menu)."
+          }
+        </p>
+        <p>
+          For the most up-to-date instructions, do a web search for how to
+          install a progressive web app for your phone.
+        </p>
+      </div>
+      <button className="close" onClick={() => setDisplay("game")}>
+        Close
+      </button>
+    </div>
+  );
+}
diff --git a/src/components/Heart.js b/src/components/Heart.js
index 47decdb..1b0cb98 100644
--- a/src/components/Heart.js
+++ b/src/components/Heart.js
@@ -1,26 +1,9 @@
 import React from "react";
-import Share from "./Share";
 
-export default function Heart({setDisplay, appName, shareText, repoName, url}) {
+export default function Heart({setDisplay, repoName}) {
   return (
     <div className="App info">
-      <h1>{appName}</h1>
       <div className="infoText">
-        {"Like this game? Share it with your friends.\n\n"}
-        {<Share appName={appName} text={shareText} url={url}></Share>}
-        {`\n`}
-        {<hr></hr>}
-        {`\n`}
-        {`Want more games? Check out `}
-        <a href="https://lexlet.com">Lexlet</a>
-        {" and "}
-        <a href="https://skedwards88.github.io/blobble/">Blobble</a>
-        {" or see all of our puzzle games "}
-        <a href="https://skedwards88.github.io/">here</a>
-        {`. `}
-        {`\n\n`}
-        {<hr></hr>}
-        {`\n`}
         {"Feedback? "}
         <a
           href={`https://github.com/skedwards88/${repoName}/issues/new/choose`}
@@ -36,6 +19,7 @@ export default function Heart({setDisplay, appName, shareText, repoName, url}) {
           skedwards88/word_lists
         </a>
         {`.`}
+        {`\n\n`}
         {<hr></hr>}
         {`\n`}
         <a href="./privacy.html">Privacy policy</a>
diff --git a/src/components/MoreGames.js b/src/components/MoreGames.js
new file mode 100644
index 0000000..d49622c
--- /dev/null
+++ b/src/components/MoreGames.js
@@ -0,0 +1,20 @@
+import React from "react";
+
+export default function MoreGames({setDisplay}) {
+  return (
+    <div className="App info">
+      <div className="infoText">
+        {`Want more games? Check out `}
+        <a href="https://lexlet.com">Lexlet</a>
+        {" and "}
+        <a href="https://skedwards88.github.io/blobble/">Blobble</a>
+        {" or see all of our puzzle games "}
+        <a href="https://skedwards88.github.io/">here</a>
+        {`. `}
+      </div>
+      <button className="close" onClick={() => setDisplay("game")}>
+        Close
+      </button>
+    </div>
+  );
+}
diff --git a/src/components/Rules.js b/src/components/Rules.js
index eb1ebee..31b7fb8 100644
--- a/src/components/Rules.js
+++ b/src/components/Rules.js
@@ -5,34 +5,37 @@ export default function Rules({setDisplay}) {
   return (
     <div className="App rules">
       <h1 id="rulesHeader">Crossjig: How to play</h1>
-      <p id="rulesText">
-        <b>Drag</b> the pieces to the board to make words vertically and
-        horizontally. All words must connect.
-        <br />
-        <br />
-        <b>Drag a blank space</b> to move the whole puzzle.
-        <br />
-        <br />
-        <b>Long press and drag</b> to move a group of touching pieces.
-        <br />
-        <br />
-        Click the <b>magnifying glass</b> to get a hint. A hint will move all
-        pieces that are on the board to their correct location. If all pieces
-        are already in the correct location, a new piece will be added to the
-        board.
-        <br />
-        <br />
-        Click the <b>gear</b> to change the number of pieces in the puzzle.
-        <br />
-        <br />
-        Click the <b>calendar</b> to play the daily challenge. The daily
-        challenge is easiest on Monday and gets harder over the week.
-        <br />
-        <br />
-        Click the <b>pencil</b> to build your own puzzle to share with friends.
-        <br />
-        <br />
-      </p>
+      <div id="rulesText">
+        <p>
+          <b>Drag</b> the pieces to the board to make words vertically and
+          horizontally. All words must connect.
+        </p>
+        <p>
+          <b>Drag a blank space</b> to move the whole puzzle.
+        </p>
+        <p>
+          <b>Long press and drag</b> to move a group of touching pieces.
+        </p>
+        <p>
+          Click <div id="hintIcon" className="rulesIcon"></div> to get a hint. A
+          hint will move all pieces that are on the board to their correct
+          location. If all pieces are already in the correct location, a new
+          piece will be added to the board.
+        </p>
+        <p>
+          Click <div id="settingsIcon" className="rulesIcon"></div> to change
+          the number of pieces in the puzzle or the validity indication.
+        </p>
+        <p>
+          Click <div id="calendarIconSolved" className="rulesIcon"></div> to
+          play the daily challenge. The daily challenge is easiest on Monday and
+          gets harder over the week.
+        </p>
+        <p>
+          Click <div id="customIcon" className="rulesIcon"></div> to build your
+          own crossjig to share with friends.
+        </p>
+      </div>
       <button
         id="rulesClose"
         className="close"
diff --git a/src/images/icons/back.svg b/src/images/icons/back.svg
new file mode 100644
index 0000000..e122a95
--- /dev/null
+++ b/src/images/icons/back.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1200pt" height="1200pt" version="1.1" viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg">
+ <path d="m996 564h-705.09l262.54-262.55c14.062-14.051 14.062-36.852 0-50.902-14.051-14.062-36.852-14.062-50.902 0l-349.46 349.45 349.46 349.45c7.0156 7.0312 16.234 10.547 25.449 10.547s18.434-3.5156 25.453-10.547c14.062-14.051 14.062-36.852 0-50.902l-262.54-262.55h705.09c19.883 0 36-16.117 36-36s-16.117-36-36-36z" fill="#fff"/>
+</svg>
diff --git a/src/images/icons/help.svg b/src/images/icons/hint.svg
similarity index 100%
rename from src/images/icons/help.svg
rename to src/images/icons/hint.svg
diff --git a/src/images/icons/menu.svg b/src/images/icons/menu.svg
new file mode 100644
index 0000000..edf8975
--- /dev/null
+++ b/src/images/icons/menu.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1200pt" height="1200pt" version="1.1" viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg">
+ <path d="m162.52 300c0-20.719 16.781-37.5 37.5-37.5h799.97c20.719 0 37.5 16.781 37.5 37.5s-16.781 37.5-37.5 37.5h-799.97c-20.719 0-37.5-16.781-37.5-37.5zm0 300c0-20.719 16.781-37.5 37.5-37.5h799.97c20.719 0 37.5 16.781 37.5 37.5s-16.781 37.5-37.5 37.5h-799.97c-20.719 0-37.5-16.781-37.5-37.5zm37.5 262.5c-20.719 0-37.5 16.781-37.5 37.5s16.781 37.5 37.5 37.5h799.97c20.719 0 37.5-16.781 37.5-37.5s-16.781-37.5-37.5-37.5z" fill="#fff" fill-rule="evenodd"/>
+</svg>
diff --git a/src/images/icons/more.svg b/src/images/icons/more.svg
new file mode 100644
index 0000000..e81781b
--- /dev/null
+++ b/src/images/icons/more.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1200pt" height="1200pt" version="1.1" viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg">
+ <path d="m1075 523.5-207.47-285.98c-24.609-33.656-63.844-53.578-105.52-53.531h-531.98c-71.719 0.28125-129.74 58.312-130.03 130.03v571.97c0.28125 71.719 58.312 129.74 130.03 130.03h531.98c41.672 0.046875 80.906-19.875 105.52-53.531l207.52-285.98h-0.046875c33.516-45.516 33.516-107.48 0-153zm-56.484 111.98-207.52 285.98v0.046875c-11.625 15.844-30.328 25.031-49.969 24.469h-531c-33.234 0-60.234-26.766-60.516-60v-571.97c0.28125-33.234 27.281-60 60.516-60h531.98c19.688-0.5625 38.344 8.625 50.016 24.469l207.52 285.98-0.046875 0.046875c15.234 21.328 14.812 50.062-0.98438 70.969zm-256.5-35.484c0 23.438-14.109 44.625-35.812 53.578-21.656 9-46.594 4.0312-63.188-12.562s-21.562-41.531-12.562-63.234c8.9531-21.656 30.094-35.766 53.578-35.766 15.375 0 30.141 6.0938 41.016 16.969s16.969 25.641 16.969 41.016zm-174 0c0.1875 23.719-13.922 45.188-35.766 54.422-21.844 9.1875-47.062 4.3125-63.938-12.375-16.828-16.688-21.938-41.906-12.891-63.797 9.0469-21.938 30.375-36.234 54.094-36.234 15.469-0.14062 30.328 5.9062 41.344 16.781 10.969 10.922 17.156 25.734 17.156 41.203zm-174.52 0c0.23438 23.766-13.969 45.281-35.859 54.469-21.891 9.1406-47.203 4.1719-63.984-12.609s-21.75-42.094-12.609-63.984c9.1875-21.891 30.703-36.094 54.469-35.859 15.375 0 30.141 6.0938 41.016 16.969s16.969 25.641 16.969 41.016z" fill="#fff"/>
+</svg>
diff --git a/src/images/icons/play.svg b/src/images/icons/play.svg
new file mode 100644
index 0000000..574cb17
--- /dev/null
+++ b/src/images/icons/play.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1200pt" height="1200pt" version="1.1" viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg">
+ <path d="m983.86 402.98c67.359 42.844 108.14 117.19 108.14 197.02s-40.781 154.18-108.14 197.02l-516.98 328.97c-71.906 45.797-163.03 48.703-237.74 7.7344-74.719-41.016-121.13-119.48-121.13-204.71v-657.98c0-85.219 46.406-163.69 121.13-204.71 74.719-40.969 165.84-38.062 237.74 7.7344l516.98 328.97zm-40.266 63.281-516.98-328.97c-48.797-31.031-110.67-33.094-161.34-5.2031-50.719 27.844-82.219 81.094-82.219 138.94v657.98c0 57.844 31.5 111.09 82.219 138.94s112.59 25.828 161.34-5.2031l516.98-328.97c45.75-29.109 73.406-79.547 73.406-133.74 0-54.191-27.656-104.62-73.406-133.74z" fill="#fff" fill-rule="evenodd"/>
+</svg>
diff --git a/src/images/icons/question.svg b/src/images/icons/question.svg
new file mode 100644
index 0000000..e8f844a
--- /dev/null
+++ b/src/images/icons/question.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1200pt" height="1200pt" version="1.1" viewBox="-50 -50 1300 1300" xmlns="http://www.w3.org/2000/svg">
+ <g fill="#fff">
+  <path d="m600 96c133.67 0 261.86 53.102 356.38 147.62 94.516 94.52 147.62 222.71 147.62 356.38s-53.102 261.86-147.62 356.38c-94.52 94.516-222.71 147.62-356.38 147.62s-261.86-53.102-356.38-147.62c-94.516-94.52-147.62-222.71-147.62-356.38s53.102-261.86 147.62-356.38c94.52-94.516 222.71-147.62 356.38-147.62m0-96c-159.13 0-311.74 63.215-424.27 175.73-112.52 112.52-175.73 265.14-175.73 424.27s63.215 311.74 175.73 424.27c112.52 112.52 265.14 175.73 424.27 175.73s311.74-63.215 424.27-175.73c112.52-112.52 175.73-265.14 175.73-424.27s-63.215-311.74-175.73-424.27c-112.52-112.52-265.14-175.73-424.27-175.73z"/>
+  <path d="m605.52 282 12.961 1.1992c32.09 2.0234 63.492 10.172 92.52 24 25.926 11.938 48.027 30.84 63.84 54.602 12.043 18.715 19.488 40.016 21.719 62.16 2.5078 19.148 0.95703 38.609-4.5586 57.117-6.8477 22.086-18.766 42.262-34.801 58.922-18.34 18.359-38.438 34.879-60 49.32-12 8.2812-22.68 16.922-33.961 25.559-10.203 8.4375-17.887 19.523-22.199 32.043-2.3984 6.4805-5.1602 12.961-7.6797 19.441v-0.003906c-3.0938 8.6211-8.7539 16.082-16.223 21.383-7.4648 5.3008-16.379 8.1836-25.535 8.2578-10.367 1.1367-20.852-0.51953-30.363-4.8008-14.613-7.1406-24.793-20.996-27.238-37.078-3.8242-22.273 1.3555-45.148 14.398-63.602 10.387-15.18 23.102-28.625 37.68-39.84 15.719-12.84 31.922-25.078 48-37.922v0.003907c13.348-10.215 24.523-22.984 32.883-37.562 6.4922-12.367 9.1602-26.387 7.6641-40.277-1.4961-13.887-7.0898-27.02-16.066-37.723-9.5156-10.375-22.152-17.367-36-19.918-18.434-4.3047-37.645-3.9727-55.918 0.95703-18.965 5.1797-34.758 18.309-43.32 36-5.6406 10.559-10.559 21.359-15.84 32.039v0.003906c-3.875 8.0742-9.1094 15.422-15.48 21.719-11.164 9.8047-25.895 14.543-40.68 13.078-8.9922-0.23047-17.801-2.6172-25.68-6.957-7.2578-3.7539-13.336-9.4375-17.57-16.426-4.2344-6.9844-6.4609-15.004-6.4297-23.176-0.61328-26.5 7.8555-52.414 24-73.441 18.664-25.23 43.441-45.297 72-58.316 21.539-10.227 44.602-16.871 68.281-19.684l13.441-1.3203z"/>
+  <path d="m581.64 918c-3.6016-0.71875-7.1992-1.3203-10.68-2.2812-21.312-5.5781-38.477-21.348-45.832-42.113-7.3555-20.766-3.9492-43.824 9.0977-61.574 13.051-17.75 34.043-27.883 56.059-27.059 22.012 0.82422 42.188 12.504 53.871 31.18 11.68 18.676 13.352 41.926 4.4609 62.082-8.8906 20.156-27.188 34.602-48.855 38.566l-5.8789 1.1992z"/>
+ </g>
+</svg>
diff --git a/src/images/icons/share.svg b/src/images/icons/share.svg
new file mode 100644
index 0000000..bea9b3c
--- /dev/null
+++ b/src/images/icons/share.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1200pt" height="1200pt" version="1.1" viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg">
+ <path d="m937.08 844.08c-46.078 0-87.703 19.312-117.47 50.297l-402.14-242.86c5.3906-16.219 8.5312-33.469 8.5312-51.469s-3-35.297-8.5312-51.469l402.14-242.86c29.625 30.938 71.297 50.297 117.47 50.297 89.859 0 162.94-73.078 162.94-162.94 0-89.859-73.078-162.94-162.94-162.94s-162.94 73.078-162.94 162.94c0 18 3 35.297 8.5312 51.469l-402.28 242.76c-29.625-30.938-71.297-50.297-117.47-50.297-89.859 0-162.94 73.078-162.94 162.94s73.078 162.94 162.94 162.94c46.078 0 87.703-19.312 117.47-50.297l402.14 242.86c-5.3906 16.219-8.5312 33.469-8.5312 51.469 0 89.859 73.078 162.94 162.94 162.94 89.859 0 162.94-73.078 162.94-162.94s-73.078-162.94-162.94-162.94zm0-742.55c50.391 0 91.453 41.062 91.453 91.453s-41.062 91.453-91.453 91.453-91.453-41.062-91.453-91.453 41.062-91.453 91.453-91.453zm-674.16 589.92c-50.391 0-91.453-41.062-91.453-91.453s41.062-91.453 91.453-91.453 91.453 41.062 91.453 91.453-41.062 91.453-91.453 91.453zm674.06 407.06c-50.391 0-91.453-41.062-91.453-91.453s41.062-91.453 91.453-91.453 91.453 41.062 91.453 91.453-41.062 91.453-91.453 91.453z" fill="#fff"/>
+</svg>
diff --git a/src/styles/App.css b/src/styles/App.css
index d645cad..03c11ba 100644
--- a/src/styles/App.css
+++ b/src/styles/App.css
@@ -337,7 +337,6 @@ body:has(#drag-group) {
   font-size: calc(var(--default-font-size) * 0.75);
 }
 
-.customMessage > div,
 .customMessage > a {
   white-space: pre-line;
   text-wrap: wrap;
diff --git a/src/styles/ControlBar.css b/src/styles/ControlBar.css
index 4c201c5..85a82f0 100644
--- a/src/styles/ControlBar.css
+++ b/src/styles/ControlBar.css
@@ -1,3 +1,43 @@
+#extendedMenu {
+  display: flex;
+  flex-direction: column;
+  width: fit-content;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+#extendedMenu > h1 {
+  text-align: center;
+}
+
+#extendedMenu > button {
+  background-color: var(--dark-color);
+  color: var(--light-color);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: left;
+}
+
+#extendedMenu span {
+  padding: 10px;
+}
+
+.extendedMenuIcon {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  border: 0;
+  width: var(--default-font-size);
+  height: var(--default-font-size);
+  background-color: transparent;
+  padding: 1px 6px;
+}
+
+#version {
+  text-align: center;
+}
+
 #controls {
   display: flex;
   justify-content: space-evenly;
@@ -19,41 +59,65 @@
   padding: 1px 6px;
 }
 
-#settingsButton {
+#settingsIcon {
   background-image: url("../images/icons/settings.svg");
 }
 
-#newGameButton {
+#newGameIcon {
   background-image: url("../images/icons/new_game.svg");
 }
 
-#helpButton {
-  background-image: url("../images/icons/help.svg");
+#hintIcon {
+  background-image: url("../images/icons/hint.svg");
 }
 
-#rulesButton {
-  background-image: url("../images/icons/info.svg");
+#rulesIcon {
+  background-image: url("../images/icons/question.svg");
 }
 
-#heartButton {
+#heartIcon {
   background-image: url("../images/icons/heart.svg");
 }
 
-#customButton {
+#customIcon {
   background-image: url("../images/icons/custom.svg");
 }
 
-#calendarButton {
+#shareIcon {
+  background-image: url("../images/icons/share.svg");
+}
+
+#backIcon {
+  background-image: url("../images/icons/back.svg");
+}
+
+#moreIcon {
+  background-image: url("../images/icons/more.svg");
+}
+
+#menuIcon {
+  background-image: url("../images/icons/menu.svg");
+}
+
+#infoIcon {
+  background-image: url("../images/icons/info.svg");
+}
+
+#calendarIcon {
   background-image:
     url("../images/icons/daily.svg"),
     radial-gradient(circle, rgb(239 239 239 / 60%) 30%, rgb(55 54 71));
   width: calc(var(--default-font-size) * 2);
 }
 
-#calendarButtonSolved {
+#calendarIconSolved {
   background-image: url("../images/icons/daily.svg");
 }
 
-#installButton {
+#installIcon {
   background-image: url("../images/icons/install.svg");
 }
+
+#playIcon {
+  background-image: url("../images/icons/play.svg");
+}
diff --git a/src/styles/Rules.css b/src/styles/Rules.css
index d7b64bd..7fa416c 100644
--- a/src/styles/Rules.css
+++ b/src/styles/Rules.css
@@ -12,6 +12,15 @@
   align-items: center;
 }
 
+.rulesIcon {
+  display: inline-block;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  width: calc(var(--default-font-size) * 0.75);
+  height: calc(var(--default-font-size) * 0.75);
+}
+
 #rulesHeader {
   grid-area: header;
 }