diff --git a/home.html b/home.html
new file mode 100644
index 0000000..d7e30c0
--- /dev/null
+++ b/home.html
@@ -0,0 +1,182 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>شرطنج</title>
+    <style>
+        * {
+            padding: 0;
+            margin: 0;
+            box-sizing: border-box;
+            font-family: Arial, Helvetica, sans-serif;
+            color: 262942;
+        }
+
+        body {
+            background-color: #f8e8d3;
+        }
+
+        header {
+            display: flex;
+            justify-content: center;
+            width: 100vw;
+            user-select: none;
+            height: 230px;
+        }
+
+        .center {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            margin: 24px auto;
+            gap: 8px;
+            max-width: 70%;
+        }
+
+        .or {
+            width: 100%;
+            position: relative;
+            margin: 10px 0;
+        }
+
+        .or::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 0;
+            width: 100%;
+            height: 2px;
+            transform: translateY(-50%);
+            background: rgba(92, 92, 92, 0.664);
+        }
+
+        .or::after {
+            content: 'OR';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            text-align: center;
+            font-size: 1rem;
+            padding: 8px;
+            font-weight: bolder;
+            background: #f8e8d3;
+
+            color: rgba(92, 92, 92, 0.664);
+        }
+
+        .code {
+            padding: 16px;
+            border: none;
+            border-bottom: 2px solid rgba(92, 92, 92, 0.664);
+            font-size: 1.5rem;
+            text-align: center;
+            letter-spacing: 8px;
+            text-transform: lowercase;
+            width: 200px;
+            outline: none;
+        }
+
+        .button {
+            background: rgb(85, 122, 75);
+            color: rgb(255, 255, 255);
+            font-family: 'Times New Roman', Times, serif;
+            font-weight: lighter;
+            text-transform: uppercase;
+            font-size: 1.3rem;
+            padding: 12px 30px;
+            cursor: pointer;
+            border: 0;
+            outline: none;
+        }
+
+        .group {
+            display: flex;
+            height: 60px;
+            gap: 4px;
+        }
+
+        .group * {
+            height: 60px;
+            margin-bottom: 4px;
+        }
+
+        .vs {
+            height: calc(100% - 8px);
+            width: 2px;
+            margin: 4px;
+            background: rgba(92, 92, 92, 0.664);
+        }
+
+        .code::placeholder {
+            letter-spacing: normal;
+        }
+
+        .background {
+            width: 100%;
+            aspect-ratio: 16/9;
+            z-index: -1000;
+            bottom: 0;
+            position: fixed;
+            image-rendering: pixelated;
+            background-image: url("/static/background.png");
+            background-size: contain;
+            background-repeat: no-repeat;
+
+        }
+    </style>
+    <link rel="icon" href="/favicon.ico" type="image/x-icon">
+</head>
+
+<body>
+    <header>
+        <img src="/static/logo.webp" alt="">
+    </header>
+
+    <div class="background"></div>
+
+    <div class="center">
+        <div class="group">
+            <button id="create" class="button">create</button>
+            <div class="vs"></div>
+            <input type="text" id="code" class="code" placeholder="invite code" pattern="[a-z0-9A-Z]{4}" maxlength="4">
+            <button id="join" class="button">join</button>
+        </div>
+        <div class="or"></div>
+        Public games not added yet.
+    </div>
+
+    <script>
+
+        document.addEventListener('DOMContentLoaded', () => {
+            const code = document.getElementById("code");
+            const pat = new RegExp("^[a-z0-9]{4}$")
+            document.getElementById("join").addEventListener("click", () => {
+                if (!reg.test(code.value)) {
+                    alert("Invalid ID");
+                } else {
+                    window.location.href = window.location.origin + "/" + code.value;
+                }
+            });
+            document.getElementById("create").addEventListener("click", () => {
+                fetch('/create_room', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                })
+                    .then((response) => response.json())
+                    .then((data) => {
+
+                        window.location.href = window.location.origin + "/" + data.id;
+                    }).catch((error) => {
+                        console.log(error);
+                    })
+            });
+        });
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/background.png b/static/background.png
new file mode 100644
index 0000000..02b0383
Binary files /dev/null and b/static/background.png differ
