diff --git a/index.html b/index.html
index da3d258..3456a20 100644
--- a/index.html
+++ b/index.html
@@ -1,9 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>شرطنج</title>
     <style>
         * {
             padding: 0;
@@ -12,68 +13,379 @@
             font-family: Arial, Helvetica, sans-serif;
             color: 262942;
         }
+
         body {
             background-color: #f8e8d3;
         }
-        .title {
-            font-family: 'Times New Roman', Times, serif;
-            text-transform: lowercase;
-            letter-spacing: 0.25rem;
-            font-size: 4rem;
-            font-weight: 100;
-            color: #48517b;
-            padding: 0 0.5rem 0.5rem 0.5rem;
-            display: block;
-            width: min-content;
-            border-bottom: 2px solid #48517b;
-        }
+
         header {
             display: flex;
-            padding: 1rem;
             justify-content: center;
             width: 100vw;
             user-select: none;
+            height: 230px;
         }
-        #board {
-            width: 38rem;
-            height: 38rem;
-            display: grid;
-            grid-template-columns: repeat(8, 1fr);
-            cursor: not-allowed;
-        }
+
         .center {
             display: flex;
             justify-content: center;
+            margin: 24px 0;
+        }
+
+        .join-menu {
+            display: flex;
+            width: min-content;
+            border-radius: 8px;
+            overflow: hidden;
+            border: 1px solid #48517b56;
+        }
+
+        .join-menu * {
+            border-radius: 0;
+        }
+
+        input,
+        button {
+            outline: none;
+            border: 0;
+            border-radius: 8px;
+        }
+
+        input {
+            padding: 8px;
+        }
+
+        button {
+            padding: 8px 24px;
+            cursor: pointer;
+        }
+
+        .piece {
+            width: 100%;
+            height: 100%;
+            z-index: 20;
+            position: relative;
+            pointer-events: none;
+        }
+
+        .game {
+            width: 600px;
+            height: 600px;
         }
     </style>
 </head>
+
 <body>
     <header>
-        <h1 class="title">shatranj</h1>
+        <img src="/static/logo.png" alt="">
     </header>
     <div class="center">
-        <div id="board">
-            
-        </div>
+        <div id="join-menu" class="join-menu"><input type="text" id="room-id" placeholder="Room ID"><button
+                id="join-submit">Join</button></div>
+    </div>
+    <div class="center">
+        <canvas class="game" id="canvas"></canvas>
     </div>
     <script>
