diff --git a/src/app/globals.css b/src/app/globals.css
index b82dfe6..41f5c32 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -113,3 +113,8 @@ a {
   color: inherit;
   text-decoration: none;
 }
+
+::selection {
+  background: var(--fg);
+  color: var(--bg);
+}
diff --git a/src/app/page.module.css b/src/app/page.module.css
index 2c958a0..9e8bee0 100644
--- a/src/app/page.module.css
+++ b/src/app/page.module.css
@@ -3,7 +3,6 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-
   width: 100vw;
   height: 100vh;
 }
@@ -25,4 +24,4 @@
 
 .form div input {
   width: 15rem;
-}
\ No newline at end of file
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index f6a80df..dd5880e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,20 +1,24 @@
+import Logo from "@/components/Logo";
 import styles from "./page.module.css";
-import Image from "next/image";
 
 export default function Home() {
   return (
     <main className={styles.main}>
-      <Image src="/icon.svg" alt="gluestick logo" width="256" height="256" />
+      <Logo />
 
       <p
         style={{
+          marginTop: "2rem",
           display: "flex",
-          flexDirection: "column"
+          flexDirection: "column",
+          fontStretch: "expanded",
+          lineHeight: 1.5
         }}
       >
         <a href="/login">login</a>
-        <a href="/oauth/discord/login">register (discord)</a>
-        <a href="/oauth/github/login">register (github)</a>
+        <br />
+        <a href="/oauth/discord/login">register with discord</a>
+        <a href="/oauth/github/login">register with github</a>
       </p>
     </main>
   );
diff --git a/src/components/ColorChanger.module.css b/src/components/ColorChanger.module.css
index 3800c81..bb183e5 100644
--- a/src/components/ColorChanger.module.css
+++ b/src/components/ColorChanger.module.css
@@ -1,14 +1,12 @@
 .colorChanger {
   position: fixed;
-  right: 0;
-  bottom: 0;
-
-  padding: 8px;
-
-  opacity: 30%;
-  transition: opacity 0.25s ease-in-out;
+  right: 10px;
+  bottom: 10px;
+  transition: filter 100ms ease-in-out;
+  filter: grayscale(100%) opacity(20%);
+  cursor: pointer;
 }
 
 .colorChanger:hover {
-  opacity: 100%;
+  filter: none;
 }
diff --git a/src/components/ColorChanger.tsx b/src/components/ColorChanger.tsx
index 6165c59..176fc44 100644
--- a/src/components/ColorChanger.tsx
+++ b/src/components/ColorChanger.tsx
@@ -179,8 +179,8 @@ export default function ColorChanger() {
   return (
     <Image
       src="/paint.svg"
-      width="64"
-      height="64"
+      width="32"
+      height="32"
       alt="paint"
       title={current}
       onClick={() => {
diff --git a/src/components/Logo.module.css b/src/components/Logo.module.css
new file mode 100644
index 0000000..02ea107
--- /dev/null
+++ b/src/components/Logo.module.css
@@ -0,0 +1,3 @@
+.logo {
+  width: 700px;
+}
diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx
new file mode 100644
index 0000000..24ec7fc
--- /dev/null
+++ b/src/components/Logo.tsx
@@ -0,0 +1,121 @@
+import React from "react";
+
+import styles from "./Logo.module.css";
+
+export default function Logo() {
+  return (
+    <svg
+      viewBox="0 0 385 100"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      className={styles.logo}
+    >
+      <defs>
+        <linearGradient
+          x1="0%"
+          y1="50%"
+          x2="99.3908435%"
+          y2="50%"
+          id="linearGradient-neowcgjypg-1"
+        >
+          <stop stopColor="currentColor" offset="0%"></stop>
+          <stop
+            stopColor="currentColor"
+            stopOpacity="0.15"
+            offset="100%"
+          ></stop>
+        </linearGradient>
+        <path
+          d="M3.8458278,-5.15911009e-17 L13.2928824,-1.94256078e-16 C14.6301605,-7.98342804e-16 15.1150899,0.139238417 15.6039788,0.400699056 C16.0928677,0.662159695 16.4765505,1.04584256 16.7380112,1.53473144 C16.9994718,2.02362033 17.1387102,2.50854969 17.1387102,3.8458278 L17.1387102,50.4723403 C17.1387102,51.8096184 16.9994718,52.2945477 16.7380112,52.7834366 C16.4765505,53.2723255 16.0928677,53.6560084 15.6039788,53.917469 C15.1150899,54.1789296 14.6301605,54.3181681 13.2928824,54.3181681 L3.8458278,54.3181681 C2.50854969,54.3181681 2.02362033,54.1789296 1.53473144,53.917469 C1.04584256,53.6560084 0.662159695,53.2723255 0.400699056,52.7834366 C0.139238417,52.2945477 6.81641737e-16,51.8096184 -2.80991422e-15,50.4723403 L-2.71214089e-16,3.8458278 C-7.93416146e-16,2.50854969 0.139238417,2.02362033 0.400699056,1.53473144 C0.662159695,1.04584256 1.04584256,0.662159695 1.53473144,0.400699056 C2.02362033,0.139238417 2.50854969,-8.81235264e-16 3.8458278,-5.15911009e-17 Z"
+          id="path-neowcgjypg-2"
+        ></path>
+        <rect
+          id="path-neowcgjypg-4"
+          x="7.20209614e-15"
+          y="-4.94132864e-15"
+          width="26.0091852"
+          height="21.4354612"
+        ></rect>
+      </defs>
+      <g
+        id="Logo"
+        stroke="none"
+        stroke-width="1"
+        fill="none"
+        fill-rule="evenodd"
+      >
+        <g
+          id="Logos/Ari-Inspired-Dark"
+          transform="translate(-73.669529, -60.500000)"
+        >
+          <g id="Group" transform="translate(73.669529, 60.500000)">
+            <path
+              d="M27.072843,77.2472777 C33.3387658,83.1496155 40.9633072,86.1007845 49.9464672,86.1007845 C63.4212073,86.1007845 141.296207,74.7480477 207.142001,74.7480477 C251.039197,74.7480477 306.545511,77.2640648 373.660942,82.296099"
+              id="glue"
+              stroke="url(#linearGradient-neowcgjypg-1)"
+              strokeWidth="15"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            ></path>
+            <text
+              id="text"
+              fontFamily="lunchtype"
+              fontSize="75.8217291"
+              fontStretch="expanded"
+              fontWeight="500"
+              letterSpacing="-3.37037037"
+              fill="currentColor"
+            >
+              <tspan x="45.3058029" y="72">
+                gluestick
+              </tspan>
+            </text>
+            <g
+              id="gluestick"
+              transform="translate(19.029903, 46.901517) rotate(-10.000000) translate(-19.029903, -46.901517) translate(6.025311, 11.065381)"
+            >
+              <path
+                d="M21.6562264,60.1722714 L20.1948974,69.3055775 C20.1062227,69.8597942 20.0511475,70.0678092 19.91889,70.2630516 C19.367519,70.6507522 19.1534152,70.6722714 18.5921494,70.6722714 L8.61779953,70.6722714 C8.05653367,70.6722714 7.84242989,70.6507522 7.62874419,70.5510023 C7.15880144,70.0678092 7.10372619,69.8597942 7.01505152,69.3055775 L5.55372254,60.1722714 L21.6562264,60.1722714 Z"
+                id="glue"
+                stroke="currentColor"
+                strokeWidth="2"
+                fill="currentColor"
+              ></path>
+              <g id="Rectangle-2" transform="translate(5.000000, 6.000000)">
+                <mask id="mask-neowcgjypg-3" fill="white">
+                  <use xlinkHref="#path-neowcgjypg-2"></use>
+                </mask>
+                <path
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M13.2928824,-1 C14.9133577,-1 15.4869268,-0.795928047 16.0755776,-0.481114142 C16.7413126,-0.125075161 17.2637854,0.397397573 17.6198244,1.06313259 C17.9346383,1.65178341 18.1387102,2.22535247 18.1387102,3.8458278 L18.1387102,50.4723403 C18.1387102,52.0928156 17.9346383,52.6663846 17.6198244,53.2550355 C17.2637854,53.9207705 16.7413126,54.4432432 16.0755776,54.7992822 C15.4869268,55.1140961 14.9133577,55.3181681 13.2928824,55.3181681 L3.8458278,55.3181681 C2.22535247,55.3181681 1.65178341,55.1140961 1.06313259,54.7992822 C0.397397573,54.4432432 -0.125075161,53.9207705 -0.481114142,53.2550355 C-0.795928047,52.6663846 -1,52.0928156 -1,50.4723403 L-1,3.8458278 C-1,2.22535247 -0.795928047,1.65178341 -0.481114142,1.06313259 C-0.125075161,0.397397573 0.397397573,-0.125075161 1.06313259,-0.481114142 C1.65178341,-0.795928047 2.22535247,-1 3.8458278,-1 Z"
+                ></path>
+              </g>
+              <g
+                id="orange-border-stick-2"
+                transform="translate(-0.000000, -0.000000)"
+              >
+                <mask id="mask-neowcgjypg-5" fill="white">
+                  <use xlinkHref="#path-neowcgjypg-4"></use>
+                </mask>
+                <g id="Rectangle"></g>
+                <path
+                  d="M8.8458278,6 L18.2928824,6 C19.6301605,6 20.1150899,6.13923842 20.6039788,6.40069906 C21.0928677,6.66215969 21.4765505,7.04584256 21.7380112,7.53473144 C21.9994718,8.02362033 22.1387102,8.50854969 22.1387102,9.8458278 L22.1387102,56.4723403 C22.1387102,57.8096184 21.9994718,58.2945477 21.7380112,58.7834366 C21.4765505,59.2723255 21.0928677,59.6560084 20.6039788,59.917469 C20.1150899,60.1789296 19.6301605,60.3181681 18.2928824,60.3181681 L8.8458278,60.3181681 C7.50854969,60.3181681 7.02362033,60.1789296 6.53473144,59.917469 C6.04584256,59.6560084 5.66215969,59.2723255 5.40069906,58.7834366 C5.13923842,58.2945477 5,57.8096184 5,56.4723403 L5,9.8458278 C5,8.50854969 5.13923842,8.02362033 5.40069906,7.53473144 C5.66215969,7.04584256 6.04584256,6.66215969 6.53473144,6.40069906 C7.02362033,6.13923842 7.50854969,6 8.8458278,6 Z"
+                  id="orange-border-stick"
+                  fill="currentColor"
+                  mask="url(#mask-neowcgjypg-5)"
+                ></path>
+              </g>
+              <path
+                d="M8,6 L19.1387102,6 C20.7955645,6 22.1387102,7.34314575 22.1387102,9 L22.1387102,21.444419 L22.1387102,21.444419 L5,21.444419 L5,9 C5,7.34314575 6.34314575,6 8,6 Z"
+                id="orange-portion"
+                fill="currentColor"
+              ></path>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+}