diff --git a/Components/NavBar.js b/Components/NavBar.js
index 23ad2be..a841d38 100644
--- a/Components/NavBar.js
+++ b/Components/NavBar.js
@@ -1,11 +1,18 @@
 import React, { Component } from "react";
 import Styles from '../styles/navbar.module.css';
+import Cookies from 'js-cookie';
+// import { setInfo } from "../redux/actions/main"
+import { connect } from "react-redux";
+// import { makeStore } from "../redux/store";
+
+// const store = makeStore();
 
 class NavBar extends Component {
 	constructor(props) {
 		super(props);
         this.state = {
-            isOpen: false  // true
+            isOpen: false,
+            cookie: 'light'
         }
         this.isTouchDevice = false
         this.hoverSensor = React.createRef();
@@ -33,18 +40,11 @@
         } else {
             this.isTouchDevice = false
         }
+        this.setState({
+            cookie: Cookies.get('theme')
+        })
     }
 
- /*   onEnter() {
-        if ( !this.isTouchDevice ) {
-            return this.toggleVertical(this, true)
-        }
-    }
-
-    onLeave() {
-        return this.toggleVertical(this, false)
-    }
-*/
     onClick() {
         if ( this.isTouchDevice ) {
             return this.toggleVertical(this)
@@ -57,6 +57,20 @@
         }));
     }
 
+    updateCookie(that) {
+        // return () => {
+        //     if (that.props.theme == "light") {
+        //         that.props.setInfo('dark')
+        //     } else {
+        //         that.props.setInfo('light')
+        //     }
+        //     this.setState({
+        //         cookie: that.props.theme
+        //     })
+        //     // store.dispatch();
+        // }
+    }
+
 	render() {
 		return (
             <>
@@ -71,7 +85,11 @@
                         {/* <a href="https://clcks.dev"><img className={Styles.icon} src="/Icons/CL.svg"/></a> */}
                     </div>
                     <div className={Styles.group}>
-                        <a href="/#"><img alt="Theme" className={Styles.icon} src="/Icons/CMP.svg"/></a>
+                        <a onClick={this.updateCookie(this)}><img
+                            alt="Theme"
+                            className={Styles.icon}
+                            src={this.state.cookie + ".svg"}
+                        /></a>
                     </div>
                 </div>
             </>
@@ -79,4 +97,16 @@
 	}
 }
 
+
+// const mapStateToProps = state => {
+//     return { theme: state.main.theme }
+// }
+
+// const mapDispatchToProps = {
+//     setInfo
+// }
+
+// const nav = connect(mapStateToProps, mapDispatchToProps)(NavBar);
+// export default nav;
+
 export default NavBar;
\ No newline at end of file
diff --git a/Components/Paragraph.js b/Components/Paragraph.js
index 4348296..c332832 100644
--- a/Components/Paragraph.js
+++ b/Components/Paragraph.js
@@ -3,7 +3,9 @@
 class Paragraph extends Component {
     render () {
         return (
-            <p style={{width: "100%", textAlign: "left", paddingLeft: "15%", paddingRight: "15%", fontSize: "120%"}}>{this.props.children}</p>
+            <p style={{width: "100%", textAlign: "left", paddingLeft: "15%", paddingRight: "15%", fontSize: "120%", color: "var(--card-text-color)"}}>
+                {this.props.children}
+            </p>
         );
     }
 }
diff --git a/Components/SectionHeading.js b/Components/SectionHeading.js
index 3e417bf..ed77661 100644
--- a/Components/SectionHeading.js
+++ b/Components/SectionHeading.js
@@ -9,7 +9,7 @@
 
 	render() {
 		return (
-            <h1 className={Styles.title} id={this.props.id}>{this.props.title}</h1>
+            <h1 className={Styles.title} id={this.props.id}>{this.props.children}</h1>
         )
 	}
 }
