diff --git a/bun.lockb b/bun.lockb
index cbefd49..f55fb2b 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/bunfig.toml b/bunfig.toml
new file mode 100644
index 0000000..54b7a49
--- /dev/null
+++ b/bunfig.toml
@@ -0,0 +1,2 @@
+[test]
+preload = './happydom.ts'
\ No newline at end of file
diff --git a/happydom.ts b/happydom.ts
new file mode 100644
index 0000000..7f712d0
--- /dev/null
+++ b/happydom.ts
@@ -0,0 +1,3 @@
+import { GlobalRegistrator } from "@happy-dom/global-registrator";
+
+GlobalRegistrator.register();
diff --git a/package.json b/package.json
index 91b20c7..fdff789 100644
--- a/package.json
+++ b/package.json
@@ -14,11 +14,15 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@happy-dom/global-registrator": "^13.6.2",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
     "@typescript-eslint/eslint-plugin": "^6.14.0",
     "@typescript-eslint/parser": "^6.14.0",
     "@vitejs/plugin-react-swc": "^3.5.0",
+    "bun-types": "^1.0.29",
     "eslint": "^8.55.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
diff --git a/src/App.tsx b/src/App.tsx
index 03662db..9b590ff 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,9 +4,9 @@ import ImageModerator from './components/ImageModerator/ImageModerator'
 function App() {
   return (
     <>
-      <ImageModerator url='https://picsum.photos/1000'/>
+      <ImageModerator apiEndpoint='"https://gelbooru.com/index.php?page=dapi&s=post&q=index&limit=1&json=1"' imageUrlProperty='post[0]' />
     </>
   )
 }
 
-export default App
+export default App
\ No newline at end of file
diff --git a/src/components/ImageModerator/ImageModerator.tsx b/src/components/ImageModerator/ImageModerator.tsx
index f8d80c3..21be10c 100644
--- a/src/components/ImageModerator/ImageModerator.tsx
+++ b/src/components/ImageModerator/ImageModerator.tsx
@@ -1,13 +1,14 @@
 import Button from "../Button/Button";
 
 export interface ImageModeratorProps {
-    url: string;
+    apiEndpoint: string;
+    imageUrlProperty: string;
 }
 
-export default function ImageModerator(props: ImageModeratorProps) {
+export default function ImageModerator({apiEndpoint, imageUrlProperty}: ImageModeratorProps) {
     return <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr",
     gridTemplateRows: "1fr 50px", gridTemplateAreas: "'. .' '. .'", width: "100vw", height: "100vh" }}>
-        <img src={props.url} style={{ width: "100%", height: "100%", gridColumnStart: 1, gridColumnEnd: 3, display: "block", objectFit: "contain" }} />
+        <img src={imageUrlProperty} style={{ width: "100%", height: "100%", gridColumnStart: 1, gridColumnEnd: 3, display: "block", objectFit: "contain" }} />
         <Button label="Discard" />
         <Button label="Accept" />
     </div>
diff --git a/test/ImageModerator.test.tsx b/test/ImageModerator.test.tsx
new file mode 100644
index 0000000..c8badd0
--- /dev/null
+++ b/test/ImageModerator.test.tsx
@@ -0,0 +1,8 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { describe, it } from "bun:test";
+import ImageModerator from '../src/components/ImageModerator/ImageModerator';
+
+it("should render without crashing", () => {
+    render(<ImageModerator apiEndpoint='"https://gelbooru.com/index.php?page=dapi&s=post&q=index&limit=1&json=1"' imageUrlProperty='post[0]' />);
+});
\ No newline at end of file