diff --git a/public/styles/shared.css b/public/styles/shared.css
index 4fdb1d2..0c5c646 100644
--- a/public/styles/shared.css
+++ b/public/styles/shared.css
@@ -6,17 +6,20 @@
 }
 
 body {
-	font: 13pt Helvetica, Arial;
+	font: 12pt Helvetica, Arial;
 	width: 100vw;
 	height: 100vh;
 	display: flex;
 	flex-direction: column;
 	overflow-x: hidden;
 	overflow-y: auto;
+	background-color: #000000;
+	color: white;
 }
 
 h1 {
 	font: 24pt;
+	color: red;
 }
 
 h2 {
@@ -65,11 +68,12 @@ footer {
 	flex-direction: column;
 	padding: 0 10px;
 	min-height: 100vh;
+	margin: 0 10%;
 }
 
-@media screen and (min-width: 768px) {
+@media screen and (max-width: 768px) {
 	.central {
-		margin: 0 10%;
+		margin: 0;
 	}
 }
 
@@ -104,3 +108,74 @@ footer {
 	background: #ff6666;
 }
 
+/* custom styling */
+
+/* Homepage structure */
+.homePage {
+	flex: 1;
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-start;
+	align-items: flex-start;
+}
+
+@media screen and (max-width: 480px) {
+	.homePage {
+		flex-direction: column;
+	}
+}
+
+/* left panel */
+.sidePanel {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+	min-width: 320px;
+	width: 320px;
+}
+
+@media screen and (max-width: 480px) {
+	.sidePanel {
+		align-self: stretch;
+		width: auto;
+	}
+}
+
+.panel.left, .panel.center {
+	align-items: center;
+}
+
+.panel.left .warning, .panel.center .warning {
+	align-self: stretch;
+}
+
+.panel.left form, .panel.center form {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+	align-self: stretch;
+}
+
+.panel.left form button, .panel.center form button {
+	align-self: stretch;
+	margin-top: .2em;
+	margin-bottom: .2em;
+}
+
+@media screen and (max-width: 480px) {
+	.panel.left h1, .panel.center h1 {
+		font-size: 16px;
+	}
+}
+
+/* New panel */
+.newsPanel {
+	margin-left: 15px;
+}
+
+/* bits and pieces */
+.logoutButton {
+	align-self: stretch;
+}
\ No newline at end of file
diff --git a/src/components/pages/home.jsx b/src/components/pages/home.jsx
index 57af9d3..58afdd7 100644
--- a/src/components/pages/home.jsx
+++ b/src/components/pages/home.jsx
@@ -15,100 +15,130 @@ class Home extends React.Component {
 		super(props);
 		this.state = {
 			changedPassword: false,
-			signedUp: false,
+			signupSent: false,
 			signupMsg: '',
 			recoverSent: false,
 			recoverMsg: ''
 		};
 	}
 
+	//rendering function
 	render() {
-		//DEBUGGING: well this is goofy
+		//get the correct side panel
 		let SidePanel;
 
-		if (this.props.id) { //logged in
-			SidePanel = () => {
-				if (this.state.signedUp) {
-					this.setState({ signedUp: false });
-				}
-
-				if (this.state.recoverSent) {
-					this.setState({ recoverSent: false });
-				}
-
-				let PasswordChangePanel;
-
-				if (!this.state.changedPassword) {
-					PasswordChangePanel = () => {
-						return (<PasswordChange onPasswordChange={() => { this.setState({changedPassword: true}) }} />);
-					}
-				} else {
-					PasswordChangePanel = () => {
-						return (<p>Password changed!</p>);
-					}
-				}
-
-				return (
-					<div>
-						<p>You are logged in.</p>
-						<PasswordChangePanel />
-						<Logout />
-					</div>
-				);
-			};
-		} else { //not logged in
-			SidePanel = () => {
-				if (this.state.changedPassword) {
-					this.setState({ changedPassword: false });
-				}
-
-				let SignupPanel;
-
-				if (!this.state.signedUp) {
-					SignupPanel = () => {
-						return (
-							<Signup onSignup={(msg) => this.setState( {signedUp: true, signupMsg: msg} )} />
-						);
-					}
-				} else {
-					SignupPanel = () => {
-						return (
-							<p>{this.state.signupMsg}</p>
-						);
-					}
-				}
-
-				let RecoverPanel;
-
-				if (!this.state.recoverSent) {
-					RecoverPanel = () => {
-						return (
-							<PasswordRecover onEmailSent={(msg) => this.setState( {recoverSent: true, recoverMsg: msg} )} />
-						);
-					}
-				}
-				else {
-					RecoverPanel = () => {
-						return (
-							<p>{this.state.recoverMsg}</p>
-						);
-					}
-				}
-
-				return (
-					<div>
-						<SignupPanel />
-						<Login />
-						<RecoverPanel />
-					</div>
-				);
-			};
+		if (this.props.id) {
+			SidePanel = this.LoggedInSidePanel.bind(this);
+		} else {
+			SidePanel = this.LoggedOutSidePanel.bind(this);
 		}
 
+		//TODO: news column
+
+		//return the home page
 		return (
 			<div className='page'>
-				<p>This is the home page.</p>
-				<SidePanel />
+				<h1 style={{textAlign: 'center', fontSize: '50px', margin: '30px'}}>KINGDOM BATTLES!</h1>
+				<div className='homePage'>
+					<SidePanel />
+					<br />
+					<div className='newsPanel'>
+						<h1 className='centered'>News</h1>
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+					</div>
+				</div>
+			</div>
+		);
+	}
+
+	//panel functions
+	LoggedInSidePanel() {
+		//reset the other mode
+		if (this.state.signupSent) {
+			this.setState({ signupSent: false });
+		}
+
+		if (this.state.recoverSent) {
+			this.setState({ recoverSent: false });
+		}
+
+		//build the password change panel
+		let PasswordChangePanel;
+
+		if (!this.state.changedPassword) {
+			PasswordChangePanel = () => {
+				return (<PasswordChange onPasswordChange={() => { this.setState({changedPassword: true}) }} />);
+			}
+		} else {
+			PasswordChangePanel = () => {
+				return (<p>Password changed!</p>);
+			}
+		}
+
+		//finally return the side panel
+		return (
+			<div className='sidePanel'>
+				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+				<PasswordChangePanel />
+				<Logout />
+			</div>
+		);
+	}
+
+	LoggedOutSidePanel() {
+		//reset the other mode
+		if (this.state.changedPassword) {
+			this.setState({ changedPassword: false });
+		}
+
+		//build the signup panel
+		let SignupPanel;
+
+		if (!this.state.signupSent) {
+			SignupPanel = () => {
+				return (
+					<Signup onSignup={(msg) => this.setState( {signupSent: true, signupMsg: msg} )} />
+				);
+			}
+		} else {
+			SignupPanel = () => {
+				return (
+					<p>{this.state.signupMsg}</p>
+				);
+			}
+		}
+
+		//build the recover panel
+		let RecoverPanel;
+
+		if (!this.state.recoverSent) {
+			RecoverPanel = () => {
+				return (
+					<PasswordRecover onEmailSent={(msg) => this.setState( {recoverSent: true, recoverMsg: msg} )} />
+				);
+			}
+		}
+		else {
+			RecoverPanel = () => {
+				return (
+					<p>{this.state.recoverMsg}</p>
+				);
+			}
+		}
+
+		//finally return the side panel 
+		return (
+			<div className='sidePanel'>
+				<SignupPanel />
+				<Login />
+				<RecoverPanel />
 			</div>
 		);
 	}
diff --git a/src/components/pages/password_reset.jsx b/src/components/pages/password_reset.jsx
index 63029f9..07893c5 100644
--- a/src/components/pages/password_reset.jsx
+++ b/src/components/pages/password_reset.jsx
@@ -30,9 +30,9 @@ class PasswordReset extends React.Component {
 		}
 
 		return (
-			<div className='page'>
+			<div className='page' style={{justifyContent: 'center'}}>
 				<Panel />
-				<Link to='/'>Return Home</Link>
+				<Link to='/' className='centered'>Return Home</Link>
 			</div>
 		);
 	}
diff --git a/src/components/panels/login.jsx b/src/components/panels/login.jsx
index 0d3a04d..7d5a4dc 100644
--- a/src/components/panels/login.jsx
+++ b/src/components/panels/login.jsx
@@ -19,7 +19,7 @@ class Login extends React.Component {
 		};
 
 		return (
-			<div className='panel'>
+			<div className='panel left'>
 				<h1>Login</h1>
 
 				<div className='warning' style={warningStyle}>
diff --git a/src/components/panels/logout.jsx b/src/components/panels/logout.jsx
index 2ee6c1c..64e00fa 100644
--- a/src/components/panels/logout.jsx
+++ b/src/components/panels/logout.jsx
@@ -9,7 +9,7 @@ class Logout extends React.Component {
 
 	render() {
 		return (
-			<button type='submit' onClick={(e) => this.submit(e)}>Logout</button>
+			<button className='logoutButton' type='submit' onClick={(e) => this.submit(e)}>Logout</button>
 		);
 	}
 
diff --git a/src/components/panels/password_change.jsx b/src/components/panels/password_change.jsx
index ae39a12..3b4a3f5 100644
--- a/src/components/panels/password_change.jsx
+++ b/src/components/panels/password_change.jsx
@@ -18,7 +18,7 @@ class PasswordChange extends React.Component {
 		};
 
 		return (
-			<div className='panel'>
+			<div className='panel left'>
 				<h1>Change Password</h1>
 
 				<div className='warning' style={warningStyle}>
diff --git a/src/components/panels/password_recover.jsx b/src/components/panels/password_recover.jsx
index 3c8a6ea..f0ffca9 100644
--- a/src/components/panels/password_recover.jsx
+++ b/src/components/panels/password_recover.jsx
@@ -16,7 +16,7 @@ class PasswordRecover extends React.Component {
 		};
 
 		return (
-			<div className='panel'>
+			<div className='panel left'>
 				<h1>Recover Password</h1>
 
 				<div className='warning' style={warningStyle}>
diff --git a/src/components/panels/password_reset.jsx b/src/components/panels/password_reset.jsx
index ed1434d..acee2c8 100644
--- a/src/components/panels/password_reset.jsx
+++ b/src/components/panels/password_reset.jsx
@@ -19,7 +19,7 @@ class PasswordReset extends React.Component {
 		};
 
 		return (
-			<div className='panel'>
+			<div className='panel center'>
 				<h1>Change Password</h1>
 
 				<div className='warning' style={warningStyle}>
diff --git a/src/components/panels/signup.jsx b/src/components/panels/signup.jsx
index c02fc2b..cf67ee1 100644
--- a/src/components/panels/signup.jsx
+++ b/src/components/panels/signup.jsx
@@ -19,7 +19,7 @@ export default class Signup extends React.Component {
 		};
 
 		return (
-			<div className='panel'>
+			<div className='panel left'>
 				<h1>Sign Up</h1>
 
 				<div className='warning' style={warningStyle}>