diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
index f0927c2a6..7f4e34c72 100644
--- a/common/config/rush/pnpm-lock.yaml
+++ b/common/config/rush/pnpm-lock.yaml
@@ -797,6 +797,7 @@ importers:
       eslint-plugin-react-hooks: ~4.6.0
       eslint-plugin-unused-imports: ~2.0.0
       formik: ^2.1.5
+      jsdom: ~22.1.0
       luxon: ^2.0.5
       postcss: ~8.4.13
       react: ^16.13.1
@@ -849,6 +850,7 @@ importers:
       eslint-plugin-react-hooks: 4.6.0_eslint@8.41.0
       eslint-plugin-unused-imports: 2.0.0_2906aacee5c155bfb25e5c02bfd525c7
       formik: 2.2.9_react@16.14.0
+      jsdom: 22.1.0
       postcss: 8.4.23
       react: 16.14.0
       react-dom: 16.14.0_react@16.14.0
@@ -858,7 +860,7 @@ importers:
       typescript: 5.0.4
       uuid: 8.3.2
       vite: 4.3.9
-      vitest: 0.31.4_@vitest+ui@0.31.4
+      vitest: 0.31.4_@vitest+ui@0.31.4+jsdom@22.1.0
 
 packages:
 
@@ -5480,7 +5482,6 @@ packages:
   /@tootallnate/once/2.0.0:
     resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==}
     engines: {node: '>= 10'}
-    optional: true
 
   /@tsconfig/node10/1.0.9:
     resolution: {integrity: sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==}
@@ -6263,7 +6264,7 @@ packages:
       pathe: 1.1.0
       picocolors: 1.0.0
       sirv: 2.0.3
-      vitest: 0.31.4_@vitest+ui@0.31.4
+      vitest: 0.31.4_@vitest+ui@0.31.4+jsdom@22.1.0
 
   /@vitest/utils/0.31.4:
     resolution: {integrity: sha512-DobZbHacWznoGUfYU8XDPY78UubJxXfMNY1+SUdOp1NsI34eopSA6aZMeaGu10waSOeYwE8lxrd/pLfT0RMxjQ==}
@@ -8086,6 +8087,13 @@ packages:
       cssom: 0.3.8
     dev: true
 
+  /cssstyle/3.0.0:
+    resolution: {integrity: sha512-N4u2ABATi3Qplzf0hWbVCdjenim8F3ojEXpBDF5hBpjzW182MjNGLqfmQ0SkSPeQ+V86ZXgeH8aXj6kayd4jgg==}
+    engines: {node: '>=14'}
+    dependencies:
+      rrweb-cssom: 0.6.0
+    dev: true
+
   /csstype/3.1.2:
     resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
 
@@ -8190,6 +8198,15 @@ packages:
       whatwg-url: 8.7.0
     dev: true
 
+  /data-urls/4.0.0:
+    resolution: {integrity: sha512-/mMTei/JXPqvFqQtfyTowxmJVwr2PVAeCcDxyFf6LhoOu/09TX2OX3kb2wzi4DMXcfj4OItwDOnhl5oziPnT6g==}
+    engines: {node: '>=14'}
+    dependencies:
+      abab: 2.0.6
+      whatwg-mimetype: 3.0.0
+      whatwg-url: 12.0.1
+    dev: true
+
   /date-fns/1.30.1:
     resolution: {integrity: sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==}
     dev: true
@@ -8597,6 +8614,13 @@ packages:
       webidl-conversions: 5.0.0
     dev: true
 
+  /domexception/4.0.0:
+    resolution: {integrity: sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==}
+    engines: {node: '>=12'}
+    dependencies:
+      webidl-conversions: 7.0.0
+    dev: true
+
   /domhandler/5.0.3:
     resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
     engines: {node: '>= 4'}
@@ -10869,6 +10893,13 @@ packages:
       whatwg-encoding: 1.0.5
     dev: true
 
+  /html-encoding-sniffer/3.0.0:
+    resolution: {integrity: sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==}
+    engines: {node: '>=12'}
+    dependencies:
+      whatwg-encoding: 2.0.0
+    dev: true
+
   /html-escaper/2.0.2:
     resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
 
@@ -10939,7 +10970,6 @@ packages:
       debug: 4.3.4
     transitivePeerDependencies:
       - supports-color
-    optional: true
 
   /http-signature/1.2.0:
     resolution: {integrity: sha512-CAbnr6Rz4CYQkLYUtSNXxQPUH2gK8f3iWexVlsnMeD+GjlsQ0Xsy1cOX+mN3dtxYomRy21CiOzU8Uhw6OwncEQ==}
@@ -12322,6 +12352,44 @@ packages:
       - utf-8-validate
     dev: true
 
