diff --git a/src/cljs/athens/db.cljs b/src/cljs/athens/db.cljs
index 73ec552b76..722618c927 100644
--- a/src/cljs/athens/db.cljs
+++ b/src/cljs/athens/db.cljs
@@ -153,7 +153,8 @@
                :athena/open         false
                :athena/recent-items '()
                :left-sidebar/open   false
-               :right-sidebar/width 300
+               ;; todo: some value initialization like athens/persist
+               ;; :right-sidebar/width 32
                :mouse-down          false
                :daily-notes/items   []
                :selection           {:items []}
diff --git a/src/cljs/athens/views/right_sidebar/events.cljs b/src/cljs/athens/views/right_sidebar/events.cljs
index 27db9215be..9f22a5f937 100644
--- a/src/cljs/athens/views/right_sidebar/events.cljs
+++ b/src/cljs/athens/views/right_sidebar/events.cljs
@@ -7,7 +7,7 @@
     [athens.db :as db]
     [athens.interceptors :as interceptors]
     [athens.views.right-sidebar.shared :as shared]
-    [re-frame.core :as rf :refer [reg-event-fx reg-event-db]]))
+    [re-frame.core :as rf :refer [reg-event-fx]]))
 
 
 ;; UI
@@ -26,11 +26,15 @@
             [:dispatch [:posthog/report-feature :right-sidebar true]]]})))
 
 
-(reg-event-db
+(reg-event-fx
   :right-sidebar/set-width
   [(interceptors/sentry-span-no-new-tx "right-sidebar/set-width")]
-  (fn [db [_ width]]
-    (assoc db :right-sidebar/width width)))
+  (fn [_ [_ width]]
+    (let [user-page @(rf/subscribe [:presence/user-page])]
+      {:fx [[:dispatch [:properties/update-in [:node/title user-page] [(shared/ns-str "/width")]
+                        (fn [db uid]
+                          ;; todo: good place to be using a number primitive type
+                          [(graph-ops/build-block-save-op db uid (str width))])]]]})))
 
 
 (reg-event-fx
diff --git a/src/cljs/athens/views/right_sidebar/shared.cljs b/src/cljs/athens/views/right_sidebar/shared.cljs
index a92163b812..041102a15d 100644
--- a/src/cljs/athens/views/right_sidebar/shared.cljs
+++ b/src/cljs/athens/views/right_sidebar/shared.cljs
@@ -33,6 +33,18 @@
     open?))
 
 
+(defn get-width
+  []
+  (let [user-page  @(rf/subscribe [:presence/user-page])
+        props      (-> (reactive/get-reactive-node-document [:node/title user-page])
+                       :block/properties)
+        default-vw (str 32)
+        width      (-> (get props (ns-str "/width"))
+                       :block/string)]
+    ;; can also use the clamp function in RightSidebarResizeControl.tsx to make sure the width is always bounded
+    (or width default-vw)))
+
+
 (defn get-eid
   [item-block]
   (let [{:keys [type name]} item-block]
diff --git a/src/cljs/athens/views/right_sidebar/subs.cljs b/src/cljs/athens/views/right_sidebar/subs.cljs
index 51a6f9df07..88efd91e3a 100644
--- a/src/cljs/athens/views/right_sidebar/subs.cljs
+++ b/src/cljs/athens/views/right_sidebar/subs.cljs
@@ -34,5 +34,7 @@
 
 (rf/reg-sub
   :right-sidebar/width
-  (fn [db _]
-    (:right-sidebar/width db)))
+  (fn [_db _]
+    ;; todo: some value initialization like athens/persist
+    ;; (:right-sidebar/width db)
+    (shared/get-width)))
diff --git a/src/js/components/Layout/MainContent.tsx b/src/js/components/Layout/MainContent.tsx
index 94a7945270..855bc097f4 100644
--- a/src/js/components/Layout/MainContent.tsx
+++ b/src/js/components/Layout/MainContent.tsx
@@ -30,7 +30,7 @@ export const MainContent = ({ children, isRightSidebarOpen, rightSidebarWidth })
           "--app-header-height": toolbarHeight,
         }}
         animate={{
-          paddingRight: isRightSidebarOpen ? rightSidebarWidth : 0,
+          paddingRight: isRightSidebarOpen ? rightSidebarWidth + "vw" : 0,
           transition: layoutAnimationTransition
         }}
       >
diff --git a/src/js/components/Layout/RightSidebar.tsx b/src/js/components/Layout/RightSidebar.tsx
index 04aa83faf0..80ec93eaed 100644
--- a/src/js/components/Layout/RightSidebar.tsx
+++ b/src/js/components/Layout/RightSidebar.tsx
@@ -24,7 +24,7 @@ export const RightSidebar = (props: RightSidebarProps) => {
       {isOpen && (
         <Box
           as={motion.div}
-          {...layoutAnimationProps(rightSidebarWidth + "px")}
+          {...layoutAnimationProps(rightSidebarWidth + "vw")}
           zIndex={1}
           bg="background.floor"
           transitionProperty="background"
@@ -39,7 +39,7 @@ export const RightSidebar = (props: RightSidebarProps) => {
           pt={`calc(${toolbarHeight} + 1rem)`}
           left="auto"
         >
-          <Box overflow="hidden" width={rightSidebarWidth + "px"}>
+          <Box overflow="hidden" width={rightSidebarWidth + "vw"}>
             {children}
           </Box>
         </Box>
diff --git a/src/js/components/Layout/RightSidebarResizeControl.tsx b/src/js/components/Layout/RightSidebarResizeControl.tsx
index 16b54eb839..cce4e4ecd4 100644
--- a/src/js/components/Layout/RightSidebarResizeControl.tsx
+++ b/src/js/components/Layout/RightSidebarResizeControl.tsx
@@ -1,10 +1,17 @@
 import React from 'react';
 import { Box, BoxProps } from '@chakra-ui/react';
 
-const MIN_SIZE = 200;
-const MAX_SIZE = 800;
+const MIN_VW = 20;
+const MAX_VW = 80;
+
 
 const clamp = (value: number, min: number, max: number) => Math.max(Math.min(value, max), min);
+const getVW = (e, window) => {
+  const innerWidth = window.innerWidth;
+  const clientX = e.clientX;
+  const calcVW = (innerWidth - clientX) / innerWidth * 100;
+  return calcVW;
+}
 
 interface RightSidebarResizeControlProps extends BoxProps {
   onResizeSidebar: (size: number) => void;
@@ -19,7 +26,9 @@ export const RightSidebarResizeControl = (props: RightSidebarResizeControlProps)
   const moveHandler = (e) => {
     if (isDragging) {
       e.preventDefault();
-      onResizeSidebar(clamp(window.innerWidth - e.clientX, MIN_SIZE, MAX_SIZE));
+      const calcVW = getVW(e, window);
+      const clampVW = clamp(calcVW, MIN_VW, MAX_VW);
+      onResizeSidebar(clampVW);
     }
   }
 
@@ -48,8 +57,7 @@ export const RightSidebarResizeControl = (props: RightSidebarResizeControlProps)
       position="fixed"
       zIndex={100}
       opacity={0}
-      outline="none"
-      right={rightSidebarWidth + "px"}
+      right={rightSidebarWidth + "vw"}
       height="100%"
       cursor="col-resize"
       onMouseDown={() => setIsDragging(true)}