diff --git a/client/src/components/WithAuthUI.tsx b/client/src/components/WithAuthUI.tsx
new file mode 100644
index 0000000..db6e692
--- /dev/null
+++ b/client/src/components/WithAuthUI.tsx
@@ -0,0 +1,94 @@
+/*
+ * Copyright (C) 2022 Savoir-faire Linux Inc.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation; either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public
+ * License along with this program.  If not, see
+ * <https://www.gnu.org/licenses/>.
+ */
+import { Box, Grid, Paper, useMediaQuery } from '@mui/material';
+import { Theme, useTheme } from '@mui/material/styles';
+import React from 'react';
+import { Navigate } from 'react-router-dom';
+
+import { getAccessToken } from '../utils/auth';
+import JamiWelcomeLogo from './JamiWelcomeLogo';
+
+export default function withAuthUI(WrappedComponent: React.FunctionComponent): React.FunctionComponent {
+  return function WithAuthUI() {
+    const borderRadius = 30;
+
+    const theme: Theme = useTheme();
+
+    const isDesktopOrLaptop: boolean = useMediaQuery(theme.breakpoints.up('md'));
+    const isMobile: boolean = useMediaQuery(theme.breakpoints.only('xs'));
+
+    const accessToken = getAccessToken();
+
+    if (accessToken) {
+      return <Navigate to="/conversation" replace />;
+    }
+    return (
+      <Box
+        sx={{
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          backgroundColor: `${isDesktopOrLaptop ? theme.palette.primary.dark : 'white'}`,
+        }}
+      >
+        <Paper
+          elevation={10}
+          sx={{
+            width: '100%',
+            backgroundColor: 'white',
+            margin: `${isDesktopOrLaptop ? theme.typography.pxToRem(100) : 0}`,
+            borderRadius: `${isDesktopOrLaptop ? theme.typography.pxToRem(borderRadius) : 0}`,
+          }}
+        >
+          <Grid container spacing={0} sx={{ height: '100%' }}>
+            {!isMobile && (
+              <Grid
+                item
+                xs={6}
+                id="logo"
+                sx={{
+                  height: '100%',
+                  backgroundColor: theme.palette.secondary.main,
+                  borderRadius: `${
+                    isDesktopOrLaptop
+                      ? `${theme.typography.pxToRem(borderRadius)} 0 0 ${theme.typography.pxToRem(borderRadius)}`
+                      : 0
+                  }`, // To follow paper border-radius
+                }}
+              >
+                <JamiWelcomeLogo logoWidth="90%" sx={{ height: '100%' }} />
+              </Grid>
+            )}
+            <Grid item xs={isMobile ? 12 : 6} sx={{ height: '100%' }}>
+              {isMobile && (
+                <JamiWelcomeLogo
+                  logoWidth={theme.typography.pxToRem(100)}
+                  logoHeight={theme.typography.pxToRem(100)}
+                  sx={{ mt: theme.typography.pxToRem(30), mb: theme.typography.pxToRem(20) }}
+                />
+              )}
+              <Box sx={{ height: `${isMobile ? 'auto' : '100%'}` }}>
+                <WrappedComponent />
+              </Box>
+            </Grid>
+          </Grid>
+        </Paper>
+      </Box>
+    );
+  };
+}