diff --git a/apps/cube.json b/apps/cube.json
index 4e75a5e..7eed856 100644
--- a/apps/cube.json
+++ b/apps/cube.json
@@ -3,8 +3,7 @@
     "oneliner": "3D FPS with classic deathmatch games",
     "dev": "Caleb Foust and others",
     "art": {
-        "background": "/gameassets/cube/background.png",
-        "logo": "http://sauerbraten.org/cube2logo_wide.png"
+        "background": "/gameassets/cube/poster.jpeg"
     },
     "frame": "https://sourga.me",
     "tags": ["shooter"],
diff --git a/pages/_app.tsx b/pages/_app.tsx
index f616fa0..b38215f 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -10,9 +10,12 @@ import { AnimatePresence, motion } from 'framer-motion'
 import 'react-responsive-carousel/lib/styles/carousel.min.css'
 import { useRouter } from 'next/router'
 import Script from 'next/script'
+import { GoogleAuthProvider, getAuth, onAuthStateChanged, signInAnonymously, signInWithPopup, signOut, updateProfile } from 'firebase/auth'
+import { AvatarCreator } from '@readyplayerme/rpm-react-sdk'
+import { Avatar } from '@readyplayerme/visage'
 import 'atropos/css'
 import { initializeApp } from 'firebase/app'
-import { getAuth, onAuthStateChanged, signInAnonymously } from 'firebase/auth'
+import Link from 'next/link'
 
 export default function App({ Component, pageProps }: AppProps) {
 	let { asPath } = useRouter()
@@ -35,7 +38,19 @@ export default function App({ Component, pageProps }: AppProps) {
 	}, [])
 
 	let router = useRouter()
