diff --git a/src/App.tsx b/src/App.tsx
index 22660f9..18decca 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,100 +1,37 @@
-// App.tsx
-import { useState } from 'react';
-import { useCurMovies, usePopMovies } from './hooks/useMovies';
-
+import { usePopMovies, useCurMovies } from './hooks/useMovies';
 import { usePopularPeople } from './hooks/usePeople';
-//import { Button } from './components/Button';
-import { Sidebar} from './components/sidebar';
+import { Sidebar } from './components/sidebar';
+import { Section } from './components/Section';
+import { MovieList } from './components/MovieList';
+import { PersonList } from './components/PersonList';
 import './App.css';
 
 function App() {
-
-  const [searchQuery, setSearchQuery] = useState('')
-  //const [view, setView] = useState<'popular' | 'current'>('popular')
-
-  const popular = usePopMovies()
-  const current = useCurMovies()
-  const people = usePopularPeople()
-
-  const viewConfig = {
-    popular: { title: 'Populære filmer', query: popular },
-    current: { title: 'Nye filmer', query: current },
-  }
-/*
-  const { title, query } = viewConfig[view]
-  const { data, isLoading, error } = query 
-
-  if (isLoading) {
-    return <p>Laster filmer...</p>
-  } 
-
-  if (error) {
-    return <p>Noe gikk galt: {error.message}</p>
-  }
-
-  return (
-    <div>
-      <h1>{title}</h1>
-      <ul>
-        {data.results.map((movie: any) => (
-          <li key={movie.id}>{movie.title}</li>
-        ))}
-      </ul>
-      <Button text="Popular" onClick={() => setView('popular')} />
-      <Button text="Current" onClick={() => setView('current')} />
-    </div>
-  )
-}
-*/
+  const popular = usePopMovies();
+  const current = useCurMovies();
+  const people = usePopularPeople();
 
   return (
     <div className="page">
-      <Sidebar onSearch={setSearchQuery} />
+      <Sidebar />
 
       <main>
+        <Section id="populaere" title="Populære filmer" isLoading={popular.isLoading} error={popular.error}>
+          {popular.data && <MovieList movies={popular.data.results} />}
+        </Section>
 
-        <section id="populaere">
-          <h2>Populære filmer</h2>
-          {popular.isLoading && <p>Laster filmer...</p>}
-          {popular.error && <p>Noe gikk galt: {popular.error.message}</p>}
-          {popular.data && (
-            <ul>
-              {popular.data.results.map((movie: any) => (
-                <li key={movie.id}>{movie.title}</li>
-              ))}
-            </ul>
-          )}
-        </section>
-
-        <section id="nye-filmer">
-          <h2>Nye filmer</h2>
-          {current.isLoading && <p>Laster filmer...</p>}
-          {current.error && <p>Noe gikk galt: {current.error.message}</p>}
-          {current.data && (
-            <ul>
-              {current.data.results.map((movie: any) => (
-                <li key={movie.id}>{movie.title}</li>
-              ))}
-            </ul>
-          )}
-        </section>
+        <Section id="nye-filmer" title="Nye filmer" isLoading={current.isLoading} error={current.error}>
+          {current.data && <MovieList movies={current.data.results} />}
+        </Section>
 
-        <section id="skuespillere">
-          <h2>Skuespillere</h2>
-          {people.isLoading && <p>Laster skuespillere...</p>}
-          {people.error && <p>Noe gikk galt: {people.error.message}</p>}
-          {people.data && (
-            <ul>
-              {people.data.results.map((person: any) => (
-                <li key={person.id}>{person.name}</li>
-              ))}
-            </ul>
-          )}
-        </section>
+        <Section id="skuespillere" title="Skuespillere" isLoading={people.isLoading} error={people.error}>
+          {people.data && <PersonList people={people.data.results} />}
+        </Section>
       </main>
+
       <div className="page-spacer" aria-hidden="true"></div>
     </div>
-  )
+  );
 }
 
