diff --git a/.prettierrc b/.prettierrc
index 794bbbd..5189c3a 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -5,7 +5,7 @@
     "endOfLine": "lf",
     "htmlWhitespaceSensitivity": "css",
     "jsxBracketSameLine": false,
-    "jsxSingleQuote": true,
+    "jsxSingleQuote": false,
     "printWidth": 120,
     "proseWrap": "preserve",
     "quoteProps": "consistent",
diff --git a/client/public/images/cry.webp b/client/public/images/cry.webp
deleted file mode 100644
index 1c0be82..0000000
Binary files a/client/public/images/cry.webp and /dev/null differ
diff --git a/client/public/images/logo.gif b/client/public/images/logo.gif
new file mode 100644
index 0000000..45eb0d9
Binary files /dev/null and b/client/public/images/logo.gif differ
diff --git a/client/public/images/logo.png b/client/public/images/logo.png
deleted file mode 100644
index 3f8f898..0000000
Binary files a/client/public/images/logo.png and /dev/null differ
diff --git a/client/public/images/logo.xcf b/client/public/images/logo.xcf
deleted file mode 100644
index 7fd220a..0000000
Binary files a/client/public/images/logo.xcf and /dev/null differ
diff --git a/client/src/components/Generic/HeaderLogo.tsx b/client/src/components/Generic/HeaderLogo.tsx
new file mode 100644
index 0000000..3702651
--- /dev/null
+++ b/client/src/components/Generic/HeaderLogo.tsx
@@ -0,0 +1,33 @@
+import { Box, Typography } from "@mui/material";
+import Image from "next/image";
+import { FC } from "react";
+
+interface HeaderLogoProps {
+  sx?: any;
+}
+
+export const HeaderLogo: FC<HeaderLogoProps> = ({ sx }) => {
+  return (
+    <Box
+      alignItems="center"
+      display="flex"
+      sx={sx}
+    >
+      <Image
+        alt="Logo"
+        height={40}
+        priority
+        src="images/logo.gif"
+        width={40}
+      />
+      <Typography
+        sx={{
+          ml: 1.5,
+        }}
+        variant="h6"
+      >
+        <b>CSPJ Application</b>
+      </Typography>
+    </Box>
+  );
+};
diff --git a/client/src/components/HeaderBar/NavigationButtons.tsx b/client/src/components/HeaderBar/NavigationButtons.tsx
index fd2528e..ea12b95 100644
--- a/client/src/components/HeaderBar/NavigationButtons.tsx
+++ b/client/src/components/HeaderBar/NavigationButtons.tsx
@@ -9,14 +9,6 @@ export const NavigationButtons = () => {
   // atoms
   const [route, setRoute] = useAtom(routeAtom);
 
-  const goBack = () => {
-    // TODO
-  };
-
-  const goForward = () => {
-    // TODO
-  };
-
   const goHome = () => {
     setRoute("home");
   };
@@ -29,29 +21,12 @@ export const NavigationButtons = () => {
         flexDirection: "row",
       }}
     >
-      <Stack
-        direction='row'
-        spacing={1}
+      <IconButton
+        onClick={goHome}
+        size="small"
       >
-        <IconButton
-          onClick={goBack}
-          size='small'
-        >
-          <ArrowBack fontSize='inherit' />
-        </IconButton>
-        <IconButton
-          onClick={goForward}
-          size='small'
-        >
-          <ArrowForward fontSize='inherit' />
-        </IconButton>
-        <IconButton
-          onClick={goHome}
-          size='small'
-        >
-          <HomeOutlined fontSize='inherit' />
-        </IconButton>
-      </Stack>
+        <HomeOutlined fontSize="inherit" />
+      </IconButton>
     </Box>
   );
 };
diff --git a/client/src/components/Pages/Home/AttackItem.tsx b/client/src/components/Pages/Home/AttackItem.tsx
index 31773a8..edd9aac 100644
--- a/client/src/components/Pages/Home/AttackItem.tsx
+++ b/client/src/components/Pages/Home/AttackItem.tsx
@@ -19,9 +19,10 @@ export const AttackItem: FC<AttackItemProps> = ({ attackName, routeTarget }) =>
     <Card
       sx={{
         backgroundColor: theme.palette.background.default,
+        border: "solid 1px grey",
         borderRadius: "8px",
       }}
