diff --git a/.vscode/settings.json b/.vscode/settings.json
index 32fbb9a..ef74742 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,31 @@
 {
-	"git.ignoreLimitWarning": true
+	"git.ignoreLimitWarning": true,
+	"cSpell.ignoreWords": [
+		"Captchas",
+		"Carrington",
+		"Cavendon",
+		"Customise",
+		"RSMV",
+		"Statethis",
+		"Texttools",
+		"Unbans",
+		"Unmutes",
+		"apos",
+		"autolayout",
+		"clcks",
+		"clicksforms",
+		"colour",
+		"customisation",
+		"getprefix",
+		"hcaptcha",
+		"noopener",
+		"noreferrer",
+		"parpart",
+		"pypi",
+		"setlanguage",
+		"slowmode",
+		"softban",
+		"unban",
+		"viewas"
+	]
 }
\ No newline at end of file
diff --git a/Components/Card.js b/Components/Card.js
index 0673883..00a2df4 100644
--- a/Components/Card.js
+++ b/Components/Card.js
@@ -1,27 +1,25 @@
 import { Component } from "react";
 import Styles from '../styles/Components/card.module.css';
 import react from 'react'
+import { withRouter } from "next/router";
 
 class Card extends Component {
 	constructor(props) {
 		super(props);
-        this.state = {
-            clicked: false,
-        }
     }
 
 	render() {
 		return (
-            <div className={Styles.card + " " + (this.state.clicked ? Styles.clicked : "")} style={{
+            <div className={Styles.card} style={{
                 margin: "0"
-            }} onClick={() => { this.setState({clicked: !this.state.clicked}) }}>
-                <div className={Styles.backgroundGradient + " " + (this.state.clicked ? Styles.clicked : "")} style={{
+            }} onClick={this.props.url ? () => { this.props.router.push(this.props.url)} : null}>
+                <div className={Styles.backgroundGradient} style={{
                     backgroundImage: `linear-gradient(69.44deg, #${this.props.gradient[0]} 0%, #${this.props.gradient[1]} 100%)`
                 }} />
-                <img alt="" className={Styles.backgroundImage} src={`https://assets.clicksminuteper.net/web/waves/card/${this.props.wave}.svg`} draggable={false} />
-                <div className={Styles.panel}>
+                <img alt="" className={Styles.backgroundImage} src={`https://assets.clicks.codes/web/waves/card/${this.props.wave}.svg`} draggable={false} />
+                <div className={Styles.panel} onClick={() => { this.props.url ? () => { this.props.router.push(this.props.url)} : null}}>
                     <div className={Styles.titleContainer}>
-                        <img alt="Project icon" className={Styles.image + " " + (this.state.clicked ? Styles.clicked : "")} src={"https://assets.clicksminuteper.net/" + (this.props.icon ? this.props.icon : this.props.wave) + ".svg"} />
+                        <img alt="Project icon" className={Styles.image} src={"https://assets.clicks.codes/" + (this.props.icon ? this.props.icon : this.props.wave) + ".svg"} />
                         <h1 className={Styles.title}>{this.props.title}</h1>
                     </div>
                     <p className={Styles.subtext}>{this.props.subtext}</p>
@@ -41,8 +39,8 @@
                     </div>
                 </div>
             </div>
-		)
-	}
+        );
+    }
 }
 
 class CardRow extends Component {
@@ -50,7 +48,6 @@
 		super(props);
 	}
 
-
 	render() {
 		return (
             <div className={Styles.container}>
@@ -64,4 +61,6 @@
 	}
 }
 
-export { Card, CardRow };
\ No newline at end of file
+Card = withRouter(Card);
+
+export { Card, CardRow };
diff --git a/Components/Header.js b/Components/Header.js
index 1ec054b..7e96ba6 100644
--- a/Components/Header.js
+++ b/Components/Header.js
@@ -1,64 +1,123 @@
-import { Component, useRef } from "react";
+import React, { useRef } from "react";
 import Styles from '../styles/Components/header.module.css';
 import Head from 'next/head';
+import { useColorMode } from "theme-ui";
+import { useReward } from "react-rewards";
+import ScrollContainer from 'react-indiana-drag-scroll'
 
