diff --git a/src/app.tsx b/src/app.tsx
index 7d290fa..413749e 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -160,10 +160,10 @@ function AppLayout(props: { children: any }) {
         <LeftBar />
         <div
           id="center-body"
-          class="bg-base relative h-screen w-screen overflow-x-hidden md:ml-62.5 md:w-[calc(100vw-500px)] 2xl:ml-72 2xl:w-[calc(100vw-576px)]"
+          class="bg-base relative h-screen w-screen overflow-x-hidden md:ml-62.5 md:w-[calc(100vw-500px)]"
         >
           <noscript>
-            <div class="bg-yellow text-crust border-text fixed top-0 z-150 border-b-2 p-4 text-center font-semibold md:w-[calc(100vw-500px)] xl:ml-72 xl:w-[calc(100vw-576px)]">
+            <div class="bg-yellow text-crust border-text fixed top-0 z-150 border-b-2 p-4 text-center font-semibold md:w-[calc(100vw-500px)]">
               JavaScript is disabled. Features will be limited.
             </div>
           </noscript>
@@ -180,7 +180,7 @@ function AppLayout(props: { children: any }) {
                 <CustomScrollbar
                   autoHide={true}
                   autoHideDelay={1500}
-                  rightOffset={250}
+                  rightOffset={window.innerWidth < 1536 ? 250 : 288}
                 >
                   {props.children}
                 </CustomScrollbar>
diff --git a/src/components/Bars.tsx b/src/components/Bars.tsx
index e8f2f79..6ede17d 100644
--- a/src/components/Bars.tsx
+++ b/src/components/Bars.tsx
@@ -233,7 +233,7 @@ export function LeftBar() {
   const handleLinkClick = () => {
     if (
       typeof window !== "undefined" &&
-      window.innerWidth < BREAKPOINTS.MOBILE
+      window.innerWidth < BREAKPOINTS.MOBILE_MAX_WIDTH
     ) {
       setLeftBarVisible(false);
     }
@@ -301,7 +301,7 @@ export function LeftBar() {
 
     if (ref) {
       const handleKeyDown = (e: KeyboardEvent) => {
-        const isMobile = window.innerWidth < BREAKPOINTS.MOBILE;
+        const isMobile = window.innerWidth < BREAKPOINTS.MOBILE_MAX_WIDTH;
 
         if (!isMobile || !leftBarVisible()) return;
 
@@ -366,7 +366,7 @@ export function LeftBar() {
   const getMainNavStyles = () => {
     const baseStyles = {
       "transition-timing-function": "cubic-bezier(0.4, 0, 0.2, 1)",
-      width: windowWidth() < 1536 ? "250px" : "288px",
+      width: "250px",
       "padding-top": "env(safe-area-inset-top)",
       "padding-bottom": "env(safe-area-inset-bottom)"
     };
@@ -456,7 +456,7 @@ export function LeftBar() {
                     <a
                       href={`/blog/${post.title}`}
                       onClick={handleLinkClick}
-                      class="hover:text-subtext0 block w-52 transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-105 hover:font-bold"
+                      class="hover:text-subtext0 block w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-105 hover:font-bold"
                     >
                       <Typewriter class="flex flex-col" keepAlive={false}>
                         <div class="relative overflow-hidden">
@@ -607,14 +607,13 @@ export function RightBar() {
     <aside
       ref={ref}
       aria-label="Links and activity"
-      class="border-l-overlay2 bg-base fixed right-0 z-50 hidden h-dvh w-fit border-l-2 transition-transform duration-500 ease-out md:block"
+      class="border-l-overlay2 bg-base fixed right-0 z-50 hidden h-dvh w-62.5 border-l-2 transition-transform duration-500 ease-out md:block"
       classList={{
         "translate-x-full": !rightBarVisible(),
         "translate-x-0": rightBarVisible()
       }}
       style={{
         "transition-timing-function": "cubic-bezier(0.4, 0, 0.2, 1)",
-        width: "250px",
         "box-shadow": "inset 6px 0 16px -6px rgba(0, 0, 0, 0.1)",
         "padding-top": "env(safe-area-inset-top)",
         "padding-bottom": "env(safe-area-inset-bottom)",