diff --git a/src/assets/314858_hidden_eye_icon.png b/src/assets/314858_hidden_eye_icon.png
new file mode 100644
index 0000000..6f2b613
Binary files /dev/null and b/src/assets/314858_hidden_eye_icon.png differ
diff --git a/src/assets/315220_eye_icon.png b/src/assets/315220_eye_icon.png
new file mode 100644
index 0000000..c7eec09
Binary files /dev/null and b/src/assets/315220_eye_icon.png differ
diff --git a/src/components/BarChart.vue b/src/components/BarChart.vue
index 6a43682..ee872b2 100644
--- a/src/components/BarChart.vue
+++ b/src/components/BarChart.vue
@@ -35,7 +35,7 @@ export default {
         }]
       },
       chartOptions: {
-        responsive: true
+        responsive: false
       }
     }
   }
@@ -43,9 +43,5 @@ export default {
 </script>
 
 <style scoped>
-#lateGraph{
-    position: relative;
-    height:48%;
-    left:0px;
-}
+
 </style>
\ No newline at end of file
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 404280b..b2e1e1e 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -1,5 +1,5 @@
 <template>
-  <nav class="navbar navbar-expand-sm navbar-light bg-light">
+  <nav style="z-index:4 " class="navbar navbar-expand-sm navbar-light bg-light">
   <div class="container-fluid">
     <router-link tag="a" style="text-decoration: none; color: black; font-weight: 100;" to="/" class="navbar-brand">
       <img src="https://cdn.discordapp.com/attachments/1017419092447207436/1063092138029625394/pixil-frame-0.png" alt="mascot" width="55" height="40" class="d-inline-block align-text-middle">
diff --git a/src/components/pieChart.vue b/src/components/pieChart.vue
index 21ef2c1..6fd04ae 100644
--- a/src/components/pieChart.vue
+++ b/src/components/pieChart.vue
@@ -1,12 +1,12 @@
 <template>
-<div id="statsDiv">
-    <div id="trainPie">
-        <Pie :data="trainData" :options="chartOptions" />
-    </div>
-    <div id="stationPie">
-        <Pie :data="stationData" :options="chartOptions" />
-    </div>
+
+<div v-if="trainChart">
+    <Pie :data="trainData" :options="chartOptions" />
 </div>
+<div v-if="!trainChart">
+    <Pie :data="stationData" :options="chartOptions" />
+</div>
+
 </template>
   
 <script lang="ts">
@@ -22,6 +22,13 @@ export default {
         Pie 
     },
 