-class Header extends Component {
-    constructor(props) {
-        super(props);
-        this.keys = []
+function Header(props) {
+    const [ clickTotal, setClickTotal ] = React.useState(0);
+
+    const { reward: reward, isAnimating: isAnimating } = useReward('headerConfetti', 'confetti', {
+        elementSize: 10,
+        elementCount: 150,
+        startVelocity: 35,
+        lifetime: 300,
+        decay: 0.95,
+        spread: 170,
+        position: "absolute",
+        colors: ["#F27878", "#E5AB71", "#E5DC71", "#A1CC65", "#68D49E", "#71AFE5", "#6576CC", "#8D58B2", "#BF5E9F"]
+    });
+    const { reward: disappointment, isAnimating: isDisappointmentAnimating } = useReward('disappointmentConfetti', 'confetti', {
+        elementSize: 25,
+        elementCount: 1,
+        startVelocity: 25,
+        lifetime: 350,
+        decay: 0.95,
+        spread: 0,
+        position: "absolute",
+        colors: ["#E5AB71"]
+    });
+
+    function confetti() {
+        if (!isAnimating && !isDisappointmentAnimating && props.index) {
+            setClickTotal(clickTotal + 1);
+            if (clickTotal > 0 && Math.floor(Math.random() * 3) == 0) {
+                disappointment();
+            } else {
+                reward();
+            }
+        }
     }
 
-    render() {
-        return (
-            <div className={Styles.header} style={{
-                margin: "0",
-                minHeight: this.props.fullscreen ? "100vh" : "calc(100vh - (2 * max(2em, 4vw)) - 1em)",
-            }} id={this.props.id ? this.props.id : null}>
-                <div className={Styles.backgroundGradient} style={{
-                    backgroundImage: `linear-gradient(69.44deg, #${this.props.gradient[0]} 0%, #${this.props.gradient[1]} 100%)`,
-                }} />
-                <Head>
-                    <title>{this.props.nameOverwrite ? this.props.nameOverwrite : this.props.name} - Clicks Minute Per</title>
-                    <meta name="title" content={this.props.name} />
-                    <meta name="og:title" content={this.props.name} />
-                    <meta name="description" content={this.props.subtext} />
-                    <meta name="og:description" content={this.props.subtext} />
-                    <meta name="theme-color" content={"#" + this.props.gradient[1]} />
-                    <meta name="og:theme-color" content={"#" + this.props.gradient[1]} />
-                    <meta name="author" content="Clicks Minute Per" />
-                    <meta name="og:author" content="Clicks Minute Per" />
-                </Head>
-                <img draggable={false} alt="" className={Styles.backgroundImage} src={`https://assets.clicksminuteper.net/${this.props.wave}.svg`} />
-                <div className={Styles.panel}>
-                    <div className={Styles.titleContainer}>
-                        <h1 className={Styles.title}>{this.props.name}</h1>
-                    </div>
-                    <p className={Styles.subtext + " " + (this.props.buttons.length ? Styles.subtextExtra : null)}>{this.props.subtext}</p>
-                    <div className={Styles.buttonLayout}>
+    return (
+        <div className={Styles.header} style={{
+            margin: "0",
+            minHeight: props.fullscreen ? "calc(100vh - 42px)" : "calc(100vh - (4 * max(2em, 4vw)) - 1em)",
+        }} id={props.id ? props.id : null}>
+            <div className={Styles.backgroundGradient} style={{
+                backgroundImage: `linear-gradient(69.44deg, #${props.gradient[0]} 0%, #${props.gradient[1]} 100%)`,
+            }} />
+            <Head>
+                <title>{props.name}</title>
+
+                <meta name="apple-mobile-web-app-capable" content="yes" />
+                <meta name="mobile-web-app-capable" content="yes" />
+                <meta name="viewport" content="width=device-width, minimal-ui" />
+
+                <meta name="title" content={props.name} />
+                <meta name="og:title" content={props.name} />
+                <meta name="description" content={props.embedDescription ? props.embedDescription : props.subtext} />
+                <meta name="og:description" content={props.embedDescription ? props.embedDescription : props.subtext} />
+                <meta name="author" content="Clicks" />
+                <meta name="og:author" content="Clicks" />
+                <meta name="image" content={props.embedImage} />
+                <meta name="og:image" content={props.embedImage} />
+
+                <meta name="theme-color" content={"#000000"} />
+                <meta name="og-color" content={"#" + props.gradient[1]} />
+                <meta name="msapplication-TileColor" content={"#000000"} />
+            </Head>
+            <img draggable={false} alt="" className={Styles.backgroundImage} src={`https://assets.clicks.codes/${props.wave}.svg`} />
+            <div className={Styles.panel}>
+                <div className={Styles.titleContainer}>
+                    <div onClick={confetti}>
                         {
-                            this.props.buttons ? this.props.buttons.map((button, index) => {
-                                return <a
-                                    key={index}
-                                    className={Styles.button}
-                                    style={{ backgroundColor: `#${button.color}`, color: `#${button.buttonText}` }}
-                                    href={button.link}
-                                    onClick={() => { if (button.id) { this.props.callback(this.props.that, button.id) } }}
-                                    target={button.target ? "_blank" : null}
-                                    rel="noreferrer">
-                                    {button.text}
-                                </a>
-                            }) : null
+                            props.customImage?
+                            <img height="64px" width="64px" alt={props.name} className={Styles.headerImage} style={{borderRadius: props.roundImage ? "100vw" : "0"}} src={props.customImage} />
+                            : <></>
                         }
                     </div>
+                    <h1 className={Styles.title}>{props.name}</h1>
                 </div>
-                <span className={Styles.arrowSpan + " " + (this.props.hideArrow ? Styles.arrowHidden : null)} draggable={false}>
-                    <a href="#start" draggable={false}><img alt="Down arrow" src="https://assets.clicksminuteper.net/web/icons/arrow.svg" className={Styles.arrow} draggable={false} style={{
-                        height: "49px", width: "87px"
-                    }}/></a>
-                </span>
+                <p className={Styles.subtext + " " + (props.buttons.length ? Styles.subtextExtra : null)}>{props.subtext}</p>
+                <a href="#skipNav" id="skipNav" style={{display: "none"}} />
+                { props.buttons.length ?
+                    <div className={Styles.buttonOverflow}>
+                        <img className={Styles.indicator + " " + Styles.leftArrow} draggable={false} alt="" src={`https://assets.clicks.codes/web/icons/arrow.svg`}/>
+                        <ScrollContainer
+                            vertical={false}
+                            horizontal={true}
+                            hideScrollbars={true}
+                            nativeMobileScroll={true}
+                            style={{borderRadius: "10px", height: "fit-content"}}
+                        >
+                            <div className={Styles.buttonLayout}>
+                                {
+                                    props.buttons ? props.buttons.map((button, index) => {
+                                        return <a
+                                            key={index}
+                                            className={Styles.button}
+                                            style={{ backgroundColor: `#${button.color}`, color: `#${button.buttonText}` }}
+                                            href={button.link}
+                                            onClick={() => { if (button.id) { props.callback(button.id) } }}
+                                            target={button.target ? "_blank" : null}
+                                            draggable={false}
+                                            rel="noreferrer">
+                                            {button.text}
+                                        </a>
+                                    }) : null
+                                }
+                            </div>
+                        </ScrollContainer>
+                        <img className={Styles.indicator + " " + Styles.rightArrow} draggable={false} alt="" src={`https://assets.clicks.codes/web/icons/arrow.svg`}/>
+                    </div> : <></>
+                }
             </div>
-        )
-    }
+            <div id="headerConfetti" />
+            <div id="disappointmentConfetti" />
+        </div>
+    )
 }
 
 export default Header;
\ No newline at end of file
diff --git a/Components/NavBar.js b/Components/NavBar.js
index 89ef25a..89c8fab 100644
--- a/Components/NavBar.js
+++ b/Components/NavBar.js
@@ -2,69 +2,35 @@
 import Styles from '../styles/Components/navbar.module.css';
 import ThemeChangeButton from './ThemeChangeButton';
 
+class Divider extends Component {
+    render() {
+        return (
+            <>
+                <div className={Styles.divider}></div>
+            </>
+        )
+    }
+}
 
 class NavBar extends Component {
 	constructor(props) {
 		super(props);
-        this.state = {
-            isOpen: false,
-        }
-        this.isTouchDevice = false
-        this.hoverSensor = React.createRef();
 	}
 
-    componentDidMount() {
-        let hasTouchScreen = false;
-        if ("maxTouchPoints" in navigator) {
-            hasTouchScreen = navigator.maxTouchPoints > 0;
-        } else if ("msMaxTouchPoints" in navigator) {
-            hasTouchScreen = navigator.msMaxTouchPoints > 0;
-        } else {
-            const mQ = window.matchMedia && matchMedia("(pointer:coarse)");
-            if (mQ && mQ.media === "(pointer:coarse)") {
-                hasTouchScreen = !!mQ.matches;
-            } else if ("orientation" in window) {
-                hasTouchScreen = true;
-            } else {
-                var UA = navigator.userAgent;
-                hasTouchScreen = /\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) || /\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA);
-            }
-        }
-        if (hasTouchScreen) {
-            this.isTouchDevice = true
-        } else {
-            this.isTouchDevice = false
-        }
-    }
-
-    onClick() {
-        if ( this.isTouchDevice ) {
-            return this.toggleVertical(this)
-        }
-    }
-
-    toggleVertical(prevState, force=null) {
-        this.setState(prevState => ({
-            isOpen: (force === null) ? !prevState.isOpen : force
-        }));
-    }
-
 	render() {
 		return (
             <>
-                <div ref={this.hoverSensor} className={this.isTouchDevice ? (Styles.container + " " + (this.state.isOpen ? Styles.containerOpen : null)) : Styles.containerDesktop + " " + Styles.container}>
-                    <div className={Styles.group}>
-                        <img alt="CMP" className={Styles.headerIcon} src="https://assets.clicksminuteper.net/company/logo/circle.svg" onClick={() => {this.onClick()}}/>
-                        <a href="/#"><img alt="Home" className={Styles.icon} src="https://assets.clicksminuteper.net/web/icons/home.svg"/></a>
-                        <a href="/gps#"><img alt="GPS" className={Styles.icon} src="https://assets.clicksminuteper.net/bots/gps/circle.svg"/></a>
-                        <a href="/rsm#"><img alt="RSM" className={Styles.icon} src="https://assets.clicksminuteper.net/bots/rsm/circle.svg"/></a>
-                        <a href="/clicksforms#"><img alt="ClicksForms" className={Styles.icon} src="https://assets.clicksminuteper.net/bots/clicksforms/circle.svg"/></a>
-                        {/* <a href="/castaway#"><img className={Styles.icon} src="/Icons/CA.svg"/></a> */}
-                        {/* <a href="https://clcks.dev"><img className={Styles.icon} src="/Icons/CL.svg"/></a> */}
-                    </div>
-                    <div className={Styles.group}>
-                        <ThemeChangeButton/>
-                    </div>
+                <div className={Styles.container}>
+                    <a href="#skipNav" className={Styles.skipNav}>Skip navigation</a>
+                    <a className={Styles.icon} href="/"><img alt="Clicks" className={Styles.icon} src="https://assets.clicks.codes/web/logos/clicks.svg" /></a>
+                    <Divider />
+                    <a className={Styles.icon} href="/rsm"><img alt="RSM" className={Styles.icon} src="https://assets.clicks.codes/bots/rsm/circle.svg" /></a>
+                    {/* <a className={Styles.icon} href="/nucleus#"><img alt="Nucleus" className={Styles.icon} src="https://assets.clicks.codes/bots/nucleus/circle.svg" /></a> */}
+                    <a className={Styles.icon} href="/clicksforms"><img alt="ClicksForms" className={Styles.icon} src="https://assets.clicks.codes/bots/clicksforms/circle.svg" /></a>
+                    <a className={Styles.icon} href="/gps"><img alt="GPS" className={Styles.icon} src="https://assets.clicks.codes/bots/gps/circle.svg" /></a>
+                    <a className={Styles.icon} href="/hooky"><img alt="Hooky" className={Styles.icon} src="https://assets.clicks.codes/bots/hooky/circle.svg" /></a>
+                    <Divider />
+                    <ThemeChangeButton/>
                 </div>
             </>
 		)
diff --git a/Components/Panels.js b/Components/Panels.js
index e2e89d9..1ee500f 100644
--- a/Components/Panels.js
+++ b/Components/Panels.js
@@ -16,7 +16,7 @@
 	}
 
 	render() {
-		return <div className={Styles.panel} style={this.getStyle()} id={this.props.id}>
+		return <div className={Styles.panel} style={this.getStyle()} id={this.props.id} tabIndex={0}>
 				{
 					react.Children.toArray(this.props.children).map((child, index) => {
 						return child;
@@ -95,9 +95,15 @@
 }
 
 class Divider extends Component {
+	constructor(props) {
+		super(props);
+	}
+
 	render() {
-		// return <div className={Styles.divider} style={{ backgroundColor: this.props.bound == this.props.name ? "red" : "var(--theme-ui-colors-hint)"}}></div>
-		return <div className={Styles.divider} style={{ backgroundColor: "var(--theme-ui-colors-hint)"}}></div>
+		let highlighted = this.props.toHighlight === this.props.name;
+		return <div className={Styles.divider} style={{
+				backgroundColor: (highlighted && this.props.highlightColour) ? ("#" + this.props.highlightColour) : "var(--theme-ui-colors-hint)"
+			}}>{this.props.forceHighlight}</div>
 	}
 }
 
diff --git a/Components/Texttools.js b/Components/Texttools.js
index b8f6771..2233e9c 100644
--- a/Components/Texttools.js
+++ b/Components/Texttools.js
@@ -44,28 +44,15 @@
 		this.setState({isPopoverOpen: true})
 		setTimeout(() => {
 			this.setState({isPopoverOpen: false})
-		}, 1000)
+		}, 2000)
 	}
 
 	render() {
-		if ( this.props.clickable === false) {
-			return <pre
-				className={Styles.code}
-				style={{color: `#${this.props.colour}`, boxShadow: `0px -3px 10px 2px #424242`}}
-			>{this.props.children}</pre>
-		} else {
-			return <Popover
-				isOpen={this.state.isPopoverOpen}
-				positions={['top', 'bottom', 'left', 'right']} // preferred positions by priority
-				content={<Code colour={this.props.colour} clickable={false}>Copied!</Code>}
-			>
-				<pre
-					className={Styles.code}
-					style={{color: `#${this.props.colour}`}}
-					onClick={() => this.clicked()}
-				>{this.props.children}</pre>
-			</Popover>
-		}
+		return <pre
+			className={Styles.code}
+			style={{color: `#${this.props.colour}`}}
+			onClick={this.props.clickable ? () => this.clicked() : () => this.clicked()}
+		>{this.state.isPopoverOpen ? "Copied!" : this.props.children}</pre>
 	}
 }
 
