diff --git a/src/css/ingame_hud/building_placer.scss b/src/css/ingame_hud/building_placer.scss
index e63868ab..8ca53655 100644
--- a/src/css/ingame_hud/building_placer.scss
+++ b/src/css/ingame_hud/building_placer.scss
@@ -119,6 +119,9 @@
         @include S(grid-gap, 5px);
 
         .variant {
+            pointer-events: all;
+            cursor: pointer;
+
             grid-row: 2 / 3;
             @include S(border-radius, $globalBorderRadius);
             background: rgba($ingameHudBg, 0.3);
@@ -130,6 +133,13 @@
             @include S(padding, 3px);
             @include S(grid-gap, 10px);
 
+            transition: background-color 0.12s ease-in-out;
+
+            &:hover:not(.active) {
+                background: rgba($colorBlueBright, 0.8);
+                opacity: 1;
+            }
+
             &.active {
                 opacity: 1;
                 background-color: rgba($colorBlueBright, 0.8);
diff --git a/src/js/changelog.js b/src/js/changelog.js
index 2b6c37be..75d38437 100644
--- a/src/js/changelog.js
+++ b/src/js/changelog.js
@@ -5,6 +5,7 @@ export const CHANGELOG = [
         entries: [
             "Preparations for the wires update",
             "Update belt placement performance on huge factories (by Phlosioneer)",
+            "Allow clicking on variants to select them",
             "Add setting (on by default) to store the last used rotation per building instead of globally storing it (by Magos)",
             "Added chinese (traditional) translation",
             "Updated translations",
diff --git a/src/js/game/hud/parts/building_placer.js b/src/js/game/hud/parts/building_placer.js
index 5faec6ab..f0bbcdae 100644
--- a/src/js/game/hud/parts/building_placer.js
+++ b/src/js/game/hud/parts/building_placer.js
@@ -16,6 +16,7 @@ import { defaultBuildingVariant } from "../../meta_building";
 import { THEME } from "../../theme";
 import { DynamicDomAttach } from "../dynamic_dom_attach";
 import { HUDBuildingPlacerLogic } from "./building_placer_logic";
+import { ClickDetector } from "../../../core/click_detector";
 
 export class HUDBuildingPlacer extends HUDBuildingPlacerLogic {
     /**
@@ -56,6 +57,12 @@ export class HUDBuildingPlacer extends HUDBuildingPlacerLogic {
         this.currentInterpolatedCornerTile = new Vector();
 
         this.lockIndicatorSprite = Loader.getSprite("sprites/misc/lock_direction_indicator.png");
+
+        /**
+         * Stores the click detectors for the variants so we can clean them up later
+         * @type {Array<ClickDetector>}
+         */
+        this.variantClickDetectors = [];
     }
 
     /**
@@ -98,6 +105,22 @@ export class HUDBuildingPlacer extends HUDBuildingPlacerLogic {
         }
     }
 
+    cleanup() {
+        super.cleanup();
+        this.cleanupVariantClickDetectors();
+    }
+
+    /**
+     * Cleans up all variant click detectors
+     */
+    cleanupVariantClickDetectors() {
+        for (let i = 0; i < this.variantClickDetectors.length; ++i) {
+            const detector = this.variantClickDetectors[i];
+            detector.cleanup();
+        }
+        this.variantClickDetectors = [];
+    }
+
     /**
      * Rerenders the variants displayed
      */
@@ -107,6 +130,9 @@ export class HUDBuildingPlacer extends HUDBuildingPlacerLogic {
 
         const metaBuilding = this.currentMetaBuilding.get();
 
+        // First, clear up all click detectors
+        this.cleanupVariantClickDetectors();
+
         if (!metaBuilding) {
             return;
         }
@@ -147,6 +173,12 @@ export class HUDBuildingPlacer extends HUDBuildingPlacerLogic {
             spriteWrapper.setAttribute("data-tile-h", dimensions.y);
 
             spriteWrapper.innerHTML = sprite.getAsHTML(iconSize * dimensions.x, iconSize * dimensions.y);
+
+            const detector = new ClickDetector(element, {
+                consumeEvents: true,
+                targetOnly: true,
+            });
+            detector.click.add(() => this.currentVariant.set(variant));
         }
     }