diff --git a/README.md b/README.md
new file mode 100644
index 0000000..10b2937
--- /dev/null
+++ b/README.md
@@ -0,0 +1,120 @@
+# Nokia 3310 Snake Game
+
+A faithful recreation of the classic Snake game from the Nokia 3310, built with pure HTML5, CSS3, and vanilla JavaScript.
+
+![Snake Game](https://img.shields.io/badge/Game-Snake-green)
+![Platform](https://img.shields.io/badge/Platform-Web-blue)
+![No Dependencies](https://img.shields.io/badge/Dependencies-None-brightgreen)
+
+## 🎮 Features
+
+- Classic grid-based Snake gameplay
+- Retro Nokia 3310 aesthetic with monochrome green display
+- Keyboard controls (Arrow keys or WASD)
+- On-screen button controls for mobile/touch devices
+- High score tracking with localStorage
+- Pause functionality
+- Progressive difficulty (speed increases with score)
+- Snake with animated eyes that follow direction
+
+## 🚀 How to Play
+
+1. **Open the game**: Simply open `snake.html` in any modern web browser
+2. **Start**: Click the "START GAME" button
+3. **Control the snake**: Use Arrow keys or on-screen buttons
+4. **Objective**: Eat the food (black squares) to grow and increase your score
+5. **Avoid**: Don't hit the walls or bite yourself!
+6. **Beat your record**: Try to achieve the highest score possible
+
+## ⌨️ Controls
+
+- **Arrow Keys** or **WASD** - Move the snake (Up, Down, Left, Right)
+- **Space** or **P** - Pause/Resume the game
+- **On-screen buttons** - Click/touch controls for mobile devices
+- **START button** - Start a new game or restart after game over
+
+## 📋 Game Rules
+
+1. The snake starts with 3 segments
+2. Each piece of food eaten:
+   - Adds 10 points to your score
+   - Makes the snake grow by 1 segment
+   - Slightly increases the game speed
+3. Game over conditions:
+   - Hitting any wall
+   - Snake colliding with itself
+4. Your high score is automatically saved
+
+## 🛠️ Technical Details
+
+- **Technology**: Pure HTML5, CSS3, and vanilla JavaScript (ES6+)
+- **Grid**: 20×15 cells (400×300 pixels)
+- **Rendering**: HTML5 Canvas API
+- **Frame Rate**: 60 FPS with fixed-timestep movement
+- **Storage**: LocalStorage for persistent high scores
+- **Dependencies**: None! Single self-contained HTML file
+
+## 🌐 Browser Compatibility
+
+Works in all modern browsers that support:
+- HTML5 Canvas
+- ES6 JavaScript
+- LocalStorage API
+
+Tested on:
+- Chrome/Edge (latest)
+- Firefox (latest)
+- Safari (latest)
+
+## 📁 File Structure
+
+```
+snake.html          # Complete game in a single file
+README.md           # This documentation
+```
+
+## 🎨 Nokia 3310 Aesthetic
+
+The game faithfully recreates the Nokia 3310 experience:
+- Monochrome green display (#c7d6a4)
+- Phone mockup with speaker slot
+- Retro button controls
+- Classic squared grid movement
+- Simple but addictive gameplay
+
+## 🎯 Tips & Tricks
+
+1. **Plan ahead**: Look where the food will spawn and plan your route
+2. **Use the edges**: Corner the food using walls strategically
+3. **Avoid traps**: Don't box yourself in as you grow longer
+4. **Smooth movement**: The snake can't reverse 180° instantly
+5. **Speed increases**: The game gets faster as you score more points
+
+## 🏆 Scoring
+
+- **Food eaten**: +10 points each
+- **High score**: Automatically saved to your browser
+- **Speed bonus**: Game becomes more challenging as score increases
+
+## 🚢 Deployment
+
+The game is completely self-contained and can be:
+
+1. **Local**: Open `snake.html` directly in any browser
+2. **GitHub Pages**: Upload and enable GitHub Pages
+3. **Web Server**: Host on any static web server
+4. **Share**: Send the single HTML file to anyone
+
+No build process, compilation, or dependencies required!
+
+## 📜 License
+
+This is a learning/recreation project. Free to use, modify, and distribute.
+
+## 🎓 Credits
+
+Inspired by the legendary Snake game from the Nokia 3310 (1998) that became a cultural phenomenon and introduced millions to mobile gaming.
+
+---
+
+**Enjoy the nostalgia!** 🐍📱
diff --git a/snake.html b/snake.html
new file mode 100644
index 0000000..1a09c35
--- /dev/null
+++ b/snake.html
@@ -0,0 +1,470 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Classic Nokia 3310 Snake game recreated with HTML5">
+    <meta name="keywords" content="snake, game, nokia, 3310, retro, classic">
+    <meta name="author" content="Nokia Snake Recreation">
+    <title>Snake - Nokia 3310 Edition</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            font-family: 'Courier New', monospace;
+        }
+        
+        .phone {
+            background: #2c3e50;
+            border-radius: 20px;
+            padding: 40px 20px;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+            position: relative;
+        }
+        
+        .phone::before {
+            content: '';
+            position: absolute;
+            top: 15px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 60px;
+            height: 8px;
+            background: #1a252f;
+            border-radius: 4px;
+        }
+        
+        .screen {
+            background: #9cb770;
+            padding: 10px;
+            border-radius: 5px;
+            box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3);
+        }
+        
+        canvas {
+            display: block;
+            background: #c7d6a4;
+            border: 2px solid #8b9d5f;
+        }
+        
+        .info {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 10px;
+            color: #2c3e50;
+            font-size: 14px;
+            font-weight: bold;
+            padding: 0 5px;
+        }
+        
+        .controls {
+            margin-top: 20px;
+            text-align: center;
+            color: #ecf0f1;
+        }
+        
+        .controls h3 {
+            margin-bottom: 10px;
+            font-size: 14px;
+        }
+        
+        .controls p {
+            font-size: 12px;
+            margin: 5px 0;
+        }
+        
+        .button-grid {
+            display: grid;
+            grid-template-columns: repeat(3, 60px);
+            gap: 5px;
+            margin: 20px auto;
+            width: fit-content;
+        }
+        
+        .btn {
+            background: #34495e;
+            border: 2px solid #1a252f;
+            border-radius: 50%;
+            width: 60px;
+            height: 60px;
+            color: #ecf0f1;
+            font-size: 20px;
+            cursor: pointer;
+            transition: all 0.1s;
+        }
+        
+        .btn:active {
+            background: #1a252f;
+            transform: scale(0.95);
+        }
+        
+        .btn:nth-child(2) { grid-column: 2; }
+        .btn:nth-child(3) { grid-column: 1; grid-row: 2; }
+        .btn:nth-child(4) { grid-column: 2; grid-row: 2; }
+        .btn:nth-child(5) { grid-column: 3; grid-row: 2; }
+        
+        #startBtn {
+            background: #27ae60;
+            margin: 10px auto;
+            display: block;
+            padding: 10px 30px;
+            border: none;
+            border-radius: 5px;
+            color: white;
+            font-weight: bold;
+            cursor: pointer;
+        }
+        
+        #startBtn:hover {
+            background: #229954;
+        }
+    </style>
+</head>
+<body>
+    <div class="phone">
+        <div class="screen">
+            <canvas id="gameCanvas" width="400" height="300"></canvas>
+            <div class="info">
+                <span>Score: <span id="score">0</span></span>
+                <span>High: <span id="highScore">0</span></span>
+            </div>
+        </div>
+        <div class="controls">
+            <h3>CONTROLS</h3>
+            <p>Use Arrow Keys or Buttons</p>
+            <div class="button-grid">
+                <button class="btn" id="upBtn">↑</button>
+                <button class="btn" id="leftBtn">←</button>
+                <button class="btn" id="downBtn">↓</button>
+                <button class="btn" id="rightBtn">→</button>
+                <button class="btn" id="pauseBtn">⏸</button>
+            </div>
+            <button id="startBtn">START GAME</button>
+        </div>
+    </div>
+    
+    <script>
+        // Canvas setup
+        const canvas = document.getElementById('gameCanvas');
+        const ctx = canvas.getContext('2d');
+
+        // Game constants
+        const GRID_SIZE = 20;
+        const CELL_SIZE = 20;
+        const GRID_WIDTH = canvas.width / CELL_SIZE;
+        const GRID_HEIGHT = canvas.height / CELL_SIZE;
+        const INITIAL_SPEED = 150;
+        const SPEED_INCREASE = 5;
+
+        // Game state
+        let snake = [];
+        let direction = { x: 1, y: 0 };
+        let nextDirection = { x: 1, y: 0 };
+        let food = { x: 0, y: 0 };
+        let score = 0;
+        let highScore = localStorage.getItem('snakeHighScore') || 0;
+        let gameRunning = false;
+        let gamePaused = false;
+        let speed = INITIAL_SPEED;
+        let lastMoveTime = 0;
+        let animationFrameId = null;
+
+        // Update high score display
+        document.getElementById('highScore').textContent = highScore;
+
+        // Initialize snake
+        function initSnake() {
+            snake = [
+                { x: 10, y: 7 },
+                { x: 9, y: 7 },
+                { x: 8, y: 7 }
+            ];
+            direction = { x: 1, y: 0 };
+            nextDirection = { x: 1, y: 0 };
+            speed = INITIAL_SPEED;
+        }
+
+        // Generate food at random position
+        function generateFood() {
+            let newFood;
+            do {
+                newFood = {
+                    x: Math.floor(Math.random() * GRID_WIDTH),
+                    y: Math.floor(Math.random() * GRID_HEIGHT)
+                };
+            } while (snake.some(segment => segment.x === newFood.x && segment.y === newFood.y));
+            food = newFood;
+        }
+
+        // Update snake position
+        function moveSnake() {
+            direction = { ...nextDirection };
+            
+            const head = { 
+                x: snake[0].x + direction.x, 
+                y: snake[0].y + direction.y 
+            };
+            
+            // Check wall collision
+            if (head.x < 0 || head.x >= GRID_WIDTH || 
+                head.y < 0 || head.y >= GRID_HEIGHT) {
+                gameOver();
+                return;
+            }
+            
+            // Check self collision
+            if (snake.some(segment => segment.x === head.x && segment.y === head.y)) {
+                gameOver();
+                return;
+            }
+            
+            snake.unshift(head);
+            
+            // Check if food eaten
+            if (head.x === food.x && head.y === food.y) {
+                score += 10;
+                document.getElementById('score').textContent = score;
+                speed = Math.max(50, speed - SPEED_INCREASE);
+                generateFood();
+                
+                if (score > highScore) {
+                    highScore = score;
+                    localStorage.setItem('snakeHighScore', highScore);
+                    document.getElementById('highScore').textContent = highScore;
+                }
+            } else {
+                snake.pop();
+            }
+        }
+
+        // Change direction (prevent 180-degree turns)
+        function changeDirection(newDirection) {
+            if (newDirection.x === -direction.x && newDirection.y === -direction.y) {
+                return;
+            }
+            nextDirection = newDirection;
+        }
+
+        // Game over
+        function gameOver() {
+            gameRunning = false;
+            cancelAnimationFrame(animationFrameId);
+            
+            ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            
+            ctx.fillStyle = '#2c3e50';
+            ctx.font = 'bold 30px Courier New';
+            ctx.textAlign = 'center';
+            ctx.fillText('GAME OVER', canvas.width / 2, canvas.height / 2 - 20);
+            
+            ctx.font = '20px Courier New';
+            ctx.fillText('Score: ' + score, canvas.width / 2, canvas.height / 2 + 20);
+            
+            ctx.font = '16px Courier New';
+            ctx.fillText('Press START to play again', canvas.width / 2, canvas.height / 2 + 50);
+        }
+
+        // Draw everything
+        function draw() {
+            ctx.fillStyle = '#c7d6a4';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            
+            // Draw grid (subtle)
+            ctx.strokeStyle = 'rgba(139, 157, 95, 0.1)';
+            ctx.lineWidth = 1;
+            for (let x = 0; x <= canvas.width; x += CELL_SIZE) {
+                ctx.beginPath();
+                ctx.moveTo(x, 0);
+                ctx.lineTo(x, canvas.height);
+                ctx.stroke();
+            }
+            for (let y = 0; y <= canvas.height; y += CELL_SIZE) {
+                ctx.beginPath();
+                ctx.moveTo(0, y);
+                ctx.lineTo(canvas.width, y);
+                ctx.stroke();
+            }
+            
+            // Draw food
+            ctx.fillStyle = '#2c3e50';
+            ctx.fillRect(
+                food.x * CELL_SIZE + 2,
+                food.y * CELL_SIZE + 2,
+                CELL_SIZE - 4,
+                CELL_SIZE - 4
+            );
+            
+            // Draw snake
+            snake.forEach((segment, index) => {
+                ctx.fillStyle = index === 0 ? '#2c3e50' : '#34495e';
+                ctx.fillRect(
+                    segment.x * CELL_SIZE + 1,
+                    segment.y * CELL_SIZE + 1,
+                    CELL_SIZE - 2,
+                    CELL_SIZE - 2
+                );
+                
+                // Add eyes to head
+                if (index === 0) {
+                    ctx.fillStyle = '#c7d6a4';
+                    const eyeSize = 3;
+                    
+                    if (direction.x === 1) {
+                        ctx.fillRect(segment.x * CELL_SIZE + 13, segment.y * CELL_SIZE + 5, eyeSize, eyeSize);
+                        ctx.fillRect(segment.x * CELL_SIZE + 13, segment.y * CELL_SIZE + 12, eyeSize, eyeSize);
+                    } else if (direction.x === -1) {
+                        ctx.fillRect(segment.x * CELL_SIZE + 4, segment.y * CELL_SIZE + 5, eyeSize, eyeSize);
+                        ctx.fillRect(segment.x * CELL_SIZE + 4, segment.y * CELL_SIZE + 12, eyeSize, eyeSize);
+                    } else if (direction.y === -1) {
+                        ctx.fillRect(segment.x * CELL_SIZE + 5, segment.y * CELL_SIZE + 4, eyeSize, eyeSize);
+                        ctx.fillRect(segment.x * CELL_SIZE + 12, segment.y * CELL_SIZE + 4, eyeSize, eyeSize);
+                    } else {
+                        ctx.fillRect(segment.x * CELL_SIZE + 5, segment.y * CELL_SIZE + 13, eyeSize, eyeSize);
+                        ctx.fillRect(segment.x * CELL_SIZE + 12, segment.y * CELL_SIZE + 13, eyeSize, eyeSize);
+                    }
+                }
+            });
+        }
+
+        // Draw start screen
+        function drawStartScreen() {
+            ctx.fillStyle = '#c7d6a4';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            
+            ctx.fillStyle = '#2c3e50';
+            ctx.font = 'bold 40px Courier New';
+            ctx.textAlign = 'center';
+            ctx.fillText('SNAKE', canvas.width / 2, canvas.height / 2 - 40);
+            
+            ctx.font = '20px Courier New';
+            ctx.fillText('Nokia 3310 Edition', canvas.width / 2, canvas.height / 2);
+            
+            ctx.font = '16px Courier New';
+            ctx.fillText('Press START to begin', canvas.width / 2, canvas.height / 2 + 40);
+        }
+
+        // Main game loop
+        function gameLoop(timestamp) {
+            if (!gameRunning || gamePaused) {
+                if (gameRunning) {
+                    animationFrameId = requestAnimationFrame(gameLoop);
+                }
+                return;
+            }
+            
+            if (timestamp - lastMoveTime >= speed) {
+                moveSnake();
+                lastMoveTime = timestamp;
+            }
+            
+            draw();
+            animationFrameId = requestAnimationFrame(gameLoop);
+        }
+
+        // Start game
+        function startGame() {
+            score = 0;
+            document.getElementById('score').textContent = score;
+            gameRunning = true;
+            gamePaused = false;
+            
+            initSnake();
+            generateFood();
+            lastMoveTime = 0;
+            
+            document.getElementById('startBtn').textContent = 'RESTART';
+            animationFrameId = requestAnimationFrame(gameLoop);
+        }
+
+        // Toggle pause
+        function togglePause() {
+            if (!gameRunning) return;
+            
+            gamePaused = !gamePaused;
+            
+            if (gamePaused) {
+                ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+                ctx.fillStyle = '#2c3e50';
+                ctx.font = 'bold 30px Courier New';
+                ctx.textAlign = 'center';
+                ctx.fillText('PAUSED', canvas.width / 2, canvas.height / 2);
+            } else {
+                lastMoveTime = performance.now();
+                animationFrameId = requestAnimationFrame(gameLoop);
+            }
+        }
+
+        // Keyboard controls
+        document.addEventListener('keydown', (e) => {
+            if (!gameRunning) return;
+            
+            switch(e.key) {
+                case 'ArrowUp':
+                case 'w':
+                case 'W':
+                    e.preventDefault();
+                    changeDirection({ x: 0, y: -1 });
+                    break;
+                case 'ArrowDown':
+                case 's':
+                case 'S':
+                    e.preventDefault();
+                    changeDirection({ x: 0, y: 1 });
+                    break;
+                case 'ArrowLeft':
+                case 'a':
+                case 'A':
+                    e.preventDefault();
+                    changeDirection({ x: -1, y: 0 });
+                    break;
+                case 'ArrowRight':
+                case 'd':
+                case 'D':
+                    e.preventDefault();
+                    changeDirection({ x: 1, y: 0 });
+                    break;
+                case ' ':
+                case 'p':
+                case 'P':
+                    e.preventDefault();
+                    togglePause();
+                    break;
+            }
+        });
+
+        // Button controls
+        document.getElementById('upBtn').addEventListener('click', () => {
+            changeDirection({ x: 0, y: -1 });
+        });
+
+        document.getElementById('downBtn').addEventListener('click', () => {
+            changeDirection({ x: 0, y: 1 });
+        });
+
+        document.getElementById('leftBtn').addEventListener('click', () => {
+            changeDirection({ x: -1, y: 0 });
+        });
+
+        document.getElementById('rightBtn').addEventListener('click', () => {
+            changeDirection({ x: 1, y: 0 });
+        });
+
+        document.getElementById('pauseBtn').addEventListener('click', togglePause);
+        document.getElementById('startBtn').addEventListener('click', startGame);
+
+        // Initial draw
+        drawStartScreen();
+    </script>
+</body>
+</html>