diff --git a/Components/ThemeChangeButton.js b/Components/ThemeChangeButton.js
index 0a2151b..616c14a 100644
--- a/Components/ThemeChangeButton.js
+++ b/Components/ThemeChangeButton.js
@@ -13,16 +13,16 @@
     });
 
     return (
-        <header>
+        <>
             <a className={Styles.icon + " " + Styles.ThemeChangeButton} onClick={(e) => {
                 e.preventDefault();
                 setColorMode(colorMode === 'light' ? 'dark' : 'light');
-            }}>
-            {
-                !render ? null : (colorMode == 'light' ? <img alt="Light" src="https://assets.clicksminuteper.net/web/icons/light.svg" /> : <img alt="Dark" src="https://assets.clicksminuteper.net/web/icons/dark.svg" />)
-            }
+            }} href="#">
+                <img className={Styles.icon} alt="Theme" src={"https://assets.clicks.codes/web/icons/" + (
+                    colorMode == 'light' ? "light-white" : "dark"
+                ) + ".svg"} />
             </a>
-        </header>
+        </>
     )
 }
 
diff --git a/package.json b/package.json
index fb0032f..c59f7bb 100644
--- a/package.json
+++ b/package.json
@@ -4,12 +4,13 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "next build",
+    "build": "ANALYZE=true NODE_OPTIONS=--openssl-legacy-provider NODE_ENV=production next build",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
     "@emotion/is-prop-valid": "^1.1.1",
+    "@next/bundle-analyzer": "^12.1.6",
     "@svgr/webpack": "^5.5.0",
     "axios": "^0.21.1",
     "js-cookie": "^3.0.1",
@@ -17,17 +18,22 @@
     "mongodb": "^4.1.1",
     "next": "11.1.2",
     "next-redux-wrapper": "^7.0.4",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-draggable": "^4.4.5",
     "react-fade-in": "^2.0.1",
     "react-fast-marquee": "^1.3.1",
     "react-hcaptcha": "^0.1.1",
     "react-in-viewport": "^1.0.0-alpha.20",
+    "react-indiana-drag-scroll": "^2.1.0",
     "react-redux": "^7.2.4",
+    "react-rewards": "^2.0.3",
     "react-tiny-popover": "^7.0.1",
+    "react-use-draggable-scroll": "^0.4.2",
     "redux": "^4.1.1",
     "redux-thunk": "^2.3.0",
-    "theme-ui": "^0.12.0"
+    "theme-ui": "^0.12.0",
+    "use-draggable-scroll": "^0.1.0"
   },
   "devDependencies": {
     "eslint": "7.32.0",
diff --git a/pages/403.js b/pages/403.js
index 51da470..c6b966c 100644
--- a/pages/403.js
+++ b/pages/403.js
@@ -16,7 +16,6 @@
 					gradient={["F27878", "D96B6B"]}
 					wave="web/waves/header/rsm"
 					buttons={[{color: "F27878", buttonText: "ffffff", text: "Go Home", link: "/#"}]}
-					hideArrow={true}
 					fullscreen={true}
 				/>
 			</>
diff --git a/pages/404.js b/pages/404.js
index fc521ec..103c513 100644
--- a/pages/404.js
+++ b/pages/404.js
@@ -18,10 +18,9 @@
 					buttons={[
 						{color: "F27878", buttonText: "ffffff", text: "Go Home", link: "/#"},
 						{color: "F27878", buttonText: "ffffff", text: "Send Error",
-							link: `mailto:staff@clicksminuteper.net?subject=Website%20Error%20Report&body=I%20got%20a%20404%20on%20the%20page%20%5BPlease%20Copy%20Website%20Link%20Here%5D`,
+							link: `mailto:staff@clicks.codes?subject=Website%20Error%20Report&body=I%20got%20a%20404%20on%20the%20page%20%5BPlease%20Copy%20Website%20Link%20Here%5D`,
 							target: true
 					}]}
-					hideArrow={true}
 					fullscreen={true}
 				/>
 			</>
diff --git a/pages/418.js b/pages/418.js
index dd3b042..9fdf0cd 100644
--- a/pages/418.js
+++ b/pages/418.js
@@ -16,7 +16,6 @@
 					gradient={["F27878", "D96B6B"]}
 					wave="web/waves/header/rsm"
 					buttons={[{color: "F27878", buttonText: "ffffff", text: "Go Home", link: "/#"}]}
-					hideArrow={true}
 					fullscreen={true}
 				/>
 			</>
diff --git a/pages/500.js b/pages/500.js
index a39f019..3f74c40 100644
--- a/pages/500.js
+++ b/pages/500.js
@@ -18,10 +18,9 @@
 					buttons={[
 						{color: "F27878", buttonText: "ffffff", text: "Go Home", link: "/#"},
 						{color: "F27878", buttonText: "ffffff", text: "Send Error",
-							link: `mailto:staff@clicksminuteper.net?subject=Website%20Error%20Report&body=I%20got%20a%20500%20on%20the%20page%20%5BPlease%20Copy%20Website%20Link%20Here%5D`,
+							link: `mailto:staff@clicks.codes?subject=Website%20Error%20Report&body=I%20got%20a%20500%20on%20the%20page%20%5BPlease%20Copy%20Website%20Link%20Here%5D`,
 							target: true
 					}]}
-					hideArrow={true}
 					fullscreen={true}
 				/>
 			</>
diff --git a/pages/_app.js b/pages/_app.js
index f019489..2ed76e6 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,6 +1,7 @@
 import '../styles/globals.css';
 import NavBar from '../Components/NavBar';
 import { ThemeProvider } from 'theme-ui';
+import Styles from '../styles/globals.module.css';
 
 const theme = {
     config: {
@@ -42,8 +43,9 @@
 function App({ Component, pageProps }) {
   return <>
     <ThemeProvider theme={theme}>
-      <Component {...pageProps} />
       <NavBar />
+      <Component {...pageProps} />
+      <div className={Styles.container} />
     </ThemeProvider>
   </>
 }
diff --git a/pages/api/rsmv/validate.js b/pages/api/rsmv/validate.js
index 0133405..d73c467 100644
--- a/pages/api/rsmv/validate.js
+++ b/pages/api/rsmv/validate.js
@@ -1,30 +1,22 @@
-import { MongoClient } from 'mongodb';
+import Axios from 'axios';
 
-
-const url = 'mongodb://rsm:LJMy*orVFAATQ5PaX7EKXq74&HCDFaLE@192.168.101.2:27017/rsm';
-const db = 'rsm';
-const collection = 'rsmv-tokens'
-
-const Validate = (req, res) => {
-    return new Promise((resolve, reject) => {
-        MongoClient.connect(url, async function(err, client) {
-            let db_response = await client.db(db).collection(collection).findOne({code: req.body.code});
-
-            if (!db_response) return resolve(res.status(404).end());
-            if (db_response.timestamp + (1800) >= Date.now()) return resolve(res.status(410));
-
-            let props = {
-                user: db_response.user,
-                role: db_response.role,
-                role_name: db_response.role_name,
-                guild: db_response.guild,
-                guild_name: db_response.guild_name,
-                guild_icon_url: db_response.guild_icon_url,
-                guild_size: db_response.guild_size
-            }
-            return resolve(res.status(200).send(props));
-        })
-    })
+const Validate = async (req, res) => {
+    try {
+        var out = await Axios.get(`http://192.168.102.7:10000/verify/${req.body.code}`)
+        out = out.data
+        let props = {
+            user: out.user,
+            role: out.role,
+            role_name: out.role_name,
+            guild: out.guild,
+            guild_name: out.guild_name,
+            guild_icon_url: out.guild_icon_url,
+            guild_size: out.guild_size
+        }
+        return res.status(200).send(props)
+    } catch (err) {
+        return res.status(400).end()
+    }
 }
 
 export default Validate;
\ No newline at end of file
diff --git a/pages/castaway.js b/pages/castaway.js
index c82fbd0..9ad8ca8 100644
--- a/pages/castaway.js
+++ b/pages/castaway.js
@@ -12,7 +12,6 @@
         buttons={[
           {color: "78ECF2", buttonText: "000000", link: "#timeline", text: "Timeline"}
         ]}
-        hideArrow={true}
       />
       <AutoLayout>
         <Panel halfSize={false} id="timeline">
diff --git a/pages/clicksforms.js b/pages/clicksforms.js
index 35f55fb..e4d96dc 100644
--- a/pages/clicksforms.js
+++ b/pages/clicksforms.js
@@ -13,16 +13,17 @@
     };
   }
 
-  highlightSection(that, section) {
-    console.log(section);
-    that.setState({toHighlight: section});
+  highlightSection(section) {
+    this.setState({toHighlight: section});
   }
 
   render() {
     return (
       <>
         <Header
-          name="ClicksForms"
+          name={"Clicks​Forms"}
+          customImage={"https://assets.clicks.codes/web/logos/clicksforms.svg"}
+          embedImage="https://assets.clicks.codes/bots/clicksforms/normal.png"
           subtext="Custom forms on Discord"
           gradient={["71AFE5", "6576CC"]}
           wave="web/waves/header/clicksforms"
@@ -32,14 +33,12 @@
             {id: "privacy", color: "6576CC", buttonText: "FFFFFF", link: "#privacy", text: "Privacy"},
             {id: "invite", color: "775EBF", buttonText: "FFFFFF", link: "#invite", text: "Invite"}
           ]}
-          hideArrow={true}
-          that={this}
-          callback={this.highlightSection}
+          callback={() => this.highlightSection()}
         />
         <AutoLayout>
           <Panel halfSize={true} id="commands">
             <Title>Commands</Title>
-            <Divider bound={this.state.toHighlight} name="commands"/>
+            <Divider toHighlight={this.state.toHighlight} highlightColour="6576CC" name="commands"/>
             <Text>Standard commands to use ClicksForms</Text>
             <List colour="6576CC">
               <ListItem><Code colour="6576CC">/accept</Code> Completes a form you are asked to fill in.</ListItem>
@@ -51,34 +50,35 @@
               <ListItem><Code colour="6576CC">/manage</Code> Lets you manage your servers forms.</ListItem>
             </List>
           </Panel>
-          <Panel halfSize={true} id="services">
+          <Panel halfSize={true} id="services" style={this.state.toHighlight == "services" ? {border: "solid 10px red"} : {}}>
             <Title>Services</Title>
-            <Divider  bound={this.state.toHighlight} name="services"/>
+            <Divider toHighlight={this.state.toHighlight} highlightColour="6576CC" name="services"/>
             <Text>ClicksForms supports services such as <a href="https://docs.google.com/forms">Google Forms</a> through our Add-on.</Text>
             <Text>Our API is public. You can view it <Link href="/clicksforms/docs">here</Link>.</Text>
           </Panel>
           <Panel halfSize={true} id="privacy">
             <Title>Privacy</Title>
-            <Divider  bound={this.state.toHighlight} name="privacy"/>
+            <Divider toHighlight={this.state.toHighlight} highlightColour="6576CC" name="privacy"/>
             <Text>You should always know what we know and store about you, so <a href="https://clicksminuteper.github.io/policies/clicksforms">here</a> is the complete list.</Text>
             <Text>We also have a list of terms for using ClicksForms, it can be viewed <a href="https://clicksminuteper.github.io/policies/clicksformstos">here</a>.</Text>
           </Panel>
           <Panel halfSize={true} id="invite">
             <Title>Invite</Title>
-            <Divider  bound={this.state.toHighlight} name="invite"/>
+            <Divider toHighlight={this.state.toHighlight} highlightColour="6576CC" name="invite"/>
             <CardRow><Card
               wave="clicksforms"
               icon="bots/clicksforms/circle"
               buttonText={"FFFFFF"} gradient={["71AFE5", "6576CC"]}
-              title="Invite"
+              title="ClicksForms"
               subtext="Invite ClicksForms to your server"
               buttons={[
                 {color: "775EBF", link: "https://discord.com/api/oauth2/authorize?client_id=805392054678192169&permissions=2416307200&scope=bot%20applications.commands", text: "Invite"}
               ]}
+              url="https://discord.com/api/oauth2/authorize?client_id=805392054678192169&permissions=2416307200&scope=bot%20applications.commands"
             /></CardRow>
           </Panel>
         </AutoLayout>
       </>
     )
   }
-}
\ No newline at end of file
+}
diff --git a/pages/clicksforms/docs.js b/pages/clicksforms/docs.js
index cc2d584..46f3ee7 100644
--- a/pages/clicksforms/docs.js
+++ b/pages/clicksforms/docs.js
@@ -18,7 +18,6 @@
 //           {color: "6576CC", buttonText: "FFFFFF", link: "#structures", text: "Structures"},
 //           {color: "775EBF", buttonText: "FFFFFF", link: "#invite", text: "Invite"}
 //         ]}
