diff --git a/src/renderer/src/components/backdrop/index.ts b/src/renderer/src/components/backdrop/index.ts
new file mode 100644
index 00000000..52258e65
--- /dev/null
+++ b/src/renderer/src/components/backdrop/index.ts
@@ -0,0 +1 @@
+export * from "./backdrop";
diff --git a/src/renderer/src/components/bottom-panel/index.ts b/src/renderer/src/components/bottom-panel/index.ts
new file mode 100644
index 00000000..0016f699
--- /dev/null
+++ b/src/renderer/src/components/bottom-panel/index.ts
@@ -0,0 +1 @@
+export * from "./bottom-panel";
diff --git a/src/renderer/src/components/button/index.ts b/src/renderer/src/components/button/index.ts
new file mode 100644
index 00000000..98d55acd
--- /dev/null
+++ b/src/renderer/src/components/button/index.ts
@@ -0,0 +1 @@
+export * from "./button";
diff --git a/src/renderer/src/components/checkbox-field/index.ts b/src/renderer/src/components/checkbox-field/index.ts
new file mode 100644
index 00000000..ddfca0f3
--- /dev/null
+++ b/src/renderer/src/components/checkbox-field/index.ts
@@ -0,0 +1 @@
+export * from "./checkbox-field";
diff --git a/src/renderer/src/components/game-card/index.ts b/src/renderer/src/components/game-card/index.ts
new file mode 100644
index 00000000..01bf003d
--- /dev/null
+++ b/src/renderer/src/components/game-card/index.ts
@@ -0,0 +1 @@
+export * from "./game-card";
diff --git a/src/renderer/src/components/header/index.ts b/src/renderer/src/components/header/index.ts
new file mode 100644
index 00000000..49ac70fe
--- /dev/null
+++ b/src/renderer/src/components/header/index.ts
@@ -0,0 +1 @@
+export * from "./header";
diff --git a/src/renderer/src/components/hero/index.ts b/src/renderer/src/components/hero/index.ts
new file mode 100644
index 00000000..5e2d3caf
--- /dev/null
+++ b/src/renderer/src/components/hero/index.ts
@@ -0,0 +1 @@
+export * from "./hero";
diff --git a/src/renderer/src/components/index.ts b/src/renderer/src/components/index.ts
index 70777fea..3fb2fcd2 100644
--- a/src/renderer/src/components/index.ts
+++ b/src/renderer/src/components/index.ts
@@ -1,10 +1,10 @@
-export * from "./bottom-panel/bottom-panel";
-export * from "./button/button";
-export * from "./game-card/game-card";
-export * from "./header/header";
-export * from "./hero/hero";
-export * from "./modal/modal";
-export * from "./sidebar/sidebar";
-export * from "./text-field/text-field";
-export * from "./checkbox-field/checkbox-field";
-export * from "./link/link";
+export * from "./bottom-panel";
+export * from "./button";
+export * from "./game-card";
+export * from "./header";
+export * from "./hero";
+export * from "./modal";
+export * from "./sidebar";
+export * from "./text-field";
+export * from "./checkbox-field";
+export * from "./link";
diff --git a/src/renderer/src/components/link/index.ts b/src/renderer/src/components/link/index.ts
new file mode 100644
index 00000000..6fc151af
--- /dev/null
+++ b/src/renderer/src/components/link/index.ts
@@ -0,0 +1 @@
+export * from "./link";
diff --git a/src/renderer/src/components/modal/index.ts b/src/renderer/src/components/modal/index.ts
new file mode 100644
index 00000000..031608e2
--- /dev/null
+++ b/src/renderer/src/components/modal/index.ts
@@ -0,0 +1 @@
+export * from "./modal";
diff --git a/src/renderer/src/components/modal/modal.tsx b/src/renderer/src/components/modal/modal.tsx
index 696189ad..7beccfae 100644
--- a/src/renderer/src/components/modal/modal.tsx
+++ b/src/renderer/src/components/modal/modal.tsx
@@ -4,7 +4,7 @@ import { XIcon } from "@primer/octicons-react";
 
 import * as styles from "./modal.css";
 