diff --git a/Components/Subheading.js b/Components/Subheading.js
new file mode 100644
index 0000000..964f1dd
--- /dev/null
+++ b/Components/Subheading.js
@@ -0,0 +1,17 @@
+import { Component } from "react";
+import Styles from '../styles/subheading.module.css';
+
+class SubHeading extends Component {
+	constructor(props) {
+		super(props);
+	}
+
+
+	render() {
+		return (
+            <h2 className={Styles.title} id={this.props.id}>{this.props.children}</h2>
+        )
+	}
+}
+
+export default SubHeading;
\ No newline at end of file
diff --git a/Components/Timeline.js b/Components/Timeline.js
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/Components/Timeline.js
diff --git a/package.json b/package.json
index 844f4c1..209860e 100644
--- a/package.json
+++ b/package.json
@@ -10,11 +10,17 @@
   },
   "dependencies": {
     "axios": "^0.21.1",
+    "js-cookie": "^3.0.1",
+    "js-cookies": "^1.0.4",
     "mongodb": "^4.1.1",
     "next": "11.1.2",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-hcaptcha": "^0.1.1"
+    "next-redux-wrapper": "^7.0.4",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-hcaptcha": "^0.1.1",
+    "react-redux": "^7.2.4",
+    "redux": "^4.1.1",
+    "redux-thunk": "^2.3.0"
   },
   "devDependencies": {
     "eslint": "7.32.0",
diff --git a/pages/_app.js b/pages/_app.js
index 6eede4d..48674ca 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,5 +1,17 @@
-import '../styles/globals.css'
-import NavBar from '../Components/NavBar'
+import '../styles/globals.css';
+import NavBar from '../Components/NavBar';
+// import { wrapper } from "../redux/store";
+
+// function App({ Component, pageProps }) {
+//   return (
+//     <>
+//       <Component {...pageProps} />
+//       <NavBar />
+//     </>
+//   );
+// }
+
+// export default wrapper.withRedux(App);
 
 function App({ Component, pageProps }) {
   return <>
diff --git a/pages/castaway.js b/pages/castaway.js
index 3582a71..3aa7411 100644
--- a/pages/castaway.js
+++ b/pages/castaway.js
@@ -6,6 +6,7 @@
 import Header from '../Components/Header'
 import AutoSpacing from '../Components/AutoSpacing'
 import SectionHeading from '../Components/SectionHeading'
+import Paragraph from '../Components/Paragraph'
 
 export default function Home() {
   return (
@@ -16,17 +17,14 @@
         gradient={["71AFE5", "78ECF2"]}
         wave="CA"
         buttons={[
-          {color: "EDC575", buttonText: "000000", link: "#features", text: "Features"},
-          {color: "EDC575", buttonText: "000000", link: "#commands", text: "Commands"},
-          {color: "78ECF2", buttonText: "000000", link: "#invite", text: "Invite"}
+          {color: "78ECF2", buttonText: "000000", link: "#timeline", text: "Timeline"}
         ]}
         hideArrow={true}
       />
       <AutoSpacing>
-          <SectionHeading title="Features" id="features"/>
-          <SectionHeading title="Commands" id="commands"/>
-          <SectionHeading title="Invite" id="invite"/>
-          </AutoSpacing>
+        <SectionHeading id="timeline">Development Timeline</SectionHeading>
+        <Paragraph>Under construction</Paragraph>
+      </AutoSpacing>
     </>
   )
 }
diff --git a/pages/clicksforms.js b/pages/clicksforms.js
index 6d37875..ffa0ab3 100644
--- a/pages/clicksforms.js
+++ b/pages/clicksforms.js
@@ -1,13 +1,10 @@
-import Head from 'next/head'
-import Image from 'next/image'
-import styles from '../styles/Home.module.css'
 import Card from '../Components/Card'
-import CardRow from '../Components/CardRow'
+import TileRow from '../Components/TileRow'
 import Header from '../Components/Header'
 import AutoSpacing from '../Components/AutoSpacing'
-import TileRow from '../Components/TileRow'
 import SectionHeading from '../Components/SectionHeading'
 import Paragraph from '../Components/Paragraph'
+import CardRow from '../Components/CardRow'
 
 export default function Home() {
   return (
@@ -26,7 +23,7 @@
         hideArrow={true}
       />
       <AutoSpacing>
-        <SectionHeading title="Features" id="features"/>
+        <SectionHeading id="features">Features</SectionHeading>
         <TileRow>
           <img alt="Anonymous forms"       src="/Features/ClicksForms/Anonymous.svg" />
           <img alt="Discord buttons"       src="/Features/ClicksForms/Buttons.svg" />
@@ -37,7 +34,7 @@
           <img alt="Many question types"   src="/Features/ClicksForms/Types.svg" />
           <img alt="Easily view responses" src="/Features/ClicksForms/Responses.svg" />
         </TileRow>
-        <SectionHeading title="Commands" id="commands"/>
+        <SectionHeading id="commands">Commands</SectionHeading>
         <Paragraph><code>/accept</code>: Completes a form you are asked to fill in</Paragraph>
         <Paragraph><code>/apply</code>: Apply to a form</Paragraph>
         <Paragraph><code>/create</code>: Creates a new form</Paragraph>
@@ -45,14 +42,21 @@
         <Paragraph><code>/help</code>: Lists all commands</Paragraph>
         <Paragraph><code>/responses</code>: Lets you view responses to your servers form</Paragraph>
         <Paragraph><code>/manage</code>: Lets you manage your servers forms</Paragraph>
-        <SectionHeading title="Services" id="services"/>
+        <SectionHeading id="services">Services</SectionHeading>
         <Paragraph>ClicksForms support services like <a href="https://forms.google.com">Google Forms</a> through our Add-on (Awaiting approval)</Paragraph>
         <Paragraph>Our API is public. You can view it on <a href="https://clicksminuteper.giuthub.io/docs/clicksforms">GitHub</a></Paragraph>
-        <SectionHeading title="Invite" id="invite"/>
-        <Paragraph>
-          ClicksForms is available for free on&nbsp;
-          <a href="https://discord.com/api/oauth2/authorize?client_id=805392054678192169&permissions=2416307200&scope=bot%20applications.commands" text="Discord">Discord</a>
-        </Paragraph>
+        <SectionHeading id="invite">Invite</SectionHeading>
+        <CardRow>
+          <Card
+            wave="CF"
+            buttonText={"FFFFFF"} gradient={["71AFE5", "6576CC"]}
+            title="Invite"
+            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"}
+            ]}
+          />
+        </CardRow>
       </AutoSpacing>
     </>
   )
diff --git a/pages/gps.js b/pages/gps.js
index 3249e04..7e7222e 100644
--- a/pages/gps.js
+++ b/pages/gps.js
@@ -1,11 +1,10 @@
-import Head from 'next/head'
-import Image from 'next/image'
-import styles from '../styles/Home.module.css'
 import Card from '../Components/Card'
-import CardRow from '../Components/CardRow'
 import Header from '../Components/Header'
 import AutoSpacing from '../Components/AutoSpacing'
 import SectionHeading from '../Components/SectionHeading'
+import Subheading from '../Components/Subheading'
+import Paragraph from '../Components/Paragraph'
+import CardRow from '../Components/CardRow'
 
 export default function Home() {
   return (
@@ -16,17 +15,39 @@
         gradient={["78ECF2", "71AFE5"]}
         wave="GS"
         buttons={[
-          {color: "71AFE5", buttonText: "FFFFFF", link: "#features", text: "Features"},
           {color: "71AFE5", buttonText: "FFFFFF", link: "#commands", text: "Commands"},
           {color: "6576CC", buttonText: "FFFFFF", link: "#invite", text: "Invite"}
         ]}
         hideArrow={true}
       />
       <AutoSpacing>
-          <SectionHeading title="Features" id="features"/>,
-          <SectionHeading title="Commands" id="commands"/>,
-          <SectionHeading title="Invite" id="invite"/>
-        </AutoSpacing>s
+        <SectionHeading id="commands">Commands</SectionHeading>
+        <Paragraph><code>m!getprefix</code>: Shows the bots prefix in the current guild.</Paragraph>
+        <Paragraph><code>m!info</code>: View some information about the bot's owners.</Paragraph>
+        <Paragraph><code>m!stats</code>: Shows the bot's current statistics.</Paragraph>
+        <Paragraph><code>m!ping</code>: Gets the current response time of the bot.</Paragraph>
+        <Paragraph><code>m!terms</code>: List all the terms and conditions for the bot.</Paragraph>
+        <Paragraph><code>m!setlanguage</code>: Set what language you want to use for your packs.</Paragraph>
+        <Paragraph><code>m!packs</code>: Shows a list of packs available in your language.</Paragraph>
+        <Paragraph><code>m!play</code>: Starts the game.</Paragraph>
+        <Paragraph><code>m!join</code>: Joins an active game in the channel. This can be during the 1m period when starting a game, or midway through.</Paragraph>
+        <Paragraph><code>m!leave</code>: Removes the player who ran it from the current game in that channel.</Paragraph>
+        <Paragraph><code>m!shuffle</code>: Reshuffles your cards.</Paragraph>
+        <Paragraph><code>m!end</code>: Ends the current game in that channel.</Paragraph>
+        <Paragraph><code>m!help</code>: Shows all commands</Paragraph>
+        <SectionHeading id="invite">Invite</SectionHeading>
+        <CardRow>
+          <Card
+            wave="GS"
+            buttonText={"FFFFFF"} gradient={["78ECF2", "71AFE5"]}
+            title="Invite"
+            subtext="Invite GPS to your server"
+            buttons={[
+              {color: "424242", link: "https://discordapp.com/oauth2/authorize?client_id=679361555732627476&scope=bot&permissions=130048", text: "Invite"}
+            ]}
+          />
+        </CardRow>
+      </AutoSpacing>
     </>
   )
 }
diff --git a/pages/index.js b/pages/index.js
index fb0283f..6203942 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -19,7 +19,7 @@
       />
       <p id="start" />
       <AutoSpacing>
-        <SectionHeading title="Projects" />
+        <SectionHeading>Projects</SectionHeading>
         <CardRow>
           <Card
             wave="GS" title="GPS" subtext="Cards Against Humanity on Discord"
@@ -49,7 +49,6 @@
           <Card
             wave="CA" title="Castaway" subtext="Stranded on Discord"
             buttons={[
-              {color: "F2D478", link: "/", text: "Invite"},
               {color: "F2D478", link: "/castaway", text: "About"}
             ]}
             buttonText={"000000"} gradient={["71AFE5", "78ECF2"]}
@@ -70,7 +69,7 @@
             buttonText={"000000"} gradient={["C4C4C4", "8D8D8D"]}
           />
         </CardRow>
-        <SectionHeading title="Code Bases" />
+        <SectionHeading>Code Bases</SectionHeading>
         <CardRow>
           <Card
             wave="GH" title="GitHub" subtext="View our open source projects"
@@ -87,7 +86,7 @@
             buttonText={"000000"} gradient={["2F6490", "3775A8"]}
           />
         </CardRow>
-        <SectionHeading title="Socials" />
+        <SectionHeading>Socials</SectionHeading>
         <CardRow>
           <Card
             wave="DS" title="Discord" subtext="Join our Discord server to talk with the community"
diff --git a/pages/rsm.js b/pages/rsm.js
index f7a21b8..ea51362 100644
--- a/pages/rsm.js
+++ b/pages/rsm.js
@@ -1,11 +1,11 @@
-import Head from 'next/head'
-import Image from 'next/image'
-import styles from '../styles/Home.module.css'
 import Card from '../Components/Card'
 import TileRow from '../Components/TileRow'
 import Header from '../Components/Header'
 import AutoSpacing from '../Components/AutoSpacing'
 import SectionHeading from '../Components/SectionHeading'
+import Subheading from '../Components/Subheading'
+import Paragraph from '../Components/Paragraph'
+import CardRow from '../Components/CardRow'
 
 export default function Home() {
   return (
@@ -23,7 +23,7 @@
         hideArrow={true}
       />
       <AutoSpacing>
-          <SectionHeading title="Features" id="features"/>
+          <SectionHeading id="features">Features</SectionHeading>
           <TileRow>
             <img alt="Moderate images"      src="/Features/RSM/Images.svg" />
             <img alt="Automate your server" src="/Features/RSM/Automate.svg" />
@@ -36,8 +36,56 @@
             <img alt="Track statistics"     src="/Features/RSM/Statistics.svg" />
             <img alt="Custom tags"          src="/Features/RSM/Tags.svg" />
           </TileRow>
-          <SectionHeading title="Commands" id="commands"/>
-          <SectionHeading title="Invite" id="invite"/>
+          <SectionHeading id="commands">Commands</SectionHeading>
+          <Paragraph><code>m!info</code>: Shows all commands and info.</Paragraph>
+          <Paragraph><code>m!stats</code>: Shows the bot statistics</Paragraph>
+          <Paragraph><code>m!settings</code>: Shows your servers log settings.</Paragraph>
+          <Paragraph><code>m!user</code>: Shows information about a user.</Paragraph>
+          <Paragraph><code>m!avatar</code>: Shows a users avatar.</Paragraph>
+          <Paragraph><code>m!roleall</code>: Role all humans or bots in the server.</Paragraph>
+          <Paragraph><code>m!suggest</code>: Sends a suggestion to add to the bot for voting.</Paragraph>
+          <Paragraph><code>m!ping</code>: Checks the bots ping time.</Paragraph>
+          <Paragraph><code>m!server</code>: Shows all information about your server.</Paragraph>
+          <Paragraph><code>m!tag</code>: m!tag create/delete title text, or m!tag title</Paragraph>
+          <Paragraph><code>m!role</code>: With Role: Shows information about a role.</Paragraph>
+          <Paragraph><code>m!role</code>: With Mention: Lets you edit or view a users roles.</Paragraph>
+          <Paragraph><code>m!viewas</code>: Shows the channels that a member can see.</Paragraph>
+          <Paragraph><code>m!verify</code>: Lets users verify in your server.</Paragraph>
+          <Paragraph><code>m!setverify</code>: Sets the role given when you m!verify. Name or ID.</Paragraph>
+          <Paragraph><code>m!mail</code>: Creates a modmail ticket if set up.</Paragraph>
+          <Paragraph><code>m!prefix</code>: Shows the bots prefix. Use @ if unknown.</Paragraph>
+          <Paragraph><code>m!setprefix</code>: Sets the bots prefix. You can always @ the bot.</Paragraph>
+          <Subheading>Moderation</Subheading>
+          <Paragraph><code>m!warn</code>: Warns a member.</Paragraph>
+          <Paragraph><code>m!clear</code>: Clears messages from a channel</Paragraph>
+          <Paragraph><code>m!kick</code>: Kicks a member.</Paragraph>
+          <Paragraph><code>m!softban</code>: Soft bans a member.</Paragraph>
+          <Paragraph><code>m!ban</code>: Bans a member.</Paragraph>
+          <Paragraph><code>m!unban</code>: Unbans a member.</Paragraph>
+          <Paragraph><code>m!purge</code>: Deletes messages in the channel.</Paragraph>
+          <Paragraph><code>m!punish</code>: Punishes a user.</Paragraph>
+          <Paragraph><code>m!setlog</code>: Sets the servers log channel.</Paragraph>
+          <Paragraph><code>m!ignore</code>: Stops logging users, roles and channels provided.</Paragraph>
+          <Paragraph><code>m!ignored</code>: Shows the ignored users, roles and channels.</Paragraph>
+          <Paragraph><code>m!stafflog</code>: Sets the staff log channel for reports and messages.</Paragraph>
+          <Paragraph><code>m!auto</code>: Lets you edit your server automations.</Paragraph>
+          <Paragraph><code>m!modmail</code>: Shows the setup for the mail command.</Paragraph>
+          <Subheading>Emergency</Subheading>
+          <Paragraph><code>m!slowmode</code>: Sets the channel slowmode.</Paragraph>
+          <Paragraph><code>m!lock</code>: Locks the channel. Applies slowmode and stops messages being sent.</Paragraph>
+          <Paragraph><code>m!unlock</code>: Unlocks the channel. Slowmode is removed and messages can be sent.</Paragraph>
+          <SectionHeading id="invite">Invite</SectionHeading>
+          <CardRow>
+          <Card
+            wave="RM"
+            buttonText={"FFFFFF"} gradient={["F27878", "D96B6B"]}
+            title="Invite"
+            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"}
+            ]}
+          />
+        </CardRow>
       </AutoSpacing>
     </>
   )
