diff --git a/webapp/components/Logo.vue b/webapp/components/Logo.vue
deleted file mode 100644
index 6c7285417..000000000
--- a/webapp/components/Logo.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-
-
-
-
-
diff --git a/webapp/components/Logo/Logo.vue b/webapp/components/Logo/Logo.vue
new file mode 100644
index 000000000..e6024b718
--- /dev/null
+++ b/webapp/components/Logo/Logo.vue
@@ -0,0 +1,70 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/webapp/components/Logo/demo.md b/webapp/components/Logo/demo.md
new file mode 100644
index 000000000..9cd6d0f4d
--- /dev/null
+++ b/webapp/components/Logo/demo.md
@@ -0,0 +1,15 @@
+# Basic usage
+
+```
+
+
+
+```
+
+# Inverse Logo
+
+```
+
+
+
+```
\ No newline at end of file
diff --git a/webapp/components/Logo/style.scss b/webapp/components/Logo/style.scss
new file mode 100644
index 000000000..305e907c5
--- /dev/null
+++ b/webapp/components/Logo/style.scss
@@ -0,0 +1,17 @@
+.ds-logo {
+ @include reset;
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ color: $text-color-primary;
+}
+
+.ds-logo-inverse {
+ color: $text-color-primary-inverse;
+}
+
+.ds-logo-svg {
+ width: 130px;
+ height: auto;
+ fill: currentColor;
+}
\ No newline at end of file
diff --git a/webapp/layouts/basic.vue b/webapp/layouts/basic.vue
index 3674ef94d..6764e8edf 100644
--- a/webapp/layouts/basic.vue
+++ b/webapp/layouts/basic.vue
@@ -6,7 +6,7 @@
-
+
@@ -26,12 +26,14 @@