-//         hideArrow={true}
 //       />
 //       <AutoLayout>
 //         <Panel halfSize={false} id="timeline">
diff --git a/pages/clicksforms/error/deleted.js b/pages/clicksforms/error/deleted.js
index 82fcc14..0d7a49b 100644
--- a/pages/clicksforms/error/deleted.js
+++ b/pages/clicksforms/error/deleted.js
@@ -14,7 +14,6 @@
                 gradient={["F27878", "D96B6B"]}
                 wave="web/waves/header/rsm"
                 buttons={[]}
-                hideArrow={true}
                 fullscreen={true}
             />
         )
diff --git a/pages/clicksforms/error/nocode.js b/pages/clicksforms/error/nocode.js
index 1f91d93..dfb7b6e 100644
--- a/pages/clicksforms/error/nocode.js
+++ b/pages/clicksforms/error/nocode.js
@@ -14,7 +14,6 @@
                 gradient={["F27878", "D96B6B"]}
                 wave="web/waves/header/rsm"
                 buttons={[]}
-                hideArrow={true}
                 fullscreen={true}
             />
         )
diff --git a/pages/clicksforms/error/unknown.js b/pages/clicksforms/error/unknown.js
index 4cb9bea..e3ab125 100644
--- a/pages/clicksforms/error/unknown.js
+++ b/pages/clicksforms/error/unknown.js
@@ -14,7 +14,6 @@
                 gradient={["F27878", "D96B6B"]}
                 wave="web/waves/header/rsm"
                 buttons={[]}
-                hideArrow={true}
                 fullscreen={true}
             />
         )
