diff --git a/client/src/components/buttons.js b/client/src/components/buttons.js
index 0919c69..bf4700f 100644
--- a/client/src/components/buttons.js
+++ b/client/src/components/buttons.js
@@ -1,7 +1,7 @@
 import { QuestionMark } from "@mui/icons-material";
 import { IconButton } from "@mui/material";
 import { styled } from "@mui/styles";
-import { CameraIcon, CancelIcon, CrossedEyeIcon, EyeIcon, FolderIcon, InfoIcon, PenIcon } from "./svgIcons";
+import { ArrowIcon, CameraIcon, CancelIcon, CrossedEyeIcon, CrossIcon, EyeIcon, FolderIcon, InfoIcon, PenIcon } from "./svgIcons";
 
 const RoundButton = styled(
     ({Icon, ...props}) => (
@@ -94,6 +94,44 @@
     )
 }
 
+export const BackButton = styled(
+    (props) => {
+        return (
+            <IconButton {...props} disableRipple={true}>
+                <ArrowIcon fontSize="inherit"/>
+            </IconButton>
+        )
+    }
+)(({theme}) => ({
+    color: theme.palette.primary.dark,
+    fontSize: "15px",
+    height: "30px",
+    width: "51px",
+    borderRadius: "5px",
+    "&:hover": {
+        background: theme.palette.primary.light,
+    },
+}))
+
+export const CloseButton = styled(
+    (props) => {
+        return (
+            <IconButton {...props} disableRipple={true}>
+                <CrossIcon fontSize="inherit"/>
+            </IconButton>
+        )
+    }
+)(({theme}) => ({
+    color: theme.palette.primary.dark,
+    fontSize: "15px",
+    height: "30px",
+    width: "30px",
+    borderRadius: "5px",
+    "&:hover": {
+        background: theme.palette.primary.light,
+    },
+}))
+
 export const ToggleVisibilityButton = styled(
     ({visible, ...props}) => {
         const Icon = visible ? CrossedEyeIcon : EyeIcon
@@ -111,4 +149,4 @@
     "&:hover": {
         background: theme.palette.primary.light,
     },
-}));
\ No newline at end of file
+}))
diff --git a/client/src/components/inputs.js b/client/src/components/inputs.js
index f7e5824..0a5ce9e 100644
--- a/client/src/components/inputs.js
+++ b/client/src/components/inputs.js
@@ -2,11 +2,11 @@
 import { styled } from "@mui/styles"
 import React from "react"
 import { InfoButton, ToggleVisibilityButton } from "./buttons"
-import { CheckedIcon, CrossIcon, LockIcon, PenIcon, PersonIcon } from "./svgIcons"
+import { CheckedIcon, RoundCrossIcon, LockIcon, PenIcon, PersonIcon } from "./svgIcons"
 
 const iconsHeight = "16px"
 const StyledCheckedIconSuccess = styled(CheckedIcon)(({theme}) => ({height: iconsHeight, color: theme.palette.success.main}))
-const StyledCrossIconError = styled(CrossIcon)(({theme}) => ({height: iconsHeight, color: theme.palette.error.main}))
+const StyledRoundCrossIconError = styled(RoundCrossIcon)(({theme}) => ({height: iconsHeight, color: theme.palette.error.main}))
 const StyledPenIconLight = styled(PenIcon)({height: iconsHeight, color: "#03B9E9"})
 const StyledPenIconDark  = styled(PenIcon)(({theme}) => ({height: iconsHeight, color: theme.palette.primary.dark}))
 const StyledPersonIconLight = styled(PersonIcon)({height: iconsHeight, color: "#03B9E9"})
