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>
+    );
+  };
+}
diff --git a/client/src/pages/JamiLogin.tsx b/client/src/pages/Login.tsx
similarity index 91%
rename from client/src/pages/JamiLogin.tsx
rename to client/src/pages/Login.tsx
index 3d06995..5887bb3 100644
--- a/client/src/pages/JamiLogin.tsx
+++ b/client/src/pages/Login.tsx
@@ -27,22 +27,19 @@
   useMediaQuery,
 } from '@mui/material';
 import { Theme, useTheme } from '@mui/material/styles';
-import { ChangeEvent, FormEvent, MouseEvent, ReactNode, useState } from 'react';
+import { ChangeEvent, FormEvent, ReactNode, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Form, useNavigate } from 'react-router-dom';
+import { Form, Link, useNavigate } from 'react-router-dom';
 
 import { AlertSnackbar } from '../components/AlertSnackbar';
 import { PasswordInput, UsernameInput } from '../components/Input';
 import ProcessingRequest from '../components/ProcessingRequest';
+import withAuthUI from '../components/WithAuthUI';
 import { loginUser, setAccessToken } from '../utils/auth';
 import { inputWidth } from '../utils/constants';
 import { InvalidPassword, UsernameNotFound } from '../utils/errors';
 
-type JamiLoginProps = {
-  register: () => void;
-};
-
-export default function JamiLogin(props: JamiLoginProps) {
+function LoginForm() {
   const theme: Theme = useTheme();
   const navigate = useNavigate();
   const { t } = useTranslation();
@@ -65,11 +62,6 @@
     setIsJams(event.target.value === 'true');
   };
 
-  const register = (event: MouseEvent<HTMLAnchorElement>) => {
-    event.preventDefault();
-    props.register();
-  };
-
   const authenticateUser = async (event: FormEvent) => {
     event.preventDefault();
     if (username.length > 0 && password.length > 0) {
@@ -159,12 +151,12 @@
         <Box sx={{ mt: theme.typography.pxToRem(50), mb: theme.typography.pxToRem(50) }}>
           <Typography variant="body1">
             {t('login_form_to_registration_text')} &nbsp;
-            <a href="" onClick={register}>
-              {t('login_form_to_registration_link')}
-            </a>
+            <Link to={'/register'}>{t('login_form_to_registration_link')}</Link>
           </Typography>
         </Box>
       </Stack>
     </>
   );
 }
+
+export default withAuthUI(LoginForm);
diff --git a/client/src/pages/JamiRegistration.tsx b/client/src/pages/Registration.tsx
similarity index 94%
rename from client/src/pages/JamiRegistration.tsx
rename to client/src/pages/Registration.tsx
index 0cb2f2d..acbf8f9 100644
--- a/client/src/pages/JamiRegistration.tsx
+++ b/client/src/pages/Registration.tsx
@@ -27,22 +27,19 @@
   useMediaQuery,
 } from '@mui/material';
 import { Theme, useTheme } from '@mui/material/styles';
-import { ChangeEvent, FormEvent, MouseEvent, ReactNode, useEffect, useState } from 'react';
+import { ChangeEvent, FormEvent, ReactNode, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Form, useNavigate } from 'react-router-dom';
+import { Form, Link, useNavigate } from 'react-router-dom';
 
 import { AlertSnackbar } from '../components/AlertSnackbar';
 import { NameStatus, PasswordInput, PasswordStatus, UsernameInput } from '../components/Input';
 import ProcessingRequest from '../components/ProcessingRequest';
+import withAuthUI from '../components/WithAuthUI';
 import { checkPasswordStrength, isNameRegistered, loginUser, registerUser, setAccessToken } from '../utils/auth';
 import { inputWidth, jamiUsernamePattern } from '../utils/constants';
 import { InvalidCredentials, InvalidPassword, UsernameNotFound } from '../utils/errors';
 
-type JamiRegistrationProps = {
-  login: () => void;
-};
-
-export default function JamiRegistration(props: JamiRegistrationProps) {
+function RegistrationForm() {
   const theme: Theme = useTheme();
   const navigate = useNavigate();
   const { t } = useTranslation();
@@ -143,11 +140,6 @@
     setIsJams(event.target.value === 'true');
   };
 
-  const login = (event: MouseEvent<HTMLAnchorElement>) => {
-    event.preventDefault();
-    props.login();
-  };
-
   const handleSubmit = async (event: FormEvent) => {
     event.preventDefault();
     const canCreate = usernameSuccess && passwordSuccess;
@@ -248,12 +240,12 @@
         <Box sx={{ mt: theme.typography.pxToRem(50), mb: theme.typography.pxToRem(50) }}>
           <Typography variant="body1">
             {t('registration_form_to_login_text')} &nbsp;
-            <a href="" onClick={login}>
-              {t('registration_form_to_login_link')}
-            </a>
+            <Link to={'/login'}>{t('registration_form_to_login_link')}</Link>
           </Typography>
         </Box>
       </Stack>
     </>
   );
 }
+
+export default withAuthUI(RegistrationForm);
diff --git a/client/src/pages/Welcome.tsx b/client/src/pages/Welcome.tsx
deleted file mode 100644
index 110a993..0000000
--- a/client/src/pages/Welcome.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-/*
- * 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 { useState } from 'react';
-import { Navigate } from 'react-router-dom';
-
-import JamiWelcomeLogo from '../components/JamiWelcomeLogo';
-import { getAccessToken } from '../utils/auth';
-import JamiLogin from './JamiLogin';
-import JamiRegistration from './JamiRegistration';
-
-const borderRadius = 30;
-
-export default function Welcome() {
-  const theme: Theme = useTheme();
-  const [isRegistrationDisplayed, setIsRegistrationDisplayed] = useState<boolean>(false);
-
-  const child = !isRegistrationDisplayed ? (
-    <JamiLogin register={() => setIsRegistrationDisplayed(true)} />
-  ) : (
-    <JamiRegistration login={() => setIsRegistrationDisplayed(false)} />
-  );
-
-  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%'}` }}>{child}</Box>
-          </Grid>
-        </Grid>
-      </Paper>
-    </Box>
-  );
-}
diff --git a/client/src/router.tsx b/client/src/router.tsx
index a67dbc4..331d1e6 100644
--- a/client/src/router.tsx
+++ b/client/src/router.tsx
@@ -28,17 +28,18 @@
 import { RouteParams } from './hooks/useUrlParams';
 import AccountSettings from './pages/AccountSettings';
 import GeneralSettings from './pages/GeneralSettings';
+import Login from './pages/Login';
 import Messenger from './pages/Messenger';
+import Registration from './pages/Registration';
 import Setup from './pages/Setup';
 import SetupLogin from './pages/SetupLogin';
-import Welcome from './pages/Welcome';
-
 export type ConversationRouteParams = RouteParams<{ conversationId?: string }, Record<string, never>>;
 
 export const router = createBrowserRouter(
   createRoutesFromElements(
     <Route path="/" element={<App />} loader={appLoader}>
-      <Route path="login" element={<Welcome />} />
+      <Route path="login" element={<Login />} />
+      <Route path="register" element={<Registration />} />
       <Route path="setup/login" element={<SetupLogin />} />
       <Route path="setup" element={<Setup />} />
       <Route