diff --git a/pom.xml b/pom.xml
index 4ace804..81ce4a5 100644
--- a/pom.xml
+++ b/pom.xml
@@ -98,7 +98,7 @@
             <artifactId>myfaces-impl</artifactId>
             <version>2.3.3</version>
         </dependency>
-        
+
         <!--Annotations-->
         <dependency>
             <groupId>org.projectlombok</groupId>
@@ -125,6 +125,28 @@
             <version>20180813</version>
         </dependency>
 
+        <dependency>
+            <groupId>javax.xml.bind</groupId>
+            <artifactId>jaxb-api</artifactId>
+            <version>2.2.11</version>
+        </dependency>
+        <dependency>
+            <groupId>com.sun.xml.bind</groupId>
+            <artifactId>jaxb-core</artifactId>
+            <version>2.2.11</version>
+        </dependency>
+        <dependency>
+            <groupId>com.sun.xml.bind</groupId>
+            <artifactId>jaxb-impl</artifactId>
+            <version>2.2.11</version>
+        </dependency>
+        <dependency>
+            <groupId>javax.activation</groupId>
+            <artifactId>activation</artifactId>
+            <version>1.1.1</version>
+        </dependency>
+
+
         <dependency>
             <groupId>org.mariadb.jdbc</groupId>
             <artifactId>mariadb-java-client</artifactId>
diff --git a/src/main/java/de/hsel/itech/jsf/BookInfo.java b/src/main/java/de/hsel/itech/jsf/BookBean.java
similarity index 70%
rename from src/main/java/de/hsel/itech/jsf/BookInfo.java
rename to src/main/java/de/hsel/itech/jsf/BookBean.java
index b29cf27..8a574bb 100644
--- a/src/main/java/de/hsel/itech/jsf/BookInfo.java
+++ b/src/main/java/de/hsel/itech/jsf/BookBean.java
@@ -1,30 +1,28 @@
 package de.hsel.itech.jsf;
 
-import de.hsel.itech.db.Database;
 import de.hsel.itech.db.pojo.Author;
 import de.hsel.itech.db.pojo.Book;
+import lombok.Getter;
+import lombok.Setter;
 
 import javax.faces.bean.ManagedBean;
+import javax.faces.bean.ManagedProperty;
 import javax.faces.bean.ViewScoped;
 import java.util.ArrayList;
 import java.util.List;
 
-//JSF Bean for bookinfo
-@ManagedBean(name="bookInfo")
+@ManagedBean
 @ViewScoped
