diff --git a/logo.svg b/logo.svg
new file mode 100644
index 0000000..e6bf88a
--- /dev/null
+++ b/logo.svg
@@ -0,0 +1,22 @@
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     viewBox="20 19 520 235">
+    <defs>
+        <style>
+            .cls-1{fill:none;}.cls-2{clip-path:url(#clip-path);}.cls-3{fill:#0d2b5a;}.cls-4{fill:#009ee3;}.cls-5{fill:#9c22aa;}.cls-6{fill:#f0801c;}.cls-7{fill:#e3000f;}.cls-8{fill:#4bb696;}
+        </style>
+        <clipPath id="clip-path">
+            <rect class="cls-1" x="23.21" y="20.51" width="488.12" height="232.09"/>
+        </clipPath>
+    </defs>
+    <g class="cls-2">
+        <path class="cls-3"
+              d="M511.33,102.41H493.82v89.14h17.51Zm-38.84,17.51V102.41H429.2a28.61,28.61,0,0,0-10.51,1.91,24.63,24.63,0,0,0-14.26,14.27,29.65,29.65,0,0,0,0,20.94,24.51,24.51,0,0,0,14.26,14.33,28.61,28.61,0,0,0,10.51,1.91h20.43c2,0,4.84.38,6.82,2.35a11,11,0,0,1,0,13.56c-2,2-4.78,2.36-6.82,2.36H402.52v17.51h47.11a28.61,28.61,0,0,0,10.51-1.91A24,24,0,0,0,468.8,184a24.7,24.7,0,0,0,5.6-8.65,29.68,29.68,0,0,0,0-20.95,25.54,25.54,0,0,0-5.6-8.72,24.9,24.9,0,0,0-8.66-5.61,28.58,28.58,0,0,0-10.51-1.84H429.2a9.58,9.58,0,0,1-6.81-2.42,9.43,9.43,0,0,1-2.36-6.75c0-2,.38-4.84,2.36-6.81a9.79,9.79,0,0,1,6.81-2.36Zm-144.95,0H354.6c4.39,0,8,1.34,10.51,3.82s3.75,6,3.75,10.44-1.27,8-3.75,10.51-6.12,3.75-10.51,3.75H327.54ZM310,102.41v89.14h17.51V166h27l12.35,25.6h19.48l-14.58-30.12a29,29,0,0,0,12.35-14.7,36.4,36.4,0,0,0,0-25.09,29.41,29.41,0,0,0-6.68-10.31,30.34,30.34,0,0,0-10.32-6.69,35.17,35.17,0,0,0-12.54-2.23ZM290.5,119.92V102.41H221.8v89.14h68.7V174H239.31V155.77H290.5V138.26H239.31V119.92Z"/>
+        <path class="cls-3"
+              d="M152.35,119.62c8.15,0,15,2.55,19.73,7.32s7.32,11.59,7.32,19.74-2.54,15-7.32,19.74-11.58,7.32-19.73,7.32-15-2.55-19.74-7.32-7.32-11.59-7.32-19.74,2.55-15,7.32-19.74,11.59-7.32,19.74-7.32m33.42-3.68,32-34.62-8.09-8.06-32.58,35.51a46.7,46.7,0,0,0-24.77-6.66,52.68,52.68,0,0,0-8.65.71L123,48.89l-10.49,4.53L132.92,106a40.89,40.89,0,0,0-23.41,27.38L55.72,122l-1.91,11.27,54,11.22c0,.73,0,1.48,0,2.23,0,14.43,5.56,26.46,14.91,34.37l-29.1,40,9.1,6.48,29.65-40.4a48.24,48.24,0,0,0,20,4.11A46.49,46.49,0,0,0,178,184.07l34.35,42,8.75-7-34.53-42.58c6.59-7.68,10.38-18,10.38-29.87,0-12.37-4.08-23-11.14-30.74"/>
+        <path class="cls-4" d="M217.36,97.89A26.93,26.93,0,1,0,190.44,71a26.93,26.93,0,0,0,26.92,26.93"/>
+        <path class="cls-5" d="M114.47,60.2A19.85,19.85,0,1,0,94.63,40.35,19.85,19.85,0,0,0,114.47,60.2"/>
+        <path class="cls-6" d="M43.06,145.32a19.84,19.84,0,1,0-19.85-19.84,19.84,19.84,0,0,0,19.85,19.84"/>
+        <path class="cls-7" d="M100.17,250.1a26.93,26.93,0,1,0-26.93-26.93,26.93,26.93,0,0,0,26.93,26.93"/>
+        <path class="cls-8" d="M223.36,252.61a19.85,19.85,0,1,0-19.84-19.85,19.85,19.85,0,0,0,19.84,19.85"/>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/metadata-generator.html b/metadata-generator.html
index 610cd67..5be4225 100644
--- a/metadata-generator.html
+++ b/metadata-generator.html
@@ -59,7 +59,7 @@
       }
 
       .right {
-          background-color: #000000;
+          background-color: #ffffff;
           float: left;
           width: 20%;
           padding: 15px;
@@ -75,6 +75,22 @@
 
 </head>
 <body>
+<nav class="navbar navbar-light bg-light">
+  <div class="navbar-brand">
+    <img src="/logo.svg" height="50" width="116" alt="LOGO">
+  </div>
+  <ul class="navbar-nav ml-auto">
+    <li class="nav-item dropdown">
+      <a class="nav-link dropdown-toggle" href="#" id="navbarLanguageDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        <span id="selectedLanguageLabel">DE</span>
+      </a>
+      <div class="dropdown-menu position-absolute dropdown-menu-right" aria-labelledby="navbarLanguageDropdown">
+        <a class="dropdown-item" onclick="changeLanguage('en')">English</a>
+        <a class="dropdown-item" onclick="changeLanguage('de')">Deutsch</a>
+      </div>
+    </li>
+  </ul>
+</nav>
 
 <div style="overflow:auto">
   <div class="menu"></div>
@@ -82,12 +98,6 @@
   <div class="main">
 
     <div class="container">
-      <div>
-        <select id="languageSelector" name="lang">
-          <option value="en">English</option>
-          <option value="de" selected>Deutsch</option>
-        </select>
-      </div>
       <h2 style="margin-bottom:40px;" data-i18n="FORM_HEADING">OER Metadaten Formular</h2>
       <form class="was-validated">
         <div class="form-group row">
@@ -542,10 +552,10 @@
     i18next.on("languageChanged", () => {
       updateContent();
     });
-    const langSelector = document.getElementById("languageSelector");
-    langSelector.addEventListener("change", (e) => {
-      i18next.changeLanguage(e.target.value);
-    });
+  }
+  function changeLanguage(languageCode) {
+    i18next.changeLanguage(languageCode);
+    document.getElementById("selectedLanguageLabel").textContent = languageCode.toUpperCase();
   }
 
   function updateContent() {
