diff --git a/fableous-fe/src/components/canvas/Canvas.tsx b/fableous-fe/src/components/canvas/Canvas.tsx
index 85f177f1..553395f0 100644
--- a/fableous-fe/src/components/canvas/Canvas.tsx
+++ b/fableous-fe/src/components/canvas/Canvas.tsx
@@ -22,7 +22,7 @@ import {
   scaleUpXY,
   translateXY,
 } from "./helpers";
-import { ASPECT_RATIO, SCALE, SELECT_PADDING } from "./constants";
+import { SCALE, SELECT_PADDING } from "./constants";
 import { Cursor } from "./CursorScreen";
 import { ImperativeCanvasRef, TextShape, TextShapeMap } from "./data";
 import { ControllerRole, ToolMode, WSMessageType } from "../../constant";
@@ -41,8 +41,9 @@ interface CanvasProps {
   pageNum: number;
   isGallery?: boolean;
   isShown?: boolean;
+  offsetWidth: number;
+  offsetHeight: number;
   onDraw?: () => void;
-  offsetWidth?: number;
   setCursor?: React.Dispatch<Cursor | undefined>;
   textShapes: TextShapeMap;
   setTextShapes: React.Dispatch<React.SetStateAction<TextShapeMap>>;
@@ -60,7 +61,6 @@ const defaultProps = {
   isGallery: false,
   isShown: true,
   onDraw: () => {},
-  offsetWidth: 0,
   setCursor: undefined,
   toolColor: "#000000ff",
   toolMode: ToolMode.None,
@@ -86,8 +86,9 @@ const Canvas = forwardRef<ImperativeCanvasRef, CanvasProps>(
       pageNum,
       isGallery,
       isShown,
+      offsetWidth,
+      offsetHeight,
       onDraw = defaultProps.onDraw,
-      offsetWidth = defaultProps.offsetWidth,
       setCursor,
       setTextShapes,
       textShapes,
@@ -796,9 +797,8 @@ const Canvas = forwardRef<ImperativeCanvasRef, CanvasProps>(
 
     const adjustCanvasSize = useCallback(() => {
       const canvas = canvasRef.current;
-      const canvasOffsetWidth = canvas.offsetWidth;
-      canvas.width = canvasOffsetWidth * SCALE;
-      canvas.height = canvas.width * ASPECT_RATIO;
+      canvas.width = canvas.offsetWidth * SCALE;
+      canvas.height = canvas.offsetHeight * SCALE;
     }, [canvasRef]);
 
     // exposes callbacks to parent, to be used by toolbar
@@ -911,10 +911,12 @@ const Canvas = forwardRef<ImperativeCanvasRef, CanvasProps>(
 
     return (
       <div
-        className="place-self-center"
+        className="relative place-self-center"
         style={{
           width: offsetWidth,
-          height: offsetWidth * ASPECT_RATIO,
+          // -1 so height can shrink
+          height: offsetHeight - 1,
+          maxHeight: "100%",
         }}
       >
         <canvas
@@ -936,7 +938,8 @@ const Canvas = forwardRef<ImperativeCanvasRef, CanvasProps>(
           }}
           style={{
             position: "absolute",
-            width: offsetWidth,
+            width: "100%",
+            height: "100%",
             borderRadius: "24px",
             // allows onPointerMove to be fired continuously on touch,
             // else will be treated as pan gesture leading to short strokes
diff --git a/fableous-fe/src/components/canvas/CursorScreen.tsx b/fableous-fe/src/components/canvas/CursorScreen.tsx
index 3a8bf562..d5c3dc9d 100644
--- a/fableous-fe/src/components/canvas/CursorScreen.tsx
+++ b/fableous-fe/src/components/canvas/CursorScreen.tsx
@@ -4,7 +4,7 @@
 /* eslint-disable no-case-declarations */
 import { useEffect, useRef } from "react";
 import { scaleUpXY } from "./helpers";
-import { ASPECT_RATIO, SCALE } from "./constants";
+import { SCALE } from "./constants";
 import { ToolMode } from "../../constant";
 
 export interface Cursor {
@@ -18,11 +18,12 @@ interface CursorScreenProps {
   cursor: Cursor | undefined;
   name?: string;
   isShown?: boolean;
-  offsetWidth?: number;
+  offsetWidth: number;
+  offsetHeight: number;
 }
 
 const CursorScreen = (props: CursorScreenProps) => {
-  const { cursor, name, isShown, offsetWidth = 0 } = props;
+  const { cursor, name, isShown, offsetWidth, offsetHeight } = props;
   const canvasRef = useRef<HTMLCanvasElement>(document.createElement("canvas"));
   const cursorRef = useRef<Cursor>(cursor as Cursor);
   cursorRef.current = cursor as Cursor;
@@ -93,9 +94,8 @@ const CursorScreen = (props: CursorScreenProps) => {
   // set canvas size onmount and when canvas appears or becomes hidden
   useEffect(() => {
     const canvas = canvasRef.current;
-    const canvasOffsetWidth = canvas.offsetWidth;
-    canvas.width = canvasOffsetWidth * SCALE;
-    canvas.height = canvas.width * ASPECT_RATIO;
+    canvas.width = canvas.offsetWidth * SCALE;
+    canvas.height = canvas.offsetHeight * SCALE;
     const ctx = canvas.getContext("2d");
     if (ctx) {
       ctx.textBaseline = "middle";
@@ -110,10 +110,12 @@ const CursorScreen = (props: CursorScreenProps) => {
 
   return (
     <div
-      className="place-self-center"
+      className="relative place-self-center"
       style={{
         width: offsetWidth,
-        height: offsetWidth * ASPECT_RATIO,
+        // -1 so height can shrink
+        height: offsetHeight - 1,
+        maxHeight: "100%",
       }}
     >
       <canvas
@@ -121,7 +123,8 @@ const CursorScreen = (props: CursorScreenProps) => {
         style={{
           position: "absolute",
           borderRadius: "24px",
-          width: offsetWidth,
+          width: "100%",
+          height: "100%",
           touchAction: "none",
           msTouchAction: "none",
           msTouchSelect: "none",
@@ -139,7 +142,6 @@ const CursorScreen = (props: CursorScreenProps) => {
 CursorScreen.defaultProps = {
   name: "",
   isShown: true,
-  offsetWidth: 0,
 };
 
 export default CursorScreen;
diff --git a/fableous-fe/src/components/canvas/LayerToolbar.tsx b/fableous-fe/src/components/canvas/LayerToolbar.tsx
index aa4437a3..fda8d111 100644
--- a/fableous-fe/src/components/canvas/LayerToolbar.tsx
+++ b/fableous-fe/src/components/canvas/LayerToolbar.tsx
@@ -47,11 +47,9 @@ export default function LayerToolbar(props: {
   const classes = useStyles();
 
   return (
-    <div
-      className={`h-full flex flex-col justify-center items-center ${classes.hideScrollbar}`}
-    >
+    <div className="h-full flex flex-col justify-center items-center">
       <div
-        className="overflow-y-scroll overflow-x-hidden"
+        className={`overflow-y-scroll overflow-x-hidden  ${classes.hideScrollbar}`}
         style={{
           height: offsetHeight || "100%",
           maxHeight: "100%",
diff --git a/fableous-fe/src/components/canvas/helpers.ts b/fableous-fe/src/components/canvas/helpers.ts
index 23132032..d22b67e6 100644
--- a/fableous-fe/src/components/canvas/helpers.ts
+++ b/fableous-fe/src/components/canvas/helpers.ts
@@ -1,13 +1,20 @@
 import { MutableRefObject } from "react";
 import { SCALE } from "./constants";
 
+export const getCurrentScaling = (
+  canvasRef: MutableRefObject<HTMLCanvasElement>
+): number => {
+  return canvasRef.current.width / canvasRef.current.offsetWidth;
+};
+
 export const translateXY = (
   canvasRef: MutableRefObject<HTMLCanvasElement>,
   x: number,
   y: number
 ) => {
   const bound = canvasRef.current.getBoundingClientRect();
-  return [(x - bound.x) * SCALE, (y - bound.y) * SCALE];
+  const currentScale = getCurrentScaling(canvasRef);
+  return [(x - bound.x) * currentScale, (y - bound.y) * currentScale];
 };
 
 // wrap with useCallback() because dependency chain leads to being used at useEffect()
diff --git a/fableous-fe/src/containers/ControllerCanvasPage.tsx b/fableous-fe/src/containers/ControllerCanvasPage.tsx
index a4212440..f52fd14e 100644
--- a/fableous-fe/src/containers/ControllerCanvasPage.tsx
+++ b/fableous-fe/src/containers/ControllerCanvasPage.tsx
@@ -290,199 +290,216 @@ export default function ControllerCanvasPage() {
   return (
     <Grid
       container
-      className={`flex-col flex-1 relative ${classes.disableMobileHoldInteraction}`}
+      className={`grid flex-col flex-1 relative ${classes.disableMobileHoldInteraction}`}
     >
-      <Grid item xs={12} className="mb-8">
-        <Typography variant="h2">
-          {
+      <div
+        style={{
+          gridRowStart: 1,
+          gridColumnStart: 1,
+        }}
+      >
+        <Grid item xs={12} className="mb-8">
+          <Typography variant="h2">
             {
-              [ControllerState.JoinForm]: "Join Room",
-              [ControllerState.WaitingRoom]: "Lobby",
-              [ControllerState.DrawingSession]: "",
-              [ControllerState.StoryFinished]: "Finished!",
-            }[controllerState]
-          }
-        </Typography>
-      </Grid>
-      {controllerState === ControllerState.JoinForm && (
-        <Grid item xs={12} sm={8} md={6} lg={4}>
-          <Card>
-            <Formik
-              initialValues={
-                {
-                  name: "",
-                  token: "",
-                  role: ControllerRole.Story,
-                } as ControllerJoin
-              }
-              validationSchema={yup.object().shape({
-                name: yup
-                  .string()
-                  .required("Name required")
-                  .test(
-                    "len",
-                    "Name too long",
-                    (val) => (val || "").length <= 24
-                  ),
-                token: yup
-                  .string()
-                  .required("Token required")
-                  .length(4, "Invalid token")
-                  .uppercase("Invalid token"),
-              })}
-              onSubmit={handleJoinSession}
-            >
-              {(formik) => (
-                <form onSubmit={formik.handleSubmit} autoComplete="off">
-                  <CardContent>
-                    <Grid container spacing={2}>
-                      <Grid item xs={12} className="flex-grow flex flex-col">
-                        <FormikTextField
-                          formik={formik}
-                          name="name"
-                          label="Name"
-                          overrides={{
-                            autoFocus: true,
-                            variant: "outlined",
-                          }}
-                        />
-                      </Grid>
-                      <Grid item xs={12}>
-                        <Grid container spacing={2}>
-                          <Grid
-                            item
-                            xs={12}
-                            sm={6}
-                            className="flex-grow flex flex-col"
-                          >
-                            <FormikTextField
-                              formik={formik}
-                              name="token"
-                              label="Token"
-                              overrides={{
-                                variant: "outlined",
-                                onChange: (
-                                  ev: React.ChangeEvent<HTMLInputElement>
-                                ) => {
-                                  const evUpperCase = { ...ev };
-                                  if (ev.target.value.length > 4) {
-                                    return;
-                                  }
-                                  evUpperCase.target.value =
-                                    ev.target.value?.toUpperCase();
-                                  formik.handleChange(evUpperCase);
-                                },
-                              }}
-                            />
+              {
+                [ControllerState.JoinForm]: "Join Room",
+                [ControllerState.WaitingRoom]: "Lobby",
+                [ControllerState.DrawingSession]: "",
+                [ControllerState.StoryFinished]: "Finished!",
+              }[controllerState]
+            }
+          </Typography>
+        </Grid>
+        {controllerState === ControllerState.JoinForm && (
+          <Grid item xs={12} sm={8} md={6} lg={4}>
+            <Card>
+              <Formik
+                initialValues={
+                  {
+                    name: "",
+                    token: "",
+                    role: ControllerRole.Story,
+                  } as ControllerJoin
+                }
+                validationSchema={yup.object().shape({
+                  name: yup
+                    .string()
+                    .required("Name required")
+                    .test(
+                      "len",
+                      "Name too long",
+                      (val) => (val || "").length <= 24
+                    ),
+                  token: yup
+                    .string()
+                    .required("Token required")
+                    .length(4, "Invalid token")
+                    .uppercase("Invalid token"),
+                })}
+                onSubmit={handleJoinSession}
+              >
+                {(formik) => (
+                  <form onSubmit={formik.handleSubmit} autoComplete="off">
+                    <CardContent>
+                      <Grid container spacing={2}>
+                        <Grid item xs={12} className="flex-grow flex flex-col">
+                          <FormikTextField
+                            formik={formik}
+                            name="name"
+                            label="Name"
+                            overrides={{
+                              autoFocus: true,
+                              variant: "outlined",
+                            }}
+                          />
+                        </Grid>
+                        <Grid item xs={12}>
+                          <Grid container spacing={2}>
+                            <Grid
+                              item
+                              xs={12}
+                              sm={6}
+                              className="flex-grow flex flex-col"
+                            >
+                              <FormikTextField
+                                formik={formik}
+                                name="token"
+                                label="Token"
+                                overrides={{
+                                  variant: "outlined",
+                                  onChange: (
+                                    ev: React.ChangeEvent<HTMLInputElement>
+                                  ) => {
+                                    const evUpperCase = { ...ev };
+                                    if (ev.target.value.length > 4) {
+                                      return;
+                                    }
+                                    evUpperCase.target.value =
+                                      ev.target.value?.toUpperCase();
+                                    formik.handleChange(evUpperCase);
+                                  },
+                                }}
+                              />
+                            </Grid>
+                            <Grid
+                              item
+                              xs={12}
+                              sm={6}
+                              className="flex-grow flex flex-col"
+                            >
+                              <FormControl variant="outlined">
+                                <InputLabel>Role</InputLabel>
+                                <Select
+                                  name="role"
+                                  label="Role"
+                                  value={formik.values.role}
+                                  onChange={formik.handleChange}
+                                  onBlur={formik.handleBlur}
+                                >
+                                  <MenuItem value={ControllerRole.Story}>
+                                    <Icon
+                                      fontSize="small"
+                                      className="align-middle mr-1"
+                                    >
+                                      {ROLE_ICON[ControllerRole.Story].icon}
+                                    </Icon>
+                                    {ROLE_ICON[ControllerRole.Story].text}
+                                  </MenuItem>
+                                  <MenuItem value={ControllerRole.Character}>
+                                    <Icon
+                                      fontSize="small"
+                                      className="align-middle mr-1"
+                                    >
+                                      {ROLE_ICON[ControllerRole.Character].icon}
+                                    </Icon>
+                                    {ROLE_ICON[ControllerRole.Character].text}
+                                  </MenuItem>
+                                  <MenuItem value={ControllerRole.Background}>
+                                    <Icon
+                                      fontSize="small"
+                                      className="align-middle mr-1"
+                                    >
+                                      {
+                                        ROLE_ICON[ControllerRole.Background]
+                                          .icon
+                                      }
+                                    </Icon>
+                                    {ROLE_ICON[ControllerRole.Background].text}
+                                  </MenuItem>
+                                </Select>
+                              </FormControl>
+                            </Grid>
                           </Grid>
-                          <Grid
-                            item
-                            xs={12}
-                            sm={6}
-                            className="flex-grow flex flex-col"
+                        </Grid>
+                        <Grid item xs={12} className="flex justify-end">
+                          <Button
+                            color="secondary"
+                            variant="contained"
+                            endIcon={<Icon fontSize="small">brush</Icon>}
+                            type="submit"
                           >
-                            <FormControl variant="outlined">
-                              <InputLabel>Role</InputLabel>
-                              <Select
-                                name="role"
-                                label="Role"
-                                value={formik.values.role}
-                                onChange={formik.handleChange}
-                                onBlur={formik.handleBlur}
-                              >
-                                <MenuItem value={ControllerRole.Story}>
-                                  <Icon
-                                    fontSize="small"
-                                    className="align-middle mr-1"
-                                  >
-                                    {ROLE_ICON[ControllerRole.Story].icon}
-                                  </Icon>
-                                  {ROLE_ICON[ControllerRole.Story].text}
-                                </MenuItem>
-                                <MenuItem value={ControllerRole.Character}>
-                                  <Icon
-                                    fontSize="small"
-                                    className="align-middle mr-1"
-                                  >
-                                    {ROLE_ICON[ControllerRole.Character].icon}
-                                  </Icon>
-                                  {ROLE_ICON[ControllerRole.Character].text}
-                                </MenuItem>
-                                <MenuItem value={ControllerRole.Background}>
-                                  <Icon
-                                    fontSize="small"
-                                    className="align-middle mr-1"
-                                  >
-                                    {ROLE_ICON[ControllerRole.Background].icon}
-                                  </Icon>
-                                  {ROLE_ICON[ControllerRole.Background].text}
-                                </MenuItem>
-                              </Select>
-                            </FormControl>
-                          </Grid>
+                            Join
+                          </Button>
                         </Grid>
                       </Grid>
-                      <Grid item xs={12} className="flex justify-end">
-                        <Button
-                          color="secondary"
-                          variant="contained"
-                          endIcon={<Icon fontSize="small">brush</Icon>}
-                          type="submit"
-                        >
-                          Join
-                        </Button>
-                      </Grid>
-                    </Grid>
-                  </CardContent>
-                </form>
-              )}
-            </Formik>
-          </Card>
-        </Grid>
-      )}
-      {controllerState === ControllerState.WaitingRoom && (
-        <div className="flex">
-          <Card className="flex-shrink">
-            <CardContent>
-              <Typography variant="h6" component="p">
-                Waiting for session to begin
-                <CircularProgress size={12} thickness={8} className="ml-2" />
-              </Typography>
-            </CardContent>
-          </Card>
-        </div>
-      )}
-      {controllerState === ControllerState.StoryFinished && (
-        <>
-          <Grid item xs={12}>
-            <Button
-              variant="contained"
-              color="primary"
-              endIcon={<Icon fontSize="small">brush</Icon>}
-              className="mb-2"
-              onClick={() => {
-                setControllerState(ControllerState.JoinForm);
-              }}
-            >
-              Join another session
-            </Button>
+                    </CardContent>
+                  </form>
+                )}
+              </Formik>
+            </Card>
           </Grid>
-          <Grid item xs={12}>
-            <Button
-              variant="contained"
-              color="secondary"
-              component={Link}
-              to={`/gallery/${sessionInfo?.classroomId}/${sessionInfo?.sessionId}`}
-            >
-              View story in gallery
-            </Button>
-          </Grid>
-        </>
-      )}
+        )}
+        {controllerState === ControllerState.WaitingRoom && (
+          <div className="flex">
+            <Card className="flex-shrink">
+              <CardContent>
+                <Typography variant="h6" component="p">
+                  Waiting for session to begin
+                  <CircularProgress size={12} thickness={8} className="ml-2" />
+                </Typography>
+              </CardContent>
+            </Card>
+          </div>
+        )}
+        {controllerState === ControllerState.StoryFinished && (
+          <>
+            <Grid item xs={12}>
+              <Button
+                variant="contained"
+                color="primary"
+                endIcon={<Icon fontSize="small">brush</Icon>}
+                className="mb-2"
+                onClick={() => {
+                  setControllerState(ControllerState.JoinForm);
+                }}
+              >
+                Join another session
+              </Button>
+            </Grid>
+            <Grid item xs={12}>
+              <Button
+                variant="contained"
+                color="secondary"
+                component={Link}
+                to={`/gallery/${sessionInfo?.classroomId}/${sessionInfo?.sessionId}`}
+              >
+                View story in gallery
+              </Button>
+            </Grid>
+          </>
+        )}
+      </div>
       <div
-        className={`flex flex-col absolute w-full h-full ${
-          controllerState !== ControllerState.DrawingSession && "invisible"
+        className={`flex flex-col w-full ${
+          controllerState !== ControllerState.DrawingSession &&
+          "invisible overflow-y-hidden"
         }`}
+        style={{
+          // 64px navbar height, 20px content top padding, 48px content bot padding
+          height: "calc(100vh - 132px)",
+          gridRowStart: 1,
+          gridColumnStart: 1,
+        }}
       >
         <Grid container className="mt-4">
           <Grid item xs={12}>
@@ -512,7 +529,7 @@ export default function ControllerCanvasPage() {
             />
           </Grid>
         </Grid>
-        <Grid container spacing={2} className="flex-1 my-4">
+        <Grid container spacing={2} className="relative flex-1 my-4">
           <Grid item xs={2} md={1}>
             <CanvasToolbar
               ref={canvasRef}
@@ -547,6 +564,7 @@ export default function ControllerCanvasPage() {
                   cursor={cursor}
                   isShown={controllerState === ControllerState.DrawingSession}
                   offsetWidth={canvasOffsetWidth}
+                  offsetHeight={canvasOffsetHeight}
                 />
               </div>
               <div
@@ -575,6 +593,7 @@ export default function ControllerCanvasPage() {
                   setToolMode={setToolMode}
                   toolWidth={toolWidth}
                   offsetWidth={canvasOffsetWidth}
+                  offsetHeight={canvasOffsetHeight}
                 />
               </div>
               <div
@@ -586,10 +605,12 @@ export default function ControllerCanvasPage() {
                 }}
               >
                 <div
-                  className="bg-white place-self-center"
+                  className="place-self-center bg-white"
                   style={{
                     width: canvasOffsetWidth,
-                    height: canvasOffsetHeight,
+                    // -1 so height can shrink
+                    height: canvasOffsetHeight - 1,
+                    maxHeight: "100%",
                     borderRadius: "24px",
                   }}
                 />
diff --git a/fableous-fe/src/containers/HubCanvasPage.tsx b/fableous-fe/src/containers/HubCanvasPage.tsx
index bcd5a938..7efa3da6 100644
--- a/fableous-fe/src/containers/HubCanvasPage.tsx
+++ b/fableous-fe/src/containers/HubCanvasPage.tsx
@@ -431,267 +431,281 @@ export default function HubCanvasPage() {
   }, [achievements, broadcastAchievement]);
 
   return (
-    <Grid container className="flex-col flex-1 relative">
-      {hubState !== HubState.DrawingSession && (
-        <Grid item xs={12} className="mb-8">
-          <BackButton className="mb-2" />
-          <Typography variant="h2">
-            {
+    <Grid container className="grid flex-col flex-1 relative">
+      <div
+        style={{
+          gridRowStart: 1,
+          gridColumnStart: 1,
+        }}
+      >
+        {hubState !== HubState.DrawingSession && (
+          <Grid item xs={12} className="mb-8">
+            <BackButton className="mb-2" />
+            <Typography variant="h2">
               {
-                [HubState.SessionForm]: "New Story",
-                [HubState.WaitingRoom]: "Lobby",
-                [HubState.DrawingSession]: "",
-              }[hubState]
-            }
-          </Typography>
-        </Grid>
-      )}
-      {hubState === HubState.SessionForm && (
-        <Grid item xs={12} sm={8} md={6} lg={4}>
-          <Card>
-            <Formik
-              initialValues={
                 {
-                  title: "",
-                  description: "",
-                  pages: 1,
-                } as Story
+                  [HubState.SessionForm]: "New Story",
+                  [HubState.WaitingRoom]: "Lobby",
+                  [HubState.DrawingSession]: "",
+                }[hubState]
               }
-              validationSchema={yup.object({
-                title: yup
-                  .string()
-                  .required("Title required")
-                  .test(
-                    "len",
-                    "Title too long",
-                    (val) => (val || "").length <= 32
-                  ),
-                description: yup
-                  .string()
-                  .required("Description required")
-                  .test(
-                    "len",
-                    "Description too long",
-                    (val) => (val || "").length <= 32
-                  ),
-                pages: yup
-                  .number()
-                  .required("Number of pages required")
-                  .integer("Invalid numbergit")
-                  .positive("Must have at least one page")
-                  .lessThan(21, "Maximum is 20 pages"),
-              })}
-              onSubmit={handleCreateSession}
-            >
-              {(formik) => (
-                <form onSubmit={formik.handleSubmit} autoComplete="off">
-                  <CardContent>
-                    <Grid container spacing={2}>
-                      <Grid
-                        item
-                        xs={12}
-                        sm={8}
-                        className="flex-grow flex flex-col"
-                      >
-                        <FormikTextField
-                          formik={formik}
-                          name="title"
-                          label="Title"
-                          overrides={{
-                            autoFocus: true,
-                            variant: "outlined",
-                            disabled: postLoading,
-                          }}
-                        />
-                      </Grid>
-                      <Grid
-                        item
-                        xs={12}
-                        sm={4}
-                        className="flex-grow flex flex-col"
-                      >
-                        <FormikTextField
-                          formik={formik}
-                          name="pages"
-                          label="Pages"
-                          overrides={{
-                            type: "number",
-                            variant: "outlined",
-                            disabled: postLoading,
-                          }}
-                        />
+            </Typography>
+          </Grid>
+        )}
+        {hubState === HubState.SessionForm && (
+          <Grid item xs={12} sm={8} md={6} lg={4}>
+            <Card>
+              <Formik
+                initialValues={
+                  {
+                    title: "",
+                    description: "",
+                    pages: 1,
+                  } as Story
+                }
+                validationSchema={yup.object({
+                  title: yup
+                    .string()
+                    .required("Title required")
+                    .test(
+                      "len",
+                      "Title too long",
+                      (val) => (val || "").length <= 32
+                    ),
+                  description: yup
+                    .string()
+                    .required("Description required")
+                    .test(
+                      "len",
+                      "Description too long",
+                      (val) => (val || "").length <= 32
+                    ),
+                  pages: yup
+                    .number()
+                    .required("Number of pages required")
+                    .integer("Invalid numbergit")
+                    .positive("Must have at least one page")
+                    .lessThan(21, "Maximum is 20 pages"),
+                })}
+                onSubmit={handleCreateSession}
+              >
+                {(formik) => (
+                  <form onSubmit={formik.handleSubmit} autoComplete="off">
+                    <CardContent>
+                      <Grid container spacing={2}>
+                        <Grid
+                          item
+                          xs={12}
+                          sm={8}
+                          className="flex-grow flex flex-col"
+                        >
+                          <FormikTextField
+                            formik={formik}
+                            name="title"
+                            label="Title"
+                            overrides={{
+                              autoFocus: true,
+                              variant: "outlined",
+                              disabled: postLoading,
+                            }}
+                          />
+                        </Grid>
+                        <Grid
+                          item
+                          xs={12}
+                          sm={4}
+                          className="flex-grow flex flex-col"
+                        >
+                          <FormikTextField
+                            formik={formik}
+                            name="pages"
+                            label="Pages"
+                            overrides={{
+                              type: "number",
+                              variant: "outlined",
+                              disabled: postLoading,
+                            }}
+                          />
+                        </Grid>
+                        <Grid item xs={12} className="flex-grow flex flex-col">
+                          <FormikTagField
+                            formik={formik}
+                            name="description"
+                            label="Description"
+                            maxTags={3}
+                            maxTagLength={10}
+                            tagProps={{
+                              color: "secondary",
+                            }}
+                            overrides={{
+                              inputMode: "text",
+                              variant: "outlined",
+                              disabled: postLoading,
+                            }}
+                          />
+                        </Grid>
+                        <Grid item xs={12} className="flex justify-end">
+                          <Button
+                            color="secondary"
+                            variant="contained"
+                            endIcon={<Icon fontSize="small">play_arrow</Icon>}
+                            disabled={postLoading}
+                            type="submit"
+                            style={{ height: "100%" }}
+                          >
+                            Start
+                          </Button>
+                        </Grid>
                       </Grid>
-                      <Grid item xs={12} className="flex-grow flex flex-col">
-                        <FormikTagField
-                          formik={formik}
-                          name="description"
-                          label="Description"
-                          maxTags={3}
-                          maxTagLength={10}
-                          tagProps={{
-                            color: "secondary",
-                          }}
-                          overrides={{
-                            inputMode: "text",
-                            variant: "outlined",
-                            disabled: postLoading,
-                          }}
-                        />
+                    </CardContent>
+                  </form>
+                )}
+              </Formik>
+            </Card>
+          </Grid>
+        )}
+        {hubState === HubState.WaitingRoom && (
+          <Grid item xs={12} sm={8} md={6} lg={4}>
+            <Card>
+              <CardContent>
+                <Grid container spacing={1}>
+                  <Grid item xs={12}>
+                    <Typography variant="h6">
+                      Joined Students ({Object.keys(joinedControllers).length}
+                      /3)
+                    </Typography>
+                  </Grid>
+                  <Grid
+                    item
+                    xs={12}
+                    style={{
+                      color: joinedControllers[ControllerRole.Story]
+                        ? "inherit"
+                        : "gray",
+                    }}
+                  >
+                    <Grid container>
+                      <Grid item xs={4}>
+                        <Icon fontSize="small" className="align-middle">
+                          text_fields
+                        </Icon>
+                        Story
                       </Grid>
-                      <Grid item xs={12} className="flex justify-end">
-                        <Button
-                          color="secondary"
-                          variant="contained"
-                          endIcon={<Icon fontSize="small">play_arrow</Icon>}
-                          disabled={postLoading}
-                          type="submit"
-                          style={{ height: "100%" }}
-                        >
-                          Start
-                        </Button>
+                      <Grid item xs={8}>
+                        <div className="ml-4 overflow-ellipsis overflow-hidden">
+                          {joinedControllers[ControllerRole.Story] ? (
+                            <>{joinedControllers[ControllerRole.Story]}</>
+                          ) : (
+                            <>
+                              waiting to join{" "}
+                              <CircularProgress
+                                size={12}
+                                thickness={8}
+                                className="ml-1"
+                              />
+                            </>
+                          )}
+                        </div>
                       </Grid>
                     </Grid>
-                  </CardContent>
-                </form>
-              )}
-            </Formik>
-          </Card>
-        </Grid>
-      )}
-      {hubState === HubState.WaitingRoom && (
-        <Grid item xs={12} sm={8} md={6} lg={4}>
-          <Card>
-            <CardContent>
-              <Grid container spacing={1}>
-                <Grid item xs={12}>
-                  <Typography variant="h6">
-                    Joined Students ({Object.keys(joinedControllers).length}/3)
-                  </Typography>
-                </Grid>
-                <Grid
-                  item
-                  xs={12}
-                  style={{
-                    color: joinedControllers[ControllerRole.Story]
-                      ? "inherit"
-                      : "gray",
-                  }}
-                >
-                  <Grid container>
-                    <Grid item xs={4}>
-                      <Icon fontSize="small" className="align-middle">
-                        text_fields
-                      </Icon>
-                      Story
-                    </Grid>
-                    <Grid item xs={8}>
-                      <div className="ml-4 overflow-ellipsis overflow-hidden">
-                        {joinedControllers[ControllerRole.Story] ? (
-                          <>{joinedControllers[ControllerRole.Story]}</>
-                        ) : (
-                          <>
-                            waiting to join{" "}
-                            <CircularProgress
-                              size={12}
-                              thickness={8}
-                              className="ml-1"
-                            />
-                          </>
-                        )}
-                      </div>
-                    </Grid>
                   </Grid>
-                </Grid>
-                <Grid
-                  item
-                  xs={12}
-                  style={{
-                    color: joinedControllers[ControllerRole.Character]
-                      ? "inherit"
-                      : "gray",
-                  }}
-                >
-                  <Grid container>
-                    <Grid item xs={4}>
-                      <Icon fontSize="small" className="align-middle">
-                        directions_run
-                      </Icon>
-                      Character
-                    </Grid>
-                    <Grid item xs={8}>
-                      <div className="ml-4 overflow-ellipsis overflow-hidden">
-                        {joinedControllers[ControllerRole.Character] ? (
-                          <>{joinedControllers[ControllerRole.Character]}</>
-                        ) : (
-                          <>
-                            waiting to join{" "}
-                            <CircularProgress
-                              size={12}
-                              thickness={8}
-                              className="ml-1"
-                            />
-                          </>
-                        )}
-                      </div>
+                  <Grid
+                    item
+                    xs={12}
+                    style={{
+                      color: joinedControllers[ControllerRole.Character]
+                        ? "inherit"
+                        : "gray",
+                    }}
+                  >
+                    <Grid container>
+                      <Grid item xs={4}>
+                        <Icon fontSize="small" className="align-middle">
+                          directions_run
+                        </Icon>
+                        Character
+                      </Grid>
+                      <Grid item xs={8}>
+                        <div className="ml-4 overflow-ellipsis overflow-hidden">
+                          {joinedControllers[ControllerRole.Character] ? (
+                            <>{joinedControllers[ControllerRole.Character]}</>
+                          ) : (
+                            <>
+                              waiting to join{" "}
+                              <CircularProgress
+                                size={12}
+                                thickness={8}
+                                className="ml-1"
+                              />
+                            </>
+                          )}
+                        </div>
+                      </Grid>
                     </Grid>
                   </Grid>
-                </Grid>
-                <Grid
-                  item
-                  xs={12}
-                  style={{
-                    color: joinedControllers[ControllerRole.Background]
-                      ? "inherit"
-                      : "gray",
-                  }}
-                >
-                  <Grid container>
-                    <Grid item xs={4}>
-                      <Icon fontSize="small" className="align-middle">
-                        image
-                      </Icon>
-                      Background
-                    </Grid>
-                    <Grid item xs={8}>
-                      <div className="ml-4 overflow-ellipsis overflow-hidden">
-                        {joinedControllers[ControllerRole.Background] ? (
-                          <>{joinedControllers[ControllerRole.Background]}</>
-                        ) : (
-                          <>
-                            waiting to join{" "}
-                            <CircularProgress
-                              size={12}
-                              thickness={8}
-                              className="ml-1"
-                            />
-                          </>
-                        )}
-                      </div>
+                  <Grid
+                    item
+                    xs={12}
+                    style={{
+                      color: joinedControllers[ControllerRole.Background]
+                        ? "inherit"
+                        : "gray",
+                    }}
+                  >
+                    <Grid container>
+                      <Grid item xs={4}>
+                        <Icon fontSize="small" className="align-middle">
+                          image
+                        </Icon>
+                        Background
+                      </Grid>
+                      <Grid item xs={8}>
+                        <div className="ml-4 overflow-ellipsis overflow-hidden">
+                          {joinedControllers[ControllerRole.Background] ? (
+                            <>{joinedControllers[ControllerRole.Background]}</>
+                          ) : (
+                            <>
+                              waiting to join{" "}
+                              <CircularProgress
+                                size={12}
+                                thickness={8}
+                                className="ml-1"
+                              />
+                            </>
+                          )}
+                        </div>
+                      </Grid>
                     </Grid>
                   </Grid>
+                  <Grid item xs={12} className="flex mt-2">
+                    <Chip color="primary" label={classroomToken} />
+                    <div className="flex flex-grow" />
+                    <Button
+                      color="secondary"
+                      variant="contained"
+                      endIcon={<Icon fontSize="small">brush</Icon>}
+                      onClick={onBeginDrawing}
+                      disabled={!isAllControllersJoined()}
+                    >
+                      Begin Drawing
+                    </Button>
+                  </Grid>
                 </Grid>
-                <Grid item xs={12} className="flex mt-2">
-                  <Chip color="primary" label={classroomToken} />
-                  <div className="flex flex-grow" />
-                  <Button
-                    color="secondary"
-                    variant="contained"
-                    endIcon={<Icon fontSize="small">brush</Icon>}
-                    onClick={onBeginDrawing}
-                    disabled={!isAllControllersJoined()}
-                  >
-                    Begin Drawing
-                  </Button>
-                </Grid>
-              </Grid>
-            </CardContent>
-          </Card>
-        </Grid>
-      )}
+              </CardContent>
+            </Card>
+          </Grid>
+        )}
+      </div>
       <div
-        className={`flex flex-col absolute w-full h-full ${
-          hubState !== HubState.DrawingSession && "invisible"
+        className={`flex flex-col w-full ${
+          hubState !== HubState.DrawingSession && "invisible overflow-y-hidden"
         }`}
+        style={{
+          // 64px navbar height, 20px content top padding, 48px content bot padding
+          height: "calc(100vh - 132px)",
+          gridRowStart: 1,
+          gridColumnStart: 1,
+        }}
       >
         <Grid container className="mt-4">
           <Grid item xs={12}>
@@ -746,6 +760,7 @@ export default function HubCanvasPage() {
                   name={ROLE_ICON[ControllerRole.Story].text}
                   isShown={hubState === HubState.DrawingSession}
                   offsetWidth={canvasOffsetWidth}
+                  offsetHeight={canvasOffsetHeight}
                 />
               </div>
               <div
@@ -766,6 +781,7 @@ export default function HubCanvasPage() {
                   name={ROLE_ICON[ControllerRole.Character].text}
                   isShown={hubState === HubState.DrawingSession}
                   offsetWidth={canvasOffsetWidth}
+                  offsetHeight={canvasOffsetHeight}
                 />
               </div>
               <div
@@ -786,6 +802,7 @@ export default function HubCanvasPage() {
                   name={ROLE_ICON[ControllerRole.Background].text}
                   isShown={hubState === HubState.DrawingSession}
                   offsetWidth={canvasOffsetWidth}
+                  offsetHeight={canvasOffsetHeight}
                 />
               </div>
               <div
@@ -802,7 +819,9 @@ export default function HubCanvasPage() {
                   role={ControllerRole.Hub}
                   layer={ControllerRole.Story}
                   pageNum={currentPageIdx}
+                  isShown={hubState === HubState.DrawingSession}
                   offsetWidth={canvasOffsetWidth}
+                  offsetHeight={canvasOffsetHeight}
                   setCursor={setStoryCursor}
                   setTextShapes={setStoryTextShapes}
                   textShapes={storyTextShapes}
@@ -824,7 +843,9 @@ export default function HubCanvasPage() {
                   role={ControllerRole.Hub}
                   layer={ControllerRole.Character}
                   pageNum={currentPageIdx}
+                  isShown={hubState === HubState.DrawingSession}
                   offsetWidth={canvasOffsetWidth}
+                  offsetHeight={canvasOffsetHeight}
                   setCursor={setCharacterCursor}
                   setTextShapes={setCharacterTextShapes}
                   textShapes={CharacterTextShapes}
@@ -846,7 +867,9 @@ export default function HubCanvasPage() {
                   role={ControllerRole.Hub}
                   layer={ControllerRole.Background}
                   pageNum={currentPageIdx}
+                  isShown={hubState === HubState.DrawingSession}
                   offsetWidth={canvasOffsetWidth}
+                  offsetHeight={canvasOffsetHeight}
                   setCursor={setBackgroundCursor}
                   setTextShapes={setBackgroundTextShapes}
                   textShapes={BackgroundTextShapes}
@@ -863,11 +886,12 @@ export default function HubCanvasPage() {
                 }}
               >
                 <div
-                  className="bg-white place-self-center"
+                  className="place-self-center bg-white"
                   style={{
-                    width: `${canvasOffsetWidth}px`,
-                    // if not decrement by 1, canvas will be larger than screen height
-                    height: `${canvasOffsetHeight - 1}px`,
+                    width: canvasOffsetWidth,
+                    // -1 so height can shrink
+                    height: canvasOffsetHeight - 1,
+                    maxHeight: "100%",
                     borderRadius: "24px",
                   }}
                 />
diff --git a/fableous-fe/src/containers/StoryDetailPage.tsx b/fableous-fe/src/containers/StoryDetailPage.tsx
index 2618e14c..4c9e9eaa 100644
--- a/fableous-fe/src/containers/StoryDetailPage.tsx
+++ b/fableous-fe/src/containers/StoryDetailPage.tsx
@@ -98,6 +98,8 @@ export default function StoryDetailPage() {
                     textShapes={textShapes}
                     audioPaths={audioPaths}
                     setAudioPaths={setAudioPaths}
+                    offsetWidth={0}
+                    offsetHeight={0}
                   />
                 </div>
                 <div
diff --git a/fableous-fe/src/hooks/useContainRatio.ts b/fableous-fe/src/hooks/useContainRatio.ts
index 1c1735d1..da8389dd 100644
--- a/fableous-fe/src/hooks/useContainRatio.ts
+++ b/fableous-fe/src/hooks/useContainRatio.ts
@@ -19,6 +19,7 @@ export default function useContainRatio<T>(config: {
 
   const isPotrait = (width || 0) / (height || 1) > ratio;
   const containedWidth = isPotrait ? (height || 0) * ratio : width || 0;
+  const containedHeight = containedWidth / ratio;
 
-  return [containedWidth, containedWidth / ratio];
+  return [containedWidth, containedHeight];
 }