diff --git a/src/App.tsx b/src/App.tsx
index e69de29..13068d4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -0,0 +1,12 @@
+import { SongCard } from "./components/SongCard";
+import { songs } from "./data/songs"
+
+function App() {
+  return (
+    <main>
+      <SongCard song={songs[0]} />
+    </main>
+  )
+}
+
+export default App
\ No newline at end of file
diff --git a/src/components/SongCard.tsx b/src/components/SongCard.tsx
new file mode 100644
index 0000000..99a0bbc
--- /dev/null
+++ b/src/components/SongCard.tsx
@@ -0,0 +1,23 @@
+import type { Song } from '../data/songs'
+
+type SongCardProps = {
+  song: Song
+}
+
+export function SongCard({ song }: SongCardProps) {
+  return (
+    <article>
+      <h2>{song.title}</h2>
+      <p>{song.artist}</p>
+
+      <div>
+        <p>Teksten vises her</p>
+      </div>
+
+      <div>
+        <p>Bilde vises her</p>
+      </div>
+      
+    </article>
+  )
+}
\ No newline at end of file
diff --git a/src/main.tsx b/src/main.tsx
index e69de29..ac18159 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -0,0 +1,15 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import './index.css'
+import App from './App.tsx'
+
+const queryClient = new QueryClient()
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
+  </StrictMode>,
+)
\ No newline at end of file