+  /jsdom/22.1.0:
+    resolution: {integrity: sha512-/9AVW7xNbsBv6GfWho4TTNjEo9fe6Zhf9O7s0Fhhr3u+awPwAJMKwAMXnkk5vBxflqLW9hTHX/0cs+P3gW+cQw==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      canvas: ^2.5.0
+    peerDependenciesMeta:
+      canvas:
+        optional: true
+    dependencies:
+      abab: 2.0.6
+      cssstyle: 3.0.0
+      data-urls: 4.0.0
+      decimal.js: 10.4.3
+      domexception: 4.0.0
+      form-data: 4.0.0
+      html-encoding-sniffer: 3.0.0
+      http-proxy-agent: 5.0.0
+      https-proxy-agent: 5.0.1
+      is-potential-custom-element-name: 1.0.1
+      nwsapi: 2.2.4
+      parse5: 7.1.2
+      rrweb-cssom: 0.6.0
+      saxes: 6.0.0
+      symbol-tree: 3.2.4
+      tough-cookie: 4.1.2
+      w3c-xmlserializer: 4.0.0
+      webidl-conversions: 7.0.0
+      whatwg-encoding: 2.0.0
+      whatwg-mimetype: 3.0.0
+      whatwg-url: 12.0.1
+      ws: 8.13.0
+      xml-name-validator: 4.0.0
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+    dev: true
+
   /jsesc/0.5.0:
     resolution: {integrity: sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==}
     hasBin: true
@@ -14455,6 +14523,12 @@ packages:
     resolution: {integrity: sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==}
     dev: true
 
+  /parse5/7.1.2:
+    resolution: {integrity: sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==}
+    dependencies:
+      entities: 4.5.0
+    dev: true
+
   /parseley/0.11.0:
     resolution: {integrity: sha512-VfcwXlBWgTF+unPcr7yu3HSSA6QUdDaDnrHcytVfj5Z8azAyKBDrYnSIfeSxlrEayndNcLmrXzg+Vxbo6DWRXQ==}
     dependencies:
@@ -15721,6 +15795,10 @@ packages:
       setprototypeof: 1.2.0
       utils-merge: 1.0.1
 
+  /rrweb-cssom/0.6.0:
+    resolution: {integrity: sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==}
+    dev: true
+
   /run-applescript/5.0.0:
     resolution: {integrity: sha512-XcT5rBksx1QdIhlFOCtgZkB99ZEouFZ1E2Kc2LHqNW13U3/74YGdkQRmThTwxy4QIyookibDKYZOPqX//6BlAg==}
     engines: {node: '>=12'}
@@ -15802,6 +15880,13 @@ packages:
       xmlchars: 2.2.0
     dev: true
 
+  /saxes/6.0.0:
+    resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
+    engines: {node: '>=v12.22.7'}
+    dependencies:
+      xmlchars: 2.2.0
+    dev: true
+
   /scheduler/0.19.1:
     resolution: {integrity: sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==}
     dependencies:
@@ -16892,6 +16977,13 @@ packages:
       punycode: 2.3.0
     dev: true
 
+  /tr46/4.1.1:
+    resolution: {integrity: sha512-2lv/66T7e5yNyhAAC4NaKe5nVavzuGJQVVtRYLyQ2OI8tsJ61PMLlelehb0wi2Hx6+hT/OJUWZcw8MjlSRnxvw==}
+    engines: {node: '>=14'}
+    dependencies:
+      punycode: 2.3.0
+    dev: true
+
   /tree-kill/1.2.2:
     resolution: {integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==}
     hasBin: true
@@ -17684,6 +17776,73 @@ packages:
       - terser
     dev: true
 
+  /vitest/0.31.4_@vitest+ui@0.31.4+jsdom@22.1.0:
+    resolution: {integrity: sha512-GoV0VQPmWrUFOZSg3RpQAPN+LPmHg2/gxlMNJlyxJihkz6qReHDV6b0pPDcqFLNEPya4tWJ1pgwUNP9MLmUfvQ==}
+    engines: {node: '>=v14.18.0'}
+    hasBin: true
+    peerDependencies:
+      '@edge-runtime/vm': '*'
+      '@vitest/browser': '*'
+      '@vitest/ui': '*'
+      happy-dom: '*'
+      jsdom: '*'
+      playwright: '*'
+      safaridriver: '*'
+      webdriverio: '*'
+    peerDependenciesMeta:
+      '@edge-runtime/vm':
+        optional: true
+      '@vitest/browser':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+      playwright:
+        optional: true
+      safaridriver:
+        optional: true
+      webdriverio:
+        optional: true
+    dependencies:
+      '@types/chai': 4.3.5
+      '@types/chai-subset': 1.3.3
+      '@types/node': 18.16.15
+      '@vitest/expect': 0.31.4
+      '@vitest/runner': 0.31.4
+      '@vitest/snapshot': 0.31.4
+      '@vitest/spy': 0.31.4
+      '@vitest/ui': 0.31.4_vitest@0.31.4
+      '@vitest/utils': 0.31.4
+      acorn: 8.8.2
+      acorn-walk: 8.2.0
+      cac: 6.7.14
+      chai: 4.3.7
+      concordance: 5.0.4
+      debug: 4.3.4
+      jsdom: 22.1.0
+      local-pkg: 0.4.3
+      magic-string: 0.30.0
+      pathe: 1.1.0
+      picocolors: 1.0.0
+      std-env: 3.3.3
+      strip-literal: 1.0.1
+      tinybench: 2.5.0
+      tinypool: 0.5.0
+      vite: 4.3.9_@types+node@18.16.15
+      vite-node: 0.31.4_@types+node@18.16.15
+      why-is-node-running: 2.2.2
+    transitivePeerDependencies:
+      - less
+      - sass
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+    dev: true
+
   /vm2/3.9.19:
     resolution: {integrity: sha512-J637XF0DHDMV57R6JyVsTak7nIL8gy5KH4r1HiwWLf/4GBbb5MKL5y7LpmF4A8E2nR6XmzpmMFQ7V7ppPTmUQg==}
     engines: {node: '>=6.0'}
@@ -17711,6 +17870,13 @@ packages:
       xml-name-validator: 3.0.0
     dev: true
 
+  /w3c-xmlserializer/4.0.0:
+    resolution: {integrity: sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==}
+    engines: {node: '>=14'}
+    dependencies:
+      xml-name-validator: 4.0.0
+    dev: true
+
   /walker/1.0.8:
     resolution: {integrity: sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==}
     dependencies:
@@ -17743,6 +17909,11 @@ packages:
     engines: {node: '>=10.4'}
     dev: true
 
+  /webidl-conversions/7.0.0:
+    resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==}
+    engines: {node: '>=12'}
+    dev: true
+
   /webpack-sources/3.2.3:
     resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==}
     engines: {node: '>=10.13.0'}
@@ -17814,6 +17985,13 @@ packages:
       iconv-lite: 0.4.24
     dev: true
 
+  /whatwg-encoding/2.0.0:
+    resolution: {integrity: sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==}
+    engines: {node: '>=12'}
+    dependencies:
+      iconv-lite: 0.6.3
+    dev: true
+
   /whatwg-fetch/3.6.2:
     resolution: {integrity: sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA==}
 
@@ -17821,6 +17999,19 @@ packages:
     resolution: {integrity: sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==}
     dev: true
 
