diff --git a/web/src/assets/fairy-wiki.png b/web/src/assets/fairy-wiki.png
new file mode 100644
index 0000000000000000000000000000000000000000..69fe7dfd494bf2fac2e920133e61faf17545f323
Binary files /dev/null and b/web/src/assets/fairy-wiki.png differ
diff --git a/web/src/components/the-header.vue b/web/src/components/the-header.vue
index e31b03a22357fd41e6cfbb8bf2a6178b87aff3a3..06b3bd251ea5364235db53e9ddc56d0afbeef30b 100644
--- a/web/src/components/the-header.vue
+++ b/web/src/components/the-header.vue
@@ -1,6 +1,8 @@
 <template>
   <a-layout-header class="header">
-    <div class="logo" />
+    <div class="logo">
+      <img alt="Fairy Wiki" src="../assets/fairy-wiki.png">
+    </div>
     <a-menu
         theme="dark"
         mode="horizontal"
@@ -131,6 +133,16 @@ export default defineComponent({
 </script>
 
 <style>
+.logo {
+  width: 120px;
+  height: 31px;
+  /*background: rgba(255, 255, 255, 0.2);*/
+  /*margin: 16px 28px 16px 0;*/
+  float: left;
+  color: white;
+  font-size: 18px;
+}
+
 .login-menu {
   float: right;
   color: white;