diff --git a/frontend/dashboard/src/pages/Profile/Index.tsx b/frontend/dashboard/src/pages/Profile/Index.tsx
index 2603c796..2a976ae0 100644
--- a/frontend/dashboard/src/pages/Profile/Index.tsx
+++ b/frontend/dashboard/src/pages/Profile/Index.tsx
@@ -226,93 +226,102 @@ export default function List() {
           </Card>
         </Box>
         <Stack spacing={3}>
-          <Card sx={{ p: 3 }}>
-            <Grid sx={{ mt: 5, ml: 5, mb: 2 }}>
-              <Box
-                sx={{
-                  display: 'flex',
-                  pb: 2,
-                  borderBottom: '5px solid',
-                }}
-              >
-                <Stack spacing={2} justifyContent="center" alignItems="center" direction="row">
-                  <AccountBoxIcon />
-                  <Typography variant="h4" sx={{ ml: 1 }}>
-                    Profil
-                  </Typography>
-                </Stack>
-              </Box>
-            </Grid>
-            <Box sx={{ p: 5 }}>
-              <Grid>
-                <Grid item xs={12} md={12}>
-                  <LabelStyle>
-                    <PersonIcon /> ID
-                  </LabelStyle>
-                  <Title>{user?.id ? user?.id : '-'}</Title>
-                </Grid>
-                <Grid item xs={12} md={12}>
-                  <LabelStyle>
-                    <BadgeIcon /> Nama
-                  </LabelStyle>
-                  <Title>Perdi</Title>
-                </Grid>
-                <Grid item xs={12} md={12}>
-                  <LabelStyle>
-                    <CallIcon /> Telepon
-                  </LabelStyle>
-                  <Title>2131231231</Title>
-                </Grid>
-                <Grid item xs={12} md={12}>
-                  <LabelStyle>
-                    <MailIcon /> Email
-                  </LabelStyle>
-                  <Title>{user?.email ? user?.email : '-'}</Title>
-                </Grid>
-              </Grid>
-            </Box>
-          </Card>
-
-          <Card sx={{ p: 3 }}>
-            <Grid sx={{ mt: 5, ml: 5, mb: 2 }}>
-              <Box
-                sx={{
-                  display: 'flex',
-                  pb: 2,
-                  borderBottom: '5px solid',
-                }}
-              >
-                <Stack spacing={2} justifyContent="center" alignItems="center" direction="row">
-                  <LockIcon />
-                  <Typography variant="h4" sx={{ ml: 1 }}>
-                    Keamanan
-                  </Typography>
-                </Stack>
-              </Box>
-            </Grid>
-            <Box sx={{ p: 5 }}>
-              <Grid item xs={12} md={12}>
-                <div style={{ display: 'flex', justifyContent: 'Center' }}>
-                  <Button
-                    variant="contained"
-                    sx={ButtonStyle}
-                    startIcon={<KeyIcon />}
-                    onClick={() => {
-                      clickHandler('edit');
-                      setEdit(user.id);
+          <Grid container spacing={3}>
+            <Grid item xs={12} md={6}>
+              <Box sx={{ p: 3 }}>
+                <Grid sx={{ mt: 5, ml: 5, mb: 2 }}>
+                  <Box
+                    sx={{
+                      display: 'flex',
+                      pb: 2,
+                      borderBottom: '5px solid',
                     }}
                   >
-                    Ubah Kata Sandi
-                  </Button>
-                </div>
-              </Grid>
-            </Box>
-          </Card>
-          <div style={{ display: 'flex', justifyContent: 'Center', color: '#CB3A31' }}>
-            <MenuItem sx={{ m: 5 }} onClick={handleLogout}>
-              <LogoutTwoToneIcon /> Logout
-            </MenuItem>
-          </div>
+                    <Stack spacing={2} justifyContent="center" alignItems="center" direction="row">
+                      <AccountBoxIcon />
+                      <Typography variant="h4" sx={{ ml: 1 }}>
+                        Profil
+                      </Typography>
+                    </Stack>
+                  </Box>
+                </Grid>
+                <Box sx={{ p: 5 }}>
+                  <Grid container spacing={3}>
+                    <Grid item xs={12} md={6}>
+                      <Grid item xs={12} md={12}>
+                        <LabelStyle>
+                          <PersonIcon /> ID
+                        </LabelStyle>
+                        <Title>{user?.id ? user?.id : '-'}</Title>
+                      </Grid>
+                      <Grid item xs={12} md={12}>
+                        <LabelStyle>
+                          <BadgeIcon /> Nama
+                        </LabelStyle>
+                        <Title>Perdi</Title>
+                      </Grid>
+                    </Grid>
+                    <Grid item xs={12} md={6}>
+                      <Grid item xs={12} md={12}>
+                        <LabelStyle>
+                          <CallIcon /> Telepon
+                        </LabelStyle>
+                        <Title>2131231231</Title>
+                      </Grid>
+                      <Grid item xs={12} md={12}>
+                        <LabelStyle>
+                          <MailIcon /> Email
+                        </LabelStyle>
+                        <Title>{user?.email ? user?.email : '-'}</Title>
+                      </Grid>
+                    </Grid>
+                  </Grid>
+                </Box>
+              </Box>
+            </Grid>
+            <Grid item xs={12} md={6}>
+              <Box sx={{ p: 3 }}>
+                <Grid sx={{ mt: 5, ml: 5, mb: 2 }}>
+                  <Box
+                    sx={{
+                      display: 'flex',
+                      pb: 2,
+                      borderBottom: '5px solid',
+                    }}
+                  >
+                    <Stack spacing={2} justifyContent="center" alignItems="center" direction="row">
+                      <LockIcon />
+                      <Typography variant="h4" sx={{ ml: 1 }}>
+                        Keamanan
+                      </Typography>
+                    </Stack>
+                  </Box>
+                </Grid>
+                <Box sx={{ p: 5 }}>
+                  <Grid item xs={12} md={12}>
+                    <div style={{ display: 'flex', justifyContent: 'Center' }}>
+                      <Button
+                        variant="contained"
+                        sx={ButtonStyle}
+                        startIcon={<KeyIcon />}
+                        onClick={() => {
+                          clickHandler('edit');
+                          setEdit(user.id);
+                        }}
+                      >
+                        Ubah Kata Sandi
+                      </Button>
+                    </div>
+                  </Grid>
+                </Box>
+              </Box>
+              <Box sx={{ p: 3 }} style={{ display: 'flex', justifyContent: 'center' }}>
+                <Button onClick={handleLogout} variant="outlined" color="error">
+                  <LogoutTwoToneIcon /> Logout
+                </Button>
+              </Box>
+            </Grid>
+          </Grid>
           {/* </Box>
             </React.Fragment> */}
         </Stack>