-export default App
\ No newline at end of file
+export default App;
diff --git a/src/App.txt b/src/App.txt
deleted file mode 100644
index 9ca8e8d..0000000
--- a/src/App.txt
+++ /dev/null
@@ -1,122 +0,0 @@
-import { useState } from 'react'
-import heroImg from './assets/hero.png'
-import reactLogo from './assets/react.svg'
-import viteLogo from './assets/vite.svg'
-import './App.css'
-
-function App() {
-  const [count, setCount] = useState(0)
-
-  return (
-    <>
-      <section id="center">
-        <div className="hero">
-          <img src={heroImg} className="base" width="170" height="179" alt="" />
-          <img src={reactLogo} className="framework" alt="React logo" />
-          <img src={viteLogo} className="vite" alt="Vite logo" />
-        </div>
-        <div>
-          <h1>Get started</h1>
-          <p>
-            Edit <code>src/App.tsx</code> and save to test <code>HMR</code>
-          </p>
-        </div>
-        <button
-          type="button"
-          className="counter"
-          onClick={() => setCount((count) => count + 1)}
-        >
-          Count is {count}
-        </button>
-      </section>
-
-      <div className="ticks"></div>
-
-      <section id="next-steps">
-        <div id="docs">
-          <svg className="icon" role="presentation" aria-hidden="true">
-            <use href="/icons.svg#documentation-icon"></use>
-          </svg>
-          <h2>Documentation</h2>
-          <p>Your questions, answered</p>
-          <ul>
-            <li>
-              <a href="https://vite.dev/" target="_blank">
-                <img className="logo" src={viteLogo} alt="" />
-                Explore Vite
-              </a>
-            </li>
-            <li>
-              <a href="https://react.dev/" target="_blank">
-                <img className="button-icon" src={reactLogo} alt="" />
-                Learn more
-              </a>
-            </li>
-          </ul>
-        </div>
-        <div id="social">
-          <svg className="icon" role="presentation" aria-hidden="true">
-            <use href="/icons.svg#social-icon"></use>
-          </svg>
-          <h2>Connect with us</h2>
-          <p>Join the Vite community</p>
-          <ul>
-            <li>
-              <a href="https://github.com/vitejs/vite" target="_blank">
-                <svg
-                  className="button-icon"
-                  role="presentation"
-                  aria-hidden="true"
-                >
-                  <use href="/icons.svg#github-icon"></use>
-                </svg>
-                GitHub
-              </a>
-            </li>
-            <li>
-              <a href="https://chat.vite.dev/" target="_blank">
-                <svg
-                  className="button-icon"
-                  role="presentation"
-                  aria-hidden="true"
-                >
-                  <use href="/icons.svg#discord-icon"></use>
-                </svg>
-                Discord
-              </a>
-            </li>
-            <li>
-              <a href="https://x.com/vite_js" target="_blank">
-                <svg
-                  className="button-icon"
-                  role="presentation"
-                  aria-hidden="true"
-                >
-                  <use href="/icons.svg#x-icon"></use>
-                </svg>
-                X.com
-              </a>
-            </li>
-            <li>
-              <a href="https://bsky.app/profile/vite.dev" target="_blank">
-                <svg
-                  className="button-icon"
-                  role="presentation"
-                  aria-hidden="true"
-                >
-                  <use href="/icons.svg#bluesky-icon"></use>
-                </svg>
-                Bluesky
-              </a>
-            </li>
-          </ul>
-        </div>
-      </section>
-
-      <div className="ticks"></div>
-      <section id="spacer"></section>
-    </>
-  )
-}
-
-export default App
diff --git a/src/api/tmdb.ts b/src/api/tmdb.ts
index c298826..91d1e69 100644
--- a/src/api/tmdb.ts
+++ b/src/api/tmdb.ts
@@ -3,48 +3,32 @@
 // får satt den opp senere.
 
 // BASE_URL er lenken vi bruker i en API request, her til TMDB
-const TOKEN = import.meta.env.VITE_TMDB_TOKEN // v4 read access token
-const BASE_URL = 'https://api.themoviedb.org/3'
 
