diff --git a/components/navbar.css b/components/navbar.css
new file mode 100644
index 0000000..5c19692
--- /dev/null
+++ b/components/navbar.css
@@ -0,0 +1,295 @@
+.nav_element-container {
+  display: flex;
+  position: relative;
+}
+.nav_element-text {
+  font-style: normal;
+  transition: 0.3s;
+  font-weight: 500;
+  margin-left: 72px;
+}
+
+
+.button-container {
+  display: flex;
+  position: relative;
+  align-items: flex-start;
+  flex-direction: column;
+}
+.button-text {
+  color: var(--dl-color-gray-white);
+  cursor: pointer;
+  align-self: center;
+  margin-top: var(--dl-space-space-halfunit);
+  transition: 0.3s;
+  margin-left: var(--dl-space-space-halfunit);
+  padding-top: var(--dl-space-space-halfunit);
+  margin-right: var(--dl-space-space-halfunit);
+  padding-left: var(--dl-space-space-oneandhalfunits);
+  border-radius: var(--dl-radius-radius-radius8);
+  margin-bottom: var(--dl-space-space-halfunit);
+  padding-right: var(--dl-space-space-oneandhalfunits);
+  padding-bottom: var(--dl-space-space-halfunit);
+  background-color: var(--dl-color-primary-300);
+}
+.button-text:hover {
+  color: var(--dl-color-primary-300);
+  background-color: var(--dl-color-gray-white);
+}
+
+
+
+
+
+
+
+
+
+
+
+.navbar-image {
+  width: 60px;
+  height: 60px;
+}
+.navbar-container {
+  flex: 0 0 auto;
+  width: auto;
+  height: auto;
+  display: flex;
+  align-items: space-between;
+  margin-right: var(--dl-space-space-oneandhalfunits);
+  flex-direction: column;
+}
+.navbar-nav-elements-desktop {
+  flex: 0 0 auto;
+  display: flex;
+  align-self: center;
+  align-items: center;
+  margin-left: 0px;
+  flex-direction: row;
+}
+.navbar-navlink {
+  display: contents;
+}
+.navbar-component {
+  text-decoration: none;
+}
+.navbar-navlink1 {
+  display: contents;
+}
+.navbar-component1 {
+  text-decoration: none;
+}
+.navbar-navlink2 {
+  display: contents;
+}
+.navbar-component2 {
+  text-decoration: none;
+}
+.navbar-link {
+  display: contents;
+}
+.navbar-component3 {
+  text-decoration: none;
+}
+.navbar-link1 {
+  display: contents;
+}
+.navbar-component4 {
+  text-decoration: none;
+}
+.navbar-btn-group {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  justify-content: space-between;
+  text-decoration: none;
+}
+.navbar-component5 {
+  text-decoration: none;
+}
+.navbar-burger-menu {
+  display: none;
+}
+.navbar-icon {
+  width: var(--dl-size-size-xsmall);
+  height: var(--dl-size-size-xsmall);
+  display: none;
+  transition: 0.3s;
+}
+
+.navbar-nav-elements-mobile {
+  flex: 0 0 auto;
+  display: none;
+  position: absolute;
+  align-self: center;
+  align-items: center;
+  margin-left: 0px;
+  flex-direction: column;
+}
+.navbar-navlink3 {
+  font-style: normal;
+  transition: 0.3s;
+}
+
+.navbar-navlink3:active {
+  color: var(--dl-color-primary-300);
+}
+.navbar-link3 {
+  font-style: normal;
+  transition: 0.3s;
+}
+
+.navbar-link3:active {
+  color: var(--dl-color-primary-300);
+}
+.navbar-navlink4 {
+  font-style: normal;
+  transition: 0.3s;
+  text-decoration: none;
+}
+
+.navbar-navlink4:active {
+  color: var(--dl-color-primary-300);
+}
+.navbar-text {
+  font-style: normal;
+  transition: 0.3s;
+}
+
+.navbar-text:active {
+  color: var(--dl-color-primary-300);
+}
+.navbar-text1 {
+  font-style: normal;
+  transition: 0.3s;
+}
+
+.navbar-text1:active {
+  color: var(--dl-color-primary-300);
+}
+.navbar-btn-group1 {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  justify-content: space-between;
+  text-decoration: none;
+}
+.navbar-component6 {
+  text-decoration: none;
+}
+.navbar-container1 {
+  top: 32px;
+  width: 24px;
+  height: 24px;
+  position: absolute;
+}
+.navbar-icon2 {
+  width: 24px;
+  height: 24px;
+}
+
+@media(max-width: 991px) {
+  .navbar-nav-elements-desktop {
+    display: none;
+  }
+  .navbar-btn-group {
+    display: none;
+  }
+  .navbar-burger-menu {
+    display: flex;
+  }
+  .navbar-icon {
+    fill: #D9D9D9;
+    width: var(--dl-size-size-small);
+    height: var(--dl-size-size-small);
+    display: flex;
+  }
+  .navbar-nav-elements-mobile {
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    display: flex;
+    align-items: flex-start;
+    margin-left: 0px;
+    padding-top: var(--dl-space-space-twounits);
+    padding-left: var(--dl-space-space-twounits);
+    padding-right: var(--dl-space-space-twounits);
+    padding-bottom: var(--dl-space-space-twounits);
+    background-color: var(--dl-color-gray-black);
+  }
+  .navbar-btn-group1 {
+    display: none;
+  }
+  .navbar-container1 {
+    right: 32px;
+  }
+}
+@media(max-width: 767px) {
+  .navbar-icon {
+    fill: var(--dl-color-gray-900);
+    width: var(--dl-size-size-small);
+    height: var(--dl-size-size-small);
+  }
+}
+@media(max-width: 479px) {
+  .navbar-image {
+    width: auto;
+    height: auto;
+  }
+  .navbar-burger-menu {
+    display: flex;
+  }
+  .navbar-icon {
+    fill: var(--dl-color-gray-900);
+    width: 32px;
+    height: 32px;
+  }
+  .navbar-nav-elements-mobile {
+    height: 100vh;
+    flex-direction: column;
+    justify-content: center;
+    background-color: var(--dl-color-gray-white);
+  }
+  .navbar-navlink3 {
+    color: var(--dl-color-primary-100);
+    margin-top: var(--dl-space-space-unit);
+    text-align: left;
+    margin-bottom: var(--dl-space-space-unit);
+  }
+  .navbar-link3 {
+    color: var(--dl-color-primary-100);
+    margin-top: var(--dl-space-space-unit);
+    text-align: left;
+    margin-bottom: var(--dl-space-space-unit);
+  }
+  .navbar-navlink4 {
+    color: var(--dl-color-primary-100);
+    margin-top: var(--dl-space-space-unit);
+    text-align: left;
+    margin-bottom: var(--dl-space-space-unit);
+  }
+  .navbar-text {
+    color: var(--dl-color-primary-100);
+    margin-top: var(--dl-space-space-unit);
+    text-align: left;
+    margin-bottom: var(--dl-space-space-unit);
+  }
+  .navbar-text1 {
+    color: var(--dl-color-primary-100);
+    margin-top: var(--dl-space-space-unit);
+    text-align: left;
+    margin-bottom: var(--dl-space-space-unit);
+  }
+  .navbar-btn-group1 {
+    display: flex;
+    margin-top: var(--dl-space-space-halfunit);
+    margin-bottom: var(--dl-space-space-halfunit);
+  }
+  .navbar-icon2 {
+    fill: var(--dl-color-primary-100);
+  }
+  .rootClassName {
+    width: 100%;
+  }
+}