diff --git a/README b/README
new file mode 100644
index 0000000..3a3a5a0
--- /dev/null
+++ b/README
@@ -0,0 +1,16 @@
+# cspj application
+
+## attacks
+
+1. sql injection
+2. xss
+3. command injection
+4. file inclusion attacks
+5. csrf
+6. directory traversal
+7. insecure deserialization
+8. session hijacking
+9. xml external entity injection
+10. sever side request forgery
+11. broken authentication and session management
+12. clickjacking
diff --git a/client/src/components/Generic/Layout.tsx b/client/src/components/Generic/Layout.tsx
index d2a28d9..a2b75d3 100644
--- a/client/src/components/Generic/Layout.tsx
+++ b/client/src/components/Generic/Layout.tsx
@@ -1,6 +1,18 @@
-import { Box, TextField, useTheme } from "@mui/material";
+import {
+  Box,
+  Button,
+  Container,
+  Grid2,
+  Input,
+  Switch,
+  TextField,
+  Typography,
+  useTheme,
+} from "@mui/material";
+
 import { HeaderBar } from "../HeaderBar/HeaderBar";
-import { LoadingButton } from "@mui/lab";
+import { AttackItem } from "../Home/AttackItem";
+import Link from "next/link";
 
 export const Layout = () => {
   // contexts
@@ -16,20 +28,89 @@ export const Layout = () => {
       }}
     >
       <HeaderBar />
-      <Box
+      <Container
+        maxWidth="lg"
         sx={{
+          justifyContent: "center",
           display: "flex",
+          flexDirection: "column",
           flexGrow: 1,
           overflow: "auto",
           p: 1,
         }}
       >
-        <Box>
-          {/* main content goes here buddy */}
-          <LoadingButton id="asdfbutton">asdf</LoadingButton>
-          <TextField id="asdf" name="asdf"></TextField>
+        {/* main content goes here buddy */}
+        <Box
+          sx={{
+            mb: 2,
+          }}
+        >
+          <Box
+            sx={{
+              alignItems: "center",
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "space-between",
+            }}
+          >
+            <Typography
+              sx={{
+                mb: 2,
+              }}
+              variant="h3"
+            >
+              CSPJ Application Attacks
+            </Typography>
+            <Box>
+              Secured version
+              <Switch />
+            </Box>
+          </Box>
+          <Box
+            sx={{
+              alignItems: "center",
+              display: "flex",
+              flexDirection: "row",
+            }}
+          >
+            {/* 
+            TODO: implmenent simple ping server to check if the user entered a valid backend url
+            debounce when typing
+            update textfield color based on the response
+            */}
+            <TextField fullWidth label="Paste your backend URL here" />
+          </Box>
+          <Button href="https://github.com/cspj-nyp/cspj-application">
+            Need help getting started?
+          </Button>
         </Box>
-      </Box>
+        <Grid2 container spacing={2}>
+          <Grid2 size={3}>
+            <AttackItem attackName="SQL Injection" />
+          </Grid2>
+          <Grid2 size={3}>
+            <AttackItem attackName="Cross Site Scripting" />
+          </Grid2>
+          <Grid2 size={3}>
+            <AttackItem attackName="Command Injection" />
+          </Grid2>
+          <Grid2 size={3}>
+            <AttackItem attackName="File Inclusion Attacks" />
+          </Grid2>
+          <Grid2 size={3}>
+            <AttackItem attackName="CSRF" />
+          </Grid2>
+          <Grid2 size={3}>
+            <AttackItem attackName="Directory Traversal" />
+          </Grid2>
+          <Grid2 size={3}>
+            <AttackItem attackName="Insecure Desrialization" />
+          </Grid2>
+          <Grid2 size={3}>
+            <AttackItem attackName="Session Hijacking" />
+          </Grid2>
+        </Grid2>
+      </Container>
     </Box>
   );
 };
diff --git a/client/src/components/Home/AttackItem.tsx b/client/src/components/Home/AttackItem.tsx
new file mode 100644
index 0000000..51b1500
--- /dev/null
+++ b/client/src/components/Home/AttackItem.tsx
@@ -0,0 +1,37 @@
+import {
+  Card,
+  CardActionArea,
+  CardContent,
+  Typography,
+  useTheme,
+} from "@mui/material";
+import { FC } from "react";
+
+type AttackItemProps = {
+  attackName: string;
+};
+
+export const AttackItem: FC<AttackItemProps> = ({ attackName }) => {
+  // contexts
+  const theme = useTheme();
+
+  return (
+    <Card
+      sx={{
+        backgroundColor: theme.palette.background.default,
+        borderRadius: "8px",
+      }}
+      variant="outlined"
+    >
+      <CardActionArea
+        onClick={() => {
+          console.log("clicked");
+        }}
+      >
+        <CardContent>
+          <Typography component="div">{attackName}</Typography>
+        </CardContent>
+      </CardActionArea>
+    </Card>
+  );
+};
diff --git a/client/src/contexts/ThemeContext.tsx b/client/src/contexts/ThemeContext.tsx
index 4836e1c..2a44f70 100644
--- a/client/src/contexts/ThemeContext.tsx
+++ b/client/src/contexts/ThemeContext.tsx
@@ -62,11 +62,8 @@ export const UserThemeProvider: FC<UserThemeProviderProps> = ({ children }) => {
     },
   };
 
-  // font family settings
-  // TODO: figure out how to bundle fonts in tauri
   const fontFamily = "GoogleSans";
 
-  // font scaling settings
   const fontSize = 14;
 
   const userTheme = createTheme({