src/pages/home/index.tsx

@@ -5,7 +5,7 @@ import {
   PersonOutline,
   Upload
 } from '@mui/icons-material'
-import { Box, Button, Typography } from '@mui/material'
+import { Box, Button, Tooltip, Typography } from '@mui/material'
 import { useNavigate } from 'react-router-dom'
 import { appPrivateRoutes } from '../../routes'
 import styles from './style.module.scss'
@@ -19,7 +19,16 @@ export const HomePage = () => {
         <Typography variant="h3" className={styles.title}>
           Sigits
         </Typography>
-        <Box className={styles.actionButtons}>
+        {/* This is for desktop view */}
+        <Box
+          className={styles.actionButtons}
+          sx={{
+            display: {
+              xs: 'none',
+              md: 'flex'
+            }
+          }}
+        >
           <Button
             variant="outlined"
             startIcon={<Upload />}
@@ -35,19 +44,71 @@ export const HomePage = () => {
             Create
           </Button>
         </Box>
+        {/* This is for mobile view */}
+        <Box
+          className={styles.actionButtons}
+          sx={{
+            display: {
+              xs: 'flex',
+              md: 'none'
+            }
+          }}
+        >
+          <Tooltip title="Upload" arrow>
+            <Button
+              variant="outlined"
+              onClick={() => navigate(appPrivateRoutes.sign)}
+            >
+              <Upload />
+            </Button>
+          </Tooltip>
+          <Tooltip title="Create" arrow>
+            <Button
+              variant="contained"
+              onClick={() => navigate(appPrivateRoutes.create)}
+            >
+              <Add />
+            </Button>
+          </Tooltip>
         </Box>
+      </Box>
+      <Box className={styles.submissions}>
         <PlaceHolder />
         <PlaceHolder />
         <PlaceHolder />
       </Box>
+    </Box>
   )
 }
 
 const PlaceHolder = () => {
   return (
-    <Box className={styles.submissions}>
+    <Box
-      <Box className={styles.item}>
+      className={styles.item}
-        <Box className={styles.titleBox}>
+      sx={{
+        flexDirection: {
+          xs: 'column',
+          md: 'row'
+        }
+      }}
+    >
+      <Box
+        className={styles.titleBox}
+        sx={{
+          flexDirection: {
+            xs: 'row',
+            md: 'column'
+          },
+          borderBottomLeftRadius: {
+            xs: 'initial',
+            md: 'inherit'
+          },
+          borderTopRightRadius: {
+            xs: 'inherit',
+            md: 'initial'
+          }
+        }}
+      >
         <Typography variant="body1" className={styles.titleBoxItem}>
           <Description />
           Title
@@ -76,6 +137,5 @@ const PlaceHolder = () => {
         </Box>
       </Box>
     </Box>
-    </Box>
   )
 }

src/pages/home/style.module.scss

@@ -15,7 +15,6 @@
     }
 
     .actionButtons {
-      display: flex;
       justify-content: center;
       align-items: center;
       gap: 10px;
@@ -25,6 +24,7 @@
   .submissions {
     display: flex;
     flex-direction: column;
+    gap: 10px;
 
     .item {
       display: flex;
@@ -33,10 +33,10 @@
 
       .titleBox {
         display: flex;
-        flex-direction: column;
         align-items: flex-start;
+        justify-content: space-between;
         padding: 10px;
-        background-color: #e7e2df99;
+        background-color: #cdc8c499;
         border-top-left-radius: inherit;
         border-bottom-left-radius: inherit;