diff --git a/app/routes/_index/features/EventCard/EventCard.stories.ts b/app/routes/_index/features/EventCard/EventCard.stories.ts
index 39b0e181..bc1c7d9e 100644
--- a/app/routes/_index/features/EventCard/EventCard.stories.ts
+++ b/app/routes/_index/features/EventCard/EventCard.stories.ts
@@ -32,7 +32,7 @@ type Story = StoryObj<T>;
 export const Default: Story = {
 	args: {
 		children: "test test test test test ああああああああああああああああああああああああ",
-		hash: "test",
+		hash: "game",
 		title: "Test title",
 	},
 };
diff --git a/app/routes/_index/features/EventCard/EventCard.tsx b/app/routes/_index/features/EventCard/EventCard.tsx
index 9e537be2..3f1f8042 100644
--- a/app/routes/_index/features/EventCard/EventCard.tsx
+++ b/app/routes/_index/features/EventCard/EventCard.tsx
@@ -1,10 +1,11 @@
 import { Link } from "@remix-run/react";
 import type { ReactNode } from "react";
 import * as styles from "./styles.css";
+import RightArrow from "~icons/ic/round-play-arrow";
 
 interface Props {
 	children: string;
-	hash: string;
+	hash: "game" | "live" | "stage";
 	title: string;
 }
 
@@ -18,7 +19,11 @@ export function EventCard({ children, hash, title }: Props): ReactNode {
 				prefetch="intent"
 				to={`/events#${hash}`}
 			>
-				詳しく見る
+				<span className={styles.span}>
+					{hash === "game" ? "ゲームイベント" : hash === "live" ? "ライブイベント" : "ステージイベント"}
+					について
+				</span>
+				<RightArrow className={styles.arrow} />
 			</Link>
 		</div>
 	);
diff --git a/app/routes/_index/features/EventCard/styles.css.ts b/app/routes/_index/features/EventCard/styles.css.ts
index b73c31bd..6d3f9e80 100644
--- a/app/routes/_index/features/EventCard/styles.css.ts
+++ b/app/routes/_index/features/EventCard/styles.css.ts
@@ -13,6 +13,7 @@ export const box = style({
 			},
 			"backdropFilter": "blur(32px)",
 			"backgroundImage": "linear-gradient(154deg, rgb(255 255 255 / 0.09) 0%, rgb(255 255 255 / 0.03) 100%)",
+			"border": `1px solid ${vars.color.white}`,
 			"borderRadius": "1.25rem",
 			"display": "flex",
 			"flexDirection": "column",
@@ -46,18 +47,36 @@ export const content = style({
 export const link = style({
 	"@layer": {
 		[layers.feature]: {
-			":hover": {
-				transform: "scale(1.05)",
+			display: "inline-flex",
+			justifyContent: "flex-end",
+			padding: "0.5rem 1rem",
+			rowGap: "0.5rem",
+		},
+	},
+});
+
+export const span = style({
+	"@layer": {
+		[layers.feature]: {
+			color: vars.color.white,
+			fontSize: "0.875rem",
+			fontWeight: 600,
+		},
+	},
+});
+
+export const arrow = style({
+	"@layer": {
+		[layers.feature]: {
+			color: vars.color.white,
+			height: "1.125rem",
+			selectors: {
+				[`${link}:hover &`]: {
+					transform: "scale(1.5)",
+				},
 			},
-			"alignSelf": "flex-end",
-			"border": `1px solid ${vars.color.white}`,
-			"borderRadius": "0.5rem",
-			"boxShadow": "0px 4px 4px 0px rgb(0 0 0 / 0.25)",
-			"color": vars.color.white,
-			"fontSize": "0.875rem",
-			"fontWeight": 600,
-			"padding": "0.5rem 1rem",
-			"transition": "transform 0.3s ease-in",
+			transition: "transform 0.3s ease-in",
+			width: "1.125rem",
 		},
 	},
 });