diff --git a/clients/admin-client/src/components/DiceAnalyzer.tsx b/clients/admin-client/src/components/DiceAnalyzer.tsx
index 07e2f5191..36b6eb125 100644
--- a/clients/admin-client/src/components/DiceAnalyzer.tsx
+++ b/clients/admin-client/src/components/DiceAnalyzer.tsx
@@ -100,23 +100,23 @@ export const DiceAnalyzer = (props: DiceAnalyzerProps) => {
               <TextField
                 label="Dice Notation"
                 value={notation}
-                onChange={e => setNotation(e.target.value)}
-                helperText="Example 1d6*2+2"
+                onChange={(e: any) => setNotation(e.target.value)}
+                helpBlock="Example 1d6*2+2"
                 variant="standard"
               />
               <TextField
                 label="Iterations"
                 value={iterations}
-                onChange={e => setIterations(Number(e.target.value))}
+                onChange={(e: any) => setIterations(Number(e.target.value))}
                 variant="standard"
-                sx={{ width: '5ch', ml: 1 }}
+                // sx={{ width: '5ch', ml: 1 }}
               />
               <TextField
                 label="Luck"
                 value={luck}
-                onChange={e => setLuck(e.target.value)}
+                onChange={(e: any) => setLuck(e.target.value)}
                 variant="standard"
-                sx={{ width: '5ch', ml: 1 }}
+                // sx={{ width: '5ch', ml: 1 }}
               />
             </Box>
           </Stack>
diff --git a/clients/admin-client/src/pages/login.page.tsx b/clients/admin-client/src/pages/login.page.tsx
new file mode 100644
index 000000000..371152248
--- /dev/null
+++ b/clients/admin-client/src/pages/login.page.tsx
@@ -0,0 +1,16 @@
+import { Paper, Link, Button, TextField, faArrowRight, FontAwesomeIcon } from '@cats-cradle/design-system/dist/main';
+
+export default function LoginPage() {
+  return (
+    <main className="container">
+      <Paper elevation="1">
+        <h1>Log In</h1>
+        <TextField id="email-address" label="Email Address" type="text"/>
+
+        <Link href="/forgot-password">Forgot Password</Link>
+        <TextField id="password" label="Password" type="password"/>
+        <Button onClick={()=>{}} color="primary">Log In <FontAwesomeIcon icon={faArrowRight}/></Button>
+      </Paper>
+    </main>
+  );
+}
diff --git a/clients/admin-client/src/routing/Router.tsx b/clients/admin-client/src/routing/Router.tsx
index 886952ea5..065ecca08 100644
--- a/clients/admin-client/src/routing/Router.tsx
+++ b/clients/admin-client/src/routing/Router.tsx
@@ -7,6 +7,7 @@ import HomePage from '../pages/home.page';
 import { Outlet} from 'react-router-dom';
 import { BreadCrumbs } from '../components/Breadcrumbs';
 import Header from "../components/Header";
+import LoginPage from '../pages/login.page';
 
 const Root = () => {
   return (
@@ -32,6 +33,24 @@ const router = createBrowserRouter([
         index: true,
         element: <HomePage />,
       },
+      {
+        path: "/login",
+        element: <LoginPage />,
+        handle: {
+          title: 'Log In',
+          url: '/login',
+          crumb: () => <Link to="/login">Log In</Link>,
+        }
+      },
+      {
+        path: "/forgot-password",
+        element: <LoginPage />,
+        handle: {
+          title: 'Forgot Password',
+          url: '/forgot-password',
+          crumb: () => <Link to="/forgot-password">Forgot Password</Link>,
+        }
+      },
       {
         path: "/character-sheets",
         element: <CharacterSheetsPage />,
diff --git a/clients/design-system/src/components/Button/style.module.scss b/clients/design-system/src/components/Button/style.module.scss
index 579b1b99e..d8f698871 100644
--- a/clients/design-system/src/components/Button/style.module.scss
+++ b/clients/design-system/src/components/Button/style.module.scss
@@ -50,7 +50,7 @@
       }
       &:hover {
         border-color:  lighten($color-primary, 5%);
-        color: lighten($color-primary, 5%);
+        color: $color-black;
       }
     }
     &.button-inherit {
@@ -90,7 +90,7 @@
     }
     &.button-normal, &.button-medium {
       font-size: 1rem;
-      padding: 15px 25px 10px 25px;
+      padding: 15px 46px 10px 46px;
     }
     &.button-large {
       font-size: 1.4rem;
diff --git a/clients/design-system/src/components/PageFooter/PageFooter.tsx b/clients/design-system/src/components/PageFooter/PageFooter.tsx
index 75bbf7e4b..953432489 100644
--- a/clients/design-system/src/components/PageFooter/PageFooter.tsx
+++ b/clients/design-system/src/components/PageFooter/PageFooter.tsx
@@ -36,7 +36,7 @@ export const PageFooter = (props: PageFooterProps) => {
           </div>
           <hr/>
         <Typography variant="body">
-          &copy; {year} {siteOwner}. All Rights Reserved.
+          &copy; {siteOwner}. {year}. All Rights Reserved.
         </Typography>
       </div>
     </footer>
diff --git a/clients/design-system/src/components/PageFooter/style.module.scss b/clients/design-system/src/components/PageFooter/style.module.scss
index 43f2142e8..8d760d037 100644
--- a/clients/design-system/src/components/PageFooter/style.module.scss
+++ b/clients/design-system/src/components/PageFooter/style.module.scss
@@ -2,7 +2,7 @@
 
 :global {
 .page-footer {
-  background-color: $color-white;
+  background-color: $color-off-white;
   color: $color-primary;
   margin: 0;
   padding: 3rem;
diff --git a/clients/design-system/src/components/SocialMediaBar/style.module.scss b/clients/design-system/src/components/SocialMediaBar/style.module.scss
index f71435252..98450b2d0 100644
--- a/clients/design-system/src/components/SocialMediaBar/style.module.scss
+++ b/clients/design-system/src/components/SocialMediaBar/style.module.scss
@@ -3,6 +3,7 @@
 :global {
   .social-media-bar {
     background-color: $color-primary;
+    background: linear-gradient(to top left, $color-primary, darken($color-primary, 20%));
     margin: 0;
     margin-top: 4rem;
     // padding: 0.2rem 3rem;
diff --git a/clients/design-system/src/components/TextField/TextField.tsx b/clients/design-system/src/components/TextField/TextField.tsx
index 51e80ce85..ea0b7d08e 100644
--- a/clients/design-system/src/components/TextField/TextField.tsx
+++ b/clients/design-system/src/components/TextField/TextField.tsx
@@ -1,13 +1,50 @@
-import MUITextField, {
-  TextFieldProps as MUITextFieldProps,
-} from '@mui/material/TextField';
+import React from 'react';
 
-export type TextFieldProps = MUITextFieldProps;
+export type TextFieldProps = {
+  id?: string;
+  type?: 'password' | 'text' | 'number';
+  value?: string | number | undefined;
+  label?: string;
+  helpBlock?: React.ReactNode;
+  size?: 'small' | 'medium' | 'large';
+  invalid?: string;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  variant?: string;
+}
 
-export const TextField = (props: TextFieldProps) => {
-  const { ...muiProps } = props;
+// https://getbootstrap.com/docs/5.0/forms/validation/
+export const TextField = (props: TextFieldProps): JSX.Element => {
+  const { id, label, type, helpBlock, value, size, invalid, onChange } = props;
 
-  return <MUITextField {...muiProps}/>;
-};
+  const classNames = [];
+  classNames.push('form-control');
+  switch(size){
+    case 'small':
+      classNames.push('input-group-sm')
+      break;
+    case 'large':
+      classNames.push('input-group-lg')
+      break;
+    case 'medium':
+      default:
+  }
 
-export default TextField;
\ No newline at end of file
+  // TODO improve validation
+  // TODO add icons left (e.g. $) or right (e.g. calendar)
+  // TODO tip tool for info right top
+
+  if(helpBlock){
+    return (<>
+      {label && <label htmlFor={ id } className="form-label">{ label }</label>}
+      <input id={ id } type={ type } value={value} onChange={ onChange } className={classNames.join(' ')} aria-describedby={ `${id}HelpBlock` }/>
+      { helpBlock && <div id={ `${id}HelpBlock` } className="form-text">{ helpBlock }</div> }
+      { invalid && <div className="invalid-feedback">{ invalid }</div>}
+    </>)
+  }
+
+  return (<>
+    {label && <label htmlFor={ id } className="form-label">{ label }</label>}
+    <input id={ id } type={ type } value={ value } onChange={ onChange  }className={classNames.join(' ')}/>
+    { invalid && <div className="invalid-feedback">{ invalid }</div>}
+  </>)
+};
\ No newline at end of file
diff --git a/clients/design-system/stories/components/molecules/Layout.stories.tsx b/clients/design-system/stories/components/molecules/Layout.stories.tsx
deleted file mode 100644
index d62b536e6..000000000
--- a/clients/design-system/stories/components/molecules/Layout.stories.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import { Meta } from '@storybook/react';
-import { Box, Stack, Item } from '../../../src/main';
-
-export default {
-  title: 'Molecules/Layout',
-  component: Stack,
-} as Meta<typeof Stack>;
-
-export const Default = () => (
-  <Box sx={{ width: '100%' }}>
-    <Stack spacing={2}>
-      <Item>First</Item>
-      <Item>Second</Item>
-      <Item>Third</Item>
-    </Stack>
-  </Box>
-);
diff --git a/clients/player-client/README.md b/clients/player-client/README.md
index db7382762..05ac58302 100644
--- a/clients/player-client/README.md
+++ b/clients/player-client/README.md
@@ -2,3 +2,5 @@
 
 This client connects an individual user to the main game server. It is used to
 build the software that the player uses for playing game.
+
+https://threejs.org/docs/scenes/material-browser.html#MeshToonMaterial