diff --git a/frontend/src/pages/Admin/Components/Contact/Card/Card.jsx b/frontend/src/pages/Admin/Components/Contact/Card/Card.jsx
new file mode 100644
index 00000000..0d1c236b
--- /dev/null
+++ b/frontend/src/pages/Admin/Components/Contact/Card/Card.jsx
@@ -0,0 +1,20 @@
+import style from "./card.module.scss";
+
+export function Card({ content: { email, message, name, subject } }) {
+  return (
+    <div className={style["card-item"]}>
+      <div className={style["card-info"]}>
+        <h1>{name}</h1>
+        <h3 className={style["card-detail"]}>Email : {email}</h3>
+        <h3 className={style["card-detail"]}>Subject : {subject}</h3>
+        <h2 className={style["card-detail"]}>{message}</h2>
+        <div className={style["button-group"]}>
+          <a href={`mailto:${email}`}>
+            <button className={style["button-edit"]}>Reply</button>
+          </a>
+          <button className={style["button-delete"]}>Delete</button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/pages/Admin/Components/Contact/Card/card.module.scss b/frontend/src/pages/Admin/Components/Contact/Card/card.module.scss
new file mode 100644
index 00000000..83b846c7
--- /dev/null
+++ b/frontend/src/pages/Admin/Components/Contact/Card/card.module.scss
@@ -0,0 +1,90 @@
+.card-item {
+  text-align: center;
+  font-size: 1.5rem;
+  border-radius: 1em;
+  height: auto;
+  width: 15em;
+  margin: 1em;
+  display: inline-block;
+  background-position: left center;
+  transition: all 0.5s ease-in;
+  background-color: #016795;
+  box-shadow: 0.5em 0.5em 0.5em rgb(54, 53, 53);
+}
+
+.card-title {
+  font-size: 1.8rem;
+  margin-bottom: 1.5rem;
+  line-height: 1.9rem;
+  font-weight: bold;
+  color: white;
+}
+
+.card-detail {
+  font-weight: bold;
+  text-align: center;
+  font-size: 1.2rem;
+  width: 100%;
+  margin-top: 2px;
+}
+
+.card-info {
+  color: white;
+  margin-top: 10px;
+  margin-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+  padding: 14px;
+}
+
+.card-link {
+  color: white;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.card-link:hover {
+  color: #fb8500;
+}
+
+.button-group {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  margin-top: 40px;
+}
+
+.button-edit {
+  padding: 10px 30px;
+  border: none;
+  outline: none;
+  border-radius: 5px;
+  background: linear-gradient(45deg, rgb(115, 196, 228), rgb(111, 111, 247));
+  margin: 5px;
+  color: #fff;
+  width: 100px;
+  font-size: medium;
+  font-weight: bold;
+}
+
+.button-url:hover {
+  background: linear-gradient(45deg, rgb(111, 111, 247), rgb(115, 196, 228));
+}
+
+.button-delete {
+  padding: 10px 30px;
+  border: none;
+  outline: none;
+  border-radius: 5px;
+  background: linear-gradient(45deg, rgb(255, 0, 0), rgb(243, 109, 109));
+  margin: 5px;
+  color: #fff;
+  width: 100px;
+  font-size: medium;
+  font-weight: bold;
+}
+
+.button-delete:hover {
+  background: linear-gradient(45deg, rgb(243, 109, 109), rgb(255, 0, 0));
+}
diff --git a/frontend/src/pages/Admin/Components/Contact/Card/index.js b/frontend/src/pages/Admin/Components/Contact/Card/index.js
new file mode 100644
index 00000000..24d32124
--- /dev/null
+++ b/frontend/src/pages/Admin/Components/Contact/Card/index.js
@@ -0,0 +1 @@
+export * from "./Card";
diff --git a/frontend/src/pages/Admin/Components/Contact/Contact.jsx b/frontend/src/pages/Admin/Components/Contact/Contact.jsx
index d1aff0f4..95b71feb 100644
--- a/frontend/src/pages/Admin/Components/Contact/Contact.jsx
+++ b/frontend/src/pages/Admin/Components/Contact/Contact.jsx
@@ -1,9 +1,44 @@
 import React from "react";
+import { END_POINT } from "../../../../config/api";
+import { useEffect, useState } from "react";
+import Grid from "@material-ui/core/Grid";
+import { Card } from "./Card/index.js";
+import style from "./contactus.module.scss";
+import Loader from "../../../../components/util/Loader";
 
 export function Contact() {
+  const [contactUsData, setContactUsData] = useState([]);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const fetchJoinUs = async () => {
+    const response = await fetch(`${END_POINT}/getContactUs`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${localStorage.getItem("token")}`,
+      },
+    });
+    const data = await response.json();
+    setContactUsData(data.ContactUs);
+    setIsLoaded(false);
+  };
+  useEffect(() => {
+    setIsLoaded(true);
+    fetchJoinUs();
+  }, []);
   return (
     <div>
       <h1 style={{ textAlign: "center" }}> Contact Us </h1>
+      <div className={style["data-loader"]}>{isLoaded ? <Loader /> : null}</div>
+      <div className={style["card-container"]}>
+        <Grid container spacing={2}>
+          <Grid item>
+            {contactUsData &&
+              contactUsData.map((data) => {
+                return <Card key={data._id} content={data} />;
+              })}
+          </Grid>
+        </Grid>
+      </div>
     </div>
   );
 }
diff --git a/frontend/src/pages/Admin/Components/Contact/contactus.module.scss b/frontend/src/pages/Admin/Components/Contact/contactus.module.scss
new file mode 100644
index 00000000..08b8bf84
--- /dev/null
+++ b/frontend/src/pages/Admin/Components/Contact/contactus.module.scss
@@ -0,0 +1,11 @@
+.card-container {
+  width: 100%;
+  margin-left: 10rem;
+}
+
+.data-loader {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}