diff --git a/src/assets/stylesheets/app.scss b/src/assets/stylesheets/app.scss
index a33a678..937e530 100644
--- a/src/assets/stylesheets/app.scss
+++ b/src/assets/stylesheets/app.scss
@@ -1,20 +1,43 @@
+@font-face {
+  font-family: "Gotham Bold";
+  src: url("../fonts/goth_bold.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Gotham Book";
+  src: url("../fonts/goth_book.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Gotham Light";
+  src: url("../fonts/goth_light.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Gotham Medium";
+  src: url("../fonts/goth_medium.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Gotham Condensed Medium";
+  src: url("../fonts/goth_cond_medium.otf") format("opentype");
+}
+
 * {
-  margin: 0px;
-  padding: 0px;
-  background-image: linear-gradient(#004990, #002554);
+  margin: 0;
+  padding: 0;
+  background-color: white;
   width: 100vw;
   height: 100vh;
-  overflow: hidden;
+  overflow: hidden; /* Safari */ /* IE 10 and IE 11 */
+  user-select: none; /* Standard syntax */
 }
 
 .container {
   background-image: none;
-  margin: 20px;
-  padding: 0px;
-  width: calc(100% - 40px);
-  height: calc(100% - 40px);
-  outline: solid white 1px;
-  border-radius: 20px;
+  background-color: blue;
+  width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: row;
 }
diff --git a/src/assets/stylesheets/browse.scss b/src/assets/stylesheets/browse.scss
new file mode 100644
index 0000000..447a6b7
--- /dev/null
+++ b/src/assets/stylesheets/browse.scss
@@ -0,0 +1,105 @@
+$dark-blue: #002554;
+$medium-blue: #004990;
+$light-blue: #007cbe;
+$hover-blue: #25b3ff;
+$black: #000;
+$gray: #bdbdbd;
+$white: #fff;
+
+.browse {
+  background: linear-gradient(
+    180deg,
+    rgb(0 37 84 / 100%) 0%,
+    rgb(0 124 190 / 100%) 26%,
+    rgb(255 255 255) 39%,
+    rgb(255 255 255 / 100%) 100%
+  );
+  background-color: transparent;
+  overflow-y: visible;
+  width: calc(100% - 300px);
+  height: auto;
+  display: block;
+  justify-content: center;
+  align-items: center;
+}
+
+.browse-image {
+  width: 100%;
+  height: 200px;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.browse-image img {
+  width: auto;
+  height: 200px;
+  background-color: transparent;
+}
+
+.browse-fieldContainer {
+  width: 100%;
+  min-height: calc(100% - 200px);
+  height: auto;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-direction: column;
+  overflow: hidden;
+  background-color: transparent;
+}
+
+.browse-cable {
+  width: 80%;
+  height: 100px;
+  background: $white;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-direction: row;
+  border-radius: 20px;
+  border: 1px solid $gray;
+  padding: 25px;
+  margin-bottom: 10px;
+}
+
+.browse-cable-image {
+  width: auto;
+  height: 100%;
+  background-color: transparent;
+  margin-right: 10px;
+
+}
+
+.browse-cable-label {
+  width: 90%;
+  height: auto;
+}
+
+.browse-cable-arrow {
+  width: auto;
+  height: auto;
+  font-size: 45px;
+  font-family: "Gotham Light";
+  transform:scaleY(2);
+  color: $gray;
+}
+
+.browse-cable-name, .browse-cable-brand, .browse-cable-description, .browse-cable-short {
+  background-color: transparent;
+  font-size: 20px;
+  color: $medium-blue;
+  width: auto;
+  height: auto;
+  font-family: "Gotham Medium";
+}
+
+.browse-cable-name {
+  padding-bottom: 10px;
+}
+
+.browse-cable-brand, .browse-cable-description, .browse-cable-short {
+  color: $black;
+  font-size: 16px;
+}
\ No newline at end of file
diff --git a/src/assets/stylesheets/home.scss b/src/assets/stylesheets/home.scss
deleted file mode 100644
index d30ad2d..0000000
--- a/src/assets/stylesheets/home.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.home {
-  background-image: none;
-  background-color: white;
-  border-radius: 20px;
-  width: 80%;
-  height: 100%;
-}
diff --git a/src/assets/stylesheets/map.scss b/src/assets/stylesheets/map.scss
new file mode 100644
index 0000000..3042472
--- /dev/null
+++ b/src/assets/stylesheets/map.scss
@@ -0,0 +1,43 @@
+$dark-blue: #002554;
+$medium-blue: #004990;
+$light-blue: #007cbe;
+$hover-blue: #25b3ff;
+$black: #000;
+$gray: #bdbdbd;
+$white: #fff;
+
+.map {
+  background: linear-gradient(
+    180deg,
+    rgb(0 37 84 / 100%) 0%,
+    rgb(0 124 190 / 100%) 26%,
+    rgb(255 255 255) 39%,
+    rgb(255 255 255 / 100%) 100%
+  );
+  background-color: transparent;
+  width: calc(100% - 300px);
+  height: auto;
+  overflow-y: visible;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  overflow: visible;
+}
+
+.map-image {
+  width: auto;
+  height: 250px;
+  background: transparent;
+}
+
+.map-fieldContainer {
+  width: 100%;
+  min-height: calc(100% - 250px);
+  height: auto;
+  background-color: transparent;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  flex-wrap: wrap;
+}
diff --git a/src/assets/stylesheets/navbar.scss b/src/assets/stylesheets/navbar.scss
index 09a78b0..9de83dd 100644
--- a/src/assets/stylesheets/navbar.scss
+++ b/src/assets/stylesheets/navbar.scss
@@ -1,61 +1,133 @@
+$dark-blue: #002554;
+$medium-blue: #004990;
+$light-blue: #007cbe;
+$hover-blue: #25b3ff;
+$black: #000;
+$gray: #bdbdbd;
+$white: #fff;
+
 .navbar {
-  background-image: none;
-  width: 20%;
+  width: 300px;
   height: 100%;
   display: flex;
-  position: relative;
-  border-radius: 20px;
   flex-direction: column;
-  outline: white solid 1px;
-  border-radius: 20px;
+  align-items: center;
+  border-right: $gray solid 1px;
 }
 
 .navbar-top {
-  background-image: none;
-  width: 100%;
-  height: 14%;
-  padding: 5px;
+  width: 90%;
+  height: 100%;
   display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: white;
+  align-items: left;
+  justify-content: flex-start;
+  flex-direction: column;
+  background-color: transparent;
 }
 
-.navbar-top-logo {
-  background-image: none;
-  height: 120px;
-  width: auto;
-  aspect-ratio: 2333/1003;
+.navbar-top-hamburger {
+  width: 45px;
+  height: 45px;
+  font-size: 40px;
+  font-family: "Gotham Medium";
+  display: flex;
+  align-items: center;
+  justify-content: left;
+  padding-left: 4px;
+  text-align: center;
+  margin-top: 20px;
+  margin-bottom: 15px;
+  color: $light-blue;
   background-color: transparent;
-  border-radius: 20px;
+}
+
+.navbar-top h1 {
+  width: auto;
+  height: auto;
+  font-size: 32px;
+  font-family: "Gotham Medium";
+  color: $dark-blue;
+  background-color: transparent;
+  margin-bottom: 10px;
+  margin-left: 3px;
+  transition: all 0.3s ease-in-out;
+}
+
+.navbar-top h1:hover {
+  color: $light-blue;
+}
+
+.navbar-search {
+  width: 100%;
+  height: auto;
+  display: flex;
+  border-radius: 15px;
+  padding: 0;
+  margin: 0;
+}
+
+.navbar-search input {
+  width: 80%;
+  height: auto;
+  padding: 10px;
+  border-radius: 15px 0 0 15px;
+  background-color: $white;
+  outline: none;
+  box-shadow: none;
+  font-size: 16px;
+  font-family: "Gotham Medium";
+  color: $dark-blue;
+  border: solid $light-blue 2px;
+  border-right: none;
+}
+
+.navbar-search button {
+  width: 20%;
+  height: auto;
+  border-radius: 0 15px 15px 0;
+  background-color: $white;
+  outline: none;
+  box-shadow: none;
+  font-size: 16px;
+  font-family: "Gotham Medium";
+  border: solid $light-blue 2px;
+  cursor: pointer;
 }
 
 .navbar-list {
-  background-image: none;
+  margin-top: 20px;
   width: 100%;
-  height: 100%;
+  height: auto;
   display: flex;
   justify-content: flex-start;
   align-items: center;
   flex-direction: column;
-  margin: 0px;
-  padding: 0px;
 }
 
 .navbar-list-item {
-  background-image: none;
-  width: 90%;
-  height: 10%;
-  margin: 20px 0px 20px 0px;
-  background-color: rgb(255, 255, 255);
-  border-radius: 20px;
+  width: 100%;
+  height: 50px;
+  margin: 0 0 3px;
+  background-color: $white;
+  border-radius: 15px;
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: left;
+  text-decoration: none;
+  transition: all 0.3s ease-in-out;
+  cursor: pointer;
 }
 
-.navbar-list-item-label {
-  background-image: none;
+.navbar-list-item:hover {
+  background-color: $hover-blue;
+}
+
+.navbar-list-item span {
+  background-color: transparent;
   width: auto;
   height: auto;
+  font-size: 18px;
+  font-family: "Gotham Medium";
+  color: $dark-blue;
+  margin-left: 10px;
 }
diff --git a/src/assets/stylesheets/settings.scss b/src/assets/stylesheets/settings.scss
new file mode 100644
index 0000000..ff20bde
--- /dev/null
+++ b/src/assets/stylesheets/settings.scss
@@ -0,0 +1,43 @@
+$dark-blue: #002554;
+$medium-blue: #004990;
+$light-blue: #007cbe;
+$hover-blue: #25b3ff;
+$black: #000;
+$gray: #bdbdbd;
+$white: #fff;
+
+.settings {
+  background: linear-gradient(
+    180deg,
+    rgb(0 37 84 / 100%) 0%,
+    rgb(0 124 190 / 100%) 26%,
+    rgb(255 255 255) 39%,
+    rgb(255 255 255 / 100%) 100%
+  );
+  background-color: transparent;
+  width: calc(100% - 300px);
+  height: auto;
+  overflow-y: visible;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  overflow: visible;
+}
+
+.settings-image {
+  width: auto;
+  height: 250px;
+  background: transparent;
+}
+
+.settings-fieldContainer {
+  width: 100%;
+  min-height: calc(100% - 250px);
+  height: auto;
+  background-color: transparent;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  flex-wrap: wrap;
+}
diff --git a/src/assets/stylesheets/summary.scss b/src/assets/stylesheets/summary.scss
new file mode 100644
index 0000000..413c140
--- /dev/null
+++ b/src/assets/stylesheets/summary.scss
@@ -0,0 +1,43 @@
+$dark-blue: #002554;
+$medium-blue: #004990;
+$light-blue: #007cbe;
+$hover-blue: #25b3ff;
+$black: #000;
+$gray: #bdbdbd;
+$white: #fff;
+
+.summary {
+  background: linear-gradient(
+    180deg,
+    rgb(0 37 84 / 100%) 0%,
+    rgb(0 124 190 / 100%) 26%,
+    rgb(255 255 255) 39%,
+    rgb(255 255 255 / 100%) 100%
+  );
+  background-color: transparent;
+  width: calc(100% - 300px);
+  height: auto;
+  overflow-y: visible;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  overflow: visible;
+}
+
+.summary-image {
+  width: auto;
+  height: 250px;
+  background: transparent;
+}
+
+.summary-fieldContainer {
+  width: 100%;
+  min-height: calc(100% - 250px);
+  height: auto;
+  background-color: transparent;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  flex-wrap: wrap;
+}