diff --git a/app/Http/Controllers/WebController.php b/app/Http/Controllers/WebController.php
index 5a39e9d..f995902 100644
--- a/app/Http/Controllers/WebController.php
+++ b/app/Http/Controllers/WebController.php
@@ -2,6 +2,7 @@
 
 namespace App\Http\Controllers;
 
+use App\Models\Shelf;
 use Illuminate\Foundation\Bus\DispatchesJobs;
 use Illuminate\Routing\Controller as BaseController;
 use Illuminate\Foundation\Validation\ValidatesRequests;
@@ -15,4 +16,10 @@ public function index()
     {
         return view('app.pages.index');
     }
+
+    public function read($shelf_slug){
+        $shelf = Shelf::where('slug', '=', $shelf_slug)->first();
+
+        return view('app.pages.read')->withShelf($shelf);
+    }
 }
diff --git a/optional.md b/optional.md
index eab2e0b..537a04c 100644
--- a/optional.md
+++ b/optional.md
@@ -10,5 +10,9 @@ Use this space to write your solution:
 
 ```
 
+A new table called book_meta_data with the fields meta_id, book_id, name, value.
+It would have a many to one relation with the books table with any amount of name => value records.
+For now every book has there names published_at, author and cover. It leaves open the option to add
+more meta data names in future as meta data suggests you can attach any amount of data to books.
 
-```
\ No newline at end of file
+```
diff --git a/resources/views/app/pages/read.blade.php b/resources/views/app/pages/read.blade.php
new file mode 100644
index 0000000..8d256f5
--- /dev/null
+++ b/resources/views/app/pages/read.blade.php
@@ -0,0 +1,47 @@
+@extends('layouts.app')
+
+<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
+</script>
+
+<script>
+    $(document).on("click", "a.book-link", function(){
+        var bookID = $(this).attr('data-id');
+
+        $.ajax({
+            type:'GET',
+            url:'/api/metadata/read/all',
+            data:'_token = <?php echo csrf_token() ?>',
+            success:function(data) {
+                if(data[bookID] !== undefined){
+                    console.log(data[bookID]);
+                    
+                    $('dl#metadata dd#published_at').text( data[bookID].published_at );
+                    $('dl#metadata dd#author').text( data[bookID].author );
+                    $('dl#metadata dd#cover').html( '<img src='+data[bookID].cover+' height="100">' );
+                }
+            }
+        });
+    });
+</script>
+
+@section('content')
+    <div class="row">
+        <div class="col-12">
+            <h1>{{ $shelf->name }}</h1>
+            <dl id="metadata">
+                <dt>Published</dt>
+                <dd id="published_at"></dd>
+                <dt>Author</dt>
+                <dd id="author"></dd>
+                <dt>Cover</dt>
+                <dd id="cover"></dd>
+            </dl>
+
+            <ul class="content-navigation content-navigation-icon">
+                @foreach($shelf->books as $book)
+                <li><a href="#" data-id="{{ $book->book_id }}" class="book-link">{{ $book->name }} ({{ $book->isbn }})</a></li>
+                @endforeach
+            </ul>
+        </div>
+    </div>
+@endsection
diff --git a/routes/web.php b/routes/web.php
index 6849b28..b87c132 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -11,4 +11,8 @@
 |
 */
 
-Route::get('/', ['as'=> 'welcome','uses' => 'WebController@index']);
\ No newline at end of file
+Route::get('/', ['as'=> 'welcome','uses' => 'WebController@index']);
+
+Route::get('shelf/{shelf_slug}/read/',
+    ['as'=> 'read','uses' => 'WebController@read'])
+    ->where('shelf_slug', '[\w\d\-\_]+');