-	let [gameID, setGameID] = useState('wizards')
+	let [avatarCreated, setAvatarCreated] = useState<string>('https://readyplayerme.github.io/visage/male.glb')
+	let [user, setUser] = useState<any>()
+
+	useMemo(async () => {
+		onAuthStateChanged(getAuth(), (user) => {
+			if (user) {
+				setUser(user)
+				if (user.photoURL) {
+					setAvatarCreated(user.photoURL)
+				}
+			}
+		})
+	}, [])
 
 	return (
 		<>
@@ -67,14 +82,123 @@ export default function App({ Component, pageProps }: AppProps) {
 				<meta name="description" content="Games that push the boundaries of the Web." />
 				<meta name="title" content="Parakeet.Games" />
 			</Head>
+			<dialog className='settingsModal modal'>
+				<span className='material-symbols-outlined modalCloseButton' onClick={() => {
+					let settingsModal = document.querySelector('.settingsModal') as HTMLDialogElement
+					settingsModal.close()
+				}}>close</span>
+				{!user && (
+					<p>Loading...</p>
+				)}
+				{user && (
+					<>
+						<Avatar style={{ height: '300px' }} modelSrc={avatarCreated} animationSrc={'/male-idle.glb'} />
+						<h1 style={{ fontSize: '2.0em' }}>{user.displayName || user.email || user.phoneNumber || 'Anonymous Parakeet'}</h1>
+						{user.isAnonymous && <Link
+							href={"#"}
+							onClick={async (e) => {
+								e.preventDefault();
+								let user = await signInWithPopup(
+									getAuth(),
+									new GoogleAuthProvider()
+								);
+								setUser(user.user);
+							}}
+						>
+							<span
+								style={{
+									color: "var(--text)",
+									textDecoration: "underline",
+									fontSize: "1.5rem",
+								}}
+							>
+								Sign in with Google
+							</span>
+						</Link>}
+						{!user.isAnonymous && <>
+							<Link
+								href={`#`}
+								onClick={(e) => {
+									e.preventDefault();
+									updateProfile(user, {
+										displayName: prompt("Enter your new display name:"),
+									});
+								}}
+							>
+								<span
+									style={{
+										color: "var(--text)",
+										textDecoration: "underline",
+										padding: "20px",
+									}}
+								>
+									Change Name
+								</span>
+							</Link>
+							<Link
+								href={`#`}
+								onClick={(e) => {
+									e.preventDefault();
+									let settingsModal = document.querySelector('.settingsModal') as HTMLDialogElement
+									settingsModal.close()
+									let avatarModal = document.querySelector('.avatarModal') as HTMLDialogElement
+									avatarModal.showModal()
+								}}
+							>
+								<span
+									style={{
+										color: "var(--text)",
+										textDecoration: "underline",
+										padding: "20px",
+									}}
+								>
+									Change Avatar
+								</span>
+							</Link>
+							<Link
+								href={`#`}
+								onClick={(e) => {
+									e.preventDefault();
+									signOut(getAuth())
+									setUser(null)
+								}}
+							>
+								<span
+									style={{
+										color: "var(--text)",
+										textDecoration: "underline",
+										padding: "20px",
+									}}
+								>
+									Log Out
+								</span>
+							</Link>
+						</>}
+					</>
+				)}
+			</dialog>
+			<dialog className='avatarModal modal'>
+				{!user && (
+					<p>Loading...</p>
+				)}
+				{user && <div className='avatarBuilder'><AvatarCreator subdomain="parakeet" onAvatarExported={(url) => {
+					setAvatarCreated(url)
+					updateProfile(user, {
+						photoURL: url,
+					})
+					let avatarModal = document.querySelector('.avatarModal') as HTMLDialogElement
+					avatarModal.close()
+					let settingsModal = document.querySelector('.settingsModal') as HTMLDialogElement
+					settingsModal.showModal()
+				}} /></div>}
+			</dialog>
 			<div className='app'>
-				<div style={{
-					position: 'absolute',
-					top: '20px',
-					left: '20px',
-				}}>
-					<img src="/logo.png" style={{ height: '80px', verticalAlign: 'middle' }} />
-				</div>
+				<a className='navSettings' href={'#'} onClick={() => {
+						let settingsModal = document.querySelector('.settingsModal') as HTMLDialogElement
+						settingsModal.showModal()
+					}}>
+						<span className='material-symbols-outlined'>menu</span>
+					</a>
 				<AnimatePresence initial={false} mode="wait">
 					<motion.div
 						key={router.pathname}
@@ -87,10 +211,6 @@ export default function App({ Component, pageProps }: AppProps) {
 					</motion.div>
 				</AnimatePresence>
 			</div>
-			<svg width="0" height="0"><filter id="blur" width="300%" height="300%" x="-0.75" y="-0.75" colorInterpolationFilters="sRGB"><feOffset in="SourceGraphic" result="source-copy"></feOffset><feColorMatrix in="source-copy" type="saturate" values="3" result="saturated-copy"></feColorMatrix><feColorMatrix in="saturated-copy" type="matrix" values="1 0 0 0 0
-                     0 1 0 0 0
-                     0 0 1 0 0
-                     33 33 33 101 -132" result="bright-colors"></feColorMatrix><feMorphology in="bright-colors" operator="dilate" radius="10" result="spread"></feMorphology><feGaussianBlur in="spread" stdDeviation="30" result="ambilight-light"></feGaussianBlur><feOffset in="SourceGraphic" result="source"></feOffset><feComposite in="source" in2="ambilight-light" operator="over"></feComposite></filter></svg>
 		</>
 	)
 }
diff --git a/pages/index.tsx b/pages/index.tsx
index 12d3769..f4d4368 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -6,29 +6,11 @@ import Link from 'next/link'
 import Head from 'next/head'
 import Atropos from 'atropos/react'
 import { readdirSync } from 'fs'
-import { useMemo, useState } from 'react'
-import { Carousel } from 'react-responsive-carousel'
-import { GoogleAuthProvider, getAuth, onAuthStateChanged, signInWithPopup, signOut, updateProfile } from 'firebase/auth'
-import { AvatarCreator } from '@readyplayerme/rpm-react-sdk'
-import { Avatar } from '@readyplayerme/visage'
 
-export default function Home(props: any) {
-	let [searchTerm, setSearchTerm] = useState<string>('')
-	let [searchTags, setSearchTags] = useState<string[]>([])
-	let [avatarCreated, setAvatarCreated] = useState<string>('https://readyplayerme.github.io/visage/male.glb')
-	let [user, setUser] = useState<any>()
+import { Carousel } from 'react-responsive-carousel'
 
-	useMemo(async () => {
-		onAuthStateChanged(getAuth(), (user) => {
-			if (user) {
-				setUser(user)
-				if (user.photoURL) {
-					setAvatarCreated(user.photoURL)
-				}
-			}
-		})
-	}, [])
 
+export default function Home(props: any) {
 	return (
 		<>
 			<div className='home'>
@@ -36,143 +18,10 @@ export default function Home(props: any) {
 					<title>Parakeet</title>
 				</Head>
 				<nav>
-					{/* <Link href={'/'}> */}
 					<h1 style={{ verticalAlign: 'middle', color: 'var(--text)' }} className='navTitle'>
 						<img src={'/logo.png'} alt="Parakeet logo" height={80} className='navLogo' /> <span className='navTitleText'><span style={{ color: 'white', fontFamily: 'Unbounded', fontSize: '1.6em' }}>Parakeet</span>.games</span>
 					</h1>
-					{/* </Link> */}
-					<h2
-						className='navLinks'
-						style={{
-							paddingRight: '20px',
-							verticalAlign: 'middle',
-							color: 'var(--text)',
-						}}
-					>
-						<a href={'#'} onClick={() => {
-							let accountModal = document.querySelector('.accountModal') as HTMLDialogElement
-							accountModal.showModal()
-						}}>
-							<span className='material-symbols-outlined'>account_circle</span>
-						</a>
-
-						{/* <a href={'#'}>
-						<span className='material-symbols-outlined'>code</span>
-					</a> */}
-					</h2>
 				</nav>
-				<dialog className='accountModal modal'>
-					<span className='material-symbols-outlined modalCloseButton' onClick={() => {
-						let accountModal = document.querySelector('.accountModal') as HTMLDialogElement
-						accountModal.close()
-					}}>close</span>
-					{!user && (
-						<p>Loading...</p>
-					)}
-					{user && (
-						<>
-							<Avatar style={{ height: '300px' }} modelSrc={avatarCreated} animationSrc={'/male-idle.glb'} />
-							<h1 style={{ fontSize: '2.0em' }}>{user.displayName || user.email || user.phoneNumber || 'Anonymous Parakeet'}</h1>
-							{user.isAnonymous && <Link
-								href={"#"}
-								onClick={async (e) => {
-									e.preventDefault();
-									let user = await signInWithPopup(
-										getAuth(),
-										new GoogleAuthProvider()
-									);
-									setUser(user.user);
-								}}
-							>
-								<span
-									style={{
-										color: "var(--text)",
-										textDecoration: "underline",
-										fontSize: "1.5rem",
-									}}
-								>
-									Sign in with Google
-								</span>
-								<br /><br />
-								<i>By signing in, you agree to our Privacy Policy and Terms of Service.</i>
-							</Link>}
-							{!user.isAnonymous && <>
-								<Link
-									href={`#`}
-									onClick={(e) => {
-										e.preventDefault();
-										updateProfile(user, {
-											displayName: prompt("Enter your new display name:"),
-										});
-									}}
-								>
-									<span
-										style={{
-											color: "var(--text)",
-											textDecoration: "underline",
-											padding: "20px",
-										}}
-									>
-										Change Name
-									</span>
-								</Link>
-								<Link
-									href={`#`}
-									onClick={(e) => {
-										e.preventDefault();
-										let accountModal = document.querySelector('.accountModal') as HTMLDialogElement
-										accountModal.close()
-										let avatarModal = document.querySelector('.avatarModal') as HTMLDialogElement
-										avatarModal.showModal()
-									}}
-								>
-									<span
-										style={{
-											color: "var(--text)",
-											textDecoration: "underline",
-											padding: "20px",
-										}}
-									>
-										Change Avatar
-									</span>
-								</Link>
-								<Link
-									href={`#`}
-									onClick={(e) => {
-										e.preventDefault();
-										signOut(getAuth())
-										setUser(null)
-									}}
-								>
-									<span
-										style={{
-											color: "var(--text)",
-											textDecoration: "underline",
-											padding: "20px",
-										}}
-									>
-										Log Out
-									</span>
-								</Link>
-							</>}
-						</>
-					)}
-				</dialog>
-				<dialog className='avatarModal modal'>
-					{!user && (
-						<p>Loading...</p>
-					)}
-					{user && <div className='avatarBuilder'><AvatarCreator subdomain="parakeet" onAvatarExported={(url) => {
-						setAvatarCreated(url)
-						updateProfile(user, {
-							photoURL: url,
-						})
-						let avatarModal = document.querySelector('.avatarModal') as HTMLDialogElement
-						avatarModal.close()
-						let accountModal = document.querySelector('.accountModal') as HTMLDialogElement
-						accountModal.showModal()
-					}} /></div>}
-				</dialog>
 				<Carousel showStatus={false} showArrows={true} infiniteLoop={true} showThumbs={false} showIndicators={false} autoPlay={true} transitionTime={700} interval={5000} className='gameotwcontainer hideMeOnMobile'>
 					<div
 						className={'gameotw'}
@@ -210,20 +59,18 @@ export default function Home(props: any) {
 				<div className={'gameList'}>
 					{props.games.map((game: any) => {
 						if (
-							(game.name.replace(/\s+/g, '').toLowerCase().includes(searchTerm) ||
-								searchTerm == '') &&
-							(searchTags.some((tag) => game.tags.includes(tag)) ||
-								searchTags.length === 0)
+							// (game.name.replace(/\s+/g, '').toLowerCase().includes(searchTerm) ||
+							// 	searchTerm == '') &&
+							// (searchTags.some((tag) => game.tags.includes(tag)) ||
+							// 	searchTags.length === 0)
+							true
 						)
 							return (
 								<Link key={game.id} href={`/play/${game.id}`}>
 									<Atropos
 										key={game.id}
 										className='game'
-										highlight={false}
-										shadow={false}
-										rotateTouch={false}
-										rotate={false}
+										rotate={true}
 									>
 										<img
 											className='game-bgart'
@@ -234,14 +81,14 @@ export default function Home(props: any) {
 											<img
 												className='game-emblemart'
 												src={game.art.emblem}
-												data-atropos-offset='5'
+												data-atropos-offset='1'
 												alt=''
 											/>
 										)}
 										{game.art.logo && (
 											<img
 												className='game-logoart'
-												data-atropos-offset='10'
+												data-atropos-offset='2'
 												src={game.art.logo}
 												alt={game.name}
 											/>
diff --git a/pages/play/[id].tsx b/pages/play/[id].tsx
index ad761d1..f476cdc 100644
--- a/pages/play/[id].tsx
+++ b/pages/play/[id].tsx
@@ -8,7 +8,6 @@ import { User, getAuth, onAuthStateChanged } from 'firebase/auth'
 import { useRouter } from 'next/router'
 import { RWebShare } from 'react-web-share'
 import { readdirSync } from 'fs'
-import $ from 'jquery'
 
 function GamePage(props: any) {
 	let [user, setUser] = useState<User>()
@@ -16,11 +15,7 @@ function GamePage(props: any) {
 
 	useEffect(() => {
 		window.addEventListener('message', (event) => {
-			if (event.data === 'open-guide') {
-				$('.guideBox').fadeIn(500)
-			} else if (event.data === 'close-guide') {
-				$('.guideBox').fadeOut(500)
-			} else if (typeof event.data == 'object') {
+			if (typeof event.data == 'object') {
 				if (event.data.title && event.data.description && event.data.parakeetMessageType == 'achievement') {
 					$('.popupTitle').text(event.data.title)
 					$('.popupDescription').text(event.data.description)
@@ -81,52 +76,6 @@ function GamePage(props: any) {
 			>
 				<img src="/logo.png" className='spin' style={{ height: '120px', marginRight: '20px', verticalAlign: 'middle' }} />
 			</div>
-			<div className='guideBox'>
-				<img src={props.game.art.logo} className='guideGameLogo' />
-				<div className='guideMainContent'>
-					{user && <div className='guideMainButton' onClick={() => { }}>
-						<div className='guideButtonContent'>
-							<span className='material-symbols-outlined'>face</span>
-							{user.displayName || 'Anonymous'}
-						</div>
-					</div>}
-					{/* <div className='guideMainButton' onClick={() => { }}>
-						<div className='guideButtonContent'>
-							<span className='material-symbols-outlined'>social_leaderboard</span>
-							Achievements
-						</div>
-					</div> */}
-					<RWebShare data={{
-						title: props.game.name + ' on Parakeet',
-						text: `I'm playing ${props.game.name} on Parakeet.Games! Come join me!`,
-					}}>
-						<div className='guideMainButton'>
-							<div className='guideButtonContent'>
-								<span className='material-symbols-outlined'>share</span>
-								Share
-							</div>
-						</div>
-					</RWebShare>
-					<div className='guideMainButton' onClick={() => router.push('/')}>
-						<div className='guideButtonContent'>
-							<span className='material-symbols-outlined'>logout</span>
-							Exit game
-						</div>
-					</div>
-					{/* <div className='guideMainButton' onClick={() => {
-						((document.querySelector(`#frame-${props.game.id}`) as HTMLIFrameElement).contentWindow as any).focus()
-						setGuideOpened(false)
-					}}>
-						<div className='guideButtonContent'>
-							<span className='material-symbols-outlined'>keyboard_return</span>
-							Return to game
-						</div>
-					</div> */}
-				</div>
-			</div>
-			<img src="/logo.png" className='guideTrigger' onClick={() => {
-				$('.guideBox').fadeToggle(300)
-			}} />
 			<div className='popup'>
 				<span className='material-symbols-outlined popupIcon'>social_leaderboard</span>
 				<span className='popupContent'>
@@ -146,7 +95,7 @@ function GamePage(props: any) {
 					position: 'fixed',
 					bottom: '0',
 					border: 'none',
-					zIndex: 1,
+					zIndex: 100,
 				}}
 			></iframe>
 		</>
diff --git a/public/gameassets/cube/background.png b/public/gameassets/cube/background.png
deleted file mode 100644
index 94d9e61..0000000
Binary files a/public/gameassets/cube/background.png and /dev/null differ
diff --git a/public/gameassets/cube/poster.jpeg b/public/gameassets/cube/poster.jpeg
new file mode 100644
index 0000000..48ee878
Binary files /dev/null and b/public/gameassets/cube/poster.jpeg differ
diff --git a/styles/globals.css b/styles/globals.css
index b710310..c9f0393 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -64,12 +64,31 @@ a {
 }
 
 .modal {
-	padding: 30px;
 	text-align: center;
-	box-shadow: 0 0 16px var(--secondary);
-	border: 5px solid var(--secondary);
 	background: var(--primary);
 	border-radius: var(--radius);
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+}
+
+.modal::backdrop {
+	background: transparent;
+}
+
+.modal[open] {
+    animation: show 0.3s ease normal;
+}
+
+@keyframes show {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
 }
 
 .modal h1 {
@@ -261,10 +280,23 @@ control-arrow {
 	margin-right: 20px;
 }
 
-.navLinks a span {
+.navSettings span {
 	padding: 10px;
-	font-size: 35px;
+	font-size: 30px;
+	margin: 30px;
 	color: var(--text);
+	background-color: var(--primary);
+	border: 3px solid var(--secondary);
+	box-shadow: 0 0 20px var(--secondary);
+	border-radius: 50%;
+}
+
+.navSettings {
+	position: fixed;
+	top: 0;
+	right: 0;
+	z-index: 9999;
+	height: min-content;
 }
 
 nav {
@@ -273,7 +305,8 @@ nav {
 	justify-content: space-between;
 	position: absolute;
 	top: 0;
-	z-index: 9999;
+	z-index: 99;
+	width: 100vw;
 }
 
 nav h2 {
@@ -281,62 +314,6 @@ nav h2 {
 }
 
 /* Play page */
-.guideBox {
-	display: none;
-	z-index: 2;
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100vw;
-	height: 100vh;
-	background: rgba(0, 0, 0, 0.7);
-	backdrop-filter: blur(50px);
-}
-
-.guideTrigger {
-	cursor: pointer;
-	height: 80px;
-	position: fixed;
-	top: 20px;
-	left: 20px;
-	z-index: 3;
-}
-
-.guideGameLogo {
-	position: absolute;
-	top: 20px;
-	right: 20px;
-	height: 60px;
-}
-
-.guideMainContent {
-	position: absolute;
-	top: 100px;
-	width: 90%;
-	padding: 5%;
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: center;
-	align-items: center;
-}
-
-.guideMainButton {
-	cursor: pointer;
-	border: 5px solid var(--secondary);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: 15px;
-	min-width: 200px;
-	min-height: 100px;
-	aspect-ratio: 1 / 1;
-	background-color: var(--primary);
-	backdrop-filter: blur(100px);
-	color: var(--text);
-	margin: 20px;
-	transition: all 0.3s ease;
-	border-radius: var(--radius);
-}
 
 .rws-header {
 	display: none;
@@ -356,23 +333,6 @@ nav h2 {
 	color: var(--text) !important;
 }
 
-.guideMainButton:hover {
-	transition: all 0.1s ease;
-	transform: scale(1.1);
-	box-shadow: 0 0 20px var(--secondary);
-}
-
-.guideButtonContent {
-	text-align: center;
-	font-size: 1.2rem;
-}
-
-.guideButtonContent span {
-	display: block;
-	font-size: 3rem;
-	padding-bottom: 20px;
-}
-
 .popup {
 	z-index: 9999;
 	display: none;
@@ -394,64 +354,31 @@ nav h2 {
 	font-size: 1.4rem;
 }
 
-.heroVideo {
-	filter: url(#blur);
-}
-
-.bigButton {
-	background: var(--secondary);
-	padding: 15px;
-	color: var(--text);
-	border: 5px solid var(--text);
-	box-shadow: 0 0 20px var(--text);
-	font-size: 1.5rem;
-	z-index: 9999;
-	position: relative;
+.carousel .control-arrow, .carousel.carousel-slider .control-arrow {
+	background: transparent !important;
 }
 
 /* Responsive */
 
 @media screen and (max-width: 700px) {
-	nav {
-		/* display: block; */
-		/* text-align: center; */
-	}
-
-	.navTitleText {
-		display: none;
-		/* padding-left: 0; */
-		/* padding-right: 0; */
-	}
-
 	.hideMeOnMobile {
 		display: none !important;
 	}
 
-	.bigButton {
-		background: transparent;
-		border: unset;
-		text-decoration: underline;
+	.navTitleText {
+		display: block;
+		margin-top: 2vh;
 	}
 
 	.gameList {
 		flex-direction: column;
-		margin-top: 6vh;
+		margin-top: 23vh;
 	}
 
 	.game {
-		width: 100vw;
+		width: 90vw;
 		padding: 0;
 		margin-top: 3vh;
-	}
-
-	.game .atropos-inner {
-		box-shadow: unset;
-	}
-
-	.modal {
-		width: 86vw;
-		border-radius: 0;
-		border-left: none;
-		border-right: none;
+		margin-left: 5vw;
 	}
 }