diff --git a/.babelrc b/.babelrc
index 1320b9a..0b07fd1 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,3 +1,3 @@
 {
-  "presets": ["@babel/preset-env"]
+  "presets": ["@parcel/babel-preset-env"]
 }
diff --git a/package-lock.json b/package-lock.json
index 0e26ec7..33349ed 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
       },
       "devDependencies": {
         "@babel/core": "^7.16.0",
-        "@babel/preset-env": "^7.11.5",
+        "@parcel/babel-preset-env": "^2.0.1",
         "@parcel/transformer-sass": "^2.0.1",
         "@testing-library/dom": "^8.11.1",
         "@testing-library/jest-dom": "^5.11.6",
@@ -2393,6 +2393,35 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/@parcel/babel-preset-env": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@parcel/babel-preset-env/-/babel-preset-env-2.0.1.tgz",
+      "integrity": "sha512-s5UNsLTZzc00MUuM7AIvS/bYc0WyODlgORZuhR8sXdFj4V/JEt7vjDhWeUMeh6d/0pajSr3EVBrG504zSVU8UA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/preset-env": "^7.4.0",
+        "semver": "^5.4.1"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.12.0"
+      }
+    },
+    "node_modules/@parcel/babel-preset-env/node_modules/semver": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
     "node_modules/@parcel/babylon-walk": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@parcel/babylon-walk/-/babylon-walk-2.0.1.tgz",
@@ -16464,6 +16493,24 @@
         "astring": "^1.6.2"
       }
     },
+    "@parcel/babel-preset-env": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@parcel/babel-preset-env/-/babel-preset-env-2.0.1.tgz",
+      "integrity": "sha512-s5UNsLTZzc00MUuM7AIvS/bYc0WyODlgORZuhR8sXdFj4V/JEt7vjDhWeUMeh6d/0pajSr3EVBrG504zSVU8UA==",
+      "dev": true,
+      "requires": {
+        "@babel/preset-env": "^7.4.0",
+        "semver": "^5.4.1"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true
+        }
+      }
+    },
     "@parcel/babylon-walk": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@parcel/babylon-walk/-/babylon-walk-2.0.1.tgz",
diff --git a/package.json b/package.json
index 7a2872f..ffab101 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
     "prebuild": "rimraf dist",
     "build": "parcel build index.html --public-url ./",
     "format": "prettier --write \"src/**/*.js\" \"src/**/*.ts\" \"test/**/*.js\" \"test/**/*.ts\" \"src/**/*.scss\"",
-    "start:dev": "parcel index.html",
+    "start:dev": "parcel --no-cache index.html",
     "test": "jest",
     "test:watch": "jest --watch",
     "test:cov": "jest --coverage"
@@ -29,7 +29,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.16.0",
-    "@babel/preset-env": "^7.11.5",
+    "@parcel/babel-preset-env": "^2.0.1",
     "@parcel/transformer-sass": "^2.0.1",
     "@testing-library/dom": "^8.11.1",
     "@testing-library/jest-dom": "^5.11.6",
diff --git a/src/components/MainMenu/MainMenu.js b/src/components/MainMenu/MainMenu.js
new file mode 100644
index 0000000..6e87cb6
--- /dev/null
+++ b/src/components/MainMenu/MainMenu.js
@@ -0,0 +1,51 @@
+import * as classes from './style.module.scss';
+
+export const MAIN_MENU_COMPONENT_NAME = 'main-menu-component';
+
+const optionsNames = ['People', 'Vehicles', 'Starships'];
+
+class MainMenu extends HTMLElement {
+  constructor() {
+    super();
+    this._contents = new DocumentFragment();
+
+    this.options = optionsNames.map((optionName) => {
+      return MainMenu.addOptions(optionName);
+    });
+    this.options[0].classList.add(classes.active);
+
+    this.nav = MainMenu.addNavBar();
+    this.options.forEach((element) => {
+      this.nav.appendChild(element);
+    });
+
+    this._contents.appendChild(this.nav);
+  }
+
+  connectedCallback() {
+    this.appendChild(this._contents);
+  }
+
+  static addNavBar() {
+    const nav = document.createElement('nav');
+    nav.id = classes.mainMenu;
+    return nav;
+  }
+
+  static addOptions(text) {
+    const option = document.createElement('div');
+    option.className = classes.options;
+    option.textContent = text;
+    option.addEventListener('click', (e) => {
+      const lastActiveElement = e.target.parentNode.querySelector(
+        `.${classes.active}`,
+      );
+      lastActiveElement.classList.remove(classes.active);
+      e.target.classList.add(classes.active);
+    });
+    return option;
+  }
+}
+
+customElements.get(MAIN_MENU_COMPONENT_NAME) ||
+  customElements.define(MAIN_MENU_COMPONENT_NAME, MainMenu);
diff --git a/src/components/MainMenu/style.module.scss b/src/components/MainMenu/style.module.scss
new file mode 100644
index 0000000..6f40fb7
--- /dev/null
+++ b/src/components/MainMenu/style.module.scss
@@ -0,0 +1,48 @@
+@use '../../themes/theme.scss' as *;
+
+#mainMenu {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  height: 8rem;
+  box-shadow: $red-box-shadow;
+  border-radius: $border-radius;
+}
+
+div .active {
+  color: #202020;
+  &::after {
+    content: '';
+    border-radius: 4px;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25),
+      4px 4px 40px rgba(255, 0, 0, 0.9);
+    background-color: #df4b4b;
+    clip-path: inset(0 0 0 0);
+  }
+}
+
+.options {
+  position: relative;
+  color: #979797;
+  font-size: 2em;
+  font-weight: bold;
+  transition: all 0.3s ease-in-out;
+  user-select: none;
+  &:hover {
+    color: $red-color;
+    cursor: pointer;
+  }
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: -8px;
+    left: 0;
+    z-index: 2;
+    display: block;
+    width: 100%;
+    height: 0.5rem;
+    background-color: #fe6666;
+    clip-path: inset(0 100% 0 0);
+    transition: all 0.5s ease-in-out;
+  }
+}
diff --git a/src/index.js b/src/index.js
index 5d4ea41..0f45b45 100644
--- a/src/index.js
+++ b/src/index.js
@@ -18,3 +18,9 @@ window.onload = () => {
     },
   });
 };
+
+if (module.hot) {
+  module.hot.accept(function () {
+    window.location.reload();
+  });
+}
diff --git a/src/themes/theme.scss b/src/themes/theme.scss
index f507fbd..3912698 100644
--- a/src/themes/theme.scss
+++ b/src/themes/theme.scss
@@ -1,3 +1,5 @@
-$red-box-shadow: 4px 4px 40px 0px #ff0000e5, 0px 4px 4px 0px #00000040;
+$red-color: #ff0000e5;
+
+$red-box-shadow: 4px 4px 40px 0px $red-color, 0px 4px 4px 0px #00000040;
 
 $border-radius: 16px;