diff --git a/public/dark.svg b/public/dark.svg
new file mode 100644
index 0000000..ef69bb9
--- /dev/null
+++ b/public/dark.svg
@@ -0,0 +1,10 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30 25.7375C29.1235 25.8837 28.2232 25.9597 27.3051 25.9597C18.3648 25.9597 11.1173 18.7465 11.1173 9.84854C11.1173 6.13948 12.3766 2.72316 14.4929 0C6.83533 1.2771 1 7.9048 1 15.889C1 24.7869 8.24752 32.0002 17.1878 32.0002C22.4014 32.0002 27.0393 29.5472 30 25.7375Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/light.svg b/public/light.svg
new file mode 100644
index 0000000..1c03848
--- /dev/null
+++ b/public/light.svg
@@ -0,0 +1,18 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<circle cx="16" cy="16" r="8" fill="black"/>
+<path d="M15 1C15 0.447715 15.4477 0 16 0C16.5523 0 17 0.447715 17 1V5C17 5.55228 16.5523 6 16 6C15.4477 6 15 5.55228 15 5V1Z" fill="black"/>
+<path d="M25.8995 4.68629C26.29 4.29577 26.9232 4.29577 27.3137 4.68629C27.7042 5.07682 27.7042 5.70998 27.3137 6.10051L24.4853 8.92893C24.0948 9.31946 23.4616 9.31946 23.0711 8.92893C22.6805 8.53841 22.6805 7.90524 23.0711 7.51472L25.8995 4.68629Z" fill="black"/>
+<path d="M31 15C31.5523 15 32 15.4477 32 16C32 16.5523 31.5523 17 31 17H27C26.4477 17 26 16.5523 26 16C26 15.4477 26.4477 15 27 15H31Z" fill="black"/>
+<path d="M27.3137 25.8995C27.7042 26.29 27.7042 26.9232 27.3137 27.3137C26.9232 27.7042 26.29 27.7042 25.8995 27.3137L23.0711 24.4853C22.6805 24.0948 22.6805 23.4616 23.0711 23.0711C23.4616 22.6805 24.0948 22.6805 24.4853 23.0711L27.3137 25.8995Z" fill="black"/>
+<path d="M15 27C15 26.4477 15.4477 26 16 26C16.5523 26 17 26.4477 17 27V31C17 31.5523 16.5523 32 16 32C15.4477 32 15 31.5523 15 31V27Z" fill="black"/>
+<path d="M7.51472 23.0711C7.90524 22.6805 8.53841 22.6805 8.92893 23.0711C9.31946 23.4616 9.31946 24.0948 8.92893 24.4853L6.10051 27.3137C5.70998 27.7042 5.07682 27.7042 4.68629 27.3137C4.29577 26.9232 4.29577 26.29 4.68629 25.8995L7.51472 23.0711Z" fill="black"/>
+<path d="M5 15C5.55228 15 6 15.4477 6 16C6 16.5523 5.55228 17 5 17H1C0.447715 17 -2.41411e-08 16.5523 0 16C2.41411e-08 15.4477 0.447715 15 1 15H5Z" fill="black"/>
+<path d="M8.92893 7.51472C9.31946 7.90524 9.31946 8.53841 8.92893 8.92893C8.53841 9.31946 7.90524 9.31946 7.51472 8.92893L4.68629 6.1005C4.29577 5.70998 4.29577 5.07682 4.68629 4.68629C5.07682 4.29577 5.70998 4.29577 6.10051 4.68629L8.92893 7.51472Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/theme.svg b/public/theme.svg
new file mode 100644
index 0000000..481435d
--- /dev/null
+++ b/public/theme.svg
@@ -0,0 +1,83 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<style>.animation_989 {
+	animation: 1s ease-in-out 0s 1 normal forwards running animation_989;
+		transform: translateX(3022px) translateY(5292px) rotate(0deg);
+		width: 32px;
+		height: 32px;
+		rx: 0px;
+		opacity: 1;
+		fill: ;
+}
+@keyframes animation_989 {
+	0% {
+		transform: translateX(3022px) translateY(5292px) rotate(0deg);
+		width: 32px;
+		height: 32px;
+		rx: 0px;
+		opacity: 1;
+		fill: ;
+	}
+	100% {
+		transform: translateX(3022px) translateY(5292px) rotate(0deg);
+		width: 32px;
+		height: 32px;
+		rx: 0px;
+		opacity: 1;
+		fill: ;
+	}
+}.Vector_411 {
+	animation: 1s ease-in-out 0s 1 normal forwards running Vector_411;
+		opacity: 0;
+		transform: translateX(9px) translateY(9px) rotate(0deg);
+		width: 14px;
+		height: 14px;
+}
+@keyframes Vector_411 {
+	0% {
+		opacity: 0;
+		transform: translateX(9px) translateY(9px) rotate(0deg);
+		width: 14px;
+		height: 14px;
+	}
+	40% {
+		transform: translateX(9px) translateY(9px) rotate(0deg);
+		width: 14px;
+		height: 14px;
+		opacity: 0;
+	}
+	100% {
+		transform: translateX(1px) translateY(1px) rotate(0deg);
+		width: 30px;
+		height: 30px;
+		opacity: 1;
+	}
+}.Subtract_790 {
+	animation: 1s ease-in-out 0.3s 1 normal forwards running Subtract_790;
+		fill: rgba(255,255,255,1);
+}
+@keyframes Subtract_790 {
+	0% {
+		fill: rgba(255,255,255,1);
+	}
+	30% {
+		fill: rgba(255,255,255,1);
+	}
+	100% {
+		fill: rgba(0,0,0,1);
+	}
+}
+</style>
+<g clip-path="url(#clip_0_468)" class="animation_989" width="32" height="32" data-name="animation">
+	<path d="M14.0625 0.9375C14.0625 0.419733 14.4822 0 15 0C15.5178 0 15.9375 0.419733 15.9375 0.9375V4.6875C15.9375 5.20527 15.5178 5.625 15 5.625C14.4822 5.625 14.0625 5.20527 14.0625 4.6875V0.9375ZM24.2808 4.3934C24.6469 4.02728 25.2405 4.02728 25.6066 4.3934C25.9727 4.75951 25.9727 5.35311 25.6066 5.71922L22.955 8.37087C22.5888 8.73699 21.9952 8.73699 21.6291 8.37087C21.263 8.00476 21.263 7.41117 21.6291 7.04505L24.2808 4.3934ZM29.0625 14.0625C29.5803 14.0625 30 14.4822 30 15C30 15.5178 29.5803 15.9375 29.0625 15.9375H25.3125C24.7947 15.9375 24.375 15.5178 24.375 15C24.375 14.4822 24.7947 14.0625 25.3125 14.0625H29.0625ZM25.6066 24.2808C25.9727 24.6469 25.9727 25.2405 25.6066 25.6066C25.2405 25.9727 24.6469 25.9727 24.2808 25.6066L21.6291 22.955C21.263 22.5888 21.263 21.9952 21.6291 21.6291C21.9952 21.263 22.5888 21.263 22.955 21.6291L25.6066 24.2808ZM14.0625 25.3125C14.0625 24.7947 14.4822 24.375 15 24.375C15.5178 24.375 15.9375 24.7947 15.9375 25.3125V29.0625C15.9375 29.5803 15.5178 30 15 30C14.4822 30 14.0625 29.5803 14.0625 29.0625V25.3125ZM7.04505 21.6291C7.41117 21.263 8.00476 21.263 8.37087 21.6291C8.73699 21.9952 8.73699 22.5888 8.37087 22.955L5.71922 25.6066C5.35311 25.9727 4.75951 25.9727 4.3934 25.6066C4.02728 25.2405 4.02728 24.6469 4.3934 24.2808L7.04505 21.6291ZM4.6875 14.0625C5.20527 14.0625 5.625 14.4822 5.625 15C5.625 15.5178 5.20527 15.9375 4.6875 15.9375H0.9375C0.419733 15.9375 -2.26323e-08 15.5178 0 15C2.26323e-08 14.4822 0.419733 14.0625 0.9375 14.0625H4.6875ZM8.37087 7.04505C8.73699 7.41117 8.73699 8.00476 8.37087 8.37087C8.00476 8.73699 7.41117 8.73699 7.04505 8.37087L4.3934 5.71922C4.02728 5.35311 4.02728 4.75951 4.3934 4.3934C4.75951 4.02728 5.35311 4.02728 5.71922 4.3934L8.37087 7.04505Z" fill="black" data-name="Vector" class="Vector_411"/>
+	<path d="M14.0625 0.9375C14.0625 0.419733 14.4822 0 15 0C15.5178 0 15.9375 0.419733 15.9375 0.9375V4.6875C15.9375 5.20527 15.5178 5.625 15 5.625C14.4822 5.625 14.0625 5.20527 14.0625 4.6875V0.9375ZM24.2808 4.3934C24.6469 4.02728 25.2405 4.02728 25.6066 4.3934C25.9727 4.75951 25.9727 5.35311 25.6066 5.71922L22.955 8.37087C22.5888 8.73699 21.9952 8.73699 21.6291 8.37087C21.263 8.00476 21.263 7.41117 21.6291 7.04505L24.2808 4.3934ZM29.0625 14.0625C29.5803 14.0625 30 14.4822 30 15C30 15.5178 29.5803 15.9375 29.0625 15.9375H25.3125C24.7947 15.9375 24.375 15.5178 24.375 15C24.375 14.4822 24.7947 14.0625 25.3125 14.0625H29.0625ZM25.6066 24.2808C25.9727 24.6469 25.9727 25.2405 25.6066 25.6066C25.2405 25.9727 24.6469 25.9727 24.2808 25.6066L21.6291 22.955C21.263 22.5888 21.263 21.9952 21.6291 21.6291C21.9952 21.263 22.5888 21.263 22.955 21.6291L25.6066 24.2808ZM14.0625 25.3125C14.0625 24.7947 14.4822 24.375 15 24.375C15.5178 24.375 15.9375 24.7947 15.9375 25.3125V29.0625C15.9375 29.5803 15.5178 30 15 30C14.4822 30 14.0625 29.5803 14.0625 29.0625V25.3125ZM7.04505 21.6291C7.41117 21.263 8.00476 21.263 8.37087 21.6291C8.73699 21.9952 8.73699 22.5888 8.37087 22.955L5.71922 25.6066C5.35311 25.9727 4.75951 25.9727 4.3934 25.6066C4.02728 25.2405 4.02728 24.6469 4.3934 24.2808L7.04505 21.6291ZM4.6875 14.0625C5.20527 14.0625 5.625 14.4822 5.625 15C5.625 15.5178 5.20527 15.9375 4.6875 15.9375H0.9375C0.419733 15.9375 -2.26323e-08 15.5178 0 15C2.26323e-08 14.4822 0.419733 14.0625 0.9375 14.0625H4.6875ZM8.37087 7.04505C8.73699 7.41117 8.73699 8.00476 8.37087 8.37087C8.00476 8.73699 7.41117 8.73699 7.04505 8.37087L4.3934 5.71922C4.02728 5.35311 4.02728 4.75951 4.3934 4.3934C4.75951 4.02728 5.35311 4.02728 5.71922 4.3934L8.37087 7.04505Z" fill="black" data-name="Vector" class="Vector_411"/>
+	<path d="M14.0625 0.9375C14.0625 0.419733 14.4822 0 15 0C15.5178 0 15.9375 0.419733 15.9375 0.9375V4.6875C15.9375 5.20527 15.5178 5.625 15 5.625C14.4822 5.625 14.0625 5.20527 14.0625 4.6875V0.9375ZM24.2808 4.3934C24.6469 4.02728 25.2405 4.02728 25.6066 4.3934C25.9727 4.75951 25.9727 5.35311 25.6066 5.71922L22.955 8.37087C22.5888 8.73699 21.9952 8.73699 21.6291 8.37087C21.263 8.00476 21.263 7.41117 21.6291 7.04505L24.2808 4.3934ZM29.0625 14.0625C29.5803 14.0625 30 14.4822 30 15C30 15.5178 29.5803 15.9375 29.0625 15.9375H25.3125C24.7947 15.9375 24.375 15.5178 24.375 15C24.375 14.4822 24.7947 14.0625 25.3125 14.0625H29.0625ZM25.6066 24.2808C25.9727 24.6469 25.9727 25.2405 25.6066 25.6066C25.2405 25.9727 24.6469 25.9727 24.2808 25.6066L21.6291 22.955C21.263 22.5888 21.263 21.9952 21.6291 21.6291C21.9952 21.263 22.5888 21.263 22.955 21.6291L25.6066 24.2808ZM14.0625 25.3125C14.0625 24.7947 14.4822 24.375 15 24.375C15.5178 24.375 15.9375 24.7947 15.9375 25.3125V29.0625C15.9375 29.5803 15.5178 30 15 30C14.4822 30 14.0625 29.5803 14.0625 29.0625V25.3125ZM7.04505 21.6291C7.41117 21.263 8.00476 21.263 8.37087 21.6291C8.73699 21.9952 8.73699 22.5888 8.37087 22.955L5.71922 25.6066C5.35311 25.9727 4.75951 25.9727 4.3934 25.6066C4.02728 25.2405 4.02728 24.6469 4.3934 24.2808L7.04505 21.6291ZM4.6875 14.0625C5.20527 14.0625 5.625 14.4822 5.625 15C5.625 15.5178 5.20527 15.9375 4.6875 15.9375H0.9375C0.419733 15.9375 -2.26323e-08 15.5178 0 15C2.26323e-08 14.4822 0.419733 14.0625 0.9375 14.0625H4.6875ZM8.37087 7.04505C8.73699 7.41117 8.73699 8.00476 8.37087 8.37087C8.00476 8.73699 7.41117 8.73699 7.04505 8.37087L4.3934 5.71922C4.02728 5.35311 4.02728 4.75951 4.3934 4.3934C4.75951 4.02728 5.35311 4.02728 5.71922 4.3934L8.37087 7.04505Z" fill="black" data-name="Vector" class="Vector_411"/>
+	<path d="M14.0625 0.9375C14.0625 0.419733 14.4822 0 15 0C15.5178 0 15.9375 0.419733 15.9375 0.9375V4.6875C15.9375 5.20527 15.5178 5.625 15 5.625C14.4822 5.625 14.0625 5.20527 14.0625 4.6875V0.9375ZM24.2808 4.3934C24.6469 4.02728 25.2405 4.02728 25.6066 4.3934C25.9727 4.75951 25.9727 5.35311 25.6066 5.71922L22.955 8.37087C22.5888 8.73699 21.9952 8.73699 21.6291 8.37087C21.263 8.00476 21.263 7.41117 21.6291 7.04505L24.2808 4.3934ZM29.0625 14.0625C29.5803 14.0625 30 14.4822 30 15C30 15.5178 29.5803 15.9375 29.0625 15.9375H25.3125C24.7947 15.9375 24.375 15.5178 24.375 15C24.375 14.4822 24.7947 14.0625 25.3125 14.0625H29.0625ZM25.6066 24.2808C25.9727 24.6469 25.9727 25.2405 25.6066 25.6066C25.2405 25.9727 24.6469 25.9727 24.2808 25.6066L21.6291 22.955C21.263 22.5888 21.263 21.9952 21.6291 21.6291C21.9952 21.263 22.5888 21.263 22.955 21.6291L25.6066 24.2808ZM14.0625 25.3125C14.0625 24.7947 14.4822 24.375 15 24.375C15.5178 24.375 15.9375 24.7947 15.9375 25.3125V29.0625C15.9375 29.5803 15.5178 30 15 30C14.4822 30 14.0625 29.5803 14.0625 29.0625V25.3125ZM7.04505 21.6291C7.41117 21.263 8.00476 21.263 8.37087 21.6291C8.73699 21.9952 8.73699 22.5888 8.37087 22.955L5.71922 25.6066C5.35311 25.9727 4.75951 25.9727 4.3934 25.6066C4.02728 25.2405 4.02728 24.6469 4.3934 24.2808L7.04505 21.6291ZM4.6875 14.0625C5.20527 14.0625 5.625 14.4822 5.625 15C5.625 15.5178 5.20527 15.9375 4.6875 15.9375H0.9375C0.419733 15.9375 -2.26323e-08 15.5178 0 15C2.26323e-08 14.4822 0.419733 14.0625 0.9375 14.0625H4.6875ZM8.37087 7.04505C8.73699 7.41117 8.73699 8.00476 8.37087 8.37087C8.00476 8.73699 7.41117 8.73699 7.04505 8.37087L4.3934 5.71922C4.02728 5.35311 4.02728 4.75951 4.3934 4.3934C4.75951 4.02728 5.35311 4.02728 5.71922 4.3934L8.37087 7.04505Z" fill="black" data-name="Vector" class="Vector_411"/>
+	<path d="M14.0625 0.9375C14.0625 0.419733 14.4822 0 15 0C15.5178 0 15.9375 0.419733 15.9375 0.9375V4.6875C15.9375 5.20527 15.5178 5.625 15 5.625C14.4822 5.625 14.0625 5.20527 14.0625 4.6875V0.9375ZM24.2808 4.3934C24.6469 4.02728 25.2405 4.02728 25.6066 4.3934C25.9727 4.75951 25.9727 5.35311 25.6066 5.71922L22.955 8.37087C22.5888 8.73699 21.9952 8.73699 21.6291 8.37087C21.263 8.00476 21.263 7.41117 21.6291 7.04505L24.2808 4.3934ZM29.0625 14.0625C29.5803 14.0625 30 14.4822 30 15C30 15.5178 29.5803 15.9375 29.0625 15.9375H25.3125C24.7947 15.9375 24.375 15.5178 24.375 15C24.375 14.4822 24.7947 14.0625 25.3125 14.0625H29.0625ZM25.6066 24.2808C25.9727 24.6469 25.9727 25.2405 25.6066 25.6066C25.2405 25.9727 24.6469 25.9727 24.2808 25.6066L21.6291 22.955C21.263 22.5888 21.263 21.9952 21.6291 21.6291C21.9952 21.263 22.5888 21.263 22.955 21.6291L25.6066 24.2808ZM14.0625 25.3125C14.0625 24.7947 14.4822 24.375 15 24.375C15.5178 24.375 15.9375 24.7947 15.9375 25.3125V29.0625C15.9375 29.5803 15.5178 30 15 30C14.4822 30 14.0625 29.5803 14.0625 29.0625V25.3125ZM7.04505 21.6291C7.41117 21.263 8.00476 21.263 8.37087 21.6291C8.73699 21.9952 8.73699 22.5888 8.37087 22.955L5.71922 25.6066C5.35311 25.9727 4.75951 25.9727 4.3934 25.6066C4.02728 25.2405 4.02728 24.6469 4.3934 24.2808L7.04505 21.6291ZM4.6875 14.0625C5.20527 14.0625 5.625 14.4822 5.625 15C5.625 15.5178 5.20527 15.9375 4.6875 15.9375H0.9375C0.419733 15.9375 -2.26323e-08 15.5178 0 15C2.26323e-08 14.4822 0.419733 14.0625 0.9375 14.0625H4.6875ZM8.37087 7.04505C8.73699 7.41117 8.73699 8.00476 8.37087 8.37087C8.00476 8.73699 7.41117 8.73699 7.04505 8.37087L4.3934 5.71922C4.02728 5.35311 4.02728 4.75951 4.3934 4.3934C4.75951 4.02728 5.35311 4.02728 5.71922 4.3934L8.37087 7.04505Z" fill="black" data-name="Vector" class="Vector_411"/>
+	<path d="M14.0625 0.9375C14.0625 0.419733 14.4822 0 15 0C15.5178 0 15.9375 0.419733 15.9375 0.9375V4.6875C15.9375 5.20527 15.5178 5.625 15 5.625C14.4822 5.625 14.0625 5.20527 14.0625 4.6875V0.9375ZM24.2808 4.3934C24.6469 4.02728 25.2405 4.02728 25.6066 4.3934C25.9727 4.75951 25.9727 5.35311 25.6066 5.71922L22.955 8.37087C22.5888 8.73699 21.9952 8.73699 21.6291 8.37087C21.263 8.00476 21.263 7.41117 21.6291 7.04505L24.2808 4.3934ZM29.0625 14.0625C29.5803 14.0625 30 14.4822 30 15C30 15.5178 29.5803 15.9375 29.0625 15.9375H25.3125C24.7947 15.9375 24.375 15.5178 24.375 15C24.375 14.4822 24.7947 14.0625 25.3125 14.0625H29.0625ZM25.6066 24.2808C25.9727 24.6469 25.9727 25.2405 25.6066 25.6066C25.2405 25.9727 24.6469 25.9727 24.2808 25.6066L21.6291 22.955C21.263 22.5888 21.263 21.9952 21.6291 21.6291C21.9952 21.263 22.5888 21.263 22.955 21.6291L25.6066 24.2808ZM14.0625 25.3125C14.0625 24.7947 14.4822 24.375 15 24.375C15.5178 24.375 15.9375 24.7947 15.9375 25.3125V29.0625C15.9375 29.5803 15.5178 30 15 30C14.4822 30 14.0625 29.5803 14.0625 29.0625V25.3125ZM7.04505 21.6291C7.41117 21.263 8.00476 21.263 8.37087 21.6291C8.73699 21.9952 8.73699 22.5888 8.37087 22.955L5.71922 25.6066C5.35311 25.9727 4.75951 25.9727 4.3934 25.6066C4.02728 25.2405 4.02728 24.6469 4.3934 24.2808L7.04505 21.6291ZM4.6875 14.0625C5.20527 14.0625 5.625 14.4822 5.625 15C5.625 15.5178 5.20527 15.9375 4.6875 15.9375H0.9375C0.419733 15.9375 -2.26323e-08 15.5178 0 15C2.26323e-08 14.4822 0.419733 14.0625 0.9375 14.0625H4.6875ZM8.37087 7.04505C8.73699 7.41117 8.73699 8.00476 8.37087 8.37087C8.00476 8.73699 7.41117 8.73699 7.04505 8.37087L4.3934 5.71922C4.02728 5.35311 4.02728 4.75951 4.3934 4.3934C4.75951 4.02728 5.35311 4.02728 5.71922 4.3934L8.37087 7.04505Z" fill="black" data-name="Vector" class="Vector_411"/>
+	<path d="M14.0625 0.9375C14.0625 0.419733 14.4822 0 15 0C15.5178 0 15.9375 0.419733 15.9375 0.9375V4.6875C15.9375 5.20527 15.5178 5.625 15 5.625C14.4822 5.625 14.0625 5.20527 14.0625 4.6875V0.9375ZM24.2808 4.3934C24.6469 4.02728 25.2405 4.02728 25.6066 4.3934C25.9727 4.75951 25.9727 5.35311 25.6066 5.71922L22.955 8.37087C22.5888 8.73699 21.9952 8.73699 21.6291 8.37087C21.263 8.00476 21.263 7.41117 21.6291 7.04505L24.2808 4.3934ZM29.0625 14.0625C29.5803 14.0625 30 14.4822 30 15C30 15.5178 29.5803 15.9375 29.0625 15.9375H25.3125C24.7947 15.9375 24.375 15.5178 24.375 15C24.375 14.4822 24.7947 14.0625 25.3125 14.0625H29.0625ZM25.6066 24.2808C25.9727 24.6469 25.9727 25.2405 25.6066 25.6066C25.2405 25.9727 24.6469 25.9727 24.2808 25.6066L21.6291 22.955C21.263 22.5888 21.263 21.9952 21.6291 21.6291C21.9952 21.263 22.5888 21.263 22.955 21.6291L25.6066 24.2808ZM14.0625 25.3125C14.0625 24.7947 14.4822 24.375 15 24.375C15.5178 24.375 15.9375 24.7947 15.9375 25.3125V29.0625C15.9375 29.5803 15.5178 30 15 30C14.4822 30 14.0625 29.5803 14.0625 29.0625V25.3125ZM7.04505 21.6291C7.41117 21.263 8.00476 21.263 8.37087 21.6291C8.73699 21.9952 8.73699 22.5888 8.37087 22.955L5.71922 25.6066C5.35311 25.9727 4.75951 25.9727 4.3934 25.6066C4.02728 25.2405 4.02728 24.6469 4.3934 24.2808L7.04505 21.6291ZM4.6875 14.0625C5.20527 14.0625 5.625 14.4822 5.625 15C5.625 15.5178 5.20527 15.9375 4.6875 15.9375H0.9375C0.419733 15.9375 -2.26323e-08 15.5178 0 15C2.26323e-08 14.4822 0.419733 14.0625 0.9375 14.0625H4.6875ZM8.37087 7.04505C8.73699 7.41117 8.73699 8.00476 8.37087 8.37087C8.00476 8.73699 7.41117 8.73699 7.04505 8.37087L4.3934 5.71922C4.02728 5.35311 4.02728 4.75951 4.3934 4.3934C4.75951 4.02728 5.35311 4.02728 5.71922 4.3934L8.37087 7.04505Z" fill="black" data-name="Vector" class="Vector_411"/>
+	<path d="M14.0625 0.9375C14.0625 0.419733 14.4822 0 15 0C15.5178 0 15.9375 0.419733 15.9375 0.9375V4.6875C15.9375 5.20527 15.5178 5.625 15 5.625C14.4822 5.625 14.0625 5.20527 14.0625 4.6875V0.9375ZM24.2808 4.3934C24.6469 4.02728 25.2405 4.02728 25.6066 4.3934C25.9727 4.75951 25.9727 5.35311 25.6066 5.71922L22.955 8.37087C22.5888 8.73699 21.9952 8.73699 21.6291 8.37087C21.263 8.00476 21.263 7.41117 21.6291 7.04505L24.2808 4.3934ZM29.0625 14.0625C29.5803 14.0625 30 14.4822 30 15C30 15.5178 29.5803 15.9375 29.0625 15.9375H25.3125C24.7947 15.9375 24.375 15.5178 24.375 15C24.375 14.4822 24.7947 14.0625 25.3125 14.0625H29.0625ZM25.6066 24.2808C25.9727 24.6469 25.9727 25.2405 25.6066 25.6066C25.2405 25.9727 24.6469 25.9727 24.2808 25.6066L21.6291 22.955C21.263 22.5888 21.263 21.9952 21.6291 21.6291C21.9952 21.263 22.5888 21.263 22.955 21.6291L25.6066 24.2808ZM14.0625 25.3125C14.0625 24.7947 14.4822 24.375 15 24.375C15.5178 24.375 15.9375 24.7947 15.9375 25.3125V29.0625C15.9375 29.5803 15.5178 30 15 30C14.4822 30 14.0625 29.5803 14.0625 29.0625V25.3125ZM7.04505 21.6291C7.41117 21.263 8.00476 21.263 8.37087 21.6291C8.73699 21.9952 8.73699 22.5888 8.37087 22.955L5.71922 25.6066C5.35311 25.9727 4.75951 25.9727 4.3934 25.6066C4.02728 25.2405 4.02728 24.6469 4.3934 24.2808L7.04505 21.6291ZM4.6875 14.0625C5.20527 14.0625 5.625 14.4822 5.625 15C5.625 15.5178 5.20527 15.9375 4.6875 15.9375H0.9375C0.419733 15.9375 -2.26323e-08 15.5178 0 15C2.26323e-08 14.4822 0.419733 14.0625 0.9375 14.0625H4.6875ZM8.37087 7.04505C8.73699 7.41117 8.73699 8.00476 8.37087 8.37087C8.00476 8.73699 7.41117 8.73699 7.04505 8.37087L4.3934 5.71922C4.02728 5.35311 4.02728 4.75951 4.3934 4.3934C4.75951 4.02728 5.35311 4.02728 5.71922 4.3934L8.37087 7.04505Z" fill="black" data-name="Vector" class="Vector_411"/>
+	<path fill-rule="evenodd" clip-rule="evenodd" d="M8.03809 16.0001C12.4774 16.0001 16.0762 12.4184 16.0762 8.00007C16.0762 3.58175 12.4774 9.53674e-07 8.03809 9.53674e-07C3.59878 9.53674e-07 0 3.58175 0 8.00007C0 12.4184 3.59878 16.0001 8.03809 16.0001Z" fill="black" data-name="Subtract" class="Subtract_790" transform="translate(8 8)"/>
+</g>
+<defs><clipPath id="clip_0_468"><rect width="32" height="32"/></clipPath>
+</defs>
+</svg>
\ No newline at end of file
diff --git a/styles/globals.css b/styles/globals.css
index 1ddc94c..42628a9 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -2,6 +2,10 @@
   padding: 0;
   margin: 0;
 
