diff --git a/src/components/Home/Home.css b/src/components/Home/Home.css
index baee1e6..95cbeec 100644
--- a/src/components/Home/Home.css
+++ b/src/components/Home/Home.css
@@ -11,7 +11,7 @@ body {
 }
 
 .home__info {
-  background-color: #1E1E1E;
+  background-color: #352f44;
   padding: 15px;
   color: #bb86fc;
   margin-top: 20px;
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 1b0300b..63a7baf 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -23,10 +23,10 @@ import "./Home.css";
 
 const useStyles = makeStyles((theme) => ({
   input: {
-    color: "#BB86FC",
+    color: "#bb86fc",
   },
   textfield: {
-    color: "#BB86FC",
+    color: "#bb86fc",
     height: "50px",
     width: "248px",
     padding: "0px 0px 0px 0px",
diff --git a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css
new file mode 100644
index 0000000..b7704ab
--- /dev/null
+++ b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css
@@ -0,0 +1,269 @@
+.wrapper {
+    display: flex;
+    background-color: #333333;
+    height: 27vh
+}
+
+.wrapper > * {
+    padding: 20px;
+}
+
+.paper-left {
+    width: 50%;
+}
+
+.paper-left h1{
+    color: whitesmoke;
+    text-transform: uppercase;
+    font-family: monospace;
+}
+
+.paper-left_vaccine_head{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.paper-left_vaccine_head h3{
+    text-transform: uppercase;
+    font-weight: bold;
+    color: white;
+    font-family: "Fira Code Medium", "monospace";
+}
+
+.paper-left_vaccine_head p{
+    text-transform: uppercase;
+    font-weight: bold;
+    color: black;
+    font-family: monospace;
+    background-color: #009E60;
+    padding: 10px;
+    border-radius: 7px;
+    text-align: center;
+}
+
+.paper-left .paper-left_content{
+    display: flex;
+    justify-content: space-between;
+    margin-top: 10px;
+}
+
+
+.paper-left .paper-left_content h3{
+    color: #BB86FC;
+    font-weight: bold;
+    text-transform: capitalize;
+}
+
+.paper-left .paper-left_content p{
+    color: #F48FB1;
+    margin-top: 5px;
+    text-transform: capitalize;
+    font-family: monospace;
+}
+
+.paper-left .paper-left_time {
+    display: flex;
+    justify-content: space-evenly;
+    margin-top: 10px;
+}
+
+.paper-left .paper-left_time .time{
+    padding: 10px;
+    border-radius: 7px;
+    font-weight: bold;
+}
+
+.paper-left .paper-left_time .open-time{
+    background-color: #009E60;
+    font-family: monospace;
+}
+
+.paper-left .paper-left_time .close-time{
+    background-color: rgb(222,49,99);
+    color: white;
+    font-family: monospace;
+}
+
+.paper-right {
+    width: 50%;
+}
+
+.paper-right_Badges{
+    display: flex;
+    justify-content: space-between;
+}
+
+.paper-right_Badges h5{
+    margin-right: 10px;
+    color: aquamarine;
+    font-family: monospace;
+    font-size: 22px;
+}
+
+.paper-right_Badges .healing_icon{
+    color: white;
+}
+
+.paper-right_Badges p {
+    color: whitesmoke;
+    font-size: 15px;
+}
+
+.paper-right_Badges p span{
+    color: aquamarine;
+    font-family: monospace;
+    font-size: 20px;
+}
+
+.paper-right_age{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 10px;
+}
+
+.paper-right_age .age_text h3{
+    color: aquamarine;
+    font-family: monospace;
+    font-size: 20px;
+}
+
+.paper-right_age .age_content p{
+    margin-bottom: 5px;
+    font-size: 20px;
+}
+
+.paper-right_age .age_content{
+    background-color: rgb(222,49,99);
+    height: 25px;
+    width: 75px;
+    padding: 5px;
+    border-radius: 3px;
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.paper-right_slots h3{
+    text-align: center;
+    font-weight: 700;
+    color: #BB86FC;
+    margin: 5px;
+}
+
+.paper-right_slots p{
+    color: whitesmoke;
+    font-size: 17px;
+    text-align: center;
+}
+
+
+/*Media Queries*/
+@media screen and (max-width: 500px) {
+    .wrapper {
+        height: 70vh;
+        flex-direction: column;
+    }
+
+    .paper-left {
+        width: 90%;
+    }
+
+    .paper-left_vaccine_head{
+        flex-direction: column;
+    }
+
+    .paper-left_vaccine_head h3{
+        font-size: 15px;
+        margin-bottom: 10px;
+    }
+
+    .paper-left_vaccine_head p{
+        padding: 5px;
+        font-size: 15px;
+        border-radius: 7px;
+        text-align: center;
+    }
+
+    .paper-left p {
+        width: 100%;
+    }
+
+    .paper-left .paper-left_content{
+        display: flex;
+        flex-direction: column;
+    }
+
+    .paper-left .paper-left_time {
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+    }
+
+    .paper-left .paper-left_time .time{
+        margin-top: 5px;
+    }
+
+    .paper-right {
+        width: 90%;
+    }
+
+    .paper-right_Badges h5{
+        margin-top: 5px;
+        margin-right: 3px;
+        color: aquamarine;
+        font-weight: bold;
+        font-size: 11px;
+    }
+
+    .paper-right_Badges .healing_icon{
+        font-size: 20px;
+    }
+
+    .paper-right_Badges p {
+        margin-top: 5px;
+        color: whitesmoke;
+        font-size: 15px;
+    }
+
+    .paper-right_Badges p span{
+        font-size: 15px;
+    }
+
+    .paper-right_age{
+        margin-top: 3px;
+    }
+
+    .paper-right_age .age_text h3{
+        font-size: 13px;
+    }
+
+    .paper-right_age .age_content{
+        background-color: rgb(222,49,99);
+        height: 15px;
+        width: 65px;
+        padding: 3px;
+        border-radius: 3px;
+        color: white;
+    }
+
+    .paper-right_age .age_content p{
+        margin-bottom: 1px;
+        font-size: 13px;
+    }
+
+    .paper-right_slots h3{
+        text-align: center;
+        font-weight: 700;
+        color: #BB86FC;
+        margin: 3px;
+    }
+
+    .paper-right_slots p{
+        color: whitesmoke;
+        font-size: 15px;
+        text-align: center;
+    }
+}
\ No newline at end of file
diff --git a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js
index a7ce7a5..0b4325f 100644
--- a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js
+++ b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js
@@ -1,89 +1,85 @@
 import { makeStyles } from '@material-ui/core/styles';
-import clsx from 'clsx';
-import Accordion from '@material-ui/core/Accordion';
-import AccordionDetails from '@material-ui/core/AccordionDetails';
-import AccordionSummary from '@material-ui/core/AccordionSummary';
-import Typography from '@material-ui/core/Typography';
-import Chip from '@material-ui/core/Chip';
-import Divider from '@material-ui/core/Divider';
+import Paper from '@material-ui/core/Paper';
 import Badge from '@material-ui/core/Badge';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+
+import HealingIcon from '@material-ui/icons/Healing';
+import VerifiedUserRoundedIcon from '@material-ui/icons/VerifiedUserRounded';
+
+import "./VaccineDataSingle.css"
 
 const useStyles = makeStyles((theme) => ({
-    root: {
-        width: '100%',
-    },
-    heading: {
-        fontSize: theme.typography.pxToRem(15),
-    },
-    secondaryHeading: {
-        fontSize: theme.typography.pxToRem(15),
-        color: theme.palette.text.secondary,
-    },
-    icon: {
-        verticalAlign: 'bottom',
-        height: 20,
-        width: 20,
-    },
-    details: {
-        alignItems: 'center',
-    },
-    column: {
-        flexBasis: '33.33%',
-    },
-    helper: {
-        borderLeft: `2px solid ${theme.palette.divider}`,
-        padding: theme.spacing(1, 2),
-    },
-    link: {
-        color: theme.palette.primary.main,
-        textDecoration: 'none',
-        '&:hover': {
-            textDecoration: 'underline',
-        },
+    paperMainDiv:{
+        width: "100%"
     },
 }));
 
 const VaccineDataSingle = (vaccine)=> {
     const classes = useStyles();
+
     return(
-        <div className={classes.root}>
-            <Accordion defaultExpanded>
-                <AccordionSummary
-                    expandIcon={<ExpandMoreIcon />}
-                    aria-controls="panel1c-content"
-                    id="panel1c-header"
-                >
-                    <div className={classes.column}>
-                        <Typography className={classes.heading}>{vaccine.name}</Typography>
+        <div className={classes.paperMainDiv}>
+            <Paper variant="outlined" className="wrapper" style={{backgroundColor: "#333333"}}>
+                <div className="paper-left">
+                    <div>
+                        <h1>{vaccine.name} <VerifiedUserRoundedIcon style={{color: "#009E60"}}/></h1>
+                    </div>
+                    <hr/>
+                    <br/>
+                    <div className="paper-left_vaccine_head">
+                        <h3>Vaccine Name</h3>
+                        <p>{vaccine.vaccine}</p>
+                    </div>
+
+                    <div className="paper-left_content">
+                        <h3>address</h3>
+                        <p>{vaccine.block_name}, {vaccine.district_name}, {vaccine.state_name}</p>
+                    </div>
+                    <div className="paper-left_content">
+                        <h3>pincode</h3>
+                        <p>{vaccine.pincode}</p>
                     </div>
-                    <div className={classes.column}>
-                        <Typography className={classes.secondaryHeading}>{vaccine.district_name}</Typography>
+                    <div className="paper-left_time">
+                        <div className="open-time time">
+                            Opening Time: {vaccine.from}
+                        </div>
+                        <div className="close-time time">
+                            Closing Time: {vaccine.to}
+                        </div>
                     </div>
-                    <div className={classes.column}>
-                        <Typography className={classes.secondaryHeading}>{vaccine.pincode}</Typography>
+                </div>
+                <div className="paper-right">
+                    <div className="paper-right_Badges">
+                        <div className="paper-right_capacity">
+                            <Badge color="secondary" badgeContent={vaccine.available_capacity}>
+                                <h5>Available Capacity</h5> <HealingIcon className="healing_icon"/>
+                            </Badge>
+                        </div>
+                        <div>
+                            <p><span>Date:</span>{vaccine.date}</p>
+                        </div>
                     </div>
-                    <div className={classes.column}>
-                        <Badge color="primary" badgeContent={vaccine.available_capacity}>
-                            <Typography className={classes.secondaryHeading}>Shots Available</Typography>
-                        </Badge>
+                    <div className="paper-right_age">
+                        <div className="age_text">
+                             <h3>Minimum Age</h3>
+                        </div>
+                        <div className="age_content">
+                            <p>{vaccine.min_age_limit} years</p>
+                        </div>
                     </div>
-                </AccordionSummary>
-                <AccordionDetails className={classes.details}>
-                    <div className={classes.column} />
-                    <div className={classes.column}>
-                        Fee Type: <Chip label={vaccine.fee_type} onDelete={() => {}} />
+                    <div className="paper-right_age">
+                        <div className="age_text">
+                             <h3>Minimum Fare(₹)</h3>
+                        </div>
+                        <div className="age_content">
+                            <p>{vaccine.fee_type} </p>
+                        </div>
                     </div>
-                    <div className={clsx(classes.column, classes.helper)}>
-                        <Typography variant="caption">
-                            Vaccine Type
-                            <br />
-                            <strong>{vaccine.vaccine}</strong>
-                        </Typography>
+                    <div className="paper-right_slots">
+                        <h3>Slots Available</h3>
+                        <p>{vaccine.slots.join(",")}</p>
                     </div>
-                </AccordionDetails>
-                <Divider />
-            </Accordion>
+                </div>
+            </Paper>
         </div>
     )
 }