diff --git a/pages/clicksforms/form.js b/pages/clicksforms/form.js
index 47b2275..c950e73 100644
--- a/pages/clicksforms/form.js
+++ b/pages/clicksforms/form.js
@@ -9,7 +9,6 @@
 }
 
 	render() {
-        console.log(this.props)
 		return (
 			<>
                 <Header
@@ -19,7 +18,6 @@
                     wave="web/waves/header/clicksforms"
                     buttons={[]}
                 />
-                <div id="start" />
                 <div className={Styles.form}>
                     <div className={Styles.header}>
                         Once completing this.props, your response will be recorded
@@ -51,7 +49,6 @@
 }
 
 export async function getServerSideProps(ctx) {
-    console.log("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA")
     if(!ctx.query.code) {
         return {
             redirect: {
@@ -60,11 +57,10 @@
             }
         }
     }
-    const code = fetch(`https://cf.bots.clicksminuteper.net/code/${ctx.query.code}/token/BkjTUmNPk8S1aPVIYBt8rAUGQF692C8BEscJS9jGDwEtDJcy78uCVsHgRI1dspseGFoatakhWPHTAmYH42zhPpOjoaN1N9eLU7hB`, {
+    const code = fetch(`https://cf.bots.clicks.codes/code/${ctx.query.code}/token/BkjTUmNPk8S1aPVIYBt8rAUGQF692C8BEscJS9jGDwEtDJcy78uCVsHgRI1dspseGFoatakhWPHTAmYH42zhPpOjoaN1N9eLU7hB`, {
         method: "GET",
         mode: "cors"
     })
-    console.log(code)
     if ( (await code).status == 404 ) {
         return {
             redirect: {
@@ -81,8 +77,6 @@
         }
     }
 
-    console.log(code.data)
-
     return {
         props: {
             data: code.data
diff --git a/pages/cpm.js b/pages/cpm.js
index e3cf768..97bffee 100644
--- a/pages/cpm.js
+++ b/pages/cpm.js
@@ -1,3 +1,5 @@
+/* This file has been kept as part of the easter egg. No domain will redirect to it. The page will not be updated in the future. */
+
 import { Card, CardRow } from '../Components/Card';
 import Header from '../Components/Header';
 import { AutoLayout, Panel, Title, Subtitle, Text, Divider } from '../Components/Panels';
@@ -12,7 +14,6 @@
         wave="web/waves/header/cmp"
         buttons={[]}
       />
-      <p id="start" />
       <AutoLayout>
         <Panel halfSize={false}>
           <Title>Projects</Title>
diff --git a/pages/gps.js b/pages/gps.js
index 971c419..8b2e194 100644
--- a/pages/gps.js
+++ b/pages/gps.js
@@ -16,7 +16,6 @@
           {color: "71AFE5", buttonText: "FFFFFF", link: "#commands", text: "Commands"},
           {color: "6576CC", buttonText: "FFFFFF", link: "#invite", text: "Invite"}
         ]}
-        hideArrow={true}
       />
       <AutoLayout>
         <Panel halfSize={false} id="features">
@@ -88,11 +87,12 @@
               wave="gps"
               icon="bots/gps/circle"
               buttonText={"FFFFFF"} gradient={["78ECF2", "71AFE5"]}
-              title="Invite"
+              title="GPS"
               subtext="Invite GPS to your server"
               buttons={[
                 {color: "6576CC", link: "https://discordapp.com/oauth2/authorize?client_id=679361555732627476&scope=bot&permissions=130048", text: "Invite"}
               ]}
+              url="https://discordapp.com/oauth2/authorize?client_id=679361555732627476&scope=bot&permissions=130048"
             />
           </CardRow>
         </Panel>
diff --git a/pages/hooky.js b/pages/hooky.js
index f8fe17f..b204daf 100644
--- a/pages/hooky.js
+++ b/pages/hooky.js
@@ -13,7 +13,6 @@
         buttons={[
           {color: "EDC575", buttonText: "000000", link: "#invite", text: "Invite"}
         ]}
-        hideArrow={true}
       />
       <AutoLayout>
         <Panel halfSize={false} id="invite">
@@ -24,11 +23,12 @@
               wave="hooky"
               icon="bots/hooky/circle"
               buttonText={"000000"} gradient={["424242", "8D8D8D"]}
-              title="Invite"
+              title="Hooky"
               subtext="Invite Hooky to your server"
               buttons={[
                 {color: "EDC575", link: "https://discord.com/oauth2/authorize?client_id=752188923505279037&scope=bot&permissions=536882176", text: "Invite"}
               ]}
+              url="https://discord.com/oauth2/authorize?client_id=752188923505279037&scope=bot&permissions=536882176"
             />
           </CardRow>
         </Panel>
diff --git a/pages/index.js b/pages/index.js
index a72d401..f801b79 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -6,13 +6,15 @@
   return (
     <>
       <Header
-        name="Clicks Minute Per"
-        subtext="Custom Made Programs"
+        name="Clicks"
+        subtext="// TODO: Fix this massive security issue"
+        customImage="https://assets.clicks.codes/web/logos/clicks.svg"
+        embedImage="https://assets.clicks.codes/web/logos/clicks.png"
         gradient={["6576CC", "4B5899"]}
         wave="web/waves/header/cmp"
         buttons={[]}
+        index={true}
       />
-      <p id="start" />
       <AutoLayout>
         <Panel halfSize={false}>
           <Title>Projects</Title>
@@ -23,46 +25,50 @@
               icon="bots/gps/circle"
               buttons={[
                 {color: "6576CC", link: "https://discordapp.com/oauth2/authorize?client_id=679361555732627476&scope=bot&permissions=130048", text: "Invite"},
+                {color: "6576CC", link: "/gps", text: "About"}
               ]}
               buttonText={"FFFFFF"} gradient={["78ECF2", "71AFE5"]}
+              url="/gps"
             />
             <Card
               wave="rsm" title="RSM" subtext="Moderation Redefined"
               icon="bots/rsm/circle"
               buttons={[
                 {color: "424242", link: "https://discord.com/api/oauth2/authorize?client_id=715989276382462053&permissions=121295465718&scope=bot%20applications.commands",text:"Invite"},
+                {color: "424242", link: "/rsm", text:"About"}
               ]}
               buttonText={"FFFFFF"} gradient={["F27878", "D96B6B"]}
+              url="/rsm"
             />
             <Card
               wave="clicksforms" title="ClicksForms" subtext="Create custom forms for Discord"
               icon="bots/clicksforms/circle"
               buttons={[
+                {color: "775EBF", link: "https://clicksminuteper.github.io/docs/clicksforms", text:"API", newTab: true},
                 {color: "775EBF", link: "https://discord.com/api/oauth2/authorize?client_id=805392054678192169&permissions=2416307200&scope=bot%20applications.commands",text:"Invite"},
+                {color: "775EBF", link: "/clicksforms", text: "About"}
               ]}
               buttonText={"FFFFFF"} gradient={["71AFE5", "6576CC"]}
+              url="/clicksforms"
             />
             <Card
               wave="castaway" title="Castaway" subtext="Stranded on Discord"
               icon="bots/castaway/circle"
               buttons={[
+                {color: "F2D478", link: "/castaway", text: "About"}
               ]}
               buttonText={"000000"} gradient={["71AFE5", "78ECF2"]}
+              url="/castaway"
             />
             <Card
               wave="hooky" title="Hooky" subtext="Webhook protection for Discord"
               icon="bots/hooky/circle"
               buttons={[
                 {color: "EDC575", link: "https://discord.com/oauth2/authorize?client_id=752188923505279037&scope=bot&permissions=536882176", text: "Invite"},
+                {color: "EDC575", link: "/hooky", text: "About"}
               ]}
               buttonText={"000000"} gradient={["424242", "8D8D8D"]}
-            />
-            <Card
-              wave="clcks" title="Clcks" subtext="Clicks Minute Per web apps"
-              icon="web/icons/clcks"
-              buttons={[
-              ]}
-              buttonText={"000000"} gradient={["C4C4C4", "8D8D8D"]}
+              url="/hooky"
             />
           </CardRow>
         </Panel>
@@ -78,6 +84,7 @@
                 {color: "424242", link: "https://github.com/clicksminuteper", text: "Visit"}
               ]}
               buttonText={"FFFFFF"} gradient={["FFFFFF", "C4C4C4"]}
+              url="https://github.com/clicksminuteper"
             />
             <Card
               wave="pypi" title="PyPi" subtext="View our modules for python"
@@ -86,6 +93,7 @@
                 {color: "FFC91E", link: "https://pypi.org/user/ClicksMinutePer/", text: "Visit"}
               ]}
               buttonText={"000000"} gradient={["2F6490", "3775A8"]}
+              url="https://pypi.org/user/ClicksMinutePer/"
             />
           </CardRow>
         </Panel>
@@ -94,14 +102,15 @@
           <Divider />
           <Text>Talk to us and ask us anything!</Text>
           <CardRow>
-          <Card
-            wave="discord" title="Discord" subtext="Join our Discord server to talk with the community"
-            icon="web/icons/discord"
-            buttons={[
-              {color: "404EED", link: "https://discord.gg/bPaNnxe", text: "Join"}
-            ]}
-            buttonText={"FFFFFF"} gradient={["404EED", "404EED"]}
-          />
+            <Card
+              wave="discord" title="Discord" subtext="Join our Discord server to talk with the community"
+              icon="web/icons/discord"
+              buttons={[
+                {color: "404EED", link: "https://discord.gg/bPaNnxe", text: "Join"}
+              ]}
+              buttonText={"FFFFFF"} gradient={["404EED", "404EED"]}
+              url="https://discord.gg/bPaNnxe"
+            />
           </CardRow>
         </Panel>
       </AutoLayout>
diff --git a/pages/rsm.js b/pages/rsm.js
index 8f63c30..b1e9233 100644
--- a/pages/rsm.js
+++ b/pages/rsm.js
@@ -28,7 +28,6 @@
           {color: "424242", buttonText: "FFFFFF", link: "#privacy", text: "Privacy"},
           {color: "F27878", buttonText: "FFFFFF", link: "#invite", text: "Invite"}
         ]}
-        hideArrow={true}
       />
       <AutoLayout>
         <Panel halfSize={true} id="commands">
@@ -100,11 +99,12 @@
               wave="rsm"
               icon="bots/rsm/circle"
               buttonText={"FFFFFF"} gradient={["F27878", "D96B6B"]}
-              title="Invite"
+              title="RSM"
               subtext="Invite RSM to your server"
               buttons={[
                   {color: "424242", link: "https://discord.com/api/oauth2/authorize?client_id=715989276382462053&permissions=121295465718&scope=bot%20applications.commands", text: "Invite"}
               ]}
+              url="https://discord.com/api/oauth2/authorize?client_id=715989276382462053&permissions=121295465718&scope=bot%20applications.commands"
             />
           </CardRow>
         </Panel>