+  overflow-x: hidden;
+}
+
+html {
   --card-background-color: rgba(255, 255, 255, 0.65);
   --card-text-color: #424242;
   --card-overlay-color: rgba(0, 0, 0, 0);
@@ -9,20 +13,44 @@
   --page-background: #ffffff;
   --link-color: #6576CC;
   --hint-color: #f1f1f1;
-  /* --card-background-color: rgba(0, 0, 0, 0.65);
+  
+  background-color: var(--page-background);
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    --card-background-color: rgba(0, 0, 0, 0.65);
+    --card-text-color: #ffffff;
+    --card-overlay-filter: brightness(0.75);
+    --card-filter: drop-shadow(0px 0px 5px #42424280);
+    --page-background: #252525;
+    --link-color: #6576CC;
+    --hint-color: #101010;
+  }
+}
+
+
+.light {
+  --card-background-color: rgba(255, 255, 255, 0.65);
+  --card-text-color: #424242;
+  --card-overlay-color: rgba(0, 0, 0, 0);
+  --card-filter: drop-shadow(0px 0px 5px #00000080);
+  --page-background: #ffffff;
+  --link-color: #6576CC;
+  --hint-color: #f1f1f1;
+}
+
+.dark {
+  --card-background-color: rgba(0, 0, 0, 0.65);
   --card-text-color: #ffffff;
   --card-overlay-filter: brightness(0.75);
   --card-filter: drop-shadow(0px 0px 5px #42424280);
   --page-background: #252525;
   --link-color: #6576CC;
-  --hint-color: #10;
-  */
-
-  background-color: var(--page-background);
-
-  overflow-x: hidden;
+  --hint-color: #101010;
 }
 
