diff --git a/src/assets/descriptionIcon.png b/src/assets/descriptionIcon.png
new file mode 100644
index 0000000..88edfe1
Binary files /dev/null and b/src/assets/descriptionIcon.png differ
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index b2e1e1e..0ddab5b 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -1,9 +1,9 @@
 <template>
   <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">
-      <b>Irish Rail Tracker</b>
+    <router-link id="logo" 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" id="trainImg" class="d-inline-block align-text-middle">
+      <b style="text-align: center;">Irish Rail Tracker</b>
     </router-link>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
@@ -78,4 +78,16 @@ a {
   color: black;
   font-weight: 100;
 }
+
+#trainImg{
+  position: relative;
+  bottom: 8px;
+
+}
+
+#logo{
+  position: relative;
+  top: 2.5px;
+
+}
 </style>
\ No newline at end of file
diff --git a/src/components/StationSidebar.vue b/src/components/StationSidebar.vue
index 29b12d7..87ca5f3 100644
--- a/src/components/StationSidebar.vue
+++ b/src/components/StationSidebar.vue
@@ -1,15 +1,36 @@
 <template>
 <div id="sidebarDiv">
+    <div v-on:click="store.setDisplaySelectedStation(false)" id="xButton">X</div>
+    <h2>Station Code: {{ store.selectedStation["StationCode"][0] }}</h2>
     <div id="sidebarHeader">
         <img id="headerImage" src="../assets/station.png" alt="Station Icon">
-        <div v-on:click="store.setDisplaySelectedStation(false)" id="xButton">X</div>
     </div>
 
     <div id="sidebarDiv">
-        <h2>Station Code: {{ store.selectedStation["StationCode"][0] }}</h2>
-        <p id="typeP">Type: {{ store.selectedStation["StationType"][0] }}</p>
-        <p id="dateP">Station Position - Long: {{ store.selectedStation["StationLongitude"][0] }} Lat: {{ store.selectedStation["StationLatitude"][0] }}</p>
-        <p id="directionP">Description: {{ store.selectedStation["StationDesc"][0] }}</p>
+        <div id="typeDiv">
+          <div id="typeIcon">
+            <img id="typeImage" src = "../assets/trainTypeIcon.png">
+          </div>
+            <p id="typeP"><span style="color:grey; font-size: 14px;">Station Type:</span><br>{{ store.selectedStation["StationType"][0] }}</p>
+        </div>
+
+        <div id="positionDiv">
+          <div id="positionIcon">
+            <img id="positionImage" src = "../assets/locationIcon.png">
+          </div>
+          <div id="positionParagraphDiv">
+            <p id="longP"><span style="color:grey; font-size: 14px;">Longitude:</span><br>{{ store.selectedStation["StationLongitude"][0] }}</p>
+            <p id="latP"><span style="color:grey; font-size: 14px;">Latitude:</span><br>{{ store.selectedStation["StationLatitude"][0] }}</p>
+          </div>
+        </div>
+        
+        <div id="descriptionDiv">
+          <div id="descriptionIcon">
+            <img id="descriptionImage" src="../assets/descriptionIcon.png">
+          </div>
+          <p id="descriptionP"><span style="color:grey; font-size: 14px;">Description:</span><br>{{ store.selectedStation["StationDesc"][0] }}</p>
+        </div>
+        
     </div>
 </div>
 </template>
@@ -29,26 +50,29 @@ export default {
 
 <style scoped>
 #sidebarHeader{
-    position: relative;
-    top:0%;
-    height: 15%;
-    width: 100%;
-    overflow: hidden;
+  position: relative;
+  top:0%;
+  height: 15%;
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  justify-content: center; 
+  background-color: rgb(214, 214, 214);
+  box-shadow: 0 0 5px 2px rgb(190, 190, 190);
 }
 
 #sidebarDiv{
-    position: absolute;
-    height: 80%;
-    width: 100%;
-    color: rgb(0, 0, 0);
+  position: absolute;
+  height: 80%;
+  width: 100%;
+  color: rgb(0, 0, 0);
+  padding-top: 10px;
 }
 
-#headerImage{
-    height: 80%;
-    width: auto;
-    overflow: hidden;
-    position: relative;
-    top: 10px;
+.headerImage{
+  height: 100%;
+  width: 100%;
+  padding: 10px;
 }
 
 #xButton{
@@ -63,4 +87,58 @@ export default {
 #xButton:hover{
     color:red;
 }
+
+#typeDiv, #positionDiv, #descriptionDiv{
+  background-color: rgb(230, 230, 230);
+  height: 12%;
+  position: absolute;
+  right:0px;
+  width:100%;
+}
+
+#typeIcon, #positionIcon, #descriptionIcon{
+  background-color: rgb(214, 214, 214);
+  width:20%;
+  height: 100%;
+  position: absolute;
+  left:0px;
+  display: flex;
+  justify-content: center;
+}
+
+#positionImage, #descriptionImage{
+  padding-top: 2px; 
+  padding-bottom: 2px;
+}
+
+#typeP, #longP, #latP, #descriptionP{
+  font-size: 16px;
+  position: relative;
+  bottom: 3px;
+  width: 40%;
+  left: 22%;
+  text-align: left;
+}
+
+#positionParagraphDiv{display: flex;}
+
+#latP{left: 3%;}
+
+#typeImage{width: 70%;}
+
+#positionDiv{top: 16%;}
+#descriptionDiv{top: 29.5%;}
+
+@media screen and (max-width: 850px) {
+  .headerImage{
+  height: 100%;
+  width: 100%;
+  padding: 10px;
+  }
+
+  #typeImage{
+  width: 50%;
+  }
+
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/AccountPage.vue b/src/pages/AccountPage.vue
index a23b6ff..d3d6310 100644
--- a/src/pages/AccountPage.vue
+++ b/src/pages/AccountPage.vue
@@ -6,32 +6,30 @@
         <p style="text-align:center" v-if="this.user">Your email: <b>{{ this.user.email }}</b><br><span id="passReset" @click="resetPasswordEmail()">Send password reset email</span></p>
 
         <h3>Enter your current password to edit the below settings</h3>