-        const container = document.getElementById("board");
+        document.addEventListener('DOMContentLoaded', () => {
+            const canvas = document.getElementById('canvas');
+            canvas.width = canvas.clientWidth;
+            canvas.height = canvas.clientHeight;
+            const ctx = canvas.getContext('2d');
 
-        const cols = ["A", "B", "C", "D", "E", "F", "G", "H"];
+            const width = canvas.width;
+            const height = canvas.height;
 
-        for (let i = 0; i < 64; i++) {
-            let col = i % 8;
-            let row = Math.floor(i/8);
-            const div = document.createElement("div");
-            div.className = "house";
-            div.id = cols[col] + (row+1).toString()
-            if (i % 2 == row % 2) {
-                div.style.backgroundColor = "#262942"
-            } else {
-                div.style.backgroundColor = "#faf5f0"
+            const primary = '#f0d9b5';
+            const accent = '#b58863';
+
+            ctx.font = 'bolder 16px Arial';
+
+            let mouse = [0, 0];
+            let mHouse = [0, 0];
+            const textures = {};
+
+            let color = 0;
+            let turn = 0;
+            let ready = false;
+            let letterMap = '        ';
+            let numberMap = '        ';
+            let board = undefined;
+            let UID = undefined;
+            let ROOM_ID = undefined;
+
+            let selected = undefined;
+            let moves = [];
+
+            canvas.addEventListener('mousemove', (e) => {
+                const rect = canvas.getBoundingClientRect();
+                const x = ((e.clientX - rect.left) / rect.width) * width;
+                const y = ((e.clientY - rect.top) / rect.height) * height;
+                mouse = [x, y];
+                i = Math.floor((x / width) * 8);
+                j = Math.floor((y / height) * 8);
+                if (ready) {
+                    canvas.style.cursor = 'default';
+                    if (board) {
+                        if (color == 0) {
+                            j = 7 - j;
+                        } else {
+                            i = 7 - i;
+                        }
+                        mHouse = [i, j];
+                        if (board[j][i] !== "E" && (board[j][i] === board[j][i].toUpperCase() ? 0 : 1) === color && turn == color) {
+                            canvas.style.cursor = 'pointer';
+                        }
+                        moves.forEach(move => {
+                            if (move[0] == i && move[1] == j) {
+                                canvas.style.cursor = 'pointer';
+                            }
+                        })
+                    }
+                } else {
+                    canvas.style.cursor = 'not-allowed';
+                }
+            });
+
+            canvas.addEventListener('mouseup', (e) => {
+                i = mHouse[0];
+                j = mHouse[1];
+                if (ready && board) {
+                    console.log(turn);
+                    console.log(color);
+                    console.log(selected);
+                    if (board[j][i] !== "E" && (board[j][i] === board[j][i].toUpperCase() ? 0 : 1) === color && turn == color) {
+
+                        selected = [i, j];
+                        moves = [];
+                        fetch('{{ API_ROOT }}/moves/' + ROOM_ID, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                            body: JSON.stringify({ from: "ABCDEFGH"[i] + "12345678"[j] })
+                        })
+                            .then((response) => response.json())
+                            .then((data) => {
+                                moves_str = data.moves.split(",");
+                                console.log(data.moves);
+                                moves_str.forEach(move => {
+                                    moves.push(["abcdefgh".indexOf(move[0].toLowerCase()), "12345678".indexOf(move[1])])
+                                });
+                            })
+                            .catch((error) => console.error('Error:', error));
+                    } else if (turn == color && selected) {
+                        moves.forEach(move => {
+                            console.log(move);
+                            if (move[0] == i && move[1] == j) {
+                                console.log("YAY");
+                                fetch('{{ API_ROOT }}/move/' + ROOM_ID, {
+                                    method: 'POST',
+                                    headers: {
+                                        'Content-Type': 'application/json',
+                                    },
+                                    body: JSON.stringify({ uid: UID, from: "ABCDEFGH"[selected[0]] + "12345678"[selected[1]], to: "ABCDEFGH"[i] + "12345678"[j] })
+                                })
+                                    .then((response) => response.json())
+                                    .then((data) => {
+                                        board = data.board.grid;
+                                        console.log(data);
+                                        selected = undefined;
+                                        moves = [];
+                                    })
+                                    .catch((error) => console.error('Error:', error));
+                            }
+                        });
+                    } else {
+                        moves = [];
+                        selected = undefined;
+                    }
+                }
+            });
+
+            function update() {
+                if (ROOM_ID) {
+                    fetch('{{ API_ROOT }}/poll/' + ROOM_ID, {
+                        method: 'GET',
+                    })
+                        .then((response) => response.json())
+                        .then((data) => {
+                            ready = data.ready;
+                            turn = data.turn;
+                            board = data.board.grid;
+                        })
+                        .catch((error) => console.error('Error:', error));
+                }
             }
-            container.appendChild(div);
-        }
+
+            setInterval(update, 1500);
+
+            function extractIdFromPath() {
+                const currentPath = window.location.pathname;
+
+                const idRegex = /^\/([^/]+)$/;
+
+                const match = currentPath.match(idRegex);
+
+                if (match) {
+                    const extractedId = match[1];
+                    return extractedId;
+                } else {
+                    return null;
+                }
+            }
+
+            function join(rid) {
+                if (rid.length > 0 && /^[a-zA-Z0-9_-]+$/.test(rid)) {
+                    fetch('{{ API_ROOT }}/join/' + rid, {
+                        method: 'POST',
+                    })
+                        .then((response) => response.json())
+                        .then((data) => {
+                            if (data.code === "FULL") {
+                                alert("Game is full you can only spectate.");
+                            } else {
+                                UID = data.id;
+                                color = data.color;
+                                ready = data.ready;
+                                turn = data.turn;
+                            }
+                            ROOM_ID = rid;
+                            board = data.board.grid;
+                            numberMap = "12345678";
+                            letterMap = "abcdefgh";
+                            document.getElementById('join-menu').outerHTML = '';
+                            const urlID = extractIdFromPath();
+                            if (urlID == null) {
+                                history.pushState({ pageId: ROOM_ID }, '', `/${ROOM_ID}`);
+                            }
+                        })
+                        .catch((error) => console.error('Error:', error));
+                } else {
+                    alert("Invalid Room ID");
+                }
+            }
+
+            const urlID = extractIdFromPath();
+            if (urlID != null) {
+                join(urlID);
+            }
+
+            document.getElementById('join-submit').onclick = () => {
+                let rid = document.getElementById('room-id').value.trim();
+                join(rid);
+            };
+
+            function drawCenter(texture, x, y, width, height, padding) {
+                ctx.drawImage(
+                    texture, x + padding, y + padding, width - padding * 2,
+                    height - padding * 2);
+            }
+
+            function draw() {
+                ctx.clearRect(0, 0, width, height);
+                const w = width / 8;
+                const h = height / 8;
+                for (let i = 0; i < 8; i++) {
+                    for (let j = 0; j < 8; j++) {
+                        let I = i;
+                        let J = j;
+                        if (color == 0) {
+                            J = 7 - J;
+                        } else {
+                            I = 7 - I;
+                        }
+                        ctx.beginPath();
+                        if ((i * 8 + j) % 2 == i % 2) {
+                            ctx.fillStyle = primary;
+                        } else {
+                            ctx.fillStyle = accent;
+                        }
+                        ctx.rect(i * w, j * h, w, h);
+                        ctx.fill();
+                        if (selected && selected[0] == I && selected[1] == J) {
+                            ctx.fillStyle = "#00f0f0aa"
+                            ctx.rect(i * w, j * h, w, h);
+                            ctx.fill();
+                        }
+                        moves.forEach(move => {
+                            if (move[0] == I && move[1] == J) {
+                                if (board[J][I] !== 'E') {
+                                    ctx.fillStyle = "#fa2026aa"
+                                } else {
+                                    ctx.fillStyle = "#f0f000aa"
+                                }
+                                ctx.rect(i * w, j * h, w, h);
+                                ctx.fill();
+                            }
+                        });
+                        if ((i * 8 + j) % 2 == i % 2) {
+                            ctx.fillStyle = accent;
+                        } else {
+                            ctx.fillStyle = primary;
+                        }
+                        if (i == 7) {
+                            ctx.fillText(numberMap[J], i * w + w - 16, j * h + 16);
+                        }
+                        if (j == 7) {
+                            ctx.fillText(letterMap[I], i * w + 6, j * h + h - 6);
+                        }
+                        if (board) {
+                            if (board[J][I] !== 'E') {
+                                drawCenter(textures[board[J][I]], i * w, j * h, w, h, 6);
+                            }
+                        }
+                    }
+                }
+                // ctx.beginPath();
+                // ctx.fillStyle = 'red';
+                // ctx.arc(mouse[0], mouse[1], 6, 0, Math.PI * 2);
+                // ctx.fill();
+            }
+
+            function loop() {
+                draw();
+                requestAnimationFrame(loop);
+            }
+
+            const assets = {
+                p: '/static/black_pawn.png',
+                r: '/static/black_rook.png',
+                c: '/static/black_castle.png',
+                b: '/static/black_bishop.png',
+                k: '/static/black_king.png',
+                q: '/static/black_queen.png',
+
+                P: '/static/white_pawn.png',
+                R: '/static/white_rook.png',
+                C: '/static/white_castle.png',
+                B: '/static/white_bishop.png',
+                K: '/static/white_king.png',
+                Q: '/static/white_queen.png',
+            };
+
+            const loadPromises = Object.entries(assets).map(([key, src]) => {
+                return new Promise((resolve, reject) => {
+                    const img = new Image();
+                    img.src = src;
+                    img.onload = () => resolve({ key, img });
+                    img.onerror = () => reject(new Error(`Failed to load ${src}`));
+                });
+            });
+
+            Promise.all(loadPromises)
+                .then((loadedAssets) => {
+                    loadedAssets.forEach(({ key, img }) => {
+                        textures[key] = img;
+                    });
+                    loop();
+                })
+                .catch((err) => {
+                    console.error('Failed to load assets:', err);
+                });
+        });
+
     </script>
 </body>
+
 </html>
\ No newline at end of file
