diff --git a/packages/web/src/App.tsx b/packages/web/src/App.tsx
index 4cba5d56..ae1f30b1 100644
--- a/packages/web/src/App.tsx
+++ b/packages/web/src/App.tsx
@@ -6,7 +6,7 @@ import { ManageBookCollectionsDialog } from "./books/ManageBookCollectionsDialog
 import { plugins } from "./plugins/configure"
 import { UpdateAvailableDialog } from "./workers/UpdateAvailableDialog"
 import { PreloadQueries } from "./PreloadQueries"
-import { SplashScreen } from "./SplashScreen"
+import { SplashScreen } from "./common/SplashScreen"
 import { BlurFilterReference } from "./books/BlurFilterReference"
 import "./i18n"
 import { ErrorBoundary } from "@sentry/react"
@@ -72,7 +72,6 @@ export function App() {
         <ThemeProvider>
           <QueryClientProvider client={queryClient}>
             <Suspense fallback={<SplashScreen show />}>
-              {/* <SplashScreen show={!isAppReady} /> */}
               {!isHydratingProfile && isAuthHydrated && (
                 <>
                   {plugins.reduce(
diff --git a/packages/web/src/books/bookList/BookListCoverContainer.tsx b/packages/web/src/books/bookList/BookListCoverContainer.tsx
index 2a64a94b..f12d96a9 100644
--- a/packages/web/src/books/bookList/BookListCoverContainer.tsx
+++ b/packages/web/src/books/bookList/BookListCoverContainer.tsx
@@ -115,7 +115,7 @@ export const BookListCoverContainer: FC<
             <Chip
               color="primary"
               size="small"
-              icon={<LoopRounded color="primary" className="icon-spin" />}
+              icon={<LoopRounded color="primary" className="oboku-infinite-spin" />}
               label="metadata..."
             />
           )}
diff --git a/packages/web/src/books/bookList/BookListListItem.tsx b/packages/web/src/books/bookList/BookListListItem.tsx
index 00c9664a..6c4a03b1 100644
--- a/packages/web/src/books/bookList/BookListListItem.tsx
+++ b/packages/web/src/books/bookList/BookListListItem.tsx
@@ -164,7 +164,7 @@ export const BookListListItem: FC<
                 >
                   <Chip
                     size="small"
-                    avatar={<LoopRounded className="icon-spin" />}
+                    avatar={<LoopRounded className="oboku-infinite-spin" />}
                     label="metadata..."
                   />
                 </div>
diff --git a/packages/web/src/SplashScreen.tsx b/packages/web/src/common/SplashScreen.tsx
similarity index 93%
rename from packages/web/src/SplashScreen.tsx
rename to packages/web/src/common/SplashScreen.tsx
index 2ce046c4..7ab3c2d5 100644
--- a/packages/web/src/SplashScreen.tsx
+++ b/packages/web/src/common/SplashScreen.tsx
@@ -1,6 +1,6 @@
 import { Box, Fade } from "@mui/material"
 import { memo, useState } from "react"
-import { Logo } from "./common/Logo"
+import { Logo } from "./Logo"
 
 export const SplashScreen = memo(({ show }: { show: boolean }) => {
   const [hidden, setHidden] = useState(false)
diff --git a/packages/web/src/common/animations.css b/packages/web/src/common/animations.css
new file mode 100644
index 00000000..d235dd84
--- /dev/null
+++ b/packages/web/src/common/animations.css
@@ -0,0 +1,15 @@
+@keyframes obokuSpin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.oboku-infinite-spin {
+  animation-name: obokuSpin;
+  animation-duration: 1500ms;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
diff --git a/packages/web/src/index.css b/packages/web/src/index.css
deleted file mode 100644
index 4b12c218..00000000
--- a/packages/web/src/index.css
+++ /dev/null
@@ -1,122 +0,0 @@
-html {
-  margin: 0;
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-html,
-body {
-  height: 100%;
-  /* Disables pull-to-refresh but allows overscroll glow effects. */
-  overscroll-behavior-y: contain;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-#root {
-  margin: 0;
-  height: 100%;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
-}
-
-.sentry-error-embed-wrapper {
-  z-index: 2000 !important; /* need to adjust because of material https://material-ui.com/customization/z-index/ */
-}
-
-.sentry-error-embed-wrapper {
-  z-index: 2000 !important; /* need to adjust because of material https://material-ui.com/customization/z-index/ */
-}
-
-/* google Picker overwrite to have it fullscreen and mobile friendly */
-.picker-dialog {
-  z-index: 3000 !important;
-  height: 100%;
-  width: 100%;
-}
-.picker-dialog {
-  height: 100% !important;
-  width: 100% !important;
-  left: 0 !important;
-}
-.picker-dialog-content {
-  height: 100% !important;
-  width: 100% !important;
-  left: 0 !important;
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-/* @keyframes scaleX {
-  from {
-    transform: scaleX(1);
-  }
-  to {
-    transform: scaleX(-1);
-  }
-}
-
-@keyframes scaleXBack {
-  from {
-    transform: scaleX(-1);
-  }
-  to {
-    transform: scaleX(1);
-  }
-} */
-
-/* @keyframes scaleX {
-  0% {
-    transform: scaleX(1);
-  }
-  1% {
-    transform: scaleX(-1);
-  }
-
-  50% {
-    transform: scaleX(-1);
-  }
-  51% {
-    transform: scaleX(1);
-  }
-} */
-
-.icon-spin {
-  animation-name: spin;
-  animation-duration: 1500ms;
-  animation-iteration-count: infinite;
-  animation-timing-function: linear;
-}
-
-/* .icon-rotate90 {
-  animation-name: scaleX;
-  animation-duration: 500ms;
-  animation-iteration-count: infinite;
-  animation-timing-function: linear;
-} */
-
-.rc-slider-disabled {
-  background-color: inherit !important;
-}
diff --git a/packages/web/src/main.css b/packages/web/src/main.css
new file mode 100644
index 00000000..8c9b1b01
--- /dev/null
+++ b/packages/web/src/main.css
@@ -0,0 +1,14 @@
+html,
+body,
+#root {
+  height: 100%;
+  /* height: 100%; */
+  /* Disables pull-to-refresh but allows overscroll glow effects. */
+  overscroll-behavior-y: contain;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
diff --git a/packages/web/src/main.tsx b/packages/web/src/main.tsx
index d495347f..05194c41 100644
--- a/packages/web/src/main.tsx
+++ b/packages/web/src/main.tsx
@@ -7,7 +7,8 @@ import "@fontsource/roboto/400.css"
 import "@fontsource/roboto/500.css"
 import "@fontsource/roboto/700.css"
 import "react-responsive-carousel/lib/styles/carousel.min.css"
-import "./index.css"
+import "./main.css"
+import "./common/animations.css"
 import { App } from "./App"
 import * as Sentry from "@sentry/react"
 
diff --git a/packages/web/src/plugins/google/Provider.tsx b/packages/web/src/plugins/google/Provider.tsx
index 0b39bf78..866647d7 100644
--- a/packages/web/src/plugins/google/Provider.tsx
+++ b/packages/web/src/plugins/google/Provider.tsx
@@ -5,6 +5,7 @@ import { useLoadGapi } from "./lib/gapi"
 import { useLoadGsi } from "./lib/gsi"
 import { useSignalValue } from "reactjrx"
 import { consentShownSignal } from "./lib/auth"
+import "./lib/picker.css"
 
 export const Provider: ObokuPlugin["Provider"] = memo(({ children }) => {
   const consentPopupShown = useSignalValue(consentShownSignal)
diff --git a/packages/web/src/plugins/google/lib/picker.css b/packages/web/src/plugins/google/lib/picker.css
new file mode 100644
index 00000000..356fed4d
--- /dev/null
+++ b/packages/web/src/plugins/google/lib/picker.css
@@ -0,0 +1,16 @@
+/* google Picker overwrite to have it fullscreen and mobile friendly */
+.picker-dialog {
+  z-index: 3000 !important;
+  height: 100%;
+  width: 100%;
+}
+.picker-dialog {
+  height: 100% !important;
+  width: 100% !important;
+  left: 0 !important;
+}
+.picker-dialog-content {
+  height: 100% !important;
+  width: 100% !important;
+  left: 0 !important;
+}
diff --git a/packages/web/src/reader/navigation/Scrubber.tsx b/packages/web/src/reader/navigation/Scrubber.tsx
index dcfd5118..6efe812e 100644
--- a/packages/web/src/reader/navigation/Scrubber.tsx
+++ b/packages/web/src/reader/navigation/Scrubber.tsx
@@ -6,7 +6,7 @@ import { useTotalPages } from "../pagination/useTotalPages"
 import { useCurrentPages } from "../pagination/useCurrentPages"
 import { useIsUsingReverseNavigation } from "./useIsUsingReverseNavigation"
 import { useIsUsingPagesPerChapter } from "../pagination/useIsUsingPagesPerChapter"
-import { ObokuRcSlider } from "./ObokuRcSlider"
+import { ObokuRcSlider } from "./slider/ObokuRcSlider"
 
 export const Scrubber = memo(({ bookId }: { bookId: string }) => {
   const reader = useSignalValue(readerSignal)
diff --git a/packages/web/src/reader/navigation/ObokuRcSlider.tsx b/packages/web/src/reader/navigation/slider/ObokuRcSlider.tsx
similarity index 99%
rename from packages/web/src/reader/navigation/ObokuRcSlider.tsx
rename to packages/web/src/reader/navigation/slider/ObokuRcSlider.tsx
index 354abb28..6ffddc0c 100644
--- a/packages/web/src/reader/navigation/ObokuRcSlider.tsx
+++ b/packages/web/src/reader/navigation/slider/ObokuRcSlider.tsx
@@ -1,6 +1,7 @@
 import { ComponentProps, forwardRef } from "react"
 import RcSlider from "rc-slider"
 import "rc-slider/assets/index.css"
+import "./index.css"
 import { ComponentsVariants, useTheme, useThemeProps } from "@mui/material"
 
 interface ScrubberProps extends ComponentProps<typeof RcSlider> {
diff --git a/packages/web/src/reader/navigation/slider/index.css b/packages/web/src/reader/navigation/slider/index.css
new file mode 100644
index 00000000..e093c4a6
--- /dev/null
+++ b/packages/web/src/reader/navigation/slider/index.css
@@ -0,0 +1,3 @@
+.rc-slider-disabled {
+  background-color: inherit !important;
+}