diff --git a/core/src/com/unciv/ui/cityscreen/CityScreen.kt b/core/src/com/unciv/ui/cityscreen/CityScreen.kt
index 2b1113c1a2..1704677aca 100644
--- a/core/src/com/unciv/ui/cityscreen/CityScreen.kt
+++ b/core/src/com/unciv/ui/cityscreen/CityScreen.kt
@@ -48,6 +48,12 @@ class CityScreen(internal val city: CityInfo): CameraStageBaseScreen() {
     /** Displays city name, allows switching between cities - sits on BOTTOM CENTER */
     private var cityPickerTable = CityScreenCityPickerTable(this)
 
+    /** Button for exiting the city - sits on BOTTOM CENTER */
+    val exitCityButton = "Exit city".toTextButton().apply {
+        labelCell.pad(10f)
+        onClick { exit() }
+    }
+
     /** Holds City tiles group*/
     private var tileGroups = ArrayList<CityTileGroup>()
 
@@ -63,6 +69,7 @@ class CityScreen(internal val city: CityInfo): CameraStageBaseScreen() {
         stage.addActor(tileTable)
         stage.addActor(selectedConstructionTable)
         stage.addActor(cityPickerTable)
+        stage.addActor(exitCityButton)
         stage.addActor(cityInfoTable)
         update()
 
@@ -87,8 +94,11 @@ class CityScreen(internal val city: CityInfo): CameraStageBaseScreen() {
         cityInfoTable.update()
         cityInfoTable.setPosition(5f, stage.height - 5f, Align.topLeft)
 
+        exitCityButton.centerX(stage)
+        exitCityButton.y = 10f
         cityPickerTable.update()
         cityPickerTable.centerX(stage)
+        cityPickerTable.setY(exitCityButton.top+10f, Align.bottom)
 
         tileTable.update(selectedTile)
         tileTable.setPosition(stage.width - 5f, 5f, Align.bottomRight)
@@ -219,4 +229,8 @@ class CityScreen(internal val city: CityInfo): CameraStageBaseScreen() {
             return true
         }
     }
+
+    fun updateExitCityButton(){
+
+    }
 }
\ No newline at end of file
diff --git a/core/src/com/unciv/ui/cityscreen/CityScreenCityPickerTable.kt b/core/src/com/unciv/ui/cityscreen/CityScreenCityPickerTable.kt
index 84e06ee6bf..944eb723c9 100644
--- a/core/src/com/unciv/ui/cityscreen/CityScreenCityPickerTable.kt
+++ b/core/src/com/unciv/ui/cityscreen/CityScreenCityPickerTable.kt
@@ -10,14 +10,18 @@ import com.unciv.ui.utils.*
 class CityScreenCityPickerTable(val cityScreen: CityScreen) : Table(){
 
     fun update() {
-        clear()
         val city = cityScreen.city
         val civInfo = city.civInfo
+        background = ImageGetter.getRoundedEdgeTableBackground(civInfo.nation.getOuterColor())
+        clear()
 
         if (civInfo.cities.size > 1) {
-            val prevCityButton = "<".toTextButton()
+            val prevCityButton = Table() // so we gt a wider clickable area than just the image itself
+            val image = ImageGetter.getImage("OtherIcons/BackArrow")
+            image.color = civInfo.nation.getInnerColor()
+            prevCityButton.add(image).size(25f).pad(10f)
             prevCityButton.onClick { cityScreen.page(-1) }
-            add(prevCityButton).pad(20f)
+            add(prevCityButton).pad(10f)
         } else add()
 
         val cityNameTable = Table()
@@ -42,7 +46,7 @@ class CityScreenCityPickerTable(val cityScreen: CityScreen) : Table(){
             cityNameTable.add(resistanceImage).size(20f).padRight(5f)
         }
 
-        val currentCityLabel = city.name.toLabel(fontSize = 30)
+        val currentCityLabel = city.name.toLabel(fontSize = 30, fontColor = civInfo.nation.getInnerColor())
         currentCityLabel.onClick {
             val editCityNamePopup = Popup(cityScreen)
             val textArea = TextField(city.name, CameraStageBaseScreen.skin)
@@ -58,23 +62,21 @@ class CityScreenCityPickerTable(val cityScreen: CityScreen) : Table(){
 
         cityNameTable.add(currentCityLabel)
 
-        add(cityNameTable)
+        add(cityNameTable).width(stage.width/3)
 
 
         if (civInfo.cities.size > 1) {
-            val nextCityButton = ">".toTextButton()
+
+            val nextCityButton = Table() // so we gt a wider clickable area than just the image itself
+            val image = ImageGetter.getImage("OtherIcons/BackArrow")
+            image.setSize(25f,25f)
+            image.setOrigin(Align.center)
+            image.rotation = 180f
+            image.color = civInfo.nation.getInnerColor()
+            nextCityButton.add(image).size(25f).pad(10f)
             nextCityButton.onClick { cityScreen.page(1) }
-            add(nextCityButton).pad(20f)
+            add(nextCityButton).pad(10f)
         } else add()
-        row()
-
-        val exitCityButton = "Exit city".toTextButton()
-        exitCityButton.labelCell.pad(10f)
-
-        exitCityButton.onClick { cityScreen.exit() }
-
-        add(exitCityButton).pad(10f).colspan(columns)
-
         pack()
     }