diff --git a/remix/app/Providers/Chakra/space.tsx b/remix/app/Providers/Chakra/space.tsx
index a9d106f..c74e26f 100644
--- a/remix/app/Providers/Chakra/space.tsx
+++ b/remix/app/Providers/Chakra/space.tsx
@@ -1,10 +1,12 @@
-const spaceObj = {}
+const spaceObj = {};
 
-const start = 0
-const end = 9999
+const start = 0;
+const end = 9999;
 
 for (let i = start; i <= end; i++) {
-  spaceObj[i] = `${i * 0.25}rem`
+  spaceObj[i] = `${i * 0.25}rem`;
 }
 
-export const space = spaceObj
+spaceObj['container'] = '700px';
+
+export const space = spaceObj;
diff --git a/remix/app/Providers/Chakra/theme.tsx b/remix/app/Providers/Chakra/theme.tsx
index 55e7c21..057da69 100644
--- a/remix/app/Providers/Chakra/theme.tsx
+++ b/remix/app/Providers/Chakra/theme.tsx
@@ -6,58 +6,59 @@ import {
   NumberInputField,
   NumberInputStepper,
   Select,
-  Switch,
-} from "@chakra-ui/react"
+  Switch
+} from '@chakra-ui/react';
 
-import { colors } from "./colors"
-import { space } from "./space"
+import { colors } from './colors';
+import { space } from './space';
 
 export const theme = extendTheme({
   colors,
   // edit Input defaultProps
   space,
+  sizes: space,
   styles: {
     global: {
       // make all elements padding and margin animate
-      "*": {
-        transition: "padding 0.2s ease, margin 0.2s ease-out",
+      '*': {
+        transition: 'padding 0.2s ease, margin 0.2s ease-out'
       },
       // make all elements have a transparent focus border
-      "input:focus": {
-        boxShadow: "none !important",
-        borderColor: "transparent !important",
+      'input:focus': {
+        boxShadow: 'none !important',
+        borderColor: 'transparent !important'
       },
       // make all elements have a transparent focus border
-      "textarea:focus": {
-        boxShadow: "none !important",
-        borderColor: "transparent !important",
+      'textarea:focus': {
+        boxShadow: 'none !important',
+        borderColor: 'transparent !important'
       },
       // make all elements have a transparent focus border
-      "select:focus": {
-        boxShadow: "none !important",
-        borderColor: "transparent !important",
+      'select:focus': {
+        boxShadow: 'none !important',
+        borderColor: 'transparent !important'
       },
       // make all elements have a transparent focus border
-      "button:focus": {
-        boxShadow: "none !important",
-        borderColor: "transparent !important",
+      'button:focus': {
+        boxShadow: 'none !important',
+        borderColor: 'transparent !important'
       },
       // make all elements have a transparent focus border
-      "div:focus": {
-        boxShadow: "none !important",
-        borderColor: "transparent !important",
+      'div:focus': {
+        boxShadow: 'none !important',
+        borderColor: 'transparent !important'
       },
       // make all elements have a transparent focus border
-      "a:focus": {
-        boxShadow: "none !important",
-        borderColor: "transparent !important",
+      'a:focus': {
+        boxShadow: 'none !important',
+        borderColor: 'transparent !important'
       },
       // make all elements have a transparent focus border
-      "span:focus": {
-        boxShadow: "none !important",
-        borderColor: "transparent !important",
-      },
-    },
+      'span:focus': {
+        boxShadow: 'none !important',
+        borderColor: 'transparent !important'
+      }
+    }
   },
   components: {
     Input: {
@@ -70,8 +71,8 @@ export const theme = extendTheme({
         // "padding-inline-start": "0px",
         field: {
           // "padding-inline-start": "0px",
-        },
-      },
+        }
+      }
     },
     Select: {
       baseStyle: {
@@ -80,73 +81,73 @@ export const theme = extendTheme({
         },
         icon: {
           // height: "8px",
-          width: "14px",
-        },
-      },
+          width: '14px'
+        }
+      }
     },
     Switch: {
       baseStyle: {
         track: {
-          background: "grays.medium",
+          background: 'grays.medium',
           _checked: {
-            background: "chakras.throat",
-          },
-        },
-      },
+            background: 'chakras.throat'
+          }
+        }
+      }
     },
     NumberInput: {
       baseStyle: {
         field: {
-          width: "auto",
+          width: 'auto'
           // border: "none",
-        },
-      },
-    },
-  },
-})
+        }
+      }
+    }
+  }
+});
 
 Switch.defaultProps = {
   ...Switch.defaultProps,
-  as: "div",
-}
+  as: 'div'
+};
 
 Select.defaultProps = {
   ...Select.defaultProps,
-  focusBorderColor: "transparent",
-  outline: "0px solid",
-  border: "none",
-  ps: "0px",
-  px: "0px",
+  focusBorderColor: 'transparent',
+  outline: '0px solid',
+  border: 'none',
+  ps: '0px',
+  px: '0px',
   sx: {
-    paddingInlineStart: "0px",
-    paddingInlineEnd: "24px",
-  },
-}
+    paddingInlineStart: '0px',
+    paddingInlineEnd: '24px'
+  }
+};
 
 NumberInput.defaultProps = {
   ...NumberInput.defaultProps,
-  variant: "unstyled",
-}
+  variant: 'unstyled'
+};
 
 NumberInputField.defaultProps = {
   ...NumberInputField.defaultProps,
-  height: "100%",
+  height: '100%',
   pr: 3,
-  fontSize: "inherit",
+  fontSize: 'inherit'
   // variant: "unstyled",
-}
+};
 
 NumberInputStepper.defaultProps = {
   ...NumberInputStepper.defaultProps,
-  border: "none",
-  color: "grays.medium",
-}
+  border: 'none',
+  color: 'grays.medium'
+};
 
 NumberIncrementStepper.defaultProps = {
   ...NumberIncrementStepper.defaultProps,
-  border: "none",
-}
+  border: 'none'
+};
 NumberDecrementStepper.defaultProps = {
   ...NumberDecrementStepper.defaultProps,
-  border: "none",
-}
+  border: 'none'
+};
diff --git a/remix/app/api/utils/checkUserExists.ts b/remix/app/api/utils/userCheckExists.ts
similarity index 64%
rename from remix/app/api/utils/checkUserExists.ts
rename to remix/app/api/utils/userCheckExists.ts
index 95b526e..f30dc13 100644
--- a/remix/app/api/utils/checkUserExists.ts
+++ b/remix/app/api/utils/userCheckExists.ts
@@ -1,15 +1,15 @@
-// query mongodb for user objects with the email provided
+// query mongodb for user objects with the username provided
 // if user exists, return true
 // if user does not exist, return false
 
 import { createConnection } from './mongodb/connection';
 