+    props: {
+        trainChart: {
+            type: Boolean,
+            default: false
+        }
+    },
+
     data() {
         return{
             trainData: {
@@ -52,4 +59,8 @@ export default {
 </script>
 
 <style scoped>
+
+div{
+    width: 70%;
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/AccountPage.vue b/src/pages/AccountPage.vue
index 1eaa881..00e0f50 100644
--- a/src/pages/AccountPage.vue
+++ b/src/pages/AccountPage.vue
@@ -9,7 +9,10 @@
     <h3>Enter your current password to edit account settings</h3>
     <input v-if="showCurrentPassword" type="text" v-model="currentPassword" placeholder="Enter existing password">
     <input v-else type="password" v-model="currentPassword" placeholder="Enter existing password">
-    <button @click="this.showCurrentPassword = !this.showCurrentPassword" class="eye-button">Eye</button>
+    <div id="imgDiv1">
+        <img v-if="showPassword" id="eyeImg" src="../assets/314858_hidden_eye_icon.png" @click="this.showPassword = !this.showPassword" alt="show">
+        <img v-else id = "eyeImg" src="../assets/315220_eye_icon.png" @click="this.showPassword = !this.showPassword">
+      </div>
 
     <h3>Change email</h3>
     <input type="email" v-model="newEmail" aria-describedby="emailHelp" placeholder="Enter new email">
@@ -18,8 +21,12 @@
     <h3>Change password</h3>
     <input v-if="showNewPassword" type="text" v-model="newPassword" placeholder="Enter new password">
     <input v-else type="password" v-model="newPassword" placeholder="Enter new password">
-    <button @click="this.showNewPassword = !this.showNewPassword" class="eye-button">Eye</button>
-    <button @click="updateUserPassword()" type="submit" name="" value="Update Password">Update Password</button>
+
+    <div id="imgDiv2">
+        <img v-if="showPassword" id="eyeImg" src="../assets/314858_hidden_eye_icon.png" @click="this.showPassword = !this.showPassword" alt="show">
+        <img v-else id = "eyeImg" src="../assets/315220_eye_icon.png" @click="this.showPassword = !this.showPassword">
+      </div>
+    <input @click="updateUserPassword()" type="submit" name="" value="Update Password">
 
     <h3>Delete account</h3>
     <button @click="deleteUserAccount()" type="submit" name="" value="Delete Account">Delete Account</button>
@@ -221,4 +228,26 @@ button:focus {
   background-color: grey;
 }
 
+#imgDiv1{
+  height:8%;
+  left:190px;
+  top:260px;
+  position: absolute;
+}
+
+#imgDiv2{
+  height:8%;
+  left:330px;
+  top:400px;
+  position: absolute;
+}
+
+#eyeImg{
+  height:60%;
+  width:100%;
+}
+
+#eyeImg:hover{
+  transform: scale(1.3);
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/InsightsPage.vue b/src/pages/InsightsPage.vue
index af3c630..34662ae 100644
--- a/src/pages/InsightsPage.vue
+++ b/src/pages/InsightsPage.vue
@@ -1,71 +1,111 @@
 <template>
 <Navbar />
-<div v-if="this.insights" id="insightDiv">
-    <h1 style="padding-left: 10px;">Train Insights</h1>
-    <div id="trainTotal">
-        <div id="trainTotalText">
+
+<!-- Table to be shown on screen widths > 1000px -->
+<table id="statsTable" class="hideMobile">
+    <tr>
+        <th colspan = "2" style="border-right: 1px solid;">Train Insights</th>
+        <th colspan = "2">Station Insights</th>
+    </tr>
+    <tr>
+        <td><div v-if="readyToRender"><pieChart :id="stationPie" :trainChart="true"/></div></td>
+        <td style="border-right: 1px solid;">
+            <div v-if="readyToRender" id="statsDiv">
+                <BarChart id="lateGraph" /> 
+            </div>
+        </td>
+        
+        <td><div style="position:relative; left:30px;" v-if="readyToRender"><pieChart :id="stationPie" :trainChart="false"/></div></td>
+        
+    </tr>
+    <tr>
+        <td>
             <p>Total number of trains: {{ this.insights["totalNumTrains"] }}</p>
             <ul>
                 <li><p>Trains: {{ this.insights["numTrains"] }}</p></li>
                 <li><p>Darts: {{ this.insights["numDarts"] }}</p></li>
             </ul>
-        </div>
-        <div v-if="readyToRender" id="trainTotalChart">
-            <pieChart id="trainPie" />
-        </div>
-    </div>
-
-    <hr>
-    <p>Number of actively running trains: {{ this.insights["numRunningTrains"] }}</p>
-    <p>Percentage late: {{ this.insights["percentageLate"] }}%</p>
-    <p>Percentage early or ontime: {{ this.insights["percentageNotLate"] }}%</p>
-    <div v-if="readyToRender" id="statsDiv">
-        <BarChart id="lateGraph" /> 
-    </div>
-
-    <h1 style="padding-left: 10px;">Station Insights</h1>
-    <div id="stationTotal">
-        <div id="stationTotalText">
+        </td>
+        <td style="border-right: 1px solid;">
+            <p>Number of actively running trains: {{ this.insights["numRunningTrains"] }}</p>
+            <p>Percentage late: {{ this.insights["percentageLate"] }}%</p>
+            <p>Percentage early or ontime: {{ this.insights["percentageNotLate"] }}%</p>
+        </td>
+        <td>
             <p>Total number of stations: {{ this.insights["totalNumStations"] }}</p>
             <ul>
                 <li><p>Trains: {{ this.insights["numTrainStations"] }}</p></li>
                 <li><p>Darts: {{ this.insights["numDartStations"] }}</p></li>
             </ul>
-        </div>
-        <div id="stationTotalChart">
-            <pieChart v-if="readyToRender" id="stationPie" />
-        </div>
+        </td>
+    </tr>
+</table>
+
+<table id="statsTable" class="showMobile">
+    <tr>
+        <th colspan = "2" style="border-right: 1px solid;">Train Insights</th>
+        <th colspan = "2">Station Insights</th>
+    </tr>
+    <tr>
+        <td>
+            <p>Total number of trains: {{ this.insights["totalNumTrains"] }}</p>
+            <ul>
+                <li><p>Trains: {{ this.insights["numTrains"] }}</p></li>
+                <li><p>Darts: {{ this.insights["numDarts"] }}</p></li>
+            </ul>
+        </td>
+        <td style="border-right: 1px solid;">
+            <p>Number of actively running trains: {{ this.insights["numRunningTrains"] }}</p>
+            <ul>
+                <li><p>Percentage late: {{ this.insights["percentageLate"] }}%</p></li>
+                <li><p>Percentage early or ontime: {{ this.insights["percentageNotLate"] }}%</p></li>
+            </ul>
+            
+        </td>
+        <td>
+            <p>Total number of stations: {{ this.insights["totalNumStations"] }}</p>
+            <ul>
+                <li><p>Trains: {{ this.insights["numTrainStations"] }}</p></li>
+                <li><p>Darts: {{ this.insights["numDartStations"] }}</p></li>
+            </ul>
+        </td>
+    </tr>
+</table>
+
+<div id="leaderboardTitleDiv">
+    <p>Leaderboard</p>
+    <div id = "leaderboardToggle" class="form-check form-switch">
+        <input class="form-check-input" type="checkbox" role="switch" v-model="showTopEarliestLatest"/>
+        <label v-if="showTopEarliestLatest" class="form-check-label" for="showTopEarliestLatest">Showing All Trains</label>
+        <label v-else class="form-check-label" for="showTopEarliestLatest">Showing Top & Bottom 3</label>
     </div>
 </div>
 
-<div id="ads">
-    <h2>AdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAds
-        AdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAds
-        AdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAds
-        AdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAds
-        AdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAds
-        AdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAds
-    </h2>
-</div>
-<hr>
 
-<h1>Leaderboard</h1>
-<div class="form-check form-switch">
-    <input class="form-check-input" type="checkbox" role="switch" v-model="showTopEarliestLatest"/>
-    <label class="form-check-label" for="showTopEarliestLatest">Show top three earliest and latest</label>
+<div id="leaderboard">
+    <div v-if="!showTopEarliestLatest" v-for="train in topEarliestLatest" id="filteredLeaderboard">
+        <div v-if="train.time > 0" id="leaderLate">
+            <h2>{{ this.rawData[train.jsonIndex]["TrainCode"][0] }} - <span style="font-size:28px">Type: {{ this.rawData[train.jsonIndex]["TrainType"][0] }} | Heading {{ this.rawData[train.jsonIndex]["Direction"][0] }} </span></h2>
+            <p>{{ train.time }} mins late</p>
+            
+        </div>
+        <div v-else id="leaderEarly">
+            <h2>{{ this.rawData[train.jsonIndex]["TrainCode"][0] }} - <span style="font-size:28px">Type: {{ this.rawData[train.jsonIndex]["TrainType"][0] }} | Heading {{ this.rawData[train.jsonIndex]["Direction"][0] }} </span></h2>
+            <p>{{ train.time * -1}} mins early</p>
+        </div>
+    </div>
+    <div v-else v-for="train in orderedTrains" id="fullLeaderBoard">
+        <div> 
+            <h2>{{ this.rawData[train.jsonIndex]["TrainCode"][0] }} - <span style="font-size:28px">Type: {{ this.rawData[train.jsonIndex]["TrainType"][0] }} | Heading {{ this.rawData[train.jsonIndex]["Direction"][0] }} </span></h2>
+            <p v-if="train.time > 0">{{ train.time }} mins late</p>
+            <p v-else>{{ train.time * -1}} mins early</p>
+            
+        </div>
+        
+    </div>
+
 </div>
 
-<div v-if="!showTopEarliestLatest" v-for="train in orderedTrains">
-    <h2>{{ this.rawData[train.jsonIndex]["TrainCode"][0] }}</h2>
-    <p v-if="train.time > 0">{{ train.time }} mins late</p>
-    <p v-else>{{ train.time * -1}} mins early</p>
-</div>
-
-<div v-else v-for="train in topEarliestLatest">
-    <h2>{{ this.rawData[train.jsonIndex]["TrainCode"][0] }}</h2>
-    <p v-if="train.time > 0">{{ train.time }} mins late</p>
-    <p v-else>{{ train.time * -1}} mins early</p>
-</div>
 </template>
     
 <script>
@@ -252,50 +292,109 @@ export default {
 </script>
     
 <style scoped>
-#insightDiv {
-    color: black;
-    padding-left: 10px;
-    width:80%;
-    background-color: rgb(250, 235, 215);
+
+
+.showMobile{/*Hides table for screens smaller than 1000px*/
+    display: none;
 }
 
-#trainTotal, #stationTotal {
-    height: 280px;
-
-}
-#trainTotalText, #stationTotalText {
-    position: relative;
-    width: 30%;
-    height: 100%;
-    right:0px;
-}
-
-#trainTotalChart, #stationTotalChart {
+#trainPie, #stationPie{
+    width: 40%;
     position: absolute;
-    top:114px;
-    width: 50%;
-    height: 20%;
-    left: 20%;
 }
 
