diff --git a/client/src/components/Badges.jsx b/client/src/components/Badges.jsx
index c63f077..91aae1b 100644
--- a/client/src/components/Badges.jsx
+++ b/client/src/components/Badges.jsx
@@ -1,5 +1,6 @@
 import WorkspacePremiumIcon from '@mui/icons-material/WorkspacePremium';
 import { Grid, Tooltip, Typography } from '@mui/material';
+import { Stack } from '@material-ui/core';
 
 function Badge({
     title = 'Good Question',
@@ -31,16 +32,20 @@ export default function Badges({ badges: { obtained, unobtained } }) {
     return (
         <>
             <Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
-                <Grid item xs={2} sm={4} md={4}>
-                    <Typography variant='h5'>Obtained Badges</Typography>
-                </Grid>
-                {badgesGrid(obtained)}
+                <Stack direction="row" spacing={2}>
+                    <Grid item xs={2} sm={4} md={4}>
+                        <Typography variant='h5'>Obtained Badges</Typography>
+                    </Grid>
+                    {badgesGrid(obtained)}
+                </Stack>
             </Grid>
             <Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
-                <Grid item xs={2} sm={4} md={4}>
-                    <Typography variant='h5'>Unobtained Badges</Typography>
-                </Grid>
-                {badgesGrid(unobtained)}
+                <Stack direction="row" spacing={2}>
+                    <Grid item xs={2} sm={4} md={4}>
+                        <Typography variant='h5'>Unobtained Badges</Typography>
+                    </Grid>
+                    {badgesGrid(unobtained)}
+                </Stack>
             </Grid>
         </>
     );