diff --git a/package.json b/package.json
index da59f78..d3ca5a6 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "wh3mm",
   "productName": "wh3mm",
-  "version": "1.37.3",
+  "version": "1.37.4",
   "description": "WH3 Mod Manager",
   "main": ".webpack/main",
   "scripts": {
diff --git a/src/app.tsx b/src/app.tsx
index c47b12b..483a917 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -35,7 +35,7 @@ function render() {
       >
         <TopBar />
         {(window.location.pathname.includes("/main_window") && (
-          <div className="m-auto px-8 pb-4 pt-11 max-w-[100rem]">
+          <div className="m-auto pb-4 pt-11 height-without-topbar scrollbar scrollbar-track-gray-700 scrollbar-thumb-blue-700">
             <Onboarding></Onboarding>
             <LeftSidebar />
             <Main />
diff --git a/src/components/Categories.tsx b/src/components/Categories.tsx
index b7a9bd2..a8524d5 100644
--- a/src/components/Categories.tsx
+++ b/src/components/Categories.tsx
@@ -538,7 +538,7 @@ const Categories = React.memo(() => {
         </div>
       </FloatingOverlay>
 
-      <div className="-mt-6">
+      <div className="-mt-6 mx-10">
         <div className="mt-5 flex">
           <span className="relative ml-4">
             <input
@@ -664,7 +664,7 @@ const Categories = React.memo(() => {
           setCurrentlySelectedMods(selectedMods);
           setIsContextMenuOpen(true);
         }}
-        className="overflow-hidden"
+        className="overflow-hidden mx-10"
       >
         <HotTable
           className={(isContextMenuOpen && "disable-border") || ""}
@@ -675,7 +675,7 @@ const Categories = React.memo(() => {
           width="100%"
           ref={hotRef}
           stretchH="last"
-          height={"90vh"}
+          height={"88vh"}
           nestedRows={true}
           // preventOverflow={"vertical"}
           licenseKey="non-commercial-and-evaluation"
diff --git a/src/components/Main.tsx b/src/components/Main.tsx
index 0d0f512..f526406 100644
--- a/src/components/Main.tsx
+++ b/src/components/Main.tsx
@@ -9,7 +9,7 @@ const Main = () => {
   return (
     <>
       {(currentTab == "categories" && <Categories></Categories>) || (
-        <div className="grid grid-cols-12 text-white">
+        <div className="grid grid-cols-12 text-white max-w-[100rem] mx-auto">
           <div className="col-span-10">
             <ModRows />
           </div>
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 10e7e48..6123b47 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -255,7 +255,7 @@ const Sidebar = React.memo(() => {
         setIsOpen={setIsShowingRequiredMods}
         modDependencies={missingModDependencies}
       />
-      <div className="fixed">
+      <div className="fixed h-[90vh]">
         <div id="presetSection">
           <Tooltip
             placement="left"
@@ -351,7 +351,7 @@ const Sidebar = React.memo(() => {
           </span>
         </div>
 
-        <div className="fixed right-[5%] bottom-[4%] z-10">
+        <div className="absolute w-full bottom-0 z-10">
           {missingModDependencies.length > 0 && (
             <div className="text-center text-red-700 font-semibold mb-4">
               <div
diff --git a/src/components/TopBar.tsx b/src/components/TopBar.tsx
index 8d35e48..bb47cc3 100644
--- a/src/components/TopBar.tsx
+++ b/src/components/TopBar.tsx
@@ -23,14 +23,17 @@ const TopBar = memo(() => {
     ((isAdmin && " admin") || "");
 
   return (
-    <div
-      id="top-bar"
-      draggable="true"
-      className="h-[28px] bg-gray-700 w-full fixed top-0 flex items-center z-[1000]"
-    >
-      <img className="ml-1 h-[24px]" src={require("../assets/modmanager.ico")} />
-      <span className="ml-1 font-light text-sm text-slate-100">{title}</span>
-    </div>
+    <>
+      <div
+        id="top-bar"
+        draggable="true"
+        className="h-[28px] bg-gray-700 w-full fixed top-0 flex items-center z-[1000]"
+      >
+        <img className="ml-1 h-[24px]" src={require("../assets/modmanager.ico")} />
+        <span className="ml-1 font-light text-sm text-slate-100">{title}</span>
+      </div>
+      <div id="top-bar" className="h-[28px] w-full"></div>
+    </>
   );
 });
 export default TopBar;
diff --git a/src/index.css b/src/index.css
index 1dfc90c..d99f8af 100644
--- a/src/index.css
+++ b/src/index.css
@@ -109,7 +109,7 @@ body:not(.disable-row-hover) .row:hover > div:not(.drop-ghost) {
   background-color: #404040;
   padding: 0.5rem;
   position: sticky;
-  top: 1.25rem;
+  top: -2.75rem;
 }
 
 #top-bar {
@@ -185,3 +185,7 @@ body:not(.disable-row-hover) .row:hover > div:not(.drop-ghost) {
 .icon-color-on-hover:hover > svg {
   color: #394250;
 }
+
+.height-without-topbar {
+  max-height: calc(100vh - 28px);
+}
diff --git a/src/index.html b/src/index.html
index 07c23c9..b95ba01 100644
--- a/src/index.html
+++ b/src/index.html
@@ -4,10 +4,7 @@
     <meta charset="UTF-8" />
     <title>WH3 Mod Manager</title>
   </head>
-  <body
-    id="body"
-    class="dark dark:bg-slate-800 font-light scrollbar scrollbar-track-gray-700 scrollbar-thumb-blue-700"
-  >
+  <body id="body" class="dark dark:bg-slate-800 font-light overflow-hidden">
     <div id="root" class=""></div>
   </body>
 </html>