diff --git a/core/src/com/unciv/ui/cityscreen/ConstructionsTable.kt b/core/src/com/unciv/ui/cityscreen/ConstructionsTable.kt
index 7577d56aa7..ead9cba5fc 100644
--- a/core/src/com/unciv/ui/cityscreen/ConstructionsTable.kt
+++ b/core/src/com/unciv/ui/cityscreen/ConstructionsTable.kt
@@ -2,6 +2,7 @@ package com.unciv.ui.cityscreen
 
 import com.badlogic.gdx.Gdx
 import com.badlogic.gdx.graphics.Color
+import com.badlogic.gdx.scenes.scene2d.Group
 import com.badlogic.gdx.scenes.scene2d.Touchable
 import com.badlogic.gdx.scenes.scene2d.ui.Table
 import com.badlogic.gdx.scenes.scene2d.ui.TextButton
@@ -251,7 +252,7 @@ class ConstructionsTable(val cityScreen: CityScreen) : Table(CameraStageBaseScre
         return table
     }
 
-    fun getProgressBar(constructionName: String): Table {
+    fun getProgressBar(constructionName: String): Group {
         val cityConstructions = cityScreen.city.cityConstructions
         val construction = cityConstructions.getConstruction(constructionName)
         if (construction is PerpetualConstruction) return Table()
diff --git a/core/src/com/unciv/ui/pickerscreens/TechButton.kt b/core/src/com/unciv/ui/pickerscreens/TechButton.kt
index 25441a9c3a..735ce6817b 100644
--- a/core/src/com/unciv/ui/pickerscreens/TechButton.kt
+++ b/core/src/com/unciv/ui/pickerscreens/TechButton.kt
@@ -19,12 +19,19 @@ class TechButton(techName:String, private val techManager: TechManager, isWorldS
             add(ImageGetter.getTechIconGroup(techName, 60f)).left()
 
         val rightSide = Table()
-        val techCost = techManager.costOfTech(techName)
-        val remainingTech = techManager.remainingScienceToTech(techName)
 
         if (isWorldScreen) {
+            val techCost = techManager.costOfTech(techName)
+            val remainingTech = techManager.remainingScienceToTech(techName)
+            val techThisTurn = techManager.civInfo.statsForNextTurn.science
+
             val percentComplete = (techCost - remainingTech) / techCost.toFloat()
-            add(ImageGetter.getProgressBarVertical(2f, 50f, percentComplete, Color.BLUE, Color.WHITE)).pad(10f)
+            val percentWillBeComplete = (techCost - (remainingTech-techThisTurn)) / techCost.toFloat()
+            val progressBar = ImageGetter.VerticalProgressBar(2f, 50f)
+                    .addColor(Color.WHITE, 1f)
+                    .addColor(Color.BLUE.cpy().lerp(Color.WHITE, 0.3f), percentWillBeComplete)
+                    .addColor(Color.BLUE.cpy().lerp(Color.BLACK, 0.5f), percentComplete)
+            add(progressBar.addBorder(1f, Color.GRAY)).pad(10f)
             rightSide.add(text).padBottom(5f).row()
         } else rightSide.add(text).height(25f).padBottom(5f).row()
 
diff --git a/core/src/com/unciv/ui/utils/ImageGetter.kt b/core/src/com/unciv/ui/utils/ImageGetter.kt
index 6025adb4b4..33e3214e7b 100644
--- a/core/src/com/unciv/ui/utils/ImageGetter.kt
+++ b/core/src/com/unciv/ui/utils/ImageGetter.kt
@@ -7,6 +7,7 @@ import com.badlogic.gdx.graphics.g2d.NinePatch
 import com.badlogic.gdx.graphics.g2d.TextureAtlas
 import com.badlogic.gdx.graphics.g2d.TextureRegion
 import com.badlogic.gdx.scenes.scene2d.Actor
+import com.badlogic.gdx.scenes.scene2d.Group
 import com.badlogic.gdx.scenes.scene2d.ui.Image
 import com.badlogic.gdx.scenes.scene2d.ui.Table
 import com.badlogic.gdx.scenes.scene2d.utils.Drawable
@@ -302,16 +303,24 @@ object ImageGetter {
         return getImage("TechIcons/$techName").apply { color = techIconColor.lerp(Color.BLACK, 0.6f) }
     }
 
-    fun getProgressBarVertical(width: Float, height: Float, percentComplete: Float, progressColor: Color, backgroundColor: Color): Table {
-        val advancementGroup = Table()
-        var completionHeight = height * percentComplete
-        if (completionHeight > height)
-            completionHeight = height
-        advancementGroup.add(getImage(whiteDotLocation).apply { color = backgroundColor })
-                .size(width, height - completionHeight).row()
-        advancementGroup.add(getImage(whiteDotLocation).apply { color = progressColor }).size(width, completionHeight)
-        advancementGroup.pack()
-        return advancementGroup
+    fun getProgressBarVertical(width: Float, height: Float, percentComplete: Float, progressColor: Color, backgroundColor: Color): Group {
+        return VerticalProgressBar(width, height)
+                .addColor(backgroundColor, 1f)
+                .addColor(progressColor, percentComplete)
+    }
+
+    class VerticalProgressBar(width: Float, height: Float):Group(){
+        init {
+            setSize(width, height)
+        }
+
+        fun addColor(color: Color, percentage: Float):VerticalProgressBar {
+            val bar = getWhiteDot()
+            bar.color = color
+            bar.setSize(width, height*percentage)
+            addActor(bar)
+            return this
+        }
     }
 
     fun getHealthBar(currentHealth: Float, maxHealth: Float, healthBarSize: Float): Table {