diff --git a/Frontend/src/App.tsx b/Frontend/src/App.tsx
index 9c2e213..44eb6ef 100644
--- a/Frontend/src/App.tsx
+++ b/Frontend/src/App.tsx
@@ -1,22 +1,18 @@
 import type { Component } from "solid-js";
 import { createSignal, For, onMount } from "solid-js";
-
-interface Weather {
-	date: string;
-	temperatureC: number;
-	temperatureF: number;
-	summary: string;
-}
+import CalibreService from "./services/calibreservice";
+import { book } from "./types/calibretypes";
+import BookCard from "./components/BookCard";
 
 const App: Component = () => {
-	const [weather, setWeather] = createSignal<Weather[]>([]);
+	const [books, setBooks] = createSignal<book[]>([]);
 	onMount(() => {
-		fetch("/api/weatherforecast")
-			.then((r) => r.json())
-			.then(setWeather);
+		CalibreService.getBooks().then(setBooks);
 	});
 	return (
 		<div>
+			<button class="btn btn-primary">primary knapp</button>
+			<button class="btn btn-blue">blå knapp</button>
 			<header>
 				<p>
 					Edit <code>src/App.tsx</code> and save to reload.
@@ -30,14 +26,9 @@ const App: Component = () => {
 				</a>
 			</header>
 
-			<For each={weather()}>
-				{(item) => (
-					<li>
-						{item.date} - {item.temperatureC}°C / {item.temperatureF}°F -{" "}
-						{item.summary}
-					</li>
-				)}
-			</For>
+			<div class="book-grid text-base-content mx-auto grid gap-6 pb-20 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 [&_.carbon-responsive-wrap]:flex-nowrap! [&_.carbon-responsive-wrap]:text-[11px]! [&_:is(div,button)]:[transition:background-color_0ms,border-color_100ms,box-shadow_300ms,border-radius_500ms_ease-out] [&>*]:mb-6">
+				<For each={books()}>{(item) => <BookCard book={item} />}</For>
+			</div>
 		</div>
 	);
 };
diff --git a/Frontend/src/components/BookCard.tsx b/Frontend/src/components/BookCard.tsx
new file mode 100644
index 0000000..3fa7aaa
--- /dev/null
+++ b/Frontend/src/components/BookCard.tsx
@@ -0,0 +1,27 @@
+import type { Component } from "solid-js";
+import { book } from "../types/calibretypes";
+
+const BookCard: Component<{ book: book }> = (props: { book: book }) => {
+	return (
+		<div class="card book-card bg-base-100 card-border border-base-300 card-sm">
+			{/* <figure>
+				<img
+					src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"
+					alt="Shoes"
+				/>
+			</figure> */}
+			<div class="card-body">
+				<h3 class="card-title">{props.book.title}</h3>
+				<h4 class="author">{props.book.author}</h4>
+				<p>
+					Series: {props.book.seriesName} {props.book.seriesNumber}
+				</p>
+				{/* <div class="card-actions justify-end">
+					<button class="btn btn-primary">Buy Now</button>
+				</div> */}
+			</div>
+		</div>
+	);
+};
+
+export default BookCard;
diff --git a/Frontend/src/services/calibreservice.ts b/Frontend/src/services/calibreservice.ts
new file mode 100644
index 0000000..953284b
--- /dev/null
+++ b/Frontend/src/services/calibreservice.ts
@@ -0,0 +1,10 @@
+import { book } from "../types/calibretypes";
+
+const CalibreService = {
+	getBooks: async (): Promise<book[]> => {
+		const response = await fetch("/api/calibre/books");
+		return response.json();
+	},
+};
+
+export default CalibreService;
diff --git a/Frontend/src/styles/styles.css b/Frontend/src/styles/styles.css
new file mode 100644
index 0000000..5990d95
--- /dev/null
+++ b/Frontend/src/styles/styles.css
@@ -0,0 +1,4 @@
+@import "tailwindcss";
+@plugin "daisyui" {
+	themes: dim --default;
+}
diff --git a/Frontend/src/types/calibretypes.ts b/Frontend/src/types/calibretypes.ts
new file mode 100644
index 0000000..44beb1d
--- /dev/null
+++ b/Frontend/src/types/calibretypes.ts
@@ -0,0 +1,15 @@
+interface book {
+	id: number;
+	title: string;
+	authorId: number;
+	author: string;
+	comments: string;
+	language: string;
+	path: string;
+	hasCover: boolean;
+	formats: Array<{ id: number; format: string; fileName: string }>;
+	seriesName: string;
+	seriesNumber: number;
+}
+
+export type { book };