diff --git a/components/layout/BeautifulDrawingByBorzoic.tsx b/components/layout/BeautifulDrawingByBorzoic.tsx
index 2d996f42d..d0aaab6c4 100644
--- a/components/layout/BeautifulDrawingByBorzoic.tsx
+++ b/components/layout/BeautifulDrawingByBorzoic.tsx
@@ -1,10 +1,6 @@
-import {
-  Box,
-  Image,
-  useColorMode,
-  useColorModePreference,
-} from "@chakra-ui/react";
-import { useState } from "react";
+import { Image as ChakraImage, useColorMode } from "@chakra-ui/react";
+import randomColor from "randomcolor";
+import { useEffect, useState } from "react";
 
 interface HSL {
   h: number;
@@ -352,68 +348,56 @@ function getFilters(hex: string) {
   return result.filter;
 }
 
-// https://leanny.github.io/colors
-const COLOR_OPTIONS: [alphaColorHex: string, bravoColorHex: string][] = [
-  ["#2922b5", "#5eb604"],
-  ["#3b362", "#b1008d"],
-  ["#25b100", "#571db1"],
-  ["#7b0393", "#43ba05"],
-  ["#cae6e", "#f75900"],
-  ["#d9c100", "#7ac9"],
-  ["#ce8003", "#9208b2"],
-  ["#dea801", "#4717a9"],
-  ["#bbc905", "#830b9c"],
-  ["#7edc", "#e1a307"],
-  ["#d60e6e", "#311aa8"],
-  ["#cf0466", "#17a80d"],
-  ["#cb0856", "#199b8"],
-  ["#de0b64", "#bfd002"],
-  ["#4a14aa", "#fb5c03"],
-  ["#5f0fb4", "#8b672"],
-  ["#dea801", "#4717a9"],
-];
-
-const BeautifulDrawingOfBorzoic = ({
-  type,
-  colorIndex,
-  setColorIndex,
-}: {
-  type: "girl" | "boy";
-  colorIndex: number;
-  setColorIndex: (newIndex: number) => void;
-}) => {
+const BeautifulDrawingOfBorzoic = ({ type }: { type: "girl" | "boy" }) => {
+  const [hexCode, setHexCode] = useState(randomColor());
   const { colorMode } = useColorMode();
+  const [drawingImgSrc, setDrawingImgSrc] = useState(
+    `/layout/new_${type}_${colorMode}.png`
+  );
+  const [drawingLoaded, setDrawingLoaded] = useState(false);
+
+  const handleColorChange = () => setHexCode(randomColor());
+
+  useEffect(() => {
+    const loadImage = (imageUrl: string): Promise<string> => {
+      return new Promise((resolve, reject) => {
+        const loadImg = new Image();
+        loadImg.src = imageUrl;
+        loadImg.onload = () => setTimeout(() => resolve(imageUrl));
+        loadImg.onerror = (err) => reject(err);
+      });
+    };
+
+    loadImage(`/layout/new_${type}_${colorMode}.png`)
+      .then((src) => setDrawingImgSrc(src))
+      .catch((err) => console.error("Failed to load images", err));
+  }, [type, colorMode]);
 
   return (
-    <Box
-      position="relative"
-      onClick={() =>
-        setColorIndex(
-          colorIndex === COLOR_OPTIONS.length - 1 ? 0 : colorIndex + 1
-        )
-      }
-      onMouseEnter={() =>
-        setColorIndex(
-          colorIndex === COLOR_OPTIONS.length - 1 ? 0 : colorIndex + 1
-        )
-      }
-    >
-      <Image
+    <>
+      <ChakraImage
         src={`/layout/new_${type}_bg.png`}
-        maxW={80}
-        position="absolute"
-        top="0"
-        left="0"
-        filter={getFilters(COLOR_OPTIONS[colorIndex][type === "girl" ? 0 : 1])}
+        filter={getFilters(hexCode)}
+        height={["150px", "240px", "300px", "360px"]}
+        gridColumn={type === "girl" ? "2 / 3" : "1 / 2"}
+        justifySelf={type === "girl" ? "flex-start" : "flex-end"}
+        gridRow="1"
         alt=""
+        visibility={drawingLoaded ? "visible" : "hidden"}
       />
-      <Image
-        src={`/layout/new_${type}_${colorMode}.png`}
-        maxW={80}
-        position="absolute"
+      <ChakraImage
+        onClick={handleColorChange}
+        onMouseEnter={handleColorChange}
+        src={drawingImgSrc}
+        height={["150px", "240px", "300px", "360px"]}
+        gridColumn={type === "girl" ? "2 / 3" : "1 / 2"}
+        justifySelf={type === "girl" ? "flex-start" : "flex-end"}
+        gridRow="1"
+        zIndex="10"
         alt=""
+        onLoad={() => setDrawingLoaded(true)}
       />
-    </Box>
+    </>
   );
 };
 
diff --git a/components/layout/ColorModeSwitcher.tsx b/components/layout/ColorModeSwitcher.tsx
index 176038832..c7c6cc9fe 100644
--- a/components/layout/ColorModeSwitcher.tsx
+++ b/components/layout/ColorModeSwitcher.tsx
@@ -18,6 +18,7 @@ const ColorModeSwitcher = ({ isMobile }: { isMobile?: boolean }) => {
       }
       borderRadius={isMobile ? "50%" : "0"}
       size={isMobile ? "lg" : "sm"}
+      height="50px"
       mx={2}
       display={isMobile ? "flex" : ["none", null, null, "flex"]}
     />
diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx
index a2009c7ba..f0e5f3273 100644
--- a/components/layout/Header.tsx
+++ b/components/layout/Header.tsx
@@ -48,11 +48,10 @@ const Header = ({ openNav }: { openNav: () => void }) => {
               : { bg: "black", color: "white" }
           }
           borderRadius="0"
-          size="sm"
           display={["flex", null, null, "none"]}
         />
       </Flex>
-      <Flex justify="center" align="center" fontSize="sm" color="white.300">
+      <Flex justify="center" align="center" color="white.300">
         <Link href="/">{isSmall ? "s.ink" : "sendou.ink"}</Link>{" "}
         {activeNavItem && (
           <>
@@ -64,8 +63,8 @@ const Header = ({ openNav }: { openNav: () => void }) => {
               className={
                 activeNavItem.code === "splatoon3" ? "rounded" : undefined
               }
-              height={24}
-              width={24}
+              height={36}
+              width={36}
               priority
               alt={`${activeNavItem.name} icon`}
             />
@@ -87,7 +86,7 @@ const Header = ({ openNav }: { openNav: () => void }) => {
             borderRadius="0"
             size="xs"
             px={2}
-            height="30px"
+            height="50px"
             mr="0.5rem"
             display={["none", null, null, "inline-block"]}
           >
@@ -110,7 +109,7 @@ const Header = ({ openNav }: { openNav: () => void }) => {
           borderRadius="0"
           size="xs"
           px={2}
-          height="30px"
+          height="50px"
           ml="0.5rem"
         >
           {user ? "Log out" : "Log in"}
diff --git a/components/layout/LanguageSwitcher.tsx b/components/layout/LanguageSwitcher.tsx
index 2aacc5e5f..9baf53ad3 100644
--- a/components/layout/LanguageSwitcher.tsx
+++ b/components/layout/LanguageSwitcher.tsx
@@ -52,6 +52,7 @@ export const LanguageSwitcher = ({ isMobile }: { isMobile?: boolean }) => {
         }
         borderRadius={isMobile ? "50%" : "0"}
         size={isMobile ? "lg" : "sm"}
+        height="50px"
         display={isMobile ? "flex" : ["none", null, null, "flex"]}
       />
       <MenuList bg={secondaryBgColor} color={textColor}>
diff --git a/package-lock.json b/package-lock.json
index ae6cd66e4..b9ef07a86 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,6 +28,7 @@
         "next-auth": "^3.27.0",
         "next-seo": "^4.26.0",
         "nprogress": "^0.2.0",
+        "randomcolor": "^0.6.2",
         "react": "^17.0.2",
         "react-color": "^2.19.3",
         "react-datepicker": "^4.1.1",
@@ -57,6 +58,7 @@
         "@types/jest": "^26.0.23",
         "@types/node": "^15.12.4",
         "@types/nprogress": "^0.2.0",
+        "@types/randomcolor": "^0.5.5",
         "@types/react": "^17.0.11",
         "@types/react-color": "^3.0.4",
         "@types/react-datepicker": "^3.1.8",
@@ -3221,6 +3223,12 @@
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
       "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw=="
     },
+    "node_modules/@types/randomcolor": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/@types/randomcolor/-/randomcolor-0.5.5.tgz",
+      "integrity": "sha512-PywdYff3F8lGO3BggkCXaPFH0Ue/2Y7xliihoQNkxCGPJ4w7VTMfgcmSMIE6gOVAEu9Wx42JRSuRREVG3AUrtg==",
+      "dev": true
+    },
     "node_modules/@types/react": {
       "version": "17.0.11",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.11.tgz",
@@ -11946,6 +11954,11 @@
         "safe-buffer": "^5.1.0"
       }
     },
+    "node_modules/randomcolor": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/randomcolor/-/randomcolor-0.6.2.tgz",
+      "integrity": "sha512-Mn6TbyYpFgwFuQ8KJKqf3bqqY9O1y37/0jgSK/61PUxV4QfIMv0+K2ioq8DfOjkBslcjwSzRfIDEXfzA9aCx7A=="
+    },
     "node_modules/randomfill": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/randomfill/-/randomfill-1.0.4.tgz",
@@ -17390,6 +17403,12 @@
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
       "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw=="
     },
+    "@types/randomcolor": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/@types/randomcolor/-/randomcolor-0.5.5.tgz",
+      "integrity": "sha512-PywdYff3F8lGO3BggkCXaPFH0Ue/2Y7xliihoQNkxCGPJ4w7VTMfgcmSMIE6gOVAEu9Wx42JRSuRREVG3AUrtg==",
+      "dev": true
+    },
     "@types/react": {
       "version": "17.0.11",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.11.tgz",
@@ -24491,6 +24510,11 @@
         "safe-buffer": "^5.1.0"
       }
     },
