diff --git a/remix/app/Providers/Chakra/space.tsx b/remix/app/Providers/Chakra/space.tsx
new file mode 100644
index 0000000..a9d106f
--- /dev/null
+++ b/remix/app/Providers/Chakra/space.tsx
@@ -0,0 +1,10 @@
+const spaceObj = {}
+
+const start = 0
+const end = 9999
+
+for (let i = start; i <= end; i++) {
+  spaceObj[i] = `${i * 0.25}rem`
+}
+
+export const space = spaceObj
diff --git a/remix/app/Providers/Chakra/theme.tsx b/remix/app/Providers/Chakra/theme.tsx
index 662d429..55e7c21 100644
--- a/remix/app/Providers/Chakra/theme.tsx
+++ b/remix/app/Providers/Chakra/theme.tsx
@@ -10,10 +10,12 @@ import {
 } from "@chakra-ui/react"
 
 import { colors } from "./colors"
+import { space } from "./space"
 
 export const theme = extendTheme({
   colors,
   // edit Input defaultProps
+  space,
   styles: {
     global: {
       // make all elements padding and margin animate
diff --git a/remix/app/components/Thingtime/ThingtimeURL.tsx b/remix/app/components/Thingtime/ThingtimeURL.tsx
index 8a342ee..38e64d8 100644
--- a/remix/app/components/Thingtime/ThingtimeURL.tsx
+++ b/remix/app/components/Thingtime/ThingtimeURL.tsx
@@ -99,7 +99,7 @@ export const ThingtimeURL = (props) => {
           // position="sticky"
           // top={200}
           // alignSelf="flex-start"
-          // overflow="scroll"
+          overflow="scroll"
           width="600px"
           // width="100%"
           maxHeight="100vh"
@@ -109,7 +109,7 @@ export const ThingtimeURL = (props) => {
             path={path}
             thing={thing}
             render
-            chakras={{ marginY: 200 }}
+            chakras={{ marginY: "200px" }}
             width="600px"
           ></Thingtime>
         </Box>
@@ -118,7 +118,7 @@ export const ThingtimeURL = (props) => {
         edit={inEditMode}
         path={path}
         thing={thing}
-        chakras={{ marginY: 200 }}
+        chakras={{ marginY: "200px" }}
         width="600px"
       ></Thingtime>
     </Flex>