diff --git a/components/Card.module.css b/components/Card.module.css
new file mode 100644
index 00000000..b34c043a
--- /dev/null
+++ b/components/Card.module.css
@@ -0,0 +1,66 @@
+.cardTitle{
+  font-size: 37px;
+  font-weight: 500;
+}
+.cardSun{
+  width: 50px;
+  height: 50px;
+}
+.cardHeader{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 25px;
+  width: 100%;
+  height: 93px;
+}
+.cardBodyText{
+  width: 100%;
+  font-size: 16px;
+  font-weight: 400;
+  letter-spacing: 0.5px;
+  line-height: 23px;
+}
+.cardBody{
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  height: fit-content;
+  padding: 25px;
+  width: 100%;
+}
+.cardTheme{
+  font-size: 15px;
+  font-weight: 500;
+}
+.cardButtonText{
+  font-size: 15px;
+  font-weight: 500;
+}
+.cardButton{
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  width: fit-content;
+  height: fit-content;
+  padding: 10px;
+  border-radius: 5px;
+}
+.cardFooter{
+  overflow: hidden;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: fit-content;
+  padding: 25px;
+  width: 100%;
+}
+.cardComponent{
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  height: fit-content;
+  border-radius: 20px;
+  width: 360px;
+}
\ No newline at end of file
diff --git a/components/Card.tsx b/components/Card.tsx
new file mode 100644
index 00000000..68b3eaf1
--- /dev/null
+++ b/components/Card.tsx
@@ -0,0 +1,139 @@
+import styles from "./Card.module.css";
+import sunImage from "./sunImage.svg";
+import sun from "./sun.svg";
+
+export const Card = ({
+  override,
+  mode,
+}: {
+  override?: React.CSSProperties;
+  mode: string;
+}) => {
+  const titleMode =
+    mode === "Dark"
+      ? {
+          color: "rgb(255, 255, 255)",
+        }
+      : {
+          color: "rgb(0, 0, 0)",
+        };
+  const bodyTextMode =
+    mode === "Dark"
+      ? {
+          color: "rgb(255, 255, 255)",
+        }
+      : {
+          color: "rgb(0, 0, 0)",
+        };
+  const themeMode =
+    mode === "Dark"
+      ? {
+          color: "rgb(255, 255, 255)",
+        }
+      : {
+          color: "rgb(0, 0, 0)",
+        };
+  const buttonTextMode =
+    mode === "Dark"
+      ? {
+          color: "rgb(0, 0, 0)",
+        }
+      : {
+          color: "rgb(255, 255, 255)",
+        };
+  const buttonMode =
+    mode === "Dark"
+      ? {
+          backgroundColor: "rgb(255, 255, 255)",
+        }
+      : {
+          backgroundColor: "rgb(7, 14, 19)",
+        };
+  const cardMode =
+    mode === "Dark"
+      ? {
+          backgroundColor: "rgb(7, 14, 19)",
+        }
+      : {
+          backgroundColor: "rgb(255, 255, 255)",
+        };
+  let sunSrc;
+  if (mode === "Light") {
+    sunSrc = sunImage;
+  } else {
+    sunSrc = sun;
+  }
+  return (
+    <div
+      className={styles.cardComponent}
+      style={{
+        ...cardMode,
+        ...override,
+      }}
+    >
+      <CardHeader titleMode={titleMode} sunSrc={sunSrc} />
+      <CardBodyText bodyTextMode={bodyTextMode} />
+      <CardFooter
+        themeMode={themeMode}
+        buttonMode={buttonMode}
+        buttonTextMode={buttonTextMode}
+      />
+    </div>
+  );
+};
+
+const CardHeader = ({ titleMode, sunSrc }: any) => (
+  <div className={styles.cardHeader}>
+    <p
+      className={styles.cardTitle}
+      style={{
+        ...titleMode,
+      }}
+    >
+      Trends
+    </p>
+    <img className={styles.cardSun} src={sunSrc.src} />
+  </div>
+);
+
+const CardBodyText = ({ bodyTextMode }: any) => (
+  <div className={styles.cardBody}>
+    <p
+      className={styles.cardBodyText}
+      style={{
+        ...bodyTextMode,
+      }}
+    >
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididun...
+    </p>
+  </div>
+);
+
+const CardFooter = ({ themeMode, buttonMode, buttonTextMode }: any) => (
+  <div className={styles.cardFooter}>
+    <p
+      className={styles.cardTheme}
+      style={{
+        ...themeMode,
+      }}
+    >
+      Theme
+    </p>
+    <div
+      className={styles.cardButton}
+      style={{
+        ...buttonMode,
+      }}
+    >
+      <p
+        className={styles.cardButtonText}
+        style={{
+          ...buttonTextMode,
+        }}
+      >
+        Click me!
+      </p>
+    </div>
+  </div>
+);
diff --git a/components/CardPage.tsx b/components/CardPage.tsx
new file mode 100644
index 00000000..8c99b42b
--- /dev/null
+++ b/components/CardPage.tsx
@@ -0,0 +1,11 @@
+import { Card } from "./Card";
+export const CardPage = ({ override }: { override?: React.CSSProperties }) => {
+  return (
+    <Card
+      mode="Light"
+      override={{
+        width: "100%",
+      }}
+    />
+  );
+};
diff --git a/components/sun.svg b/components/sun.svg
new file mode 100644
index 00000000..3b44e256
--- /dev/null
+++ b/components/sun.svg
@@ -0,0 +1,4 @@
+<svg preserveAspectRatio="none" width="50" height="51" viewBox="0 0 50 51" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect vector-effect="non-scaling-stroke" y="0.5" width="50" height="50" rx="25" fill="black"/>
+<path vector-effect="non-scaling-stroke" d="M19.995 25.5C19.995 28.261 22.241 30.507 25.002 30.507C27.763 30.507 30.009 28.261 30.009 25.5C30.009 22.739 27.763 20.493 25.002 20.493C22.241 20.493 19.995 22.739 19.995 25.5ZM24 32.5H26V35.5H24V32.5ZM24 15.5H26V18.5H24V15.5ZM15 24.5H18V26.5H15V24.5ZM32 24.5H35V26.5H32V24.5ZM18.637 33.278L17.223 31.864L19.344 29.743L20.758 31.157L18.637 33.278ZM29.242 19.844L31.364 17.722L32.778 19.136L30.656 21.258L29.242 19.844ZM19.344 21.259L17.223 19.137L18.638 17.723L20.758 19.845L19.344 21.259ZM32.778 31.864L31.364 33.278L29.242 31.156L30.656 29.742L32.778 31.864Z" fill="#F8D000"/>
+</svg>
diff --git a/components/sunImage.svg b/components/sunImage.svg
new file mode 100644
index 00000000..3e84712e
--- /dev/null
+++ b/components/sunImage.svg
@@ -0,0 +1,4 @@
+<svg preserveAspectRatio="none" width="50" height="51" viewBox="0 0 50 51" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect vector-effect="non-scaling-stroke" y="0.5" width="50" height="50" rx="25" fill="#F2F2F2"/>
+<path vector-effect="non-scaling-stroke" d="M19.995 25.5C19.995 28.261 22.241 30.507 25.002 30.507C27.763 30.507 30.009 28.261 30.009 25.5C30.009 22.739 27.763 20.493 25.002 20.493C22.241 20.493 19.995 22.739 19.995 25.5ZM24 32.5H26V35.5H24V32.5ZM24 15.5H26V18.5H24V15.5ZM15 24.5H18V26.5H15V24.5ZM32 24.5H35V26.5H32V24.5ZM18.637 33.278L17.223 31.864L19.344 29.743L20.758 31.157L18.637 33.278ZM29.242 19.844L31.364 17.722L32.778 19.136L30.656 21.258L29.242 19.844ZM19.344 21.259L17.223 19.137L18.638 17.723L20.758 19.845L19.344 21.259ZM32.778 31.864L31.364 33.278L29.242 31.156L30.656 29.742L32.778 31.864Z" fill="black"/>
+</svg>