diff --git a/i18n/de.json b/i18n/de.json
index 6584fae..1028393 100644
--- a/i18n/de.json
+++ b/i18n/de.json
@@ -8,6 +8,7 @@
   "LABEL_CREATOR_LAST_NAME": "Nachname",
   "LABEL_CREATOR_REMOVE": "Autor entfernen",
   "LABEL_DESCRIPTION": "Zusammenfassung",
+  "LABEL_IMAGE_URL": "Vorschaubild URL",
   "LABEL_KEYWORDS": "Schlagworte",
   "LABEL_KEYWORDS_PLACEHOLDER": "Komma getrennte Liste von Schlagworten",
   "LABEL_LANGUAGE": "Sprache",
@@ -25,5 +26,6 @@
   "LABEL_STATUS_INCOMPLETE": "Unvollständig",
   "LABEL_STATUS_PUBLISHED": "Veröffentlicht",
   "LABEL_SUBJECT": "Fach",
-  "LABEL_TITLE": "Titel"
+  "LABEL_TITLE": "Titel",
+  "LABEL_URL": "URL"
 }
\ No newline at end of file
diff --git a/metadata-generator.html b/metadata-generator.html
index 9cfb4e0..610cd67 100644
--- a/metadata-generator.html
+++ b/metadata-generator.html
@@ -52,8 +52,14 @@
           margin-bottom: 120px;
       }
 
