diff --git a/public/drink/bottle0.webp b/public/drink/bottle0.webp
new file mode 100644
index 0000000..a9949b1
Binary files /dev/null and b/public/drink/bottle0.webp differ
diff --git a/public/drink/bottle1.webp b/public/drink/bottle1.webp
new file mode 100644
index 0000000..869dfd9
Binary files /dev/null and b/public/drink/bottle1.webp differ
diff --git a/public/drink/bottle2.webp b/public/drink/bottle2.webp
new file mode 100644
index 0000000..218f688
Binary files /dev/null and b/public/drink/bottle2.webp differ
diff --git a/public/drink/bottle3.webp b/public/drink/bottle3.webp
new file mode 100644
index 0000000..9cfdafa
Binary files /dev/null and b/public/drink/bottle3.webp differ
diff --git a/src/App.tsx b/src/App.tsx
index 669cf16..d2b23a8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,6 @@
 import { Route, Routes } from "react-router-dom";
 import Home from "./pages/home";
+import Result from "./pages/result";
 import Shooter from "./pages/shooter";
 import Yatai from "./pages/yatai";
 
@@ -10,6 +11,7 @@ const AppRoutes = () => {
 				<Route path="/" element={<Home />} />
 				<Route path="/shooter" element={<Shooter />} />
 				<Route path="/yatai" element={<Yatai />} />
+				<Route path="/result" element={<Result />} />
 			</Routes>
 		</>
 	);
diff --git a/src/components/GetImage/index.module.css b/src/components/GetImage/index.module.css
new file mode 100644
index 0000000..c932934
--- /dev/null
+++ b/src/components/GetImage/index.module.css
@@ -0,0 +1,12 @@
+.centered-image {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 20px 0; 
+}
+
+.centered-image img {
+    max-width: 40%; 
+    height: auto;   
+    border-radius: 10px; 
+}
diff --git a/src/components/GetImage/index.tsx b/src/components/GetImage/index.tsx
new file mode 100644
index 0000000..3cedabb
--- /dev/null
+++ b/src/components/GetImage/index.tsx
@@ -0,0 +1,22 @@
+interface GetImageProps {
+	images: string[];
+	alt: string;
+	width: number;
+	height: number;
+}
+
+const GetImage: React.FC<GetImageProps> = ({ images, alt }) => {
+	const randomImage = images[Math.floor(Math.random() * images.length)];
+
+	return (
+		<img
+			src={randomImage}
+			alt={alt}
+			style={{ display: "block", margin: "0 auto" }}
+			width={360}
+			height={360}
+		/>
+	);
+};
+
+export default GetImage;
diff --git a/src/pages/result/index.module.css b/src/pages/result/index.module.css
new file mode 100644
index 0000000..ce483cf
--- /dev/null
+++ b/src/pages/result/index.module.css
@@ -0,0 +1,68 @@
+.result-text {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 40px;
+}
+
+.background-logo{
+    opacity: 0.6;
+    position: absolute;
+    top: 40%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    justify-content: center;
+    align-items: center;
+    
+}
+
+.get-text {
+    position: absolute;
+    top: 60%;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 40px;
+    white-space: nowrap;
+}
+
+.share-btn{
+    position: absolute;
+    top: 80%;
+    left: 50%;
+    transform: translateX(-50%);
+    white-space: nowrap;
+}
+
+.replay-text {
+  position: absolute;
+  top: 88%;
+  left: 50%;
+  transform: translateX(-50%);
+  white-space: nowrap;
+  font-family: 'Yuji Syuku', serif, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  font-style: normal;
+}
+
+@keyframes rotate {
+    from {
+        transform: translate(-50%, -50%) rotate(0deg);
+    }
+    to {
+        transform: translate(-50%, -50%) rotate(360deg);
+    }
+}
+
+.get-image-container {
+    position: absolute;
+    top: 40%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1;
+    animation: rotate 16s linear infinite; 
+}
+
diff --git a/src/pages/result/index.tsx b/src/pages/result/index.tsx
new file mode 100644
index 0000000..aa90a4e
--- /dev/null
+++ b/src/pages/result/index.tsx
@@ -0,0 +1,55 @@
+import GetImage from "../../components/GetImage";
+import { DefaultButton } from "../../components/ui/Button";
+import styles from "./index.module.css";
+
+function Result() {
+	const images = [
+		"/drink/bottle0.webp",
+		"/drink/bottle1.webp",
+		"/drink/bottle2.webp",
+		"/drink/bottle3.webp",
+	];
+
+	return (
+		<div>
+			<div className={styles["result-text"]}>
+				<p>結果発表!</p>
+			</div>
+			<div className={styles["get-image-container"]}>
+				<GetImage
+					images={images}
+					alt="ランダムに表示されるボトル画像"
+					width={160}
+					height={160}
+				/>
+			</div>
+			<div className={styles["background-logo"]}>
+				<img
+					src="/logo.webp"
+					alt="背景にばーちゃるなつまつりのロゴ"
+					width="350"
+					height="350"
+				/>
+			</div>
+			<div className={styles["get-text"]}>
+				<p>Bottle Get!</p>
+			</div>
+			<div className={styles["share-btn"]}>
+				<a
+					href="https://twitter.com/intent/tweet?text=Webの射的で遊んだよ.%20%23virtualnatsumatsuri%20%23炎上開発%20%23鹿児島ハッカソン"
+					target="_blank"
+					rel="noopener noreferrer"
+				>
+					<DefaultButton variant="contained" color="black" size="md">
+						Xで共有する
+					</DefaultButton>
+				</a>
+			</div>
+			<div className={styles["replay-text"]}>
+				<p>また遊びにきてや〜</p>
+			</div>
+		</div>
+	);
+}
+
+export default Result;