diff --git a/packages/api/src/functions/covers/handler.ts b/packages/api/src/functions/covers/handler.ts
index 30034afe..8a54712b 100644
--- a/packages/api/src/functions/covers/handler.ts
+++ b/packages/api/src/functions/covers/handler.ts
@@ -25,7 +25,7 @@ const lambda: ValidatedEventAPIGatewayProxyEvent = async (event) => {
     width: 600,
     height: 600,
     fit: "inside",
-    withoutEnlargement: true
+    withoutEnlargement: true  
   })
 
   const converted =
diff --git a/packages/web/src/books/bookList/BookListWithControls.tsx b/packages/web/src/books/bookList/BookListWithControls.tsx
index 652c4943..f01cd580 100644
--- a/packages/web/src/books/bookList/BookListWithControls.tsx
+++ b/packages/web/src/books/bookList/BookListWithControls.tsx
@@ -9,6 +9,7 @@ export const BookListWithControls: FC<
     data: string[]
     renderEmptyList?: React.ReactNode
     ListActionsToolbarProps?: Partial<ComponentProps<typeof ListActionsToolbar>>
+    useWindowScroll?: boolean
   } & Pick<
     ComponentProps<typeof ListActionsToolbar>,
     "viewMode" | "onViewModeChange" | "sorting" | "onSortingChange"
@@ -20,42 +21,36 @@ export const BookListWithControls: FC<
   viewMode,
   onViewModeChange,
   onSortingChange,
-  ListActionsToolbarProps
+  ListActionsToolbarProps,
+  useWindowScroll
 }) => {
   const sortedData = useBookIdsSortedBy(data, sorting)
 
   return (
-    <Stack
-      style={{
-        height: "100%",
-        flex: 1,
-        overflow: "hidden"
-      }}
-    >
-      <ListActionsToolbar
-        viewMode={viewMode ?? "grid"}
-        onViewModeChange={onViewModeChange}
-        sorting={sorting ?? "alpha"}
-        onSortingChange={onSortingChange}
-        {...ListActionsToolbarProps}
-      />
-      <div
-        style={{
-          display: "flex",
-          height: "100%",
-          overflow: "scroll",
-          flex: 1
-        }}
-      >
+    <Stack flex={1}>
+      <Stack flex={1}>
         {sortedData.length === 0 && !!renderEmptyList && renderEmptyList}
         {sortedData.length > 0 && (
           <BookList
             data={sortedData}
             viewMode={viewMode}
-            style={{ height: "100%", width: "100%" }}
+            renderHeader={() => (
+              <ListActionsToolbar
+                viewMode={viewMode ?? "grid"}
+                onViewModeChange={onViewModeChange}
+                sorting={sorting ?? "alpha"}
+                onSortingChange={onSortingChange}
+                {...ListActionsToolbarProps}
+              />
+            )}
+            useWindowScroll={useWindowScroll}
+            style={{
+              height: "100%",
+              width: "100%"
+            }}
           />
         )}
-      </div>
+      </Stack>
     </Stack>
   )
 }
diff --git a/packages/web/src/collections/CollectionDetailsScreen.tsx b/packages/web/src/collections/details/CollectionDetailsScreen.tsx
similarity index 72%
rename from packages/web/src/collections/CollectionDetailsScreen.tsx
rename to packages/web/src/collections/details/CollectionDetailsScreen.tsx
index e1b9cf0c..21d7d30a 100644
--- a/packages/web/src/collections/CollectionDetailsScreen.tsx
+++ b/packages/web/src/collections/details/CollectionDetailsScreen.tsx
@@ -1,24 +1,26 @@
-import { TopBarNavigation } from "../navigation/TopBarNavigation"
-import { Box, Stack, Typography, useMediaQuery, useTheme } from "@mui/material"
+import { TopBarNavigation } from "../../navigation/TopBarNavigation"
+import { Box, Stack, Typography, useTheme } from "@mui/material"
 import { useNavigate, useParams } from "react-router-dom"