+  /whatwg-mimetype/3.0.0:
+    resolution: {integrity: sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /whatwg-url/12.0.1:
+    resolution: {integrity: sha512-Ed/LrqB8EPlGxjS+TrsXcpUond1mhccS3pchLhzSgPCnTimUCKj3IZE75pAs5m6heB2U2TMerKFUXheyHY+VDQ==}
+    engines: {node: '>=14'}
+    dependencies:
+      tr46: 4.1.1
+      webidl-conversions: 7.0.0
+    dev: true
+
   /whatwg-url/5.0.0:
     resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
     dependencies:
@@ -18050,6 +18241,11 @@ packages:
     resolution: {integrity: sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==}
     dev: true
 
+  /xml-name-validator/4.0.0:
+    resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
+    engines: {node: '>=12'}
+    dev: true
+
   /xml/1.0.1:
     resolution: {integrity: sha512-huCv9IH9Tcf95zuYCsQraZtWnJvBtLVE0QHMOs8bWyZAFZNDcYjsPq1nEx8jKA9y+Beo9v+7OBPRisQTjinQMw==}
     dev: true
diff --git a/common/config/rush/repo-state.json b/common/config/rush/repo-state.json
index da85531e0..d04160148 100644
--- a/common/config/rush/repo-state.json
+++ b/common/config/rush/repo-state.json
@@ -1,5 +1,5 @@
 // DO NOT MODIFY THIS FILE MANUALLY BUT DO COMMIT IT. It is generated and used by Rush.
 {
-  "pnpmShrinkwrapHash": "cc17ab6655bc3d4f47bc885c0d816820c0d2a09a",
+  "pnpmShrinkwrapHash": "9be2627e80b4a097f61c386c05b488c48c47c0ff",
   "preferredVersionsHash": "bf21a9e8fbc5a3846fb05b4fa0859e0917b2202f"
 }
diff --git a/packages/client/src/controllers/Layout.tsx b/packages/client/src/controllers/Layout.tsx
index 9bafc0626..756ed8d02 100644
--- a/packages/client/src/controllers/Layout.tsx
+++ b/packages/client/src/controllers/Layout.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 
 import { LinkItem, Layout, UserAvatarProps } from "@eisbuk/ui";
 import { PrivateRoutes } from "@eisbuk/shared/ui";
@@ -10,6 +10,8 @@ import BirthdayMenu from "@/controllers/BirthdayMenu";
 import AthletesApproval from "@/controllers/AthletesApproval";
 import { NotificationsContainer } from "@/features/notifications/components/index";
 
+import { signOut } from "@/store/actions/authOperations";
+
 import { getIsAdmin } from "@/store/selectors/auth";
 import { getOrgDisplayName } from "@/store/selectors/orgInfo";
 
@@ -20,6 +22,8 @@ interface Props {
 }
 
 const LayoutController: React.FC<Props> = (params) => {
+  const dispatch = useDispatch();
+
   const isAdmin = useSelector(getIsAdmin);
 
   const displayName = useSelector(getOrgDisplayName);
@@ -44,6 +48,7 @@ const LayoutController: React.FC<Props> = (params) => {
       adminLinks={adminLinks}
       Notifications={NotificationsContainer}
       additionalAdminContent={additionalAdminContent}
+      onLogout={() => dispatch(signOut())}
     />
   );
 };
diff --git a/packages/client/src/pages/customers/index.tsx b/packages/client/src/pages/customers/index.tsx
index ea270ba6d..5b5679a29 100644
--- a/packages/client/src/pages/customers/index.tsx
+++ b/packages/client/src/pages/customers/index.tsx
@@ -35,20 +35,23 @@ const AthletesPage: React.FC = () => {
   const { t } = useTranslation();
   const history = useHistory();
 
+  useTitle(t(NavigationLabel.Athletes));
+
   useFirestoreSubscribe(getOrganization(), [
     { collection: OrgSubCollection.Customers },
   ]);
 
-  const [toggled, setToggle] = useState(true);
+  // Approvals only display logic
+  const [approvalsOnly, setApprovalsOnly] = useState(true);
 
   useEffect(() => {
-    setToggle(
-      history.location.search !== "" &&
-        history.location.search === "?approvals=true"
-    );
+    setApprovalsOnly(history.location.search === "?approvals=true");
   }, [history.location.search]);
 
-  useTitle(t(NavigationLabel.Athletes));
+  const toggleApprovals = () =>
+    history.location.search === "?approvals=true"
+      ? history.push(`${PrivateRoutes.Athletes}`)
+      : history.push(`${PrivateRoutes.Athletes}/?approvals=true`);
 
   const customers = useSelector(getCustomersList(true));
 
@@ -59,14 +62,6 @@ const AthletesPage: React.FC = () => {
     history.push(`${PrivateRoutes.Athletes}/${id}`);
   };
 
-  const toggleApprovals = () => {
-    const toggled =
-      history.location.search && history.location.search === "?approvals=true";
-    toggled
-      ? history.push(`${PrivateRoutes.Athletes}`)
-      : history.push(`${PrivateRoutes.Athletes}/?approvals=true`);
-  };
-
   /** @TODO update below when we create `isEmpty` and `isLoaded` helpers */
   return (
     <Layout>
@@ -82,10 +77,10 @@ const AthletesPage: React.FC = () => {
                 <Button
                   aria-label={t(AdminAria.AthletesApprovalButton)}
                   onClick={toggleApprovals}
-                  color={toggled ? ButtonColor.Primary : undefined}
+                  color={approvalsOnly ? ButtonColor.Primary : undefined}
                   className={[
                     "h-8",
-                    !toggled
+                    !approvalsOnly
                       ? "!text-black outline outline-gray-300 border-box"
                       : "",
                   ].join(" ")}
@@ -97,7 +92,7 @@ const AthletesPage: React.FC = () => {
               <CustomerGrid
                 onCustomerClick={openCustomerCard}
                 filterString={filterString}
-                {...{ customers }}
+                {...{ customers, approvalsOnly }}
               />
             </>
           )}
diff --git a/packages/client/src/store/selectors/attendance/slotAttendance.ts b/packages/client/src/store/selectors/attendance/slotAttendance.ts
index 7fa6db2d1..1b1384212 100644
--- a/packages/client/src/store/selectors/attendance/slotAttendance.ts
+++ b/packages/client/src/store/selectors/attendance/slotAttendance.ts
@@ -5,6 +5,7 @@ import { LocalStore } from "@/types/store";
 import { AttendanceCardProps } from "@/controllers/AttendanceCard";
 
 import { compareCustomerBookings } from "@/utils/sort";
+import { getSlotsByMonth } from "../slots";
 
 /**
  * Attendance card selector returns slots with customer attendance, used to create attendance cards.
@@ -16,10 +17,11 @@ import { compareCustomerBookings } from "@/utils/sort";
 export const getSlotsWithAttendance = (
   state: LocalStore
 ): Omit<AttendanceCardProps, "allCustomers">[] => {
+  const slotsByDay = getSlotsByMonth(state);
   const {
     app: { calendarDay },
     firestore: {
-      data: { customers: allCustomers, slotsByDay, attendance },
+      data: { customers: allCustomers, attendance },
     },
   } = state;
 
diff --git a/packages/client/src/store/selectors/slots.ts b/packages/client/src/store/selectors/slots.ts
index 733483f79..da1389022 100644
--- a/packages/client/src/store/selectors/slots.ts
+++ b/packages/client/src/store/selectors/slots.ts
@@ -2,16 +2,42 @@ import { SlotsByDay, luxon2ISODate } from "@eisbuk/shared";
 
 import { LocalStore } from "@/types/store";
 
+const sortSlotCategories = (
+  slotsByMonth: Record<string, SlotsByDay>
+): Record<string, SlotsByDay> =>
+  Object.fromEntries(
+    Object.entries(slotsByMonth).map(([month, slotsByDay]) => [
+      month,
+      Object.fromEntries(
+        Object.entries(slotsByDay).map(([day, slots]) => [
+          day,
+          Object.fromEntries(
+            Object.entries(slots).map(([slotId, slot]) => [
+              slotId,
+              {
+                ...slot,
+                categories: slot.categories.sort((a, b) => (a < b ? -1 : 1)),
+              },
+            ])
+          ),
+        ])
+      ),
+    ])
+  );
+
+export const getSlotsByMonth = (
+  state: LocalStore
+): LocalStore["firestore"]["data"]["slotsByDay"] =>
+  sortSlotCategories(state.firestore.data.slotsByDay ?? {});
+
 /**
  * Get slots for admin view, with respect to current date
  * @param state Local store state
  * @returns record of days filled with slots
  */
 export const getAdminSlots = (state: LocalStore): SlotsByDay => {
+  const allSlotsInStore = getSlotsByMonth(state);
   const {
-    firestore: {
-      data: { slotsByDay: allSlotsInStore },
-    },
     app: { calendarDay },
   } = state;
 
diff --git a/packages/e2e/integration/auth_redirect_spec.ts b/packages/e2e/integration/auth_redirect_spec.ts
index 7dee7c9b4..77bc64eda 100644
--- a/packages/e2e/integration/auth_redirect_spec.ts
+++ b/packages/e2e/integration/auth_redirect_spec.ts
@@ -1,5 +1,8 @@
 import { type Customer } from "@eisbuk/shared";
-import i18n, { AttendanceNavigationLabel } from "@eisbuk/translations";
+import i18n, {
+  ActionButton,
+  AttendanceNavigationLabel,
+} from "@eisbuk/translations";
 
 import { PrivateRoutes, Routes } from "../temp";
 
@@ -151,5 +154,17 @@ describe("auth-related redirects", () => {
       cy.visit(Routes.CustomerArea);
       cy.url().should("include", PrivateRoutes.Athletes);
     });
+
+    it("logs out and redirects to the login page on 'Log out' button click", () => {
+      // Sign in with default user (admin)
+      cy.signIn();
+      cy.visit("/");
+
+      // Click the logout button
+      cy.clickButton(i18n.t(ActionButton.LogOut) as string);
+
+      // Check that we're redirected to login page
+      cy.url().should("include", Routes.Login);
+    });
   });
 });
