diff --git a/app/src/frontend/components/logo.tsx b/app/src/frontend/components/logo.tsx
index 06863a5b..e3781fcb 100644
--- a/app/src/frontend/components/logo.tsx
+++ b/app/src/frontend/components/logo.tsx
@@ -4,29 +4,12 @@ import './logo.css';
 
 /**
  * Logo
+ *
+ * As link to homepage, used in top header
  */
-const Logo = () => (
+const Logo: React.FunctionComponent  = () => (
     <Link to="/" className="logo navbar-brand" id="top">
-        <div className="grid">
-            <div className="row">
-                <div className="cell"></div>
-                <div className="cell"></div>
-                <div className="cell"></div>
-                <div className="cell"></div>
-            </div>
-            <div className="row">
-                <div className="cell"></div>
-                <div className="cell"></div>
-                <div className="cell"></div>
-                <div className="cell"></div>
-            </div>
-            <div className="row">
-                <div className="cell"></div>
-                <div className="cell"></div>
-                <div className="cell"></div>
-                <div className="cell"></div>
-            </div>
-        </div>
+        <LogoGrid />
         <h1 className="logotype">
             <span>Colouring</span>
             <span>London</span>
@@ -34,4 +17,42 @@ const Logo = () => (
     </Link>
 );
 
-export default Logo;
+/**
+ * MinorLogo
+ *
+ * As plain logo, used in legend
+ */
+const MinorLogo: React.FunctionComponent = () => (
+    <div className="logo">
+        <LogoGrid />
+        <h3 className="h3 logotype">
+            <span>Colouring</span>
+            <span>London</span>
+        </h3>
+    </div>
+)
+
+const LogoGrid: React.FunctionComponent = () => (
+    <div className="grid">
+        <div className="row">
+            <div className="cell"></div>
+            <div className="cell"></div>
+            <div className="cell"></div>
+            <div className="cell"></div>
+        </div>
+        <div className="row">
+            <div className="cell"></div>
+            <div className="cell"></div>
+            <div className="cell"></div>
+            <div className="cell"></div>
+        </div>
+        <div className="row">
+            <div className="cell"></div>
+            <div className="cell"></div>
+            <div className="cell"></div>
+            <div className="cell"></div>
+        </div>
+    </div>
+)
+
+export { Logo, MinorLogo };
diff --git a/app/src/frontend/header.tsx b/app/src/frontend/header.tsx
index 73ab5ccd..76b28d40 100644
--- a/app/src/frontend/header.tsx
+++ b/app/src/frontend/header.tsx
@@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
 import { NavLink } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
-import Logo from './components/logo';
+import { Logo } from './components/logo';
 import './header.css';
 
 /**
diff --git a/app/src/frontend/legend.tsx b/app/src/frontend/legend.tsx
index 3c4cc352..21fb1005 100644
--- a/app/src/frontend/legend.tsx
+++ b/app/src/frontend/legend.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import './legend.css';
+import { MinorLogo } from './components/logo';
 
 const LEGEND_CONFIG = {
     location: {
@@ -145,32 +146,7 @@ class Legend extends React.Component<any, any> { // TODO: add proper types
 
         return (
             <div className="map-legend">
-                <div className="logo">
-                    <div className="grid">
-                        <div className="row">
-                            <div className="cell"></div>
-                            <div className="cell"></div>
-                            <div className="cell"></div>
-                            <div className="cell"></div>
-                        </div>
-                        <div className="row">
-                            <div className="cell"></div>
-                            <div className="cell"></div>
-                            <div className="cell"></div>
-                            <div className="cell"></div>
-                        </div>
-                        <div className="row">
-                            <div className="cell"></div>
-                            <div className="cell"></div>
-                            <div className="cell"></div>
-                            <div className="cell"></div>
-                        </div>
-                    </div>
-                    <h3 className="h3 logotype">
-                        <span>Colouring</span>
-                        <span>London</span>
-                    </h3>
-                </div>
+                <MinorLogo />
                 <h4 className="h4">{ title } {elements.length?<button className="expander-button btn btn-outline-secondary btn-sm" type="button" onClick={this.handleClick} >^</button>:null}</h4>
                 {
                     details.description?