-      variant='outlined'
+      variant="outlined"
     >
       <CardActionArea
         onClick={() => {
@@ -29,7 +30,7 @@ export const AttackItem: FC<AttackItemProps> = ({ attackName, routeTarget }) =>
         }}
       >
         <CardContent>
-          <Typography component='div'>{attackName}</Typography>
+          <Typography component="div">{attackName}</Typography>
         </CardContent>
       </CardActionArea>
     </Card>
diff --git a/client/src/components/Pages/Home/Home.tsx b/client/src/components/Pages/Home/Home.tsx
index 8e3c3b3..930898a 100644
--- a/client/src/components/Pages/Home/Home.tsx
+++ b/client/src/components/Pages/Home/Home.tsx
@@ -25,12 +25,17 @@ export const Home = () => {
             sx={{
               mb: 2,
             }}
-            variant='h3'
+            variant="h3"
           >
             CSPJ Application Attack Simulator
           </Typography>
         </Box>
-        <Button href='https://github.com/cspj-nyp/cspj-application'>Need help getting started?</Button>
+        <Button
+          href="https://github.com/cspj-nyp/cspj-application"
+          sx={{ mb: 2 }}
+        >
+          Need help getting started?
+        </Button>
       </Box>
       <Grid2
         container
@@ -38,14 +43,14 @@ export const Home = () => {
       >
         <Grid2 size={3}>
           <AttackItem
-            attackName='SQL Injection'
-            routeTarget='sql_injection'
+            attackName="SQL Injection"
+            routeTarget="sql_injection"
           />
         </Grid2>
         <Grid2 size={3}>
           <AttackItem
-            attackName='Cross Site Scripting'
-            routeTarget='xss'
+            attackName="Cross Site Scripting"
+            routeTarget="xss"
           />
         </Grid2>
       </Grid2>
diff --git a/client/src/components/Pages/Shared/AttackPage.tsx b/client/src/components/Pages/Shared/AttackPage.tsx
deleted file mode 100644
index 054d762..0000000
--- a/client/src/components/Pages/Shared/AttackPage.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Box } from "@mui/material";
-
-export const AttackPage = ({}) => {
-  return (
-    <Box
-      sx={{
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "start",
-      }}
-    >
-      asdf
-    </Box>
-  );
-};
diff --git a/client/src/components/Pages/SqlInjection/SqlInjection.tsx b/client/src/components/Pages/SqlInjection/SqlInjection.tsx
index f871058..bb42469 100644
--- a/client/src/components/Pages/SqlInjection/SqlInjection.tsx
+++ b/client/src/components/Pages/SqlInjection/SqlInjection.tsx
@@ -1,21 +1,159 @@
-import { Box, Button } from "@mui/material";
+import { Box, LinearProgress, TextField, Typography } from "@mui/material";
+import { useState } from "react";
 import { useNotification } from "../../../contexts/NotificationContext";
+import { HeaderLogo } from "../../Generic/HeaderLogo";
 
 export const SqlInjection = () => {
   // contexts
   const { openNotification } = useNotification();
 
+  // states
+  const [passwordValueRaw, setPasswordValueRaw] = useState<string>("");
+  const [rePasswordValueRaw, setRePasswordValueRaw] = useState<string>("");
+  const [passwordErrorMsg, setPasswordErrorMsg] = useState<string>("");
+  // password strength meter
+  const [passwordStrength, setPasswordStrength] = useState(0);
+  const [passwordStrengthColor, setPasswordStrengthColor] = useState<"primary" | "error" | "warning" | "success">(
+    "primary",
+  );
+  const [PasswordStrengthInfo, setPasswordStrengthInfo] = useState("Enter a password");
+
+  let newPasswordStrengthInfo = "Enter a password";
+
+  const calculatePasswordStrength = (passwordValueRaw: string) => {
+    let strengthPoints = 0;
+
+    // logic for calculating password strength
+    if (passwordValueRaw.length >= 8 && passwordValueRaw.length <= 128) {
+      strengthPoints += 20;
+    }
+    if (passwordValueRaw.match(/[a-z]/g)) {
+      strengthPoints += 20;
+    }
+    if (passwordValueRaw.match(/[A-Z]/g)) {
+      strengthPoints += 20;
+    }
+    if (passwordValueRaw.match(/[0-9]/g)) {
+      strengthPoints += 20;
+    }
+    if (passwordValueRaw.match(/[^a-zA-Z\d]/g)) {
+      strengthPoints += 20;
+    }
+
+    // calculate strengthPoints as a percentage
+    strengthPoints = Math.min(strengthPoints, 100);
+
+    // logic for changing color of progress bar
+    if (strengthPoints === 0) {
+      setPasswordStrengthColor("primary");
+      newPasswordStrengthInfo = "Enter a password";
+    } else if (strengthPoints <= 20) {
+      setPasswordStrengthColor("error");
+      newPasswordStrengthInfo = "Password strength is weak";
+    } else if (strengthPoints <= 40) {
+      setPasswordStrengthColor("warning");
+      newPasswordStrengthInfo = "Password strength is decent";
+    } else if (strengthPoints <= 60) {
+      setPasswordStrengthColor("warning");
+      newPasswordStrengthInfo = "Password strength is decent";
+    } else if (strengthPoints <= 80) {
+      setPasswordStrengthColor("success");
+      newPasswordStrengthInfo = "Password strength is good";
+    } else if (strengthPoints <= 100) {
+      setPasswordStrengthColor("success");
+      newPasswordStrengthInfo = "Password strength is strong";
+    }
+
+    // update state
+    setPasswordStrength(strengthPoints);
+    setPasswordStrengthInfo(newPasswordStrengthInfo);
+  };
+
   return (
-    <Box>
-      <h1>SQL Injection</h1>
-      <p>SQL Injection is a code injection technique</p>
-      <Button
-        onClick={() => {
-          openNotification("deez nuts", "", 3000);
+    <Box
+      sx={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        height: "100vh",
+      }}
+    >
+      <Box
+        sx={{
+          border: "solid 1px grey",
+          borderRadius: 2,
+          p: 4,
+          minWidth: "300px",
+          maxWidth: "400px",
         }}
       >
-        clicky
-      </Button>
+        <Box
+          alignItems="center"
+          display="flex"
+          flexDirection="row"
+          sx={{
+            mb: 2,
+          }}
+        >
+          <HeaderLogo />
+          <Typography
+            sx={{
+              color: "grey",
+            }}
+            variant="h6"
+          >
+            &nbsp;Login
+          </Typography>
+        </Box>
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+          }}
+        >
+          <TextField
+            error={Boolean(passwordErrorMsg)}
+            fullWidth
+            helperText={Boolean(passwordErrorMsg) ? passwordErrorMsg : ""}
+            id="email"
+            label="Email"
+            size="small"
+            type="email"
+            // value={value}
+            sx={{ mb: 2 }}
+            variant="outlined"
+          />
+          <TextField
+            error={Boolean(passwordErrorMsg)}
+            fullWidth
+            helperText={Boolean(passwordErrorMsg) ? passwordErrorMsg : ""}
+            id="password"
+            label="Password"
+            size="small"
+            type="password"
+            // value={value}
+            sx={{ mb: 2 }}
+            variant="outlined"
+          />
+          <TextField
+            error={Boolean(passwordErrorMsg)}
+            fullWidth
+            helperText={Boolean(passwordErrorMsg) ? passwordErrorMsg : ""}
+            id="re-password"
+            label="Re-enter password"
+            size="small"
+            type="password"
+            // value={value}
+            sx={{ mb: 2 }}
+            variant="outlined"
+          />
+          <LinearProgress
+            color={passwordStrengthColor}
+            value={passwordStrength}
+            variant="determinate"
+          />
+        </Box>
+      </Box>
     </Box>
   );
 };
diff --git a/client/src/pages/index.tsx b/client/src/pages/index.tsx
index a651a8c..da1764e 100644
--- a/client/src/pages/index.tsx
+++ b/client/src/pages/index.tsx
@@ -5,7 +5,6 @@ import { Home } from "../components/Pages/Home/Home";
 import { SqlInjection } from "../components/Pages/SqlInjection/SqlInjection";
 import { Xss } from "../components/Pages/Xss/Xss";
 import { routeAtom } from "../lib/jotai";
-import { AttackPage } from "../components/Pages/Shared/AttackPage";
 
 export default function Index() {
   // contexts
@@ -23,9 +22,6 @@ export default function Index() {
         return <SqlInjection />;
       case "xss":
         return <Xss />;
-      // TODO: remove testing when done
-      case "testing":
-        return <AttackPage />;
       default:
         return <Home />;
     }
@@ -42,7 +38,7 @@ export default function Index() {
     >
       <HeaderBar />
       <Container
-        maxWidth='lg'
+        maxWidth="lg"
         sx={{
           display: "flex",
           flexDirection: "column",