diff --git a/resources/views/tenant/theme.blade.php b/resources/views/tenant/theme.blade.php
index 9cff2dd..9f1aa6a 100644
--- a/resources/views/tenant/theme.blade.php
+++ b/resources/views/tenant/theme.blade.php
@@ -1,43 +1,53 @@
 @extends('layout/template')
 
 @section('content')
-    <div class="alert-warning alert" style="margin-top: 20px;">
-        This is just for functional testing, need to be redesign.
+    <div class="row" style="margin-top: 20px;">
+        <div class="col-md-12" style="margin-bottom: 10px;">
+            <h1>Themes</h1>
+            <p>With the Themes you can decide how your overview Page and your Gallery Page looks like.</p>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-md-12">
+            <h2>Tenant Overview</h2>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-md-12">
+            @foreach($themes as $theme)
+            <div class="card" style="max-width: 400px; float: left;margin-right: 20px;">
+                <img class="card-img-top" src="/s/theme/tenant/{{ $theme["name"] }}.png" alt="Card image cap">
+                <div class="card-body">
+                    <h5 class="card-title">{{ $theme["name"] }}</h5>
+                    <a href="/s/theme/set?name={{ $theme->name }}" class="btn btn-primary">Activate</a>
+                    <a href="/{{ $current_tenant->url }}?theme={{ $theme->name }}" target="_blank" class="btn btn-outline-primary">Preview</a>
+                </div>
+            </div>
+            @endforeach
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-md-12">
+            <h2>Gallery Overview</h2>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-md-12">
+            @foreach($gallery_themes as $theme)
+                <div class="card" style="max-width: 400px; float: left;margin-right: 20px;">
+                    <img class="card-img-top" src="/s/theme/gallery/{{ $theme["name"] }}.png" alt="Card image cap">
+                    <div class="card-body">
+                        <h5 class="card-title">{{ $theme["name"] }}</h5>
+                        <a href="/s/theme/set?name={{ $theme->name }}" class="btn btn-primary">Activate</a>
+                        @if(!is_null($gallery))
+                            <a href="/{{ $current_tenant->url }}/{{ $gallery->url }}?theme={{ $theme->name }}" target="_blank" class="btn btn-outline-primary">Preview</a>
+                        @endif
+                    </div>
+                </div>
+            @endforeach
+        </div>
     </div>
-    <h1>Themes Tenant</h1>
-    <table class="table table-striped">
-        <tr>
-            <th>Name</th>
-            <th>Vorschau</th>
-            <th>Action</th>
-        </tr>
-        @foreach($themes as $theme)
-            <tr>
-                <td>{{ $theme->name }}</td>
-                <td><a target="_blank" href="/{{ $current_tenant->url }}?theme={{ $theme->name }}">Vorschau</a></td>
-                <td><a href="/s/theme/set?name={{ $theme->name }}">Auswählen</a></td>
-            </tr>
-        @endforeach
-    </table>
-    <h1>Themes Gallery</h1>
-    <table class="table table-striped">
-        <tr>
-            <th>Name</th>
-            <th>Vorschau</th>
-            <th>Action</th>
-        </tr>
-        @foreach($gallery_themes as $theme)
-            <tr>
-                <td>{{ $theme->name }}</td>
-                <td>
-                    @if(!is_null($gallery))
-                        <a target="_blank" href="/{{ $current_tenant->url }}/{{ $gallery->url }}?theme={{ $theme->name }}">Vorschau</a>
-                    @endif
-                </td>
-                <td><a href="/s/theme/set-gallery?name={{ $theme->name }}">Auswählen</a></td>
-            </tr>
-        @endforeach
-    </table>
 
 @endsection
 
diff --git a/resources/views/themes/gallery/gallery/image.png b/resources/views/themes/gallery/gallery/image.png
new file mode 100644
index 0000000..06defbf
Binary files /dev/null and b/resources/views/themes/gallery/gallery/image.png differ
diff --git a/resources/views/themes/gallery/gallery/settings.json b/resources/views/themes/gallery/gallery/settings.json
new file mode 100644
index 0000000..7cf19cf
--- /dev/null
+++ b/resources/views/themes/gallery/gallery/settings.json
@@ -0,0 +1,9 @@
+{
+    "usesSize": {
+        "pixel": true,
+        "small": false,
+        "medium": false,
+        "big": true
+    },
+    "public": true
+}
diff --git a/resources/views/themes/gallery/kuvia-gallery/image.png b/resources/views/themes/gallery/kuvia-gallery/image.png
new file mode 100644
index 0000000..adf8104
Binary files /dev/null and b/resources/views/themes/gallery/kuvia-gallery/image.png differ
diff --git a/resources/views/themes/gallery/kuvia-gallery/settings.json b/resources/views/themes/gallery/kuvia-gallery/settings.json
new file mode 100644
index 0000000..7cf19cf
--- /dev/null
+++ b/resources/views/themes/gallery/kuvia-gallery/settings.json
@@ -0,0 +1,9 @@
+{
+    "usesSize": {
+        "pixel": true,
+        "small": false,
+        "medium": false,
+        "big": true
+    },
+    "public": true
+}
diff --git a/resources/views/themes/tenant/default/settings.json b/resources/views/themes/tenant/default/settings.json
new file mode 100644
index 0000000..a2a0b96
--- /dev/null
+++ b/resources/views/themes/tenant/default/settings.json
@@ -0,0 +1,9 @@
+{
+    "usesSize": {
+        "pixel": false,
+        "small": false,
+        "medium": false,
+        "big": false
+    },
+    "public": false
+}
diff --git a/resources/views/themes/tenant/kuvia-blog/image.png b/resources/views/themes/tenant/kuvia-blog/image.png
new file mode 100644
index 0000000..ca52ffd
Binary files /dev/null and b/resources/views/themes/tenant/kuvia-blog/image.png differ
diff --git a/resources/views/themes/tenant/kuvia-blog/settings.json b/resources/views/themes/tenant/kuvia-blog/settings.json
new file mode 100644
index 0000000..77c5560
--- /dev/null
+++ b/resources/views/themes/tenant/kuvia-blog/settings.json
@@ -0,0 +1,9 @@
+{
+    "usesSize": {
+        "pixel": false,
+        "small": false,
+        "medium": false,
+        "big": true
+    },
+    "public": true
+}
diff --git a/resources/views/themes/tenant/kuvia-gallery/image.png b/resources/views/themes/tenant/kuvia-gallery/image.png
new file mode 100644
index 0000000..4a2c04c
Binary files /dev/null and b/resources/views/themes/tenant/kuvia-gallery/image.png differ
diff --git a/resources/views/themes/tenant/kuvia-gallery/settings.json b/resources/views/themes/tenant/kuvia-gallery/settings.json
new file mode 100644
index 0000000..8235b43
--- /dev/null
+++ b/resources/views/themes/tenant/kuvia-gallery/settings.json
@@ -0,0 +1,9 @@
+{
+    "usesSize": {
+        "pixel": false,
+        "small": false,
+        "medium": true,
+        "big": false
+    },
+    "public": true
+}