diff --git a/frontend/src/components/Comparison.tsx b/frontend/src/components/Comparison.tsx
index ebc0d8d4..b78265c7 100644
--- a/frontend/src/components/Comparison.tsx
+++ b/frontend/src/components/Comparison.tsx
@@ -235,15 +235,15 @@ export function Comparison({
       <h1 className="text-center font-bold">
         {props?.command || "Drag and Drop Classification"}
       </h1>
-
-      <div className="flex flex-row space-x-4 justify-center">
+      {/* These changes ensure the comparison activity can be viewed without any/slight scrolling and is larger.  */}
+      <div className="flex flex-col lg:flex-row gap-8 lg:gap-16 justify-center items-center lg:items-start p-4">
         {/* Bank of Options (Now droppable) */}
         <div
-          className="flex flex-col space-y-2 p-4 bg-white rounded-2xl border-2 border-gray-300 w-96 h-96"
+          className="flex flex-col space-y-6 p-6 bg-white rounded-2xl border-2 border-gray-300 w-full max-w-md lg:max-w-lg xl:max-w-xl"
           onDrop={(e) => onDrop(e, "bank")}
           onDragOver={(e) => onDragOver(e)}
         >
-          <h2 className="text-center font-semibold">Options</h2>
+          <h2 className="text-center font-semibold text-xl">Options</h2>
           {renderOptionsForStatus("bank")}
         </div>
 
@@ -251,9 +251,9 @@ export function Comparison({
         <div
           onDrop={(e) => onDrop(e, categoryA)}
           onDragOver={(e) => onDragOver(e)}
-          className="flex-1 flex flex-col space-y-2 p-4 bg-white rounded-2xl border-2 border-gray-300 w-96 h-96"
+          className="flex-1 flex flex-col space-y-6 p-6 bg-white rounded-2xl border-2 border-gray-300 w-full max-w-md lg:max-w-lg xl:max-w-xl"
         >
-          <h2 className="text-center font-semibold">{categoryA}</h2>
+          <h2 className="text-center font-semibold text-xl">{categoryA}</h2>
           {renderOptionsForStatus(categoryA)}
         </div>
 
@@ -261,9 +261,9 @@ export function Comparison({
         <div
           onDrop={(e) => onDrop(e, categoryB)}
           onDragOver={(e) => onDragOver(e)}
-          className="flex-1 flex flex-col space-y-2 p-4 bg-white rounded-2xl border-2 border-gray-300 w-96 h-96"
+          className="flex-1 flex flex-col space-y-6 p-6 bg-white rounded-2xl border-2 border-gray-300 w-full max-w-md lg:max-w-lg xl:max-w-xl"
         >
-          <h2 className="text-center font-semibold">{categoryB}</h2>
+          <h2 className="text-center font-semibold text-xl">{categoryB}</h2>
           {renderOptionsForStatus(categoryB)}
         </div>
       </div>
diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
index 102516f1..9d558f40 100644
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -77,7 +77,7 @@ export default function Navbar() {
 
   return (
     <header className="top-0 sticky w-full px-2 z-[100] bg-white">
-      <div className="flex flex-row justify-between relative h-[60px]">
+      <div className="flex flex-row justify-between relative">
         <div className="flex flex-row items-center justify-between py-1 sm:py-0">
           <a href="/">
             <img
@@ -108,7 +108,8 @@ export default function Navbar() {
           </button>
         </div>
 
-        <nav className="px-1 bg-stone-800 text-white hidden sm:block my-auto sm:py-0 rounded-b-md font-semibold absolute left-1/2 transform -translate-x-1/2">
+        {/* removed "absolute left-1/2 transform -translate-x-1/2" and replaced it with "mx-auto" to allow the navbar to stop overlapping with the content borders in the book pages */}
+        <nav className="px-2 bg-stone-800 text-white hidden sm:block my-auto sm:py-0 rounded-b-md font-semibold mx-auto">
           <ul className="tablet:mx-auto sm:flex sm:items-center text-center text-lg">
             {navLinks.map((route, i) => (
               <NavButton {...route} key={`nav-${i}`} />
diff --git a/frontend/src/pages/BookEditor.tsx b/frontend/src/pages/BookEditor.tsx
index b18c323c..429b9860 100644
--- a/frontend/src/pages/BookEditor.tsx
+++ b/frontend/src/pages/BookEditor.tsx
@@ -1074,7 +1074,7 @@ function BookDetailsEditor({
   }, []);
 
   return (
-    <div className="flex flex-row h-full p-2 gap-2 w-full">
+    <div className="flex flex-row h-full min-h-screen p-2 gap-2 overflow-y-auto">
       <div className="flex flex-col gap-2 w-full">
         {textFields.map((field, i) => (
           <div key={i} className="flex flex-col w-full gap-2">
@@ -1409,33 +1409,35 @@ export default function BookEditor() {
   return (
     <div className="text-lg xl:text-lg 2xl:text-lg h-screen flex flex-col overflow-hidden">
       <Navbar />
-      <div className="flex-1 flex flex-row p-2 gap-2 min-h-0 overflow-hidden">
-        <PageNavigator
-          pages={book.pages.sort((a, b) => a.pageNumber - b.pageNumber)}
-          pageNum={pageNum}
-          setPageNum={setPageNum}
-          addPage={addPage}
-          deletePage={deletePage}
-          swapPages={swapPages}
-          bookId={bookId}
-          isCollapsed={isNavigatorCollapsed}
-          setIsCollapsed={setIsNavigatorCollapsed}
-        />
-        <div className="flex-1 min-w-0 overflow-hidden">
-          {currentPage && (
-            <PageEditor
-              page={currentPage}
-              setPage={setPage}
-              isNavigatorCollapsed={isNavigatorCollapsed}
-            />
-          )}
-          {pageNum === 0 && book && (
-            <BookDetailsEditor
-              book={book}
-              setBook={setBook}
-              saveBook={saveBook}
-            />
-          )}
+      <div className="flex-1 overflow-y-auto">
+        <div className="flex flex-row p-2 gap-2 min-h-0 overflow-hidden">
+          <PageNavigator
+            pages={book.pages.sort((a, b) => a.pageNumber - b.pageNumber)}
+            pageNum={pageNum}
+            setPageNum={setPageNum}
+            addPage={addPage}
+            deletePage={deletePage}
+            swapPages={swapPages}
+            bookId={bookId}
+            isCollapsed={isNavigatorCollapsed}
+            setIsCollapsed={setIsNavigatorCollapsed}
+          />
+          <div className="flex-1 min-w-0 overflow-hidden">
+            {currentPage && (
+              <PageEditor
+                page={currentPage}
+                setPage={setPage}
+                isNavigatorCollapsed={isNavigatorCollapsed}
+              />
+            )}
+            {pageNum === 0 && book && (
+              <BookDetailsEditor
+                book={book}
+                setBook={setBook}
+                saveBook={saveBook}
+              />
+            )}
+          </div>
         </div>
       </div>
     </div>
diff --git a/frontend/src/pages/BookPage.tsx b/frontend/src/pages/BookPage.tsx
index df364ea4..8557495e 100644
--- a/frontend/src/pages/BookPage.tsx
+++ b/frontend/src/pages/BookPage.tsx
@@ -539,7 +539,7 @@ export default function BookPage() {
   return (
     <div className="text-xs xl:text-lg 2xl:text-xl">
       <Navbar />
-      <div className="mx-auto h-[calc(100vh-60px)]">
+      <div className="mx-auto h-[calc(100vh-68px)]">
         <div className="px-2 py-2 min-h-full flex">
           {page ? (
             <div className="flex flex-col w-full min-h-full justify-between gap-1">
diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
index b090cdec..11af0b17 100644
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -100,8 +100,8 @@ export default function HomePage() {
       <div className="relative flex flex-row min-h-screen">
         {/* Sidebar */}
         <div
-          className={`fixed left-0 h-full bg-gradient-to-br from-[#d0ecd5] to-[#ecbfa3] shadow-lg transition-all duration-300 z-20 ${
-            sidebarVisible ? "w-64" : "w-36"
+          className={`fixed left-0 h-full bg-gradient-to-br from-[#d0ecd5] to-[#ecbfa3] shadow-lg transition-all duration-300 z-40 ${
+            sidebarVisible ? "w-60" : "w-36"
           }`}
           onMouseEnter={() => handleSidebarHover(true)}
           onMouseLeave={() => handleSidebarHover(true)}
@@ -208,7 +208,7 @@ export default function HomePage() {
         {/* Main Content */}
         <div
           className={`flex-1 transition-all duration-300 ${
-            sidebarVisible ? "ml-64" : "ml-16"
+            sidebarVisible ? "ml-60" : "ml-36"
           }`}
         >
           <div className="flex flex-col items-center w-full z-10">