+
 #lateGraph {
-    position: absolute;
-    height:50%;
-    left:0px;
+    position: relative;
+    height: 20%;
+    width: 20%;
+    left: 10px;
 }
 
-#statsDiv {
-    height: 230px;
+
+th{
+    padding: 15px;
+    text-align: center;
+    font-size: 22px;
 }
 
-#ads {
-    position: absolute;
-    background-color:rgb(78, 232, 109);
-    right: 0px;
-    width:20%;
-    height: 110%;
-    top:66px;
-    word-wrap: break-word;
-    overflow-y: hidden;
+#statsTable{
+    border: 1px solid;
+    width: 80%;
+    left: 10%;
+    position: relative;
+}
+
+#leaderboard{
+    width: 100%;
+    text-align: center;
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+    font-size: small;
+}
+
+#leaderboardToggle{
+    position: relative;
+    top: -40px;
+    left: 20px;
+}
+
+
+#leaderboardTitleDiv div{
+    width: 10%;
+    top: -10px;
+    left:47%;
+}
+
+#leaderboardTitleDiv p{
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+    text-align: center;
+    font-size: 50px;
+    padding-top:10px;
+    text-shadow: 2px 2px rgb(155, 155, 155);
+}
+#leaderEarly{
+    color: rgb(129, 213, 3);
+    text-align: center;
+    width:100%;
+    z-index: 1;
+}
+
+#leaderLate{
+    color: #fc1919;
+    text-align: center;
+    width: 100%;
+    z-index:2;
+    
+}
+
+#filteredLeaderboard h2{
+    text-shadow: 2px 1px rgb(110, 110, 110);
+}
+
+#fullLeaderBoard{
+    text-align: center;
+}
+
+@media screen and (max-width: 1000px) {
+    .hideMobile{
+        display:none;
+    }
+    .showMobile{
+        display:block;
+    }
+
+    #statsTable p{
+        font-size: 12px;
+        padding: 2px;
+        text-align: center;
+    }
+
+    tr{
+        border: 1px solid;
+    }
+    #statsTable{
+        padding: 2px;
+        border: 0px;
+    }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/LoginPage.vue b/src/pages/LoginPage.vue
index 0089348..4417569 100644
--- a/src/pages/LoginPage.vue
+++ b/src/pages/LoginPage.vue
@@ -8,9 +8,14 @@
       <p>Email Address</p>
       <input type="email" v-model="email" aria-describedby="emailHelp" placeholder="Enter email">
       <p>Password</p>
