diff --git a/it1/bibliotek/bibliotek.css b/it1/bibliotek/bibliotek.css
index c6abda1..7f9763f 100644
--- a/it1/bibliotek/bibliotek.css
+++ b/it1/bibliotek/bibliotek.css
@@ -3,8 +3,11 @@
     margin: 2vh;
 }
 
-#content > * {
+.top {
     margin-top: 9vh;
+}
+
+.middle {
     margin-left: 13vw;
     margin-right: 42.0vw;
 }
@@ -13,10 +16,6 @@
     margin-top: 1vh;
 }
 
-#form {
-    width: 25%;
-}
-
 #form > div > * {
     margin-bottom: 1vh;
 }
diff --git a/it1/bibliotek/bibliotek.js b/it1/bibliotek/bibliotek.js
index 8c918f7..593bf21 100644
--- a/it1/bibliotek/bibliotek.js
+++ b/it1/bibliotek/bibliotek.js
@@ -1,16 +1,44 @@
 
+var firestore = firebase.firestore
+
+var list = function() {
+    // db.collection('bibliotek').doc("8ZBX5gmIaRwQBCjgLLg0").get().then(function(doc){console.log(doc.data())})
+    // db.collection('bibliotek').get().then(function(query){query.forEach(function(doc){console.log(doc.data())})})
+    db.collection('bibliotek')
+        .withConverter(bookConverter)
+        .get()
+        .then(function(query) {
+            html = ''
+            query.forEach(function(doc) {
+                book = doc.data()
+                html += book.toHtml()
+            })
+            $('#books').html(html)
+        })
+        .catch(function(error) {
+            $('#books').html('<h3>Kunne ikke hente bøker!</h3><p>'+error+'</p>')
+            $('#books').css('color', 'red')
+        })
+}
+
 var add = function() {
     let millis = Date.parse($('#published')[0].value)
-    db.collection("bibliotek").add({
+    db.collection("bibliotek").add({ // withConverter ?
         tittel: $('#title')[0].value,
         forfatter: $('#author')[0].value,
         forlag: $('#publisher')[0].value,
         terningkast: $('#rating')[0].value,
-        utgitt: new firebase.firestore.Timestamp(millis/1000, 0)
+        utgitt: new firestore.Timestamp(millis/1000, 0)
     }).then(function() {
-        $('#status').html('<p style="color: green;">La til bok '+$('#title')[0].value+'!</p>')
+        $('#status').html('<p>La til bok '+$('#title')[0].value+'!</p>')
+        $('#status').css('color', 'green')
     }).catch(function() {
-        $('#status').html('<p style="color: red;">Problem med å legge til bok '+$('#title')[0].value+'!</p>')
+        $('#status').html('<p>Problem med å legge til bok '+$('#title')[0].value+'!</p>')
+        $('#status').css('color', 'red')
     })
 }
 
+$(document).ready(function() {
+    list()
+})
+
diff --git a/it1/bibliotek/bok.js b/it1/bibliotek/bok.js
new file mode 100644
index 0000000..a769e24
--- /dev/null
+++ b/it1/bibliotek/bok.js
@@ -0,0 +1,37 @@
+
+class Book {
+    constructor(title, author, publisher, rating, published) {
+        this.title = title
+        this.author = author
+        this.publisher = publisher
+        this.rating = rating
+        this.published = published.toDate()
+    }
+    toString() {
+        return this.title+' av '+this.author+', ternignkast '+this.rating+', utgitt '+this.published.toString().slice(0,15)+', forlag; '+this.publisher
+    }
+    toHtml() {
+        let span = function(string, color='red') {
+            return '<span style="color: '+color+'">'+string+'</span>'
+        }
+        return '<p>'+span(this.title)+' av '+span(this.author)+', ternignkast '+span(this.rating)+
+        ', utgitt '+span(this.published.toString().slice(0,15), 'green')+', forlag; '+span(this.publisher, 'yellow')+'</p>'
+    }
+}
+
+bookConverter = {
+    toFirestore: function(book) {
+        return {
+            title: book.title,
+            author: book.author,
+            publisher: book.publisher,
+            rating: book.rating,
+            published: book.published
+        }
+    },
+    fromFirestore: function(snapshot, options) {
+        const data = snapshot.data(options)
+        return new Book(data.tittel, data.forfatter, data.forlag, data.terningkast, data.utgitt)
+    }
+}
+
diff --git a/it1/bibliotek/index.html b/it1/bibliotek/index.html
index cb70be7..94638e0 100644
--- a/it1/bibliotek/index.html
+++ b/it1/bibliotek/index.html
@@ -9,11 +9,12 @@
     <script src="https://www.gstatic.com/firebasejs/7.11.0/firebase-firestore.js"></script>
     <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
     <script type="text/javascript" src="/it1/init-firebase.js"></script>
+    <script type="text/javascript" src="/it1/bibliotek/bok.js"></script>
 </head>
 <body>
     <script type="text/javascript" id="navbar" src="/it1/navbar/navbar.js"></script>
-    <div id="content">
-        <form action="#" method="POST" id="form">
+    <div id="content" class="middle">
+        <form action="#" method="POST" id="form" class="top">
             <div class="form-group">
                 <div class="row">
                     <div class="col"><input type="name" class="form-control" id="title" placeholder="Tittel"></div>
@@ -34,7 +35,10 @@
             <a type="submit" class="btn btn-primary" href="javascript: add()">Legg til</a>
         </form>
         <div id="status">
-            <p></p>
+            <p>&nbsp;</p>
+        </div>
+        <a type="submit" class="btn btn-primary" href="javascript: list()">Hent bøker</a>
+        <div id="books">
         </div>
     </div>
     <script type="text/javascript" src="/it1/bibliotek/bibliotek.js"></script>