+
 a {
   text-decoration: none;
   transition: 0.5s ease-in-out;
diff --git a/styles/navbar.module.css b/styles/navbar.module.css
index 09d3389..01055a4 100644
--- a/styles/navbar.module.css
+++ b/styles/navbar.module.css
@@ -46,6 +46,7 @@
     height: 50px;
     width: 50px;
     margin-bottom: 5px;
+    cursor: pointer;
 }
 
 .containerOpen {
@@ -119,4 +120,4 @@
         from { max-width: 460px; }
         to { max-width: 64px ; }
     }
-}
\ No newline at end of file
+}
diff --git a/styles/sectionheading.module.css b/styles/sectionheading.module.css
index eed2f94..b657ff0 100644
--- a/styles/sectionheading.module.css
+++ b/styles/sectionheading.module.css
@@ -4,4 +4,5 @@
     color: var(--card-text-color);
     font-weight: lighter;
     text-align: center;
+    word-break: break-all;
 }
\ No newline at end of file
diff --git a/styles/subheading.module.css b/styles/subheading.module.css
new file mode 100644
index 0000000..f4c42d0
--- /dev/null
+++ b/styles/subheading.module.css
@@ -0,0 +1,8 @@
+.title {
+    width: 100%;
+    font-size: max(2em, 2vw);
+    color: var(--card-text-color);
+    font-weight: lighter;
+    text-align: center;
+    word-break: break-word;
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 64e276b..39b63bf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -50,6 +50,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.12.1", "@babel/runtime@^7.9.2":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a"
+  integrity sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/types@7.15.0":
   version "7.15.0"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.15.0.tgz#61af11f2286c4e9c69ca8deb5f4375a73c72dcbd"
@@ -204,6 +211,14 @@
   resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.0.6.tgz#023d72a5c4531b4ce204528971700a78a85a0c50"
   integrity sha512-Myxw//kzromB9yWgS8qYGuGVf91oBUUJpNvy5eM50sqvmKLbKjwLxohJnkWGTeeI9v9IBMtPLxz5Gc60FIfvCA==
 
+"@types/hoist-non-react-statics@^3.3.0":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
+  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
+  dependencies:
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+
 "@types/json5@^0.0.29":
   version "0.0.29"
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
@@ -214,6 +229,35 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-16.7.10.tgz#7aa732cc47341c12a16b7d562f519c2383b6d4fc"
   integrity sha512-S63Dlv4zIPb8x6MMTgDq5WWRJQe56iBEY0O3SOFA9JrRienkOVDXSXBjjJw6HTNQYSE2JI6GMCR6LVbIMHJVvA==
 
+"@types/prop-types@*":
+  version "15.7.4"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
+  integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
+
+"@types/react-redux@^7.1.16":
+  version "7.1.18"
+  resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.18.tgz#2bf8fd56ebaae679a90ebffe48ff73717c438e04"
+  integrity sha512-9iwAsPyJ9DLTRH+OFeIrm9cAbIj1i2ANL3sKQFATqnPWRbg+jEFXyZOKHiQK/N86pNRXbb4HRxAxo0SIX1XwzQ==
+  dependencies:
+    "@types/hoist-non-react-statics" "^3.3.0"
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+    redux "^4.0.0"
+
+"@types/react@*":
+  version "17.0.19"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.19.tgz#8f2a85e8180a43b57966b237d26a29481dacc991"
+  integrity sha512-sX1HisdB1/ZESixMTGnMxH9TDe8Sk709734fEQZzCV/4lSu9kJCPbo2PbTRoZM+53Pp0P10hYVyReUueGwUi4A==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
+"@types/scheduler@*":
+  version "0.16.2"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
+  integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
+
 "@types/webidl-conversions@*":
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/@types/webidl-conversions/-/webidl-conversions-6.1.1.tgz#e33bc8ea812a01f63f90481c666334844b12a09e"
@@ -835,6 +879,11 @@
   dependencies:
     cssnano-preset-simple "^3.0.0"
 
+csstype@^3.0.2:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.8.tgz#d2266a792729fb227cd216fb572f43728e1ad340"
+  integrity sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==
+
 damerau-levenshtein@^1.0.6:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.7.tgz#64368003512a1a6992593741a09a9d31a836f55d"
@@ -1521,6 +1570,13 @@
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
+hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 hosted-git-info@^2.1.4:
   version "2.8.9"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
@@ -1778,6 +1834,16 @@
     merge-stream "^2.0.0"
     supports-color "^8.0.0"
 
+js-cookie@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.1.tgz#9e39b4c6c2f56563708d7d31f6f5f21873a92414"
+  integrity sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw==
+
+js-cookies@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/js-cookies/-/js-cookies-1.0.4.tgz#d46e576c420ff6d5542c0f52b6d4ef7d637e754e"
+  integrity sha1-1G5XbEIP9tVULA9SttTvfWN+dU4=
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -2034,6 +2100,11 @@
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
 
+next-redux-wrapper@^7.0.4:
+  version "7.0.4"
+  resolved "https://registry.yarnpkg.com/next-redux-wrapper/-/next-redux-wrapper-7.0.4.tgz#df10b03077c03dc2bb17986c45d528ebdfcffed0"
+  integrity sha512-AYMS3mZCsdqRP1TpKxzPmwCSKOe1Koq/bklUZG6inLUGQQWsbHRogr0N8BHGms6Bh3HTCsic53ztAnbwopQagg==
+
 next@11.1.2:
   version "11.1.2"
   resolved "https://registry.yarnpkg.com/next/-/next-11.1.2.tgz#527475787a9a362f1bc916962b0c0655cc05bc91"
@@ -2535,7 +2606,7 @@
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
-react-dom@17.0.2:
+react-dom@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
   integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
@@ -2554,17 +2625,29 @@
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
-react-is@^16.8.1:
+react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-redux@^7.2.4:
+  version "7.2.4"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.4.tgz#1ebb474032b72d806de2e0519cd07761e222e225"
+  integrity sha512-hOQ5eOSkEJEXdpIKbnRyl04LhaWabkDPV+Ix97wqQX3T3d2NQ8DUblNXXtNMavc7DpswyQM6xfaN4HQDKNY2JA==
+  dependencies:
+    "@babel/runtime" "^7.12.1"
+    "@types/react-redux" "^7.1.16"
+    hoist-non-react-statics "^3.3.2"
+    loose-envify "^1.4.0"
+    prop-types "^15.7.2"
+    react-is "^16.13.1"
+
 react-refresh@0.8.3:
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
   integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
 
-react@17.0.2:
+react@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
   integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
@@ -2618,6 +2701,18 @@
   dependencies:
     picomatch "^2.2.1"
 
+redux-thunk@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"
+  integrity sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw==
+
+redux@^4.0.0, redux@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.1.1.tgz#76f1c439bb42043f985fbd9bf21990e60bd67f47"
+  integrity sha512-hZQZdDEM25UY2P493kPYuKqviVwZ58lEmGQNeQ+gXa+U0gYPUBf7NKYazbe3m+bs/DzM/ahN12DbF+NG8i0CWw==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+
 regenerator-runtime@^0.13.4:
   version "0.13.9"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"