diff --git a/landing.html b/landing.html
new file mode 100644
index 0000000..bd9b619
--- /dev/null
+++ b/landing.html
@@ -0,0 +1,129 @@
+<!--
+   This file is part of iros
+   Copyright (C) 2024 Alex <uni@vrsal.xyz>
+
+   This program is free software: you can redistribute it and/or modify
+   it under the terms of the GNU Affero General Public License as published
+   by the Free Software Foundation, version 3 of the License.
+
+   This program is distributed in the hope that it will be useful,
+   but WITHOUT ANY WARRANTY; without even the implied warranty of
+   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+   GNU Affero General Public License for more details.
+
+   You should have received a copy of the GNU Affero General Public License
+   along with this program.  If not, see <https://www.gnu.org/licenses/>.
+-->
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>IROS</title>
+    <link rel='stylesheet' type='text/css' media='screen' href='static/css/landing.css'>
+    <script src='static/js/util.js'></script>
+    <script src='static/js/session.js'></script>
+
+    {{template "header.html" .}}
+</head>
+
+<body>
+
+    <div id="header">
+        <img id="header-logo" src="static/img/logo.png" alt="IROS Logo">
+
+        <!-- Header links -->
+        <div id="header-links">
+            <a href=".">Home</a>
+            <a href="#quickstart">Quickstart</a>
+            <a href="./docs">Documenation</a>
+        </div>
+    </div>
+
+    <div id="main">
+        <div id="screenshot">
+            <img src="static/img/showcase.png" alt="IROS Screenshot">
+        </div>
+        <div id="content">
+            <h1>The Interactive Remote Overlay System</h1>
+            <p>
+                IROS is a simple overlay which allows you to display and arrange text, images and other elements on
+                stream through a web interface. Make your streams more interactive and engaging by allowing your
+                moderators to control the overlay from their browser.
+            </p>
+            <p>
+                With the editor it's easy to control the overlay from a browser and update it in real time to display
+                information, images, emotes or other things on stream.
+            </p>
+            <p>
+                See <a href="#quickstart">quickstart</a> to get started with a few simple steps or check out the <a
+                    href="./docs">documentation</a> for a more thorough explanation for setting it up and a list of all
+                features and how to use them.
+            </p>
+
+            <h1 id="quickstart">Quickstart</h1>
+            <p>
+                To get started with IROS you first need to create a new session. This will give you two links, one for
+                the editor and one for the overlay. The editor is where you can add and edit elements and the overlay is
+                what you will add to your stream as a browser source. The links can be generated here:
+            </p>
+
+            <h2>Create a session</h2>
+
+            <div id="generate-form">
+                <label for="stream-link">Stream URL</label>
+                <input type="text" name="stream-link" id="stream-link" placeholder="https://streamingsite/yourchannel">
+                <label for="size">Size</label>
+                <input type="text" name="size" id="size" placeholder="1920x1080">
+                <button onclick="generate_session()">Generate</button>
+            </div>
+            <div id="link-container" class="hidden">
+                <div class="link-display">
+                    <div class="label">Editor link</div>
+                    <input class="link-textbox" type="text" name="editor-link" id="editor-link" readonly>
+                    <button title="Copy to clipboard" onclick="copy_link('editor-link')"><img
+                            src="img/copy.svg" /></button>
+
+                    <div class="label">Overlay link</div>
+                    <input type=" text" name="overlay-link" id="overlay-link" readonly>
+                    <button title="Copy to clipboard" onclick="copy_link('overlay-link')"><img
+                            src="img/copy.svg" /></button>
+                </div>
+            </div>
+            <p>
+                To generate a session provide a link to your stream and optionally a size of the overlay. The link
+                is used to embed the stream in the editor so you can see how the overlay will look on stream. The size
+                should be the resolution of your stream. By default it will be 1920x1080.
+            </p>
+            <p>
+                <strong>Important:</strong> The generated links should only be shared with people you trust. Anyone that
+                has access to them can use the editor to change the overlay.
+            </p>
+
+            <h2>Adding the overlay</h2>
+            <p>
+                To use the overlay you have to add a browser source to your streaming software and point it to the
+                overlay link. The overlay will automatically update when you make changes in the editor. See the
+                links below on how to use browser sources in your streaming software.
+            <ul>
+                <li><a href="https://obsproject.com/kb/sources-guide" target="_blank">Browser source for OBS Studio</a>
+                </li>
+                <li><a href="https://support.xsplit.com/en/article/webpage-1y1l6v/" target="_blank">Browser source for
+                        XSplit</a>
+                </li>
+            </ul>
+            </p>
+            <h2>Using the editor</h2>
+            <p>
+                The editor is where you can add and edit elements displayed in the overlay. It can be accessed through
+                the editor link using a browser. The editor is designed to be used by moderators so they can show
+                things on stream while the streamer is AFK or otherwise occupied. Elements can be added via the
+                buttons at the top of the settings panel. You can move them around by pressing <strong>G</strong>
+                and then moving your mouse. The same goes for scaling and rotating with <strong>S</strong> and
+                <strong>R</strong> respectively. For more information on how to use the editor see the <a
+                    href="./docs">documentation</a>.
+            </p>
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/login.html b/login.html
new file mode 100644
index 0000000..4bba51d
--- /dev/null
+++ b/login.html
@@ -0,0 +1,89 @@
+<!--
+   This file is part of iros
+   Copyright (C) 2024 Alex <uni@vrsal.xyz>
+
+   This program is free software: you can redistribute it and/or modify
+   it under the terms of the GNU Affero General Public License as published
+   by the Free Software Foundation, version 3 of the License.
+
+   This program is distributed in the hope that it will be useful,
+   but WITHOUT ANY WARRANTY; without even the implied warranty of
+   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+   GNU Affero General Public License for more details.
+
+   You should have received a copy of the GNU Affero General Public License
+   along with this program.  If not, see <https://www.gnu.org/licenses/>.
+-->
+
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>IROS | Dashboard login</title>
+    <link rel="icon" href="/static/img/favicon.png" type="image/x-icon" />
+</head>
+
+<body>
+    <style>
+        .login {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+        }
+
+        h3,
+        button {
+            margin-bottom: 0.5em;
+            font-family: Arial, Helvetica, sans-serif;
+        }
+
+        #token {
+            width: 200px;
+        }
+
+        button {
+            margin-left: 0.5em;
+            cursor: pointer;
+        }
+
+        button>div {
+            padding-left: 0.5em;
+            padding-right: 0.5em;
+        }
+
+        #token,
+        button {
+            padding: 0.5em;
+            margin-bottom: 0.5em;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+        }
+    </style>
+
+    <script>
+        function login() {
+            if (!document.getElementById('token').value) {
+                alert('Please enter an API token');
+                return;
+            }
+            // set authToken Cookie
+            document.cookie = `authToken=${document.getElementById('token').value};path=/;max-age=31536000`;
+            // redirect to dashboard
+            window.location.href = '/dashboard';
+        }
+    </script>
+
+    <div class="login">
+        <h3>IROS Dashboard login</h3>
+        <div>
+            <input type="password" id="token" placeholder="API Token">
+            <button class="button" onclick="login()">
+                <div>Login</div>
+            </button>
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/viewer.html b/viewer.html
new file mode 100644
index 0000000..947d1cd
--- /dev/null
+++ b/viewer.html
@@ -0,0 +1,51 @@
+<!--
+   This file is part of iros
+   Copyright (C) 2024 Alex <uni@vrsal.xyz>
+
+   This program is free software: you can redistribute it and/or modify
+   it under the terms of the GNU Affero General Public License as published
+   by the Free Software Foundation, version 3 of the License.
+
+   This program is distributed in the hope that it will be useful,
+   but WITHOUT ANY WARRANTY; without even the implied warranty of
+   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+   GNU Affero General Public License for more details.
+
+   You should have received a copy of the GNU Affero General Public License
+   along with this program.  If not, see <https://www.gnu.org/licenses/>.
+-->
+
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>IROS | Viewer</title>
+    {{template "header.html" .}}
+
+    <link rel="stylesheet" type="text/css" media="screen" href="./static/css/main.css">
+    <link rel="stylesheet" type="text/css" media="screen" href="./static/css/viewer.css">
+    <script src="./js/config.js"></script>
+    <script src="./static/js/commands/base.js"></script>
+    <script src="./static/js/util.js"></script>
+    <script src="./static/js/viewer.js"></script>
+    <script src="./static/js/elements/element.js"></script>
+    <script src="./static/js/elements/text.js"></script>
+    <script src="./static/js/elements/image.js"></script>
+    <script src="./static/js/elements/timer.js"></script>
+    <script src="./static/js/elements/audio.js"></script>
+    <script src="./static/js/elements/video.js"></script>
+    <script src="./static/js/elements/iframe.js"></script>
+
+</head>
+
+<body>
+    <!-- main content -->
+    <div id="overlay"></div>
+
+    <script>
+        var edt = null;
+        var view = new viewer($("#overlay"));
+    </script>
+</body>
+
+</html>
\ No newline at end of file
