===================================================================
--- original.js
+++ change.js
@@ -1,7 +1,22 @@
 /**** 
 * Classes
 ****/
+var BuildableItemIcon = Container.expand(function (type, x, y) {
+	var self = Container.call(this);
+	self.type = type;
+	self.asset = self.attachAsset(type, {
+		anchorX: 0.5,
+		anchorY: 0.5,
+		x: x,
+		y: y
+	});
+	self.asset.on('down', function () {
+		console.log('Buildable item ' + type + ' selected.');
+		// Add logic to handle the building of the selected item
+	});
+	return self;
+});
 // Initialize game elements
 // Map class to represent the grid-based map system
 var Map = Container.expand(function () {
 	var self = Container.call(this);
@@ -76,14 +91,11 @@
 		// Return the path from start to end
 	};
 	self.lastInputPosition = null;
 	self.handleInput = function (input) {
-		console.log("Clicked " + input.x + ',' + input.y);
-		self.currentViewCenter.x = input.x;
-		self.currentViewCenter.y = input.y;
 		// Clamp the view center to the map boundaries
-		self.currentViewCenter.x = Math.max(14, Math.min(self.currentViewCenter.x, self.cells.length - 7));
-		self.currentViewCenter.y = Math.max(14, Math.min(self.currentViewCenter.y, self.cells[0].length - 9));
+		self.currentViewCenter.x = Math.max(14, Math.min(input.x, mapXSize - 7));
+		self.currentViewCenter.y = Math.max(14, Math.min(input.y, mapYSize - 9));
 		// Update the Text2 object with the new coordinates
 		self.viewCenterText.setText(self.currentViewCenter.x + ', ' + self.currentViewCenter.y);
 	};
 	self.checkCollisions = function () {
@@ -117,14 +129,15 @@
 	self.asset = self.attachAsset('selectionCross', {
 		anchorX: 0.5,
 		anchorY: 0.5
 	});
+	self.alpha = 0.6;
 	self.visible = false;
 	self.updatePosition = function (x, y) {
 		console.log('SelectionMarker updated to position:', x, y);
 		var viewSize = Math.ceil(Math.max(game.width, game.height) / 2 / 100);
-		self.x = (x - gameMap.currentViewCenter.x) * 100;
-		self.y = (y - gameMap.currentViewCenter.y) * 100;
+		self.x = x - (gameMap.currentViewCenter.x - 15) * 100;
+		self.y = y - (gameMap.currentViewCenter.y - 15) * 100;
 		self.visible = true;
 	};
 	self.hide = function () {
 		console.log('SelectionMarker hidden');
@@ -157,8 +170,9 @@
 	self.asset.on('down', function () {
 		currentSelection = self;
 		selectionMarker.updatePosition(self.x, self.y);
 		console.log("Building selected: P" + self.playerId + ' ' + self.type + " at cell " + self.cellX + "," + self.cellY);
+		displayBuildableItems();
 		updateActionBoard();
 	});
 	return self;
 });
@@ -206,8 +220,21 @@
 
 /**** 
 * Game Code
 ****/
+function displayBuildableItems() {
+	if (!currentSelection || !currentSelection.buildable) {
+		return;
+	}
+	var buildableItems = currentSelection.buildable;
+	var iconX = 100; // Starting X position for the first icon
+	var iconY = game.height - 150; // Y position for all icons
+	buildableItems.forEach(function (itemType) {
+		var icon = new BuildableItemIcon(itemType, iconX, iconY);
+		game.addChild(icon);
+		iconX += 100; // Increment X position for the next icon
+	});
+}
 var applyCellOccupation = function applyCellOccupation(cellX, cellY) {
 	var building = gameMap.cells[cellX][cellY].building;
 	if (building) {
 		for (var w = 0; w < building.cellW; w++) {