diff --git a/front_files/index.css b/front_files/index.css
index e69de29..c85ec17 100644
--- a/front_files/index.css
+++ b/front_files/index.css
@@ -0,0 +1,204 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --bg: #0a3558;        /* ocean-ish blue */
+  --bg-accent: #0f4470;
+  --text: #f5f7fb;
+  --muted: #c3cfde;
+  --primary: #42b4ff;
+  --primary-hover: #2f9ce2;
+  --secondary: #ffffff;
+  --secondary-text: #0a3558;
+  --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.35);
+  --radius-lg: 18px;
+  --transition: 0.18s ease-out;
+  --font-main: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    sans-serif;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+body {
+  font-family: var(--font-main);
+  background: radial-gradient(circle at top, #1c5b90, var(--bg));
+  color: var(--text);
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+}
+
+/* Layout */
+
+.app {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 24px 16px;
+}
+
+/* Header */
+
+.app-header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding-bottom: 24px;
+}
+
+.logo {
+  font-size: 2.4rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  font-weight: 700;
+  color: #fafdff;
+  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
+}
+
+/* Main card */
+
+.app-main {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.card {
+  background: linear-gradient(135deg, var(--bg-accent), #0b2b44);
+  padding: 28px 24px;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-soft);
+  width: 100%;
+  max-width: 460px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.actions {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+/* Buttons + inputs */
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 12px 18px;
+  border-radius: 999px;
+  border: none;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: transform var(--transition), box-shadow var(--transition),
+    background-color var(--transition), color var(--transition),
+    border-color var(--transition);
+}
+
+.btn-primary {
+  background: var(--primary);
+  color: #ffffff;
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
+}
+
+.btn-primary:hover {
+  background: var(--primary-hover);
+  transform: translateY(-1px);
+  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45);
+}
+
+.btn-primary:active {
+  transform: translateY(0);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
+}
+
+.btn-secondary {
+  background: var(--secondary);
+  color: var(--secondary-text);
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
+}
+
+.btn-secondary:hover {
+  background: #f4f6fb;
+  transform: translateY(-1px);
+}
+
+.btn-secondary:active {
+  transform: translateY(0);
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
+}
+
+.label {
+  display: block;
+  font-size: 0.9rem;
+  color: var(--muted);
+  margin-bottom: 6px;
+}
+
+.input {
+  width: 100%;
+  padding: 10px 12px;
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  background: rgba(3, 16, 32, 0.5);
+  color: var(--text);
+  font-size: 0.95rem;
+  outline: none;
+  margin-bottom: 10px;
+  transition: border-color var(--transition), box-shadow var(--transition),
+    background-color var(--transition);
+}
+
+.input::placeholder {
+  color: rgba(195, 207, 222, 0.8);
+}
+
+.input:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 1px rgba(66, 180, 255, 0.7);
+  background: rgba(3, 18, 40, 0.9);
+}
+
+/* Divider */
+
+.divider {
+  text-align: center;
+  color: var(--muted);
+  font-size: 0.85rem;
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+  margin: 4px 0;
+}
+
+/* Join block */
+
+.join-section {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Responsive tweaks */
+
+@media (max-width: 480px) {
+  .logo {
+    font-size: 1.9rem;
+    letter-spacing: 0.1em;
+  }
+
+  .card {
+    padding: 22px 18px;
+  }
+}
diff --git a/front_files/index.html b/front_files/index.html
index cc67b22..3a63cad 100644
--- a/front_files/index.html
+++ b/front_files/index.html
@@ -1,3 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
 
+<head>
+    <meta charset="UTF-8" />
+    <title>Echo: True Peer-to-Peer file and text transfers</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="index.css" />
+</head>
 
-<title>Echo: True Peer-to-Peer file and text transfers</title>
\ No newline at end of file
+<body>
+    <div class="app">
+        <header class="app-header">
+            <h1 class="logo">Echo</h1>
+        </header>
+
+        <main class="app-main">
+            <section class="card">
+                <div class="actions">
+                    <button class="btn btn-primary" id="create-session-btn">
+                        Create a session
+                    </button>
+
+                    <div class="divider">or</div>
+
+                    <div class="join-section">
+                        <label for="session-id" class="label">Join a session</label>
+                        <input type="text" id="session-id" class="input" placeholder="Paste session ID here" />
+                        <button class="btn btn-secondary" id="join-session-btn">
+                            Join
+                        </button>
+                    </div>
+                </div>
+            </section>
+        </main>
+    </div>
+
+    <script src="index.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/front_files/index.js b/front_files/index.js
index e69de29..f7c3da1 100644
--- a/front_files/index.js
+++ b/front_files/index.js
@@ -0,0 +1 @@
+console.log("I actually wrote this!");
\ No newline at end of file