diff --git a/html/rogue/js/config.js b/html/rogue/js/config.js
index 399a8a5..90c1f49 100644
--- a/html/rogue/js/config.js
+++ b/html/rogue/js/config.js
@@ -26,8 +26,8 @@ const Config = {
 
     player: {
         MOVE_SPEED: 0.1,
-        SIZE_RATIO: 0.8,
-        VISION_RANGE: 3 // Number of hexes the player can see
+        SIZE_RATIO: 1/3,
+        VISION_RANGE: 3
     },
 
     camera: {
diff --git a/html/rogue/js/game.js b/html/rogue/js/game.js
index 5ce9f1e..918f8e5 100644
--- a/html/rogue/js/game.js
+++ b/html/rogue/js/game.js
@@ -25,6 +25,7 @@ function init() {
     
     requestAnimationFrame(gameLoop);
     FogOfWar.init();
+    Items.init();
 }
 
 function drawHex(ctx, x, y, hex) {
@@ -95,21 +96,39 @@ function gameLoop(currentTime) {
         drawHex(state.ctx, pixel.x, pixel.y, hex);
     });
     
+    // Draw items
+    Items.draw(state.ctx, HexGrid.toPixel.bind(HexGrid), Camera, HexGrid.SIZE);
+    
+    // Draw player
     player.draw(state.ctx, HexGrid.toPixel.bind(HexGrid), Camera, HexGrid.SIZE);
     
-    // Draw fog of war last
+    // Draw fog of war
     FogOfWar.draw(state.ctx);
     
+    // Draw inventory UI last
+    InventoryUI.draw(state.ctx);
+    
     requestAnimationFrame(gameLoop);
 }
 
 function handleClick(event) {
+    if (InventoryUI.isOpen) {
+        InventoryUI.toggleInventory();
+        return;
+    }
+    
     const rect = state.canvas.getBoundingClientRect();
     const x = event.clientX - rect.left;
     const y = event.clientY - rect.top;
     
     const hexCoord = HexGrid.fromPixel(x + Camera.x, y + Camera.y);
-    player.moveTo(hexCoord);
+    
+    // Check if clicking on player's position
+    if (hexCoord.q === player.position.q && hexCoord.r === player.position.r) {
+        InventoryUI.toggleInventory();
+    } else {
+        player.moveTo(hexCoord);
+    }
 }
 
 init();
\ No newline at end of file
diff --git a/html/rogue/js/inventory-ui.js b/html/rogue/js/inventory-ui.js
new file mode 100644
index 0000000..a5c7c3f
--- /dev/null
+++ b/html/rogue/js/inventory-ui.js
@@ -0,0 +1,54 @@
+const InventoryUI = {
+    isOpen: false,
+    
+    toggleInventory() {
+        this.isOpen = !this.isOpen;
+    },
+    
+    // Helper function to count items by type
+    getItemCounts() {
+        const counts = new Map();
+        
+        player.inventory.forEach(item => {
+            const itemName = item.type.name;
+            counts.set(itemName, (counts.get(itemName) || 0) + 1);
+        });
+        
+        return counts;
+    },
+    
+    draw(ctx) {
+        if (!this.isOpen) return;
+        
+        // Draw semi-transparent background
+        ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
+        ctx.fillRect(0, 0, state.canvas.width, state.canvas.height);
+        
+        // Draw inventory window
+        const padding = 20;
+        const width = 300;
+        const height = 400;
+        const x = (state.canvas.width - width) / 2;
+        const y = (state.canvas.height - height) / 2;
+        
+        // Draw window background
+        ctx.fillStyle = '#ffffff';
+        ctx.fillRect(x, y, width, height);
+        
+        // Draw title
+        ctx.fillStyle = '#000000';
+        ctx.font = '20px Arial';
+        ctx.fillText('Inventory', x + padding, y + padding + 20);
+        
+        // Get item counts and draw items with quantities
+        const itemCounts = this.getItemCounts();
+        let index = 0;
+        
+        itemCounts.forEach((count, itemName) => {
+            const itemY = y + padding + 60 + (index * 30);
+            ctx.font = '16px Arial';
+            ctx.fillText(`${itemName} x${count}`, x + padding, itemY);
+            index++;
+        });
+    }
+}; 
\ No newline at end of file
diff --git a/html/rogue/js/items.js b/html/rogue/js/items.js
new file mode 100644
index 0000000..dc6dc1e
--- /dev/null
+++ b/html/rogue/js/items.js
@@ -0,0 +1,63 @@
+const Items = {
+    items: new Map(), // Map of items on the grid, key is "q,r"
+    
+    // Item types
+    TYPES: {
+        COIN: {
+            name: 'Coin',
+            color: '#FFD700',
+            size: 0.2 // Size relative to hex
+        },
+        GEM: {
+            name: 'Gem',
+            color: '#50C878',
+            size: 0.25
+        }
+    },
+    
+    // Initialize items on the map
+    init() {
+        this.items.clear();
+        
+        // Add some random items
+        for (let i = 0; i < 10; i++) {
+            const q = Math.floor(Math.random() * HexGrid.GRID_SIZE - HexGrid.GRID_SIZE/2);
+            const r = Math.floor(Math.random() * HexGrid.GRID_SIZE - HexGrid.GRID_SIZE/2);
+            
+            // Don't place items at player start position
+            if (q !== 0 || r !== 0) {
+                const type = Math.random() < 0.5 ? this.TYPES.COIN : this.TYPES.GEM;
+                this.addItem(q, r, type);
+            }
+        }
+    },
+    
+    // Add an item to the map
+    addItem(q, r, type) {
+        this.items.set(`${q},${r}`, { type, q, r });
+    },
+    
+    // Remove an item from the map
+    removeItem(q, r) {
+        return this.items.delete(`${q},${r}`);
+    },
+    
+    // Get item at position
+    getItem(q, r) {
+        return this.items.get(`${q},${r}`);
+    },
+    
+    // Draw all items
+    draw(ctx, hexToPixel, camera, HEX_SIZE) {
+        this.items.forEach(item => {
+            const pixelPos = hexToPixel({ q: item.q, r: item.r });
+            const screenX = pixelPos.x - camera.x;
+            const screenY = pixelPos.y - camera.y;
+            
+            ctx.fillStyle = item.type.color;
+            ctx.beginPath();
+            ctx.arc(screenX, screenY, HEX_SIZE * item.type.size, 0, Math.PI * 2);
+            ctx.fill();
+        });
+    }
+}; 
\ No newline at end of file
diff --git a/html/rogue/js/player.js b/html/rogue/js/player.js
index 09984dc..3c1c383 100644
--- a/html/rogue/js/player.js
+++ b/html/rogue/js/player.js
@@ -5,31 +5,14 @@ const player = {
     path: [],                     // Array of hex coordinates to follow
     movementProgress: 0,          // Progress of current movement (0 to 1)
     moveSpeed: Config.player.MOVE_SPEED,              // Movement speed (0 to 1 per frame)
-    
-    // Animation properties
-    sprites: {
-        idle: null,
-        run: null
-    },
-    currentFrame: 0,
-    frameCount: 0,
-    FRAME_DELAY: 8, // Adjust this to control animation speed
-    SPRITE_WIDTH: 32, // Adjust these based on your sprite sheet dimensions
-    SPRITE_HEIGHT: 32,
-    IDLE_FRAMES: 6, // Number of frames in idle animation
-    RUN_FRAMES: 8,  // Number of frames in run animation
-    facingLeft: false,
+    inventory: [],
     
     // Initialize player
     init() {
         this.position = { q: 0, r: 0 };
         this.target = null;
         this.path = [];
-        
-        // Load sprites
-        this.sprites.idle = document.getElementById('catIdle');
-        this.sprites.run = document.getElementById('catRun');
-        
+        this.inventory = [];
         return this;
     },
 
@@ -112,6 +95,20 @@ const player = {
         }
     },
 
+    // Add item to inventory
+    addToInventory(item) {
+        this.inventory.push(item);
+    },
+
+    // Check for and collect items
+    checkForItems() {
+        const item = Items.getItem(this.position.q, this.position.r);
+        if (item) {
+            Items.removeItem(this.position.q, this.position.r);
+            this.addToInventory(item);
+        }
+    },
+
     // Update player position
     update() {
         if (this.target) {
@@ -123,6 +120,9 @@ const player = {
                 this.movementProgress = 0;
                 this.hasMoved = true;
                 
+                // Check for items when reaching new position
+                this.checkForItems();
+                
                 if (this.path.length > 0) {
                     this.target = this.path.shift();
                     this.movementProgress = 0;
@@ -151,50 +151,14 @@ const player = {
         const screenX = pixelPos.x - camera.x;
         const screenY = pixelPos.y - camera.y;
 
-        // Update animation frame
-        this.frameCount++;
-        if (this.frameCount >= this.FRAME_DELAY) {
-            this.frameCount = 0;
-            this.currentFrame++;
-            
-            // Reset frame counter based on current animation
-            const maxFrames = this.target ? this.RUN_FRAMES : this.IDLE_FRAMES;
-            if (this.currentFrame >= maxFrames) {
-                this.currentFrame = 0;
-            }
-        }
-
-        // Determine facing direction based on movement
-        if (this.target) {
-            this.facingLeft = (this.target.q - this.position.q) < 0;
-        }
-
-        // Draw the sprite
-        const sprite = this.target ? this.sprites.run : this.sprites.idle;
-        const scale = (HEX_SIZE * Config.player.SIZE_RATIO * 2) / this.SPRITE_HEIGHT;
+        ctx.fillStyle = Config.colors.PLAYER;
+        ctx.beginPath();
+        ctx.arc(screenX, screenY, HEX_SIZE * Config.player.SIZE_RATIO, 0, Math.PI * 2);
+        ctx.fill();
         
-        ctx.save();
-        ctx.translate(screenX, screenY);
-        if (this.facingLeft) {
-            ctx.scale(-1, 1);
-        }
-        
-        ctx.drawImage(
-            sprite,
-            this.currentFrame * this.SPRITE_WIDTH, // Source X
-            0,                                     // Source Y
-            this.SPRITE_WIDTH,                     // Source Width
-            this.SPRITE_HEIGHT,                    // Source Height
-            -this.SPRITE_WIDTH * scale / 2,        // Destination X
-            -this.SPRITE_HEIGHT * scale / 2,       // Destination Y
-            this.SPRITE_WIDTH * scale,             // Destination Width
-            this.SPRITE_HEIGHT * scale             // Destination Height
-        );
-        ctx.restore();
-
-        // Draw path (if needed)
+        // Draw path if needed
         if (this.path.length > 0) {
-            ctx.strokeStyle = Config.colors.PLAYER + '4D';
+            ctx.strokeStyle = Config.colors.PLAYER + '4D'; // 30% opacity version of player color
             ctx.beginPath();
             let lastPos = this.target || this.position;
             this.path.forEach(point => {