diff --git a/styles/Components/card.module.css b/styles/Components/card.module.css
new file mode 100644
index 0000000..52544a4
--- /dev/null
+++ b/styles/Components/card.module.css
@@ -0,0 +1,120 @@
+.backgroundImage {
+	position: absolute;
+	bottom: -5px;
+	left: 0;
+	width: calc(100% + 5px);
+	height: auto;
+	scale: stretch;
+	border-radius: 0;
+	filter: var(--theme-ui-colors-cardFilter);
+	transition: filter 0.3s ease-in-out;
+}
+
+.backgroundGradient {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	scale: stretch;
+	border-radius: 0;
+	filter: var(--theme-ui-colors-cardFilter);
+	transition: filter 0.3s ease-in-out;
+}
+
+.card {
+	border-radius: 17px;
+	width: 100%;
+	height: 204px;
+	padding-inline: 5px;
+	padding-bottom: 5px;
+	position: relative;
+	overflow: hidden;
+	margin: 100px;
+	transition: filter 0.3s ease-in-out;
+}
+
+
+.panel {
+	position: absolute;
+	overflow-x: hidden;
+	overflow-y: hidden;
+	width: 88%;
+	height: 76%;
+	top: 12%;
+	left: 6%;
+	padding-top: 10px;
+	padding-bottom: 10px;
+	border-radius: 17px;
+	background-color: var(--theme-ui-colors-cardBackground);
+	transition: background-color 0.3s ease-in-out;
+	backdrop-filter: blur(7px);
+}
+
+.titleContainer {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	height: 32px;
+	padding-inline: 10px;
+	margin-top: 10px;
+}
+
+.title {
+	font-weight: 100;
+	font-size: 25px;
+	margin-left: 1vw;
+	line-height: 24px;
+	max-lines: 2;
+	color: var(--theme-ui-colors-text);
+	transition: color 0.3s ease-in-out;
+}
+
+.image {
+	height: 40px;
+	width: 40px;
+}
+
+.subtext {
+	width: 100%;
+	padding-inline: 10px;
+	text-align: center;
+	color: var(--theme-ui-colors-text);
+	transition: color 0.3s ease-in-out;
+}
+
+
+.buttonLayout {
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-end;
+	align-items: center;
+	flex-wrap: wrap;
+	padding: 0px;
+	position: absolute;
+	bottom: 5px;
+	right: 5px;
+}
+
+.button {
+	display: flex;
+	flex-direction: row;
+	align-items: flex-start;
+	justify-content: right;
+	position: static;
+	flex: none;
+	order: 1;
+	flex-grow: 0;
+
+	margin: 5px;
+	padding: 5px 10px;
+	border-radius: 8px;
+}
+
+@media (max-width: 500px) {
+	.card {
+		height: 254px;
+	}
+}
\ No newline at end of file