+    "randomcolor": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/randomcolor/-/randomcolor-0.6.2.tgz",
+      "integrity": "sha512-Mn6TbyYpFgwFuQ8KJKqf3bqqY9O1y37/0jgSK/61PUxV4QfIMv0+K2ioq8DfOjkBslcjwSzRfIDEXfzA9aCx7A=="
+    },
     "randomfill": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/randomfill/-/randomfill-1.0.4.tgz",
diff --git a/package.json b/package.json
index 129d20cdb..cbae25f7b 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
     "next-auth": "^3.27.0",
     "next-seo": "^4.26.0",
     "nprogress": "^0.2.0",
+    "randomcolor": "^0.6.2",
     "react": "^17.0.2",
     "react-color": "^2.19.3",
     "react-datepicker": "^4.1.1",
@@ -71,6 +72,7 @@
     "@types/jest": "^26.0.23",
     "@types/node": "^15.12.4",
     "@types/nprogress": "^0.2.0",
+    "@types/randomcolor": "^0.5.5",
     "@types/react": "^17.0.11",
     "@types/react-color": "^3.0.4",
     "@types/react-datepicker": "^3.1.8",
diff --git a/pages/demo.tsx b/pages/demo.tsx
index b1eb1d1bf..497690aff 100644
--- a/pages/demo.tsx
+++ b/pages/demo.tsx
@@ -2,25 +2,15 @@
 
 import { Box } from "@chakra-ui/layout";
 import BeautifulDrawingOfBorzoic from "components/layout/BeautifulDrawingByBorzoic";