+      <div id="imgDiv">
+        <img v-if="showPassword" id="eyeImg" src="../assets/314858_hidden_eye_icon.png" @click="this.showPassword = !this.showPassword" alt="show">
+        <img v-else id = "eyeImg" src="../assets/315220_eye_icon.png" @click="this.showPassword = !this.showPassword">
+      </div>
       <input v-if="showPassword" type="text" v-model="password" placeholder="Enter password">
       <input v-else type="password" v-model="password" placeholder="Enter password">
-      <button @click="this.showPassword = !this.showPassword">Eye</button>
+      
+      
       <input @click="login" type="submit" name="" value="Login">
       <a @click="forgotPassword = !forgotPassword; this.email = ''">Forgot password?</a>
       <a><router-link to="/signup">Don't have an account?</router-link></a>
@@ -145,6 +150,23 @@ export default {
   padding: 70px 30px;
 }
 
+#imgDiv{
+  height:10%;
+  width:10%;
+  right: 40px;
+  bottom:150px;
+  position: absolute;
+}
+
+#eyeImg{
+  height:80%;
+  width:100%;
+}
+
+#eyeImg:hover{
+  transform: scale(1.3);
+}
+
 h1 {
   margin: 0;
   padding: 0 0 20px;
diff --git a/src/pages/MapPage.vue b/src/pages/MapPage.vue
index 953019a..5292d82 100644
--- a/src/pages/MapPage.vue
+++ b/src/pages/MapPage.vue
@@ -598,4 +598,14 @@ export default {
   text-align: bottom;
   font-size: 16px;
 }
-</style>
+
+/* Phone Screen CSS */
+@media screen and (max-width: 850px) {
+  #sidebar {
+  height: 75%;
+  width: 90%;
+  left:5%;
+  top: 18%;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/SignUpPage.vue b/src/pages/SignUpPage.vue
index aca9e68..587e37e 100644
--- a/src/pages/SignUpPage.vue
+++ b/src/pages/SignUpPage.vue
@@ -6,11 +6,13 @@
     <h1>Sign Up</h1>
     <p>Email Address</p>
     <input type="email" v-model="email" aria-describedby="emailHelp" placeholder="Enter email">
-    <p>Password</p>
+    <p>Password (6 or more characters)</p>
+    <div id="imgDiv">
+        <img v-if="showPassword" id="eyeImg" src="../assets/314858_hidden_eye_icon.png" @click="this.showPassword = !this.showPassword" alt="show">
+        <img v-else id = "eyeImg" src="../assets/315220_eye_icon.png" @click="this.showPassword = !this.showPassword">
+      </div>
     <input v-if="showPassword" type="text" v-model="password" placeholder="Enter password">
     <input v-else type="password" v-model="password" placeholder="Enter password">
-    <button @click="this.showPassword = !this.showPassword">Eye</button>
-    <a>Passwords must have 6 or more characters</a>
     <input @click="signup" type="submit" name="" value="Sign Up">
     <a><router-link to="/login">Already have an account?</router-link></a>
   </div>
@@ -41,7 +43,7 @@ export default {
       password: "",
       toastMessage: "",
       toastBackground: "",
-      showPassword: true,
+      showPassword: false,
       toast
     }
   },
@@ -113,6 +115,23 @@ export default {
   padding: 70px 30px;
 }
 
+#imgDiv{
+  height:10%;
+  width:10%;
+  right: 40px;
+  bottom:150px;
+  position: absolute;
+}
+
+#eyeImg{
+  height:80%;
+  width:100%;
+}
+
+#eyeImg:hover{
+  transform: scale(1.3);
+}
+
 h1 {
   margin: 0;
   padding: 0 0 20px;