diff --git a/app/about/page.jsx b/app/about/page.jsx
new file mode 100644
index 0000000..6e5db78
--- /dev/null
+++ b/app/about/page.jsx
@@ -0,0 +1,20 @@
+import React from "react";
+import Image from "next/image";
+
+
+function About() {
+  return (
+    <div className="bg-white flex align-top border-l pt-8 pr-8 pl-8 pb-8 curv">
+        <h1>About me</h1>
+
+    </div>
+
+    
+
+
+
+
+  );
+}
+
+export default About;
diff --git a/app/page.js b/app/page.js
index 6740d3d..b85c06b 100644
--- a/app/page.js
+++ b/app/page.js
@@ -1,8 +1,20 @@
+import Image from "next/image";
+import CLAYZANE from "../images/CLAYZANE.png"
+import React from 'react';
+
 export default function Home() {
   return (
     <main>
-      <div className="box">
-        <button className="cybr-btn">
+      <div>
+      <Image
+        src={CLAYZANE} // Provide the path to your image
+        alt="Description of the image"
+        width={300} // Set the width of the image
+        height={200} 
+      />
+      </div>
+      <div className="margin-x-4">
+        <button suppressHydrationWarning={true} className="cybr-btn">
         こんにちは<span aria-hidden>_</span>
           <span aria-hidden className="cybr-btn__glitch">
           こんにちは
@@ -11,6 +23,23 @@ export default function Home() {
             Nexus-12
           </span>
         </button>
+
+        <button suppressHydrationWarning={true} className="cybr-btn">
+        Info<span aria-hidden>_</span>
+          <span aria-hidden className="cybr-btn__glitch">
+          こんにちは
+          </span>
+          <span aria-hidden className="cybr-btn__tag">
+            Nexus-12
+          </span>
+        </button>
+
+       
+
+        
+        
+
+
       </div>
     </main>
   );
diff --git a/images/CLAYZANE.png b/images/CLAYZANE.png
new file mode 100644
index 0000000..6355d4d
Binary files /dev/null and b/images/CLAYZANE.png differ