diff --git a/pages/demo.tsx b/pages/demo.tsx
index 8e374a38b..353568c51 100644
--- a/pages/demo.tsx
+++ b/pages/demo.tsx
@@ -3,6 +3,8 @@
 import { Image } from "@chakra-ui/image";
 import { Input } from "@chakra-ui/input";
 import { Box } from "@chakra-ui/layout";
+import { useColorModeValue } from "@chakra-ui/react";
+import { useMyTheme } from "hooks/common";
 import { useState } from "react";
 
 interface HSL {
@@ -353,22 +355,48 @@ export function getFilters(hex: string) {
 }
 
 const DemoPage = () => {
+  const borderColor = useColorModeValue("black", "white");
   const [hex, setHex] = useState("#FFC0CB");
+  const [hex2, setHex2] = useState("#FFEA61");
   return (
-    <Box>
-      <Box position="relative">
-        <Image
-          src="/layout/demo_girl_bg.png"
-          maxW={80}
-          position="absolute"
-          top="0"
-          left="0"
-          filter={getFilters(hex)}
+    <>
+      <Box>
+        <Box position="relative">
+          <Image
+            src="/layout/new_girl_bg.png"
+            maxW={80}
+            position="absolute"
+            top="0"
+            left="0"
+            filter={getFilters(hex)}
+          />
+          <Image src="/layout/new_girl.png" maxW={80} position="absolute" />
+        </Box>
+        <Input
+          mt="30rem"
+          value={hex}
+          onChange={(e) => setHex(e.target.value)}
         />
-        <Image src="/layout/demo_girl.png" maxW={80} position="absolute" />
       </Box>
-      <Input mt="30rem" value={hex} onChange={(e) => setHex(e.target.value)} />
-    </Box>
+      <Box mt={4}>
+        <Box position="relative">
+          <Image
+            src="/layout/new_boy_bg.png"
+            maxW={80}
+            position="absolute"
+            top="0"
+            left="0"
+            filter={getFilters(hex2)}
+          />
+          <Image src="/layout/new_boy.png" maxW={80} position="absolute" />
+        </Box>
+        <Input
+          mt="30rem"
+          value={hex2}
+          onChange={(e) => setHex2(e.target.value)}
+        />
+      </Box>
+    </>
   );
 };
 
diff --git a/public/layout/demo_girl.png b/public/layout/demo_girl.png
deleted file mode 100644
index 31c492f36..000000000
Binary files a/public/layout/demo_girl.png and /dev/null differ
diff --git a/public/layout/demo_girl_bg.png b/public/layout/demo_girl_bg.png
deleted file mode 100644
index f9b1b8b20..000000000
Binary files a/public/layout/demo_girl_bg.png and /dev/null differ
diff --git a/public/layout/new_boy.png b/public/layout/new_boy.png
new file mode 100644
index 000000000..f8eaf415d
Binary files /dev/null and b/public/layout/new_boy.png differ
diff --git a/public/layout/new_boy_bg.png b/public/layout/new_boy_bg.png
new file mode 100644
index 000000000..d2af69ff5
Binary files /dev/null and b/public/layout/new_boy_bg.png differ
diff --git a/public/layout/new_girl.png b/public/layout/new_girl.png
new file mode 100644
index 000000000..1a5a9793c
Binary files /dev/null and b/public/layout/new_girl.png differ
diff --git a/public/layout/new_girl_bg.png b/public/layout/new_girl_bg.png
new file mode 100644
index 000000000..a6fac5a6a
Binary files /dev/null and b/public/layout/new_girl_bg.png differ