diff --git a/packages/svg/src/assets/power-circle.svg b/packages/svg/src/assets/power-circle.svg
new file mode 100644
index 000000000..5900de8b0
--- /dev/null
+++ b/packages/svg/src/assets/power-circle.svg
@@ -0,0 +1,48 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="24" height="24" viewBox="0 0 1280.000000 1280.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.15, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)"
+fill="currentColor" stroke="none">
+<path d="M6265 9803 c-145 -52 -247 -158 -291 -302 -11 -38 -14 -267 -14
+-1399 0 -1337 0 -1353 20 -1413 24 -69 38 -95 92 -160 21 -26 38 -52 38 -57 0
+-19 113 -104 177 -133 146 -67 322 -55 446 30 101 69 173 182 196 306 8 40 11
+460 11 1354 0 1434 3 1360 -65 1491 -20 36 -59 88 -87 116 -29 27 -45 40 -37
+29 7 -11 -8 2 -36 28 -27 26 -83 65 -124 85 -68 34 -82 37 -175 40 -77 2 -113
+-2 -151 -15z"/>
+<path d="M5005 9526 c-1015 -446 -1757 -1381 -1969 -2481 -76 -394 -78 -863
+-6 -1262 68 -373 216 -776 403 -1098 22 -38 40 -75 40 -82 0 -7 3 -10 7 -8 3
+2 15 -10 25 -27 13 -22 14 -29 4 -24 -8 4 -3 -2 11 -14 14 -12 19 -19 12 -15
+-11 6 -12 3 -4 -11 13 -23 47 -65 36 -45 -4 9 -3 12 4 7 6 -4 9 -13 6 -20 -3
+-7 3 -19 12 -27 15 -12 17 -12 9 0 -5 9 -4 12 3 7 6 -4 9 -13 6 -20 -3 -8 0
+-17 7 -22 8 -5 10 -3 4 7 -5 8 -4 11 1 6 5 -5 9 -16 9 -25 0 -9 5 -17 12 -17
+6 0 15 -4 20 -9 5 -5 3 -6 -4 -2 -7 4 -13 3 -13 -2 0 -15 26 -33 35 -24 5 4 5
+1 1 -6 -15 -26 265 -348 442 -509 545 -493 1165 -788 1880 -894 177 -26 590
+-37 782 -20 823 73 1580 430 2157 1018 559 568 899 1303 974 2106 17 185 6
+612 -20 787 -116 778 -450 1442 -1000 1990 -169 167 -383 346 -403 334 -7 -4
+-10 -4 -6 1 4 4 3 14 -3 22 -14 16 -33 18 -23 1 4 -7 3 -8 -5 -4 -6 4 -9 11
+-6 16 6 10 -43 43 -54 36 -5 -3 -15 2 -22 12 -12 15 -12 16 1 7 9 -5 6 -1 -7
+10 -31 28 -88 61 -78 46 5 -9 2 -9 -13 0 -12 7 -18 17 -16 21 3 5 2 8 -3 7
+-21 -4 -34 2 -27 13 4 7 3 8 -4 4 -15 -9 -55 18 -44 29 4 5 2 5 -5 1 -6 -3
+-35 8 -64 25 -107 63 -417 209 -444 209 -3 0 -5 -219 -5 -487 l0 -488 45 -28
+c25 -16 43 -33 40 -37 -10 -16 50 -73 182 -172 236 -176 456 -405 603 -628 34
+-52 66 -94 71 -93 4 2 5 -5 2 -14 -4 -11 -3 -14 5 -9 7 4 10 2 7 -6 -3 -7 9
+-35 25 -63 16 -27 30 -45 30 -40 0 6 5 2 11 -8 5 -9 7 -22 3 -29 -4 -6 -3 -8
+4 -4 13 8 26 -29 16 -45 -4 -7 -3 -9 3 -6 11 7 22 -13 60 -113 254 -664 221
+-1404 -92 -2031 -127 -255 -258 -439 -454 -642 -389 -401 -868 -652 -1419
+-742 -440 -72 -911 -20 -1333 146 -71 28 -126 55 -123 60 3 5 -3 6 -12 2 -13
+-5 -15 -3 -9 7 5 8 4 11 -3 7 -13 -9 -44 2 -37 13 3 4 -2 11 -11 14 -8 3 -12
+2 -9 -4 3 -6 -1 -7 -9 -4 -9 3 -14 9 -11 14 7 11 -93 62 -107 54 -6 -4 -8 -3
+-5 3 4 6 -30 33 -74 62 -183 120 -405 321 -543 492 -275 343 -449 736 -523
+1184 -26 158 -26 593 0 750 110 666 441 1221 969 1627 194 148 221 172 241
+205 29 50 39 193 35 527 -3 275 -5 315 -21 347 -20 39 -62 67 -71 46 -2 -7 -5
+21 -5 61 -1 39 -4 72 -8 72 -5 -1 -62 -25 -128 -54z m3645 -1956 c6 -11 8 -20
+6 -20 -3 0 -10 9 -16 20 -6 11 -8 20 -6 20 3 0 10 -9 16 -20z m-3425 -3410 c3
+-6 -1 -7 -9 -4 -18 7 -21 14 -7 14 6 0 13 -4 16 -10z"/>
+</g>
+</svg>
diff --git a/packages/svg/src/index.ts b/packages/svg/src/index.ts
index 2c88a8644..0346623ca 100644
--- a/packages/svg/src/index.ts
+++ b/packages/svg/src/index.ts
@@ -35,6 +35,7 @@ export { default as Plus } from "./assets/plus.svg";
 export { default as Minus } from "./assets/minus.svg";
 export { default as Google } from "./assets/google.svg";
 export { default as Key } from "./assets/key.svg";
+export { default as PowerCircle } from "./assets/power-circle.svg";
 
 // Export a standard type for SVG component, to be used throughout the app
 import type { SVGComponent } from "./types";
