diff --git a/src/renderer/src/pages/downloads/delete-game-modal.css.ts b/src/renderer/src/pages/downloads/delete-game-modal.css.ts
deleted file mode 100644
index ca6c3888a..000000000
--- a/src/renderer/src/pages/downloads/delete-game-modal.css.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-import { SPACING_UNIT } from "../../theme.css";
-
-export const deleteActionsButtonsCtn = style({
-  display: "flex",
-  width: "100%",
-  justifyContent: "end",
-  alignItems: "center",
-  gap: `${SPACING_UNIT}px`,
-});
diff --git a/src/renderer/src/pages/downloads/download-group.css.ts b/src/renderer/src/pages/downloads/download-group.css.ts
deleted file mode 100644
index cbbb4f8eb..000000000
--- a/src/renderer/src/pages/downloads/download-group.css.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-import { SPACING_UNIT, vars } from "../../theme.css";
-
-export const downloadTitleWrapper = style({
-  display: "flex",
-  alignItems: "center",
-  marginBottom: `${SPACING_UNIT}px`,
-  gap: `${SPACING_UNIT}px`,
-});
-
-export const downloadTitle = style({
-  fontWeight: "bold",
-  cursor: "pointer",
-  color: vars.color.body,
-  textAlign: "left",
-  fontSize: "16px",
-  display: "block",
-  ":hover": {
-    textDecoration: "underline",
-  },
-});
-
-export const downloads = style({
-  width: "100%",
-  gap: `${SPACING_UNIT * 2}px`,
-  display: "flex",
-  flexDirection: "column",
-  margin: "0",
-  padding: "0",
-  marginTop: `${SPACING_UNIT}px`,
-});
-
-export const downloadCover = style({
-  width: "280px",
-  minWidth: "280px",
-  height: "auto",
-  borderRight: `solid 1px ${vars.color.border}`,
-  position: "relative",
-  zIndex: "1",
-});
-
-export const downloadCoverContent = style({
-  width: "100%",
-  height: "100%",
-  padding: `${SPACING_UNIT}px`,
-  display: "flex",
-  alignItems: "flex-end",
-  justifyContent: "flex-end",
-});
-
-export const downloadCoverBackdrop = style({
-  width: "100%",
-  height: "100%",
-  background: "linear-gradient(0deg, rgba(0, 0, 0, 0.8) 5%, transparent 100%)",
-  display: "flex",
-  overflow: "hidden",
-  zIndex: "1",
-});
-
-export const downloadCoverImage = style({
-  width: "100%",
-  height: "100%",
-  position: "absolute",
-  zIndex: "-1",
-});
-
-export const download = style({
-  width: "100%",
-  backgroundColor: vars.color.background,
-  display: "flex",
-  borderRadius: "8px",
-  border: `solid 1px ${vars.color.border}`,
-  overflow: "hidden",
-  boxShadow: "0px 0px 5px 0px #000000",
-  transition: "all ease 0.2s",
-  height: "140px",
-  minHeight: "140px",
-  maxHeight: "140px",
-});
-
-export const downloadDetails = style({
-  display: "flex",
-  flexDirection: "column",
-  flex: "1",
-  justifyContent: "center",
-  gap: `${SPACING_UNIT / 2}px`,
-  fontSize: "14px",
-});
-
-export const downloadRightContent = style({
-  display: "flex",
-  padding: `${SPACING_UNIT * 2}px`,
-  flex: "1",
-  gap: `${SPACING_UNIT}px`,
-  background: "linear-gradient(90deg, transparent 20%, rgb(0 0 0 / 20%) 100%)",
-});
-
-export const downloadActions = style({
-  display: "flex",
-  alignItems: "center",
-  gap: `${SPACING_UNIT}px`,
-});
-
-export const downloadGroup = style({
-  display: "flex",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT * 2}px`,
-});
diff --git a/src/renderer/src/pages/downloads/downloads.css.ts b/src/renderer/src/pages/downloads/downloads.css.ts
deleted file mode 100644
index abb3c30bf..000000000
--- a/src/renderer/src/pages/downloads/downloads.css.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-import { SPACING_UNIT } from "../../theme.css";
-
-export const downloadsContainer = style({
-  display: "flex",
-  padding: `${SPACING_UNIT * 3}px`,
-  flexDirection: "column",
-  width: "100%",
-});
-
-export const downloadGroups = style({
-  display: "flex",
-  gap: `${SPACING_UNIT * 3}px`,
-  flexDirection: "column",
-});
-
-export const arrowIcon = style({
-  width: "60px",
-  height: "60px",
-  borderRadius: "50%",
-  backgroundColor: "rgba(255, 255, 255, 0.06)",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  marginBottom: `${SPACING_UNIT * 2}px`,
-});
-
-export const noDownloads = style({
-  display: "flex",
-  width: "100%",
-  height: "100%",
-  justifyContent: "center",
-  alignItems: "center",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT}px`,
-});
diff --git a/src/renderer/src/pages/game-details/cloud-sync-files-modal/cloud-sync-files-modal.css.ts b/src/renderer/src/pages/game-details/cloud-sync-files-modal/cloud-sync-files-modal.css.ts
deleted file mode 100644
index 0dbab7701..000000000
--- a/src/renderer/src/pages/game-details/cloud-sync-files-modal/cloud-sync-files-modal.css.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-import { SPACING_UNIT, vars } from "../../../theme.css";
-
-export const mappingMethods = style({
-  display: "grid",
-  gap: `${SPACING_UNIT}px`,
-  gridTemplateColumns: "repeat(2, 1fr)",
-});
-
-export const fileList = style({
-  listStyle: "none",
-  margin: "0",
-  padding: "0",
-  display: "flex",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT}px`,
-  marginTop: `${SPACING_UNIT * 2}px`,
-});
-
-export const fileItem = style({
-  flex: 1,
-  color: vars.color.muted,
-  textDecoration: "underline",
-  display: "flex",
-  cursor: "pointer",
-});
diff --git a/src/renderer/src/pages/game-details/cloud-sync-modal/cloud-sync-modal.css.ts b/src/renderer/src/pages/game-details/cloud-sync-modal/cloud-sync-modal.css.ts
deleted file mode 100644
index dc2d00319..000000000
--- a/src/renderer/src/pages/game-details/cloud-sync-modal/cloud-sync-modal.css.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { keyframes, style } from "@vanilla-extract/css";
-
-import { SPACING_UNIT, vars } from "../../../theme.css";
-
-export const rotate = keyframes({
-  "0%": { transform: "rotate(0deg)" },
-  "100%": {
-    transform: "rotate(360deg)",
-  },
-});
-
-export const artifacts = style({
-  display: "flex",
-  gap: `${SPACING_UNIT}px`,
-  flexDirection: "column",
-  listStyle: "none",
-  margin: "0",
-  padding: "0",
-});
-
-export const artifactButton = style({
-  display: "flex",
-  textAlign: "left",
-  flexDirection: "row",
-  alignItems: "center",
-  gap: `${SPACING_UNIT}px`,
-  color: vars.color.body,
-  padding: `${SPACING_UNIT * 2}px`,
-  backgroundColor: vars.color.darkBackground,
-  border: `1px solid ${vars.color.border}`,
-  borderRadius: "4px",
-  justifyContent: "space-between",
-});
-
-export const syncIcon = style({
-  animationName: rotate,
-  animationDuration: "1s",
-  animationIterationCount: "infinite",
-  animationTimingFunction: "linear",
-});
-
-export const progress = style({
-  width: "100%",
-  height: "5px",
-  "::-webkit-progress-bar": {
-    backgroundColor: vars.color.darkBackground,
-  },
-  "::-webkit-progress-value": {
-    backgroundColor: vars.color.muted,
-  },
-});
-
-export const manageFilesButton = style({
-  margin: "0",
-  padding: "0",
-  alignSelf: "flex-start",
-  fontSize: 14,
-  cursor: "pointer",
-  textDecoration: "underline",
-  color: vars.color.body,
-  ":disabled": {
-    cursor: "not-allowed",
-    opacity: vars.opacity.disabled,
-  },
-});
diff --git a/src/renderer/src/pages/game-details/description-header/description-header.css.ts b/src/renderer/src/pages/game-details/description-header/description-header.css.ts
deleted file mode 100644
index 45856f317..000000000
--- a/src/renderer/src/pages/game-details/description-header/description-header.css.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-import { SPACING_UNIT, vars } from "../../../theme.css";
-
-export const descriptionHeader = style({
-  width: "100%",
-  padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 2}px`,
-  display: "flex",
-  justifyContent: "space-between",
-  alignItems: "center",
-  backgroundColor: vars.color.background,
-  height: "72px",
-});
-
-export const descriptionHeaderInfo = style({
-  display: "flex",
-  gap: `${SPACING_UNIT}px`,
-  flexDirection: "column",
-});
diff --git a/src/renderer/src/pages/game-details/gallery-slider/gallery-slider.css.ts b/src/renderer/src/pages/game-details/gallery-slider/gallery-slider.css.ts
deleted file mode 100644
index d4f8084ad..000000000
--- a/src/renderer/src/pages/game-details/gallery-slider/gallery-slider.css.ts
+++ /dev/null
@@ -1,131 +0,0 @@
-import { recipe } from "@vanilla-extract/recipes";
-import { style } from "@vanilla-extract/css";
-
-import { SPACING_UNIT, vars } from "../../../theme.css";
-
-export const gallerySliderContainer = style({
-  padding: `${SPACING_UNIT * 3}px ${SPACING_UNIT * 2}px`,
-  width: "100%",
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "center",
-});
-
-export const gallerySliderMedia = style({
-  width: "100%",
-  height: "100%",
-  display: "block",
-  flexShrink: "0",
-  flexGrow: "0",
-  transition: "translate 0.3s ease-in-out",
-  borderRadius: "4px",
-  alignSelf: "center",
-});
-
-export const gallerySliderAnimationContainer = style({
-  width: "100%",
-  height: "100%",
-  display: "flex",
-  position: "relative",
-  overflow: "hidden",
-  "@media": {
-    "(min-width: 1280px)": {
-      width: "60%",
-    },
-  },
-});
-
-export const gallerySliderPreview = style({
-  width: "100%",
-  padding: `${SPACING_UNIT}px 0`,
-  height: "100%",
-  display: "flex",
-  position: "relative",
-  overflowX: "auto",
-  overflowY: "hidden",
-  gap: `${SPACING_UNIT / 2}px`,
-  "@media": {
-    "(min-width: 1280px)": {
-      width: "60%",
-    },
-  },
-  "::-webkit-scrollbar-thumb": {
-    width: "20%",
-  },
-  "::-webkit-scrollbar": {
-    height: "10px",
-  },
-});
-
-export const mediaPreviewButton = recipe({
-  base: {
-    cursor: "pointer",
-    width: "20%",
-    display: "block",
-    flexShrink: "0",
-    flexGrow: "0",
-    opacity: "0.3",
-    transition: "translate 0.3s ease-in-out, opacity 0.2s ease",
-    borderRadius: "4px",
-    border: `solid 1px ${vars.color.border}`,
-    overflow: "hidden",
-    ":hover": {
-      opacity: "0.8",
-    },
-  },
-  variants: {
-    active: {
-      true: {
-        opacity: "1",
-      },
-    },
-  },
-});
-
-export const mediaPreview = style({
-  width: "100%",
-  display: "flex",
-});
-
-export const gallerySliderButton = recipe({
-  base: {
-    position: "absolute",
-    alignSelf: "center",
-    cursor: "pointer",
-    backgroundColor: "rgba(0, 0, 0, 0.4)",
-    transition: "all 0.2s ease-in-out",
-    borderRadius: "50%",
-    color: vars.color.muted,
-    width: "48px",
-    height: "48px",
-    ":hover": {
-      backgroundColor: "rgba(0, 0, 0, 0.6)",
-    },
-    ":active": {
-      transform: "scale(0.95)",
-    },
-  },
-  variants: {
-    direction: {
-      left: {
-        left: "0",
-        marginLeft: `${SPACING_UNIT}px`,
-        transform: `translateX(${-(48 + SPACING_UNIT)}px)`,
-      },
-      right: {
-        right: "0",
-        marginRight: `${SPACING_UNIT}px`,
-        transform: `translateX(${48 + SPACING_UNIT}px)`,
-      },
-    },
-    visible: {
-      true: {
-        transform: "translateX(0)",
-        opacity: "1",
-      },
-      false: {
-        opacity: "0",
-      },
-    },
-  },
-});
diff --git a/src/renderer/src/pages/game-details/game-details.css.ts b/src/renderer/src/pages/game-details/game-details.css.ts
deleted file mode 100644
index 228b2aeb2..000000000
--- a/src/renderer/src/pages/game-details/game-details.css.ts
+++ /dev/null
@@ -1,234 +0,0 @@
-import { globalStyle, keyframes, style } from "@vanilla-extract/css";
-
-import { SPACING_UNIT, vars } from "../../theme.css";
-import { recipe } from "@vanilla-extract/recipes";
-
-export const HERO_HEIGHT = 300;
-
-export const slideIn = keyframes({
-  "0%": { transform: `translateY(${40 + SPACING_UNIT * 2}px)`, opacity: "0px" },
-  "100%": { transform: "translateY(0)", opacity: "1" },
-});
-
-export const wrapper = recipe({
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    overflow: "hidden",
-    width: "100%",
-    height: "100%",
-    transition: "all ease 0.3s",
-  },
-  variants: {
-    blurredContent: {
-      true: {
-        filter: "blur(20px)",
-      },
-    },
-  },
-});
-
-export const hero = style({
-  width: "100%",
-  height: `${HERO_HEIGHT}px`,
-  minHeight: `${HERO_HEIGHT}px`,
-  display: "flex",
-  flexDirection: "column",
-  position: "relative",
-  transition: "all ease 0.2s",
-  "@media": {
-    "(min-width: 1250px)": {
-      height: "350px",
-      minHeight: "350px",
-    },
-  },
-});
-
-export const heroContent = style({
-  padding: `${SPACING_UNIT * 2}px`,
-  height: "100%",
-  width: "100%",
-  display: "flex",
-  justifyContent: "space-between",
-  alignItems: "flex-end",
-});
-
-export const heroLogoBackdrop = style({
-  width: "100%",
-  height: "100%",
-  background: "linear-gradient(0deg, rgba(0, 0, 0, 0.3) 60%, transparent 100%)",
-  position: "absolute",
-  display: "flex",
-  flexDirection: "column",
-  justifyContent: "space-between",
-});
-
-export const heroImage = style({
-  width: "100%",
-  height: `${HERO_HEIGHT}px`,
-  minHeight: `${HERO_HEIGHT}px`,
-  objectFit: "cover",
-  objectPosition: "top",
-  transition: "all ease 0.2s",
-  position: "absolute",
-  zIndex: "0",
-  "@media": {
-    "(min-width: 1250px)": {
-      objectPosition: "center",
-      height: "350px",
-      minHeight: "350px",
-    },
-  },
-});
-
-export const gameLogo = style({
-  width: 300,
-  alignSelf: "flex-end",
-});
-
-export const heroImageSkeleton = style({
-  height: "300px",
-  "@media": {
-    "(min-width: 1250px)": {
-      height: "350px",
-    },
-  },
-});
-
-export const container = style({
-  width: "100%",
-  height: "100%",
-  display: "flex",
-  flexDirection: "column",
-  overflow: "auto",
-  zIndex: "1",
-});
-
-export const descriptionContainer = style({
-  display: "flex",
-  width: "100%",
-  flex: "1",
-  background: `linear-gradient(0deg, ${vars.color.background} 50%, ${vars.color.darkBackground} 100%)`,
-});
-
-export const descriptionContent = style({
-  width: "100%",
-  height: "100%",
-});
-
-export const description = style({
-  userSelect: "text",
-  lineHeight: "22px",
-  fontSize: "16px",
-  padding: `${SPACING_UNIT * 3}px ${SPACING_UNIT * 2}px`,
-  "@media": {
-    "(min-width: 1280px)": {
-      width: "60%",
-    },
-  },
-  width: "100%",
-  marginLeft: "auto",
-  marginRight: "auto",
-});
-
-export const descriptionSkeleton = style({
-  display: "flex",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT}px`,
-  padding: `${SPACING_UNIT * 3}px ${SPACING_UNIT * 2}px`,
-  width: "100%",
-  "@media": {
-    "(min-width: 1280px)": {
-      width: "60%",
-      lineHeight: "22px",
-    },
-  },
-  marginLeft: "auto",
-  marginRight: "auto",
-});
-
-export const randomizerButton = style({
-  animationName: slideIn,
-  animationDuration: "0.2s",
-  position: "fixed",
-  bottom: `${SPACING_UNIT * 3}px`,
-  /* Scroll bar + spacing */
-  right: `${9 + SPACING_UNIT * 2}px`,
-  boxShadow: "rgba(255, 255, 255, 0.1) 0px 0px 10px 1px",
-  border: `solid 2px ${vars.color.border}`,
-  zIndex: "1",
-  backgroundColor: vars.color.background,
-  ":hover": {
-    backgroundColor: vars.color.background,
-    boxShadow: "rgba(255, 255, 255, 0.1) 0px 0px 15px 5px",
-    opacity: "1",
-  },
-  ":active": {
-    transform: "scale(0.98)",
-  },
-  ":disabled": {
-    boxShadow: "none",
-    transform: "none",
-    opacity: "0.8",
-    backgroundColor: vars.color.background,
-  },
-});
-
-export const heroPanelSkeleton = style({
-  width: "100%",
-  padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 2}px`,
-  display: "flex",
-  alignItems: "center",
-  backgroundColor: vars.color.background,
-  height: "72px",
-  borderBottom: `solid 1px ${vars.color.border}`,
-});
-
-globalStyle(".bb_tag", {
-  marginTop: `${SPACING_UNIT * 2}px`,
-  marginBottom: `${SPACING_UNIT * 2}px`,
-});
-
-globalStyle(`${description} img`, {
-  borderRadius: "5px",
-  marginTop: `${SPACING_UNIT}px`,
-  marginBottom: `${SPACING_UNIT * 3}px`,
-  display: "block",
-  width: "100%",
-  height: "auto",
-  objectFit: "cover",
-});
-
-globalStyle(`${description} a`, {
-  color: vars.color.body,
-});
-
-export const cloudSyncButton = style({
-  padding: `${SPACING_UNIT * 1.5}px ${SPACING_UNIT * 2}px`,
-  backgroundColor: "rgba(0, 0, 0, 0.6)",
-  backdropFilter: "blur(20px)",
-  borderRadius: "8px",
-  transition: "all ease 0.2s",
-  cursor: "pointer",
-  minHeight: "40px",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  gap: `${SPACING_UNIT}px`,
-  color: vars.color.muted,
-  fontSize: "14px",
-  border: `solid 1px ${vars.color.border}`,
-  boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.8)",
-  animation: `${slideIn} 0.2s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running`,
-  animationDuration: "0.3s",
-  ":active": {
-    opacity: "0.9",
-  },
-  ":disabled": {
-    opacity: vars.opacity.disabled,
-    cursor: "not-allowed",
-  },
-  ":hover": {
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
-  },
-});
diff --git a/src/renderer/src/pages/game-details/hero/hero-panel-actions.css.ts b/src/renderer/src/pages/game-details/hero/hero-panel-actions.css.ts
deleted file mode 100644
index ac9e6df14..000000000
--- a/src/renderer/src/pages/game-details/hero/hero-panel-actions.css.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-import { SPACING_UNIT, vars } from "../../../theme.css";
-
-export const heroPanelAction = style({
-  border: `solid 1px ${vars.color.muted}`,
-});
-
-export const actions = style({
-  display: "flex",
-  gap: `${SPACING_UNIT * 2}px`,
-});
-
-export const separator = style({
-  width: "1px",
-  backgroundColor: vars.color.muted,
-  opacity: "0.2",
-});
diff --git a/src/renderer/src/pages/game-details/hero/hero-panel.css.ts b/src/renderer/src/pages/game-details/hero/hero-panel.css.ts
deleted file mode 100644
index 3fdbc73b8..000000000
--- a/src/renderer/src/pages/game-details/hero/hero-panel.css.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import { style } from "@vanilla-extract/css";
-import { recipe } from "@vanilla-extract/recipes";
-
-import { SPACING_UNIT, vars } from "../../../theme.css";
-
-export const panel = recipe({
-  base: {
-    width: "100%",
-    height: "72px",
-    minHeight: "72px",
-    padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 3}px`,
-    backgroundColor: vars.color.darkBackground,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    transition: "all ease 0.2s",
-    borderBottom: `solid 1px ${vars.color.border}`,
-    position: "sticky",
-    overflow: "hidden",
-    top: "0",
-    zIndex: "2",
-  },
-  variants: {
-    stuck: {
-      true: {
-        boxShadow: "0px 0px 15px 0px rgba(0, 0, 0, 0.8)",
-      },
-    },
-  },
-});
-
-export const content = style({
-  display: "flex",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT}px`,
-});
-
-export const actions = style({
-  display: "flex",
-  gap: `${SPACING_UNIT}px`,
-});
-
-export const downloadDetailsRow = style({
-  gap: `${SPACING_UNIT}px`,
-  display: "flex",
-  color: vars.color.body,
-  alignItems: "center",
-});
-
-export const downloadsLink = style({
-  color: vars.color.body,
-  textDecoration: "underline",
-});
-
-export const progressBar = recipe({
-  base: {
-    position: "absolute",
-    bottom: "0",
-    left: "0",
-    width: "100%",
-    height: "3px",
-    transition: "all ease 0.2s",
-    "::-webkit-progress-bar": {
-      backgroundColor: "transparent",
-    },
-    "::-webkit-progress-value": {
-      backgroundColor: vars.color.muted,
-    },
-  },
-  variants: {
-    disabled: {
-      true: {
-        opacity: vars.opacity.disabled,
-      },
-    },
-  },
-});
diff --git a/src/renderer/src/pages/game-details/modals/download-settings-modal.css.ts b/src/renderer/src/pages/game-details/modals/download-settings-modal.css.ts
deleted file mode 100644
index 3a7767364..000000000
--- a/src/renderer/src/pages/game-details/modals/download-settings-modal.css.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-import { SPACING_UNIT, vars } from "../../../theme.css";
-
-export const container = style({
-  display: "flex",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT * 3}px`,
-  width: "100%",
-});
-
-export const downloadsPathField = style({
-  display: "flex",
-  gap: `${SPACING_UNIT}px`,
-});
-
-export const hintText = style({
-  fontSize: "12px",
-  color: vars.color.body,
-});
-
-export const downloaders = style({
-  display: "grid",
-  gap: `${SPACING_UNIT}px`,
-  gridTemplateColumns: "repeat(2, 1fr)",
-});
-
-export const downloaderOption = style({
-  position: "relative",
-  ":only-child": {
-    gridColumn: "1 / -1",
-  },
-});
-
-export const downloaderIcon = style({
-  position: "absolute",
-  left: `${SPACING_UNIT * 2}px`,
-});
-
-export const pathError = style({
-  cursor: "pointer",
-  ":hover": {
-    textDecoration: "underline",
-  },
-});
diff --git a/src/renderer/src/pages/game-details/modals/game-options-modal.css.ts b/src/renderer/src/pages/game-details/modals/game-options-modal.css.ts
deleted file mode 100644
index f844a686b..000000000
--- a/src/renderer/src/pages/game-details/modals/game-options-modal.css.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-import { SPACING_UNIT } from "../../../theme.css";
-
-export const optionsContainer = style({
-  display: "flex",
-  gap: `${SPACING_UNIT * 2}px`,
-  flexDirection: "column",
-});
-
-export const gameOptionHeader = style({
-  display: "flex",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT}px`,
-});
-
-export const gameOptionHeaderDescription = style({
-  fontWeight: "400",
-});
-
-export const gameOptionRow = style({
-  display: "flex",
-  gap: `${SPACING_UNIT}px`,
-});
diff --git a/src/renderer/src/pages/game-details/modals/remove-from-library-modal.css.ts b/src/renderer/src/pages/game-details/modals/remove-from-library-modal.css.ts
deleted file mode 100644
index 2c70717da..000000000
--- a/src/renderer/src/pages/game-details/modals/remove-from-library-modal.css.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-import { SPACING_UNIT } from "../../../theme.css";
-
-export const deleteActionsButtonsCtn = style({
-  display: "flex",
-  width: "100%",
-  justifyContent: "end",
-  alignItems: "center",
-  gap: `${SPACING_UNIT}px`,
-});
diff --git a/src/renderer/src/pages/game-details/modals/repacks-modal.css.ts b/src/renderer/src/pages/game-details/modals/repacks-modal.css.ts
deleted file mode 100644
index 8d54e4028..000000000
--- a/src/renderer/src/pages/game-details/modals/repacks-modal.css.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-import { SPACING_UNIT, vars } from "../../../theme.css";
-
-export const repacks = style({
-  display: "flex",
-  gap: `${SPACING_UNIT}px`,
-  flexDirection: "column",
-});
-
-export const repackButton = style({
-  display: "flex",
-  textAlign: "left",
-  flexDirection: "column",
-  alignItems: "flex-start",
-  gap: `${SPACING_UNIT}px`,
-  color: vars.color.body,
-  padding: `${SPACING_UNIT * 2}px`,
-});
diff --git a/src/renderer/src/pages/game-details/sidebar-section/sidebar-section.css.ts b/src/renderer/src/pages/game-details/sidebar-section/sidebar-section.css.ts
deleted file mode 100644
index cd9fdc8fd..000000000
--- a/src/renderer/src/pages/game-details/sidebar-section/sidebar-section.css.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { recipe } from "@vanilla-extract/recipes";
-import { SPACING_UNIT, vars } from "../../../theme.css";
-import { style } from "@vanilla-extract/css";
-
-export const sidebarSectionButton = style({
-  height: "72px",
-  padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 2}px`,
-  display: "flex",
-  alignItems: "center",
-  backgroundColor: vars.color.background,
-  color: vars.color.muted,
-  width: "100%",
-  cursor: "pointer",
-  transition: "all ease 0.2s",
-  gap: `${SPACING_UNIT}px`,
-  fontSize: "14px",
-  fontWeight: "bold",
-  ":hover": {
-    backgroundColor: "rgba(255, 255, 255, 0.05)",
-  },
-  ":active": {
-    opacity: vars.opacity.active,
-  },
-});
-
-export const chevron = recipe({
-  base: {
-    transition: "transform ease 0.2s",
-  },
-  variants: {
-    open: {
-      true: {
-        transform: "rotate(180deg)",
-      },
-    },
-  },
-});
diff --git a/src/renderer/src/pages/game-details/sidebar/sidebar.css.ts b/src/renderer/src/pages/game-details/sidebar/sidebar.css.ts
deleted file mode 100644
index aa27cd421..000000000
--- a/src/renderer/src/pages/game-details/sidebar/sidebar.css.ts
+++ /dev/null
@@ -1,169 +0,0 @@
-import { globalStyle, style } from "@vanilla-extract/css";
-
-import { SPACING_UNIT, vars } from "../../../theme.css";
-import { recipe } from "@vanilla-extract/recipes";
-
-export const contentSidebar = style({
-  borderLeft: `solid 1px ${vars.color.border}`,
-  backgroundColor: vars.color.darkBackground,
-  width: "100%",
-  height: "100%",
-  "@media": {
-    "(min-width: 1024px)": {
-      maxWidth: "300px",
-      width: "100%",
-    },
-    "(min-width: 1280px)": {
-      width: "100%",
-      maxWidth: "400px",
-    },
-  },
-});
-
-export const requirementButtonContainer = style({
-  width: "100%",
-  display: "flex",
-});
-
-export const requirementButton = style({
-  border: `solid 1px ${vars.color.border};`,
-  borderLeft: "none",
-  borderRight: "none",
-  borderRadius: "0",
-  width: "100%",
-});
-
-export const requirementsDetails = style({
-  padding: `${SPACING_UNIT * 2}px`,
-  lineHeight: "22px",
-  fontSize: "16px",
-});
-
-export const requirementsDetailsSkeleton = style({
-  display: "flex",
-  flexDirection: "column",
-  gap: "8px",
-  padding: `${SPACING_UNIT * 2}px`,
-  fontSize: "16px",
-});
-
-export const howLongToBeatCategoriesList = style({
-  margin: "0",
-  padding: `${SPACING_UNIT * 2}px`,
-  display: "flex",
-  flexDirection: "column",
-  gap: "16px",
-});
-
-export const howLongToBeatCategory = style({
-  display: "flex",
-  flexDirection: "column",
-  gap: "4px",
-  background:
-    "linear-gradient(90deg, transparent 20%, rgb(255 255 255 / 2%) 100%)",
-  borderRadius: "4px",
-  padding: `8px 16px`,
-  border: `solid 1px ${vars.color.border}`,
-});
-
-export const howLongToBeatCategoryLabel = style({
-  color: vars.color.muted,
-});
-
-export const howLongToBeatCategorySkeleton = style({
-  border: `solid 1px ${vars.color.border}`,
-  borderRadius: "4px",
-  height: "76px",
-});
-
-export const statsSection = style({
-  display: "flex",
-  gap: `${SPACING_UNIT * 2}px`,
-  padding: `${SPACING_UNIT * 2}px`,
-  justifyContent: "space-between",
-  transition: "max-height ease 0.5s",
-  overflow: "hidden",
-  "@media": {
-    "(min-width: 1024px)": {
-      flexDirection: "column",
-    },
-    "(min-width: 1280px)": {
-      flexDirection: "row",
-    },
-  },
-});
-
-export const statsCategoryTitle = style({
-  fontSize: "14px",
-  fontWeight: "bold",
-  display: "flex",
-  alignItems: "center",
-  gap: `${SPACING_UNIT}px`,
-});
-
-export const statsCategory = style({
-  display: "flex",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT / 2}px`,
-});
-
-globalStyle(`${requirementsDetails} a`, {
-  display: "flex",
-  color: vars.color.body,
-});
-
-export const list = style({
-  listStyle: "none",
-  margin: "0",
-  display: "flex",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT * 2}px`,
-  padding: `${SPACING_UNIT * 2}px`,
-});
-
-export const listItem = style({
-  display: "flex",
-  cursor: "pointer",
-  transition: "all ease 0.1s",
-  color: vars.color.muted,
-  width: "100%",
-  overflow: "hidden",
-  borderRadius: "4px",
-  padding: `${SPACING_UNIT}px ${SPACING_UNIT}px`,
-  gap: `${SPACING_UNIT * 2}px`,
-  alignItems: "center",
-  textAlign: "left",
-  ":hover": {
-    backgroundColor: "rgba(255, 255, 255, 0.15)",
-    textDecoration: "none",
-  },
-});
-
-export const listItemImage = recipe({
-  base: {
-    width: "54px",
-    height: "54px",
-    borderRadius: "4px",
-    objectFit: "cover",
-  },
-  variants: {
-    unlocked: {
-      false: {
-        filter: "grayscale(100%)",
-      },
-    },
-  },
-});
-
-export const subscriptionRequiredButton = style({
-  textDecoration: "none",
-  display: "flex",
-  justifyContent: "center",
-  width: "100%",
-  gap: `${SPACING_UNIT / 2}px`,
-  color: vars.color.warning,
-  cursor: "pointer",
-  ":hover": {
-    textDecoration: "underline",
-  },
-});
diff --git a/src/renderer/src/pages/home/catalogue-home.css.ts b/src/renderer/src/pages/home/catalogue-home.css.ts
deleted file mode 100644
index a13d58f46..000000000
--- a/src/renderer/src/pages/home/catalogue-home.css.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-import { SPACING_UNIT } from "../../theme.css";
-
-export const catalogueCategories = style({
-  display: "flex",
-  gap: `${SPACING_UNIT}px`,
-});
-
-export const content = style({
-  width: "100%",
-  display: "flex",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT * 3}px`,
-  padding: `${SPACING_UNIT * 3}px`,
-  flex: "1",
-});
-
-export const cards = style({
-  display: "grid",
-  gridTemplateColumns: "repeat(2, 1fr)",
-  gap: `${SPACING_UNIT * 2}px`,
-  transition: "all ease 0.2s",
-});
diff --git a/src/renderer/src/pages/home/home.css.ts b/src/renderer/src/pages/home/home.css.ts
deleted file mode 100644
index 4c605377c..000000000
--- a/src/renderer/src/pages/home/home.css.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-import { SPACING_UNIT, vars } from "../../theme.css";
-
-export const homeHeader = style({
-  display: "flex",
-  gap: `${SPACING_UNIT}px`,
-  justifyContent: "space-between",
-  alignItems: "center",
-});
-
-export const content = style({
-  width: "100%",
-  height: "100%",
-  display: "flex",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT * 3}px`,
-  padding: `${SPACING_UNIT * 3}px`,
-  flex: "1",
-  overflowY: "auto",
-});
-
-export const cards = style({
-  display: "grid",
-  gridTemplateColumns: "repeat(1, 1fr)",
-  gap: `${SPACING_UNIT * 2}px`,
-  transition: "all ease 0.2s",
-  "@media": {
-    "(min-width: 768px)": {
-      gridTemplateColumns: "repeat(2, 1fr)",
-    },
-    "(min-width: 1250px)": {
-      gridTemplateColumns: "repeat(3, 1fr)",
-    },
-    "(min-width: 1600px)": {
-      gridTemplateColumns: "repeat(4, 1fr)",
-    },
-  },
-});
-
-export const cardSkeleton = style({
-  width: "100%",
-  height: "180px",
-  boxShadow: "0px 0px 15px 0px #000000",
-  overflow: "hidden",
-  borderRadius: "4px",
-  transition: "all ease 0.2s",
-  zIndex: "1",
-  ":active": {
-    opacity: vars.opacity.active,
-  },
-});
-
-export const noResults = style({
-  height: "100%",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  flexDirection: "column",
-  gap: "16px",
-  gridColumn: "1 / -1",
-});
-
-export const buttonsList = style({
-  display: "flex",
-  listStyle: "none",
-  margin: "0",
-  padding: "0",
-  gap: `${SPACING_UNIT}px`,
-});
-
-export const flameIcon = style({
-  width: "30px",
-  top: "-10px",
-  left: "-5px",
-  position: "absolute",
-});
diff --git a/src/renderer/src/pages/profile/edit-profile-modal/edit-profile-modal.css.ts b/src/renderer/src/pages/profile/edit-profile-modal/edit-profile-modal.css.ts
deleted file mode 100644
index 8dd1df51a..000000000
--- a/src/renderer/src/pages/profile/edit-profile-modal/edit-profile-modal.css.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { vars } from "../../../theme.css";
-import { globalStyle, style } from "@vanilla-extract/css";
-
-export const profileAvatarEditContainer = style({
-  alignSelf: "center",
-  // width: "132px",
-  // height: "132px",
-  display: "flex",
-  // borderRadius: "4px",
-  color: vars.color.body,
-  justifyContent: "center",
-  alignItems: "center",
-  backgroundColor: vars.color.background,
-  position: "relative",
-  cursor: "pointer",
-});
-
-export const profileAvatarEditOverlay = style({
-  position: "absolute",
-  width: "100%",
-  height: "100%",
-  backgroundColor: "rgba(0, 0, 0, 0.7)",
-  color: vars.color.muted,
-  zIndex: "1",
-  cursor: "pointer",
-  display: "flex",
-  justifyContent: "center",
-  transition: "all ease 0.2s",
-  alignItems: "center",
-  borderRadius: "4px",
-  opacity: "0",
-});
-
-globalStyle(`${profileAvatarEditContainer}:hover ${profileAvatarEditOverlay}`, {
-  opacity: "1",
-});
diff --git a/src/renderer/src/pages/profile/profile-content/locked-profile.css.ts b/src/renderer/src/pages/profile/profile-content/locked-profile.css.ts
deleted file mode 100644
index bf5494b6e..000000000
--- a/src/renderer/src/pages/profile/profile-content/locked-profile.css.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { SPACING_UNIT } from "../../../theme.css";
-
-import { style } from "@vanilla-extract/css";
-
-export const container = style({
-  display: "flex",
-  width: "100%",
-  height: "100%",
-  justifyContent: "center",
-  alignItems: "center",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT}px`,
-});
-
-export const lockIcon = style({
-  width: "60px",
-  height: "60px",
-  borderRadius: "50%",
-  backgroundColor: "rgba(255, 255, 255, 0.06)",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  marginBottom: `${SPACING_UNIT * 2}px`,
-});
diff --git a/src/renderer/src/pages/profile/profile-content/profile-content.css.ts b/src/renderer/src/pages/profile/profile-content/profile-content.css.ts
deleted file mode 100644
index 9bd2b027b..000000000
--- a/src/renderer/src/pages/profile/profile-content/profile-content.css.ts
+++ /dev/null
@@ -1,237 +0,0 @@
-import { vars, SPACING_UNIT } from "../../../theme.css";
-import { globalStyle, style } from "@vanilla-extract/css";
-
-export const gameCover = style({
-  transition: "all ease 0.2s",
-  boxShadow: "0 8px 10px -2px rgba(0, 0, 0, 0.5)",
-  width: "100%",
-  position: "relative",
-  ":before": {
-    content: "",
-    top: "0",
-    left: "0",
-    width: "100%",
-    height: "172%",
-    position: "absolute",
-    background:
-      "linear-gradient(35deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.07) 51.5%, rgba(255, 255, 255, 0.15) 54%, rgba(255, 255, 255, 0.15) 100%)",
-    transition: "all ease 0.3s",
-    transform: "translateY(-36%)",
-    opacity: "0.5",
-  },
-});
-
-export const game = style({
-  transition: "all ease 0.2s",
-  ":hover": {
-    transform: "scale(1.05)",
-  },
-});
-
-globalStyle(`${gameCover}:hover::before`, {
-  opacity: "1",
-  transform: "translateY(-20%)",
-});
-
-export const box = style({
-  backgroundColor: vars.color.background,
-  borderRadius: "4px",
-  border: `solid 1px ${vars.color.border}`,
-  padding: `${SPACING_UNIT * 2}px`,
-});
-
-export const sectionHeader = style({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  marginBottom: `${SPACING_UNIT * 2}px`,
-});
-
-export const list = style({
-  listStyle: "none",
-  margin: "0",
-  padding: "0",
-  display: "flex",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT * 2}px`,
-});
-
-export const friend = style({
-  display: "flex",
-  gap: `${SPACING_UNIT}px`,
-  alignItems: "center",
-});
-
-export const friendName = style({
-  color: vars.color.muted,
-  fontWeight: "bold",
-  fontSize: vars.size.body,
-});
-
-export const rightContent = style({
-  width: "100%",
-  height: "100%",
-  display: "flex",
-  gap: `${SPACING_UNIT * 2}px`,
-  flexDirection: "column",
-  transition: "all ease 0.2s",
-  "@media": {
-    "(min-width: 1024px)": {
-      maxWidth: "300px",
-      width: "100%",
-    },
-    "(min-width: 1280px)": {
-      width: "100%",
-      maxWidth: "400px",
-    },
-  },
-});
-
-export const listItem = style({
-  display: "flex",
-  cursor: "pointer",
-  transition: "all ease 0.1s",
-  color: vars.color.muted,
-  width: "100%",
-  overflow: "hidden",
-  borderRadius: "4px",
-  padding: `${SPACING_UNIT}px ${SPACING_UNIT}px`,
-  gap: `${SPACING_UNIT * 2}px`,
-  alignItems: "center",
-  ":hover": {
-    backgroundColor: "rgba(255, 255, 255, 0.15)",
-    textDecoration: "none",
-  },
-});
-
-export const statsListItem = style({
-  display: "flex",
-  flexDirection: "column",
-  transition: "all ease 0.1s",
-  color: vars.color.muted,
-  width: "100%",
-  overflow: "hidden",
-  borderRadius: "4px",
-  padding: `${SPACING_UNIT}px ${SPACING_UNIT}px`,
-  gap: `${SPACING_UNIT}px`,
-  ":hover": {
-    backgroundColor: "rgba(255, 255, 255, 0.15)",
-    textDecoration: "none",
-  },
-});
-
-export const gamesGrid = style({
-  listStyle: "none",
-  margin: "0",
-  padding: "0",
-  display: "grid",
-  gap: `${SPACING_UNIT * 2}px`,
-  gridTemplateColumns: "repeat(2, 1fr)",
-  "@container": {
-    [`app-container (min-width: 900px)`]: {
-      gridTemplateColumns: "repeat(4, 1fr)",
-    },
-    [`app-container (min-width: 1300px)`]: {
-      gridTemplateColumns: "repeat(5, 1fr)",
-    },
-    [`app-container (min-width: 2000px)`]: {
-      gridTemplateColumns: "repeat(6, 1fr)",
-    },
-    [`app-container (min-width: 2600px)`]: {
-      gridTemplateColumns: "repeat(8, 1fr)",
-    },
-    [`app-container (min-width: 3000px)`]: {
-      gridTemplateColumns: "repeat(12, 1fr)",
-    },
-  },
-});
-
-export const telescopeIcon = style({
-  width: "60px",
-  height: "60px",
-  borderRadius: "50%",
-  backgroundColor: "rgba(255, 255, 255, 0.06)",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  marginBottom: `${SPACING_UNIT * 2}px`,
-});
-
-export const noGames = style({
-  display: "flex",
-  width: "100%",
-  height: "100%",
-  justifyContent: "center",
-  alignItems: "center",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT}px`,
-});
-
-export const listItemImage = style({
-  width: "32px",
-  height: "32px",
-  borderRadius: "4px",
-  objectFit: "cover",
-});
-
-export const listItemDetails = style({
-  display: "flex",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT / 2}px`,
-  overflow: "hidden",
-});
-
-export const listItemTitle = style({
-  fontWeight: "bold",
-  overflow: "hidden",
-  whiteSpace: "nowrap",
-  textOverflow: "ellipsis",
-});
-
-export const listItemDescription = style({
-  display: "flex",
-  alignItems: "center",
-  gap: `${SPACING_UNIT}px`,
-});
-
-export const defaultAvatarWrapper = style({
-  width: "32px",
-  height: "32px",
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  backgroundColor: vars.color.background,
-  border: `solid 1px ${vars.color.border}`,
-  borderRadius: "4px",
-});
-
-export const achievementsProgressBar = style({
-  width: "100%",
-  height: "4px",
-  transition: "all ease 0.2s",
-  "::-webkit-progress-bar": {
-    backgroundColor: "rgba(255, 255, 255, 0.15)",
-    borderRadius: "4px",
-  },
-  "::-webkit-progress-value": {
-    backgroundColor: vars.color.muted,
-    borderRadius: "4px",
-  },
-});
-
-export const link = style({
-  textAlign: "start",
-  color: vars.color.body,
-  ":hover": {
-    textDecoration: "underline",
-    cursor: "pointer",
-  },
-});
-
-export const gameCardStats = style({
-  width: "100%",
-  height: "100%",
-  transition: "transform 0.5s ease-in-out",
-  flexShrink: "0",
-  flexGrow: "0",
-});
diff --git a/src/renderer/src/pages/profile/profile-hero/profile-hero.css.ts b/src/renderer/src/pages/profile/profile-hero/profile-hero.css.ts
deleted file mode 100644
index 2080e445a..000000000
--- a/src/renderer/src/pages/profile/profile-hero/profile-hero.css.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-import { SPACING_UNIT, vars } from "../../../theme.css";
-import { style } from "@vanilla-extract/css";
-
-export const profileContentBox = style({
-  display: "flex",
-  flexDirection: "column",
-  position: "relative",
-});
-
-export const profileAvatarButton = style({
-  width: "96px",
-  minWidth: "96px",
-  height: "96px",
-  borderRadius: "4px",
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  backgroundColor: vars.color.background,
-  border: `solid 1px ${vars.color.border}`,
-  boxShadow: "0px 0px 5px 0px rgba(0, 0, 0, 0.7)",
-  cursor: "pointer",
-  transition: "all ease 0.3s",
-  color: vars.color.muted,
-  position: "relative",
-  ":hover": {
-    boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.7)",
-  },
-});
-
-export const profileAvatar = style({
-  height: "100%",
-  width: "100%",
-  objectFit: "cover",
-  overflow: "hidden",
-});
-
-export const profileInformation = style({
-  display: "flex",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT}px`,
-  alignItems: "flex-start",
-  color: "#c0c1c7",
-  zIndex: 1,
-  overflow: "hidden",
-});
-
-export const profileDisplayName = style({
-  fontWeight: "bold",
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  width: "100%",
-  display: "flex",
-  alignItems: "center",
-  position: "relative",
-  textShadow: "0 0 5px rgb(0 0 0 / 40%)",
-});
-
-export const heroPanel = style({
-  width: "100%",
-  height: "72px",
-  minHeight: "72px",
-  padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 3}px`,
-  display: "flex",
-  gap: `${SPACING_UNIT}px`,
-  justifyContent: "space-between",
-  backdropFilter: `blur(15px)`,
-  borderTop: `solid 1px rgba(255, 255, 255, 0.1)`,
-  boxShadow: "0px 0px 15px 0px rgba(0, 0, 0, 0.5)",
-  backgroundColor: "rgba(0, 0, 0, 0.3)",
-});
-
-export const userInformation = style({
-  display: "flex",
-  padding: `${SPACING_UNIT * 7}px ${SPACING_UNIT * 3}px`,
-  alignItems: "center",
-  gap: `${SPACING_UNIT * 2}px`,
-});
-
-export const currentGameWrapper = style({
-  display: "flex",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT / 2}px`,
-});
-
-export const currentGameDetails = style({
-  display: "flex",
-  flexDirection: "row",
-  gap: `${SPACING_UNIT}px`,
-  alignItems: "center",
-});
diff --git a/src/renderer/src/pages/profile/profile.css.ts b/src/renderer/src/pages/profile/profile.css.ts
deleted file mode 100644
index 68f5fa563..000000000
--- a/src/renderer/src/pages/profile/profile.css.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { SPACING_UNIT } from "../../theme.css";
-import { style } from "@vanilla-extract/css";
-
-export const wrapper = style({
-  width: "100%",
-  display: "flex",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT * 3}px`,
-});
diff --git a/src/renderer/src/pages/profile/report-profile/report-profile.css.ts b/src/renderer/src/pages/profile/report-profile/report-profile.css.ts
deleted file mode 100644
index ba53fd628..000000000
--- a/src/renderer/src/pages/profile/report-profile/report-profile.css.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { SPACING_UNIT, vars } from "../../../theme.css";
-import { style } from "@vanilla-extract/css";
-
-export const reportButton = style({
-  alignSelf: "flex-end",
-  color: vars.color.muted,
-  gap: `${SPACING_UNIT}px`,
-  display: "flex",
-  cursor: "pointer",
-  alignItems: "center",
-  fontSize: "12px",
-});
diff --git a/src/renderer/src/pages/profile/upload-background-image-button/upload-background-image-button.css.ts b/src/renderer/src/pages/profile/upload-background-image-button/upload-background-image-button.css.ts
deleted file mode 100644
index 9a4e2c8f1..000000000
--- a/src/renderer/src/pages/profile/upload-background-image-button/upload-background-image-button.css.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { style } from "@vanilla-extract/css";
-import { vars } from "../../../theme.css";
-
-export const uploadBackgroundImageButton = style({
-  position: "absolute",
-  top: 16,
-  right: 16,
-  borderColor: vars.color.body,
-  boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.8)",
-  backgroundColor: "rgba(0, 0, 0, 0.1)",
-  backdropFilter: "blur(20px)",
-});
diff --git a/src/renderer/src/pages/settings/settings-account.css.ts b/src/renderer/src/pages/settings/settings-account.css.ts
deleted file mode 100644
index 8fbb38456..000000000
--- a/src/renderer/src/pages/settings/settings-account.css.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-import { SPACING_UNIT, vars } from "../../theme.css";
-
-export const form = style({
-  display: "flex",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT * 3}px`,
-});
-
-export const blockedUser = style({
-  display: "flex",
-  minWidth: "240px",
-  justifyContent: "space-between",
-  alignItems: "center",
-  backgroundColor: vars.color.darkBackground,
-  border: `1px solid ${vars.color.border}`,
-  borderRadius: "4px",
-  padding: `${SPACING_UNIT}px`,
-});
-
-export const unblockButton = style({
-  color: vars.color.muted,
-  cursor: "pointer",
-  transition: "all ease 0.2s",
-  ":hover": {
-    opacity: "0.7",
-  },
-});
-
-export const blockedUsersList = style({
-  padding: "0",
-  margin: "0",
-  listStyle: "none",
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "flex-start",
-  gap: `${SPACING_UNIT}px`,
-});
diff --git a/src/renderer/src/pages/settings/settings-download-sources.css.ts b/src/renderer/src/pages/settings/settings-download-sources.css.ts
deleted file mode 100644
index caa93ce82..000000000
--- a/src/renderer/src/pages/settings/settings-download-sources.css.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { style } from "@vanilla-extract/css";
-import { SPACING_UNIT, vars } from "../../theme.css";
-import { recipe } from "@vanilla-extract/recipes";
-
-export const downloadSources = style({
-  padding: "0",
-  margin: "0",
-  gap: `${SPACING_UNIT * 2}px`,
-  display: "flex",
-  flexDirection: "column",
-});
-
-export const downloadSourceItem = recipe({
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    backgroundColor: vars.color.darkBackground,
-    borderRadius: "8px",
-    padding: `${SPACING_UNIT * 2}px`,
-    gap: `${SPACING_UNIT}px`,
-    border: `solid 1px ${vars.color.border}`,
-    transition: "all ease 0.2s",
-  },
-  variants: {
-    isSyncing: {
-      true: {
-        opacity: vars.opacity.disabled,
-      },
-    },
-  },
-});
-
-export const downloadSourceItemHeader = style({
-  marginBottom: `${SPACING_UNIT}px`,
-  display: "flex",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT}px`,
-});
-
-export const downloadSourcesHeader = style({
-  display: "flex",
-  justifyContent: "space-between",
-  alignItems: "center",
-});
-
-export const navigateToCatalogueButton = style({
-  display: "flex",
-  alignItems: "center",
-  gap: `${SPACING_UNIT}px`,
-  color: vars.color.muted,
-  textDecoration: "underline",
-  cursor: "pointer",
-
-  ":disabled": {
-    cursor: "default",
-    textDecoration: "none",
-  },
-});
diff --git a/src/renderer/src/pages/settings/settings-real-debrid.css.ts b/src/renderer/src/pages/settings/settings-real-debrid.css.ts
deleted file mode 100644
index 0dfc9d789..000000000
--- a/src/renderer/src/pages/settings/settings-real-debrid.css.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-import { SPACING_UNIT } from "../../theme.css";
-
-export const form = style({
-  display: "flex",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT}px`,
-});
-
-export const description = style({
-  marginBottom: `${SPACING_UNIT * 2}px`,
-});
diff --git a/src/renderer/src/pages/settings/settings.css.ts b/src/renderer/src/pages/settings/settings.css.ts
deleted file mode 100644
index 9f607ecea..000000000
--- a/src/renderer/src/pages/settings/settings.css.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-import { SPACING_UNIT, vars } from "../../theme.css";
-
-export const container = style({
-  padding: "24px",
-  width: "100%",
-  display: "flex",
-});
-
-export const content = style({
-  backgroundColor: vars.color.background,
-  width: "100%",
-  height: "100%",
-  padding: `${SPACING_UNIT * 3}px`,
-  border: `solid 1px ${vars.color.border}`,
-  boxShadow: "0px 0px 15px 0px #000000",
-  borderRadius: "8px",
-  gap: `${SPACING_UNIT * 2}px`,
-  display: "flex",
-  flexDirection: "column",
-});
-
-export const settingsCategories = style({
-  display: "flex",
-  gap: `${SPACING_UNIT}px`,
-});
diff --git a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.css.ts b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.css.ts
deleted file mode 100644
index a164c9007..000000000
--- a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.css.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import { SPACING_UNIT, vars } from "../../../theme.css";
-import { style } from "@vanilla-extract/css";
-
-export const friendListDisplayName = style({
-  fontWeight: "bold",
-  fontSize: vars.size.body,
-  textAlign: "left",
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
-});
-
-export const friendListContainer = style({
-  display: "flex",
-  gap: `${SPACING_UNIT * 3}px`,
-  alignItems: "center",
-  borderRadius: "4px",
-  border: `solid 1px ${vars.color.border}`,
-  width: "100%",
-  height: "54px",
-  minHeight: "54px",
-  transition: "all ease 0.2s",
-  position: "relative",
-  ":hover": {
-    backgroundColor: "rgba(255, 255, 255, 0.15)",
-  },
-});
-
-export const friendListButton = style({
-  display: "flex",
-  alignItems: "center",
-  position: "absolute",
-  cursor: "pointer",
-  height: "100%",
-  width: "100%",
-  flexDirection: "row",
-  color: vars.color.body,
-  gap: `${SPACING_UNIT + SPACING_UNIT / 2}px`,
-  padding: `0 ${SPACING_UNIT}px`,
-});
-
-export const friendRequestItem = style({
-  color: vars.color.body,
-  ":hover": {
-    backgroundColor: "rgba(255, 255, 255, 0.15)",
-  },
-});
-
-export const acceptRequestButton = style({
-  cursor: "pointer",
-  color: vars.color.body,
-  width: "28px",
-  height: "28px",
-  ":hover": {
-    color: vars.color.success,
-  },
-});
-
-export const cancelRequestButton = style({
-  cursor: "pointer",
-  color: vars.color.body,
-  width: "28px",
-  height: "28px",
-  ":hover": {
-    color: vars.color.danger,
-  },
-});
-
-export const friendCodeButton = style({
-  color: vars.color.body,
-  cursor: "pointer",
-  display: "flex",
-  gap: `${SPACING_UNIT / 2}px`,
-  alignItems: "center",
-  transition: "all ease 0.2s",
-  ":hover": {
-    color: vars.color.muted,
-  },
-});