+      @media (max-width: 960px) {
+          .main {
+              width: 100%;
+          }
+      }
+
       .right {
-          background-color: #ffffff;
+          background-color: #000000;
           float: left;
           width: 20%;
           padding: 15px;
@@ -96,6 +102,15 @@
             <div class="invalid-feedback" data-i18n="LABEL_MANDATORY_FIELD">Pflichtfeld</div>
           </div>
         </div>
+        <div class="form-group row">
+          <label for="inputUrl" class="col-sm-2 col-form-label" data-i18n="LABEL_URL">URL</label>
+          <div class="col-sm-10">
+            <input type="url" class="form-control" id="inputUrl" placeholder="URL"
+                   data-i18n-placeholder="LABEL_URL" value="" required>
+            <div class="valid-feedback"></div>
+            <div class="invalid-feedback" data-i18n="LABEL_MANDATORY_FIELD">Pflichtfeld</div>
+          </div>
+        </div>
         <div class="form-group row">
           <label for="inputTitle" class="col-sm-2 col-form-label" data-i18n="LABEL_TITLE">Titel</label>
           <div class="col-sm-10">
@@ -109,8 +124,7 @@
           <label for="inputDescription" class="col-sm-2 col-form-label"
                  data-i18n="LABEL_DESCRIPTION">Beschreibung</label>
           <div class="col-sm-10">
-            <textarea class="form-control" id="inputDescription" placeholder="Beschreibung"
-                      data-i18n-placeholder="LABEL_DESCRIPTION" value=""></textarea>
+            <textarea class="form-control" id="inputDescription" placeholder="Beschreibung" data-i18n-placeholder="LABEL_DESCRIPTION"></textarea>
           </div>
         </div>
         <div class="form-group row">
@@ -123,9 +137,7 @@
         <div class="form-group row">
           <label for="inputResourceType" class="col-sm-2 col-form-label" data-i18n="LABEL_LEARNINGRESOURCETYPE">Materialart</label>
           <div class="col-sm-10">
-            <select style="background: #F1F6DF; color: #0A1F40;" class="custom-select" id="inputResourceType" required>
-              <option value="" data-i18n="LABEL_LEARNINGRESOURCETYPE_CHOOSE" selected>Wähle eine Materialart ...
-              </option>
+            <select data-style="input-dropdown" data-width="100%" class="selectpicker" id="inputResourceType" data-i18n-title="LABEL_LEARNINGRESOURCETYPE_CHOOSE" required>
             </select>
             <div class="valid-feedback"></div>
             <div class="invalid-feedback" data-i18n="LABEL_MANDATORY_FIELD">Pflichtfeld</div>
@@ -145,7 +157,7 @@
         <div class="form-group row">
           <label for="inputLanguage" class="col-sm-2 col-form-label" data-i18n="LABEL_LANGUAGE">Sprache</label>
           <div class="col-sm-10">
-            <select style="background: #F1F6DF; color: #0A1F40;" class="custom-select" id="inputLanguage" required>
+            <select data-style="input-dropdown" data-width="100%" class="selectpicker" id="inputLanguage" required>
             </select>
             <div class="valid-feedback"></div>
             <div class="invalid-feedback">Pflichtfeld</div>
@@ -204,6 +216,12 @@
             </select>
           </div>
         </div>
+        <div class="form-group row">
+          <label for="inputImage" class="col-sm-2 col-form-label" data-i18n="LABEL_IMAGE_URL">Vorschaubild URL</label>
+          <div class="col-sm-10">
+            <input type="url" class="form-control" id="inputImage" placeholder="Vorschaubild URL" data-i18n-placeholder="LABEL_IMAGE_URL" value="">
+          </div>
+        </div>
 
         <button type="button" onclick="generate()" class="btn btn-primary"><i class="fa fa-arrow-down"></i> Generieren
         </button>
@@ -463,18 +481,22 @@
   }
 
   function generate() {
+    const creators = getCreators()
     const inputSourceOrganization = document.getElementById("inputSourceOrganization");
     const selectedSubjects = $('#inputSubjectOf').val();
     var meta = "---\n"
+    meta += "id: \"" + document.getElementById("inputUrl").value + "\"\n"
     meta += "name: \"" + document.getElementById("inputTitle").value + "\"\n"
-    meta += "creator:\n"
-    meta += getCreators().map((c) => "  - name: \"" + c.name + "\"" + (c.creatorId ? "\n    id: \"" + c.creatorId + "\"" : "")).join("\n") + "\n"
+    if (creators.length > 0) {
+      meta += "creator:\n"
+      meta += creators.map((c) => "  - name: \"" + c.name + "\"" + (c.creatorId ? "\n    id: \"" + c.creatorId + "\"" : "")).join("\n") + "\n"
+    }
     if (document.getElementById("inputTags").value) {
       meta += "keywords:\n"
       meta += splitKeywords(document.getElementById("inputTags").value)
     }
     meta += "description: \"" + document.getElementById("inputDescription").value + "\"\n"
-    meta += "inLanguage: \"" + document.getElementById("inputLanguage").value + "\"\n"
+    meta += "inLanguage:\n" + "  - \"" + document.getElementById("inputLanguage").value + "\"\n"
     if (inputSourceOrganization.value) {
       meta += "sourceOrganization:\n"
       meta += "  - name: \"" + inputSourceOrganization.options[inputSourceOrganization.selectedIndex].innerHTML + "\"\n"
@@ -484,9 +506,11 @@
     if (selectedSubjects.length > 0) {
       meta += "about:\n" + selectedSubjects.map((s) => "  - id: \"" + s + "\"").join("\n") + "\n"
     }
-    meta += "license: \"" + document.getElementById("licenseUrl").value + "\"\n"
-    meta += "thumbnailUrl: http://placehold.it/100x100\n"
-    meta += "learningResourceType: \"" + document.getElementById("inputResourceType").value + "\"\n"
+    meta += "license:\n" + "  id: \"" + document.getElementById("licenseUrl").value + "\"\n"
+    if (document.getElementById("inputImage").value) {
+      meta += "image: \"" + document.getElementById("inputImage").value + "\"\n"
+    }
+    meta += "learningResourceType:\n" + "  - id: \"" + document.getElementById("inputResourceType").value + "\"\n"
     document.getElementById("comment").value = meta;
   }