diff --git a/LICENSE b/LICENSE
index cd4eb7f..54a78a7 120000
--- a/LICENSE
+++ b/LICENSE
@@ -1 +1 @@
-LICENSES/EUPL-1.2.txt
\ No newline at end of file
+LICENSES/EUPL-1.2.txt
diff --git a/greenhouse/web/asgi.py b/greenhouse/web/asgi.py
index 3a6830e..46bcda3 100644
--- a/greenhouse/web/asgi.py
+++ b/greenhouse/web/asgi.py
@@ -7,7 +7,8 @@
 from typing import AsyncIterator
 
 from starlette.applications import Starlette
-from starlette.routing import Route
+from starlette.routing import Route, Mount
+from starlette.staticfiles import StaticFiles
 
 import greenhouse.web
 
@@ -25,6 +26,9 @@ async def lifespan(app) -> AsyncIterator[None]:
     debug=greenhouse.web.DEBUG,
     routes=[
         Route('/', routes.homepage),
+        Route('/dashboard', routes.dashboard),
+        Route('/top-emotes', routes.top_emotes),
+        Mount('/static', StaticFiles(directory='greenhouse/web/static'), name='static')
     ],
     lifespan=lifespan,
 )
diff --git a/greenhouse/web/routes.py b/greenhouse/web/routes.py
index 366d746..0c8a6d1 100644
--- a/greenhouse/web/routes.py
+++ b/greenhouse/web/routes.py
@@ -3,14 +3,20 @@
 # SPDX-License-Identifier: EUPL-1.2
 
 import importlib.resources
-
+from starlette.requests import Request
 from starlette.templating import Jinja2Templates
-
+from starlette.responses import Response
 
 templates = Jinja2Templates(
     directory=importlib.resources.files('greenhouse.web.templates'),
 )
 
 
-async def homepage(request):
+async def homepage(request: Request) -> Response:
     return templates.TemplateResponse('index.html', {'request': request})
