diff --git a/client/src/components/buttons.js b/client/src/components/buttons.js
new file mode 100644
index 0000000..aef2456
--- /dev/null
+++ b/client/src/components/buttons.js
@@ -0,0 +1,63 @@
+import { IconButton } from "@mui/material";
+import { CameraIcon, CancelIcon, FolderIcon, PenIcon } from "./svgIcons";
+
+const CustomisePictureButton = ({Icon, ...props}) => {
+    return (
+        <IconButton
+            {...props}
+            disableRipple={true}
+            sx={{
+                border: "1px solid #005699",
+                color: "#005699",
+                height: "53px",
+                width: "53px",
+                fontSize: "15px",
+                "&:hover": {
+                    background: "#0056991A",
+                },
+                "&:active": {
+                    color: "#FFF",
+                    background: "#005699",
+                },
+            }}
+        >
+            <Icon fontSize="inherit"/>
+        </IconButton>
+    )
+}
+
+export const RemovePictureButton = (props) => {
+    return (
+        <CustomisePictureButton {...props}
+            aria-label="remove picture"
+            Icon={CancelIcon}
+        />
+    )
+}
+
+export const EditPictureButton = (props) => {
+    return (
+        <CustomisePictureButton {...props}
+            aria-label="edit picture"
+            Icon={PenIcon}
+        />
+    )
+}
+
+export const UploadPictureButton = (props) => {
+    return (
+        <CustomisePictureButton {...props}
+            aria-label="upload picture"
+            Icon={FolderIcon}
+        />
+    )
+}
+
+export const TakePictureButton = (props) => {
+    return (
+        <CustomisePictureButton {...props}
+            aria-label="take picture"
+            Icon={CameraIcon}
+        />
+    )
+}
diff --git a/client/src/components/svgIcons.js b/client/src/components/svgIcons.js
new file mode 100644
index 0000000..f7350b6
--- /dev/null
+++ b/client/src/components/svgIcons.js
@@ -0,0 +1,33 @@
+import { SvgIcon } from "@mui/material"
+
+export const CameraIcon = (props) => {
+    return (
+        <SvgIcon {...props} viewBox="2 3 20 19">
+              <path d="M3.6 20.3c-.4 0-.8-.2-1.1-.5-.2-.2-.4-.6-.4-.9V7.7c-.1-.3.1-.7.4-1 .2-.3.5-.4.8-.5H7.9l1.2-2.5h5.7L16 6.2h4.3c.4 0 .8.2 1.1.5.2.2.4.6.4.9v11.2c0 .4-.2.8-.5 1.1-.2.2-.6.4-.9.4H3.6zm0-12.6-.1 11v.1h17.1V7.7h-5.3L14 5.2h-4L8.8 7.7H3.6zm8.4 9.7c-1.2 0-2.3-.5-3.2-1.3-.8-.8-1.3-2-1.3-3.2 0-1.2.5-2.3 1.3-3.2.8-.8 2-1.3 3.2-1.3 1.2 0 2.3.5 3.2 1.3.8.8 1.3 2 1.3 3.2s-.5 2.3-1.3 3.2c-.9.8-2 1.3-3.2 1.3zm0-7.5c-.8 0-1.6.3-2.1.9S9 12.1 9 12.9s.3 1.6.9 2.1c1.1 1.1 3.1 1.1 4.3 0 .6-.6.9-1.3.9-2.1s-.3-1.6-.9-2.1c-.6-.6-1.4-.9-2.2-.9z"/>
+        </SvgIcon>
+    )
+}
+
+export const CancelIcon = (props) => {
+    return (
+        <SvgIcon {...props} viewBox="2 2 20 20">
+            <path d="M12 2C6.4771525 2 2 6.4771525 2 12s4.4771525 10 10 10 10-4.4771525 10-10S17.5228475 2 12 2Zm0 1.33333168c2.0746076-.00128199 4.079864.74684198 5.6466667 2.10666832L5.39333333 17.5933333c-2.17561675-2.5749862-2.66070945-6.17789412-1.2436087-9.23660098C5.56682538 5.29802546 8.62897124 3.33855529 12 3.33333168Zm0 17.33333502c-2.08385186-.000638-4.09692832-.7561338-5.66666667-2.1266667L18.5866667 6.38c2.1903962 2.57136307 2.6872505 6.1810635 1.2730136 9.2485834C18.4454435 18.6961032 15.3778286 20.6624553 12 20.6666667Z"/>
+        </SvgIcon>
+    )
+}
+
+export const FolderIcon = (props) => {
+    return (
+        <SvgIcon {...props} viewBox="0 0 17.504 14.812">
+            <path d="M15.484 14.812H2.02a.675.675 0 0 1-.666-.578L.007 4.809a.674.674 0 0 1 .665-.769h.673V.673A.674.674 0 0 1 2.02 0h4.039a.676.676 0 0 1 .373.113l1.85 1.233h7.2a.674.674 0 0 1 .673.673v2.02h.673a.675.675 0 0 1 .667.769l-1.346 9.426a.677.677 0 0 1-.665.578ZM1.449 5.387 2.6 13.466h12.3l1.154-8.079Zm1.244-4.04v2.692h12.118V2.693H8.078A.677.677 0 0 1 7.7 2.58L5.855 1.346Z"/>
+        </SvgIcon>
+    )
+}
+
+export const PenIcon = (props) => {
+    return (
+        <SvgIcon {...props} viewBox="0 0 14.863 14.863">
+            <path d="m0 14.863.025-5.4L9.49 0l5.373 5.388-3.941 3.941-.711-.715.918-.913-3.967-3.966-6.123 6.129v3.966H5l2.959-2.958.71.715L5.4 14.838ZM9.49 1.426l-1.6 1.6 3.946 3.946 1.6-1.6L9.49 1.427Z"/>
+        </SvgIcon>
+    )
+}