-import EmptyLibraryAsset from "../assets/empty-library.svg"
-import CollectionBgSvg from "../assets/series-bg.svg"
-import { BookListWithControls } from "../books/bookList/BookListWithControls"
+import EmptyLibraryAsset from "../../assets/empty-library.svg"
+import CollectionBgSvg from "../../assets/series-bg.svg"
+import { BookListWithControls } from "../../books/bookList/BookListWithControls"
 import { signal, useSignalValue } from "reactjrx"
 import {
   ListActionSorting,
   ListActionViewMode
-} from "../common/lists/ListActionsToolbar"
-import { useCollectionActionsDrawer } from "./CollectionActionsDrawer/useCollectionActionsDrawer"
-import { useCollection } from "./useCollection"
-import { COLLECTION_EMPTY_ID } from "../constants.shared"
+} from "../../common/lists/ListActionsToolbar"
+import { useCollectionActionsDrawer } from "../CollectionActionsDrawer/useCollectionActionsDrawer"
+import { useCollection } from "../useCollection"
+import { COLLECTION_EMPTY_ID } from "../../constants.shared"
 import { useEffect, useMemo } from "react"
-import { useBooks } from "../books/states"
-import { useLocalSettings } from "../settings/states"
-import { Report } from "../debug/report.shared"
-import { useCollectionComputedMetadata } from "./useCollectionComputedMetadata"
-import { useCollectionCoverUri } from "./useCollectionCoverUri"
-import placeholder from "../assets/cover-placeholder.png"
+import { useBooks } from "../../books/states"
+import { useLocalSettings } from "../../settings/states"
+import { Report } from "../../debug/report.shared"
+import { useCollectionComputedMetadata } from "../useCollectionComputedMetadata"
+import { useCollectionCoverUri } from "../useCollectionCoverUri"
+import placeholder from "../../assets/cover-placeholder.png"
+import { StatusChip } from "../series/StatusChip"
+import { useWindowScroll } from "react-use"
 
 type ScreenParams = {
   id: string
@@ -63,7 +65,7 @@ export const CollectionDetailsScreen = () => {
     `calc(${theme.spacing(1)} + ${70}px)`
   ]
   const headerHeight = [
-    `calc(${headerPt[0]} + 90px)`,
+    `calc(${headerPt[0]} + 100px)`,
     `calc(${headerPt[1]} + 150px)`,
     `calc(${headerPt[2]} + 250px)`
   ]
@@ -86,6 +88,7 @@ export const CollectionDetailsScreen = () => {
       }
     }
   )
