diff --git a/public/content/instructions.md b/public/content/instructions.md
index 8b0241a..cd9beee 100644
--- a/public/content/instructions.md
+++ b/public/content/instructions.md
@@ -97,7 +97,7 @@ New equipment becomes accessible as soon as you train a new scientist, and purch
 
 <div class="break" />
 
---Coming Soon--
+Badges are bling - vanity items that appear next to your name on the game ladder and profile. Some are easy to unlock, others require specific situations. Others still are exclusives, and no longer available. You can see a full list of badges on the [badges list page](/badges/list).
 
 <div class="break" />
 
diff --git a/public/content/rules.md b/public/content/rules.md
index bc94a14..3447635 100644
--- a/public/content/rules.md
+++ b/public/content/rules.md
@@ -1,2 +1,4 @@
 * No usernames that are outright hurtful, attack any group or individual, or deliberately cross the line.
 * Using automated user accounts, or "botting", is not allowed and will result in an immediate ban.
+* One account per player.
+* Don't make me add more rules.
\ No newline at end of file
diff --git a/public/content/task_list.md b/public/content/task_list.md
index 8c4da58..7f8df42 100644
--- a/public/content/task_list.md
+++ b/public/content/task_list.md
@@ -1,8 +1,6 @@
 Major
 ---
 
-* Implement badges.
-* Write the instructions for badges.
 * Implement countdown timers for combat and training.
 * Implement referral links.
 * Implement admin panel (write posts without having to commit).
@@ -30,6 +28,7 @@ Patch
 * Ezekiel-powered discord role for kingdom battles players.
 * Refactor callback-hell (yes, it is that bad).
 * Treasure?
+* Add a link home to the verification message.
 
 Potential And Confirmed Bugs
 ---
@@ -45,6 +44,7 @@ Wishlist
 * Implement nations (player alliances) (sending items/gold).
 * In-game chat.
 * Structures / shields.
+* Sharding.
 
 Event Ideas
 ---
@@ -54,7 +54,7 @@ Event Ideas
 Badge Ideas
 ---
 
-* alpha tester
+* ~~alpha tester~~
 * capture the flag
 * king of the hill
 * gold horde
diff --git a/public/news/2019-06-08-02.md b/public/news/2019-06-08-02.md
index 082678d..8a424d3 100644
--- a/public/news/2019-06-08-02.md
+++ b/public/news/2019-06-08-02.md
@@ -8,3 +8,4 @@ There are five badges so far, but I need to actually code in the triggers for th
 
 Sadly, I don't think my fancy rainbox text will work with the badge component hogging it's spot. If I want rainbow usernames, I'll need to code a hybrid component...
 
+Edit: I've added a [badge list page](/badges/list) for easy perusal.
\ No newline at end of file
diff --git a/server/badge_statistics.json b/server/badge_statistics.json
index 62bd328..7c1349a 100644
--- a/server/badge_statistics.json
+++ b/server/badge_statistics.json
@@ -3,30 +3,30 @@
 		"filename": "alpha_tester.png",
 		"description": "Awarded to everyone who joined before or on the 7th of June, 2019 (AEST).",
 		"visible": true,
-		"earnable": false
+		"unlockable": false
 	},
 	"Capture The Flag": {
 		"filename": "capture_the_flag.png",
-		"description": "This badge is stolen by successful attacks.",
+		"description": "This badge is stolen by successful attacks. It is automatically set as your active badge, and you can't change it until it is lost; it also sets your name to yellow, so everyone knows you have it. Only one exists.",
 		"visible": true,
-		"earnable": true
+		"unlockable": null
 	},
 	"Combat Master": {
 		"filename": "combat_master.png",
 		"description": "You have successfully attacked 100 times.",
 		"visible": true,
-		"earnable": true
+		"unlockable": null
 	},
 	"Gold Horde": {
 		"filename": "gold_horde.png",
 		"description": "You purchased this badge for 500 gold.",
 		"visible": true,
-		"earnable": true
+		"unlockable": null
 	},
 	"King Of The Hill": {
 		"filename": "king_of_the_hill.png",
 		"description": "You held your position at the top of the game ladder for a whole day.",
 		"visible": true,
-		"earnable": true
+		"unlockable": null
 	}
 }
