diff --git a/src/card.js b/src/card.js
index 3dc0a62..ec21cbc 100644
--- a/src/card.js
+++ b/src/card.js
@@ -1,29 +1,80 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import Card from '@material-ui/core/Card';
+import Divider from '@material-ui/core/Divider';
 import CardActionArea from '@material-ui/core/CardActionArea';
 // import CardActions from '@material-ui/core/CardActions';
 import CardContent from '@material-ui/core/CardContent';
 // import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
-// import { MdShoppingCart } from 'react-icons/md';
-// import { GiMilkCarton } from 'react-icons/gi'
-// import { FaMobileAlt } from 'react-icons/fa'
+import { MdShoppingCart } from 'react-icons/md';
+import { GiMilkCarton } from 'react-icons/gi'
+import { FaMobileAlt } from 'react-icons/fa'
+import Container from '@material-ui/core/Container';
+import Tooltip from '@material-ui/core/Tooltip';
+import EventIcon from '@material-ui/icons/Event';
+import ScheduleIcon from '@material-ui/icons/Schedule';
+import CreateIcon from '@material-ui/icons/Create';
+import DeleteIcon from '@material-ui/icons/Delete';
 
 const useStyles = makeStyles({
   root: {
-    maxWidth: 345,
+    width: "100%",
+    height: 225,
+    padding: "20px 0"
   },
   media: {
     height: 140,
   },
 });
 
+const getIcon = (type) => {
+  if(type===" Clothing") {
+    return <MdShoppingCart style={{fontSize: "50px"}} />;
+  } else if(type===" Eateries") {
+    return <GiMilkCarton style={{fontSize: "50px"}} />;
+  } else {
+    return <FaMobileAlt style={{fontSize: "50px"}} />;
+  }
+}
+
 export default function MediaCard(props) {
   const classes = useStyles();
   return (
-    <Card className={classes.root} id="carde" style={{backgroundColor:"#80ffaa"}}>
-      <CardActionArea>
+    <Card className={classes.root} id="carde" style={{backgroundColor:"#ebe6e6"}}>
+      <Container>
+        <div style={{display: "flex"}}>
+          <div style={{width: "20%", float:"left"}}>
+          <Tooltip title={props.type}>{getIcon(props.type)}</Tooltip>
+          </div>
+          <div style={{width: "80%"}}>
+            <div id="cardName">
+              {props.name}
+            </div>
+            <div id="cardAmount">
+              &#8377; {props.amount}
+            </div>
+            {/* <div style={{display: "flex", justifyContent: "space-between"}}> */}
+              <div id="cardDate">
+                <EventIcon />&nbsp;{props.date}
+              </div>
+              <div id="cardTime">
+                <ScheduleIcon />&nbsp;{props.time}
+              </div>
+            {/* </div> */}
+          </div>
+        </div>
+        <Divider style={{margin: "20px 0"}} />
+        {/* <div style={{display: "flex", justifyContent: "space-between"}}>
+          <Tooltip title="Edit">
+          <CreateIcon style={{fontSize: "30px", cursor: "pointer"}} />
+          </Tooltip>
+          <Tooltip title="Delete">
+          <DeleteIcon style={{fontSize: "30px", cursor: "pointer"}} />
+          </Tooltip>
+        </div> */}
+      </Container>
+      {/* <CardActionArea>
         <CardContent>
           <Typography gutterBottom variant="h5" component="h2">
             Expense Name: <span id="expensename">{props.name}</span>
@@ -41,7 +92,7 @@ export default function MediaCard(props) {
             Time: {props.time}
           </Typography>
         </CardContent>
-      </CardActionArea>
+      </CardActionArea> */}
     </Card>
   );
 }
diff --git a/src/dialog.js b/src/dialog.js
index 5c62bb4..e5c06c0 100644
--- a/src/dialog.js
+++ b/src/dialog.js
@@ -18,6 +18,7 @@ import Select from '@material-ui/core/Select';
 import { makeStyles } from '@material-ui/core/styles';
 import Card from './card'
 import NavBar from './appbar';
+import { Grid } from '@material-ui/core';
 
 const useStyles = makeStyles((theme) => ({
     formControl: {
@@ -82,6 +83,7 @@ export default function FormDialog() {
     element.type=props.type;
     element.date = d.getDate() + " " + n + "," + " " + d.getFullYear();
     element.time = d.toLocaleTimeString();
+    element.key = parseInt(count)
     total=parseInt(total)+parseInt(props.amount);
     expenses.push((element));
     localStorage.setItem("expenses",JSON.stringify(expenses));
@@ -103,8 +105,9 @@ export default function FormDialog() {
     var temp1=[];
     for(let i=0;i<expenses.length;i++)
     {
-        temp1.push(<Card name={expenses[i].name} amount={expenses[i].amount} type={expenses[i].type} date={expenses[i].date} time = {expenses[i].time} col={expenses[i].col} />);
+        temp1.push(<Card name={expenses[i].name} amount={expenses[i].amount} type={expenses[i].type} date={expenses[i].date} time = {expenses[i].time} col={expenses[i].col} key={expenses[i].key} />);
     }
+    console.log(temp1)
   };
 
   const classes = useStyles();
@@ -116,7 +119,18 @@ export default function FormDialog() {
   return (
     <div>
       <NavBar total={total1} />
-        <div id="cards" class="cards">{temp1}</div>
+        {/* <div id="cards" class="cards">{temp1}</div> */}
+        <Grid container spacing={3} alignItems="center" style={{marginTop:"70px", padding: "0 30px", boxSizing: "border-box", width: "100%"}}>
+          {
+            temp1.map(card => {
+              return (
+                <Grid item xs={12} sm={6} md={3} style={{display: "flex", justifyContent: "center"}}>
+                  {card}
+                </Grid>
+              )
+            })
+          }
+        </Grid>
         
         <div id="create" onClick={handleClickOpen}>
                 <Fab color="primary" aria-label="add">
diff --git a/src/index.css b/src/index.css
index 05b1439..bcd0fd2 100644
--- a/src/index.css
+++ b/src/index.css
@@ -40,4 +40,28 @@ code {
   float: left;
   display: inline-block;
   margin: 4px;
+}
+
+#cardName {
+  font-size: 35px;
+  font-weight: bold;
+}
+
+#cardAmount {
+  margin-top: 15px;
+  font-size: 20px;
+}
+
+#cardTime {
+  margin-top: 15px;
+  font-size: 20px;
+  display: flex;
+  align-items: center;
+}
+
+#cardDate {
+  margin-top: 15px;
+  font-size: 20px;
+  display: flex;
+  align-items: center;
 }
\ No newline at end of file