-export async function fetchPopularMovies() {
-  const res = await fetch(
-    `${BASE_URL}/movie/popular?language=en-US&page=1`,
-    {
-      headers: {
-        accept: 'application/json',
-        Authorization: `Bearer ${TOKEN}`,
-      },
-    }
-  )
-  if (!res.ok) throw new Error('Klarte ikke hente populære filmer...')
-  return res.json()
+// TOKEN er lagret i .env.local, denne må alle legge til manuelt selv
+import type { Movie, Person, TmdbResponse } from '../types/tmdb';
+
+const TOKEN = import.meta.env.VITE_TMDB_TOKEN; // v4 read access token
+const BASE_URL = 'https://api.themoviedb.org/3';
+
+async function tmdbFetch<T>(path: string, errorMessage: string): Promise<T> {
+  const res = await fetch(`${BASE_URL}${path}`, {
+    headers: {
+      accept: 'application/json',
+      Authorization: `Bearer ${TOKEN}`,
+    },
+  });
+  if (!res.ok) throw new Error(errorMessage);
+  return res.json();
+}
+
+export function fetchPopularMovies(): Promise<TmdbResponse<Movie>> {
+  return tmdbFetch('/movie/popular?language=en-US&page=1', 'Klarte ikke hente populære filmer...');
 }
 
-export async function fetchCurrentMovies() {
-  const res = await fetch(
-    `${BASE_URL}/movie/now_playing?language=en-US&page=1`,
-    {
-      headers: {
-        accept: 'application/json',
-        Authorization: `Bearer ${TOKEN}`,
-      },
-    }
-  )
-  if (!res.ok) throw new Error('Klarte ikke hente aktuelle filmer...')
-  return res.json()
+export function fetchCurrentMovies(): Promise<TmdbResponse<Movie>> {
+  return tmdbFetch('/movie/now_playing?language=en-US&page=1', 'Klarte ikke hente aktuelle filmer...');
 }
-//lagt til popular people
 
-export async function fetchPopularPeople() {
-  const res = await fetch(
-    `${BASE_URL}/person/popular?language=en-US&page=1`,
-    {
-      headers: {
-        accept: 'application/json',
-        Authorization: `Bearer ${TOKEN}`,
-      },
-    }
-  )
-  if (!res.ok) throw new Error('Klarte ikke hente skuespillere...')
-  return res.json()
+export function fetchPopularPeople(): Promise<TmdbResponse<Person>> {
+  return tmdbFetch('/person/popular?language=en-US&page=1', 'Klarte ikke hente skuespillere...');
 }
\ No newline at end of file
diff --git a/src/components/MovieList.tsx b/src/components/MovieList.tsx
new file mode 100644
index 0000000..5b5012e
--- /dev/null
+++ b/src/components/MovieList.tsx
@@ -0,0 +1,15 @@
+import type { Movie } from '../types/tmdb';
+
+type MovieListProps = {
+  movies: Movie[];
+};
+
+export function MovieList({ movies }: MovieListProps) {
+  return (
+    <ul className="movie-list">
+      {movies.map((movie) => (
+        <li key={movie.id}>{movie.title}</li>
+      ))}
+    </ul>
+  );
+}
\ No newline at end of file
diff --git a/src/components/PersonList.tsx b/src/components/PersonList.tsx
new file mode 100644
index 0000000..bd732d1
--- /dev/null
+++ b/src/components/PersonList.tsx
@@ -0,0 +1,15 @@
+import type { Person } from '../types/tmdb';
+
+type PersonListProps = {
+  people: Person[];
+};
+
+export function PersonList({ people }: PersonListProps) {
+  return (
+    <ul className="person-list">
+      {people.map((person) => (
+        <li key={person.id}>{person.name}</li>
+      ))}
+    </ul>
+  );
+}
\ No newline at end of file
diff --git a/src/components/Section.tsx b/src/components/Section.tsx
new file mode 100644
index 0000000..f2f77ce
--- /dev/null
+++ b/src/components/Section.tsx
@@ -0,0 +1,22 @@
+// denne filen eier overskrift + laster/feil-håndtering, tar innholdet som 'children':
+
+import type { ReactNode } from 'react';
+
+type SectionProps = {
+  id: string;
+  title: string;
+  isLoading: boolean;
+  error: Error | null;
+  children: ReactNode;
+};
+
+export function Section({ id, title, isLoading, error, children }: SectionProps) {
+  return (
+    <section id={id}>
+      <h2>{title}</h2>
+      {isLoading && <p>Laster...</p>}
+      {error && <p>Noe gikk galt: {error.message}</p>}
+      {!isLoading && !error && children}
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/hooks/usePopMovies.ts b/src/hooks/usePopMovies.ts
index 621df77..77e859f 100644
--- a/src/hooks/usePopMovies.ts
+++ b/src/hooks/usePopMovies.ts
@@ -1,6 +1,6 @@
 // hooks/useMovies.ts
 import { useQuery } from '@tanstack/react-query'
-import { fetchCurrentMovies, fetchPopularMovies } from '../api/tmdb'
+import { fetchPopularMovies } from '../api/tmdb'
 
 export function useMovies() {
   return useQuery({
diff --git a/src/types/tmdb.ts b/src/types/tmdb.ts
new file mode 100644
index 0000000..843b689
--- /dev/null
+++ b/src/types/tmdb.ts
@@ -0,0 +1,21 @@
+export type Movie = {
+  id: number;
+  title: string;
+  poster_path: string | null;
+  vote_average: number;
+  release_date: string;
+};
+
+export type Person = {
+  id: number;
+  name: string;
+  profile_path: string | null;
+};
+
+// TMDB pakker alltid svaret i samme struktur, uansett hva results inneholder
+export type TmdbResponse<T> = {
+  page: number;
+  results: T[];
+  total_pages: number;
+  total_results: number;
+};
\ No newline at end of file