diff --git a/net/web/src/App.styled.js b/net/web/src/App.styled.js
index a3e351a9..c67d7779 100644
--- a/net/web/src/App.styled.js
+++ b/net/web/src/App.styled.js
@@ -5,4 +5,5 @@ export const AppWrapper = styled.div`
   position: absolute;
   width: 100vw;
   height: 100vh;
+  padding: 8px;
 `;
diff --git a/net/web/src/constants/Colors.js b/net/web/src/constants/Colors.js
index b7bcce84..028fb783 100644
--- a/net/web/src/constants/Colors.js
+++ b/net/web/src/constants/Colors.js
@@ -1,5 +1,6 @@
 const Colors = {
   background: '#8fbea7',
+  formBackground: '#f4f4f4',
 };
 
 export default Colors;
diff --git a/net/web/src/context/useViewportContext.hook.js b/net/web/src/context/useViewportContext.hook.js
index c0f216b1..2b9bf7a6 100644
--- a/net/web/src/context/useViewportContext.hook.js
+++ b/net/web/src/context/useViewportContext.hook.js
@@ -3,8 +3,9 @@ import { useEffect, useState } from 'react';
 export function useViewportContext() {
 
   const [state, setState] = useState({ });
-  const SMALL_MEDIUM = 600;
-  const MEDIUM_LARGE = 1600
+  const SMALL_MEDIUM = 640;
+  const MEDIUM_LARGE = 1024;
+  const LARGE_XLARGE = 1600;
 
   const updateState = (value) => {
     setState((s) => ({ ...s, ...value }));
@@ -17,9 +18,12 @@ export function useViewportContext() {
     else if (window.innerWidth < MEDIUM_LARGE) {
       updateState({ display: 'medium' });
     }
-    else {
+    else if (window.innerWidth < LARGE_XLARGE) {
       updateState({ display: 'large' });
     }
+    else {
+      updateState({ display: 'xlarge' });
+    }
   };
 
   useEffect(() => {
diff --git a/net/web/src/login/Login.jsx b/net/web/src/login/Login.jsx
index 80f426d2..8453009c 100644
--- a/net/web/src/login/Login.jsx
+++ b/net/web/src/login/Login.jsx
@@ -20,14 +20,11 @@ export function Login() {
 
   return (
     <LoginWrapper>
-      { viewport.state.display === 'large' && (
-        <div>LARGE</div>
+      { (viewport.state.display === 'large' || viewport.state.display === 'xlarge') && (
+        <div class="split-layout"></div>
       )}
-      { viewport.state.display === 'medium' && (
-        <div>MEDIUM</div>
-      )}
-      { viewport.state.display === 'small' && (
-        <div>SMALL</div>
+      { (viewport.state.display === 'medium' || viewport.state.display === 'small') && (
+        <div class="full-layout"></div>
       )}
     </LoginWrapper>
   );
diff --git a/net/web/src/login/Login.styled.js b/net/web/src/login/Login.styled.js
index f541b020..dd7b5bd0 100644
--- a/net/web/src/login/Login.styled.js
+++ b/net/web/src/login/Login.styled.js
@@ -2,4 +2,21 @@ import styled from 'styled-components';
 import Colors from 'constants/Colors';
 
 export const LoginWrapper = styled.div`
+  height: 100%;
+
+  .full-layout {
+    width: 100%;
+    height: 100%; 
+    border-radius: 4px;
+    background: ${Colors.formBackground};
+  }
+
+  .split-layout {
+    position: relative;
+    left: 50%;
+    width: 50%;
+    height: 100%;
+    border-radius: 4px;
+    background: ${Colors.formBackground};
+  }
 `;