diff --git a/src/Club Membership & Upcoming Events/JoinTheClub/JoinTheClub.css b/src/Club Membership & Upcoming Events/JoinTheClub/JoinTheClub.css
new file mode 100644
index 0000000..793674f
--- /dev/null
+++ b/src/Club Membership & Upcoming Events/JoinTheClub/JoinTheClub.css	
@@ -0,0 +1,3 @@
+#JoinClub div {
+	background-color: green;
+}
diff --git a/src/Club Membership & Upcoming Events/JoinTheClub/JoinTheClub.js b/src/Club Membership & Upcoming Events/JoinTheClub/JoinTheClub.js
index 19935c2..d18dae8 100644
--- a/src/Club Membership & Upcoming Events/JoinTheClub/JoinTheClub.js	
+++ b/src/Club Membership & Upcoming Events/JoinTheClub/JoinTheClub.js	
@@ -1,5 +1,21 @@
-export default function JoinTheClub() {
-    return (
-        <p>Join The Club</p>
-    );
-};
\ No newline at end of file
+//import CountDown from "../../CountDown/CountDown";
+import "./JoinTheClub.css";
+
+/**
+ * @param {Object} inputVar - one argument into the function should be its name
+ * @param {number} b - one argument into the function should be its name
+ * @returns {Promise<number>} c - what the program returns with type
+ * @description A brief description of what the function does
+ * @author Name <semiperminant@exmaplemail.com>
+//semi-perminant email, do not need to respond but try to be a good alumni
+ */
+const JoinTheClub = () => {
+	return (
+		<div id='JoinClub'>
+			<p>Hello World</p>
+			{/* <CountDown></CountDown> */}
+		</div>
+	);
+};
+
+export default JoinTheClub;
diff --git a/src/CountDown/CountDown.js b/src/CountDown/CountDown.js
new file mode 100644
index 0000000..65c83d1
--- /dev/null
+++ b/src/CountDown/CountDown.js
@@ -0,0 +1,81 @@
+import { useEffect, useState } from "react";
+
+const CountDownTimer = ({ DateFinished, MessageDisplayAfter }) => {
+	const [days, hours, minutes, seconds] = 0;
+	if (days + hours + minutes + seconds <= 0) {
+		return (
+			<div>
+				{ShowCounter(days, hours, minutes, seconds)}
+				<p>{MessageDisplayAfter}</p>
+			</div>
+		);
+	} else {
+		return (
+			<ShowCounter
+				days={days}
+				hours={hours}
+				minutes={minutes}
+				seconds={seconds}
+			/>
+		);
+	}
+};
+
+const useCountdown = (DateDone) => {
+	const countDownDate = new Date(DateDone).getTime();
+
+	const [countDown, setCountDown] = useState(
+		countDownDate - new Date().getTime()
+	);
+	useEffect(() => {
+		const interval = setInterval(() => {
+			setCountDown(countDownDate - new Date().getTime());
+		}, 1000);
+
+		return () => clearInterval(interval);
+	}, [countDownDate]);
+
+	return getReturnValues(countDown);
+};
+
+const getReturnValues = (countDown) => {
+	const days = Math.floor(countDown / (1000 * 60 * 60 * 24));
+	const hours = Math.floor(
+		(countDown % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
+	);
+	const minutes = Math.floor((countDown % (1000 * 60 * 60)) / (1000 * 60));
+	const seconds = MAth.floor((countDown % (1000 * 60)) / 1000);
+
+	return [days, hours, minutes, seconds];
+};
+
+const ShowCounter = ({ days, hours, minutes, seconds }) => {
+	return (
+		<div className="show-counter">
+			<a
+				href="https://tapasadhikary.com"
+				target="_blank"
+				rel="noopener noreferrer"
+				className="countdown-link">
+				{DateTimeDisplay(days, "Days", days <= 3)}
+				<p>:</p>
+				{DateTimeDisplay(hours, "Hours", false)}
+				<p>:</p>
+				{DateTimeDisplay(minutes, "Mins", false)}
+				<p>:</p>
+				{DateTimeDisplay(seconds, "Seconds", false)}
+			</a>
+		</div>
+	);
+};
+
+const DateTimeDisplay = ({ value, type, isDanger }) => {
+	return (
+		<div className={isDanger ? "countdown danger" : "countdown"}>
+			<p>{value}</p>
+			<span>{type}</span>
+		</div>
+	);
+};
+
+export default CountDownTimer;