-        <div id="imgDiv1">
-            <img v-if="!showCurrentPassword" id="eyeImg" src="../assets/314858_hidden_eye_icon.png" @click="this.showCurrentPassword = !this.showCurrentPassword" alt="show">
+        <div id="currentPassword">
+            <img v-if="showCurrentPassword" id="eyeImg" src="../assets/314858_hidden_eye_icon.png" @click="this.showCurrentPassword = !this.showCurrentPassword" alt="show">
             <img v-else id = "eyeImg" src="../assets/315220_eye_icon.png" @click="this.showCurrentPassword = !this.showCurrentPassword">
+            <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">
         </div>
-
-        <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">
-
         <h3>Change email</h3>
         <input type="email" v-model="newEmail" aria-describedby="emailHelp" placeholder="Enter new email">
         <button @click="updateUserEmail()" id="emailUpdate" type="button" class="btn btn-primary" value="Update Email">Update email</button>
 
+        
         <h3>Change password</h3>
-        <div id="imgDiv2">
-            <img v-if="!showNewPassword" id="eyeImg" src="../assets/314858_hidden_eye_icon.png" @click="this.showNewPassword = !this.showNewPassword" alt="show">
+        <div id="newPassword">
+            <img v-if="showNewPassword" id="eyeImg" src="../assets/314858_hidden_eye_icon.png" @click="this.showNewPassword = !this.showNewPassword" alt="show">
             <img v-else id = "eyeImg" src="../assets/315220_eye_icon.png" @click="this.showNewPassword = !this.showNewPassword">
+            <input v-if="showNewPassword" id="newPass" type="text" v-model="newPassword" placeholder="Enter existing password">
+            <input v-else type="password" id="newPass" v-model="newPassword" placeholder="Enter existing password">
+            <button @click="updateUserPassword()" id="passUpdate" type="button" class="btn btn-primary">Update Password</button>
         </div>
-
-        <input v-if="!showNewPassword" type="text" v-model="newPassword" placeholder="Enter existing password">
-        <input v-else type="password" v-model="newPassword" placeholder="Enter existing password">
-
-        <button @click="updateUserPassword()" id="passUpdate" type="button" class="btn btn-primary">Update Password</button>
+        
 
         <button @click="deleteUserPreferences()" id="delPref" type="button" class="btn btn-danger">Delete Map Preferences</button>
         <button @click="deleteUserAccount()" id="delAcc" type="button" class="btn btn-danger" value="Delete Account">Delete Account</button>
-
+        
         
     </div>
 </div>
@@ -211,18 +209,15 @@ h1 {
     color:black;
     text-align: center;
 }
-
 h3 {
     font-size: 18px;
     padding-top: 20px;
 }
-
 #passReset {
     font-size: 17px;
     text-decoration: underline;
     color: #39d3fa;
 }
-
 #passReset:hover {
     color: #3993fa;
     cursor: pointer;
@@ -238,7 +233,6 @@ h3 {
     align-items: flex-start;
     justify-content: center;
 }
-
 #mainDiv{
     position: inherit;
     padding: 15px;
@@ -248,12 +242,13 @@ h3 {
     top: 14%;
     text-align: left;
     box-shadow: 0 0 4px 4px #b6b6b6;
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 }
-
 #emailUpdate, #passUpdate {
-    position: relative;
-    left:40px;
+    position: absolute;
+    right: 20%;
     width: 26%;
+    order: 3;
 }
 
 input {
@@ -261,6 +256,7 @@ input {
     border-bottom: 1px solid #000000;
     background: transparent;
     outline: none;
+    width: 40%;
 }
 
 #delAcc {
@@ -275,20 +271,9 @@ input {
     left:160px;
 }
 
-#imgDiv1{
-    position: absolute;
-    width: 40px;
-    height: 40px;
-    top:180px;
-    left: 195px;
-}
-
-#imgDiv2{
-    position: absolute;
-    width: 40px;
-    height: 40px;
-    bottom:165px;
-    left: 195px;
+#newPassword, #currentPassword{
+    display:flex;
+    align-items: center;
 }
 
 #imgDiv1:hover, #imgDiv2:hover{
@@ -296,11 +281,19 @@ input {
 }
 
 #eyeImg{
-    width: 100%;
+    width: 6%;
+    height: 10%;
+    order: 2;
+}
+
+
+::placeholder{
+    font-size: 14px;;
 }
 
 @media screen and (max-width: 786px) {
 
+    
     #mainDiv{
     position: inherit;
     padding: 15px;
@@ -327,32 +320,9 @@ input {
     }
 
     button{
-        font-size: 12px;
+    font-size: 12px;
     }
 
-    #imgDiv1{
-    position: absolute;
-    width: 60px;
-    height: 40px;
-    top:175px;
-    left: 195px;
-    }
-
-    #imgDiv2{
-        position: absolute;
-        width: 60px;
-        height: 40px;
-        bottom:194px;
-        left: 195px;
-    }
-
-    #eyeImg{
-        width:60%;
-    }
 }
 
-@media screen and (max-width: 786px) {
-
-
-}
 </style>