diff --git a/client/src/App.jsx b/client/src/App.jsx
index c60c2f9..603d97f 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -21,9 +21,27 @@ function App() {
         }
 
         .react-resizable-handle-se {
-          position: sticky;
-          right: 0;
+          position: absolute;
           bottom: 0;
+          z-index: 1;
+          border-radius: 5px;
+        }
+
+        * {
+          scrollbar-width: thin;              /* Firefox */
+          scrollbar-color: #a0aec0 transparent; /* Firefox */
+        }
+
+        /* Chrome, Edge, Safari */
+        ::-webkit-scrollbar {
+          width: 8px;
+        }
+        ::-webkit-scrollbar-thumb {
+          background-color: rgba(100, 100, 100, 0.4);
+          border-radius: 4px;
+        }
+        ::-webkit-scrollbar-track {
+          background: transparent;
         }
       `}
     />
diff --git a/client/src/components/layout/Canvas/Widget.jsx b/client/src/components/layout/Canvas/Widget.jsx
index 1c83c21..6b723ea 100644
--- a/client/src/components/layout/Canvas/Widget.jsx
+++ b/client/src/components/layout/Canvas/Widget.jsx
@@ -5,14 +5,14 @@ export default function Widget({ title }) {
   const styles = recipe();
 
   return (
-    <chakra.div className="react-resizable-handle-se">
+    <>
       <chakra.div css={styles.header} className="widget-handle" >
         {title}
       </chakra.div>
       <chakra.div css={styles.canvas} >
-        This is the widget content - drag or resize me!
+        This is their widget content - drag or resize me!
       </chakra.div>
-    </chakra.div>
+    </>
   );
 }
 
diff --git a/client/src/components/layout/Canvas/views/WidgetCanvas.jsx b/client/src/components/layout/Canvas/views/WidgetCanvas.jsx
index ba57e32..33e0912 100644
--- a/client/src/components/layout/Canvas/views/WidgetCanvas.jsx
+++ b/client/src/components/layout/Canvas/views/WidgetCanvas.jsx
@@ -5,19 +5,19 @@
 import { useState } from 'react';
 import GridLayout, { WidthProvider } from 'react-grid-layout';
 import Widget from '../Widget.jsx';
-import { useSlotRecipe, chakra } from '@chakra-ui/react';
+import { useSlotRecipe, chakra, Flex } from '@chakra-ui/react';
 
 export default function WidgetCanvas() {
     // Define widgets initial position and size
     // TODO Add dynamic adding/deleting of widgets via options button 
     const recipe = useSlotRecipe({ key: "widget" });
-    const styles = recipe();
-    const ResponsiveGridLayout = WidthProvider(GridLayout);
+    const styles = recipe(); // using root recipe for widget below
+    const ResponsiveGridLayout = WidthProvider(GridLayout); // canvas width now adjusts to window size
 
     const [layout, setLayout] = useState([
-        { i: 'myWidget1', x: 0, y: 0, w: 3, h: 3, minH: 3, static: false },
-        { i: 'myWidget2', x: 3, y: 0, w: 3, h: 3, minH: 3, static: false },
-        { i: 'myWidget3', x: 6, y: 0, w: 3, h: 3, minH: 3, static: false }
+        { i: '0', x: 0, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: false },
+        { i: '1', x: 3, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: false },
+        { i: '2', x: 6, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: false }
     ]);
 
     const onLayoutChange = (newLayout) => { 
@@ -49,9 +49,10 @@ export default function WidgetCanvas() {
                 onDragStop={handleDragStop}
             >
                 {layout.map((item) => (
-                    <chakra.div key={item.i} css={styles.root} >
+                    // this flex wrapper allows the widget to shrink down to the header size, no less
+                    <Flex key={item.i} css={styles.root} height="100%" >
                         <Widget title="VDAP Widget" />
-                    </chakra.div>
+                    </Flex>
                 ))}
             </ResponsiveGridLayout>
         </chakra.div>
diff --git a/client/src/components/layout/Sidebar/Sidebar.jsx b/client/src/components/layout/Sidebar/Sidebar.jsx
index 55de0b0..b488a94 100644
--- a/client/src/components/layout/Sidebar/Sidebar.jsx
+++ b/client/src/components/layout/Sidebar/Sidebar.jsx
@@ -60,6 +60,7 @@ export const Users = createIcon({
 export default function Sidebar() {
   const [isOpen, setIsOpen] = useState(true);
 
+    // this list of btns will come from the db (not every usr will have access to admin)
   const buttons = [
     {icon: PushPin, name: "Dashboard"},
     {icon: Globe, name: "Global Map"},
diff --git a/client/src/theme.js b/client/src/theme.js
index f2fb2ca..0ac34e4 100644
--- a/client/src/theme.js
+++ b/client/src/theme.js
@@ -53,22 +53,30 @@ const widgetRecipe = defineSlotRecipe({
   slots: ["root", "header", "canvas"],
   base: {
     root: {
+      flexDirection: "column",
+      gap: "1",
+      position: "relative",
       bg: "base100",
       borderRadius: "md",
       p: "1",
+      paddingBottom: "2",
       border: "1px solid",
       borderColor: "{base300}",
       textAlign: "center",
-      overflow: "auto"
+      height: "100%"
     },
     header: {
-      bg: "base100",
+      bg: "base200",
       cursor: "move",
-      borderRadius: "md"
+      borderRadius: "sm",
+      whiteSpace: "nowrap"
     },
     canvas: {
+      flex: "1 1 auto",
       bg: "base100",
-      cursor: "default"
+      cursor: "default",
+      borderRadius: "md",
+      overflow: "auto",
     }
   }
 });
@@ -99,8 +107,6 @@ const config = defineConfig({
       },
     },
     recipes: {
-      // sidebar: sidebarRecipe,
-      // sidebarBTN: sidebarBtnRecipe,
       header: headerRecipe,
       canvas: canvasRecipe,
     },