\ No newline at end of file
diff --git a/src/components/app.jsx b/src/components/app.jsx
index be55400..3ceceed 100644
--- a/src/components/app.jsx
+++ b/src/components/app.jsx
@@ -71,6 +71,7 @@ export default class App extends React.Component {
 						<LazyRoute path='/ladder' component={() => import('./pages/ladder.jsx')} />
 						<LazyRoute path='/combatlog' component={() => import('./pages/combat_log.jsx')} />
 						<LazyRoute path='/spyinglog' component={() => import('./pages/spying_log.jsx')} />
+						<LazyRoute path='/badges/list' component={() => import('./pages/badge_list.jsx')} />
 						<LazyRoute path='/badges' component={() => import('./pages/badge_select.jsx')} />
 
 						<LazyRoute path='/tasklist' component={() => import('./pages/task_list.jsx')} />
diff --git a/src/components/pages/badge_list.jsx b/src/components/pages/badge_list.jsx
new file mode 100644
index 0000000..39a80dd
--- /dev/null
+++ b/src/components/pages/badge_list.jsx
@@ -0,0 +1,50 @@
+import React from 'react';
+
+//panels
+import CommonLinks from '../panels/common_links.jsx';
+import BadgeListPanel from '../panels/badge_list.jsx';
+
+class BadgeList extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			warning: '', //TODO: unified warning?
+			fetch: null
+		};
+	}
+
+	componentDidUpdate(prevProps, prevState, snapshot) {
+		this.state.fetch();
+	}
+
+	render() {
+		let warningStyle = {
+			display: this.state.warning.length > 0 ? 'flex' : 'none'
+		};
+
+		return (
+			<div className='page'>
+				<div className='sidePanelPage'>
+					<div className='sidePanel'>
+						<CommonLinks />
+					</div>
+
+					<div className='mainPanel'>
+						<div className='warning' style={warningStyle}>
+							<p>{this.state.warning}</p>
+						</div>
+
+						<h1 className='centered'>Badges</h1>
+						<BadgeListPanel setWarning={this.setWarning.bind(this)} getFetch={ (fn) => this.setState({ fetch: fn }) } />
+					</div>
+				</div>
+			</div>
+		);
+	}
+
+	setWarning(s) {
+		this.setState({ warning: s });
+	}
+};
+
+export default BadgeList;
\ No newline at end of file
diff --git a/src/components/pages/badge_select.jsx b/src/components/pages/badge_select.jsx
index cb9da20..d5c5016 100644
--- a/src/components/pages/badge_select.jsx
+++ b/src/components/pages/badge_select.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { withRouter, Link } from 'react-router-dom';
 import { connect } from 'react-redux';
 
 //panels
