diff --git a/src/templates/wishlist_view.html b/src/templates/wishlist_view.html
index da3b626..a156d13 100644
--- a/src/templates/wishlist_view.html
+++ b/src/templates/wishlist_view.html
@@ -15,11 +15,15 @@
             }
 
             * {
-                transition: height 1s !important;
                 font-family: "Fira Code", "Fira Mono", "Roboto Mono",
                     "Lucida Console", "Courier New", monospace;
             }
 
+            main {
+                max-width: 40rem;
+                margin: auto;
+            }
+
             h1,
             h3 {
                 text-align: center;
@@ -27,9 +31,11 @@
             }
 
             ul {
+                width: 100%;
                 display: flex;
-                flex-direction: row;
+                flex-direction: column;
                 list-style: none;
+                align-content: flex-start;
                 padding: 0 1em;
                 margin: 1em auto;
                 flex-wrap: wrap;
@@ -37,18 +43,17 @@
             }
 
             li {
-                max-width: 13rem;
-                width: 13em;
+                width: auto;
                 margin: 0.2em;
                 padding: 1em;
 
                 order: 0;
-                border-color: #2c2c2c;
+                border-color: #aaa;
                 border-radius: 4px;
                 border-width: 1px;
                 border-style: solid;
                 display: flex;
-                flex-direction: column;
+                flex-direction: row;
                 justify-content: space-between;
                 align-items: center;
                 align-self: flex-start;
@@ -111,7 +116,7 @@
             .reserve-button {
                 color: white;
                 background: transparent;
-                border: white solid 1px;
+                border: #2c2c2c solid 1px;
                 padding: 0.8em 1em 1em 1em;
                 cursor: pointer;
                 border-radius: 4px;
@@ -145,6 +150,7 @@
 
             .details {
                 height: 0;
+                transition: height 1s !important;
                 overflow: hidden;
             }
 
@@ -157,16 +163,85 @@
                 cursor: pointer;
                 user-select: none;
             }
+
+            .button {
+                color: #ccc;
+                border-radius: 5px;
+                padding: 6pt;
+                box-shadow: 4px 4px 15px #555, 2px 2px 13px #333 inset;
+                transition: box-shadow 0.3s;
+            }
+
+            .button:hover {
+                box-shadow: 4px 4px 13px #888, 2px 2px 13px #333 inset;
+            }
+
+            .button:active {
+                box-shadow: 1px 1px 3px #888, 2px 2px 3px #333 inset;
+                transition: box-shadow 0.1s !important;
+            }
+            
+            .unselectable {
+                -webkit-touch-callout: none;
+                -webkit-user-select: none;
+                -khtml-user-select: none;
+                -moz-user-select: none;
+                -ms-user-select: none;
+                user-select: none;
+            }
         </style>
     </head>
 
     <body>
+    <main>
         <h1>{{ wishlist.config.title }}</h1>
 
-        <p>ToDo: Erklärung</p>
-
+        <div id="welcome">
+            Bitte Name eingeben um Wunschliste zu sehen. Dieser wird zu deinen Reservierungen hinterlegt.
+            <br />
+            <input id="name" name="name" type="text" placeholder="Dein Name" /> <span id="register-btn"
+                class="button unselectable">Wunschliste
+                anzeigen</span>
+        </div>
+        {% if wishlist.items.items()|selectattr("reservation")|list %}
+        <h3>Deine Reservierungen</h3>
         <ul>
-            {% for item_id, item in wishlist.items.items() %}
+            {% for item_id, item in wishlist.items.items() if item.reservation %}
+            <li class="{{ 'reserved-item' if item.reservation else '' }}">
+                {% if item.image %}<img src="{{ item.image }}" alt="{{ item.name }}" />{% endif %}
+                <div class="item-name">{{ item.name }}</div>
+                <form method="POST" action="/reservation/update">
+                    <input type="hidden" name="wishlist_id" value="{{ wishlist.config.id }}" />
+                    <input type="hidden" name="item_id" value="{{ item.id }}" />
+                    <input type="hidden" name="reserved" value="{{ 'false' if item.reservation else 'true' }}" />
+                    <input type="hidden" name="name" value="" />
+                    {% if item.reservation %}
+                    <button type="submit" class="reserve-button">
+                        Reservierung aufheben
+                    </button>
+                    {% else %}
+                    <button type="submit" class="reserve-button">
+                        Reservieren
+                    </button>
+                    {% endif %}
+                </form>
+                <div>
+                    <p class="price">Ca. {{ "%.2f"|format(item.price) }}€</p>
+                    <div class="details-button" onclick="toggleDetails('details-{{ item_id }}')">
+                        Mehr Details
+                    </div>
+                </div>
+                <div id="details-{{ item_id }}" class="details">
+                    <p>{{ item.description }}</p>
+                    <a href="{{ item.shop }}" target="_blank">Shop Link</a>
+                </div>
+            </li>
+            {% endfor %}
+        </ul>
+        {% endif %}
+        <h3>Verfügbare Geschenke</h3>
+        <ul>
+                {% for item_id, item in wishlist.items.items() if not item.reservation %}
             <li class="{{ 'reserved-item' if item.reservation else '' }}">
                 {% if item.image %}<img
                     src="{{ item.image }}"
@@ -188,7 +263,7 @@
                     <input type="hidden" name="name" value="" />
                     {% if item.reservation %}
                     <button type="submit" class="reserve-button">
-                        Unreserve
+                        Reservierung aufheben
                     </button>
                     {% else %}
                     <button type="submit" class="reserve-button">
@@ -212,6 +287,7 @@
             </li>
             {% endfor %}
         </ul>
+    </main>
 
         <script>
             function toggleDetails(id) {
