diff --git a/index.html b/index.html
index 3a1633a2..09e51f34 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,8 @@
         <meta name="apple-mobile-web-app-title" content="Hydrogen Chat">
         <meta name="description" content="A matrix chat application">
         <link rel="stylesheet" type="text/css" href="src/ui/web/css/main.css">
-        <link rel="stylesheet" type="text/css" href="src/ui/web/css/themes/bubbles/theme.css">
+        <link rel="stylesheet" type="text/css" href="src/ui/web/css/themes/element/theme.css" title="Element Theme">
+        <link rel="alternate stylesheet" type="text/css" href="src/ui/web/css/themes/bubbles/theme.css" title="Bubbles Theme">
 	</head>
 	<body class="hydrogen">
         <script id="version" type="disabled">
diff --git a/src/ui/web/css/themes/element/inter.css b/src/ui/web/css/themes/element/inter.css
new file mode 100644
index 00000000..5c69d7e6
--- /dev/null
+++ b/src/ui/web/css/themes/element/inter.css
@@ -0,0 +1,152 @@
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 100;
+  font-display: swap;
+  src: url("inter/Inter-Thin.woff2?v=3.13") format("woff2"),
+       url("inter/Inter-Thin.woff?v=3.13") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 100;
+  font-display: swap;
+  src: url("inter/Inter-ThinItalic.woff2?v=3.13") format("woff2"),
+       url("inter/Inter-ThinItalic.woff?v=3.13") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 200;
+  font-display: swap;
+  src: url("inter/Inter-ExtraLight.woff2?v=3.13") format("woff2"),
+       url("inter/Inter-ExtraLight.woff?v=3.13") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 200;
+  font-display: swap;
+  src: url("inter/Inter-ExtraLightItalic.woff2?v=3.13") format("woff2"),
+       url("inter/Inter-ExtraLightItalic.woff?v=3.13") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url("inter/Inter-Light.woff2?v=3.13") format("woff2"),
+       url("inter/Inter-Light.woff?v=3.13") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 300;
+  font-display: swap;
+  src: url("inter/Inter-LightItalic.woff2?v=3.13") format("woff2"),
+       url("inter/Inter-LightItalic.woff?v=3.13") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("inter/Inter-Regular.woff2?v=3.13") format("woff2"),
+       url("inter/Inter-Regular.woff?v=3.13") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url("inter/Inter-Italic.woff2?v=3.13") format("woff2"),
+       url("inter/Inter-Italic.woff?v=3.13") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("inter/Inter-Medium.woff2?v=3.13") format("woff2"),
+       url("inter/Inter-Medium.woff?v=3.13") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 500;
+  font-display: swap;
+  src: url("inter/Inter-MediumItalic.woff2?v=3.13") format("woff2"),
+       url("inter/Inter-MediumItalic.woff?v=3.13") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("inter/Inter-SemiBold.woff2?v=3.13") format("woff2"),
+       url("inter/Inter-SemiBold.woff?v=3.13") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 600;
+  font-display: swap;
+  src: url("inter/Inter-SemiBoldItalic.woff2?v=3.13") format("woff2"),
+       url("inter/Inter-SemiBoldItalic.woff?v=3.13") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("inter/Inter-Bold.woff2?v=3.13") format("woff2"),
+       url("inter/Inter-Bold.woff?v=3.13") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url("inter/Inter-BoldItalic.woff2?v=3.13") format("woff2"),
+       url("inter/Inter-BoldItalic.woff?v=3.13") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url("inter/Inter-ExtraBold.woff2?v=3.13") format("woff2"),
+       url("inter/Inter-ExtraBold.woff?v=3.13") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 800;
+  font-display: swap;
+  src: url("inter/Inter-ExtraBoldItalic.woff2?v=3.13") format("woff2"),
+       url("inter/Inter-ExtraBoldItalic.woff?v=3.13") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url("inter/Inter-Black.woff2?v=3.13") format("woff2"),
+       url("inter/Inter-Black.woff?v=3.13") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 900;
+  font-display: swap;
+  src: url("inter/Inter-BlackItalic.woff2?v=3.13") format("woff2"),
+       url("inter/Inter-BlackItalic.woff?v=3.13") format("woff");
+}
diff --git a/src/ui/web/css/themes/element/inter/Inter-Black.woff b/src/ui/web/css/themes/element/inter/Inter-Black.woff
new file mode 100644
index 00000000..07800f4b
Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-Black.woff differ
diff --git a/src/ui/web/css/themes/element/inter/Inter-Black.woff2 b/src/ui/web/css/themes/element/inter/Inter-Black.woff2
new file mode 100644
index 00000000..9a615e6e
Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-Black.woff2 differ
diff --git a/src/ui/web/css/themes/element/inter/Inter-BlackItalic.woff b/src/ui/web/css/themes/element/inter/Inter-BlackItalic.woff
new file mode 100644
index 00000000..8790638b
Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-BlackItalic.woff differ
diff --git a/src/ui/web/css/themes/element/inter/Inter-BlackItalic.woff2 b/src/ui/web/css/themes/element/inter/Inter-BlackItalic.woff2
new file mode 100644
index 00000000..9dfced91
Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-BlackItalic.woff2 differ
diff --git a/src/ui/web/css/themes/element/inter/Inter-Bold.woff b/src/ui/web/css/themes/element/inter/Inter-Bold.woff
new file mode 100644
index 00000000..61e1c25e
Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-Bold.woff differ
diff --git a/src/ui/web/css/themes/element/inter/Inter-Bold.woff2 b/src/ui/web/css/themes/element/inter/Inter-Bold.woff2
new file mode 100644
index 00000000..6c401bb0
Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-Bold.woff2 differ
diff --git a/src/ui/web/css/themes/element/inter/Inter-BoldItalic.woff b/src/ui/web/css/themes/element/inter/Inter-BoldItalic.woff
new file mode 100644
index 00000000..2de403ed
Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-BoldItalic.woff differ
diff --git a/src/ui/web/css/themes/element/inter/Inter-BoldItalic.woff2 b/src/ui/web/css/themes/element/inter/Inter-BoldItalic.woff2
new file mode 100644
index 00000000..80efd484
Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-BoldItalic.woff2 differ
diff --git a/src/ui/web/css/themes/element/inter/Inter-ExtraBold.woff b/src/ui/web/css/themes/element/inter/Inter-ExtraBold.woff
new file mode 100644
index 00000000..433fb328
Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-ExtraBold.woff differ
diff --git a/src/ui/web/css/themes/element/inter/Inter-ExtraBold.woff2 b/src/ui/web/css/themes/element/inter/Inter-ExtraBold.woff2
new file mode 100644
index 00000000..5a08b364
Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-ExtraBold.woff2 differ
diff --git a/src/ui/web/css/themes/element/inter/Inter-ExtraBoldItalic.woff b/src/ui/web/css/themes/element/inter/Inter-ExtraBoldItalic.woff
new file mode 100644
index 00000000..bd97df37
Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-ExtraBoldItalic.woff differ
diff --git a/src/ui/web/css/themes/element/inter/Inter-ExtraBoldItalic.woff2 b/src/ui/web/css/themes/element/inter/Inter-ExtraBoldItalic.woff2
new file mode 100644
index 00000000..97bda246
Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-ExtraBoldItalic.woff2 differ
diff --git a/src/ui/web/css/themes/element/inter/Inter-ExtraLight.woff b/src/ui/web/css/themes/element/inter/Inter-ExtraLight.woff
new file mode 100644
index 00000000..39e6f971
Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-ExtraLight.woff differ
diff --git a/src/ui/web/css/themes/element/inter/Inter-ExtraLight.woff2 b/src/ui/web/css/themes/element/inter/Inter-ExtraLight.woff2
new file mode 100644
index 00000000..442e2255
Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-ExtraLight.woff2 differ
diff --git a/src/ui/web/css/themes/element/inter/Inter-ExtraLightItalic.woff b/src/ui/web/css/themes/element/inter/Inter-ExtraLightItalic.woff
new file mode 100644
index 00000000..a6e1d14b
Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-ExtraLightItalic.woff differ
diff --git a/src/ui/web/css/themes/element/inter/Inter-ExtraLightItalic.woff2 b/src/ui/web/css/themes/element/inter/Inter-ExtraLightItalic.woff2
new file mode 100644
index 00000000..db6880b1
Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-ExtraLightItalic.woff2 differ
diff --git a/src/ui/web/css/themes/element/inter/Inter-Italic.woff b/src/ui/web/css/themes/element/inter/Inter-Italic.woff
new file mode 100644
index 00000000..e7da6663
Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-Italic.woff differ
diff --git a/src/ui/web/css/themes/element/inter/Inter-Italic.woff2 b/src/ui/web/css/themes/element/inter/Inter-Italic.woff2
new file mode 100644
index 00000000..8559dfde
Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-Italic.woff2 differ
diff --git a/src/ui/web/css/themes/element/inter/Inter-Light.woff b/src/ui/web/css/themes/element/inter/Inter-Light.woff
new file mode 100644
index 00000000..108c1120
Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-Light.woff differ
diff --git a/src/ui/web/css/themes/element/inter/Inter-Light.woff2 b/src/ui/web/css/themes/element/inter/Inter-Light.woff2
new file mode 100644
index 00000000..80378a31
Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-Light.woff2 differ
diff --git a/src/ui/web/css/themes/element/inter/Inter-LightItalic.woff b/src/ui/web/css/themes/element/inter/Inter-LightItalic.woff
new file mode 100644
index 00000000..b30452af
Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-LightItalic.woff differ
diff --git a/src/ui/web/css/themes/element/inter/Inter-LightItalic.woff2 b/src/ui/web/css/themes/element/inter/Inter-LightItalic.woff2
new file mode 100644
index 00000000..091ff4ed
Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-LightItalic.woff2 differ
diff --git a/src/ui/web/css/themes/element/inter/Inter-Medium.woff b/src/ui/web/css/themes/element/inter/Inter-Medium.woff
new file mode 100644
index 00000000..8c36a634
Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-Medium.woff differ
diff --git a/src/ui/web/css/themes/element/inter/Inter-Medium.woff2 b/src/ui/web/css/themes/element/inter/Inter-Medium.woff2
new file mode 100644
index 00000000..3b31d335
Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-Medium.woff2 differ
diff --git a/src/ui/web/css/themes/element/inter/Inter-MediumItalic.woff b/src/ui/web/css/themes/element/inter/Inter-MediumItalic.woff
new file mode 100644
index 00000000..fb79e91f
Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-MediumItalic.woff differ
diff --git a/src/ui/web/css/themes/element/inter/Inter-MediumItalic.woff2 b/src/ui/web/css/themes/element/inter/Inter-MediumItalic.woff2
new file mode 100644
index 00000000..d32c111f
Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-MediumItalic.woff2 differ
diff --git a/src/ui/web/css/themes/element/inter/Inter-Regular.woff b/src/ui/web/css/themes/element/inter/Inter-Regular.woff
new file mode 100644
index 00000000..7d587c40
Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-Regular.woff differ
diff --git a/src/ui/web/css/themes/element/inter/Inter-Regular.woff2 b/src/ui/web/css/themes/element/inter/Inter-Regular.woff2
new file mode 100644
index 00000000..d5ffd2a1
Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-Regular.woff2 differ
diff --git a/src/ui/web/css/themes/element/inter/Inter-SemiBold.woff b/src/ui/web/css/themes/element/inter/Inter-SemiBold.woff
new file mode 100644
index 00000000..99df06cb
Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-SemiBold.woff differ
diff --git a/src/ui/web/css/themes/element/inter/Inter-SemiBold.woff2 b/src/ui/web/css/themes/element/inter/Inter-SemiBold.woff2
new file mode 100644
index 00000000..df746af9
Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-SemiBold.woff2 differ
diff --git a/src/ui/web/css/themes/element/inter/Inter-SemiBoldItalic.woff b/src/ui/web/css/themes/element/inter/Inter-SemiBoldItalic.woff
new file mode 100644
index 00000000..91e192b9
Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-SemiBoldItalic.woff differ
diff --git a/src/ui/web/css/themes/element/inter/Inter-SemiBoldItalic.woff2 b/src/ui/web/css/themes/element/inter/Inter-SemiBoldItalic.woff2
new file mode 100644
index 00000000..ff8774cc
Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-SemiBoldItalic.woff2 differ
diff --git a/src/ui/web/css/themes/element/inter/Inter-Thin.woff b/src/ui/web/css/themes/element/inter/Inter-Thin.woff
new file mode 100644
index 00000000..9d2e3e54
Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-Thin.woff differ
diff --git a/src/ui/web/css/themes/element/inter/Inter-Thin.woff2 b/src/ui/web/css/themes/element/inter/Inter-Thin.woff2
new file mode 100644
index 00000000..5f7bc37c
Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-Thin.woff2 differ
diff --git a/src/ui/web/css/themes/element/inter/Inter-ThinItalic.woff b/src/ui/web/css/themes/element/inter/Inter-ThinItalic.woff
new file mode 100644
index 00000000..885d8d5d
Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-ThinItalic.woff differ
diff --git a/src/ui/web/css/themes/element/inter/Inter-ThinItalic.woff2 b/src/ui/web/css/themes/element/inter/Inter-ThinItalic.woff2
new file mode 100644
index 00000000..2ceec604
Binary files /dev/null and b/src/ui/web/css/themes/element/inter/Inter-ThinItalic.woff2 differ
diff --git a/src/ui/web/css/themes/element/theme.css b/src/ui/web/css/themes/element/theme.css
new file mode 100644
index 00000000..3bdd8f02
--- /dev/null
+++ b/src/ui/web/css/themes/element/theme.css
@@ -0,0 +1,188 @@
+/*
+Copyright 2020 Bruno Windels <bruno@windels.cloud>
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+@import url('inter.css');
+
+.hydrogen {
+    font-family: 'Inter', sans-serif, 'emoji';
+    background-color: white;
+    color: black;
+}
+
+.avatar {
+    border-radius: 100%;
+    background: black;
+    color: white;
+}
+
+.LeftPanel {
+    background: #333;
+    color: white;
+}
+
+.LeftPanel ul {
+    padding: 0;
+    margin: 0;
+}
+
+.LeftPanel li {
+    margin: 5px;
+    padding: 10px;
+    /* vertical align */
+    align-items: center;
+}
+
+.LeftPanel li {
+    border-bottom: 1px #555 solid;
+}
+
+.LeftPanel li:last-child {
+    border-bottom: none;
+}
+
+.LeftPanel li > * {
+    margin-right: 10px;
+}
+
+.LeftPanel .description .last-message {
+    font-size: 0.8em;
+}
+
+a {
+    color: white;
+}
+
+
+.SessionStatusView {
+    padding: 5px;
+    background-color: #555;
+}
+
+.RoomPlaceholderView {
+    align-items: center;
+    justify-content: center;
+}
+
+.SessionPickerView li {
+  font-size: 1.2em;
+  background-color: grey;
+}
+
+
+.RoomHeader {
+    padding: 10px;
+    background-color: #333;
+}
+
+.RoomHeader button {
+    width: 40px;
+    height: 40px;
+    font-size: 1.5em;
+    padding: 0;
+    background: white;
+    border: none;
+    font-weight: bolder;
+    line-height: 40px;
+}
+
+.back::before {
+    content: "☰";
+}
+
+.more::before {
+    content: "⋮";
+}
+
+.RoomHeader .topic {
+    font-size: 0.8em;
+}
+
+.RoomHeader {
+    padding: 10px;
+    background-color: #333;
+}
+
+.RoomView_error {
+    color: red;
+}
+
+.MessageComposer > input {
+    padding: 0.8em;
+    border: none;
+}
+
+.message-container {
+    max-width: 80%;
+    padding: 5px 10px;
+    margin: 5px 10px;
+    background: blue;
+}
+
+.message-container .sender {
+    margin: 5px 0;
+    font-size: 0.9em;
+    font-weight: bold;
+}
+
+.TextMessageView .message-container time {
+    padding: 2px 0 0px 20px;
+    font-size: 0.9em;
+    color: lightblue;
+}
+
+.message-container time {
+    font-size: 0.9em;
+    color: lightblue;
+}
+
+.own time {
+    color: lightgreen;
+}
+
+.own .message-container {
+    background-color: darkgreen;
+}
+
+.TextMessageView.own .message-container {
+    margin-left: auto;
+}
+
+.TextMessageView.pending .message-container {
+    background-color: #333;
+}
+
+.TextMessageView .message-container time {
+    float: right;
+}
+
+.message-container p {
+    margin: 5px 0;
+}
+
+.AnnouncementView {
+    margin: 5px 0;
+    padding: 5px 10%;
+}
+
+.AnnouncementView > div {
+    margin: 0 auto;
+    padding: 10px 20px;
+    background-color: #333;
+    font-size: 0.9em;
+    color: #CCC;
+    text-align: center;
+}