-public class BookInfo {
+public class BookBean {
+
+    @Getter
+    @Setter
+    @ManagedProperty("#{categoryBean.book}")
     private Book book;
 
-    public BookInfo(){
-        book = Database.getInstance().getBooks().get(2);
-    }
+    public String select() {
 
-    public Book getBook(){
-        return book;
-    }
-
-    public void setBook(Book book){
-        this.book = book;
+        return "/bookinfo.jsf";
     }
 
     public String getPrice(){
diff --git a/src/main/java/de/hsel/itech/jsf/CategoryBean.java b/src/main/java/de/hsel/itech/jsf/CategoryBean.java
index 7c9d444..325fbf8 100644
--- a/src/main/java/de/hsel/itech/jsf/CategoryBean.java
+++ b/src/main/java/de/hsel/itech/jsf/CategoryBean.java
@@ -3,6 +3,8 @@ package de.hsel.itech.jsf;
 import de.hsel.itech.db.Database;
 import de.hsel.itech.db.pojo.Book;
 import de.hsel.itech.db.pojo.Category;
+import lombok.Getter;
+import lombok.Setter;
 
 import javax.faces.bean.ManagedBean;
 import javax.faces.bean.ViewScoped;
@@ -13,15 +15,21 @@ import java.util.List;
 @ViewScoped
 public class CategoryBean implements Serializable {
 
+    @Getter
+    @Setter
     private Category category;
 
-    public Category getCategory() {
-        return category;
+    @Getter
+    @Setter
+    private Book book;
+
+    public String select() {
+        return "";
     }
 
-    public void setCategory(Category category) {
-        this.category = category;
-
+    public String back() {
+        category = null;
+        return "";
     }
 
     public List<Category> getCategories() {
diff --git a/src/main/webapp/category.xhtml b/src/main/webapp/category.xhtml
index 42dd909..b220064 100644
--- a/src/main/webapp/category.xhtml
+++ b/src/main/webapp/category.xhtml
@@ -5,23 +5,59 @@
         xmlns:h="http://xmlns.jcp.org/jsf/html"
         xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
         xmlns:f="http://xmlns.jcp.org/jsf/core">
-<h:head>
-    <title>Amazon light</title>
-</h:head>
+<f:view>
 
-<h:body>
+    <ui:composition template="template.xhtml">
+
+        <ui:define name="content">
+            <h:form>
+                <h:commandLink action="#{categoryBean.back}" value="zurück zur Auswahl"
+                               rendered="#{not empty categoryBean.category}"/>
+
+                <h:panelGroup layout="block" styleClass="m-row" rendered="#{empty categoryBean.category}">
+                    <h1 class="m-text-center">Kategorien</h1>
+                    <ui:repeat value="#{categoryBean.categories}" var="category">
+                        <div class="m-col-t-3">
+                            <h:commandLink action="#{categoryBean.select}">
+                                <figure class="m-figure">
+                                    <f:setPropertyActionListener target="#{categoryBean.category}" value="#{category}"/>
+                                    <h:graphicImage value="https://source.unsplash.com/#{category.image}/900x900"/>
+                                    <figcaption class="m-text-center">
+                                        #{category.name}
+                                    </figcaption>
+                                </figure>
+                            </h:commandLink>
+                        </div>
+                    </ui:repeat>
+                </h:panelGroup>
+
+                <h:panelGroup layout="block" styleClass="m-row" rendered="#{not empty categoryBean.category}">
+                    <h1 class="m-text-center">#{categoryBean.category.name}</h1>
+                    <!--<h:graphicImage value="https://source.unsplash.com/#{categoryBean.category.image}/100x100"/>-->
+
+                    <ui:repeat value="#{categoryBean.books}" var="book">
+                        <div class="m-col-t-3">
+                            <h:commandLink action="#{bookBean.select}">
+                                <figure class="m-figure">
+                                    <f:setPropertyActionListener target="#{categoryBean.book}" value="#{book}"/>
+                                    <h:graphicImage value="https://source.unsplash.com/#{book.image}/900x900"/>
+                                    <figcaption class="m-text-center">
+                                        #{book.title}
+                                    </figcaption>
+                                </figure>
+                            </h:commandLink>
+                        </div>
+
+                    </ui:repeat>
+
+                </h:panelGroup>
+            </h:form>
 
 
-    <ui:repeat value="#{categoryBean.categories}" var="category">
-        <h:outputText value="#{category.name}"/><br/>
-    </ui:repeat>
+        </ui:define>
 
+    </ui:composition>
 
-    <ui:repeat value="#{categoryBean.books}" var="book" rendered="not empty #{categoryBean.category}">
-        <h:outputText value="#{book.title}"/>
-        <h:graphicImage value="https://source.unsplash.com/#{book.image}/150x150"/>
-        <br/>
-    </ui:repeat>
-</h:body>
+</f:view>
 
 </html>
\ No newline at end of file
diff --git a/src/main/webapp/template.xhtml b/src/main/webapp/template.xhtml
index af9e554..387b93e 100644
--- a/src/main/webapp/template.xhtml
+++ b/src/main/webapp/template.xhtml
@@ -74,7 +74,9 @@
     </nav>
 </header>
 
-<ui:insert name="content"/>
+<div class="m-container">
+    <ui:insert name="content"/>
+</div>
 
 <footer>
     <nav>