@@ -27,7 +27,7 @@
         let Icon = StyledPersonIconLight
         let visibility = "visible"
         if (props.error) {
-            Icon = StyledCrossIconError
+            Icon = StyledRoundCrossIconError
         }
         else if (props.success) {
             Icon = StyledCheckedIconSuccess
@@ -75,7 +75,7 @@
         let Icon = StyledLockIcon
         let visibility = "visible"
         if (props.error) {
-            Icon = StyledCrossIconError
+            Icon = StyledRoundCrossIconError
         }
         else if (props.success) {
             Icon = StyledCheckedIconSuccess
diff --git a/client/src/components/svgIcons.js b/client/src/components/svgIcons.js
index 0fe7d85..bd14ced 100644
--- a/client/src/components/svgIcons.js
+++ b/client/src/components/svgIcons.js
@@ -10,6 +10,16 @@
     - Play with the viewBox attribute in order to center the icon and make it uses all available space. Adding a temporary border with inline style might help.
 */
 
+export const ArrowIcon = (props) => {
+    return (
+        <SvgIcon {...props} viewBox="0 -3 20 20">
+                <g>
+                    <path d="M0.302825536,7.53652162 L6.27862638,13.4439361 L6.37822306,13.542393 C6.77660979,13.9362206 7.47378655,13.8377637 7.77257659,13.4439361 C8.07136664,13.0501085 8.07136664,12.3609101 7.67297991,12.0655394 L3.39032264,7.83189235 L18.9274048,7.83189235 C19.5249849,7.83189235 19.9233716,7.43806472 19.9233716,6.84732327 C19.9233716,6.25658182 19.5249849,5.86275419 18.9274048,5.86275419 L3.39032264,5.86275419 L7.67297991,1.62910716 C7.97176996,1.23527953 7.97176996,0.742994993 7.67297991,0.349167363 C7.27459319,-0.0446602682 6.67701311,-0.143117176 6.27862638,0.250710455 L0.302825536,6.15812492 C0.00403549366,6.45349564 -0.0955611871,6.84732327 0.103632174,7.2411509 C0.103632174,7.33960781 0.203228855,7.43806472 0.302825536,7.53652162" id="Fill-1"></path>
+                </g>
+        </SvgIcon>
+    )
+}
+
 export const CameraIcon = (props) => {
     return (
         <SvgIcon {...props} viewBox="2 3 20 19">
@@ -46,9 +56,8 @@
 
 export const CrossIcon = (props) => {
     return (
-        <SvgIcon {...props} viewBox="0 0 16 16">
-            <path d="M8 16a8 8 0 1 1 8-8 8.009 8.009 0 0 1-8 8ZM8 .888A7.112 7.112 0 1 0 15.112 8 7.12 7.12 0 0 0 8 .888Z"/>
-            <path d="M10.837 5.167a.444.444 0 0 0-.628 0l-2.2 2.2-2.214-2.2a.44406306.44406306 0 0 0-.628.628l2.2 2.2-2.2 2.2a.44904009.44904009 0 0 0 .628.642l2.2-2.2 2.2 2.2a.4507918.4507918 0 1 0 .642-.633l-2.2-2.2 2.2-2.209a.445.445 0 0 0 0-.628Z"/>
+        <SvgIcon {...props} viewBox="5 5 14 14">
+            <path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
         </SvgIcon>
     )
 }
@@ -109,3 +118,12 @@
     </SvgIcon>
     )
 }
+
+export const RoundCrossIcon = (props) => {
+    return (
+        <SvgIcon {...props} viewBox="0 0 16 16">
+            <path d="M8 16a8 8 0 1 1 8-8 8.009 8.009 0 0 1-8 8ZM8 .888A7.112 7.112 0 1 0 15.112 8 7.12 7.12 0 0 0 8 .888Z"/>
+            <path d="M10.837 5.167a.444.444 0 0 0-.628 0l-2.2 2.2-2.214-2.2a.44406306.44406306 0 0 0-.628.628l2.2 2.2-2.2 2.2a.44904009.44904009 0 0 0 .628.642l2.2-2.2 2.2 2.2a.4507918.4507918 0 1 0 .642-.633l-2.2-2.2 2.2-2.209a.445.445 0 0 0 0-.628Z"/>
+        </SvgIcon>
+    )
+}