diff --git a/src/main/java/stud/ntnu/idatt1005/pantrypal/views/HomeView.java b/src/main/java/stud/ntnu/idatt1005/pantrypal/views/HomeView.java
index 7a4ba21da694502c9542c2869d3728a8d2735719..d65961522e073e7b7d9f027d96fb81a6738aaa1f 100644
--- a/src/main/java/stud/ntnu/idatt1005/pantrypal/views/HomeView.java
+++ b/src/main/java/stud/ntnu/idatt1005/pantrypal/views/HomeView.java
@@ -1,11 +1,12 @@
 package stud.ntnu.idatt1005.pantrypal.views;
 
+import javafx.geometry.Rectangle2D;
 import javafx.scene.Scene;
 import javafx.scene.control.Button;
-import javafx.stage.Stage;
-import javafx.scene.layout.VBox;
 import javafx.scene.layout.BorderPane;
-
+import javafx.scene.layout.VBox;
+import javafx.stage.Stage;
+import stud.ntnu.idatt1005.pantrypal.views.components.NavBar;
 
 public class HomeView extends Scene {
   private final Button addGroceryButton;
@@ -16,6 +17,9 @@ public class HomeView extends Scene {
 
     BorderPane root = (BorderPane) getRoot();
 
+    NavBar navBar = new NavBar();
+    root.setTop(navBar.getNavBar());
+
     addGroceryButton = new Button("Add Grocery");
     addRecipeButton = new Button("Add Recipe");
 
@@ -23,7 +27,6 @@ public class HomeView extends Scene {
     buttonContainer.getChildren().addAll(
         addGroceryButton,
         addRecipeButton
-
     );
     root.setLeft(buttonContainer);
   }
@@ -36,11 +39,11 @@ public class HomeView extends Scene {
     return addRecipeButton;
   }
 
-
   public static HomeView create(Stage stage) {
-    HomeView homeView = new HomeView(1000, 800);
+    Rectangle2D primaryScreenBounds = javafx.stage.Screen.getPrimary().getVisualBounds();
+    HomeView homeView = new HomeView(primaryScreenBounds.getWidth(), 650);
     stage.setScene(homeView);
     stage.show();
     return homeView;
   }
-}
+}
\ No newline at end of file
diff --git a/src/main/java/stud/ntnu/idatt1005/pantrypal/views/RecipeView.java b/src/main/java/stud/ntnu/idatt1005/pantrypal/views/RecipeView.java
new file mode 100644
index 0000000000000000000000000000000000000000..24898bd3f29722f4ab98c339c2a8018f00ee65b4
--- /dev/null
+++ b/src/main/java/stud/ntnu/idatt1005/pantrypal/views/RecipeView.java
@@ -0,0 +1,25 @@
+package stud.ntnu.idatt1005.pantrypal.views;
+
+import javafx.geometry.Rectangle2D;
+import javafx.scene.Scene;
+import javafx.stage.Stage;
+import javafx.scene.layout.VBox;
+import javafx.scene.layout.BorderPane;
+import stud.ntnu.idatt1005.pantrypal.views.components.NavBar;
+
+public class RecipeView extends Scene {
+
+  public RecipeView(BorderPane root, double width, double height) {
+    super(root, width, height);
+
+    NavBar navBar = new NavBar();
+    root.setTop(navBar.getNavBar());
+
+
+    VBox buttonContainer = new VBox(10);
+
+    root.setLeft(buttonContainer);
+
+  }
+
+}
diff --git a/src/main/java/stud/ntnu/idatt1005/pantrypal/views/components/NavBar.java b/src/main/java/stud/ntnu/idatt1005/pantrypal/views/components/NavBar.java
new file mode 100644
index 0000000000000000000000000000000000000000..d450f6f1cf7137818107b2ae43d0282a26ea320b
--- /dev/null
+++ b/src/main/java/stud/ntnu/idatt1005/pantrypal/views/components/NavBar.java
@@ -0,0 +1,93 @@
+package stud.ntnu.idatt1005.pantrypal.views.components;
+
+import javafx.geometry.Rectangle2D;
+import javafx.scene.control.Button;
+import javafx.scene.control.Control;
+import javafx.scene.control.ToolBar;
+import javafx.scene.layout.BorderPane;
+import javafx.scene.layout.HBox;
+import javafx.scene.layout.Priority;
+import javafx.scene.layout.Region;
+import javafx.scene.shape.Rectangle;
+import stud.ntnu.idatt1005.pantrypal.controllers.SceneManager;
+import stud.ntnu.idatt1005.pantrypal.views.HomeView;
+import stud.ntnu.idatt1005.pantrypal.views.RecipeView;
+
+/**
+ * A class for the navigation bar.
+ * Goal: To be able to switch between different views in the application fast and easy.
+ */
+public class NavBar extends Control {
+  /**
+   * The main toolbar that holds navigation buttons.
+   */
+  ToolBar navBar = new ToolBar();
+
+  /**
+   * A separator between the navigation buttons and the login button.
+   */
+  Rectangle separator = new Rectangle(2, 38);
+
+  /**
+   * Constructor for NavBar.
+   * Initializes the buttons, styles, and layout components.
+   * On action, the buttons will navigate to the corresponding view.
+   */
+  public NavBar() {
+    // Create buttons
+    Rectangle2D primaryScreenBounds = javafx.stage.Screen.getPrimary().getVisualBounds();
+    Button homeButton = createButton("Home", () -> SceneManager.setScene(
+        new HomeView(primaryScreenBounds.getWidth(), 600)));
+    Button pantryButton = createButton("Pantry", null);
+    Button shoppingListButton = createButton("Shopping List", null);
+    Button recipesButton = createButton("Recipes", () -> SceneManager.setScene(new RecipeView(
+        new BorderPane(), primaryScreenBounds.getWidth(), 600)));
+    Button loginButton = createButton("Login", null);
+
+    // Create an HBox for the first four buttons
+    HBox navigationButtonsBox = new HBox(
+        homeButton, pantryButton, shoppingListButton, recipesButton);
+    navigationButtonsBox.setStyle("-fx-spacing: 40; -fx-padding: 5 10 5 10;");
+
+    // Create an HBox for the login button
+    HBox loginButtonBox = new HBox(loginButton);
+    loginButtonBox.setStyle("-fx-spacing: 10; -fx-padding: 5 10 5 10;");
+
+    // Use Region to make spacing between the two HBox containers flexible
+    Region spacer = new Region();
+    HBox.setHgrow(spacer, Priority.ALWAYS);
+
+    // Add components to the main toolbar
+    navBar.getItems().addAll(navigationButtonsBox, spacer, separator, loginButtonBox);
+
+    // Set styles and preferences
+    navBar.setStyle("-fx-background-color: #FFFFFF; -fx-border-color:#000000;");
+    navBar.setPrefWidth(primaryScreenBounds.getWidth());
+  }
+
+  /**
+   * Creates a styled button with the specified text and action.
+   *
+   * @param text   Text for the button.
+   * @param action Action to be executed on button click.
+   * @return Styled Button.
+   */
+  private Button createButton(String text, Runnable action) {
+    Button button = new Button(text);
+    button.setStyle("-fx-background-color: #FFFFFF; -fx-text-fill:black;"
+        + "-fx-font-family: 'Arial'; -fx-font-size: 14;");
+    if (action != null) {
+      button.setOnAction(event -> action.run());
+    }
+    return button;
+  }
+
+  /**
+   * Gets the main navigation bar instance.
+   *
+   * @return The ToolBar representing the navigation bar.
+   */
+  public ToolBar getNavBar() {
+    return navBar;
+  }
+}