diff --git a/src/assets/members.json b/src/assets/members.json
index 5f6c126..c560632 100644
--- a/src/assets/members.json
+++ b/src/assets/members.json
@@ -3,18 +3,18 @@
     {
       "myself": false,
       "name": "苗字 名前",
-      "screen_name": "xxxxxx",
+      "screen_name": "myouji namae",
       "icon": "https://placehold.jp/150x150.png",
       "role": "member",
       "posts_count": 0,
       "joined_at": "2019-01-01T00:00:00Z",
       "last_posted_at": "2019-01-01T00:00:00Z",
-      "email": "xxxxxx"
+      "email": "yyyyyy"
     },
     {
       "myself": true,
       "name": "重音 テト",
-      "screen_name": "xxxxxx",
+      "screen_name": "ju-on teto",
       "icon": "https://placehold.jp/150x150.png",
       "role": "owner",
       "posts_count": 0,
diff --git a/src/components/member/RankingCard.tsx b/src/components/member/RankingCard.tsx
new file mode 100644
index 0000000..fd45203
--- /dev/null
+++ b/src/components/member/RankingCard.tsx
@@ -0,0 +1,50 @@
+import { Member } from "@/types/member";
+import { Avatar, Box, Flex, Separator, Text } from "@radix-ui/themes";
+import { type ReactElement } from "react";
+import SampleMembers from "@/assets/members.json";
+
+export function MemberCard({
+  memberEmail,
+  index,
+  point,
+}: {
+  memberEmail: string;
+  index: number;
+  point: number;
+}): ReactElement {
+  // const userPoint = unlockedAchievements.unlockedAchievements.filter(
+  //   (achievements) => {
+  //     return achievements.userEmail == "xxxxx";
+  //   },
+  // );
+  const user: Member = SampleMembers.members.find(
+    (member) => member.email === memberEmail,
+  )!;
+
+  return (
+    <>
+      <Box maxWidth="50rem">
+        <Flex gap="6" align="center" ml="14rem">
+          <Text size="8" mr="3rem">
+            {index + 1}
+          </Text>
+          <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"
+          />
+          <Flex direction="column" align="center">
+            <Text as="div" size="7" weight="bold">
+              {user.name}
+            </Text>
+            <Text as="div" size="7" color="gray">
+              {point}pt
+            </Text>
+          </Flex>
+        </Flex>
+        <Separator my="3" size="4" />
+      </Box>
+    </>
+  );
+}
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index a79a25a..5c07d51 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -18,7 +18,6 @@ export function Catch(): ReactElement {
 export default function Layout(): ReactElement {
   const Main = styled.main`
     font-family: "Noto Sans JP Variable";
-    background-color: #aaa;
     word-break: keep-all;
   `;
 
diff --git a/src/pages/ranking/index.tsx b/src/pages/ranking/index.tsx
index 59b61d3..ac92834 100644
--- a/src/pages/ranking/index.tsx
+++ b/src/pages/ranking/index.tsx
@@ -1,13 +1,33 @@
-import { MemberCard } from "@/components/member/Card";
+import { MemberCard } from "@/components/member/RankingCard";
 import { ReactElement } from "react";
-import SampleMember from "@/assets/members.json";
-import members from "@/assets/members.json";
-import { Member } from "@/types/member";
+import unlockedAchievements from "@/assets/unlockedAchievements.json";
 
 export default function Page(): ReactElement {
-  const teto = SampleMember.members.at(-1) as Member;
+  // 仮のデータ(unlockedAchievements)からfilterでpointを取得する
+  const members = [
+    {
+      memberEmail: "xxxxxx",
+      point: 100,
+    },
+    {
+      memberEmail: "yyyyyy",
+      point: 200,
+    },
+  ];
 
-  if (teto == null) throw new Error("Teto not found!");
-
-  return <MemberCard member={teto}></MemberCard>;
+  return (
+    <div>
+      {members.map((member, index) => {
+        return (
+          <MemberCard
+            key={index}
+            memberEmail={member.memberEmail}
+            index={index}
+            point={member.point}
+          />
+        );
+      })}
+    </div>
+  );
 }
+
diff --git a/vite.config.mts b/vite.config.mts
index ab9eeb1..0dc569a 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -5,4 +5,7 @@ import generouted from "@generouted/react-router/plugin";
 
 export default defineConfig({
   plugins: [react(), paths(), generouted()],
+  server: {
+    port: 8080,
+  },
 });