diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx
index 8c405c8..6e6d431 100644
--- a/src/components/Dashboard.tsx
+++ b/src/components/Dashboard.tsx
@@ -1,62 +1,54 @@
-import { Box, Card, CardContent, Grid, Paper, Typography, styled } from "@mui/material";
-import React, { useEffect } from "react";
-import { getLinkedProjectList, useLinkedProjectData } from "../APIs/ProjectScreenAPIs/getLinkedProject";
+import React from "react";
+import {
+  Box,
+  Grid,
+  Paper,
+  Typography,
+  styled,
+} from "@mui/material";
 import { useUnlinkedProjectData } from "../APIs/ProjectScreenAPIs/getUnlinkedProject";
+import { useLinkedProjectData } from "../APIs/ProjectScreenAPIs/getLinkedProject";
 
-export default function Dashboard(){
+const DashboardItem = styled(Paper)(({ theme }) => ({
+  backgroundColor: "#1e1e1e",
+  color: "white",
+  padding: theme.spacing(5),
+  textAlign: "left",
+}));
 
-  const [linkedProjectData, setLinkedProjectData] = React.useState()
-  const { data: getLinkedProjectList } = useLinkedProjectData('');
-  const { data: getUnlinkedProjectList } = useUnlinkedProjectData('');
+const Dashboard = () => {
+  const { data: unlinkedProjects } = useUnlinkedProjectData("");
+  const { data: linkedProjects } = useLinkedProjectData("");
 
-  const Item = styled(Paper)(({ theme }) => ({
-    backgroundColor: '#1e1e1e',
-    color:"white",
-    padding: theme.spacing(5),
-    textAlign: 'left',
-   
-  }));
+  return (
+    <Paper square className="app-background app-screen-heights" sx={{}}>
+      <Box sx={{ flexGrow: 1, marginLeft: "1%",marginRight:'1%', padding: "16px" }}>
+        <Grid container spacing={3} sx={{ flexDirection: { xs: 'column', md: 'row' } }}>
+          {renderDashboardItem("New Projects That needs Contract Linkage", unlinkedProjects, "#C00243")}
+          {renderDashboardItem("Projects That needs To Be Published", linkedProjects, "#E1AB1A")}
+        </Grid>
+      </Box>
+    </Paper>
+  );
+};
 
-    return (
-        <Paper square className="app-background app-screen-heights">
-              <Box sx={{ flexGrow: 1, margin:'1%'}} >
-                <Grid container spacing={3} >
-                    <Grid item xs={6} sx={{marginTop:'6%'}}>
-                    <Item>
-                        <Grid container spacing={2} sx={{flexDirection:'row', flexWrap:'nowrap'}}>
-                        <Grid item>
-                            <Typography component="h2" variant="h2" style={{color: '#C00243', fontWeight: 'bold'}}>
-                                {getUnlinkedProjectList && getUnlinkedProjectList.length}
-                            </Typography>
-                            </Grid>
-                            <Grid item>
-                            <Typography component="h6" variant="h6" style={{color: '#C00243', margin: '3%'}}>
-                                New Projects That needs Contract Linkage
-                            </Typography>
-                            </Grid>
-                        </Grid>
-                    </Item>
-                    </Grid>
-                    <Grid item xs={6} sx={{marginTop:'6%'}}>
-                    <Item>
-                    <Grid container sx={{flexDirection:'row', flexWrap:'nowrap'}}>
-                            <Grid item>
-                            <Typography component="h2" variant="h2" style={{color: '#E1AB1A', fontWeight: 'bold'}}>
-                                {getLinkedProjectList && getLinkedProjectList.length}
-                            </Typography>
-                            </Grid>
-                            <Grid item>
-                            <Typography component="h6" variant="h6" style={{color: '#E1AB1A', margin: '3%'}}>
-                                Projects That needs To Be Published
-                            </Typography>
-                            </Grid>
-                        </Grid>
-                    </Item>
-                    </Grid>
-                   
-                </Grid>
-                </Box>
-        </Paper>
-         
-    )
-}
\ No newline at end of file
+const renderDashboardItem = (label:any, projects:any, color:any) => (
+  <Grid item xs={12} md={6} sx={{ marginTop: "16px" }}>
+    <DashboardItem>
+      <Grid container spacing={2} sx={{ flexDirection: "row", flexWrap: "nowrap" }}>
+        <Grid item>
+          <Typography component="h2" variant="h2" sx={{ color, fontWeight: "bold" }}>
+            {projects && projects.length}
+          </Typography>
+        </Grid>
+        <Grid item>
+          <Typography component="h6" variant="h6" sx={{ color, margin: "3%" }}>
+            {`${label}`}
+          </Typography>
+        </Grid>
+      </Grid>
+    </DashboardItem>
+  </Grid>
+);
+
+export default Dashboard;