browse page is functional now

src/assets/stylesheets/browse.scss

@@ -126,7 +126,8 @@ $white: #fff;
 
 .browse-cable-brand,
 .browse-cable-short,
-.browse-cable-position {
+.browse-cable-position,
+.browse-cable-category {
   background-color: transparent;
   font-size: 16px;
   color: $light-blue;

src/assets/stylesheets/cabledetail.scss

@@ -182,7 +182,8 @@ $white: #fff;
 
 .cable-main-brand,
 .cable-main-short,
-.cable-main-position {
+.cable-main-position,
+.cable-main-category {
   background-color: transparent;
   font-size: 16px;
   color: $light-blue;
@@ -287,3 +288,68 @@ th:first-child {
   margin-top: 15px;
   padding-left: 10px;
 }
+
+.modal-container {
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.modal-title,
+.modal-body,
+.modal-close {
+  width: auto;
+  height: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  flex-direction: column;
+}
+
+.modal-title span {
+  width: auto;
+  height: auto;
+  font-family: "Gotham Bold";
+  font-size: 32px;
+  color: $dark-blue;
+  background-color: transparent;
+  margin-bottom: 5px;
+}
+
+.modal-body span {
+  width: auto;
+  height: auto;
+  background-color: transparent;
+  font-family: "Gotham Medium";
+  font-size: 18px;
+  color: $medium-blue;
+  margin-top: 10px;
+  margin-bottom: 30px;
+}
+
+.modal-close span {
+  width: auto;
+  height: auto;
+  background-color: transparent;
+  font-family: "Gotham Medium";
+  font-size: 18px;
+  color: $dark-blue;
+}
+
+.modal-close {
+  cursor: pointer;
+  padding: 15px 35px 15px 35px;
+  border-radius: 20px;
+  background-color: $gray;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  transition: all 0.3s ease-in-out;
+}
+
+.modal-close:hover {
+  background-color: $hover-blue;
+}