diff --git a/packages/translations/src/dict/en.json b/packages/translations/src/dict/en.json
index b7ec4120d..efb29d01a 100644
--- a/packages/translations/src/dict/en.json
+++ b/packages/translations/src/dict/en.json
@@ -219,6 +219,7 @@
   },
   "ActionButton": {
     "SignIn": "Signin",
+    "LogOut": "Log out",
     "TroubleSigningIn": "Trouble signing in?",
     "CodeNotReceived": "Didn't receive the code?",
 
diff --git a/packages/translations/src/dict/it.json b/packages/translations/src/dict/it.json
index fee2c46df..01574ccc4 100644
--- a/packages/translations/src/dict/it.json
+++ b/packages/translations/src/dict/it.json
@@ -220,6 +220,7 @@
   },
   "ActionButton": {
     "SignIn": "Accedi",
+    "Log out": "Esci",
     "TroubleSigningIn": "Problemi con l'accesso?",
     "CodeNotReceived": "Non hai ricevuto il codice?",
 
diff --git a/packages/translations/src/translations.ts b/packages/translations/src/translations.ts
index 51b05aa61..f923d5e03 100644
--- a/packages/translations/src/translations.ts
+++ b/packages/translations/src/translations.ts
@@ -233,6 +233,7 @@ export enum Prompt {
 
 export enum ActionButton {
   SignIn = "ActionButton.SignIn",
+  LogOut = "ActionButton.LogOut",
   TroubleSigningIn = "ActionButton.TroubleSigningIn",
   CodeNotReceived = "ActionButton.CodeNotReceived",
 
diff --git a/packages/ui/package.json b/packages/ui/package.json
index ae2edda7a..0739657d2 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -86,7 +86,8 @@
     "typescript": "~5.0.4",
     "uuid": "^8.3.2",
     "vite": "~4.3.1",
-    "vitest": "~0.31.3"
+    "vitest": "~0.31.3",
+    "jsdom": "~22.1.0"
   },
   "dependencies": {
     "@tailwindcss/forms": "^0.5.2",
diff --git a/packages/ui/src/CustomerGrid/CustomerGrid.stories.tsx b/packages/ui/src/CustomerGrid/CustomerGrid.stories.tsx
index 2835474cc..c40289891 100644
--- a/packages/ui/src/CustomerGrid/CustomerGrid.stories.tsx
+++ b/packages/ui/src/CustomerGrid/CustomerGrid.stories.tsx
@@ -47,3 +47,22 @@ export const Default = (): JSX.Element => {
     </>
   );
 };
+
+export const ApprovalsOnly = (): JSX.Element => {
+  const [filterString, setFilterString] = React.useState("");
+
+  return (
+    <>
+      <SearchBar
+        value={filterString}
+        onChange={(e) => setFilterString(e.target.value)}
+      />
+
+      <CustomerGrid
+        customers={customers}
+        filterString={filterString}
+        approvalsOnly
+      />
+    </>
+  );
+};
diff --git a/packages/ui/src/CustomerGrid/CustomerGrid.tsx b/packages/ui/src/CustomerGrid/CustomerGrid.tsx
index 7514f29bb..c40e65d09 100644
--- a/packages/ui/src/CustomerGrid/CustomerGrid.tsx
+++ b/packages/ui/src/CustomerGrid/CustomerGrid.tsx
@@ -1,5 +1,4 @@
-import React, { useEffect, useState } from "react";
-import { useHistory } from "react-router-dom";
+import React from "react";
 
 import { Customer, CustomerFull } from "@eisbuk/shared";
 
@@ -11,32 +10,23 @@ interface CustomerGridProps extends React.HTMLAttributes<HTMLDivElement> {
   className?: string;
   customers?: CustomerFull[];
   filterString?: string;
+  approvalsOnly?: boolean;
   onCustomerClick?: (customer: Customer) => void;
 }
 
 const CustomerGrid: React.FC<CustomerGridProps> = ({
   customers,
   filterString = "",
+  approvalsOnly = false,
   onCustomerClick = () => {},
   ...props
 }) => {
   const filterRegex = new RegExp(filterString, "i");
 
-  const history = useHistory();
-
-  const [toggled, setToggle] = useState(true);
-
-  useEffect(() => {
-    setToggle(
-      history.location.search !== "" &&
-        history.location.search === "?approvals=true"
-    );
-  }, [history.location.search]);
-
   const customerMap = (customer: CustomerFull) =>
     (filterRegex.test(customer.name) || filterRegex.test(customer.surname)) &&
     !customer.deleted &&
-    (toggled ? customer.categories.length === 0 : true);
+    (!approvalsOnly || !customer.categories.length);
 
   return (
     <div {...props}>
diff --git a/packages/ui/src/Forms/CustomerForm/FormAdmin.tsx b/packages/ui/src/Forms/CustomerForm/FormAdmin.tsx
index 66222abcf..5c06b85ea 100644
--- a/packages/ui/src/Forms/CustomerForm/FormAdmin.tsx
+++ b/packages/ui/src/Forms/CustomerForm/FormAdmin.tsx
@@ -28,6 +28,8 @@ import SectionAdminOnly, {
   AdminOnlyValidations,
 } from "./SectionAdminOnly";
 
+import { trimStringValues } from "./utils";
+
 type FormAdminValues = Omit<CustomerFull, "id" | "secretKey">;
 
 export interface FormAdminProps {
@@ -127,7 +129,7 @@ const CustomerCard: React.FC<FormAdminProps> = ({
           validationSchema={validationSchema}
           initialValues={initialValues}
           onSubmit={async (values, formikHelpers) => {
-            const res = onSave(values, formikHelpers);
+            const res = onSave(trimStringValues(values), formikHelpers);
             if (res instanceof Promise) {
               await res;
             }
diff --git a/packages/ui/src/Forms/CustomerForm/FormProfile.tsx b/packages/ui/src/Forms/CustomerForm/FormProfile.tsx
index 123a088c2..853e1f6a0 100644
--- a/packages/ui/src/Forms/CustomerForm/FormProfile.tsx
+++ b/packages/ui/src/Forms/CustomerForm/FormProfile.tsx
@@ -16,6 +16,8 @@ import SectionMedicalDetails, {
 } from "./SectionMedicalDetails";
 import FormButton, { FormButtonColor } from "../FormButton";
 
+import { trimStringValues } from "./utils";
+
 type FormProfileValues = PersonalDetailsFields & MedicalDetailsFields;
 
 export interface FormProfile {
@@ -54,7 +56,7 @@ const FormProfile: React.FC<FormProfile> = ({
       validationSchema={validationSchema}
       initialValues={initialValues}
       onSubmit={(values, formikHelpers) => {
-        onSave(values, formikHelpers);
+        onSave(trimStringValues(values), formikHelpers);
         formikHelpers.setSubmitting(false);
         toggleEdit();
       }}
diff --git a/packages/ui/src/Forms/CustomerForm/FormSelfReg.tsx b/packages/ui/src/Forms/CustomerForm/FormSelfReg.tsx
index af639c93e..f472780c0 100644
--- a/packages/ui/src/Forms/CustomerForm/FormSelfReg.tsx
+++ b/packages/ui/src/Forms/CustomerForm/FormSelfReg.tsx
@@ -22,6 +22,8 @@ import SectionRegistrationCode, {
 } from "./SectionRegistrationCode";
 import FormButton, { FormButtonColor } from "../FormButton";
 
+import { trimStringValues } from "./utils";
+
 type FormSelfRegValues = PersonalDetailsFields &
   MedicalDetailsFields &
   RegistrationCodeFields;
@@ -61,7 +63,7 @@ const FormSelfReg: React.FC<FormSelfRegProps> = ({
       validationSchema={validationSchema}
       initialValues={initialValues}
       onSubmit={(values, formikHelpers) => {
-        onSave(values, formikHelpers);
+        onSave(trimStringValues(values), formikHelpers);
       }}
     >
       {({ isSubmitting, resetForm }) => (
diff --git a/packages/ui/src/Forms/CustomerForm/__tests__/FormAdmin.test.tsx b/packages/ui/src/Forms/CustomerForm/__tests__/FormAdmin.test.tsx
index 17d8c8f1e..88939b5d4 100644
--- a/packages/ui/src/Forms/CustomerForm/__tests__/FormAdmin.test.tsx
+++ b/packages/ui/src/Forms/CustomerForm/__tests__/FormAdmin.test.tsx
@@ -413,6 +413,42 @@ describe("CustomerForm", () => {
       });
     });
 
+    test("should trim string fields when calling 'onSave'", async () => {
+      const mockSave = vi.fn();
+      const mockClose = vi.fn();
+      render(<CustomerForm.Admin onSave={mockSave} onClose={mockClose} />);
+
+      // Fill out the mimimal fields
+      const nameField = screen.getByLabelText(
+        t(CustomerLabel.Name)
+      ) as HTMLInputElement;
+      userEvent.type(nameField, "Saul ");
+      const surnameField = screen.getByLabelText(
+        t(CustomerLabel.Surname)
+      ) as HTMLInputElement;
+      userEvent.type(surnameField, "Goodman ");
+      const subscriptionNumberField = screen.getByLabelText(
+        t(CustomerLabel.CardNumber)
+      ) as HTMLInputElement;
+      userEvent.type(subscriptionNumberField, " 12345");
+      const competitiveCategoryField = screen.getByLabelText(
+        t(Category.Competitive)
+      ) as HTMLInputElement;
+      userEvent.click(competitiveCategoryField);
+
+      userEvent.click(screen.getAllByText(t(ActionButton.Save))[0]);
+      await waitFor(() => {
+        expect(mockSave).toHaveBeenCalledWith(
+          expect.objectContaining({
+            name: "Saul",
+            surname: "Goodman",
+            subscriptionNumber: "12345",
+          }),
+          expect.any(Object)
+        );
+      });
+    });
+
     test("should not render additional actions (as customer doesn't exist", () => {
       render(<CustomerForm.Admin />);
       expect(
diff --git a/packages/ui/src/Forms/CustomerForm/__tests__/FormProfile.test.tsx b/packages/ui/src/Forms/CustomerForm/__tests__/FormProfile.test.tsx
index deec938cc..bd0247056 100644
--- a/packages/ui/src/Forms/CustomerForm/__tests__/FormProfile.test.tsx
+++ b/packages/ui/src/Forms/CustomerForm/__tests__/FormProfile.test.tsx
@@ -104,5 +104,36 @@ describe("CustomerForm", () => {
         );
       });
     });
+
+    test("should trim string fields when calling onSave", async () => {
+      const mockSave = vi.fn();
+      render(<CustomerForm.Profile customer={saul} onSave={mockSave} />);
+      userEvent.click(screen.getByText(i18n.t(ActionButton.Edit) as string));
+
+      const nameField = screen.getByLabelText(
+        i18n.t(CustomerLabel.Name) as string
+      ) as HTMLInputElement;
+      userEvent.clear(nameField);
+      userEvent.type(nameField, "Jimmy ");
+
+      const surnameField = screen.getByLabelText(
+        i18n.t(CustomerLabel.Surname) as string
+      ) as HTMLInputElement;
+      userEvent.clear(surnameField);
+      userEvent.type(surnameField, " McGill");
+
+      // Save the form
+      userEvent.click(screen.getByText(i18n.t(ActionButton.Save) as string));
+      await waitFor(() => {
+        expect(mockSave).toHaveBeenCalledWith(
+          {
+            ...saul,
+            name: "Jimmy",
+            surname: "McGill",
+          },
+          expect.objectContaining({})
+        );
+      });
+    });
   });
 });
diff --git a/packages/ui/src/Forms/CustomerForm/__tests__/FormSelfReg.test.tsx b/packages/ui/src/Forms/CustomerForm/__tests__/FormSelfReg.test.tsx
index 7f3bc8486..1b0681996 100644
--- a/packages/ui/src/Forms/CustomerForm/__tests__/FormSelfReg.test.tsx
+++ b/packages/ui/src/Forms/CustomerForm/__tests__/FormSelfReg.test.tsx
@@ -108,7 +108,7 @@ describe("CustomerForm", () => {
       ).toHaveProperty("disabled", true);
     });
 
-    test.only("should call onSave on save click", async () => {
+    test("should call onSave on save click", async () => {
       const mockSave = vi.fn();
       render(
         <CustomerForm.SelfReg
@@ -144,5 +144,42 @@ describe("CustomerForm", () => {
         );
       });
     });
+
+    test("should trim string values when calling onSave", async () => {
+      const mockSave = vi.fn();
+      render(
+        <CustomerForm.SelfReg
+          customer={{ email: saul.email }}
+          onSave={mockSave}
+        />
+      );
+
+      // Fill out the minimal fields
+      userEvent.type(
+        screen.getByLabelText(i18n.t(CustomerLabel.Name) as string),
+        "Saul "
+      );
+      userEvent.type(
+        screen.getByLabelText(i18n.t(CustomerLabel.Surname) as string),
+        "Goodman "
+      );
+      userEvent.type(
+        screen.getByLabelText(i18n.t(CustomerLabel.RegistrationCode) as string),
+        " CODE111"
+      );
+
+      // Save the form
+      userEvent.click(screen.getByText(i18n.t(ActionButton.Save) as string));
+      await waitFor(() => {
+        expect(mockSave).toHaveBeenCalledWith(
+          expect.objectContaining({
+            name: "Saul",
+            surname: "Goodman",
+            email: saul.email,
+          }),
+          expect.objectContaining({})
+        );
+      });
+    });
   });
 });
diff --git a/packages/ui/src/Forms/CustomerForm/utils.ts b/packages/ui/src/Forms/CustomerForm/utils.ts
new file mode 100644
index 000000000..11fed91bc
--- /dev/null
+++ b/packages/ui/src/Forms/CustomerForm/utils.ts
@@ -0,0 +1,8 @@
+/** Iterates over the object and trims all string values (if any) */
+export const trimStringValues = <O extends Record<string, any>>(obj: O) =>
+  Object.fromEntries(
+    Object.entries(obj).map(([key, value]) => [
+      key,
+      typeof value === "string" ? value.trim() : value,
+    ])
+  ) as O;
diff --git a/packages/ui/src/IntervalCard/BookingCardContainer.tsx b/packages/ui/src/IntervalCard/BookingCardContainer.tsx
index 9f9f25309..2d57e7dd8 100644
--- a/packages/ui/src/IntervalCard/BookingCardContainer.tsx
+++ b/packages/ui/src/IntervalCard/BookingCardContainer.tsx
@@ -33,6 +33,7 @@ const containerSizeLookup = {
   [IntervalDuration["1h"]]: ["w-[220px]", "min-h-[110px]", "px-4", "py-2.5"],
   [IntervalDuration["1.5h"]]: ["w-[320px]", "h-[128px]", "px-4", "py-3"],
   [IntervalDuration["2h"]]: ["w-[401px]", "h-[146px]", "px-4", "py-3"],
+  [IntervalDuration["2h+"]]: ["w-[401px]", "h-[146px]", "px-4", "py-3"],
 };
 
 const getOutlineClasses = (type: SlotType, state: IntervalCardState) => {
diff --git a/packages/ui/src/IntervalCard/CardContent.tsx b/packages/ui/src/IntervalCard/CardContent.tsx
index 28b1adf61..21bc6fbc7 100644
--- a/packages/ui/src/IntervalCard/CardContent.tsx
+++ b/packages/ui/src/IntervalCard/CardContent.tsx
@@ -89,6 +89,12 @@ const timestringBookingSizeLookup = {
     "font-semibold",
   ],
   [IntervalDuration["2h"]]: ["mb-4", "text-4xl", "leading-10", "font-semibold"],
+  [IntervalDuration["2h+"]]: [
+    "mb-4",
+    "text-4xl",
+    "leading-10",
+    "font-semibold",
+  ],
 };
 
 const timestringSizeLookup = {
diff --git a/packages/ui/src/IntervalCard/IntervalCard.stories.tsx b/packages/ui/src/IntervalCard/IntervalCard.stories.tsx
index 3111228fb..b06dbeddc 100644
--- a/packages/ui/src/IntervalCard/IntervalCard.stories.tsx
+++ b/packages/ui/src/IntervalCard/IntervalCard.stories.tsx
@@ -38,6 +38,11 @@ const twoHourInterval = {
   endTime: "11:00",
 };
 
+const longInterval = {
+  startTime: "09:00",
+  endTime: "11:10",
+};
+
 export const Sizes = (): JSX.Element => (
   <>
     <StorybookGrid cols={2}>
@@ -64,6 +69,14 @@ export const Sizes = (): JSX.Element => (
           interval={twoHourInterval}
         />
       </StorybookItem>
+      <StorybookItem height={240} label="Duration: 2h+">
+        <IntervalCard
+          {...baseSlot}
+          variant={IntervalCardVariant.Booking}
+          state={IntervalCardState.Active}
+          interval={longInterval}
+        />
+      </StorybookItem>
     </StorybookGrid>
   </>
 );
diff --git a/packages/ui/src/IntervalCard/__tests__/IntervalCard.test.tsx b/packages/ui/src/IntervalCard/__tests__/IntervalCard.test.tsx
index 50f02f469..216baca46 100644
--- a/packages/ui/src/IntervalCard/__tests__/IntervalCard.test.tsx
+++ b/packages/ui/src/IntervalCard/__tests__/IntervalCard.test.tsx
@@ -21,11 +21,14 @@ const baseProps = {
 interface TestParams {
   variant: IntervalCardVariant;
   state: IntervalCardState;
+}
+
+interface BookingTestParams extends TestParams {
   onBook: boolean;
   onCancel: boolean;
 }
 
-const runBookingTableTests = (tests: TestParams[]) => {
+const runBookingTableTests = (tests: BookingTestParams[]) => {
   afterEach(() => {
     vi.clearAllMocks();
     cleanup();
@@ -53,8 +56,24 @@ const runBookingTableTests = (tests: TestParams[]) => {
   );
 };
 
+const runLongIntervalTableTests = (tests: TestParams[]) =>
+  tests.forEach(({ variant, state }) =>
+    test(`variant: "${variant}", state: "${state}", should not break if interval is longer than two hours`, () => {
+      render(
+        <IntervalCard
+          {...{
+            ...baseProps,
+            interval: { startTime: "09:00", endTime: "12:00" },
+            variant,
+            state,
+          }}
+        />
+      );
+    })
+  );
+
 describe("IntervalCard", () => {
-  describe("Table tests", () => {
+  describe("Booking table tests", () => {
     runBookingTableTests([
       // Variant: "Booking"
       {
@@ -98,6 +117,38 @@ describe("IntervalCard", () => {
     ]);
   });
 
+  describe("Long interval tests", () => {
+    runLongIntervalTableTests([
+      // Variant: "Booking"
+      {
+        variant: IntervalCardVariant.Booking,
+        state: IntervalCardState.Default,
+      },
+      {
+        variant: IntervalCardVariant.Booking,
+        state: IntervalCardState.Active,
+      },
+      {
+        variant: IntervalCardVariant.Booking,
+        state: IntervalCardState.Disabled,
+      },
+
+      // Variant: "Calendar"
+      {
+        variant: IntervalCardVariant.Calendar,
+        state: IntervalCardState.Default,
+      },
+      {
+        variant: IntervalCardVariant.Calendar,
+        state: IntervalCardState.Active,
+      },
+      {
+        variant: IntervalCardVariant.Calendar,
+        state: IntervalCardState.Disabled,
+      },
+    ]);
+  });
+
   describe("Test NotesSection in calendar card", () => {
     const mockOnNotesEditStart = vi.fn();
     // We're using an async function to handle 'onNotesEditSave' in order
diff --git a/packages/ui/src/IntervalCard/__tests__/intervalCardUtils.test.ts b/packages/ui/src/IntervalCard/__tests__/intervalCardUtils.test.ts
index 63418b3bf..b7cef7f4f 100644
--- a/packages/ui/src/IntervalCard/__tests__/intervalCardUtils.test.ts
+++ b/packages/ui/src/IntervalCard/__tests__/intervalCardUtils.test.ts
@@ -36,6 +36,10 @@ describe("IntervalCard", () => {
       { startTime: "09:00", endTime: "10:40", want: IntervalDuration["2h"] },
       { startTime: "09:00", endTime: "10:50", want: IntervalDuration["2h"] },
       { startTime: "09:00", endTime: "11:00", want: IntervalDuration["2h"] },
+
+      { startTime: "09:00", endTime: "11:01", want: IntervalDuration["2h+"] },
+      { startTime: "09:00", endTime: "18:50", want: IntervalDuration["2h+"] },
+      { startTime: "09:00", endTime: "23:00", want: IntervalDuration["2h+"] },
     ]);
   });
 });
diff --git a/packages/ui/src/IntervalCard/types.ts b/packages/ui/src/IntervalCard/types.ts
index 2435ab0ef..f6a7e96b5 100644
--- a/packages/ui/src/IntervalCard/types.ts
+++ b/packages/ui/src/IntervalCard/types.ts
@@ -21,6 +21,7 @@ export enum IntervalDuration {
   "1h",
   "1.5h",
   "2h",
+  "2h+",
 }
 
 export type IntervalCardProps = Pick<SlotInterface, "type" | "date" | "notes"> &
diff --git a/packages/ui/src/IntervalCard/utils.ts b/packages/ui/src/IntervalCard/utils.ts
index bdf275587..6e0139933 100644
--- a/packages/ui/src/IntervalCard/utils.ts
+++ b/packages/ui/src/IntervalCard/utils.ts
@@ -17,6 +17,8 @@ export const calculateDuration = (startTime: string, endTime: string) => {
   const diffMillis =
     getMillisFromMidnight(endTime) - getMillisFromMidnight(startTime);
 
-  const duration = `${Math.ceil((diffMillis / hourInMillis) * 2) * 0.5}h`;
+  const durationHours = Math.ceil((diffMillis / hourInMillis) * 2) * 0.5;
+  const duration = durationHours > 2 ? "2h+" : `${durationHours}h`;
+
   return IntervalDuration[duration];
 };
diff --git a/packages/ui/src/Layout/AdminBar.tsx b/packages/ui/src/Layout/AdminBar.tsx
index 69a2c3c6e..90d54b580 100644
--- a/packages/ui/src/Layout/AdminBar.tsx
+++ b/packages/ui/src/Layout/AdminBar.tsx
@@ -1,7 +1,8 @@
 import React from "react";
 import { Link, useLocation } from "react-router-dom";
 
-import { AdminAria, useTranslation } from "@eisbuk/translations";
+import { ActionButton, AdminAria, useTranslation } from "@eisbuk/translations";
+import { PowerCircle } from "@eisbuk/svg";
 
 import Button from "../Button";
 import { LinkItem } from "./Layout";
@@ -11,25 +12,25 @@ interface AdminBarProps {
   adminLinks: LinkItem[];
   className?: string;
   additionalContent?: JSX.Element;
+  onLogout?: () => void;
 }
 
 const AdminBar: React.FC<AdminBarProps> = ({
   adminLinks,
   className = "",
   additionalContent,
+  onLogout = () => {},
 }) => {
-  const { pathname: currentPath } = useLocation();
+  const { pathname } = useLocation();
+  const currentPath = pathname.split("?")[0].replace(/\/$/, "");
 
   const { t } = useTranslation();
   return (
-    <div
-      aria-label={t(AdminAria.PageNav)}
-      className={[className, "md:justify-end"].join(" ")}
-    >
-      <MobileHamburgerMenu adminLinks={adminLinks} />
+    <div aria-label={t(AdminAria.PageNav)} className={className}>
+      <MobileHamburgerMenu adminLinks={adminLinks} onLogout={onLogout} />
       <div className={baseClasses.join(" ")}>
         {adminLinks.map(({ Icon, label, slug }, i) => {
-          const isActive = currentPath === slug;
+          const isActive = slug === currentPath;
 
           return (
             <Link key={label + i} className="min-w-36 h-full" to={slug}>
@@ -49,8 +50,19 @@ const AdminBar: React.FC<AdminBarProps> = ({
           );
         })}
       </div>
-      <div key="additional-content" className="flex align-center pr-2">
-        {additionalContent}
+      <div className="flex items-center">
+        <div key="additional-content" className="flex align-center">
+          {additionalContent}
+        </div>
+        <button
+          onClick={onLogout}
+          className="hidden pl-4 pr-2 py-0.5 items-center whitespace-nowrap rounded-lg text-white gap-x-1 md:flex hover:bg-white/10"
+        >
+          {t(ActionButton.LogOut)}
+          <span className="h-9 w-9 block">
+            <PowerCircle />
+          </span>
+        </button>
       </div>
     </div>
   );
diff --git a/packages/ui/src/Layout/Layout.tsx b/packages/ui/src/Layout/Layout.tsx
index 45e66abec..e1d08e0dc 100644
--- a/packages/ui/src/Layout/Layout.tsx
+++ b/packages/ui/src/Layout/Layout.tsx
@@ -14,6 +14,7 @@ interface LayoutProps {
   children?: React.ReactNode[] | React.ReactNode;
   isAdmin?: boolean;
   adminLinks?: LinkItem[];
+  onLogout?: () => void;
 }
 export interface LinkItem {
   Icon: SVGComponent;
@@ -30,6 +31,7 @@ const Layout: React.FC<LayoutProps> = ({
   isAdmin = false,
   children,
   adminLinks,
+  onLogout = () => {},
 }) => {
   return (
     <div className="absolute top-0 right-0 bottom-0 left-0 flex flex-col overflow-hidden">
@@ -40,6 +42,7 @@ const Layout: React.FC<LayoutProps> = ({
               className={getHeaderRowClasses("top")}
               adminLinks={adminLinks}
               additionalContent={additionalAdminContent}
+              onLogout={onLogout}
             />
           )}
 
diff --git a/packages/ui/src/Layout/MobileHamburgerMenu.tsx b/packages/ui/src/Layout/MobileHamburgerMenu.tsx
index acd866f4e..177ea7c3b 100644
--- a/packages/ui/src/Layout/MobileHamburgerMenu.tsx
+++ b/packages/ui/src/Layout/MobileHamburgerMenu.tsx
@@ -1,7 +1,9 @@
 import React, { useState } from "react";
 import { Link } from "react-router-dom";
 
-import { SVGComponent } from "@eisbuk/svg";
+import { ActionButton, useTranslation } from "@eisbuk/translations";
+
+import { PowerCircle, SVGComponent } from "@eisbuk/svg";
 
 interface Item {
   Icon: SVGComponent;
@@ -10,13 +12,17 @@ interface Item {
 }
 interface MobileHamburgerMenuProps {
   adminLinks: Item[];
+  onLogout?: () => void;
 }
 
 const MobileHamburgerMenu: React.FC<MobileHamburgerMenuProps> = ({
   adminLinks,
+  onLogout = () => {},
 }) => {
   const [isNavOpen, setIsNavOpen] = useState(false);
 
+  const { t } = useTranslation();
+
   return (
     <div className="flex items-center justify-between py-8 md:hidden">
       <nav>
@@ -32,7 +38,7 @@ const MobileHamburgerMenu: React.FC<MobileHamburgerMenuProps> = ({
 
           <div className={getMenuNavStyles(isNavOpen)}>
             <div
-              className="absolute top-0 right-0 px-8 py-8"
+              className="absolute top-0 left-0 px-8 py-8"
               onClick={() => setIsNavOpen(false)}
             >
               <svg
@@ -48,6 +54,15 @@ const MobileHamburgerMenu: React.FC<MobileHamburgerMenuProps> = ({
                 <line x1="6" y1="6" x2="18" y2="18" />
               </svg>
             </div>
+            <button
+              onClick={onLogout}
+              className="flex absolute top-0 right-0 pl-8 pr-6 py-7 items-center whitespace-nowrap rounded-lg text-xl text-gray-600 gap-x-1"
+            >
+              {t(ActionButton.LogOut)}
+              <span className="h-10 w-10 block">
+                <PowerCircle />
+              </span>
+            </button>
             <ul className="flex flex-col items-center justify-between min-h-[250px]">
               {adminLinks.map(({ label, slug }) => (
                 <li
@@ -74,7 +89,7 @@ const getMenuNavStyles = (isNavOpen: boolean) => {
     "bg-white",
     "top-0",
     "left-0",
-    "z-10",
+    "z-50",
     "flex",
     "flex-col",
     "justify-evenly",
diff --git a/packages/ui/src/SlotsDayContainer/SlotsDayContainer.tsx b/packages/ui/src/SlotsDayContainer/SlotsDayContainer.tsx
index 4e2a22547..ca92150d2 100644
--- a/packages/ui/src/SlotsDayContainer/SlotsDayContainer.tsx
+++ b/packages/ui/src/SlotsDayContainer/SlotsDayContainer.tsx
@@ -29,7 +29,7 @@ const SlotsDayConatiner: React.FC<SlotsDayContainerProps> = ({
 
   return (
     <div className={[...containerClasses, className].join(" ")}>
-      <div className="sticky top-0 z-50 bg-white pt-6 pb-8">
+      <div className="sticky top-0 z-40 bg-white pt-6 pb-8">
         <h1 className="text-2xl font-normal leading-none text-gray-700 cursor-normal select-none">
           {dateString}
         </h1>
diff --git a/packages/ui/src/utils/__tests__/helpers.test.ts b/packages/ui/src/utils/__tests__/helpers.test.ts
index 2cf696df3..e877c9ab3 100644
--- a/packages/ui/src/utils/__tests__/helpers.test.ts
+++ b/packages/ui/src/utils/__tests__/helpers.test.ts
@@ -43,6 +43,11 @@ describe("Test helpers", () => {
       expect(shortName(name, surname)).toEqual(["John", "Doe"]);
     });
 
+    test("should not be thrown off it name has additional prepended, appended spaces", () => {
+      expect(shortName("John ", "Doe ")).toEqual(["John", "Doe"]);
+      expect(shortName(" John", " Doe")).toEqual(["John", "Doe"]);
+    });
+
     test("should shorten the name and surname and return a string containing full first name and last name with all other names shortened", () => {
       const name = "John Ronald Reuel";
       const surname = "Tolkien";
diff --git a/packages/ui/src/utils/helpers.ts b/packages/ui/src/utils/helpers.ts
index 4484488b6..57bc90f89 100644
--- a/packages/ui/src/utils/helpers.ts
+++ b/packages/ui/src/utils/helpers.ts
@@ -35,8 +35,8 @@ export const sortIntervals = (a: string, b: string) => {
 };
 
 export const shortName = (name: string, surname: string) => {
-  const nameWords = name.split(" ");
-  const surnameWords = surname.split(" ");
+  const nameWords = name.trim().split(" ");
+  const surnameWords = surname.trim().split(" ");
 
   const n = nameWords
     .map((word, i) => (i === 0 ? word : `${word[0]}.`))