+
+async def dashboard(request: Request) -> Response:
+    return templates.TemplateResponse('dashboard.html', {'request': request})
+
+async def top_emotes(request: Request) -> Response:
+    return templates.TemplateResponse('top-emotes.html', {'request': request})
diff --git a/greenhouse/web/static/style.css b/greenhouse/web/static/style.css
new file mode 100644
index 0000000..ffbb3fb
--- /dev/null
+++ b/greenhouse/web/static/style.css
@@ -0,0 +1,64 @@
+/*
+ * SPDX-FileCopyrightText: 2023 peepo.world developers
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
+
+@import url("https://use.typekit.net/sfm4zwf.css");
+#site-name {
+    font-family: rodchenko-cond, sans-serif;
+    font-weight: 700;
+    font-style: normal;
+}
+
+input[type="checkbox"][id^="myCheckbox"] {
+  display: none;
+
+  }
+
+  label {
+    position: relative;
+    cursor: pointer;
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+
+  label:before {
+    background-color: white;
+    color: white;
+    content: " ";
+    display: block;
+    border-radius: 50%;
+    border: 1px solid grey;
+    position: absolute;
+    top: -5px;
+    left: -5px;
+    width: 25px;
+    height: 25px;
+    text-align: center;
+    line-height: 28px;
+    transition-duration: 0.4s;
+    transform: scale(0);
+  }
+
+  label img {
+    transition-duration: 0.2s;
+    transform-origin: 50% 50%;
+  }
+
+  :checked + label {
+    border-color: #ddd;
+  }
+
+  :checked + label:before {
+    content: "✓";
+    background-color: #485fc7;
+    transform: scale(1);
+  }
+
+  :checked + label img {
+    transform: scale(0.9);
+    /* box-shadow: 0 0 5px #333; */
+    z-index: -1;
+  }
diff --git a/greenhouse/web/static/style.scss b/greenhouse/web/static/style.scss
new file mode 100644
index 0000000..de40fd5
--- /dev/null
+++ b/greenhouse/web/static/style.scss
@@ -0,0 +1,11 @@
+/*
+ * SPDX-FileCopyrightText: 2023 peepo.world developers
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
+
+@import "node_modules/bulma/sass/utilities/initial-variables";
+
+
+
+@import "node_modules/bulma/bulma";
diff --git a/greenhouse/web/templates/base.html b/greenhouse/web/templates/base.html
new file mode 100644
index 0000000..298031e
--- /dev/null
+++ b/greenhouse/web/templates/base.html
@@ -0,0 +1,129 @@
+<!--
+SPDX-FileCopyrightText: 2023 peepo.world developers
+SPDX-License-Identifier: EUPL-1.2
+-->
+<!DOCTYPE html>
+<html>
+
+
+<head>
+    {% block head %}
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Title</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
+    <link rel="stylesheet" href="{{ url_for('static', path = '/style.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', path = '/style.scss') }}">
+    <script src="https://kit.fontawesome.com/925ae519b7.js" crossorigin="anonymous"></script>
+    {% endblock %}
+</head>
+
+
+<body>
+
+    <nav class="navbar" role="navigation" aria-label="main navigation">
+        {% block navbar %}
+        <div class="navbar-brand">
+            <a class="navbar-item" href="">
+                <img src="https://placehold.jp/3c3753/ffffff/112x28.png?text=Logo" width="112" height="28">
+            </a>
+
+            <a role="button" class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
+                <span aria-hidden="true"></span>
+                <span aria-hidden="true"></span>
+                <span aria-hidden="true"></span>
+            </a>
+        </div>
+
+        <div id="navMenu" class="navbar-menu">
+            <div class="navbar-start">
+                <a class="navbar-item" href="/">
+                    Home
+                </a>
+
+                <a class="navbar-item" href="top-emotes">
+                    Emotes
+                </a>
+
+                <a class="navbar-item" href="dashboard">
+                    Dashboard
+                </a>
+
+                <div class="navbar-item has-dropdown is-hoverable">
+                    <a class="navbar-link">
+                        More
+                    </a>
+
+                    <div class="navbar-dropdown">
+                        <a class="navbar-item">
+                            About
+                        </a>
+                        <a class="navbar-item">
+                            Contact
+                        </a>
+                        <hr class="navbar-divider">
+                        <a class="navbar-item">
+                            Report an issue
+                        </a>
+                    </div>
+                </div>
+            </div>
+
+            <div class="navbar-end">
+                <div class="navbar-item">
+                    <div class="buttons">
+                        <a class="button is-primary">
+                            Log in
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+        {% endblock %}
+    </nav>
+
+
+    {% block content %}
+    {% endblock %}
+
+
+    <footer class="footer">
+        {% block footer %}
+        <div class="content has-text-centered">
+            <p>
+                Footer content goes here.
+            </p>
+        </div>
+        {% endblock %}
+    </footer>
+
+
+</body>
+{% block menuscript %}
+<script> //Menu script
+
+    document.addEventListener('DOMContentLoaded', () => {
+
+        // Get all "navbar-burger" elements
+        const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
+
+        // Add a click event on each of them
+        $navbarBurgers.forEach(el => {
+            el.addEventListener('click', () => {
+
+                // Get the target from the "data-target" attribute
+                const target = el.dataset.target;
+                const $target = document.getElementById(target);
+
+                // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
+                el.classList.toggle('is-active');
+                $target.classList.toggle('is-active');
+
+            });
+        });
+
+    });
+</script>
+{% endblock %}
+
+</html>
diff --git a/greenhouse/web/templates/dashboard.html b/greenhouse/web/templates/dashboard.html
new file mode 100644
index 0000000..531c7c7
--- /dev/null
+++ b/greenhouse/web/templates/dashboard.html
@@ -0,0 +1,35 @@
+<!--
+SPDX-FileCopyrightText: 2023 peepo.world developers
+SPDX-License-Identifier: EUPL-1.2
+-->
+{% extends "base.html" %}
+<!DOCTYPE html>
+<html>
+
+<head>
+    {% block head %}
+    {{super()}}
+    {% endblock %}
+</head>
+
+<body>
+
+    <nav class="navbar" role="navigation" aria-label="main navigation">
+        {% block navbar %}
+        {{super()}}
+        {% endblock %}
+    </nav>
+    {% block content %}
+    {% endblock %}
+    <footer class="footer">
+        {% block footer %}
+        {{ super()}}
+        {% endblock %}
+    </footer>
+</body>
+
+{% block menuscript%}
+{{super()}}
+{% endblock %}
+
+</html>
diff --git a/greenhouse/web/templates/index.html b/greenhouse/web/templates/index.html
index 0c4fa9a..de32834 100644
--- a/greenhouse/web/templates/index.html
+++ b/greenhouse/web/templates/index.html
@@ -1,5 +1,59 @@
 <!--
 SPDX-FileCopyrightText: 2023 peepo.world developers
-
 SPDX-License-Identifier: EUPL-1.2
 -->
+{% extends "base.html" %}
+<!DOCTYPE html>
+<html>
+
+<head>
+    {% block head %}
+    {{super()}}
+    {% endblock %}
+</head>
+
+<body>
+
+    <nav class="navbar" role="navigation" aria-label="main navigation">
+        {% block navbar %}
+        {{super()}}
+        {% endblock %}
+    </nav>
+
+    {% block content %}
+    <!--hero----------->
+    <section class="hero is-primary">
+        <div class="hero-body">
+            <div class="container">
+                <h1 class="title is-1" id="site-name">Site Name<h1>
+                        <h2 class="subtitle">Subtitle</h2>
+            </div>
+        </div>
+    </section>
+
+
+    <!---columns------>
+    <div class="columns">
+        <div class="column">
+            <div class="card">
+                <div class="card-content">
+                    <h2 class="title">"Short Description"</h2>
+                    <h3 class="subtitle">Subtitle</h3>
+                </div>
+            </div>
+        </div>
+    </div>
+    {% endblock %}
+
+    <footer class="footer">
+        {% block footer %}
+        {{ super()}}
+        {% endblock %}
+    </footer>
+</body>
+
+{% block menuscript%}
+{{super()}}
+{% endblock %}
+
+</html>
diff --git a/greenhouse/web/templates/top-emotes.html b/greenhouse/web/templates/top-emotes.html
new file mode 100644
index 0000000..c9d029c
--- /dev/null
+++ b/greenhouse/web/templates/top-emotes.html
@@ -0,0 +1,386 @@
+<!--
+SPDX-FileCopyrightText: 2023 peepo.world developers
+SPDX-License-Identifier: EUPL-1.2
+-->
+{% extends "base.html" %}
+<!DOCTYPE html>
+<html>
+
+<head>
+    {% block head %}
+    {{super()}}
+    {% endblock %}
+</head>
+
+<body>
+
+    <nav class="navbar" role="navigation" aria-label="main navigation">
+        {% block navbar %}
+        {{super()}}
+        {% endblock %}
+    </nav>
+
+
+
+    {% block menuscript%}
+    {{super()}}
+    {% endblock %}
+
+    <!----ASIDE---->
+    {% block content %}
+
+    <nav class="tabs is-toggle has-shadow is-centered">
+        <div class="container">
+            <label for="menu-toggle" class="nav-toggle">
+                <span></span>
+                <span></span>
+                <span></span>
+            </label>
+            <input type="checkbox" id="menu-toggle" class="is-hidden" />
+            <div class="nav-right nav-menu">
+                <ul>
+                    <li class="is-active">
+                        <a class="nav-item is-tab is-hidden-tablet">
+                            Top Emotes
+                        </a>
+                    </li>
+                    <li>
+                        <a class="nav-item is-tab is-hidden-tablet">
+                            Trending Emotes
+                        </a>
+                    </li>
+                    <li>
+                        <a class="nav-item is-tab is-hidden-tablet">
+                            Shared Emotes
+                        </a>
+                    </li>
+                    <li>
+                        <a class="nav-item is-tab is-hidden-tablet">
+                            Global Emotes
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+
+    <section class="main-content columns is-fullheight">
+
+        <aside class="column is-2 is-narrow-mobile is-fullheight section is-hidden-mobile">
+            <ul class="menu-list">
+                <li>
+                    <a href="#" class="is-active ">
+                        Top Emotes
+                    </a>
+                </li>
+                <li>
+                    <a href="#" class="">
+                        Trending Emotes
+                    </a>
+                </li>
+                <li>
+                    <a href="#" class="">
+                        Shared Emotes
+                    </a>
+                </li>
+                <li>
+                    <a href="#" class="">
+                        Global Emotes
+                    </a>
+                </li>
+            </ul>
+        </aside>
+
+        <!--MAIN/TILES-->
+
+        <div class="container column">
+            <div class="section">
+                <div class="columns is-half">
+                    <div class="column is-half is-variable">
+                        <h1 class="is-size-3">Top Emotes</h1>
+                        <p>Top shared emotes</p>
+                    </div>
+                    <div class="column is-half is-variable">
+                        <div class="control has-icons-left">
+                            <input class="input is-primary" type="text" placeholder="Search">
+                            <span class="icon is-left">
+                                <i class="fa-solid fa-magnifying-glass"></i>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <hr class="mt-0">
+
+                <!--Tiles-->
+
+                <!---Tile Column 1/2-->
+                <div class="container column">
+                    <div class="columns is-half is-mobile">
+                        <div class="column is-one-third-mobile is-offset-2-mobile">
+
+                            <div class="tile is-ancestor">
+                                <input type="checkbox" id="myCheckbox1" />
+                                <label for="myCheckbox1">
+                                    <div class="tile is-parent p-1">
+                                        <article class="tile is-child box has-text-centered">
+                                            <img src="https://placehold.jp/3d4070/ffffff/56x56.png" alt="emote">
+                                            <p class="title is-size-5">Title</p>
+                                            <p class="subtitle is-size-6">
+                                                <a href=""> Artist</a>
+                                            </p>
+                                        </article>
+                                    </div>
+                                </label>
+
+                                <input type="checkbox" id="myCheckbox2" />
+                                <label for="myCheckbox2">
+                                    <div class="tile is-parent p-1">
+                                        <article class="tile is-child box has-text-centered">
+                                            <img src="https://placehold.jp/3d4070/ffffff/56x56.png" alt="emote">
+                                            <p class="title is-size-5">Title</p>
+                                            <p class="subtitle is-size-6">
+                                                <a href=""> Artist</a>
+                                            </p>
+                                        </article>
+                                    </div>
+                                </label>
+
+                                <input type="checkbox" id="myCheckbox3" />
+                                <label for="myCheckbox3">
+                                    <div class="tile is-parent p-1">
+                                        <article class="tile is-child box has-text-centered">
+                                            <img src="https://placehold.jp/3d4070/ffffff/56x56.png" alt="emote">
+                                            <p class="title is-size-5">Title</p>
+                                            <p class="subtitle is-size-6">
+                                                <a href=""> Artist</a>
+                                            </p>
+                                        </article>
+                                    </div>
+                                </label>
+                            </div>
+
+                            <div class="tile is-ancestor">
+                                <input type="checkbox" id="myCheckbox4" />
+                                <label for="myCheckbox4">
+                                    <div class="tile is-parent p-1">
+                                        <article class="tile is-child box has-text-centered">
+                                            <img src="https://placehold.jp/3d4070/ffffff/56x56.png" alt="emote">
+                                            <p class="title is-size-5">Title</p>
+                                            <p class="subtitle is-size-6">
+                                                <a href=""> Artist</a>
+                                            </p>
+                                        </article>
+                                    </div>
+                                </label>
+
+                                <input type="checkbox" id="myCheckbox5" />
+                                <label for="myCheckbox5">
+                                    <div class="tile is-parent p-1">
+                                        <article class="tile is-child box has-text-centered">
+                                            <img src="https://placehold.jp/3d4070/ffffff/56x56.png" alt="emote">
+                                            <p class="title is-size-5">Title</p>
+                                            <p class="subtitle is-size-6">
+                                                <a href=""> Artist</a>
+                                            </p>
+                                        </article>
+                                    </div>
+                                </label>
+
+                                <input type="checkbox" id="myCheckbox6" />
+                                <label for="myCheckbox6">
+                                    <div class="tile is-parent p-1">
+                                        <article class="tile is-child box has-text-centered">
+                                            <img src="https://placehold.jp/3d4070/ffffff/56x56.png" alt="emote">
+                                            <p class="title is-size-5">Title</p>
+                                            <p class="subtitle is-size-6">
+                                                <a href=""> Artist</a>
+                                            </p>
+                                        </article>
+                                    </div>
+                                </label>
+                            </div>
+
+                            <div class="tile is-ancestor">
+                                <input type="checkbox" id="myCheckbox7" />
+                                <label for="myCheckbox7">
+                                    <div class="tile is-parent p-1">
+                                        <article class="tile is-child box has-text-centered">
+                                            <img src="https://placehold.jp/3d4070/ffffff/56x56.png" alt="emote">
+                                            <p class="title is-size-5">Title</p>
+                                            <p class="subtitle is-size-6">
+                                                <a href=""> Artist</a>
+                                            </p>
+                                        </article>
+                                    </div>
+                                </label>
+
+                                <input type="checkbox" id="myCheckbox8" />
+                                <label for="myCheckbox8">
+                                    <div class="tile is-parent p-1">
+                                        <article class="tile is-child box has-text-centered">
+                                            <img src="https://placehold.jp/3d4070/ffffff/56x56.png" alt="emote">
+                                            <p class="title is-size-5">Title</p>
+                                            <p class="subtitle is-size-6">
+                                                <a href=""> Artist</a>
+                                            </p>
+                                        </article>
+                                    </div>
+                                </label>
+
+                                <input type="checkbox" id="myCheckbox9" />
+                                <label for="myCheckbox9">
+                                    <div class="tile is-parent p-1">
+                                        <article class="tile is-child box has-text-centered">
+                                            <img src="https://placehold.jp/3d4070/ffffff/56x56.png" alt="emote">
+                                            <p class="title is-size-5">Title</p>
+                                            <p class="subtitle is-size-6">
+                                                <a href=""> Artist</a>
+                                            </p>
+                                        </article>
+                                    </div>
+                                </label>
+                            </div>
+                        </div>
+
+                        <!---Tile Column 2/2-->
+
+                        <div class="column is-one-third-mobile">
+
+                            <div class="tile is-ancestor">
+                                <input type="checkbox" id="myCheckbox10" />
+                                <label for="myCheckbox10">
+                                    <div class="tile is-parent p-1">
+                                        <article class="tile is-child box has-text-centered">
+                                            <img src="https://placehold.jp/3d4070/ffffff/56x56.png" alt="emote">
+                                            <p class="title is-size-5">Title</p>
+                                            <p class="subtitle is-size-6">
+                                                <a href=""> Artist</a>
+                                            </p>
+                                        </article>
+                                    </div>
+                                </label>
+
+                                <input type="checkbox" id="myCheckbox11" />
+                                <label for="myCheckbox11">
+                                    <div class="tile is-parent p-1">
+                                        <article class="tile is-child box has-text-centered">
+                                            <img src="https://placehold.jp/3d4070/ffffff/56x56.png" alt="emote">
+                                            <p class="title is-size-5">Title</p>
+                                            <p class="subtitle is-size-6">
+                                                <a href=""> Artist</a>
+                                            </p>
+                                        </article>
+                                    </div>
+                                </label>
+
+                                <input type="checkbox" id="myCheckbox12" />
+                                <label for="myCheckbox12">
+                                    <div class="tile is-parent p-1">
+                                        <article class="tile is-child box has-text-centered">
+                                            <img src="https://placehold.jp/3d4070/ffffff/56x56.png" alt="emote">
+                                            <p class="title is-size-5">Title</p>
+                                            <p class="subtitle is-size-6">
+                                                <a href=""> Artist</a>
+                                            </p>
+                                        </article>
+                                    </div>
+                                </label>
+                            </div>
+
+                            <div class="tile is-ancestor">
+                                <input type="checkbox" id="myCheckbox13" />
+                                <label for="myCheckbox13">
+                                    <div class="tile is-parent p-1">
+                                        <article class="tile is-child box has-text-centered">
+                                            <img src="https://placehold.jp/3d4070/ffffff/56x56.png" alt="emote">
+                                            <p class="title is-size-5">Title</p>
+                                            <p class="subtitle is-size-6">
+                                                <a href=""> Artist</a>
+                                            </p>
+                                        </article>
+                                    </div>
+                                </label>
+
+                                <input type="checkbox" id="myCheckbox14" />
+                                <label for="myCheckbox14">
+                                    <div class="tile is-parent p-1">
+                                        <article class="tile is-child box has-text-centered">
+                                            <img src="https://placehold.jp/3d4070/ffffff/56x56.png" alt="emote">
+                                            <p class="title is-size-5">Title</p>
+                                            <p class="subtitle is-size-6">
+                                                <a href=""> Artist</a>
+                                            </p>
+                                        </article>
+                                    </div>
+                                </label>
+
+                                <input type="checkbox" id="myCheckbox15" />
+                                <label for="myCheckbox15">
+                                    <div class="tile is-parent p-1">
+                                        <article class="tile is-child box has-text-centered">
+                                            <img src="https://placehold.jp/3d4070/ffffff/56x56.png" alt="emote">
+                                            <p class="title is-size-5">Title</p>
+                                            <p class="subtitle is-size-6">
+                                                <a href=""> Artist</a>
+                                            </p>
+                                        </article>
+                                    </div>
+                                </label>
+                            </div>
+
+                            <div class="tile is-ancestor">
+                                <input type="checkbox" id="myCheckbox16" />
+                                <label for="myCheckbox16">
+                                    <div class="tile is-parent p-1">
+                                        <article class="tile is-child box has-text-centered">
+                                            <img src="https://placehold.jp/3d4070/ffffff/56x56.png" alt="emote">
+                                            <p class="title is-size-5">Title</p>
+                                            <p class="subtitle is-size-6">
+                                                <a href=""> Artist</a>
+                                            </p>
+                                        </article>
+                                    </div>
+                                </label>
+
+                                <input type="checkbox" id="myCheckbox17" />
+                                <label for="myCheckbox17">
+                                    <div class="tile is-parent p-1">
+                                        <article class="tile is-child box has-text-centered">
+                                            <img src="https://placehold.jp/3d4070/ffffff/56x56.png" alt="emote">
+                                            <p class="title is-size-5">Title</p>
+                                            <p class="subtitle is-size-6">
+                                                <a href=""> Artist</a>
+                                            </p>
+                                        </article>
+                                    </div>
+                                </label>
+
+                                <input type="checkbox" id="myCheckbox18" />
+                                <label for="myCheckbox18">
+                                    <div class="tile is-parent p-1">
+                                        <article class="tile is-child box has-text-centered">
+                                            <img src="https://placehold.jp/3d4070/ffffff/56x56.png" alt="emote">
+                                            <p class="title is-size-5">Title</p>
+                                            <p class="subtitle is-size-6">
+                                                <a href=""> Artist</a>
+                                            </p>
+                                        </article>
+                                    </div>
+                                </label>
+                            </div>
+                        </div>
+
+
+    </section>
+    {% endblock %}
+
+    <!--PAGE FOOTER-->
+
+    <footer class="footer">
+        {% block footer %}
+        {{ super()}}
+        {% endblock %}
+    </footer>
+</body>
+
+</html>
