diff --git a/app/components/index.ts b/app/components/index.ts
new file mode 100644
index 0000000..958fcc0
--- /dev/null
+++ b/app/components/index.ts
@@ -0,0 +1,10 @@
+export { default as A } from "./A";
+export { default as P } from "./P";
+export { default as Title } from "./Title";
+export { default as Layout } from "./Layout";
+export { default as RichText } from "./RichText";
+export { default as Paragraph } from "./Paragraph";
+export { default as CodeBlock } from "./CodeBlock";
+export { default as ImageContainer } from "./ImageContainer";
+export { default as BostockMetaballAnimation } from "./BostockMetaballAnimation";
+export { default as PageTransition } from "./pageTransition";
diff --git a/app/routes/braindumps.list.$braindumpId.tsx b/app/routes/braindumps.list.$braindumpId.tsx
index 363bb11..7853ab8 100644
--- a/app/routes/braindumps.list.$braindumpId.tsx
+++ b/app/routes/braindumps.list.$braindumpId.tsx
@@ -5,12 +5,14 @@ import { useLoaderData } from "@remix-run/react";
 import notionClient from "~/integrations/notion";
 
 //? COMPONENTS
-import A from "~/components/A";
-import Title from "~/components/Title";
-import CodeBlock from "~/components/CodeBlock";
-import Paragraph from "~/components/Paragraph";
-import ImageContainer from "~/components/ImageContainer";
-import PageTransition from "~/components/pageTransition";
+import {
+  A,
+  Title,
+  CodeBlock,
+  Paragraph,
+  ImageContainer,
+  PageTransition,
+} from "../components";
 
 //? TYPES
 import type { PropsWithChildren } from "react";