diff --git a/src/assets/firstsvg/Group 30.svg b/src/assets/firstsvg/Group 30.svg
new file mode 100644
index 0000000..67a4771
--- /dev/null
+++ b/src/assets/firstsvg/Group 30.svg	
@@ -0,0 +1,5 @@
+<svg width="857" height="174" viewBox="0 0 857 174" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M731 46V162H857L822.434 104L857 46L731 46Z" fill="#F8EB71"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M126 58V174H0L34.5664 116L0 58L126 58Z" fill="#F8EB71"/>
+<rect x="63" width="731" height="116" fill="#F8EB71"/>
+</svg>
diff --git a/src/assets/firstsvg/Union.svg b/src/assets/firstsvg/Union.svg
new file mode 100644
index 0000000..491c15f
--- /dev/null
+++ b/src/assets/firstsvg/Union.svg
@@ -0,0 +1,3 @@
+<svg width="197" height="117" viewBox="0 0 197 117" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M97.9795 116.5H2.72972e-05L0.429226 0.000244141L49.634 41.2258L98.4087 0.360483V0.000244141L98.6237 0.180364L98.8387 0.000244141V0.360484L147.613 41.2258L196.818 0.000244141L196.389 116.5H98.4095H97.9795Z" fill="#F8EB71"/>
+</svg>
diff --git a/src/components/achievements/FirstPenguin.tsx b/src/components/achievements/FirstPenguin.tsx
index e69de29..e2ab55f 100644
--- a/src/components/achievements/FirstPenguin.tsx
+++ b/src/components/achievements/FirstPenguin.tsx
@@ -0,0 +1,80 @@
+import { Flex, Text, Avatar, Box} from "@radix-ui/themes";
+import { type ReactElement } from "react";
+import styled from "styled-components";
+import GroupSVG from "@/assets/firstsvg/Group 30.svg";
+import UnionSVG from "@/assets/firstsvg/Union.svg";
+
+const StyledFlex = styled(Flex)`
+  padding:8px;
+`;
+
+const Margin = styled.div`
+  margin-bottom: 50px
+  `;
+
+const BackgroundImage = styled.div`
+position: relative;
+top:-50px;
+`;
+
+const Front = styled.div`
+position: absolute;
+top:5px;
+left:60px;
+`;
+
+const King = styled.div`
+position: absolute;
+top:53px;
+left: 120px;
+`;
+
+
+export function FirstPenguin(): ReactElement {
+  const achievementTest = {
+    id: 1,
+    name: "first blood",
+    description: "Get the first kill in a match.",
+    icon: "https://placehold.jp/150x150.png",
+    tag: ["kill"],
+  };
+
+  return (
+  
+    <Box maxWidth="20rem">
+
+      <StyledFlex direction="column" align="center">
+       <Margin>
+        <Text weight="bold" size="7" >
+          最初の解除者
+        </Text>
+       </Margin>
+
+        <Margin>
+          <Avatar
+          size="8"
+          src="https://images.unsplash.com/photo-1607346256330-dee7af15f7c5?&w=64&h=64&dpr=2&q=70&crop=focalpoint&fp-x=0.67&fp-y=0.5&fp-z=1.4&fit=crop"
+          radius="full"
+          fallback="T"
+        />
+        </Margin>
+
+        <King>
+            <img src={UnionSVG} alt="Union" width="80" height="64" />
+        </King>
+
+        <BackgroundImage>
+          <Front>
+            <Text weight="bold" size="7">
+              {achievementTest.name}
+            </Text>
+          </Front>
+
+          <img src={GroupSVG} alt="Group" width="250" height="64" />
+        </BackgroundImage>
+      </StyledFlex> 
+    </Box>
+  );
+}
+
+
diff --git a/src/pages/achievements/index.tsx b/src/pages/achievements/index.tsx
index 9dbdbdf..5708e64 100644
--- a/src/pages/achievements/index.tsx
+++ b/src/pages/achievements/index.tsx
@@ -1,10 +1,12 @@
 import { type ReactElement } from "react";
+import { FirstPenguin } from "@/components/achievements/FirstPenguin";
 import { AchievementCard } from "@/components/achievements/Card";
 import data from "@/assets/achievements.json";
 
 export default function Page(): ReactElement {
   return (
     <>
+      <FirstPenguin />
       {data.achievements.map((achievement) => (
         <AchievementCard
           key={achievement.id}
diff --git a/src/pages/hayato.tsx b/src/pages/hayato.tsx
index 5544e28..e41b945 100644
--- a/src/pages/hayato.tsx
+++ b/src/pages/hayato.tsx
@@ -1,8 +1,80 @@
+import { Flex, Text, Avatar, Box} from "@radix-ui/themes";
 import { type ReactElement } from "react";
-import Info from "@/components/achievements/Info";
+import styled from "styled-components";
+import GroupSVG from "@/assets/firstsvg/Group 30.svg";
+import UnionSVG from "@/assets/firstsvg/Union.svg";
+
+const StyledFlex = styled(Flex)`
+  padding:8px;
+`;
+
+const Margin = styled.div`
+  margin-bottom: 50px
+  `;
+
+const BackgroundImage = styled.div`
+position: relative;
+top:-50px;
+`;
+
+const Front = styled.div`
+position: absolute;
+top:5px;
+left:60px;
+`;
+
+const King = styled.div`
+position: absolute;
+top:53px;
+left: 120px;
+`;
+
 
 export default function Page(): ReactElement {
+  const achievementTest = {
+    id: 1,
+    name: "first blood",
+    description: "Get the first kill in a match.",
+    icon: "https://placehold.jp/150x150.png",
+    tag: ["kill"],
+  };
+
   return (
-   <Info />
+  
+    <Box maxWidth="20rem">
+
+      <StyledFlex direction="column" align="center">
+       <Margin>
+        <Text weight="bold" size="7" >
+          最初の解除者
+        </Text>
+       </Margin>
+
+        <Margin>
+          <Avatar
+          size="8"
+          src="https://images.unsplash.com/photo-1607346256330-dee7af15f7c5?&w=64&h=64&dpr=2&q=70&crop=focalpoint&fp-x=0.67&fp-y=0.5&fp-z=1.4&fit=crop"
+          radius="full"
+          fallback="T"
+        />
+        </Margin>
+
+        <King>
+            <img src={UnionSVG} alt="Union" width="80" height="64" />
+        </King>
+
+        <BackgroundImage>
+          <Front>
+            <Text weight="bold" size="7">
+              {achievementTest.name}
+            </Text>
+          </Front>
+
+          <img src={GroupSVG} alt="Group" width="250" height="64" />
+        </BackgroundImage>
+      </StyledFlex> 
+    </Box>
   );
-}
\ No newline at end of file
+}
+
+