-import { useState } from "react";
 
 const DemoPage = () => {
-  const [colorIndex, setColorIndex] = useState(0);
   return (
     <>
       <Box>
-        <BeautifulDrawingOfBorzoic
-          type="boy"
-          colorIndex={colorIndex}
-          setColorIndex={setColorIndex}
-        />
+        <BeautifulDrawingOfBorzoic type="boy" />
       </Box>
       <Box ml="24rem">
-        <BeautifulDrawingOfBorzoic
-          type="girl"
-          colorIndex={colorIndex}
-          setColorIndex={setColorIndex}
-        />
+        <BeautifulDrawingOfBorzoic type="girl" />
       </Box>
     </>
   );
diff --git a/pages/index.tsx b/pages/index.tsx
index 248d1d6d1..4c78b6a67 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,46 +1,16 @@
-import { Box, Flex, Heading, useColorMode } from "@chakra-ui/react";
-import { Trans } from "@lingui/macro";
+import { Box, Grid } from "@chakra-ui/react";
 import MyLink from "components/common/MyLink";
-import Video from "components/common/Video";
+import BeautifulDrawingOfBorzoic from "components/layout/BeautifulDrawingByBorzoic";
 import NavButtons from "components/layout/NavButtons";
-import { useMyTheme } from "hooks/common";
-import Image from "next/image";
 
 const HomePage = () => {
-  const { gray } = useMyTheme();
-  const { colorMode } = useColorMode();
-
   return (
     <>
-      <Heading
-        color={gray}
-        letterSpacing="0.25rem"
-        fontSize="xl"
-        textAlign="center"
-      >
-        Competitive Splatoon Hub
-      </Heading>
-      <Flex justify="center">
-        <Image
-          className="rgb"
-          src={`/layout/posterGirl_${colorMode}.png`}
-          width={481}
-          height={400}
-          priority
-          alt=""
-        />
-      </Flex>
-
-      <Box fontSize="sm" textAlign="right">
-        <Trans>
-          All art by{" "}
-          <MyLink href="https://twitter.com/borzoic_" isExternal>
-            borzoic
-          </MyLink>
-        </Trans>
-      </Box>
-      <NavButtons />
-      <Box textAlign="center" mt={6}>
+      <Grid templateColumns="1fr 1fr">
+        <BeautifulDrawingOfBorzoic type="boy" />
+        <BeautifulDrawingOfBorzoic type="girl" />
+      </Grid>
+      <Box textAlign="center" mt={10} mb={8}>
         The goal of sendou.ink is to provide useful tools and resources for
         Splatoon players. It&apos;s an{" "}
         <MyLink isExternal href="https://github.com/Sendouc/sendou.ink">
@@ -57,6 +27,7 @@ const HomePage = () => {
         </MyLink>
         .
       </Box>
+      <NavButtons />
     </>
   );
 };
diff --git a/pages/styles.css b/pages/styles.css
index 222a9be3c..3fd990ba1 100644
--- a/pages/styles.css
+++ b/pages/styles.css
@@ -30,7 +30,7 @@ header {
   display: grid;
   row-gap: 1.5rem;
   column-gap: 1.5rem;
-  grid-template-rows: 37px 1fr 100px;
+  grid-template-rows: 50px 1fr 100px;
   grid-template-columns: auto 1fr;
   min-height: 100vh;
 }