Index: binaries/data/config/default.cfg
===================================================================
--- binaries/data/config/default.cfg
+++ binaries/data/config/default.cfg
@@ -324,6 +324,9 @@
 delete = Delete               ; Delete the selected saved game asking confirmation
 noconfirmation = Shift        ; Do not ask confirmation when deleting a game
 
+[hotkey.gamesetup]
+openMapBrowser = "O"          ; Opens the map browser
+
 [hotkey.session.queueunit]   ; > UNIT TRAINING
 1 = "Z"            ; add first unit type to queue
 2 = "X"            ; add second unit type to queue
Index: binaries/data/mods/public/gui/gamesetup/gamesetup.js
===================================================================
--- binaries/data/mods/public/gui/gamesetup/gamesetup.js
+++ binaries/data/mods/public/gui/gamesetup/gamesetup.js
@@ -1164,6 +1164,10 @@
 	}
 
 	deepfreeze(g_DefaultPlayerData);
+
+	Engine.GetGUIObjectByName("mapBrowser").tooltip = sprintf(
+		translate("%(hotkey_openMapBrowser)s : Open map borowser."),
+		{ "hotkey_openMapBrowser": colorizeHotkey("%(hotkey)s", "gamesetup.openMapBrowser") });
 }
 
 /**
@@ -2410,6 +2414,37 @@
 		updateGUIObjects();
 }
 
+function openMapBrowser()
+{
+	Engine.PushGuiPage("page_mapbrowser.xml",
+		{
+			"callback": "mapBrowserCallback",
+			"mapSelected": true,
+			"map": {
+				"type": g_GameAttributes.mapType,
+				"filter": g_GameAttributes.mapFilter,
+				"name": g_GameAttributes.map // includes the map path
+			}
+		});
+}
+
+/**
+ * Called after closing the dialog.
+ */
+function mapBrowserCallback(data)
+{
+	if (!g_IsController || !data.mapSelected)
+		return;
+
+	if (g_Dropdowns.mapType.get() != data.map.type)
+		g_Dropdowns.mapType.select(g_Dropdowns.mapType.ids().indexOf(data.map.type));
+
+	g_Dropdowns.mapFilter.select(g_Dropdowns.mapFilter.ids().indexOf(data.map.filter));
+	g_Dropdowns.mapSelection.select(g_Dropdowns.mapSelection.ids().indexOf(data.map.path + data.map.name));
+
+	updateGameAttributes();
+}
+
 function openAIConfig(playerSlot)
 {
 	g_LastViewedAIPlayer = playerSlot;
Index: binaries/data/mods/public/gui/gamesetup/gamesetup.xml
===================================================================
--- binaries/data/mods/public/gui/gamesetup/gamesetup.xml
+++ binaries/data/mods/public/gui/gamesetup/gamesetup.xml
@@ -20,7 +20,12 @@
 	<object hotkey="cancel">
 		<action on="Press">selectPanel(undefined);</action>
 	</object>
+	
+	<object hotkey="gamesetup.openMapBrowser">
+		<action on="Press">openMapBrowser();</action>
+	</object>
 
+
 	<!-- Add a translucent black background to fade out the menu page -->
 	<object type="image" style="ModernWindow" size="0 0 100% 100%">
 
@@ -139,6 +144,10 @@
 			<object type="image" sprite="ModernDarkBoxGold" name="gamePreviewBox" size="100%-426 40 100%-24 336">
 				<object type="image" size="1 1 401 294" name="mapPreview"/>
 				<object name="mapInfoName" type="text" style="ModernLeftLabelText" size="5 100%-20 100% 100%-1"/>
+				<!-- Map Browser button -->
+				<object name="mapBrowser" type="button" style="MapBrowserIconButton" size="100%-60-3 100%-60-3 100%-3 100%-3">
+					<action on="MouseLeftRelease"> openMapBrowser(); </action>
+				</object>
 			</object>
 
 			<!-- Settings -->
Index: binaries/data/mods/public/gui/gamesetup/sprites.xml
===================================================================
--- binaries/data/mods/public/gui/gamesetup/sprites.xml
+++ binaries/data/mods/public/gui/gamesetup/sprites.xml
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<sprites>
+    <!-- PROGRESS BAR BACKGROUND-->
+    <sprite name="MapBrowserIcon">
+        <image texture="session/portraits/technologies/diaspora.png"/>
+    </sprite>
+    <sprite name="MapBrowserIconGlow">
+        <effect add_color="15 15 15 0"/>
+        <image texture="session/portraits/technologies/diaspora.png"/>
+    </sprite>
+    <sprite name="MapBrowserIconGlowMore">
+        <effect add_color="30 30 30 0"/>
+        <image texture="session/portraits/technologies/diaspora.png"/>
+    </sprite>
+    
+</sprites>
Index: binaries/data/mods/public/gui/gamesetup/styles.xml
===================================================================
--- binaries/data/mods/public/gui/gamesetup/styles.xml
+++ binaries/data/mods/public/gui/gamesetup/styles.xml
@@ -7,4 +7,11 @@
 		sound_pressed="audio/interface/ui/ui_button_click.ogg"
 	/>
 
+	<style name="MapBrowserIconButton"
+		sprite="MapBrowserIcon"
+		sprite_over="MapBrowserIconGlow"
+		sprite_pressed="MapBrowserIconGlowMore"
+		sound_pressed="audio/interface/ui/ui_button_click.ogg"
+	/>
+
 </styles>
Index: binaries/data/mods/public/gui/mapbrowser/mapbrowser.js
===================================================================
--- binaries/data/mods/public/gui/mapbrowser/mapbrowser.js
+++ binaries/data/mods/public/gui/mapbrowser/mapbrowser.js
@@ -0,0 +1,496 @@
+function GameMap(fileName, type)
+{
+	this.loaded = false;
+	this.type = type;
+	this.file = {
+		"path": GameMap.types[type].path,
+		"name": fileName,
+		"extension": GameMap.types[type].extension
+	};
+}
+
+GameMap.types = {
+	"random":
+	{
+		"path": "maps/random/",
+		"extension": ".json"
+	},
+	"scenario":
+	{
+		"path": "maps/scenarios/",
+		"extension": ".xml"
+	},
+	"skirmish":
+	{
+		"path": "maps/skirmishes/",
+		"extension": ".xml"
+	}
+};
+
+GameMap.typesList = Object.keys(GameMap.types);
+
+GameMap.filters = {
+	"default":
+	{
+		"name": translateWithContext("map filter", "Default"),
+		"tooltip": translateWithContext("map filter", "All maps except naval and demo maps."),
+		"filter": mapFilters => mapFilters.every(filter => ["naval", "demo", "hidden"].indexOf(filter) == -1),
+		"Default": true
+	},
+	"naval":
+	{
+		"name": translate("Naval Maps"),
+		"tooltip": translateWithContext("map filter", "Maps where ships are needed to reach the enemy."),
+		"filter": mapFilters => mapFilters.indexOf("naval") != -1
+	},
+	"demo":
+	{
+		"name": translate("Demo Maps"),
+		"tooltip": translateWithContext("map filter", "These maps are not playable but for demonstration purposes only."),
+		"filter": mapFilters => mapFilters.indexOf("demo") != -1
+	},
+	"new":
+	{
+		"name": translate("New Maps"),
+		"tooltip": translateWithContext("map filter", "Maps that are brand new in this release of the game."),
+		"filter": mapFilters => mapFilters.indexOf("new") != -1
+	},
+	"trigger":
+	{
+		"name": translate("Trigger Maps"),
+		"tooltip": translateWithContext("map filter", "Maps that come with scripted events and potentially spawn enemy units."),
+		"filter": mapFilters => mapFilters.indexOf("trigger") != -1
+	},
+	"all":
+	{
+		"name": translate("All Maps"),
+		"tooltip": translateWithContext("map filter", "Every map of the chosen maptype."),
+		"filter": mapFilters => true
+	}
+};
+
+GameMap.filtersList = Object.keys(GameMap.filters);
+
+//returns a list of GameMap objects of all maps of given type
+GameMap.getMapsOfType = function (type)
+{
+	if (!GameMap.types[type])
+		return [];
+	return listFiles(GameMap.types[type].path, GameMap.types[type].extension, false).
+		filter(fileName => !fileName.startsWith("_")).
+		map(fileName => new GameMap(fileName, type));
+};
+
+GameMap.getMapsAll = function ()
+{
+	let mapList = [];
+	for (let type of GameMap.typesList)
+		mapList.push(...GameMap.getMapsOfType(type));
+	return mapList;
+};
+
+/**
+ * Returns a dictionary: each key is the filter with its corresponding map list
+ * mapList is a list of GameMap objects
+ */
+GameMap.getMapsByFilter = function (mapList)
+{
+	let mapsFiltered = {};
+	GameMap.filtersList.forEach((filter) => mapsFiltered[filter] = []);
+	for (let map of mapList)
+	{
+		if (!map.loaded)
+			map.load();
+		for (let filter of GameMap.filtersList)
+			if (GameMap.filters[filter].filter(map.filter))
+				mapsFiltered[filter].push(map);
+	}
+	return mapsFiltered;
+};
+
+// load data from settings
+GameMap.prototype.load = function ()
+{
+	this.loaded = true;
+	this.data = (this.type == "random") ?
+		Engine.ReadJSONFile(this.file.path + this.file.name + this.file.extension) :
+		Engine.LoadMapSettings(this.file.path + this.file.name);
+	this.loadName();
+	this.loadDescription();
+	this.loadPreview();
+	this.loadFilters();
+	return this.data;
+};
+
+GameMap.prototype.loadName = function ()
+{
+	return this.name = (!this.data || !this.data.settings || !this.data.settings.Name) ?
+		translate("No map name.") :
+		translate(this.data.settings.Name);
+};
+
+GameMap.prototype.loadDescription = function ()
+{
+	return this.description = (!this.data || !this.data.settings || !this.data.settings.Description) ?
+		translate("No map description.") :
+		translate(this.data.settings.Description);
+};
+
+GameMap.prototype.loadPreview = function ()
+{
+	const path = "cropped:0.78125,0.5859375:session/icons/mappreview/";
+	return this.preview = (!this.data || !this.data.settings || !this.data.settings.Preview) ?
+		path + "nopreview.png" :
+		path + this.data.settings.Preview;
+};
+
+GameMap.prototype.loadFilters = function ()
+{
+	let filter = !!this.data.settings ? this.data.settings.Keywords || [] : [];
+	if (filter.indexOf("all") == -1)
+		filter.push("all")
+	return this.filter = filter;
+};
+
+// GridBrowser instance, manages the maps previews
+var g_mapBrowser;
+
+// Dictionary of maps by filter (of current map type list) 
+var g_mapList;
+
+// Object with maps by type
+var g_allMapsByType = {};
+
+// List of current selected filter from g_mapList
+var g_mapFilter;
+
+// Stores zoom in/out functions and level of zoom
+var g_mapZoom;
+
+// Handles map list search behaviour
+let g_mapsSearchBoxInput;
+
+var g_mapFilterDropdown;
+var g_mapTypeDropdown;
+var g_tickCount = 0;
+
+var g_mapSelected = {
+	"set": function (map, filter = undefined)
+	{
+		this.map = map;
+		this.filter = (filter !== undefined) ? filter : g_mapFilterDropdown.list_data[g_mapFilterDropdown.selected];
+
+		if (!map.loaded)
+			map.load();
+
+		animate.chain("previewSelectedOverlay",
+			[
+				{
+					"color": { "a": 150 },
+					"onComplete": () =>
+					{
+						Engine.GetGUIObjectByName("nameSelected").caption = map.name;
+						Engine.GetGUIObjectByName("previewSelected").sprite = map.preview;
+					}
+				},
+				{ "color": { "a": 0 } }
+			],
+			{ "queue": true, "duration": 100 }
+		);
+
+		animate.chain("descriptionSelected",
+			[
+				{ "textcolor": { "a": 120 }, "onComplete": () => { Engine.GetGUIObjectByName("descriptionSelected").caption = map.description; } },
+				{ "textcolor": { "a": 255 } }
+			],
+			{ "queue": true, "duration": 100 }
+		);
+	}
+};
+
+
+// Handles the behaviour of each map in the map browser grid 
+function childFunction(map, pageIndex, pageList, listIndex, list, selectedChild, childObject, pageChildObjectList, childObjectList)
+{
+	if (!map.loaded)
+		map.load();
+
+	let getObject = (name, index) => Engine.GetGUIObjectByName(name + "[" + (index === undefined ? pageIndex : index) + "]");
+	const mapPreview = getObject("mapPreview");
+	const mapButton = getObject("mapButton");
+	const mapBox = getObject("mapBox");
+	const mapName = getObject("mapName");
+	const animeButtonSettingsSelected = { "color": { "a": 100 }, "size": "4 4 -4 -4", };
+	const animeButtonSettingsUnselected = { "color": { "a": 0 }, "size": "8 8 -8 -8" };
+
+	// Outline if this box is the current selected map otherwise remove outline
+	selectedChild[pageIndex] = g_mapSelected.map.file.name === map.file.name ? 1 : 0;
+	animate(mapButton, g_mapSelected.map.file.name === map.file.name ? animeButtonSettingsSelected : animeButtonSettingsUnselected);
+
+	mapName.caption = map.name;
+	mapPreview.sprite = map.preview;
+	mapButton.tooltip = map.description;
+	mapButton.onMouseLeftPress = () =>
+	{
+		g_mapSelected.set(map);
+		// Unselect others
+		for (let i = 0; i < selectedChild.length; ++i)
+		{
+			if (i === pageIndex || selectedChild[i] === 0)
+				continue;
+			animate(getObject("mapButton", i), animeButtonSettingsUnselected);
+			selectedChild[i] = 0;
+		}
+		selectedChild[pageIndex] = 1;
+		animate(mapButton, animeButtonSettingsSelected);
+		animate(mapPreview, { "size": "3 3 -3 -3", "duration": 100 });
+		this.setIndexOfSelected(listIndex);
+	};
+	mapButton.onMouseLeftRelease = () => { animate(mapPreview, { "size": "2 2 -2 -2", "duration": 100 }) };
+	mapButton.onMouseLeftDoubleClick = () =>
+	{
+		g_mapSelected.set(map);
+		this.setIndexOfSelected(listIndex);
+		mapBrowserReturn(true);
+	};
+	mapButton.onMouseEnter = () => { animate(mapBox, { "size": "-10 -10 10 10" }) };
+	mapButton.onMouseLeave = () => { animate(mapBox, { "size": "0 0 0 0" }) };
+};
+
+g_mapZoom = {
+	"originalSize": { "width": 400, "height": 300 },
+	"levels": [0.35, 0.40, 0.45, 0.5, 0.55, 0.6, 0.65, 0.7, 0.8, 0.9, 1, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.8, 2.0, 2.4, 2.9]
+};
+
+g_mapZoom.selectedLevelIndex = g_mapZoom.levels.indexOf(0.6);
+
+g_mapZoom.getSize = function ()
+{
+	const level = g_mapZoom.levels[g_mapZoom.selectedLevelIndex];
+	return {
+		"width": g_mapZoom.originalSize.width * level,
+		"height": g_mapZoom.originalSize.height * level
+	};
+};
+
+g_mapZoom.in = function ()
+{
+	if (g_mapZoom.selectedLevelIndex == g_mapZoom.levels.length - 1)
+		return;
+	++g_mapZoom.selectedLevelIndex;
+	g_mapBrowser.setChildDimensions(g_mapZoom.getSize());
+};
+
+g_mapZoom.out = function ()
+{
+	if (g_mapZoom.selectedLevelIndex == 0)
+		return;
+	--g_mapZoom.selectedLevelIndex;
+	g_mapBrowser.setChildDimensions(g_mapZoom.getSize());
+};
+
+
+function MapsSearchBoxInput()
+{
+	this.lastTime = Date.now();
+	this.refresh = 100;
+	this.lastCaption = "";
+	this.mapsSearchBox = Engine.GetGUIObjectByName("mapsSearchBox");
+	this.mapsSearchBoxNotice = Engine.GetGUIObjectByName("mapsSearchBoxNotice");
+	setTimeout(() => { this.mapsSearchBox.caption = "" }, 0)
+
+	// Select first map if text inputed
+	this.mapsSearchBox.onPress = () =>
+	{
+		if (g_mapFilter.length === 0 || this.mapsSearchBox.caption.trim() === "")
+			return;
+		g_mapSelected.set(g_mapFilter[0]);
+		mapBrowserReturn(true);
+	};
+
+	this.mapsSearchBox.onMouseLeftPress = () =>
+	{
+		// Makes MapsSearchBoxInput.prototype.onTick process current caption as a new caption
+		// as type="input" doesn't have a onFocus event
+		this.lastCaption = "";
+	};
+}
+
+MapsSearchBoxInput.prototype.onTick = function ()
+{
+	const time = Date.now();
+
+	if (this.lastTime + this.refresh > time)
+		return;
+
+	let caption = this.mapsSearchBox.caption.trim().toLowerCase();
+	if (caption === this.lastCaption)
+		return;
+
+	if ((this.lastCaption !== "" && caption === "") || (this.lastCaption === "" && caption !== ""))
+		animate(this.mapsSearchBoxNotice, { "textcolor": { "a": caption === "" ? "255" : "0" } });
+
+	const filter = g_mapFilterDropdown.list_data[g_mapFilterDropdown.selected];
+
+	if (caption === "")
+	{
+		// Normal map list filtered by type and filter
+		const type = g_mapTypeDropdown.list_data[g_mapTypeDropdown.selected];
+		g_mapList = g_allMapsByType[type];
+		g_mapFilter = g_mapList[filter];
+	}
+	else
+	{
+		// Custom map list filtered by search text and filter type (from all map types)
+		// e.g. if filter is set to "all" then all maps of all types get searched 
+		let allListFilter = [];
+		for (let type of GameMap.typesList)
+			if (g_allMapsByType[type][filter] !== undefined)
+				allListFilter = [...allListFilter, ...g_allMapsByType[type][filter]];
+
+		let captionSplit = caption.split(" ");
+		g_mapFilter = allListFilter
+			.filter((map) =>
+			{
+				let mapWords = map.name.toLowerCase().split(" ");
+				return captionSplit.every((captionWord) => mapWords.some(mapWord => mapWord.indexOf(captionWord) === 0));
+			})
+			.sort((map1, map2) => { map1.name.toLowerCase().indexOf(caption) < map2.name.toLowerCase().indexOf(caption) ? -1 : 1; })
+	}
+
+	g_mapBrowser.setList(g_mapFilter);
+	g_mapBrowser.goToPage(0);
+
+	this.lastCaption = caption;
+	this.lastTime = time;
+}
+
+function init(data)
+{
+	// Load maps 
+	for (let mapType of GameMap.typesList)
+		g_allMapsByType[mapType] = GameMap.getMapsByFilter(GameMap.getMapsOfType(mapType))
+
+	// Sets map type, filter depending of data input
+	const type = data.mapSelected ? data.map.type : "random";
+	const filter = data.mapSelected ? data.map.filter : "default";
+	initMapBrowser(data, type, filter);
+	initDropdown(type, filter);
+	initTooltips();
+	initActions();
+}
+
+function initMapBrowser(data, type, filter)
+{
+	// Get all maps names and make lists
+	g_mapList = g_allMapsByType[type];
+	g_mapFilter = g_mapList[filter];
+
+	// Edge case: "random" is not a map
+	// Map name from gamesetup has path included
+	const fullMapName = data.mapSelected && data.map.name != "random" ? data.map.name
+		: g_mapFilter[0].file.path + g_mapFilter[0].file.name;
+	const mapSelectedIndex = g_mapFilter.map(map => map.file.path + map.file.name).indexOf(fullMapName);
+
+	// Set the first selected map so childFunction doesn't read an undefined value from mapSelected
+	g_mapSelected.set(g_mapFilter[mapSelectedIndex], filter);
+
+	// Create maps' grid 
+	g_mapBrowser = new GridBrowser("MapBrowserContainer", "currentPageNum", g_mapFilter, mapSelectedIndex, g_mapZoom.getSize(), childFunction);
+}
+
+// Define dropdowns data
+function initDropdown(type, filter)
+{
+	// Map type dropdown: set list, currently selected and behaviour
+	g_mapTypeDropdown = Engine.GetGUIObjectByName("mapTypeDropdown");
+	g_mapTypeDropdown.list = g_Settings.MapTypes.map(type => type.Title);
+	g_mapTypeDropdown.list_data = g_Settings.MapTypes.map(type => type.Name);
+	g_mapTypeDropdown.selected = g_mapTypeDropdown.list_data.indexOf(type);
+	// Map filter type dropdown: set list, currently selected and behaviour
+	g_mapFilterDropdown = Engine.GetGUIObjectByName("mapFilterDropdown");
+	g_mapFilterDropdown.list = GameMap.filtersList.map(filter => GameMap.filters[filter].name);
+	g_mapFilterDropdown.list_data = GameMap.filtersList;
+	g_mapFilterDropdown.selected = g_mapFilterDropdown.list_data.indexOf(filter);
+}
+
+// Set tooltips
+function initTooltips()
+{
+	let goldenText = (text) => "[color=\"255 251 131\"]" + text + "[/color]";
+	let toolTips = {
+		"mapsZoomIn": translate(goldenText("\\[MouseWheelUp]") + ": Make map previews bigger."),
+		"mapsZoomOut": translate(goldenText("\\[MouseWheelDown]") + ": Make map previews smaller?"),
+		"prevButton": colorizeHotkey(translate("%(hotkey)s: Goes to previous page."), "tab.prev"),
+		"nextButton": colorizeHotkey(translate("%(hotkey)s: Goes to next page."), "tab.next"),
+		"selectMapButton": translate("Select map."),
+		"closeButton": colorizeHotkey(translate("%(hotkey)s: Close map browser."), "cancel"),
+	};
+	for (let objectName in toolTips)
+		Engine.GetGUIObjectByName(objectName).tooltip = toolTips[objectName];
+}
+
+// Set GUI actions behaviour 
+function initActions()
+{
+	Engine.GetGUIObjectByName("dialog").onWindowResized = () => g_mapBrowser.generateGrid();
+	Engine.GetGUIObjectByName("mapsZoomIn").onPress = () => g_mapZoom.in();
+	Engine.GetGUIObjectByName("mapsZoomOut").onPress = () => g_mapZoom.out();
+	Engine.GetGUIObjectByName("prevButton").onPress = () => g_mapBrowser.previousPage();
+	Engine.GetGUIObjectByName("nextButton").onPress = () => g_mapBrowser.nextPage();
+	Engine.GetGUIObjectByName("closeButton").onPress = () => mapBrowserReturn(false);
+	Engine.GetGUIObjectByName("selectMapButton").onPress = () => mapBrowserReturn(true);
+	g_mapFilterDropdown.onSelectionChange = () =>
+	{
+		const filter = g_mapFilterDropdown.list_data[g_mapFilterDropdown.selected];
+		g_mapFilter = g_mapList[filter];
+		g_mapBrowser.setList(g_mapFilter);
+		g_mapBrowser.goToPage(0);
+	};
+	const mapTypeDropdown = Engine.GetGUIObjectByName("mapTypeDropdown");
+	mapTypeDropdown.onSelectionChange = () =>
+	{
+		const type = mapTypeDropdown.list_data[mapTypeDropdown.selected];
+		const filter = g_mapFilterDropdown.list_data[g_mapFilterDropdown.selected];
+		g_mapList = g_allMapsByType[type];
+		g_mapFilter = g_mapList[filter];
+		g_mapBrowser.setList(g_mapFilter);
+		g_mapBrowser.goToPage(0);
+	};
+
+	Engine.GetGUIObjectByName("mapsSearchBox").focus();
+	Engine.GetGUIObjectByName("mapsSearchBox").onTab = () => g_mapBrowser.nextPage();
+}
+
+function mapBrowserReturn(sendSelected = false)
+{
+	// Pop the page before calling the callback, so the callback runs
+	// in the parent GUI page's context
+	const data = sendSelected ?
+		{
+			"mapSelected": true,
+			"map": {
+				"path": g_mapSelected.map.file.path,
+				"name": g_mapSelected.map.file.name,
+				"type": g_mapSelected.map.type,
+				"filter": g_mapSelected.filter
+			}
+		} :
+		{};
+
+	Engine.PopGuiPageCB(data);
+}
+
+function onTick()
+{
+	updateTimers();
+	animate.onTick();
+
+	// Hack so it doesn't process the last keyboard even from parent page in the child page (e.g hotkey) 
+	if (g_tickCount == 1)
+		g_mapsSearchBoxInput = new MapsSearchBoxInput();
+	if (g_tickCount >= 1)
+		g_mapsSearchBoxInput.onTick();
+
+	++g_tickCount;
+}
\ No newline at end of file
Index: binaries/data/mods/public/gui/mapbrowser/mapbrowser.xml
===================================================================
--- binaries/data/mods/public/gui/mapbrowser/mapbrowser.xml
+++ binaries/data/mods/public/gui/mapbrowser/mapbrowser.xml
@@ -0,0 +1,125 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<objects>
+
+	<script directory="gui/common/"/>
+	<script directory="gui/mapbrowser/"/>
+
+	<object hotkey="tab.prev">
+		<action on="Press">g_mapBrowser.previousPage();</action>
+	</object>
+	<object hotkey="tab.next">
+		<action on="Press">g_mapBrowser.nextPage();</action>
+	</object>
+
+	<!-- Add a translucent black background to fade out the menu page -->
+	<object type="image" sprite="ModernFade"/>
+
+	<object name="dialog" type="image" style="ModernDialog" size="0%+10 0%+20 100%-10 100%-10">
+
+		<action on="Tick">
+			onTick();
+		</action>
+
+		<object style="ModernLabelText" type="text" size="50%-128 -18 50%+128 14" z="200">
+			<translatableAttribute id="caption">Map Browser</translatableAttribute>
+		</object>
+		<object size="10 30 100%-400-25 57">
+			<object name="mapsSearchBox" size="50%-200 0 50%+200 100%" type="input" style="ModernInput" font="sans-16"/>
+			<object ghost="true" name="mapsSearchBoxNotice" size="50%-200 0 50%+200 100%" type="text" style="ModernText" text_align="center" textcolor="160 160 160" font="sans-16">
+				<translatableAttribute id="caption">Search maps</translatableAttribute>
+			</object>
+		</object>
+		<!-- Grid full of maps previews -->
+		<object name="MapBrowserContainer" size="10 75 100%-400-25 100%-15">
+			<repeat count="100" var="n">
+				<object name="map[n]" hidden="true">
+					<object name="mapBox[n]">
+						<object type="image" sprite="ModernDarkBoxGold" ghost="true" size="8 8 100%-8 100%-8">
+							<object name="mapName[n]" type="text" style="ModernLabelText" text_valign="bottom" buffer_zone="10" />
+							<object name="mapPreview[n]" type="image" size="1 1 100%-1 100%-1"/>
+						</object>
+						<object name="mapButton[n]" type="button" sprite="color: 255 0 0 0" size="4 4 100%-4 100%-4">
+							<action on="MouseWheelUp">g_mapZoom.in()</action>
+							<action on="MouseWheelDown">g_mapZoom.out()</action>
+						</object>
+					</object>
+				</object>
+			</repeat>
+			<action on="MouseWheelUp">g_mapZoom.in()</action>
+			<action on="MouseWheelDown">g_mapZoom.out()</action>
+		</object>
+
+		<action on="MouseWheelUp">g_mapZoom.in()</action>
+		<action on="MouseWheelDown">g_mapZoom.out()</action>
+
+		<!-- Right side info and controls -->
+		<object size="100%-420 15 100% 100%-15" type="image" sprite="ModernFade" z="50">
+			<object size="20 20 100%-20 100%-20">
+				<object size="0 5 100% 100">
+					<object size="0% 0% 100% 33%">
+						<!-- Page: -->
+						<object type="text" style="ModernRightLabelText" size="0% 0% 15% 100%">
+							<translatableAttribute id="caption">Page:</translatableAttribute>
+						</object>
+						<!-- Page number text-->
+						<object name="currentPageNum" type="text" style="ModernLeftLabelText" size="15% 0% 40% 100%"/>
+						<!-- Previous button eae-->
+						<object name="prevButton" type="button" style="ModernButtonRed" size="30% 0% 65% 100%">
+							<translatableAttribute id="caption">Previous</translatableAttribute>
+						</object>
+						<!-- Next button -->
+						<object name="nextButton" type="button" style="ModernButtonRed" size="65% 0% 100% 100%">
+							<translatableAttribute id="caption">Next</translatableAttribute>
+						</object>
+					</object>
+					<object size="0% 33% 100% 70%">
+						<!-- Maps types labels -->
+						<object size="0%+60 0% 100% 100%">
+							<object type="text" style="ModernLeftLabelText" size="0%+2 0% 50%-2 100%">
+								<translatableAttribute id="caption">Map Type</translatableAttribute>
+							</object>
+							<object type="text" style="ModernLeftLabelText" size="50%+2 0% 100%-2 100%">
+								<translatableAttribute id="caption">Map Filter</translatableAttribute>
+							</object>
+						</object>
+					</object>
+					<object size="0% 70% 100% 100%">
+						<!-- Zoom button in -->
+						<object name="mapsZoomIn" type="button" style="ModernButtonRed" size="0% 0% 0%+30 100%">
+							<translatableAttribute id="caption">+</translatableAttribute>
+						</object>
+						<!-- Zoom button out -->
+						<object name="mapsZoomOut" type="button" style="ModernButtonRed" size="0%+30 0% 0%+60 100%">
+							<translatableAttribute id="caption">-</translatableAttribute>
+						</object>
+						<!-- Dropdowns -->
+						<object size="0%+60 0% 100% 100%">
+							<object name="mapTypeDropdown" type="dropdown" style="ModernDropDown" size="0% 0% 50% 100%"/>
+							<object name="mapFilterDropdown" type="dropdown" style="ModernDropDown" size="50% 0% 100% 100%"/>
+						</object>
+					</object>
+				</object>
+				<!-- Map preview + Map name -->
+				<object size="0 70+40 100% 70+330-30">
+					<object name="previewSelected" z="10" type="image"/>
+					<object name="nameSelected" z="11" type="text" style="ModernLabelText" size="10 100%-25 100%-10 100%-25+20"/>
+					<object name="previewSelectedOverlay" z="12" type="image" sprite="color: 24 24 24 0"/>
+				</object>
+				<!-- Select map button -->
+				<object name="selectMapButton" type="button" style="StoneButtonFancy" size="0% 70+330+10-30 100% 70+330+10-30+30">
+					<translatableAttribute id="caption">Select map</translatableAttribute>
+				</object>
+				<!-- Map Description -->
+				<object size="0%-4 70+330+10-30+30+10 100% 100%-30-10">
+					<object name="descriptionSelected" type="text" style="ModernText" size="0 0 100% 100%"/>
+				</object>
+				<!-- Close button -->
+				<object name="closeButton" type="button" style="StoneButton" size="0% 100%-30 100% 100%" hotkey="cancel">
+					<translatableAttribute id="caption">Close</translatableAttribute>
+				</object>
+			</object>
+		</object>
+	</object>
+
+</objects>
\ No newline at end of file
Index: binaries/data/mods/public/gui/page_gamesetup.xml
===================================================================
--- binaries/data/mods/public/gui/page_gamesetup.xml
+++ binaries/data/mods/public/gui/page_gamesetup.xml
@@ -9,6 +9,7 @@
 	<include>common/styles.xml</include>
 
 	<include>gamesetup/setup.xml</include>
+	<include>gamesetup/sprites.xml</include>
 	<include>gamesetup/styles.xml</include>
 	<include>gamesetup/gamesetup.xml</include>
 	<include>common/global.xml</include>
Index: binaries/data/mods/public/gui/page_mapbrowser.xml
===================================================================
--- binaries/data/mods/public/gui/page_mapbrowser.xml
+++ binaries/data/mods/public/gui/page_mapbrowser.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<page>
+	<include>common/modern/setup.xml</include>
+	<include>common/modern/styles.xml</include>
+	<include>common/modern/sprites.xml</include>
+
+	<include>common/setup.xml</include>
+	<include>common/sprites.xml</include>
+	<include>common/styles.xml</include>
+
+	<include>common/global.xml</include>
+	<include>mapbrowser/mapbrowser.xml</include>
+</page>