-import { Backdrop } from "../backdrop/backdrop";
+import { Backdrop } from "../backdrop";
 import { useTranslation } from "react-i18next";
 
 export interface ModalProps {
diff --git a/src/renderer/src/components/sidebar/index.ts b/src/renderer/src/components/sidebar/index.ts
new file mode 100644
index 00000000..01acaeff
--- /dev/null
+++ b/src/renderer/src/components/sidebar/index.ts
@@ -0,0 +1 @@
+export * from "./sidebar";
diff --git a/src/renderer/src/components/text-field/index.ts b/src/renderer/src/components/text-field/index.ts
new file mode 100644
index 00000000..ef65a68d
--- /dev/null
+++ b/src/renderer/src/components/text-field/index.ts
@@ -0,0 +1 @@
+export * from "./text-field";
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
index 6280c8ce..c97a0f61 100644
--- 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
@@ -1,6 +1,6 @@
 import { style } from "@vanilla-extract/css";
 
-import { vars } from "../../../theme.css";
+import { vars } from "@renderer/theme.css";
 
 export const heroPanelAction = style({
   border: `solid 1px ${vars.color.muted}`,
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
index 640196e6..fb6d8e73 100644
--- a/src/renderer/src/pages/game-details/hero/hero-panel.css.ts
+++ b/src/renderer/src/pages/game-details/hero/hero-panel.css.ts
@@ -1,5 +1,5 @@
 import { style } from "@vanilla-extract/css";
-import { SPACING_UNIT, vars } from "../../../theme.css";
+import { SPACING_UNIT, vars } from "@renderer/theme.css";
 
 export const panel = style({
   width: "100%",
diff --git a/src/renderer/src/pages/game-details/installation-guides/dodi-installation-guide.css.ts b/src/renderer/src/pages/game-details/installation-guides/dodi-installation-guide.css.ts
index d95add53..4e485cef 100644
--- a/src/renderer/src/pages/game-details/installation-guides/dodi-installation-guide.css.ts
+++ b/src/renderer/src/pages/game-details/installation-guides/dodi-installation-guide.css.ts
@@ -1,4 +1,4 @@
-import { vars } from "../../../theme.css";
+import { vars } from "@renderer/theme.css";
 import { keyframes, style } from "@vanilla-extract/css";
 
 export const slideIn = keyframes({
diff --git a/src/renderer/src/pages/game-details/installation-guides/online-fix-installation-guide.css.ts b/src/renderer/src/pages/game-details/installation-guides/online-fix-installation-guide.css.ts
index 891f11be..9eb38648 100644
--- a/src/renderer/src/pages/game-details/installation-guides/online-fix-installation-guide.css.ts
+++ b/src/renderer/src/pages/game-details/installation-guides/online-fix-installation-guide.css.ts
@@ -1,4 +1,4 @@
-import { SPACING_UNIT } from "../../../theme.css";
+import { SPACING_UNIT } from "@renderer/theme.css";
 import { style } from "@vanilla-extract/css";
 
 export const passwordField = style({
diff --git a/src/renderer/src/pages/game-details/sidebar/how-long-to-beat-section.tsx b/src/renderer/src/pages/game-details/sidebar/how-long-to-beat-section.tsx
index ab4e7a4c..758bf10c 100644
--- a/src/renderer/src/pages/game-details/sidebar/how-long-to-beat-section.tsx
+++ b/src/renderer/src/pages/game-details/sidebar/how-long-to-beat-section.tsx
@@ -1,7 +1,7 @@
 import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
 import { useTranslation } from "react-i18next";
 import type { HowLongToBeatCategory } from "@types";
-import { vars } from "../../../theme.css";
+import { vars } from "@renderer/theme.css";
 import * as styles from "./sidebar.css";
 
 const durationTranslation: Record<string, string> = {
diff --git a/src/renderer/src/pages/game-details/sidebar/sidebar.css.ts b/src/renderer/src/pages/game-details/sidebar/sidebar.css.ts
index cae988ab..6d730c9e 100644
--- a/src/renderer/src/pages/game-details/sidebar/sidebar.css.ts
+++ b/src/renderer/src/pages/game-details/sidebar/sidebar.css.ts
@@ -1,6 +1,6 @@
 import { globalStyle, style } from "@vanilla-extract/css";
 
-import { SPACING_UNIT, vars } from "../../../theme.css";
+import { SPACING_UNIT, vars } from "@renderer/theme.css";
 
 export const contentSidebar = style({
   borderLeft: `solid 1px ${vars.color.border};`,