diff --git a/src/app/main/authPages/shared-components/AdditionalSignWays.js b/src/app/main/authPages/shared-components/AdditionalSignWays.js
new file mode 100644
index 0000000..c0ed8ff
--- /dev/null
+++ b/src/app/main/authPages/shared-components/AdditionalSignWays.js
@@ -0,0 +1,40 @@
+import FuseSvgIcon from '@fuse/core/FuseSvgIcon/FuseSvgIcon';
+import { Typography } from '@mui/material';
+import Button from '@mui/material/Button';
+import { memo } from 'react';
+
+function AdditionalSignWays({ divider, text }) {
+  return (
+    <>
+      {divider && (
+        <div className="flex items-center mt-28">
+          <div className="flex-auto mt-px border-t" />
+          <Typography className="mx-8" color="text.secondary">
+            {text}
+          </Typography>
+          <div className="flex-auto mt-px border-t" />
+        </div>
+      )}
+
+      <div className="flex items-center justify-center w-full mt-28 space-x-16">
+        <Button variant="outlined" className="flex-auto max-w-fit">
+          <FuseSvgIcon size={20} color="action">
+            feather:facebook
+          </FuseSvgIcon>
+        </Button>
+        <Button variant="outlined" className="flex-auto max-w-fit">
+          <FuseSvgIcon size={20} color="action">
+            feather:twitter
+          </FuseSvgIcon>
+        </Button>
+        <Button variant="outlined" className="flex-auto max-w-fit">
+          <FuseSvgIcon size={20} color="action">
+            feather:github
+          </FuseSvgIcon>
+        </Button>
+      </div>
+    </>
+  );
+}
+
+export default memo(AdditionalSignWays);
diff --git a/src/app/main/authPages/shared-components/LeftSideCanvas.js b/src/app/main/authPages/shared-components/LeftSideCanvas.js
new file mode 100644
index 0000000..d437631
--- /dev/null
+++ b/src/app/main/authPages/shared-components/LeftSideCanvas.js
@@ -0,0 +1,58 @@
+import Avatar from '@mui/material/Avatar';
+import AvatarGroup from '@mui/material/AvatarGroup';
+import Box from '@mui/material/Box';
+
+function LeftSideCanvas({ title, subtitle, text }) {
+  return (
+    <Box
+      className="h-screen relative hidden md:flex flex-auto items-center justify-center p-64 lg:px-112 overflow-hidden max-w-[45vw] w-full"
+      sx={{ backgroundColor: 'primary.main' }}
+    >
+      <svg
+        className="absolute inset-0 pointer-events-none"
+        viewBox="0 0 960 540"
+        width="100%"
+        height="100%"
+        preserveAspectRatio="xMidYMax slice"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <Box
+          component="g"
+          sx={{ color: 'primary.light' }}
+          className="opacity-20"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="100"
+        >
+          <circle r="234" cx="196" cy="23" />
+          <circle r="234" cx="790" cy="491" />
+        </Box>
+      </svg>
+
+      <div className="z-10 relative w-full max-w-2xl">
+        {title && <div className="text-7xl font-bold leading-none text-gray-100">{title}</div>}
+        {subtitle && (
+          <div className="mt-24 text-lg tracking-tight leading-6 text-gray-400">{subtitle}</div>
+        )}
+        <div className="flex items-center mt-32">
+          <AvatarGroup
+            sx={{
+              '& .MuiAvatar-root': {
+                borderColor: 'primary.main',
+              },
+            }}
+          >
+            <Avatar src="assets/images/avatars/female-18.jpg" />
+            <Avatar src="assets/images/avatars/female-11.jpg" />
+            <Avatar src="assets/images/avatars/male-09.jpg" />
+            <Avatar src="assets/images/avatars/male-16.jpg" />
+          </AvatarGroup>
+
+          {text && <div className="ml-16 font-medium tracking-tight text-gray-400">{text}</div>}
+        </div>
+      </div>
+    </Box>
+  );
+}
+
+export default LeftSideCanvas;