diff --git a/packages/molecules/%SystemDrive%/ProgramData/Microsoft/Windows/Caches/cversions.2.db b/packages/molecules/%SystemDrive%/ProgramData/Microsoft/Windows/Caches/cversions.2.db
new file mode 100644
index 0000000..ae2b3d1
Binary files /dev/null and b/packages/molecules/%SystemDrive%/ProgramData/Microsoft/Windows/Caches/cversions.2.db differ
diff --git a/packages/molecules/%SystemDrive%/ProgramData/Microsoft/Windows/Caches/{4819D7AC-741E-4EB8-9922-4572D3973EAB}.2.ver0x0000000000000001.db b/packages/molecules/%SystemDrive%/ProgramData/Microsoft/Windows/Caches/{4819D7AC-741E-4EB8-9922-4572D3973EAB}.2.ver0x0000000000000001.db
new file mode 100644
index 0000000..63ee37b
Binary files /dev/null and b/packages/molecules/%SystemDrive%/ProgramData/Microsoft/Windows/Caches/{4819D7AC-741E-4EB8-9922-4572D3973EAB}.2.ver0x0000000000000001.db differ
diff --git a/packages/molecules/%SystemDrive%/ProgramData/Microsoft/Windows/Caches/{6AF0698E-D558-4F6E-9B3C-3716689AF493}.2.ver0x0000000000000001.db b/packages/molecules/%SystemDrive%/ProgramData/Microsoft/Windows/Caches/{6AF0698E-D558-4F6E-9B3C-3716689AF493}.2.ver0x0000000000000001.db
new file mode 100644
index 0000000..e72b8c3
Binary files /dev/null and b/packages/molecules/%SystemDrive%/ProgramData/Microsoft/Windows/Caches/{6AF0698E-D558-4F6E-9B3C-3716689AF493}.2.ver0x0000000000000001.db differ
diff --git a/packages/molecules/%SystemDrive%/ProgramData/Microsoft/Windows/Caches/{DDF571F2-BE98-426D-8288-1A9A39C3FDA2}.2.ver0x0000000000000001.db b/packages/molecules/%SystemDrive%/ProgramData/Microsoft/Windows/Caches/{DDF571F2-BE98-426D-8288-1A9A39C3FDA2}.2.ver0x0000000000000001.db
new file mode 100644
index 0000000..ef8dbb4
Binary files /dev/null and b/packages/molecules/%SystemDrive%/ProgramData/Microsoft/Windows/Caches/{DDF571F2-BE98-426D-8288-1A9A39C3FDA2}.2.ver0x0000000000000001.db differ
diff --git a/packages/molecules/src/profile-card/index.module.css b/packages/molecules/src/profile-card/index.module.css
new file mode 100644
index 0000000..4894c0b
--- /dev/null
+++ b/packages/molecules/src/profile-card/index.module.css
@@ -0,0 +1,158 @@
+/* index.module.css */
+
+.profileCard {
+    border-radius: 8px;
+    padding: 16px;
+    margin:auto;
+}
+
+.teacherCard {
+    padding: 12px;
+    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
+    border: 2.5px solid transparent;
+    border-image-slice: 1;
+    border-radius: 2px;
+    margin-top: 1rem;
+}
+
+.studentCardContainer {
+    box-shadow: 0px 0px 6px 0px rgba(47, 50, 147, 0.5);
+    
+    box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.25)!important;
+
+    padding: 12px;
+    border-radius: 8px;
+    border: 3px solid #e0e0e0;
+}
+
+.goldCard {
+    border-image-source: radial-gradient(69.33% 163.05% at 42.86% 44.12%,
+            #ffc50c 0%,
+            #997607 99.67%);
+    box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.25)!important;
+}
+
+.silverCard {
+    border-image-source: radial-gradient(69.33% 163.05% at 42.86% 44.12%,
+            #c6c6c6 0%,
+            #4a4a4a 99.67%);
+    box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.25)!important;
+
+}
+
+.bronzeCard {
+    border-image-source: radial-gradient(69.33% 163.05% at 42.86% 44.12%,
+            #fd6930 0%,
+            #6e270c 99.67%);
+    box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.25)!important;
+
+}
+
+.goldName {
+    background-image: radial-gradient(69.33% 163.05% at 42.86% 44.12%, #FFC50C 0%, #997607 99.67%) ;
+
+}
+
+.silverName {
+    background: radial-gradient(69.33% 163.05% at 42.86% 44.12%,
+            #c6c6c6 0%,
+            #4a4a4a 99.67%);
+}
+
+.bronzeName {
+    background: radial-gradient(69.33% 163.05% at 42.86% 44.12%,
+            #fd6930 0%,
+            #6e270c 99.67%);
+}
+
+.TeacherName {
+    text-align: center;
+    color: transparent;
+    border-radius: 10px;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.studentName {
+    font-family: "Noto Sans Devanagari";
+    font-size: 20px;
+    font-weight: 700;
+    text-align: center;
+    padding-bottom: 8px;
+    color: #000;
+}
+
+.line {
+    height: 2px;
+    border: none;
+}
+
+.goldLine {
+    background-image: radial-gradient(69.33% 163.05% at 42.86% 44.12%,
+            #ffc50c 0%,
+            #997607 99.67%);
+}
+
+.silverLine {
+    background-image: radial-gradient(69.33% 163.05% at 42.86% 44.12%,
+            #c6c6c6 0%,
+            #4a4a4a 99.67%);
+}
+
+.bronzeLine {
+    background-image: radial-gradient(69.33% 163.05% at 42.86% 44.12%,
+            #fd6930 0%,
+            #6e270c 99.67%);
+
+}
+
+.defaultLine {
+    background-image: radial-gradient(rgba(200, 216, 253, 1),rgba(200, 216, 253, 1));
+    margin-bottom: 15px;
+}
+
+.bottomText {
+    color: #2f3293;
+    width: 100%;
+    margin: auto;
+    max-width: 86px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+}
+
+.image {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: -12px;
+}
+
+.details {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 0 auto;
+    margin-top: 8px;
+    width: 90%;
+}
+
+.detailLineItem {
+    display: flex;
+    font-family: "Noto Sans Devanagari";
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 11.4px;
+    margin: 16px 0;
+}
+
+.detailLineItemLabel {
+    color: #5e5d5c;
+}
+
+.detailLineItemValue {
+    margin-left: 2px;
+    color: #2f3293;
+}
\ No newline at end of file
diff --git a/packages/molecules/src/profile-card/index.stories.ts b/packages/molecules/src/profile-card/index.stories.ts
new file mode 100644
index 0000000..73f3622
--- /dev/null
+++ b/packages/molecules/src/profile-card/index.stories.ts
@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ProfileCard from './index';
+
+const meta = {
+  title: 'Molecule/ProfileCard',
+  component: ProfileCard,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    name: 'John Doe',
+    profileType: 'teacher',
+    district: 'Agra',
+    block: 'Block A',
+  },
+} satisfies Meta<typeof ProfileCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const TeacherGold: Story = {
+  args: {
+    name: 'आकाश सिंगला',
+    profileType: 'teacher',
+    teacherDetails: {
+      type: 'gold',
+      imageUrl: '/gold.png',
+    },
+  },
+};
+
+export const TeacherSilver: Story = {
+  args: {
+    name: 'आकाश सिंगला',
+    profileType: 'teacher',
+    teacherDetails: {
+      type: 'silver',
+      imageUrl: '/silver.png',
+    },
+  },
+};
+
+export const TeacherBronze: Story = {
+  args: {
+    name: 'आकाश सिंगला',
+    profileType: 'teacher',
+    teacherDetails: {
+      type: 'bronze',
+      imageUrl: '/bronze.png',
+    },
+  },
+};
+
+export const Student: Story = {
+  args: {
+    name: 'रूद्रम सिंह',
+    profileType: 'student',
+    studentDetails: {
+      id: '0987654321',
+      grade: 2,
+      roll_no: 6565,
+      imageUrl: '/information-bird.png',
+    },
+  },
+};
diff --git a/packages/molecules/src/profile-card/index.tsx b/packages/molecules/src/profile-card/index.tsx
new file mode 100644
index 0000000..86d39ec
--- /dev/null
+++ b/packages/molecules/src/profile-card/index.tsx
@@ -0,0 +1,248 @@
+import { Box, Card, Typography } from "@mui/material";
+import Image from "next/image";
+import React from "react";
+import clsx from "clsx";
+import styles from "./index.module.css";
+
+type CardType = "gold" | "silver" | "bronze";
+type ProfileType = "teacher" | "student";
+
+type TeacherProps = {
+  type?: CardType;
+  imageUrl: string;
+};
+
+type StudentProps = {
+  id: string;
+  grade: number;
+  roll_no: number;
+  imageUrl: string;
+};
+
+type Props = {
+  name: string;
+  profileType: ProfileType;
+  district?: string;
+  block?: string;
+  studentDetails?: StudentProps;
+  teacherDetails?: TeacherProps;
+};
+
+const ProfileCard = ({
+  name,
+  profileType,
+  district,
+  block,
+  studentDetails,
+  teacherDetails,
+}: Props) => {
+  const getImageURL = () => {
+    if (profileType === "teacher") {
+      return teacherDetails?.imageUrl || "";
+    } else if (profileType === "student") {
+      return studentDetails?.imageUrl || "";
+    }
+    return "";
+  };
+
+  const imageURL = getImageURL();
+  const UDISE = localStorage.getItem("udise");
+
+  return (
+    <Card
+      className={clsx(styles.profileCard, {
+        [styles.teacherCard]: profileType === "teacher",
+        [styles.studentCardContainer]: profileType === "student",
+        [styles.goldCard]: teacherDetails?.type === "gold",
+        [styles.silverCard]: teacherDetails?.type === "silver",
+        [styles.bronzeCard]: teacherDetails?.type === "bronze",
+      })}
+    >
+      <Typography
+        component="p"
+        className={clsx(styles.profileName, {
+          [styles.TeacherName]: profileType === "teacher",
+          [styles.studentName]: profileType === "student",
+          [styles.goldName]: teacherDetails?.type === "gold",
+          [styles.silverName]: teacherDetails?.type === "silver",
+          [styles.bronzeName]: teacherDetails?.type === "bronze",
+        })}
+        fontWeight={800}
+      >
+        {name}
+      </Typography>
+      <hr
+        className={clsx(styles.line, {
+          [styles.goldLine]: teacherDetails?.type === "gold",
+          [styles.silverLine]: teacherDetails?.type === "silver",
+          [styles.bronzeLine]: teacherDetails?.type === "bronze",
+          [styles.defaultLine]: profileType === "student",
+        })}
+      ></hr>
+      <Box
+        display={"flex"}
+        alignItems={"center"}
+        gap={1}
+        margin={"0px 17px"}
+        justifyContent={"space-between"}
+      >
+        <Box width={"50%"}>
+          {profileType === "teacher" && (
+            <>
+              <Box display={"flex"} alignItems={"center"}>
+                जनपद :
+                <Typography
+                  component="p"
+                  sx={{
+                    fontWeight: "600",
+                    color: "#2F3293",
+                    fontSize: "14px",
+                    marginLeft: "8px",
+                  }}
+                >
+                  {district || "Agra"}
+                </Typography>
+              </Box>
+              <Box display={"flex"} alignItems={"center"} margin={"10px 0"}>
+                UDISE:
+                <Typography
+                  component="p"
+                  sx={{
+                    fontWeight: "600",
+                    color: "#2F3293",
+                    fontSize: "14px",
+                    marginLeft: "8px",
+                  }}
+                >
+                  {UDISE}
+                </Typography>
+              </Box>
+              <Box display={"flex"} alignItems={"center"}>
+                ब्लॉक :
+                <Typography
+                  component="p"
+                  sx={{
+                    fontWeight: "600",
+                    color: "#2F3293",
+                    fontSize: "14px",
+                    marginLeft: "8px",
+                  }}
+                >
+                  {block}
+                </Typography>
+              </Box>
+            </>
+          )}
+          {profileType === "student" && studentDetails && (
+            <>
+              <Box display={"flex"} alignItems={"center"}>
+                जनपद :
+                <Typography
+                  component="p"
+                  sx={{
+                    fontWeight: "600",
+                    color: "#2F3293",
+                    fontSize: "14px",
+                    marginLeft: "8px",
+                  }}
+                >
+                  {district || "AGRA"}
+                </Typography>
+              </Box>
+              <Box display={"flex"} alignItems={"center"} margin={"10px 0"}>
+                UDISE:
+                <Typography
+                  component="p"
+                  sx={{
+                    fontWeight: "600",
+                    color: "#2F3293",
+                    fontSize: "14px",
+                    marginLeft: "8px",
+                  }}
+                >
+                  {studentDetails.id}
+                </Typography>
+              </Box>
+              <Box display={"flex"} alignItems={"center"}>
+                आखरी आकलन :
+                <Typography
+                  component="p"
+                  sx={{
+                    fontWeight: "600",
+                    color: "#2F3293",
+                    fontSize: "14px",
+                    marginLeft: "8px",
+                  }}
+                >
+                  {studentDetails.roll_no}
+                </Typography>
+              </Box>
+            </>
+          )}
+        </Box>
+        <Box
+          margin={"auto"}
+          width={"50%"}
+          display={"flex"}
+          flexDirection={"column"}
+          alignItems={"center"}
+          justifyContent={"center"}
+        >
+          <Box
+            display={"flex"}
+            alignItems={"center"}
+            justifyContent={"center"}
+            width={"100%"}
+          >
+            {typeof window === "undefined" ? (
+              <img
+                className={styles.image}
+                src={imageURL}
+                width={profileType === "teacher" ? 47 : 69}
+                height={profileType === "teacher" ? 74 : 101}
+                alt={profileType === "teacher" ? "सर्व शिक्षा अभियान" : "icon"}
+              />
+            ) : (
+              <Image
+                className={styles.image}
+                src={imageURL}
+                width={profileType === "teacher" ? 47 : 69}
+                height={profileType === "teacher" ? 74 : 101}
+                alt={profileType === "teacher" ? "सर्व शिक्षा अभियान" : "icon"}
+              />
+            )}
+          </Box>
+          {profileType === "teacher" && (
+            <Typography
+              component="p"
+              className={styles.bottomText}
+              fontWeight={600}
+              fontSize={"12px"}
+            >
+              मई में आपके 50+ छात्र निपुण हैं 🎉
+            </Typography>
+          )}
+        </Box>
+      </Box>
+    </Card>
+  );
+};
+
+const DetailItem = ({ label, value }: { label: string; value: string | number }) => (
+  <Box display={"flex"} alignItems={"center"} margin={"10px 0"}>
+    {label} :
+    <Typography
+      component="p"
+      sx={{
+        fontWeight: "600",
+        color: "#2F3293",
+        fontSize: "14px",
+        marginLeft: "8px",
+      }}
+    >
+      {value}
+    </Typography>
+  </Box>
+);
+
+export default ProfileCard;