diff --git a/app/src/frontend/layout.tsx b/app/src/frontend/layout.tsx
index 042a701..973e9f5 100644
--- a/app/src/frontend/layout.tsx
+++ b/app/src/frontend/layout.tsx
@@ -1,20 +1,23 @@
-import { FC } from 'hono/jsx';
-import Header from './layout/header';
-import Footer from './layout/footer';
+import { html } from 'hono/html';
 
-const Layout: FC = (props) => {
-  return (
+export const Layout = (props: { title: string, children?: any }) => {
+  return html`<!DOCTYPE html>
     <html>
       <head>
-        <title>{props.siteData.title}</title>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+        <title>${props.title}</title>
       </head>
       <body>
-        <Header title={props.siteData.title} />
-        {props.children}
-        <Footer title={props.siteData.copyright} />
+        <header>
+          <h1>Slovocast</h1>
+        </header>
+        <main>${props.children}</main>
+        <footer>
+          <p>&copy; 2024, Slovocast</p>
+        </footer>
       </body>
-    </html>
-  )
+    </html>`;
 }
 
-export default Layout;
diff --git a/app/src/frontend/layout/login-form.tsx b/app/src/frontend/layout/login-form.tsx
new file mode 100644
index 0000000..e8dbed8
--- /dev/null
+++ b/app/src/frontend/layout/login-form.tsx
@@ -0,0 +1,31 @@
+import { FC } from "hono/jsx"
+
+const Error: FC = (props) => {
+  return (
+    <div class="form-error">
+      {props.message}
+    </div>
+  );
+};
+
+export const LoginForm: FC = (props) => {
+  return (
+    <>
+      {props.error ? <Error message={props.error.message} /> : null}
+      <form action="/login" method="POST">
+        <label for="email">
+          <div>Email</div>
+          <input type="text" name="email" required />
+        </label>
+        <label for="password">
+          <div>Password</div>
+          <input type="password" name="password" required />
+        </label>
+        <div>
+          <input type="submit" name="login" value="Login" />
+        </div>
+      </form>
+    </>
+  );
+};
+
diff --git a/app/src/frontend/pages/login.tsx b/app/src/frontend/pages/login.tsx
new file mode 100644
index 0000000..d54b7f8
--- /dev/null
+++ b/app/src/frontend/pages/login.tsx
@@ -0,0 +1,11 @@
+import { Layout } from '../layout';
+
+const LoginPage = (props: { error?: any }) => {
+  return (
+    <Layout title="Login">
+      <LoginForm action="/login" error=error />
+    </Layout>
+  );
+};
+
+export default LoginPage;
diff --git a/app/src/index.tsx b/app/src/index.tsx
index 24b1ffc..8186039 100644
--- a/app/src/index.tsx
+++ b/app/src/index.tsx
@@ -1,17 +1,18 @@
 import { Hono } from 'hono';
 import Layout from './frontend/layout';
 import { SiteConfig, configMiddleware } from './middleware/config';
+import LoginForm from './frontend/user/login';
 
 const app = new Hono();
 app.use(configMiddleware);
 
 app.get('/', async (c) => {
-  const siteData: SiteConfig = await c.get('config');
+  const siteData: SiteConfig = c.get('config');
 
   const layout = (
     <Layout siteData={siteData}>
       <main>
-        <h1>Slovocast</h1>
+        <h1>Welcome to Slovocast</h1>
       </main>
     </Layout>
   );
@@ -19,4 +20,16 @@ app.get('/', async (c) => {
   return c.html(layout);
 });
 
+app.get('/login', async (c) => {
+  const config: SiteConfig = c.get('config');
+
+  return c.html(
+    <Layout siteData={config}>
+      <main>
+        <LoginForm action="/login" />
+      </main>
+    </Layout>
+  );
+});
+
 export default app;
diff --git a/app/src/middleware/config.ts b/app/src/middleware/config.ts
index af6c66b..27ba1a9 100644
--- a/app/src/middleware/config.ts
+++ b/app/src/middleware/config.ts
@@ -1,16 +1,10 @@
 import { Hono } from 'hono';
 import { Context } from 'hono';
-
-type SiteConfig = {
-  name: string,
-  description: string,
-  baseUrl: string
-  copyright: string,
-};
+import SiteData from '../model/SiteData';
 
 const currentYear = new Date().getFullYear();
 
-const config: SiteConfig = {
+const config: SiteData = {
   name: "Slovocast",
   description: "A no-nonesense Podcast hosting platform.",
   baseUrl: "dev.slovocast.com",
@@ -22,4 +16,4 @@ const configMiddleware = async function(c: Context, next) {
   await next();
 };
 
-export { SiteConfig, configMiddleware };
+export { configMiddleware };
diff --git a/app/src/model/SiteData.ts b/app/src/model/SiteData.ts
index 15773d0..e9040a8 100644
--- a/app/src/model/SiteData.ts
+++ b/app/src/model/SiteData.ts
@@ -1,4 +1,8 @@
-export default interface SiteData {
-  title: string,
+type SiteData = {
+  name: string,
   description: string,
+  baseUrl: string
+  copyright: string,
 };
+
+export default SiteData;
