diff --git a/src/pages/demo1/eps.module.css b/src/pages/demo1/eps.module.css
new file mode 100644
index 0000000..f89e928
--- /dev/null
+++ b/src/pages/demo1/eps.module.css
@@ -0,0 +1,25 @@
+.epsContainer {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+}
+
+.forecastsContainer {
+	grid-column-start: 1;
+	grid-row-start: 1;
+	grid-row-end: 3;
+}
+.guessInput {
+	display: block;
+}
+
+.epsButtons {
+	margin-top: 1.5rem;
+	display: flex;
+	gap: 1rem;
+	flex-wrap: wrap;
+	width: 300px;
+}
+
+.epsButton {
+	padding: 1rem 2rem;
+}
diff --git a/src/pages/demo1/index.tsx b/src/pages/demo1/index.tsx
new file mode 100644
index 0000000..a3952f8
--- /dev/null
+++ b/src/pages/demo1/index.tsx
@@ -0,0 +1,86 @@
+import { gaussianRandom } from "@/utilities/functions";
+import { useEffect, useRef, useState } from "react";
+import styles from "./eps.module.css";
+import styles1 from "@/styles/Home.module.css";
+
+export default function Home() {
+	const [actualEps, setActualEps] = useState(0);
+	const [forecasts, setForecasts] = useState([...new Array(10)].map(() => 0));
+	const guessRef = useRef<HTMLInputElement>(null);
+	const [qsrReward, setQsrReward] = useState<number | null>(null);
+	const [bsrReward, setBsrReward] = useState<number | null>(null);
+	const [errorThreshold, setErrorThreshold] = useState<number | null>(null);
+
+	useEffect(() => {
+		renew();
+	}, []);
+
+	function renew() {
+		const actual = gaussianRandom(60, 20);
+		const forecastCal = [...new Array(10)].map(
+			() => gaussianRandom(0, Math.sqrt(8)) + actual,
+		);
+		setActualEps(actual);
+		setForecasts(forecastCal);
+		setQsrReward(null);
+		setBsrReward(null);
+		setErrorThreshold(Math.random() * 6);
+
+		if (guessRef.current) {
+			guessRef.current.value = "";
+		}
+	}
+
+	function guess() {
+		if (guessRef.current?.value && errorThreshold) {
+			setBsrReward(
+				(Number(guessRef.current?.value) - actualEps) ** 2 < errorThreshold
+					? 80
+					: 0,
+			);
+			setQsrReward(
+				90 - 25 * (actualEps - Number(guessRef.current?.value)) ** 2,
+			);
+		}
+	}
+	return (
+		<main className={styles1.main} style={{ userSelect: "none" }}>
+			<div className={styles.epsContainer}>
+				<div className={styles.forecastsContainer}>
+					<h3>Tahminler</h3>
+					{forecasts.map((forecast, index) => (
+						<p key={index}>{forecast}</p>
+					))}
+					<h3>Ortalama Tahmin </h3>
+					{forecasts.reduce((acc, curr) => acc + curr, 0) / forecasts.length}
+				</div>
+				<div className={styles.rewardContainer}>
+					<h3>Gerçek Hisse Kazancı (T)</h3>
+					{qsrReward ? actualEps : "..."}
+					<h3> QSR kazanç</h3>
+					{qsrReward ?? "..."}
+					<h3> BSR kazanç</h3>
+					{bsrReward ?? "..."}
+					<h3> BSR için hata eşiği (K)</h3>
+					{bsrReward !== null ? errorThreshold : "..."}
+				</div>
+				<div className={styles.epsButtons}>
+					<button className={styles.epsButton} onClick={() => renew()}>
+						Yenile
+					</button>
+					<button className={styles.epsButton} onClick={() => guess()}>
+						Tahmin
+					</button>
+					<label htmlFor="eps-guess">Tahmin (M)</label>
+					<input
+						type="text"
+						name="eps-guess"
+						id="eps-guess"
+						className={styles.guessInput}
+						ref={guessRef}
+					/>
+				</div>
+			</div>
+		</main>
+	);
+}
diff --git a/src/utilities/functions.ts b/src/utilities/functions.ts
index a4d675d..4e36d1a 100644
--- a/src/utilities/functions.ts
+++ b/src/utilities/functions.ts
@@ -64,3 +64,11 @@ export function getDateText() {
 		}) + ":00"
 	);
 }
+
+export function gaussianRandom(mean = 0, stdev = 1) {
+	const u = 1 - Math.random(); // Converting [0,1) to (0,1]
+	const v = Math.random();
+	const z = Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v);
+	// Transform to the desired mean and standard deviation:
+	return z * stdev + mean;
+}