diff --git a/pages/rsmv/failure.js b/pages/rsmv/failure.js
index 1248893..f3b0feb 100644
--- a/pages/rsmv/failure.js
+++ b/pages/rsmv/failure.js
@@ -10,11 +10,10 @@
         return (
             <Header
                 name="Verification failed"
-                subtext={<p>Please try again, and if the error persists please contact us at <a href="mailto:verification@clicksminuteper.net" target="_blank" rel="noopener noreferrer">verification@clicksminuteper.net</a></p>}
+                subtext={<p>Please try again, and if the error persists please contact us at <a href="mailto:verification@clicks.codes" target="_blank" rel="noopener noreferrer">verification@clicks.codes</a></p>}
                 gradient={["F27878", "D96B6B"]}
                 wave="web/waves/header/rsm"
                 buttons={[]}
-                hideArrow={true}
                 fullscreen={true}
             />
         )
diff --git a/pages/rsmv/index.js b/pages/rsmv/index.js
index 12f4dea..175a271 100644
--- a/pages/rsmv/index.js
+++ b/pages/rsmv/index.js
@@ -57,7 +57,6 @@
             gid:cls.props.gID,
             code:cls.props.code
         });
-        console.log(code.status)
         if (code.status === 200 ) return Router.push('/rsmv/success','/rsmv')
         else return Router.push('/rsmv/failure','/rsmv')
     }
@@ -65,20 +64,13 @@
     render() {
         return <>
             <Header
-                name={
-                    <>
-                        <img alt="Server icon" style={{borderRadius: "50%", height: "64px", width: "auto"}} src={this.props.guild_icon_url} />
-                        <br />
-                        {this.props.guild_name}
-                    </>
-                }
-                nameOverwrite="Verify"
+                name="Verify"
+                customImage={this.props.guild_icon_url}
                 subtext={`${this.props.memberCount} members`}
                 gradient={["F27878", "D96B6B"]}
                 wave="web/waves/header/rsm"
                 buttons={[]}
             />
-            <p id="start" />
             <AutoLayout>
                 <Panel>
                     <Text>Complete the check below to join {this.props.guild_name}</Text>
diff --git a/pages/rsmv/rsmvtesting.js b/pages/rsmv/rsmvtesting.js
index 4a271fa..8587221 100644
--- a/pages/rsmv/rsmvtesting.js
+++ b/pages/rsmv/rsmvtesting.js
@@ -47,7 +47,6 @@
             gid:cls.props.gID,
             code:cls.props.code
         });
-        console.log(code.status)
         if (code.status === 200 ) return Router.push('/rsmv/success','/rsmv')
         else return Router.push('/rsmv/failure','/rsmv')
     }
@@ -68,7 +67,6 @@
                 wave="web/waves/header/rsm"
                 buttons={[]}
             />
-            <p id="start" />
             <AutoLayout>
                 <Panel>
                     <Text>Complete the check below to join ERROR</Text>
diff --git a/pages/rsmv/success.js b/pages/rsmv/success.js
index 484c0bf..3cf1e4f 100644
--- a/pages/rsmv/success.js
+++ b/pages/rsmv/success.js
@@ -14,7 +14,6 @@
                 gradient={["65CC76", "60B258"]}
                 wave="web/waves/header/rsm"
                 buttons={[]}
-                hideArrow={true}
                 fullscreen={true}
             />
         )
diff --git a/pages/support.js b/pages/support.js
index b89df34..1c35a68 100644
--- a/pages/support.js
+++ b/pages/support.js
@@ -16,7 +16,7 @@
         <Panel halfSize={true}>
           <Title>Email</Title>
           <Divider />
-          <Text>Send us an email at <a href="mailto:support@clicksminuteper.net">support@clicksminuteper.net</a> and we will get back to you as quick as possible.</Text>
+          <Text>Send us an email at <a href="mailto:support@clicks.codes">support@clicks.codes</a> and we will get back to you as quick as possible.</Text>
         </Panel>
         <Panel halfSize={true}>
           <Title>Discord</Title>
diff --git a/pages/supporters.js b/pages/supporters.js
index d456f35..d07482e 100644
--- a/pages/supporters.js
+++ b/pages/supporters.js
@@ -88,7 +88,6 @@
                 gradient={["71AFE5", "6576CC"]}
                 wave="web/waves/header/clicksforms"
                 buttons={[]}
-                hideArrow={true}
             />
             <AutoLayout>
                 <Panel halfSize={false}>
diff --git a/styles/Components/card.module.css b/styles/Components/card.module.css
index 775be5c..5b269fa 100644
--- a/styles/Components/card.module.css
+++ b/styles/Components/card.module.css
@@ -33,11 +33,9 @@
 	margin: 100px;
 	transition: filter 0.3s ease-in-out;
 	transition: transform 0.15s ease-in-out;
-
-	transition: all 10s ease-in-out;
 }
 .card:hover {
-	transform: scale(1.025);
+	transform: translateY(-5px);
 	cursor: pointer;
 }
 
@@ -121,9 +119,6 @@
 }
 
 @media (max-width: 500px) {
-	.card {
-		height: 254px;
-	}
 }
 
 
diff --git a/styles/Components/header.module.css b/styles/Components/header.module.css
index d37417d..e37ea1c 100644
--- a/styles/Components/header.module.css
+++ b/styles/Components/header.module.css
@@ -1,11 +1,13 @@
 .backgroundImage {
 	position: absolute;
-	bottom: -10px;
-	width: calc(100% + 6px);
-	border-radius: 0 0 16.5px 16.5px;
+	bottom: 0;
+	/* bottom: 50vh;
+	transform: translateY(50%); */
+	width: 100%;
 	filter: var(--theme-ui-colors-cardFilter);
 	transition: filter 0.3s ease-in-out;
 }
+
 .backgroundGradient {
 	position: absolute;
 	bottom: 0;
@@ -53,6 +55,7 @@
     color: var(--theme-ui-colors-text);
 	transition: color 0.3s ease-in-out;
 	word-break: break-word;
+	font-variant-ligatures: none;
 }
 
 .subtext {
@@ -70,52 +73,33 @@
     margin-bottom: 40px;
 }
 
-@keyframes arrow-slide {
-    0% {
-        -webkit-transform: translateY(0);
-                transform: translateY(0);
-    }
-    50% {
-        -webkit-transform: translateY(-1em);
-                transform: translateY(-1em);
-    }
-    100% {
-        -webkit-transform: translateY(0);
-                transform: translateY(0);
-    }
-}
-.arrow {
-    -webkit-animation: arrow-slide 2s ease-in-out infinite both;
-            animation: arrow-slide 2s ease-in-out infinite both;
-}
-
-.arrowSpan {
-    position: absolute;
-    bottom: min(10vh, 1em);
-    width: 100%;
-    text-align: center;
-}
-
-.arrowHidden {
-    display: none;
-}
-
 .buttonLayout {
 	display: flex;
 	flex-direction: row;
+	justify-content: flex-start;
+	align-items: center;
+	flex-wrap: nowrap;
+	height: fit-content;
+}
+.buttonOverflow {
+	display: flex;
+	flex-direction: row;
 	justify-content: flex-end;
 	align-items: center;
-	flex-wrap: wrap;
-	padding: 0px;
+	overflow-x: hidden;
+	flex-wrap: nowrap;
 	position: absolute;
 	bottom: 5px;
 	right: 5px;
+	width: calc(100% - 10px);
+	height: auto;
+	border-radius: 10px;
 }
 
 .button {
 	display: flex;
 	flex-direction: row;
-	align-items: flex-start;
+	align-items: flex-end;
 	justify-content: right;
 	position: static;
 	flex: none;
@@ -126,3 +110,35 @@
 	padding: 5px 10px;
 	border-radius: 8px;
 }