-export const checkUserExists = async ({ email }) => {
+export const userCheckExists = async ({ username }) => {
   
   const client = await createConnection();
   const db = client.db('auth');
   const collection = db.collection('users');
-  const user = await collection.findOne({ email });
+  const user = await collection.findOne({ username });
   
   if (user) {
     return true;
diff --git a/remix/app/api/utils/userValidatePassword.ts b/remix/app/api/utils/userValidatePassword.ts
new file mode 100644
index 0000000..392fbbd
--- /dev/null
+++ b/remix/app/api/utils/userValidatePassword.ts
@@ -0,0 +1,31 @@
+// query mongodb for user objects with the username provided
+// if user exists, return true
+// if user does not exist, return false
+
+import { createConnection } from './mongodb/connection';
+
+import bcrypt from 'bcrypt';
+
+export const userValidatePassword = async ({ username, password }) => {
+  
+  const client = await createConnection();
+  const db = client.db('auth');
+  const collection = db.collection('users');
+  const user = await collection.findOne({ username });
+  
+  if (!user) {
+    return false;
+  }
+  
+  const { password: hash } = user;
+  
+  const match = await bcrypt.compare(password, hash);
+  
+  if (match) {
+    return true;
+  }
+  
+  return false;
+  
+}
+  
\ No newline at end of file
diff --git a/remix/app/components/Layout/Main.tsx b/remix/app/components/Layout/Main.tsx
index 3ae5406..ccf5853 100644
--- a/remix/app/components/Layout/Main.tsx
+++ b/remix/app/components/Layout/Main.tsx
@@ -1,30 +1,41 @@
-import { Box, Flex } from "@chakra-ui/react"
+import { Box, Flex } from '@chakra-ui/react';
 
-import { Footer } from "../Nav/Footer"
-import { Nav } from "../Nav/Nav"
-import { ProfileDrawer } from "../Nav/ProfileDrawer"
+import { Footer } from '../Nav/Footer';
+import { Nav } from '../Nav/Nav';
+import { ProfileDrawer } from '../Nav/ProfileDrawer';
 
 export const Main = (props) => {
   return (
     <Flex
       sx={{
-        "*": {
-          whiteSpace: "pre-wrap",
-        },
+        '*': {
+          whiteSpace: 'pre-wrap'
+        }
       }}
       position="relative"
       alignItems="center"
       justifyContent="center"
       flexDirection="column"
       overflow="hidden"
+      width="100%"
+      minH="100vh"
       maxWidth="100vw"
     >
       {/* <ProfileDrawer></ProfileDrawer> */}
       <Nav />
-      <Box width="100%" minHeight="100vh">
+      <Flex
+        position="relative"
+        alignItems="center"
+        justifyContent="center"
+        flexDirection="column"
+        overflow="hidden"
+        width="100%"
+        minH="100vh"
+        maxWidth="100vw"
+      >
         {props.children}
-      </Box>
+      </Flex>
       <Footer></Footer>
     </Flex>
-  )
-}
+  );
+};
diff --git a/remix/app/components/MongoDB/Raw.tsx b/remix/app/components/MongoDB/Raw.tsx
new file mode 100644
index 0000000..ed9c828
--- /dev/null
+++ b/remix/app/components/MongoDB/Raw.tsx
@@ -0,0 +1,28 @@
+import { Suspense, useState } from 'react';
+import { useThingtime } from '../Thingtime/useThingtime';
+import { Flex, Heading, Box } from '@chakra-ui/react';
+import Editor from '@monaco-editor/react';
+
+export const Raw = () => {
+  const { thingtime } = useThingtime();
+
+  const [rawValue, setRawValue] = useState(thingtime?.rawValue || '// Raw');
+
+  return (
+    <Flex w="100%" position="relative" minH="50vh" maxW="container" flexDir={'column'}>
+      <Heading size="sm" pb={8}>
+        Raw
+      </Heading>
+
+      {/* only on client side render editor */}
+      <Suspense fallback={<div>Loading...</div>}>
+        {/* {editor} */}
+        <Flex flexGrow={1} position="relative">
+          <Box pos={'absolute'} top={'0'} left={'0'} right={'0'} bottom={'0'}>
+            <Editor defaultLanguage="javascript" defaultValue={rawValue}></Editor>;
+          </Box>
+        </Flex>
+      </Suspense>
+    </Flex>
+  );
+};
diff --git a/remix/app/components/Thingtime/ThingtimeURL.tsx b/remix/app/components/Thingtime/ThingtimeURL.tsx
index 5715ca3..3637813 100644
--- a/remix/app/components/Thingtime/ThingtimeURL.tsx
+++ b/remix/app/components/Thingtime/ThingtimeURL.tsx
@@ -84,36 +84,15 @@ export const ThingtimeURL = (props) => {
   return (
     <Flex
       ref={containerRef}
-      // position="sticky"
       position="relative"
       alignItems={inEditorMode ? 'flex-start' : 'center'}
       justifyContent="center"
-      // overflow="scroll"
-      // height="auto"
       flexDirection={inEditorMode ? 'row' : 'column'}
       maxWidth="100%"
-      // maxHeight="100vh"
     >
       {inEditorMode && (
-        <Box
-          ref={editorRef}
-          position="relative"
-          // position="sticky"
-          // top={200}
-          // alignSelf="flex-start"
-          overflow="scroll"
-          width="600px"
-          // width="100%"
-          maxHeight="100vh"
-          // paddingY={2}
-        >
-          <Thingtime
-            path={path}
-            thing={thing}
-            render
-            chakras={{ marginY: '200px' }}
-            // width="600px"
-          ></Thingtime>
+        <Box ref={editorRef} position="relative" overflow="scroll" width="container" maxHeight="100vh">
+          <Thingtime path={path} thing={thing} render chakras={{ marginY: '200px' }}></Thingtime>
         </Box>
       )}
       <Thingtime edit={inEditMode} path={path} thing={thing} chakras={{ marginY: '200px' }} width="600px"></Thingtime>
diff --git a/remix/app/routes/api/v1/login/_login.tsx b/remix/app/routes/api/v1/login/_login.tsx
index 3f45989..b6f4d2b 100644
--- a/remix/app/routes/api/v1/login/_login.tsx
+++ b/remix/app/routes/api/v1/login/_login.tsx
@@ -1,34 +1,49 @@
-import { checkUserExists } from "~/api/utils/checkUserExists";
+import { userCheckExists } from '~/api/utils/userCheckExists';
+import { userValidatePassword } from '~/api/utils/userValidatePassword';
 
 export default function Index() {
   return <div>Login</div>;
 }
 
 export const action = async ({ request }) => {
-  
   console.log('nik request', request);
-  
+
   // get remix action body
-  
+
   const body = await request.json();
-  
+
   const { username, password } = body;
-  
-  console.log('nik body', body)
-  
+
+  console.log('nik body', body);
+
   console.log('nik username', username);
   console.log('nik password', password);
-  
-  
+
+  const userExists = userCheckExists(username);
+
+  if (!userExists) {
+    // validate password
+    return earlyReturn({ status: 401, message: 'User does not exist' });
+  }
+
+  // validate password
+  const passwordMatches = userValidatePassword({ username, password });
+
+  if (!passwordMatches) {
+    return earlyReturn({ status: 401, message: 'Password does not match' });
+  }
+
+  return earlyReturn({ status: 200, message: 'Login successful' });
+};
+
+const earlyReturn = (args) => {
   return {
-    status: 200,
+    status: args?.status || 200,
     headers: {
       'Content-Type': 'application/json'
     },
     body: {
-      message: 'Hello, World!',
-      username,
-      password
+      message: 'Early return triggered in login action' + (args?.message ? `: ${args.message}` : '')
     },
     cache: {
       revalidate: 60
diff --git a/remix/app/routes/raw.tsx b/remix/app/routes/raw.tsx
new file mode 100644
index 0000000..8191dc0
--- /dev/null
+++ b/remix/app/routes/raw.tsx
@@ -0,0 +1,11 @@
+import { Raw } from '~/components/MongoDB/Raw';
+
+export default function login() {
+  const template = (
+    <>
+      <Raw></Raw>
+    </>
+  );
+
+  return template;
+}
diff --git a/remix/package.json b/remix/package.json
index ef5f978..ceb3e13 100644
--- a/remix/package.json
+++ b/remix/package.json
@@ -16,12 +16,14 @@
     "@fortawesome/free-regular-svg-icons": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@monaco-editor/react": "^4.6.0",
     "@remix-run/node": "^2.8.1",
     "@remix-run/react": "^2.8.1",
     "@remix-run/serve": "^2.8.1",
     "@vercel/analytics": "^0.1.11",
     "@vercel/remix": "^1.15.0",
     "axios": "^1.6.8",
+    "bcrypt": "^5.1.1",
     "draft-js": "^0.11.7",
     "emojis-list": "^3.0.0",
     "emotion": "^11.0.0",