diff --git a/cspell.json b/cspell.json
index 59daf07..a8c5fe4 100644
--- a/cspell.json
+++ b/cspell.json
@@ -2,5 +2,5 @@
   "ignorePaths": ["node_modules/**", "*.svg"],
   "version": "0.2",
   "language": "en",
-  "words": ["NATSUMATSURI", "YATAI", "Dela", "Yuji", "Syuku", "zustand"]
+  "words": ["NATSUMATSURI", "yatai", "Dela", "Yuji", "Syuku", "zustand"]
 }
diff --git a/public/2D_material/kurk.webp b/public/2D_material/cork.webp
similarity index 100%
rename from public/2D_material/kurk.webp
rename to public/2D_material/cork.webp
diff --git a/src/App.tsx b/src/App.tsx
index f1e983d..669cf16 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,11 +1,14 @@
 import { Route, Routes } from "react-router-dom";
 import Home from "./pages/home";
+import Shooter from "./pages/shooter";
 import Yatai from "./pages/yatai";
+
 const AppRoutes = () => {
 	return (
 		<>
 			<Routes>
 				<Route path="/" element={<Home />} />
+				<Route path="/shooter" element={<Shooter />} />
 				<Route path="/yatai" element={<Yatai />} />
 			</Routes>
 		</>
diff --git a/src/components/ui/ShooterButton/index.module.css b/src/components/ui/ShooterButton/index.module.css
new file mode 100644
index 0000000..0c31948
--- /dev/null
+++ b/src/components/ui/ShooterButton/index.module.css
@@ -0,0 +1,33 @@
+.box {
+    width: 250px;
+    height: 250px;
+    background: var(--black);
+    border-radius: 50%;
+    display: flex;
+    flex-direction: column; 
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    color: var(--white);
+    font-weight: bold;
+    font-size: 40px;
+    border: none;
+    cursor: pointer;
+    position: relative;
+}
+
+.box img {
+    position: absolute;
+    bottom: 20px; 
+    width: 200px;
+    height: 200px;
+    opacity: 0.1; 
+    z-index: 1; 
+}
+
+.box span {
+    position: relative;
+    z-index: 10; 
+}
+
+
diff --git a/src/components/ui/ShooterButton/index.tsx b/src/components/ui/ShooterButton/index.tsx
new file mode 100644
index 0000000..751569a
--- /dev/null
+++ b/src/components/ui/ShooterButton/index.tsx
@@ -0,0 +1,37 @@
+import type { KeyboardEventHandler, MouseEventHandler } from "react";
+import styles from "./index.module.css";
+
+interface ShooterButtonProps {
+	onClick?: MouseEventHandler<HTMLDivElement>;
+	onKeyUp?: KeyboardEventHandler<HTMLDivElement>;
+	onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
+	onKeyPress?: KeyboardEventHandler<HTMLDivElement>;
+}
+
+export const ShooterButton = ({
+	onClick,
+	onKeyUp,
+	onKeyDown,
+	onKeyPress,
+}: ShooterButtonProps) => {
+	return (
+		<div
+			className={styles.box}
+			onClick={onClick}
+			onKeyUp={onKeyUp}
+			onKeyDown={onKeyDown}
+			onKeyPress={onKeyPress}
+			tabIndex={0}
+			role="button"
+			aria-label="Shoot"
+		>
+			<img
+				src="/logo.webp"
+				alt="ボタンの背景にロゴを表示させる"
+				width="100"
+				height="100"
+			/>
+			shoot
+		</div>
+	);
+};
diff --git a/src/pages/shooter/index.module.css b/src/pages/shooter/index.module.css
new file mode 100644
index 0000000..d1e228d
--- /dev/null
+++ b/src/pages/shooter/index.module.css
@@ -0,0 +1,25 @@
+.trigger{
+    position: absolute;
+    top: 40%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    justify-content: center;
+    align-items: center;
+}
+
+.cork {
+    display: flex; 
+    justify-content: center; 
+    gap: 10px; 
+    position: absolute;
+    top: 80%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    justify-content: center;
+    align-items: center;
+}
+
+.cork img {
+    width: 72px;
+    height: 72px;
+}
\ No newline at end of file
diff --git a/src/pages/shooter/index.tsx b/src/pages/shooter/index.tsx
new file mode 100644
index 0000000..399a0cf
--- /dev/null
+++ b/src/pages/shooter/index.tsx
@@ -0,0 +1,43 @@
+import { type KeyboardEventHandler, useState } from "react";
+import { ShooterButton } from "../../components/ui/ShooterButton";
+import style from "./index.module.css";
+
+function Shooter() {
+	const initialImages = [
+		"/2D_material/cork.webp",
+		"/2D_material/cork.webp",
+		"/2D_material/cork.webp",
+	];
+
+	const [images, setImages] = useState(initialImages);
+
+	const handleClick = () => {
+		setImages((prevImages) => prevImages.slice(1));
+	};
+
+	const handleKeyUp: KeyboardEventHandler<HTMLDivElement> = (event) => {
+		if (event.key === "Enter" || event.key === " ") {
+			handleClick();
+		}
+	};
+
+	return (
+		<div>
+			<div className={style.trigger}>
+				<ShooterButton
+					onClick={handleClick}
+					onKeyUp={handleKeyUp}
+					onKeyDown={handleKeyUp}
+					onKeyPress={handleKeyUp}
+				/>
+			</div>
+			<div className={style.cork}>
+				{images.map((src) => (
+					<img key={src} src={src} alt="コルクの残量を表示しています" />
+				))}
+			</div>
+		</div>
+	);
+}
+
+export default Shooter;