diff --git a/src/components/settings.js b/src/components/settings.js
index 1243f36..a02d92e 100644
--- a/src/components/settings.js
+++ b/src/components/settings.js
@@ -1,13 +1,5 @@
-import React, { useEffect, useState } from "react";
-import {
-  Drawer,
-  Divider,
-  TextField,
-  Typography,
-  Box,
-  Stack,
-  Switch,
-} from "@mui/material";
+import React from 'react';
+import { Drawer, TextField, Typography, Stack, Switch } from '@mui/material';
 
 function Settings({
   open,
@@ -23,7 +15,7 @@ function Settings({
 
   const handleTimeFormatChange = (event) => {
     const value = event.target.checked;
-    const format = value ? "24" : "12";
+    const format = value ? '24' : '12';
     changeTimeFormat(format);
   };
 
@@ -33,51 +25,45 @@ function Settings({
         anchor="right"
         PaperProps={{
           sx: {
-            width: "25%",
+            width: '25%',
           },
         }}
         open={open}
         onClose={closeModal}
         className="p-3"
       >
-        <Box sx={{ paddingX: 1 }}>
-          <Typography align="center" variant="h6">
-            Your Name
-          </Typography>
-          <Divider
-            sx={{
-              marginBottom: 2,
-            }}
-          />
-          <TextField
-            color="secondary"
-            sx={{ width: "100%" }}
-            value={username}
-            onChange={handleNameChange}
-          />
-          <Typography align="center" variant="h6">
-            Time Format
-          </Typography>
-          <Divider
-            sx={{
-              marginBottom: 2,
-            }}
-          />
-          <Stack
-            direction="row"
-            spacing={1}
-            alignItems="center"
-            justifyContent="center"
-          >
-            <Typography>12 Hour</Typography>
-            <Switch
-              size="large"
-              checked={checkedFormat}
-              onChange={handleTimeFormatChange}
+        <div className="bg-blue-200 h-full">
+          <div className="h-10 p-2 text-center text-xl tracking-wide font-semibold">
+            Enter your name
+          </div>
+          <div className="px-5">
+            <TextField
+              color="info"
+              sx={{ width: '100%' }}
+              value={username}
+              onChange={handleNameChange}
             />
-            <Typography>24 Hour</Typography>
-          </Stack>
-        </Box>
+          </div>
+          <div className="h-10 p-2 text-center text-xl text-center text-xl tracking-wide font-semibold">
+            Time Format
+          </div>
+          <div className="h-10">
+            <Stack
+              direction="row"
+              spacing={1}
+              alignItems="center"
+              justifyContent="center"
+            >
+              <Typography>12 Hour</Typography>
+              <Switch
+                size="large"
+                checked={checkedFormat}
+                onChange={handleTimeFormatChange}
+              />
+              <Typography>24 Hour</Typography>
+            </Stack>
+          </div>
+        </div>
       </Drawer>
     </React.Fragment>
   );