diff --git a/.gitignore b/.gitignore
index dc22134..e80ee70 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,3 +8,5 @@ coverage/
 .vscode/
 .idea/
 package-lock.json
+apps/backend/data/
+*.sqlite
diff --git a/apps/backend/package.json b/apps/backend/package.json
index bd8dd77..a12f6dc 100644
--- a/apps/backend/package.json
+++ b/apps/backend/package.json
@@ -11,10 +11,12 @@
     "test": "vitest run"
   },
   "dependencies": {
+    "better-sqlite3": "^9.4.4",
     "express": "^4.18.2"
   },
   "devDependencies": {
     "@eslint/js": "^8.56.0",
+    "@types/better-sqlite3": "^7.6.9",
     "@types/express": "^4.17.21",
     "@types/node": "^20.10.6",
     "eslint": "^8.56.0",
diff --git a/apps/backend/src/index.test.ts b/apps/backend/src/index.test.ts
index ef38eb4..b29ee3a 100644
--- a/apps/backend/src/index.test.ts
+++ b/apps/backend/src/index.test.ts
@@ -1,7 +1,46 @@
-import { describe, it, expect } from "vitest";
+import { describe, expect, it } from "vitest";
 
-describe("Backend", () => {
-  it("should pass placeholder test", () => {
-    expect(true).toBe(true);
+import { calculateAverage, validateFeedback } from "./roti-service.js";
+
+describe("validateFeedback", () => {
+  it("rejects ratings below 1", () => {
+    expect(() => validateFeedback({ rating: 0, comment: "ok" })).toThrow(
+      "Rating must be an integer between 1 and 5"
+    );
+  });
+
+  it("rejects ratings above 5", () => {
+    expect(() => validateFeedback({ rating: 6, comment: "ok" })).toThrow(
+      "Rating must be an integer between 1 and 5"
+    );
+  });
+
+  it("rejects non-integer ratings", () => {
+    expect(() => validateFeedback({ rating: 2.5, comment: "ok" })).toThrow(
+      "Rating must be an integer between 1 and 5"
+    );
+  });
+
+  it("requires a comment for ratings at or below 3", () => {
+    expect(() => validateFeedback({ rating: 3, comment: "  " })).toThrow(
+      "Comment is required when rating is 3 or below"
+    );
+  });
+
+  it("allows empty comment for ratings above 3", () => {
+    expect(validateFeedback({ rating: 4, comment: "  " })).toEqual({
+      rating: 4,
+      comment: "",
+    });
+  });
+});
+
+describe("calculateAverage", () => {
+  it("returns zero for empty input", () => {
+    expect(calculateAverage([])).toBe(0);
+  });
+
+  it("calculates average to one decimal", () => {
+    expect(calculateAverage([5, 4, 4])).toBe(4.3);
   });
 });
diff --git a/apps/backend/src/index.ts b/apps/backend/src/index.ts
index 678bf6d..8a498e6 100644
--- a/apps/backend/src/index.ts
+++ b/apps/backend/src/index.ts
@@ -1,7 +1,11 @@
-import express, { Request, Response } from "express";
 import path from "path";
 import { fileURLToPath } from "url";
 
+import express, { Request, Response } from "express";
+
+import { insertFeedback, listFeedbacks } from "./roti-db.js";
+import { calculateAverage, validateFeedback } from "./roti-service.js";
+
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const app = express();
 const PORT = process.env.PORT || 3001;
@@ -17,6 +21,28 @@ app.get("/api/hello", (_req: Request, res: Response) => {
   res.json({ message: "Hello from backend!", env: process.env.NODE_ENV || "development" });
 });
 
+app.get("/api/roti", (_req: Request, res: Response) => {
+  const feedbacks = listFeedbacks();
+  const average = calculateAverage(feedbacks.map((feedback) => feedback.rating));
+
+  res.json({
+    average,
+    count: feedbacks.length,
+    feedbacks,
+  });
+});
+
+app.post("/api/roti", (req: Request, res: Response) => {
+  try {
+    const feedback = validateFeedback(req.body);
+    const created = insertFeedback(feedback);
+    res.status(201).json(created);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : "Invalid request";
+    res.status(400).json({ error: message });
+  }
+});
+
 // Serve frontend static files
 const frontendPath = path.join(__dirname, "../../frontend/dist");
 app.use(express.static(frontendPath));
diff --git a/apps/backend/src/roti-db.ts b/apps/backend/src/roti-db.ts
new file mode 100644
index 0000000..85df337
--- /dev/null
+++ b/apps/backend/src/roti-db.ts
@@ -0,0 +1,66 @@
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+import Database from "better-sqlite3";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const defaultDbPath = path.join(__dirname, "../data/roti.sqlite");
+const dbPath = process.env.ROTI_DB_PATH || defaultDbPath;
+
+fs.mkdirSync(path.dirname(dbPath), { recursive: true });
+
+const db = new Database(dbPath);
+db.pragma("journal_mode = WAL");
+db.exec(`
+  CREATE TABLE IF NOT EXISTS roti_feedback (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    rating INTEGER NOT NULL,
+    comment TEXT NOT NULL,
+    created_at TEXT NOT NULL
+  )
+`);
+
+export interface RotiFeedbackRecord {
+  id: number;
+  rating: number;
+  comment: string;
+  createdAt: string;
+}
+
+interface RotiFeedbackRow {
+  id: number;
+  rating: number;
+  comment: string;
+  createdAt: string;
+}
+
+export function insertFeedback(input: { rating: number; comment: string }): RotiFeedbackRecord {
+  const createdAt = new Date().toISOString();
+  const statement = db.prepare(
+    "INSERT INTO roti_feedback (rating, comment, created_at) VALUES (?, ?, ?)"
+  );
+  const result = statement.run(input.rating, input.comment, createdAt);
+
+  return {
+    id: Number(result.lastInsertRowid),
+    rating: input.rating,
+    comment: input.comment,
+    createdAt,
+  };
+}
+
+export function listFeedbacks(): RotiFeedbackRecord[] {
+  const rows = db
+    .prepare(
+      "SELECT id, rating, comment, created_at as createdAt FROM roti_feedback ORDER BY datetime(created_at) DESC"
+    )
+    .all() as RotiFeedbackRow[];
+
+  return rows.map((row) => ({
+    id: Number(row.id),
+    rating: Number(row.rating),
+    comment: String(row.comment),
+    createdAt: String(row.createdAt),
+  }));
+}
diff --git a/apps/backend/src/roti-service.ts b/apps/backend/src/roti-service.ts
new file mode 100644
index 0000000..faf5aad
--- /dev/null
+++ b/apps/backend/src/roti-service.ts
@@ -0,0 +1,34 @@
+export interface FeedbackInput {
+  rating: unknown;
+  comment: unknown;
+}
+
+export interface ValidatedFeedback {
+  rating: number;
+  comment: string;
+}
+
+export function validateFeedback(input: FeedbackInput): ValidatedFeedback {
+  if (typeof input.rating !== "number" || !Number.isInteger(input.rating)) {
+    throw new Error("Rating must be an integer between 1 and 5");
+  }
+
+  if (input.rating < 1 || input.rating > 5) {
+    throw new Error("Rating must be an integer between 1 and 5");
+  }
+
+  const comment = typeof input.comment === "string" ? input.comment.trim() : "";
+
+  if (input.rating <= 3 && comment.length === 0) {
+    throw new Error("Comment is required when rating is 3 or below");
+  }
+
+  return { rating: input.rating, comment };
+}
+
+export function calculateAverage(values: number[]): number {
+  if (values.length === 0) return 0;
+  const total = values.reduce((sum, value) => sum + value, 0);
+  const average = total / values.length;
+  return Math.round(average * 10) / 10;
+}
diff --git a/apps/frontend/index.html b/apps/frontend/index.html
index 48e2a8e..2ab7e68 100644
--- a/apps/frontend/index.html
+++ b/apps/frontend/index.html
@@ -3,7 +3,13 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Live Code</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <title>ROTI Live</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 7441660..25c5b76 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -18,9 +18,12 @@
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
     "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.19",
     "eslint": "^8.56.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1",
     "typescript": "^5.2.2",
     "typescript-eslint": "^7.0.0",
     "vite": "^5.0.8"
diff --git a/apps/frontend/postcss.config.cjs b/apps/frontend/postcss.config.cjs
new file mode 100644
index 0000000..12a703d
--- /dev/null
+++ b/apps/frontend/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/apps/frontend/src/App.css b/apps/frontend/src/App.css
deleted file mode 100644
index 5700eae..0000000
--- a/apps/frontend/src/App.css
+++ /dev/null
@@ -1,49 +0,0 @@
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  font-family: system-ui, sans-serif;
-  background: #f5f5f5;
-  min-height: 100vh;
-}
-
-.app {
-  max-width: 600px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-h1 {
-  color: #333;
-  margin-bottom: 0.5rem;
-}
-
-p {
-  color: #666;
-}
-
-.card {
-  background: white;
-  padding: 1.5rem;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  margin-top: 1rem;
-  text-align: left;
-}
-
-.card h2 {
-  font-size: 1rem;
-  color: #333;
-  border-bottom: 2px solid #007bff;
-  padding-bottom: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-
-.error {
-  color: #dc3545;
-  margin-top: 1rem;
-}
diff --git a/apps/frontend/src/App.tsx b/apps/frontend/src/App.tsx
index 3af0e05..ab56fb2 100644
--- a/apps/frontend/src/App.tsx
+++ b/apps/frontend/src/App.tsx
@@ -1,50 +1,207 @@
-import { useEffect, useState } from "react";
-import "./App.css";
-
-interface ApiResponse {
-  status?: string;
-  message?: string;
-  timestamp?: string;
-  env?: string;
+import { useEffect, useMemo, useState, type FormEvent } from "react";
+
+interface RotiFeedback {
+  id: number;
+  rating: number;
+  comment: string;
+  createdAt: string;
+}
+
+interface RotiResponse {
+  average: number;
+  count: number;
+  feedbacks: RotiFeedback[];
 }
 
+const ratings = [1, 2, 3, 4, 5];
+
 function App() {
-  const [health, setHealth] = useState<ApiResponse | null>(null);
-  const [hello, setHello] = useState<ApiResponse | null>(null);
+  const [rating, setRating] = useState(5);
+  const [comment, setComment] = useState("");
+  const [data, setData] = useState<RotiResponse>({ average: 0, count: 0, feedbacks: [] });
   const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const commentRequired = useMemo(() => rating <= 3, [rating]);
+
+  const loadFeedbacks = async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const response = await fetch("/api/roti");
+      if (!response.ok) throw new Error("Failed to load ROTI feedbacks");
+      const payload = (await response.json()) as RotiResponse;
+      setData(payload);
+    } catch (loadError) {
+      const message = loadError instanceof Error ? loadError.message : "Unexpected error";
+      setError(message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
 
   useEffect(() => {
-    Promise.all([fetch("/api/health"), fetch("/api/hello")])
-      .then(async ([healthRes, helloRes]) => {
-        if (!healthRes.ok || !helloRes.ok) throw new Error("API error");
-        setHealth(await healthRes.json());
-        setHello(await helloRes.json());
-      })
-      .catch((err) => setError(err.message));
+    loadFeedbacks();
   }, []);
 
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setError(null);
+
+    if (commentRequired && comment.trim().length === 0) {
+      setError("Comment is required when rating is 3 or below");
+      return;
+    }
+
+    setIsSubmitting(true);
+    try {
+      const response = await fetch("/api/roti", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ rating, comment }),
+      });
+
+      if (!response.ok) {
+        const payload = (await response.json()) as { error?: string };
+        throw new Error(payload.error || "Failed to submit feedback");
+      }
+
+      setComment("");
+      setRating(5);
+      await loadFeedbacks();
+    } catch (submitError) {
+      const message = submitError instanceof Error ? submitError.message : "Unexpected error";
+      setError(message);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
   return (
-    <div className="app">
-      <h1>Live Code</h1>
-      <p>React + Express + Railway</p>
+    <div className="min-h-screen bg-gradient-to-br from-amber-50 via-white to-sky-50">
+      <div className="mx-auto flex min-h-screen max-w-6xl flex-col gap-10 px-4 py-10 sm:px-8 lg:flex-row lg:items-start">
+        <div className="flex w-full flex-col gap-6 lg:w-[45%]">
+          <div className="rounded-3xl border border-slate-200/80 bg-white/80 p-6 shadow-2xl shadow-slate-200/60">
+            <div className="flex items-center justify-between">
+              <p className="text-xs uppercase tracking-[0.35em] text-teal-600">ROTI Live</p>
+              <span className="rounded-full border border-slate-200 px-3 py-1 text-xs text-slate-500">
+                Live voting
+              </span>
+            </div>
+            <h1 className="mt-6 text-3xl font-semibold text-slate-900 sm:text-4xl">
+              Rate the talk in seconds
+            </h1>
+            <p className="mt-3 text-sm text-slate-600 sm:text-base">
+              Drop a quick ROTI score and help us capture the room energy. Comments are
+              required when the rating is 3 or below.
+            </p>
+          </div>
+
+          <form
+            onSubmit={handleSubmit}
+            className="rounded-3xl border border-slate-200/80 bg-white/80 p-6 shadow-2xl shadow-slate-200/60"
+          >
+            <div className="flex items-center justify-between">
+              <h2 className="text-lg font-semibold text-slate-900">Your ROTI</h2>
+              <span className="text-xs text-slate-500">1 = low, 5 = amazing</span>
+            </div>
 
-      {error && <p className="error">Error: {error}</p>}
+            <div className="mt-4 grid grid-cols-5 gap-2">
+              {ratings.map((value) => (
+                <button
+                  key={value}
+                  type="button"
+                  onClick={() => setRating(value)}
+                  className={`rounded-2xl border px-0 py-3 text-lg font-semibold transition ${
+                    rating === value
+                      ? "border-teal-500 bg-teal-50 text-teal-700"
+                      : "border-slate-200 bg-white text-slate-700 hover:border-slate-300"
+                  }`}
+                >
+                  {value}
+                </button>
+              ))}
+            </div>
 
-      {health && (
-        <div className="card">
-          <h2>Health</h2>
-          <p>Status: {health.status}</p>
-          <p>Time: {health.timestamp}</p>
+            <div className="mt-6">
+              <label className="text-sm font-medium text-slate-700" htmlFor="comment">
+                Comment {commentRequired && <span className="text-amber-600">(required)</span>}
+              </label>
+              <textarea
+                id="comment"
+                rows={4}
+                value={comment}
+                onChange={(event) => setComment(event.target.value)}
+                placeholder="Share the key takeaway or suggestion..."
+                className="mt-3 w-full resize-none rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-800 placeholder:text-slate-400 focus:border-teal-500 focus:outline-none focus:ring-2 focus:ring-teal-200"
+              />
+              {commentRequired && (
+                <p className="mt-2 text-xs text-amber-600">
+                  Please add a short comment if the rating is 3 or below.
+                </p>
+              )}
+            </div>
+
+            {error && (
+              <div className="mt-4 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">
+                {error}
+              </div>
+            )}
+
+            <button
+              type="submit"
+              disabled={isSubmitting}
+              className="mt-6 w-full rounded-2xl bg-teal-600 px-4 py-3 text-sm font-semibold text-white transition hover:bg-teal-500 disabled:cursor-not-allowed disabled:opacity-60"
+            >
+              {isSubmitting ? "Sending..." : "Submit feedback"}
+            </button>
+          </form>
         </div>
-      )}
 
-      {hello && (
-        <div className="card">
-          <h2>Hello</h2>
-          <p>{hello.message}</p>
-          <p>Env: {hello.env}</p>
+        <div className="flex w-full flex-col gap-6 lg:w-[55%]">
+          <div className="rounded-3xl border border-slate-200/80 bg-white/80 p-6 shadow-2xl shadow-slate-200/60">
+            <div className="flex items-center justify-between">
+              <h2 className="text-lg font-semibold text-slate-900">Live ROTI</h2>
+              <span className="text-xs text-slate-500">
+                {data.count} {data.count === 1 ? "vote" : "votes"}
+              </span>
+            </div>
+            <div className="mt-5 flex items-end gap-4">
+              <span className="text-5xl font-semibold text-slate-900">{data.average.toFixed(1)}</span>
+              <div className="pb-1 text-sm text-slate-500">Average rating</div>
+            </div>
+            {isLoading && <p className="mt-4 text-sm text-slate-500">Loading feedbacks...</p>}
+          </div>
+
+          <div className="flex flex-col gap-4">
+            {data.feedbacks.length === 0 && !isLoading ? (
+              <div className="rounded-3xl border border-dashed border-slate-200/80 bg-white/70 p-6 text-sm text-slate-500">
+                No feedback yet. Be the first to share a ROTI score.
+              </div>
+            ) : (
+              data.feedbacks.map((feedback) => (
+                <div
+                  key={feedback.id}
+                  className="rounded-3xl border border-slate-200/80 bg-white/90 p-5 shadow-xl shadow-slate-200/60"
+                >
+                  <div className="flex items-center justify-between">
+                    <span className="rounded-full border border-slate-200 px-3 py-1 text-xs text-slate-600">
+                      ROTI {feedback.rating}
+                    </span>
+                    <span className="text-xs text-slate-400">{feedback.createdAt.slice(11, 16)}</span>
+                  </div>
+                  <p className="mt-3 text-sm text-slate-700">
+                    {feedback.comment.length > 0 ? feedback.comment : "No comment provided."}
+                  </p>
+                </div>
+              ))
+            )}
+          </div>
         </div>
-      )}
+      </div>
     </div>
   );
 }
diff --git a/apps/frontend/src/index.css b/apps/frontend/src/index.css
new file mode 100644
index 0000000..4855142
--- /dev/null
+++ b/apps/frontend/src/index.css
@@ -0,0 +1,13 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    color-scheme: light;
+  }
+
+  body {
+    @apply font-display bg-slate-50 text-slate-900;
+  }
+}
diff --git a/apps/frontend/src/main.tsx b/apps/frontend/src/main.tsx
index f46c379..9b67590 100644
--- a/apps/frontend/src/main.tsx
+++ b/apps/frontend/src/main.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
+import "./index.css";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
diff --git a/apps/frontend/tailwind.config.cjs b/apps/frontend/tailwind.config.cjs
new file mode 100644
index 0000000..eadc21e
--- /dev/null
+++ b/apps/frontend/tailwind.config.cjs
@@ -0,0 +1,11 @@
+module.exports = {
+  content: ["./index.html", "./src/**/*.{ts,tsx}"],
+  theme: {
+    extend: {
+      fontFamily: {
+        display: ["Space Grotesk", "ui-sans-serif", "system-ui"],
+      },
+    },
+  },
+  plugins: [],
+};