+
+.titleContainer {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	flex-wrap: wrap;
+	padding: 0px;
+}
+
+.headerImage {
+	width: auto;
+	height: 64px;
+	object-fit: cover;
+	object-position: center;
+	transition: filter 0.3s ease-in-out;
+	margin-bottom: 20px;
+}
+
+.indicator {
+	height: auto;
+	width: 24px;
+	margin-inline: 5px;
+	padding: 0;
+}
+
+.leftArrow {
+	transform: rotate(90deg);
+}
+.rightArrow {
+	transform: rotate(270deg);
+}
\ No newline at end of file
diff --git a/styles/Components/navbar.module.css b/styles/Components/navbar.module.css
index 88aa580..ecbf786 100644
--- a/styles/Components/navbar.module.css
+++ b/styles/Components/navbar.module.css
@@ -1,134 +1,45 @@
-.container {
-    display: flex;
-    flex-direction: column;
-    justify-content: top;
-    align-items: center;
+.icon {
+    height: 32px;
+    margin: 0;
+    padding: 0;
+    width: 32px;
+}
 
+.container {
     position: fixed;
     top: 0;
-    left: 0;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    flex-direction: row;
+    gap: 10px;
+
+    height: 42px;
+    padding: 5px;
+    padding-left: 25px;
+
+    z-index: 69;
+}
+
+.divider {
+    height: 100%;
+    width: 3px;
+    border-radius: 100vh;
+    background-color: #424242;
+}
+
+.skipNav {
+    width: 0%;
     overflow: hidden;
-    margin: 20px;
-
-    width: 64px;
-    max-height: 64px;
-    padding-bottom: -1px;
-    height: auto;
-
-    border-radius: 32px;
-    transition: 0.5s ease-in-out;
-}
-.group {
-    display: flex;
-    flex-direction: column;
-    justify-content: top;
-    align-items: center;
-
-    background-color: var(--theme-ui-colors-cardBackground);
-    transition: background-color 0.3s ease-in-out;
-    backdrop-filter: blur(2px);
-    border-radius: 32px;
-
-    width: 64px;
-    margin-bottom: 20px;
-    padding-top: 7px;
+    color: white;
+    max-lines: 1;
+    text-overflow: clip;
+    -webkit-line-clamp: 1;
+    height: 20px;
+    transition: width 0.3s ease-in-out;
 }
 
-.headerIcon {
-    height: 64px;
-    width: 64px;
-    margin-bottom: 20px;
-    margin-right: 0;
-    margin-top: -7px;
-    border-radius: 50vw;
-
-    cursor: pointer;
-}
-
-.icon {
-    height: 50px;
-    width: 50px;
-    border-radius: 50vw;
-    margin-bottom: 5px;
-    cursor: pointer;
-    display: block;
-}
-
-.ThemeChangeButton {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.containerOpen {
-    max-height: 460px;
-}
-
-.containerDesktop {
-    animation-name: containerCloseOnStart;
-    animation-duration: 0.5s;
-    animation-direction: forwards;
-    animation-timing-function: ease-in-out;
-}
-
-@keyframes containerCloseOnStart {
-    from { max-height: 460px; }
-    to { max-height: 64px ; }
-}
-
-.containerDesktop:hover {
-    max-height: 460px;
-    animation-name: none;
-}
-
-@media screen and (min-width: 450px) {
-    .container {
-        flex-direction: row;
-        justify-content: left;
-
-        margin: 20px;
-
-        height: 64px;
-        max-width: 64px;
-        width: auto;
-        border-radius: 32px;
-
-        border-radius: 32px;
-        transition: 0.5s ease-in-out;
-    }
-    .group {
-        flex-direction: row;
-        justify-content: left;
-
-        height: 64px;
-        width: auto;
-        padding-right: 7px;
-        margin-bottom: 0;
-        padding-top: 7px;
-        margin-right: 20px;
-        padding-left: 3px;
-    }
-    .headerIcon {
-        height: 64px;
-        width: 64px;
-        margin-top: 12px;
-        margin-left: -3px;
-    }
-    .containerOpen {
-        max-width: 460px;
-        max-height: 64px;
-    }
-    .containerDesktop:hover {
-        max-width: 460px;
-        max-height: 64px;
-    }
-    .icon {
-        height: 50px;
-        width: 50px;
-        margin-left: 5px;
-    }
-    @keyframes containerCloseOnStart {
-        from { max-width: 460px; }
-        to { max-width: 64px ; }
-    }
-}
+.skipNav:focus {
+    width: 100%;
+    overflow: auto;
+}
\ No newline at end of file
diff --git a/styles/Components/panels.module.css b/styles/Components/panels.module.css
index 2229866..35096b2 100644
--- a/styles/Components/panels.module.css
+++ b/styles/Components/panels.module.css
@@ -12,8 +12,6 @@
 
     background-color: var(--theme-ui-colors-panelColor);
     border-radius: 20px;
-    transition: background-color 0.3s ease-in-out;
-
 }
 
 .doublePanel {
@@ -51,7 +49,7 @@
 
 .title {
     width: 100%;
-    font-size: max(2em, 3.25vw);
+    font-size: min(max(2em, 3.25vw), 4em);
     margin: 0;
     color: var(--theme-ui-colors-text);
     transition: color 0.3s ease-in-out;
diff --git a/styles/Components/texttools.module.css b/styles/Components/texttools.module.css
index b07fd6d..76857b9 100644
--- a/styles/Components/texttools.module.css
+++ b/styles/Components/texttools.module.css
@@ -3,7 +3,7 @@
     width: 15px !important;
     position: relative;
     border-radius: 5px;
-    border: solid 4px #000;
+    border: solid 3px #000;
 }
 
 .list {
diff --git a/styles/globals.css b/styles/globals.css
index 1b39e04..4fac2dc 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -9,10 +9,35 @@
 }
 
 html {
-  background-color: var(--theme-ui-colors-background);
+  /* background-color: var(--theme-ui-colors-background); */
 	transition: background-color 0.3s ease-in-out;
+  background-color: #000000 !important;
+  transition: 0.3s ease-in-out border-radius;
+  border-radius: 0px;
+}
+body {
+  background-color: var(--theme-ui-colors-background);
+  overflow: hidden;
+  overflow-y: auto;
+  transition: 0.3s ease-in-out border-radius;
+  padding-bottom: 0;
+  border-radius: 25px;
 }
 
+body {
+  height: 100%;
+  overflow: hidden;
+}
+html {
+  position: absolute;
+  top: 42px;
+  height: calc(100vh -42px + 1px);
+  overflow-y: auto;
+  scrollbar-width: none;
+}
+html::-webkit-scrollbar {
+  display: none;
+}
 
 a {
   text-decoration: none;
diff --git a/yarn.lock b/yarn.lock
index ec57c75..ae38cb2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1174,6 +1174,13 @@
   resolved "https://registry.npmjs.org/@napi-rs/triples/-/triples-1.0.3.tgz"
   integrity sha512-jDJTpta+P4p1NZTFVLHJ/TLFVYVcOqv6l8xwOeBKNPMgY/zDYH/YH7SJbvrr/h1RcS9GzbPcLKGzpuK9cV56UA==
 
+"@next/bundle-analyzer@^12.1.6":
+  version "12.1.6"
+  resolved "https://registry.yarnpkg.com/@next/bundle-analyzer/-/bundle-analyzer-12.1.6.tgz#5f4efcdb8c91d70c8be6013b0aacdb4d89ba1312"
+  integrity sha512-WLydwytAeHoC/neXsiIgK+a6Me12PuSpwopnsZgX5JFNwXQ9MlwPeMGS3aTZkYsv8QmSm0Ns9Yh9FkgLKYaUuQ==
+  dependencies:
+    webpack-bundle-analyzer "4.3.0"
+
 "@next/env@11.1.2":
   version "11.1.2"
   resolved "https://registry.npmjs.org/@next/env/-/env-11.1.2.tgz"
@@ -1261,6 +1268,11 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@polka/url@^1.0.0-next.20":
+  version "1.0.0-next.21"
+  resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
+  integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==
+
 "@rushstack/eslint-patch@^1.0.6":
   version "1.0.6"
   resolved "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.0.6.tgz"
@@ -1665,11 +1677,21 @@
   resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
+acorn-walk@^8.0.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.2.0.tgz#741210f2e2426454508853a2f44d0ab83b7f69c1"
+  integrity sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==
+
 acorn@^7.4.0:
   version "7.4.1"
   resolved "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
+acorn@^8.0.4:
+  version "8.7.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.7.1.tgz#0197122c843d1bf6d0a5e83220a788f278f63c30"
+  integrity sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==
+
 ajv@^6.10.0, ajv@^6.12.4:
   version "6.12.6"
   resolved "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz"
@@ -2099,7 +2121,7 @@
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-chalk@^4.0.0:
+chalk@^4.0.0, chalk@^4.1.0:
   version "4.1.2"
   resolved "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz"
   integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
@@ -2135,6 +2157,16 @@
   resolved "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz"
   integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
 
+classnames@^2.2.6:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
+  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
+
+clsx@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
+  integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
+
 coa@^2.0.2:
   version "2.0.2"
   resolved "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz"
@@ -2173,6 +2205,11 @@
   resolved "https://registry.npmjs.org/colorette/-/colorette-1.3.0.tgz"
   integrity sha512-ecORCqbSFP7Wm8Y6lyqMJjexBQqXSF7SSeaTyGGphogUjBlFP9m9o08wy86HL2uB7fMTxtOUzLMk7ogKcxMg1w==
 
+commander@^6.2.0:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c"
+  integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==
+
 commondir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz"
@@ -2374,6 +2411,11 @@
   resolved "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-3.0.1.tgz"
   integrity sha512-WboRycPNsVw3B3TL559F7kuBUM4d8CgMEvk6xEJlOp7OBPjt6G7z8WMWlD2rOFZLk6OYfFIUGsCOWzcQH9K2og==
 
+debounce@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.1.tgz#38881d8f4166a5c5848020c11827b834bcb3e0a5"
+  integrity sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==
+
 debug@2, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz"
@@ -2503,6 +2545,16 @@
     dom-serializer "0"
     domelementtype "1"
 
+duplexer@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"
+  integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==
+
+easy-bem@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/easy-bem/-/easy-bem-1.1.1.tgz#1bfcc10425498090bcfddc0f9c000aba91399e03"
+  integrity sha512-GJRqdiy2h+EXy6a8E6R+ubmqUM08BK0FWNq41k24fup6045biQ8NXxoXimiwegMQvFFV3t1emADdGNL1TlS61A==
+
 electron-to-chromium@^1.3.723, electron-to-chromium@^1.4.17:
   version "1.4.68"
   resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.68.tgz"
@@ -3059,6 +3111,13 @@
   resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.8.tgz"
   integrity sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==
 
+gzip-size@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-6.0.0.tgz#065367fd50c239c0671cbcbad5be3e2eeb10e462"
+  integrity sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==
+  dependencies:
+    duplexer "^0.1.2"
+
 has-bigints@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.1.tgz"
@@ -3573,6 +3632,11 @@
   resolved "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz"
   integrity sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM=
 
+lodash@^4.17.20:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz"
@@ -3692,6 +3756,11 @@
   optionalDependencies:
     saslprep "^1.0.3"
 
+mrmime@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/mrmime/-/mrmime-1.0.0.tgz#14d387f0585a5233d291baba339b063752a2398b"
+  integrity sha512-a70zx7zFfVO7XpnQ2IX1Myh9yY4UYvfld/dikWRnsXxbyvMcfz+u6UfgNAtH+k2QqtJuzVpv6eLTx1G2+WKZbQ==
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz"
@@ -3940,6 +4009,11 @@
   dependencies:
     wrappy "1"
 
+opener@^1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/opener/-/opener-1.5.2.tgz#5d37e1f35077b9dcac4301372271afdeb2a13598"
+  integrity sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==
+
 optionator@^0.9.1:
   version "0.9.1"
   resolved "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz"
@@ -4187,6 +4261,15 @@
     object-assign "^4.1.1"
     react-is "^16.8.1"
 
+prop-types@^15.8.1:
+  version "15.8.1"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
+  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
 public-encrypt@^4.0.0:
   version "4.0.3"
   resolved "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.3.tgz"
@@ -4271,14 +4354,21 @@
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
-react-dom@^17.0.2:
-  version "17.0.2"
-  resolved "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz"
-  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
+react-dom@^18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.1.0.tgz#7f6dd84b706408adde05e1df575b3a024d7e8a2f"
+  integrity sha512-fU1Txz7Budmvamp7bshe4Zi32d0ll7ect+ccxNu9FlObT605GOEB8BfO4tmRJ39R5Zj831VCpvQ05QPBW5yb+w==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    scheduler "^0.20.2"
+    scheduler "^0.22.0"
+
+react-draggable@^4.4.5:
+  version "4.4.5"
+  resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.5.tgz#9e37fe7ce1a4cf843030f521a0a4cc41886d7e7c"
+  integrity sha512-OMHzJdyJbYTZo4uQE393fHcqqPYsEtkjfMgvCHr6rejT+Ezn4OZbNyGH50vv+SunC1RMvwOTSWkEODQLzw1M9g==
+  dependencies:
+    clsx "^1.1.1"
+    prop-types "^15.8.1"
 
 react-fade-in@^2.0.1:
   version "2.0.1"
@@ -4302,6 +4392,15 @@
   dependencies:
     hoist-non-react-statics "^3.0.0"
 
+react-indiana-drag-scroll@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/react-indiana-drag-scroll/-/react-indiana-drag-scroll-2.1.0.tgz#37654eae8caced01cdecc8bce55f0382871a021d"
+  integrity sha512-Tj94Dv9PkmoKqc9nxK/dzwhtE8pP7NTxmeHqkD8KN0zad1NNE+/JsvRcK4EdqE6CdA2nMESzqPMvv1AzRXdBew==
+  dependencies:
+    classnames "^2.2.6"
+    debounce "^1.2.0"
+    easy-bem "^1.1.1"
+
 react-is@17.0.2:
   version "17.0.2"
   resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz"
@@ -4329,18 +4428,27 @@
   resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz"
   integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
 
+react-rewards@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/react-rewards/-/react-rewards-2.0.3.tgz#685aee98654ab4f060e297849f39cf0a16cec042"
+  integrity sha512-qww5Jtk2HmCjR9wc7+0c2iP8oCQzENZn8pnoJGi0S6o+6dAD25+ZoagLSWdoBLGVwxfP5kFBjv3VZ6L8fPk6lg==
+
 react-tiny-popover@^7.0.1:
   version "7.0.1"
   resolved "https://registry.npmjs.org/react-tiny-popover/-/react-tiny-popover-7.0.1.tgz"
   integrity sha512-uV+nTZXkCtfPFQtoKwbfX8waaU7+b8LEOoyOUjtmRxqnH3KLX1FkPm7RU+RC8eXxtOe4rC1cuhOIbQFcc71vQQ==
 
-react@^17.0.2:
-  version "17.0.2"
-  resolved "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
-  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
+react-use-draggable-scroll@^0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/react-use-draggable-scroll/-/react-use-draggable-scroll-0.4.2.tgz#f91bf8248a37814f2e07ab931463f6faa7a2878f"
+  integrity sha512-PRI49fQ/e3SFDe1LQuOYBIbxEvESryigXbeiPhroaISzGEuznA5QqN4dveunHzlEPEdgr5/RPRxN7d583SU3DA==
+
+react@^18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.1.0.tgz#6f8620382decb17fdc5cc223a115e2adbf104890"
+  integrity sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 read-pkg-up@^3.0.0:
   version "3.0.0"
@@ -4541,13 +4649,12 @@
   resolved "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-scheduler@^0.20.2:
-  version "0.20.2"
-  resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz"
-  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
+scheduler@^0.22.0:
+  version "0.22.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.22.0.tgz#83a5d63594edf074add9a7198b1bae76c3db01b8"
+  integrity sha512-6QAm1BgQI88NPYymgGQLCZgvep4FyePDWFpXVK+zNSUgHwlqpJy8VEh8Et0KxTACS4VWwMousBElAZOH9nkkoQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 "semver@2 || 3 || 4 || 5":
   version "5.7.1"
@@ -4615,6 +4722,15 @@
     get-intrinsic "^1.0.2"
     object-inspect "^1.9.0"
 
+sirv@^1.0.7:
+  version "1.0.19"
+  resolved "https://registry.yarnpkg.com/sirv/-/sirv-1.0.19.tgz#1d73979b38c7fe91fcba49c85280daa9c2363b49"
+  integrity sha512-JuLThK3TnZG1TAKDwNIqNq6QA2afLOCcm+iE8D1Kj3GA40pSPsxQjjJl0J8X3tsR7T+CP1GavpzLwYkgVLWrZQ==
+  dependencies:
+    "@polka/url" "^1.0.0-next.20"
+    mrmime "^1.0.0"
+    totalist "^1.0.0"
+
 slash@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz"
@@ -4976,6 +5092,11 @@
   resolved "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz"
   integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
 
+totalist@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/totalist/-/totalist-1.1.0.tgz#a4d65a3e546517701e3e5c37a47a70ac97fe56df"
+  integrity sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==
+
 tr46@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz"
@@ -5102,6 +5223,11 @@
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-draggable-scroll@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/use-draggable-scroll/-/use-draggable-scroll-0.1.0.tgz#ca7967eeec9d6a53f965b84f9c295c214aa43ed7"
+  integrity sha512-mX6nT3cUqOTtA+8QUH9HfdKtzI6Oquj9QIB0wALWZYmWogNQ746MaUcmqKOKCIlt2UH6egxhSKNPiSlfEqmKhA==
+
 use-subscription@1.5.1:
   version "1.5.1"
   resolved "https://registry.npmjs.org/use-subscription/-/use-subscription-1.5.1.tgz"
@@ -5186,6 +5312,21 @@
   resolved "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz"
   integrity sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==
 
+webpack-bundle-analyzer@4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.3.0.tgz#2f3c0ca9041d5ee47fa418693cf56b4a518b578b"
+  integrity sha512-J3TPm54bPARx6QG8z4cKBszahnUglcv70+N+8gUqv2I5KOFHJbzBiLx+pAp606so0X004fxM7hqRu10MLjJifA==
+  dependencies:
+    acorn "^8.0.4"
+    acorn-walk "^8.0.0"
+    chalk "^4.1.0"
+    commander "^6.2.0"
+    gzip-size "^6.0.0"
+    lodash "^4.17.20"
+    opener "^1.5.2"
+    sirv "^1.0.7"
+    ws "^7.3.1"
+
 whatwg-url@^7.0.0:
   version "7.1.0"
   resolved "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz"
@@ -5243,6 +5384,11 @@
   resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
   integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
 
+ws@^7.3.1:
+  version "7.5.7"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.7.tgz#9e0ac77ee50af70d58326ecff7e85eb3fa375e67"
+  integrity sha512-KMvVuFzpKBuiIXW3E4u3mySRO2/mCHSyZDJQM5NQ9Q9KHWHWh0NHgfbRMLLrceUK5qAL4ytALJbpRMjixFZh8A==
+
 xtend@^4.0.0, xtend@^4.0.2:
   version "4.0.2"
   resolved "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz"