diff --git a/Components/Card.js b/Components/Card.js
index e90a73f..c4a31c6 100644
--- a/Components/Card.js
+++ b/Components/Card.js
@@ -17,39 +17,99 @@
         }
     }
 
+    getButtonRow() {
+        return this.props.buttons ? this.props.buttons.map((button, i) => {
+            return <a
+                key={i}
+                className={Styles.button}
+                style={{backgroundColor:`#${button.color}`, color:`#${this.props.buttonText}`}}
+                href={button.link ? button.link : null}
+                onClick={button.onClick ? button.onClick : null}
+                target={button.newTab ? "_blank" : undefined}
+                rel="noreferrer">{button.text}
+            </a>
+        }) : null
+    }
+
+    getTitleBlock() {
+        let icons = null;
+        if (this.props.icon && this.props.icon[0].length > 1) {
+            icons = <div className={Styles.iconRow}>{this.props.icon.map((icon, i) => {
+                return <img key={i} alt={this.props.title} className={Styles.image} src={`https://assets.clicks.codes/${icon}.svg`} />
+            })}</div>
+        } else if (this.props.icon) {
+            icons = <img alt={this.props.title} className={Styles.image} src={`https://assets.clicks.codes/${this.props.icon}.svg`} />
+        } else if (this.props.wave) {
+            icons = <img alt={this.props.title} className={Styles.image} src={`https://assets.clicks.codes//${this.props.wave}.svg`} />
+        }
+        return <>{icons}</>;
+    }
+    getBand() {
+        if (this.props.band) {
+            return <div className={Styles.band} style={{
+                backgroundColor: `#${this.props.band.color ?? "F27878"}`,
+                bottom: this.props.buttons ? `calc(25% + 5px)` : "40px"
+            }}>
+                <p style={{color: "#" + (this.props.band.textColor ?? "FFFFFF")}}>{this.props.band.text ?? ""}</p>
+            </div>
+        }
+    }
+
     render() {
-        return (
-            <div className={Styles.card + " " + (this.props.shown ? Styles.shown : null)} style={{
-                margin: "0"
-            }} onClick={this.handleClick}>
-                <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.clicks.codes/web/waves/card/${this.props.wave}.svg`} draggable={false} />
-                <div className={Styles.panel} onClick={this.handleClick}>
-                    <div className={Styles.titleContainer}>
-                        <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.buttons ? null : Styles.longText)}>{this.props.subtext}</p>
-                    <div className={Styles.buttonLayout} onClick={this.showMessage}>
-                        {
-                            this.props.buttons ? this.props.buttons.map((button, i) => {
-                                return <a
-                                    key={i}
-                                    className={Styles.button}
-                                    style={{backgroundColor:`#${button.color}`, color:`#${this.props.buttonText}`}}
-                                    href={button.link ? button.link : null}
-                                    onClick={button.onClick ? button.onClick : null}
-                                    target={button.newTab ? "_blank" : undefined}
-                                    rel="noreferrer">{button.text}
-                                </a>
-                            }) : null
-                        }
+        let overwriteAlign = {
+            "left": "flex-start",
+            "center": "center",
+            "right": "flex-end"
+        }[this.props.overwritePosition ?? "right"];
+        if (this.props.border) {
+            return (
+                <div className={Styles.card + " " + (this.props.shown ? Styles.shown : null) + " " + Styles.dashed} style={{
+                    margin: "0", opacity: `0`, boxShadow: "none", borderColor: `#${this.props.border}`
+                }}>
+                    <div className={Styles.noPanel}>
+                        <div className={Styles.titleContainer}>
+                            {
+                                (this.props.icon || this.props.wave)
+                                ? <img alt="Project icon" className={Styles.image} src={"https://assets.clicks.codes/" + (this.props.icon ? this.props.icon : this.props.wave) + ".svg"} />
+                                : null
+                            }
+                            <h1 className={Styles.title}>{this.props.title}</h1>
+                        </div>
+                        <p className={Styles.subtext + " " + (this.props.buttons ? null : Styles.longText)}>{this.props.subtext}</p>
+                        {this.getBand()}
+                        <div className={Styles.buttonLayout} onClick={this.showMessage} style={{
+                            justifyContent: overwriteAlign
+                        }}>
+                            {this.getButtonRow()}
+                        </div>
                     </div>
                 </div>
-            </div>
-        );
+            );
+        } else {
+            return (
+                <div className={Styles.card + " " + (this.props.shown ? Styles.shown : null)} style={{
+                    margin: "0"
+                }} onClick={this.handleClick}>
+                    <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.clicks.codes/web/waves/card/${this.props.wave}.svg`} draggable={false} />
+                    <div className={Styles.panel} onClick={this.handleClick}>
+                        <div className={Styles.titleContainer}>
+                            { this.getTitleBlock() }
+                            <h1 className={Styles.title}>{this.props.title}</h1>
+                        </div>
+                        <p className={Styles.subtext + " " + (this.props.buttons ? null : Styles.longText)}>{this.props.subtext}</p>
+                        {this.getBand()}
+                        <div className={Styles.buttonLayout} onClick={this.showMessage} style={{
+                            justifyContent: overwriteAlign
+                        }}>
+                            {this.getButtonRow()}
+                        </div>
+                    </div>
+                </div>
+            );
+        }
     }
 }
 
diff --git a/Components/Header.js b/Components/Header.js
index 37418c5..54c4b5c 100644
--- a/Components/Header.js
+++ b/Components/Header.js
@@ -1,11 +1,38 @@
-import React, { useRef } from "react";
+import React, { useEffect, useState } from "react";
 import Styles from '../styles/Components/header.module.css';
 import NavStyles from '../styles/Components/navbar.module.css';
 import Head from 'next/head';
-import { useColorMode } from "theme-ui";
 import { useReward } from "react-rewards";
 import ScrollContainer from 'react-indiana-drag-scroll'
 
+const positive = [
+    "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f389.svg",
+    "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f388.svg",
+    "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f973.svg",
+];
+
+const negative = [
+    "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f614.svg",
+    "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f61e.svg",
+    "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f613.svg",
+    "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f625.svg",
+    "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f623.svg",
+];
+
+function preloadImage (src) {
+    return new Promise((resolve, reject) => {
+        const img = new Image()
+        img.onload = function() {
+            resolve(img)
+        }
+        img.onerror = img.onabort = function() {
+            reject(src)
+        }
+        img.src = src
+    })
+}
+
+
 function Header(props) {
     const [ clickTotal, setClickTotal ] = React.useState(0);
 
@@ -30,6 +57,22 @@
         colors: ["#E5AB71"]
     });
 
+    const all = positive.concat(negative)
+    const [imagesPreloaded, setImagesPreloaded] = useState(false)
+    useEffect(() => {
+        let isCancelled = false
+        async function effect() {
+            if (isCancelled) { return }
+            const imagesPromiseList = []
+            for (const i of all) { imagesPromiseList.push(preloadImage(i)) }
+            await Promise.all(imagesPromiseList)
+            if (isCancelled) { return }
+            setImagesPreloaded(true)
+        };
+        effect()
+        return () => { isCancelled = true }
+    }, [all])
+
     function showSubBarWithUrl(url) {
         const screenWidth = window.innerWidth;
         let amount = screenWidth - 50;
@@ -39,14 +82,14 @@
                 {
                     Array.from(Array(amount)).map((i, index) => {
                         return (
-                            <a className={NavStyles.icon} key={index}><img alt="Clicks" className={NavStyles.icon} src={
+                            <a className={NavStyles.icon} key={index}><img alt="" className={NavStyles.icon} src={
                                 url[Math.floor(Math.random() * url.length)]
                             } /></a>
                         )
                     })
                 }
             </div>,
-            5
+            5, "center"
         );
     }
 
@@ -54,20 +97,10 @@
         if (!isAnimating && !isDisappointmentAnimating && props.index) {
             setClickTotal(clickTotal + 1);
             if (clickTotal > 0 && Math.floor(Math.random() * 3) === 0) {
-                showSubBarWithUrl([
-                    "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f614.svg",
-                    "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f61e.svg",
-                    "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f613.svg",
-                    "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f625.svg",
-                    "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f623.svg",
-                ]);
+                showSubBarWithUrl(negative);
                 disappointment();
             } else {
-                showSubBarWithUrl([
-                    "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f389.svg",
-                    "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f388.svg",
-                    "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f973.svg",
-                ]);
+                showSubBarWithUrl(positive);
                 reward();
             }
         }
@@ -78,6 +111,7 @@
             margin: "0",
             minHeight: props.fullscreen ? "calc(100vh - 42px)" : "calc(100vh - (4 * max(2em, 4vw)) - 1em)",
         }} id={props.id ? props.id : null}>
+            {imagesPreloaded}
             <div className={Styles.backgroundGradient} style={{
                 backgroundImage: `linear-gradient(69.44deg, #${props.gradient[0]} 0%, #${props.gradient[1]} 100%)`,
             }} />
diff --git a/pages/_app.js b/pages/_app.js
index 59fdadb..222765c 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -53,8 +53,11 @@
     const [subBar, setSubBar] = React.useState(false);
     const [currentElement, setElement] = React.useState(<></>);
 
-    const showSubBar = (element, timeout) => {
+    const showSubBar = (element, timeout, positioning="left") => {
         setSubBar(true);
+        if (positioning === "center") {
+            element = <div className={Styles.centeredSubBar}>{element}</div>
+        }
         setElement(element);
         if (timeout) {
             setTimeout(() => {
@@ -70,8 +73,8 @@
         setSubBar(false);
     }
 
-    const showMessage = (text) => {
-        showSubBar(<p className={Styles.message}>{text}</p>, 5);
+    const showMessage = (text, positioning="left") => {
+        showSubBar(<p className={Styles.message}>{text}</p>, 5, positioning);
     }
 
     return <>
diff --git a/pages/index.js b/pages/index.js
index 7495dff..20e6ec9 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -67,7 +67,7 @@
             />
             <Card
               wave="hooky" title="Hooky" subtext="Webhook protection for Discord"
-              icon="bots/hooky/circle"
+              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"}
@@ -75,6 +75,14 @@
               buttonText={"000000"} gradient={["424242", "8D8D8D"]}
               url="/hooky"
             />
+            <Card
+              title="New projects..." subtext="We're actively working on projects! You can join our Discord to find out more."
+              buttons={[
+                {color: "6576CC", link: "https://discord.gg/bPaNnxe", text:"Join our Discord"}
+              ]}
+              buttonText={"FFFFFF"} border={"C4C4C4"}
+              url="/" overwritePosition={"center"}
+            />
           </CardRow>
         </Panel>
         <Panel halfSize={true}>
@@ -105,7 +113,7 @@
         <Panel halfSize={true}>
           <Title>Socials</Title>
           <Divider />
-          <Text>{"We've got discord, feel free to ask us anything"}</Text>
+          <Text>{"We've got Discord, feel free to ask us anything"}</Text>
           <CardRow>
             <Card
               wave="discord" title="Discord" subtext="Join our Discord server to talk with the community"
diff --git a/styles/Components/card.module.css b/styles/Components/card.module.css
index 077c883..5721fa4 100644
--- a/styles/Components/card.module.css
+++ b/styles/Components/card.module.css
@@ -23,6 +23,18 @@
     transition: filter 0.3s ease-in-out;
 }
 
+.noPanel {
+    position: absolute;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    width: 88%;
+    height: 76%;
+    top: 12%;
+    left: 6%;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+
 .card {
     border-radius: 25px;
     width: 100%;
@@ -106,20 +118,21 @@
 
 .longText {
     height: 60%;
+    padding-inline: 10px;
 }
 
 
 .buttonLayout {
     display: flex;
     flex-direction: row;
-    justify-content: flex-end;
     align-items: center;
     flex-wrap: wrap;
     padding: 0px;
     position: absolute;
     bottom: 5px;
     right: 5px;
-    height: 25%
+    height: 25%;
+    width: calc(100% - 10px);
 }
 
 .button {
@@ -148,4 +161,27 @@
 
 .item {
     width: min(428px, 90%);
+}
+
+.dashed {
+    /* Create a dashed border */
+    border: 8px dashed var(--theme-ui-colors-text);
+}
+
+.iconRow {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+}
+
+.band {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 15%;
 }
\ No newline at end of file
diff --git a/styles/Components/navbar.module.css b/styles/Components/navbar.module.css
index 121d382..ca169bd 100644
--- a/styles/Components/navbar.module.css
+++ b/styles/Components/navbar.module.css
@@ -48,7 +48,7 @@
 }
 
 .skipNav:focus {
-    width: 100%;
+    width: 150px;
     overflow: auto;
 }
 
diff --git a/styles/globals.module.css b/styles/globals.module.css
index 944f797..bdd52e8 100644
--- a/styles/globals.module.css
+++ b/styles/globals.module.css
@@ -5,7 +5,7 @@
     height: calc(100vh - 42px);
     width: 100%;
     border-radius: 25px;
-    box-shadow: 0 0 0 100px var(--theme-ui-colors-borders);
+    box-shadow: 0 0 0 1000px var(--theme-ui-colors-borders);
     transition: 0.3s ease-in-out;
     pointer-events: none;
     background: transparent;
@@ -18,4 +18,13 @@
 .container, .container * {
     transform: rotateY(0);
     -webkit-transform: rotateY(0);
+}
+
+.centeredSubBar {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
 }
\ No newline at end of file