diff --git a/index.html b/index.html
index 7778f94c..ae62da91 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,7 @@
         <meta name="description" content="A matrix chat application">
         <link rel="stylesheet" type="text/css" href="src/ui/web/css/main.css">
 	</head>
-	<body>
+	<body class="brawl">
         <script id="version" type="disabled">
             window.BRAWL_VERSION = "%%VERSION%%";
         </script>
diff --git a/src/ui/web/css/main.css b/src/ui/web/css/main.css
index e01e3fc6..b2d3af04 100644
--- a/src/ui/web/css/main.css
+++ b/src/ui/web/css/main.css
@@ -3,8 +3,9 @@
 @import url('room.css');
 @import url('timeline.css');
 @import url('avatar.css');
+@import url('spinner.css');
 
-body {
+.brawl {
     margin: 0;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, sans-serif,
                 "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
@@ -12,6 +13,10 @@ body {
     color: white;
 }
 
+.hidden {
+    visibility: hidden;
+}
+
 .SyncStatusBar {
     background-color: #555;
     display: none;
diff --git a/src/ui/web/css/spinner.css b/src/ui/web/css/spinner.css
new file mode 100644
index 00000000..39b0e6be
--- /dev/null
+++ b/src/ui/web/css/spinner.css
@@ -0,0 +1,34 @@
+@keyframes spinner {
+    0% {
+        transform: rotate(0);
+        stroke-dasharray: 0 0 10 90;
+    }
+    45% {
+        stroke-dasharray: 0 0 90 10;
+    }
+    75% {
+        stroke-dasharray: 0 50 50 0;
+    }
+    100% {
+        transform: rotate(360deg);
+        stroke-dasharray: 10 90 0 0;
+    }
+}
+
+.spinner circle {
+    transform-origin: 50% 50%;
+    animation-name: spinner;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    fill: none;
+    stroke: currentcolor;
+    stroke-width: calc(var(--size) * 0.1);
+    stroke-linecap: butt;
+}
+
+.spinner {
+    --size: 20px;
+    width: var(--size);
+    height: var(--size);
+}
diff --git a/src/ui/web/view-gallery.html b/src/ui/web/view-gallery.html
new file mode 100644
index 00000000..ac8d8f19
--- /dev/null
+++ b/src/ui/web/view-gallery.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+        <link rel="stylesheet" type="text/css" href="css/main.css">
+	</head>
+	<body>
+        <script type="text/javascript">
+            function vm(o) {
+                // fake EventEmitter
+                o.on = () => {};
+                o.off = () => {};
+                o.i18n = (parts, ...expr) => {
+                    let result = "";
+                    for (let i = 0; i < parts.length; ++i) {
+                        result = result + parts[i];
+                        if (i < expr.length) {
+                            result = result + expr[i];
+                        }
+                    }
+                    return result;
+                };
+                return o;
+            }
+        </script>
+        <h1>View Gallery</h1>
+        <h2 name="login">Login</h2>
+        <div id="login" class="brawl"></div>
+        <script id="main" type="module">
+            import {LoginView} from "./login/LoginView.js";
+            const view = new LoginView(vm({
+                defaultHomeServer: "https://hs.tld",
+                login: () => alert("Logging in!"),
+                goBack: () => alert("Going back"),
+            }));
+            document.getElementById("login").appendChild(view.mount());
+        </script>
+        <h2 name="login-loading">Login Loading</h2>
+        <div id="login-loading" class="brawl"></div>
+		<script id="main" type="module">
+			import {LoginView} from "./login/LoginView.js";
+            const view = new LoginView(vm({
+                loadViewModel: vm({
+                    loadLabel: "Doing something important...",
+                    loading: true,
+                }),
+                defaultHomeServer: "https://hs.tld",
+            }));
+            document.getElementById("login-loading").appendChild(view.mount());
+		</script>
+
+	</body>
+</html>