@@ -42,7 +43,7 @@ class BadgeSelect extends React.Component {
 						</div>
 
 						<h1 className='centered'>Badge Select</h1>
-						<p className='centered'>Click on your favourite badge!</p>
+						<p className='centered'>Click on your favourite badge! <Link to='/badges/list'>Full list here</Link>.</p>
 						<BadgeSelectPanel setWarning={this.setWarning.bind(this)} getFetch={ (fn) => this.setState({ fetch: fn }) } />
 					</div>
 				</div>
@@ -70,4 +71,4 @@ const mapDispatchToProps = (dispatch) => {
 BadgeSelect = connect(mapStoreToProps, mapDispatchToProps)(BadgeSelect);
 
 
-export default BadgeSelect;
\ No newline at end of file
+export default withRouter(BadgeSelect);
\ No newline at end of file
diff --git a/src/components/panels/badge.jsx b/src/components/panels/badge.jsx
index a77b66c..c37eaaf 100644
--- a/src/components/panels/badge.jsx
+++ b/src/components/panels/badge.jsx
@@ -17,7 +17,7 @@ class Badge extends React.Component {
 		let realSize = typeof(this.props.size) === 'number' ? this.props.number : this.parseSize(this.props.size);
 
 		return (
-			<img {...this.props} src={`/img/badges/${this.props.filename}`} alt={this.props.name} width={realSize} height={realSize} />
+			<img {...this.props} src={`/img/badges/${this.props.filename}`} alt={this.props.name} width={realSize} height={realSize} style={{ minWidth: realSize, minHeight: realSize }} />
 		);
 	}
 
diff --git a/src/components/panels/badge_list.jsx b/src/components/panels/badge_list.jsx
new file mode 100644
index 0000000..1b994ca
--- /dev/null
+++ b/src/components/panels/badge_list.jsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Badge from './badge.jsx';
+
+class BadgeList extends React.Component {
+	constructor(props) {
+		super(props);
+
+		this.state = {
+			data: {}
+		};
+
+		if (props.getFetch) {
+			props.getFetch(() => this.sendRequest('/badgeslistrequest'));
+		}
+	}
+
+	render() {
+		if (!this.state.data.statistics) {
+			return (
+				<p className='panel'>Loading badges...</p>
+			);
+		}
+
+		return (
+			<div className='panel table'>
+				{Object.keys(this.state.data.statistics).map((name) =>
+					<div key={name}>
+						<div className={'panel row'} style={{padding: 10}}>
+							<div className={'col centered'} style={{ minWidth: 110 }}>
+								<Badge name={name} filename={this.state.data.statistics[name].filename} />
+							</div>
+							<div className={'col'} style={{flex: 4, display: 'flex', flexDirection: 'column', justifyContent: 'center'}}>
+								<h2>{name}</h2>
+								<p>{this.state.data.statistics[name].description}</p>
+								<p>Unlockable: {this.state.data.statistics[name].unlockable ? <span style={{color: 'lightgreen'}}>Yes</span> : this.state.data.statistics[name].unlockable === null ? <span style={{color: 'yellow'}}>Coding Incomplete</span> : <span style={{color: 'red'}}>No</span>}</p>
+							</div>
+						</div>
+						<div className='row'>
+							<hr className='col mobile show' />
+						</div>
+					</div>
+				)}
+			</div>
+		);
+	}
+
+	//gameplay functions
+	sendRequest(url, args = {}) { //send a unified request, using my credentials
+		//build the XHR
+		let xhr = new XMLHttpRequest();
+		xhr.open('POST', url, true);
+
+		xhr.onreadystatechange = () => {
+			if (xhr.readyState === 4) {
+				if (xhr.status === 200) {
+					let json = JSON.parse(xhr.responseText);
+
+					//on success
+					this.setState({ data: Object.assign({}, this.state.data, json) });
+				}
+				else if (xhr.status === 400 && this.props.setWarning) {
+					this.props.setWarning(xhr.responseText);
+				}
+			}
+		};
+
+		xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
+		xhr.send(JSON.stringify({
+			...args
+		}));
+	}
+};
+
+BadgeList.propTypes = {
+	setWarning: PropTypes.func,
+	getFetch: PropTypes.func
+};
+
+export default BadgeList;
\ No newline at end of file
diff --git a/src/components/panels/badge_select.jsx b/src/components/panels/badge_select.jsx
index 2ab3d2a..82add57 100644
--- a/src/components/panels/badge_select.jsx
+++ b/src/components/panels/badge_select.jsx
@@ -50,7 +50,7 @@ class BadgeSelect extends React.Component {
 							<hr className='col mobile show' />
 						</div>
 					</div>
-				)}
+				).reverse()}
 			</div>
 		);
 	}
diff --git a/src/components/panels/badge_text.jsx b/src/components/panels/badge_text.jsx
index bd7e1fe..cea40eb 100644
--- a/src/components/panels/badge_text.jsx
+++ b/src/components/panels/badge_text.jsx
@@ -22,9 +22,9 @@ class BadgeText extends React.Component {
 		let style = this.props.centered ? centerStyle : leftStyle;
 
 		return (
-			<div {...this.props} style={{...style, paddingBottom: '0.5em'}}>
+			<div className={this.props.className} style={{...style, paddingBottom: '0.5em'}}>
 				<Badge name={this.props.name} filename={this.props.filename} size={this.props.size} />
-				<p style={{paddingBottom: 0}}>{this.props.children}</p>
+				<p style={{paddingBottom: 0, ...this.props.style}}>{this.props.children}</p>
 			</div>
 		);
 	}