+  const { x, y } = useWindowScroll()
 
   useEffect(() => {
     Report.log({
@@ -96,16 +99,36 @@ export const CollectionDetailsScreen = () => {
 
   return (
     <>
-      <Stack flex={1}>
+      <Stack
+        flex={1}
+        sx={{
+          scrollbarWidth: "initial"
+        }}
+      >
         <TopBarNavigation
+          title={metadata.title}
           showBack={true}
           {...(id !== COLLECTION_EMPTY_ID && {
             onMoreClick: openActionDrawer
           })}
           color="transparent"
-          position="absolute"
+          sx={{
+            bgcolor: `rgba(255, 255, 255, ${Math.min(1, y / 70)})`,
+            borderBottom: `1px solid rgba(0, 0, 0, ${Math.min(1, y / 400)})`
+          }}
+          TitleProps={{
+            sx: {
+              opacity: Math.min(1, y / 100)
+            }
+          }}
+          position="fixed"
         />
-        <Stack flex={1}>
+        <Stack
+          flex={1}
+          sx={{
+            scrollbarWidth: "initial"
+          }}
+        >
           <Stack
             position="relative"
             pt={headerPt}
@@ -133,7 +156,7 @@ export const CollectionDetailsScreen = () => {
                 }}
               />
             )}
-            <Stack direction="row" gap={2}>
+            <Stack direction="row" gap={2} justifyContent="flex-start">
               {!!hasCover && (
                 <Box
                   position="relative"
@@ -148,32 +171,43 @@ export const CollectionDetailsScreen = () => {
                   }}
                 />
               )}
-              <Stack gap={1} pt={hasCover ? 0.5 : 0}>
+              <Stack
+                pt={hasCover ? 0.5 : 0}
+                position="relative"
+                alignItems="flex-start"
+              >
                 <Typography
-                  position="relative"
                   component="h1"
                   sx={{
-                    typography: { ":default": "h6", sm: "h4" }
+                    typography: ["h6", "h4"]
                   }}
-                  lineHeight={1}
                   fontWeight="bold"
                 >
                   {metadata.displayTitle}
                 </Typography>
                 <Typography
                   sx={{
-                    typography: { ":default": "body2", sm: "body1" }
+                    typography: ["body2", "body1"]
                   }}
-                  position="relative"
                   gutterBottom
                 >
                   {`${collection?.books?.length || 0} book(s)`}
                 </Typography>
+                {collection?.type === "series" && (
+                  <StatusChip
+                    rating={metadata.rating}
+                    status={metadata.status}
+                    sx={{
+                      bgcolor: "transparent"
+                    }}
+                  />
+                )}
               </Stack>
             </Stack>
           </Stack>
           <BookListWithControls
             data={visibleBookIds}
+            useWindowScroll
             sorting={sorting}
             viewMode={viewMode}
             onViewModeChange={(value) => {
diff --git a/packages/web/src/collections/lists/CollectionListItemCover.tsx b/packages/web/src/collections/lists/CollectionListItemCover.tsx
index 71fa0368..bba5469b 100644
--- a/packages/web/src/collections/lists/CollectionListItemCover.tsx
+++ b/packages/web/src/collections/lists/CollectionListItemCover.tsx
@@ -20,6 +20,7 @@ import { getCollectionComputedMetadata } from "../getCollectionComputedMetadata"
 import { CollectionListItemProgress } from "./CollectionListItemProgress"
 import { useCollectionReadingProgress } from "../useCollectionReadingProgress"
 import { useCollectionCoverUri } from "../useCollectionCoverUri"
+import { StatusChip } from "../series/StatusChip"
 
 export const CollectionListItemCover = memo(({ id }: { id: string }) => {
   const theme = useTheme()
@@ -96,45 +97,11 @@ export const CollectionListItemCover = memo(({ id }: { id: string }) => {
             }}
           />
           {item?.type === "series" && (
-            <Chip
-              label={
-                <Stack direction="row" alignItems="center" gap={1}>
-                  <Typography
-                    variant="caption"
-                    lineHeight="inherit"
-                    color="inherit"
-                  >
-                    {capitalize(metadata.status ?? "unknown")}
-                  </Typography>
-                  {metadata.rating !== undefined && (
-                    <Stack direction="row" alignItems="center">
-                      <StarRounded fontSize="small" color="warning" />
-                      <Typography
-                        color="warning"
-                        variant="caption"
-                        lineHeight="inherit"
-                        fontWeight="bold"
-                      >
-                        {metadata.rating.toFixed(1)}
-                      </Typography>
-                    </Stack>
-                  )}
-                </Stack>
-              }
-              icon={
-                <CircleRounded
-                  color={
-                    metadata.status === "ongoing"
-                      ? "success"
-                      : metadata.status === "completed"
-                        ? "info"
-                        : "warning"
-                  }
-                />
-              }
-              size="small"
+            <StatusChip
+              rating={metadata.rating}
+              status={metadata.status}
               sx={{
-                bgcolor: "white",
+                  bgcolor: "white",
                 position: "absolute",
                 right: 0,
                 bottom: 0,
diff --git a/packages/web/src/collections/series/StatusChip.tsx b/packages/web/src/collections/series/StatusChip.tsx
new file mode 100644
index 00000000..42732195
--- /dev/null
+++ b/packages/web/src/collections/series/StatusChip.tsx
@@ -0,0 +1,50 @@
+import { CircleRounded, StarRounded } from "@mui/icons-material"
+import { Chip, ChipProps, Stack, Typography, capitalize } from "@mui/material"
+import { CollectionMetadata } from "@oboku/shared"
+import { memo } from "react"
+
+export const StatusChip = memo(
+  ({
+    rating,
+    status,
+    ...rest
+  }: Pick<CollectionMetadata, "status" | "rating"> & ChipProps) => {
+    return (
+      <Chip
+        label={
+          <Stack direction="row" alignItems="center" gap={1}>
+            <Typography variant="caption" lineHeight="inherit" color="inherit">
+              {capitalize(status ?? "unknown")}
+            </Typography>
+            {rating !== undefined && (
+              <Stack direction="row" alignItems="center">
+                <StarRounded fontSize="small" color="warning" />
+                <Typography
+                  color="warning"
+                  variant="caption"
+                  lineHeight="inherit"
+                  fontWeight="bold"
+                >
+                  {rating.toFixed(1)}
+                </Typography>
+              </Stack>
+            )}
+          </Stack>
+        }
+        icon={
+          <CircleRounded
+            color={
+              status === "ongoing"
+                ? "success"
+                : status === "completed"
+                  ? "info"
+                  : "warning"
+            }
+          />
+        }
+        size="small"
+        {...rest}
+      />
+    )
+  }
+)
diff --git a/packages/web/src/common/lists/ListActionsToolbar.tsx b/packages/web/src/common/lists/ListActionsToolbar.tsx
index 1864b28a..d18e7136 100644
--- a/packages/web/src/common/lists/ListActionsToolbar.tsx
+++ b/packages/web/src/common/lists/ListActionsToolbar.tsx
@@ -76,7 +76,6 @@ export const ListActionsToolbar = memo(
       <>
         <Toolbar
           style={{
-            borderBottom: `1px solid ${theme.palette.grey[200]}`,
             boxSizing: "border-box"
           }}
           {...rest}
diff --git a/packages/web/src/common/lists/VirtuosoList.tsx b/packages/web/src/common/lists/VirtuosoList.tsx
index f4418fd1..c39453ec 100644
--- a/packages/web/src/common/lists/VirtuosoList.tsx
+++ b/packages/web/src/common/lists/VirtuosoList.tsx
@@ -65,6 +65,7 @@ export const VirtuosoList = memo(
     restoreStateFrom?:
       | { type: "list"; state: StateSnapshot }
       | { type: "grid"; state: GridStateSnapshot }
+    useWindowScroll?: boolean
   }) => {
     const virtuosoRef = useRef<VirtuosoHandle>(null)
     const virtuosoGridRef = useRef<VirtuosoGridHandle>(null)
@@ -134,7 +135,6 @@ export const VirtuosoList = memo(
         {itemsPerRow > 1 ? (
           <VirtuosoGrid
             ref={virtuosoGridRef}
-            className="withScrollBar"
             style={{
               ...style,
               visibility: isReadyToBeShown ? undefined : "hidden",
@@ -179,7 +179,6 @@ export const VirtuosoList = memo(
         ) : (
           <Virtuoso
             ref={virtuosoRef}
-            className="withScrollBar"
             style={{
               ...style,
               visibility: isReadyToBeShown ? undefined : "hidden"
diff --git a/packages/web/src/dataSources/DataSourcesListScreen.tsx b/packages/web/src/dataSources/DataSourcesListScreen.tsx
index 4428afa9..d6cf1dee 100644
--- a/packages/web/src/dataSources/DataSourcesListScreen.tsx
+++ b/packages/web/src/dataSources/DataSourcesListScreen.tsx
@@ -40,7 +40,7 @@ export const DataSourcesListScreen = () => {
         style={{
           display: "flex",
           flex: 1,
-          overflow: "scroll",
+          overflow: "auto",
           flexFlow: "column"
         }}
       >
diff --git a/packages/web/src/home/HomeScreen.tsx b/packages/web/src/home/HomeScreen.tsx
index c1f2da76..42c88d68 100644
--- a/packages/web/src/home/HomeScreen.tsx
+++ b/packages/web/src/home/HomeScreen.tsx
@@ -17,19 +17,14 @@ export const HomeScreen = memo(() => {
   const { t } = useTranslation()
 
   return (
-    <Box
-      display="flex"
-      flex={1}
-      overflow="hidden"
-      flexDirection="column"
-    >
+    <Box display="flex" flex={1} flexDirection="column" overflow="auto">
       <TopBarNavigation
         title={"Home"}
         showBack={false}
         hasSearch
         hasLockLibrary
       />
-      <Box height="100%" overflow="scroll" pb={2}>
+      <Box pb={2}>
         <CommunicationPane />
         {continueReadingBooks.length === 0 && !isPending && (
           <div
diff --git a/packages/web/src/index.css b/packages/web/src/index.css
index d6fd57cd..4b12c218 100644
--- a/packages/web/src/index.css
+++ b/packages/web/src/index.css
@@ -25,10 +25,6 @@ body {
   box-sizing: border-box;
 }
 
-*:not(.withScrollBar) {
-  scrollbar-width: none;
-}
-
 #root {
   margin: 0;
   height: 100%;
@@ -39,14 +35,6 @@ code {
     monospace;
 }
 
-::-webkit-scrollbar:not(.withScrollBar) {
-  /* Remove scrollbar space */
-  width: 0px;
-  height: 0;
-  /* optional: just make scrollbar invisible; */
-  background: transparent;
-}
-
 .sentry-error-embed-wrapper {
   z-index: 2000 !important; /* need to adjust because of material https://material-ui.com/customization/z-index/ */
 }
diff --git a/packages/web/src/library/books/LibraryBooksScreen.tsx b/packages/web/src/library/books/LibraryBooksScreen.tsx
index 6f041605..0af12f40 100644
--- a/packages/web/src/library/books/LibraryBooksScreen.tsx
+++ b/packages/web/src/library/books/LibraryBooksScreen.tsx
@@ -71,7 +71,6 @@ export const LibraryBooksScreen = () => {
       style={{
         display: "flex",
         flexDirection: "column",
-        height: "100%",
         flex: 1,
         overflow: "hidden"
       }}
@@ -84,18 +83,7 @@ export const LibraryBooksScreen = () => {
         }}
         numberOfFiltersApplied={numberOfFiltersApplied}
       />
-      <Stack
-        flex={1}
-        style={
-          {
-            // display: "flex",
-            // flexDirection: "column",
-            // height: "100%",
-            // flex: 1,
-            // overflow: "scroll"
-          }
-        }
-      >
+      <Stack flex={1}>
         {books.length === 0 && (
           <div
             style={{
@@ -116,8 +104,6 @@ export const LibraryBooksScreen = () => {
                 flexFlow: "column",
                 alignItems: "center",
                 textAlign: "center",
-                // paddingLeft: theme.spacing(2),
-                // paddingRight: theme.spacing(2),
                 width: "80%",
                 maxWidth: theme.custom.maxWidthCenteredContent
               }}
diff --git a/packages/web/src/navigation/AppNavigator.tsx b/packages/web/src/navigation/AppNavigator.tsx
index 1d26b611..7a061b34 100644
--- a/packages/web/src/navigation/AppNavigator.tsx
+++ b/packages/web/src/navigation/AppNavigator.tsx
@@ -15,7 +15,7 @@ import { ManageStorageScreen } from "../settings/ManageStorageScreen"
 import { LibraryTopTabNavigator } from "../library/LibraryTopTabNavigator"
 import { ROUTES } from "../constants"
 import { BookDetailsScreen } from "../books/details/BookDetailsScreen"
-import { CollectionDetailsScreen } from "../collections/CollectionDetailsScreen"
+import { CollectionDetailsScreen } from "../collections/details/CollectionDetailsScreen"
 import { BookActionsDrawer } from "../books/drawer/BookActionsDrawer"
 import { DataSourcesListScreen } from "../dataSources/DataSourcesListScreen"
 import { SearchScreen } from "../search/SearchScreen"
diff --git a/packages/web/src/navigation/TopBarNavigation.tsx b/packages/web/src/navigation/TopBarNavigation.tsx
index 63ccef22..cb867b35 100644
--- a/packages/web/src/navigation/TopBarNavigation.tsx
+++ b/packages/web/src/navigation/TopBarNavigation.tsx
@@ -1,7 +1,7 @@
 import React, { FC, ComponentProps, memo } from "react"
 import AppBar from "@mui/material/AppBar"
 import Toolbar from "@mui/material/Toolbar"
-import Typography from "@mui/material/Typography"
+import Typography, { TypographyProps } from "@mui/material/Typography"
 import IconButton from "@mui/material/IconButton"
 import {
   ArrowBackIosRounded,
@@ -34,6 +34,7 @@ export const TopBarNavigation: FC<
     hasLockLibrary?: boolean
     goBackDefaultTo?: string
     onMoreClick?: () => void
+    TitleProps?: TypographyProps
   } & ComponentProps<typeof AppBar>
 > = memo(
   ({
@@ -47,6 +48,7 @@ export const TopBarNavigation: FC<
     goBackDefaultTo,
     hasLockLibrary,
     color,
+    TitleProps,
     ...rest
   }) => {
     const isLibraryUnlocked = useSignalValue(
@@ -72,9 +74,16 @@ export const TopBarNavigation: FC<
                 <ArrowBackIosRounded />
               </IconButton>
             )}
-            <Box flexGrow={1}>
+            <Box flexGrow={1} overflow="hidden">
               {!hasSearch && !!title && (
-                <Typography variant="h6" style={{ flexGrow: 1 }}>
+                <Typography
+                  variant="h6"
+                  style={{ flexGrow: 1 }}
+                  whiteSpace="nowrap"
+                  textOverflow="ellipsis"
+                  overflow="hidden"
+                  {...TitleProps}
+                >
                   {title}
                 </Typography>
               )}
diff --git a/packages/web/src/plugins/PluginScreen.tsx b/packages/web/src/plugins/PluginScreen.tsx
index bd4a5428..1a041133 100644
--- a/packages/web/src/plugins/PluginScreen.tsx
+++ b/packages/web/src/plugins/PluginScreen.tsx
@@ -11,7 +11,7 @@ export const PluginScreen = memo(() => {
 
   return (
     <>
-      <Stack flex={1} overflow="scroll">
+      <Stack flex={1} overflow="auto">
         <TopBarNavigation
           title={capitalize(plugin?.name ?? "plugin")}
           showBack
diff --git a/packages/web/src/plugins/PluginsScreen.tsx b/packages/web/src/plugins/PluginsScreen.tsx
index c04ba8db..a6d797e1 100644
--- a/packages/web/src/plugins/PluginsScreen.tsx
+++ b/packages/web/src/plugins/PluginsScreen.tsx
@@ -16,7 +16,7 @@ import { ROUTES } from "../constants"
 export const PluginsScreen = memo(() => {
   return (
     <>
-      <Stack flex={1} overflow="scroll">
+      <Stack flex={1} overflow="auto">
         <TopBarNavigation title={"Plugins"} showBack={false} />
         <List>
           {plugins.map((plugin) => (
diff --git a/packages/web/src/profile/index.ts b/packages/web/src/profile/index.ts
index 81ca4ac0..e2e6743c 100644
--- a/packages/web/src/profile/index.ts
+++ b/packages/web/src/profile/index.ts
@@ -3,7 +3,7 @@ import { readerSettingsStateSignal } from "../reader/settings/states"
 import { bookBeingReadStatePersist } from "../reading/states"
 import { localSettingsStatePersist } from "../settings/states"
 import { libraryShelvesFiltersSignal } from "../library/shelves/filters/states"
-import { collectionDetailsScreenListControlsStateSignal } from "../collections/CollectionDetailsScreen"
+import { collectionDetailsScreenListControlsStateSignal } from "../collections/details/CollectionDetailsScreen"
 import { searchListActionsToolbarSignal } from "../search/list/states"
 import { SignalPersistenceConfig } from "reactjrx"
 
diff --git a/packages/web/src/settings/ProfileScreen.tsx b/packages/web/src/settings/ProfileScreen.tsx
index 0ee45ca9..c7fe860a 100644
--- a/packages/web/src/settings/ProfileScreen.tsx
+++ b/packages/web/src/settings/ProfileScreen.tsx
@@ -64,7 +64,7 @@ export const ProfileScreen = () => {
       style={{
         display: "flex",
         flex: 1,
-        overflow: "scroll",
+        overflow: "auto",
         flexDirection: "column"
       }}
     >
diff --git a/packages/web/src/settings/SettingsScreen.tsx b/packages/web/src/settings/SettingsScreen.tsx
index ff7c2d72..18da566c 100644
--- a/packages/web/src/settings/SettingsScreen.tsx
+++ b/packages/web/src/settings/SettingsScreen.tsx
@@ -48,7 +48,7 @@ export const SettingsScreen = memo(() => {
 
   return (
     <>
-      <Box display="flex" flex={1} overflow="scroll" flexDirection="column">
+      <Box display="flex" flex={1} flexDirection="column">
         <TopBarNavigation title={"Settings"} />
         <List>
           <ListSubheader disableSticky>General</ListSubheader>