diff --git a/app/src/api/services/leaderboard.ts b/app/src/api/services/leaderboard.ts
index 03fcb70c..7b40290b 100644
--- a/app/src/api/services/leaderboard.ts
+++ b/app/src/api/services/leaderboard.ts
@@ -6,8 +6,9 @@ async function getLeaders(number_limit: number, time_limit: number) {
     number_limit = Math.min(number_limit, max_limit);
 
     try {
+        let leaders;
         if(time_limit > 0){
-            return await db.manyOrNone(
+            leaders = await db.manyOrNone(
                 `SELECT count(log_id) as number_edits, username
                 FROM logs, users
                 WHERE logs.user_id = users.user_id
@@ -19,7 +20,7 @@ async function getLeaders(number_limit: number, time_limit: number) {
                 LIMIT $2`, [time_limit, number_limit]
             );
         } else {
-            return await db.manyOrNone(
+            leaders = await db.manyOrNone(
                 `SELECT count(log_id) as number_edits, username
                 FROM logs, users
                 WHERE logs.user_id = users.user_id
@@ -30,6 +31,9 @@ async function getLeaders(number_limit: number, time_limit: number) {
                 LIMIT $1`, [number_limit]
             );
         }
+        return leaders.map(d => {
+            return {username: d.username, number_edits: Number(d.number_edits)};
+        })
     } catch(error) {
         console.error(error);
         return [];
diff --git a/app/src/frontend/header.tsx b/app/src/frontend/header.tsx
index 195795d4..570f6bba 100644
--- a/app/src/frontend/header.tsx
+++ b/app/src/frontend/header.tsx
@@ -58,6 +58,8 @@ class Header extends React.Component<HeaderProps, HeaderState> {
                     </button>
                 </div>
                 <nav className={this.state.collapseMenu ? 'collapse navbar-collapse' : 'navbar-collapse'}>
+                    <Categories mode='view' />
+                    <hr />
                     <ul className="navbar-nav flex-column">
                         <li className="nav-item">
                             <NavLink to="/view/categories" className="nav-link" onClick={this.handleNavigate}>
@@ -133,8 +135,6 @@ class Header extends React.Component<HeaderProps, HeaderState> {
                         </li>
                     </ul>
                     <hr />
-                    <Categories mode='view' />
-                    <hr />
                     <ul className="navbar-nav flex-column">
                         <li className="nav-item">
                             <NavLink to="/contact.html" className="nav-link" onClick={this.handleNavigate}>
diff --git a/app/src/frontend/pages/leaderboard.css b/app/src/frontend/pages/leaderboard.css
deleted file mode 100644
index e89a487f..00000000
--- a/app/src/frontend/pages/leaderboard.css
+++ /dev/null
@@ -1,34 +0,0 @@
-table {
-    table-layout: fixed;
-    width: 60%;
-    margin-left: 20%;
-    margin-right: 20%;
-    border: 1px solid black;
-}
-
-table th, td {
-    border: 1px solid black;
-    text-align: left;
-    padding-left: 1%;
-}
-
-table tr:nth-child(odd) {
-    background: #f6f8fa;
-}
-
-table tr:nth-child(1) {
-    background: #fff;
-}
-
-#title {
-    text-align: center;
-    padding-bottom: 1%; 
-}
-
-#radiogroup {
-    padding: 1%;
-}
-
-input[type="radio"] {
-    margin: 0 2px 0 10px;
-}
diff --git a/app/src/frontend/pages/leaderboard.tsx b/app/src/frontend/pages/leaderboard.tsx
index 5ec6612d..f06594fc 100644
--- a/app/src/frontend/pages/leaderboard.tsx
+++ b/app/src/frontend/pages/leaderboard.tsx
@@ -1,25 +1,23 @@
 import React, { Component } from 'react';
 
-import './leaderboard.css';
 
-    interface Leader {
-        number_edits: string;
-        username: string;
-    }
+interface Leader {
+    number_edits: number;
+    username: string;
+}
 
 
-    interface LeaderboardProps {
-    }
+interface LeaderboardProps {}
 
 
-    interface LeaderboardState {
-        leaders: Leader[];
-        fetching: boolean;
+interface LeaderboardState {
+    leaders: Leader[];
+    fetching: boolean;
 
-        //We need to track the state of the radio buttons to ensure their current state is shown correctly when the view is (re)rendered
-        number_limit: number;
-        time_limit: number;
-    }
+    //We need to track the state of the radio buttons to ensure their current state is shown correctly when the view is (re)rendered
+    number_limit: number;
+    time_limit: number;
+}
 
 
 class LeaderboardPage extends Component<LeaderboardProps, LeaderboardState> {
@@ -27,44 +25,38 @@ class LeaderboardPage extends Component<LeaderboardProps, LeaderboardState> {
     constructor(props) {
         super(props);
         this.state = {
-	    leaders: [],
-	    fetching: false,
+            leaders: [],
+            fetching: false,
             number_limit: 10,
             time_limit: -1
         };
-       this.getLeaders = this.getLeaders.bind(this);
-       this.renderTableData = this.renderTableData.bind(this);		
-       this.handleChange = this.handleChange.bind(this);
+        this.getLeaders = this.getLeaders.bind(this);
+        this.renderTableData = this.renderTableData.bind(this);
+        this.handleChange = this.handleChange.bind(this);
     }
 
-	
+
     handleChange(e) {
         if(e.target.name == 'number_limit'){
             this.getLeaders(e.target.value, this.state.time_limit);
             this.setState({number_limit: e.target.value});
-	}else {
+        } else {
             this.getLeaders(this.state.number_limit, e.target.value);
-	    this.setState({time_limit: e.target.value});
+            this.setState({time_limit: e.target.value});
         }
     }
-	
-	
-    componentDidMount() { 
-	this.getLeaders(this.state.number_limit, this.state.time_limit);
+
+    componentDidMount() {
+        this.getLeaders(this.state.number_limit, this.state.time_limit);
     }
 
-
-    componentWillUnmount() {}
-		
-	
-    getLeaders(number_limit, time_limit) {
-        
+    getLeaders(number_limit: number, time_limit: number) {
         this.setState({
             fetching: true
         });
 
         fetch(
-            '/api/leaderboard/leaders?number_limit=' + number_limit + '&time_limit='+time_limit
+            `/api/leaderboard/leaders?number_limit=${number_limit}&time_limit=${time_limit}`
         ).then(
             (res) => res.json()
         ).then((data) => {
@@ -73,7 +65,7 @@ class LeaderboardPage extends Component<LeaderboardProps, LeaderboardState> {
                     leaders: data.leaders,
                     fetching: false
                 });
-		
+
             } else {
                 console.error(data);
 
@@ -91,59 +83,115 @@ class LeaderboardPage extends Component<LeaderboardProps, LeaderboardState> {
             });
         });
     }
-	
-	
+
+
     renderTableData() {
         return this.state.leaders.map((u, i) => {
-	    const username = u.username;             
+            const username = u.username;
             const number_edits = u.number_edits;
-         
-	    return (
-		<tr key={username}>
-                    <td>{i+1}</td>
-		    <td>{username}</td>
-		    <td>{number_edits}</td>
-		</tr>
-	    );
-      });
-   }
+
+            return (
+                <tr key={username}>
+                    <th scope="row">{i+1}</th>
+                    <td>{username}</td>
+                    <td>{number_edits.toLocaleString()}</td>
+                </tr>
+            );
+        });
+    }
 
 
     render() {
-	return(
-            <div>
-                <form id="radiogroup">    
-                    <div id="number-radiogroup" >
-			<p>Select number of users to be displayed: <br/>
-                            <input type="radio" name="number_limit" value="10" onChange={this.handleChange} checked={10 == this.state.number_limit} />10
-                            <input type="radio" name="number_limit" value="100" onChange={this.handleChange} checked={100 == this.state.number_limit} />100
-                        </p>
-                    </div>
-                    <div id="time-radiogroup" >
-                        <p>Select time period: <br/>
-                            <input type="radio" name="time_limit" value="-1" onChange={this.handleChange}  checked={-1 == this.state.time_limit} /> All time
-			    <input type="radio" name="time_limit" value="7" onChange={this.handleChange}  checked={7 == this.state.time_limit} /> Last 7 days
-                            <input type="radio" name="time_limit" value="30" onChange={this.handleChange}  checked={30 == this.state.time_limit} /> Last 30 days
-                        </p>
-                    </div>
-                </form>      
-                <h1 id='title'>Leader Board</h1>
-                <table id='leaderboard'>
-                    <tbody>
-                        <tr>
-                            <th>Rank</th>
-                            <th>Username</th>
-                            <th>Contributions</th>
-                        </tr>
-                        {this.renderTableData()}
-                    </tbody>
-                </table>
-            </div>		
-	);
+        return (
+            <article>
+                <section className="main-col">
+                    <h1 className="h2">Leaderboard</h1>
+                    <form>
+                        <label>Select number of users to be displayed</label>
+                        <div className="form-group">
+                            <div className="form-check-inline">
+                                <input
+                                    type="radio"
+                                    name="number_limit"
+                                    id="number_10"
+                                    className="form-check-input"
+                                    value="10"
+                                    onChange={this.handleChange}
+                                    checked={10 == this.state.number_limit}
+                                    />
+                                <label className="form-check-label" htmlFor="number_10">10</label>
+                            </div>
+                            <div className="form-check-inline">
+                                <input
+                                    type="radio"
+                                    name="number_limit"
+                                    id="number_100"
+                                    className="form-check-input"
+                                    value="100"
+                                    onChange={this.handleChange}
+                                    checked={100 == this.state.number_limit}
+                                    />
+                                <label className="form-check-label" htmlFor="number_100">100</label>
+                            </div>
+                        </div>
+                        <label>Select time period</label>
+                        <div className="form-group">
+                            <div className="form-check-inline">
+                                <input
+                                    type="radio"
+                                    name="time_limit"
+                                    id="time_all"
+                                    className="form-check-input"
+                                    value="-1"
+                                    onChange={this.handleChange}
+                                    checked={-1 == this.state.time_limit}
+                                    />
+                                <label className="form-check-label" htmlFor="time_all">All time</label>
+                            </div>
+                            <div className="form-check-inline">
+                                <input
+                                    type="radio"
+                                    name="time_limit"
+                                    id="time_7"
+                                    className="form-check-input"
+                                    value="7"
+                                    onChange={this.handleChange}
+                                    checked={7 == this.state.time_limit}
+                                    />
+                                <label className="form-check-label" htmlFor="time_7">Last 7 days</label>
+                            </div>
+                            <div className="form-check-inline">
+                                <input
+                                    type="radio"
+                                    name="time_limit"
+                                    id="time_30"
+                                    className="form-check-input"
+                                    value="30"
+                                    onChange={this.handleChange}
+                                    checked={30 == this.state.time_limit}
+                                    />
+                                <label className="form-check-label" htmlFor="time_30">Last 30 days</label>
+                            </div>
+                        </div>
+                    </form>
+                    <table className="table table-striped">
+                        <thead>
+                            <tr>
+                                <th scope="col">#</th>
+                                <th scope="col">Username</th>
+                                <th scope="col">Contributions</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {this.renderTableData()}
+                        </tbody>
+                    </table>
+                </section>
+            </article>
+        );
     }
 
 }
 
 
 export default LeaderboardPage;
-