diff --git a/src/main/java/edu/group5/app/App.java b/src/main/java/edu/group5/app/App.java
index 571db34..3bd4f43 100644
--- a/src/main/java/edu/group5/app/App.java
+++ b/src/main/java/edu/group5/app/App.java
@@ -7,6 +7,7 @@
 import edu.group5.app.view.MainView;
 import javafx.application.Application;
 import javafx.scene.Scene;
+import javafx.scene.image.Image;
 import javafx.stage.Stage;
 import tools.jackson.core.type.TypeReference;
 import tools.jackson.databind.ObjectMapper;
@@ -24,6 +25,7 @@ public void start(Stage stage) {
     controller.setMainView(view);
     Scene scene = view.createView();
 
+    stage.getIcons().add(new Image(getClass().getResource("/header/images/hmh-logo.png").toExternalForm()));
     stage.setTitle("Help-Me-Help");
     stage.setScene(scene);
     stage.show();
diff --git a/src/main/java/edu/group5/app/control/HomePageController.java b/src/main/java/edu/group5/app/control/HomePageController.java
new file mode 100644
index 0000000..10d3fbf
--- /dev/null
+++ b/src/main/java/edu/group5/app/control/HomePageController.java
@@ -0,0 +1,19 @@
+package edu.group5.app.control;
+
+public class HomePageController {
+  private final MainController controller;
+
+  public HomePageController(MainController controller) {
+    this.controller = controller;
+  }
+
+  public void handleDonateToACauseBtn() {
+    System.out.println("Donate to a cause button pressed");
+    controller.showBrowsePage();
+  }
+
+  public void handleAboutUsBtn() {
+    System.out.println("About us button pressed");
+    controller.showAboutUsPage();
+  }
+}
diff --git a/src/main/java/edu/group5/app/control/MainController.java b/src/main/java/edu/group5/app/control/MainController.java
index 59b1bb8..db47e45 100644
--- a/src/main/java/edu/group5/app/control/MainController.java
+++ b/src/main/java/edu/group5/app/control/MainController.java
@@ -16,4 +16,10 @@ public void showHomePage() {
   public void showLoginPage() {
     view.showLoginPage();
   }
+
+  public void showBrowsePage() {
+    view.showBrowsePage();
+  }
+
+  public void showAboutUsPage() {}
 }
diff --git a/src/main/java/edu/group5/app/view/Header.java b/src/main/java/edu/group5/app/view/Header.java
index 8f90828..1191d2f 100644
--- a/src/main/java/edu/group5/app/view/Header.java
+++ b/src/main/java/edu/group5/app/view/Header.java
@@ -12,7 +12,7 @@ public class Header extends BorderPane {
 
   public Header(HeaderController controller) {
     this.controller = controller;
-    getStylesheets().add(getClass().getResource("/homepage/header.css").toExternalForm());
+    getStylesheets().add(getClass().getResource("/header/header.css").toExternalForm());
     setId("header");
 
     setLeft(getLogoSection());
@@ -24,11 +24,11 @@ private StackPane getLogoSection() {
     StackPane logoSection = new StackPane();
     logoSection.setId("logo-section");
     logoSection.setAlignment(Pos.CENTER);
-    logoSection.setOnMouseClicked(e -> System.out.println("logoSection"));
+    logoSection.setOnMouseClicked(e -> controller.handleHomeBtn());
     logoSection.setStyle("-fx-cursor: hand;");
 
     ImageView logo = new ImageView(
-        new Image(getClass().getResource("/homepage/hmh-logo.png").toExternalForm())
+        new Image(getClass().getResource("/header/images/hmh-logo.png").toExternalForm())
     );
     logo.setFitHeight(60);
     logo.setPreserveRatio(true);
@@ -67,7 +67,7 @@ private StackPane getProfileSection() {
     profileSection.setStyle("-fx-cursor: hand;");
 
     ImageView avatar = new ImageView(
-        new Image(getClass().getResource("/homepage/avatar.png").toExternalForm())
+        new Image(getClass().getResource("/header/images/avatar.png").toExternalForm())
     );
     avatar.setFitHeight(60);
     avatar.setPreserveRatio(true);
diff --git a/src/main/java/edu/group5/app/view/MainView.java b/src/main/java/edu/group5/app/view/MainView.java
index 4663e12..4bbdc3d 100644
--- a/src/main/java/edu/group5/app/view/MainView.java
+++ b/src/main/java/edu/group5/app/view/MainView.java
@@ -1,6 +1,7 @@
 package edu.group5.app.view;
 
 import edu.group5.app.control.HeaderController;
+import edu.group5.app.control.HomePageController;
 import edu.group5.app.control.MainController;
 import edu.group5.app.view.homepage.HomePageView;
 import edu.group5.app.view.loginpage.LoginPageView;
@@ -8,13 +9,13 @@
 import javafx.scene.layout.BorderPane;
 
 public class MainView {
-  private final MainController mainController;
   private final HeaderController headerController;
+  private final HomePageController homePageController;
   private final BorderPane root;
 
   public MainView(MainController mainController) {
-    this.mainController = mainController;
     this.headerController = new HeaderController(mainController);
+    this.homePageController = new HomePageController(mainController);
     this.root = new BorderPane();
   }
 
@@ -24,10 +25,14 @@ public Scene createView() {
   }
 
   public void showHomePage() {
-    root.setCenter(new HomePageView(headerController));
+    root.setCenter(new HomePageView(homePageController, headerController));
   }
 
   public void showLoginPage() {
 
   }
+
+  public void showBrowsePage() {}
+
+  public void showAboutUsPage() {}
 }
diff --git a/src/main/java/edu/group5/app/view/homepage/HomePageView.java b/src/main/java/edu/group5/app/view/homepage/HomePageView.java
index 0c1cc99..419c2e5 100644
--- a/src/main/java/edu/group5/app/view/homepage/HomePageView.java
+++ b/src/main/java/edu/group5/app/view/homepage/HomePageView.java
@@ -1,12 +1,68 @@
 package edu.group5.app.view.homepage;
 
 import edu.group5.app.control.HeaderController;
+import edu.group5.app.control.HomePageController;
 import edu.group5.app.view.Header;
+import javafx.geometry.Pos;
+import javafx.scene.control.Button;
+import javafx.scene.control.ScrollPane;
 import javafx.scene.layout.BorderPane;
+import javafx.scene.layout.StackPane;
+import javafx.scene.layout.VBox;
+import javafx.scene.text.Text;
 
 public class HomePageView extends BorderPane {
-  public HomePageView(HeaderController headerController) {
+  private final HomePageController controller;
+
+  public HomePageView(HomePageController homePageController, HeaderController headerController) {
+    this.controller = homePageController;
+    getStylesheets().add(getClass().getResource("/homepage/homepage.css").toExternalForm());
     Header headerView = new Header(headerController);
     setTop(headerView);
+    setCenter(createBody());
+  }
+
+  private ScrollPane createBody() {
+    ScrollPane body = new ScrollPane();
+    body.setFitToWidth(true);
+    VBox vBox = new VBox();
+    vBox.getChildren().addAll(
+        createIntroductionSection(),
+        createCharityImageSection(),
+        createCharityImageSection()
+    );
+    body.setContent(vBox);
+    return body;
+  }
+
+  private VBox createIntroductionSection() {
+    VBox introductionSection = new VBox();
+    introductionSection.setId("introduction-section");
+    introductionSection.setAlignment(Pos.CENTER);
+    introductionSection.setSpacing(10);
+
+    Text h1 = new Text("MAKE A DIFFERENCE TODAY");
+    h1.setId("h1");
+    Text h2 = new Text("SUPPORT THOSE IN NEED AROUND THE WORLD");
+    h2.setId("h2");
+
+    Button donateToACauseBtn = new Button("Donate to a cause");
+    donateToACauseBtn.setOnAction(e -> controller.handleDonateToACauseBtn());
+
+    Button aboutUsBtn = new Button("About us");
+    aboutUsBtn.setOnAction(e -> controller.handleAboutUsBtn());
+
+    introductionSection.getChildren().addAll(h1, h2, donateToACauseBtn, aboutUsBtn);
+    return introductionSection;
+  }
+
+  private StackPane createCharityImageSection() {
+    StackPane charityImageSection = new StackPane();
+    charityImageSection.setId("charity-image-section");
+    charityImageSection.setPrefHeight(300);
+    StackPane image = new StackPane();
+    image.setId("charity-image");
+    charityImageSection.getChildren().add(image);
+    return charityImageSection;
   }
 }
diff --git a/src/main/resources/homepage/header.css b/src/main/resources/header/header.css
similarity index 100%
rename from src/main/resources/homepage/header.css
rename to src/main/resources/header/header.css
diff --git a/src/main/resources/homepage/avatar.png b/src/main/resources/header/images/avatar.png
similarity index 100%
rename from src/main/resources/homepage/avatar.png
rename to src/main/resources/header/images/avatar.png
diff --git a/src/main/resources/homepage/hmh-logo.png b/src/main/resources/header/images/hmh-logo.png
similarity index 100%
rename from src/main/resources/homepage/hmh-logo.png
rename to src/main/resources/header/images/hmh-logo.png
diff --git a/src/main/resources/homepage/homepage.css b/src/main/resources/homepage/homepage.css
new file mode 100644
index 0000000..90b090c
--- /dev/null
+++ b/src/main/resources/homepage/homepage.css
@@ -0,0 +1,27 @@
+#introduction-section {
+    -fx-border-color: black;
+    -fx-border-width: 2px;
+    -fx-padding: 20px 0;
+}
+
+#h1 {
+    -fx-text-fill: black;
+    -fx-font-size: 50pt;
+    -fx-font-weight: bold;
+}
+
+#h2 {
+    -fx-fill: #757575;
+    -fx-font-size: 25pt;
+}
+
+#charity-image-section {
+    -fx-border-color: black;
+}
+
+#charity-image {
+    -fx-background-image: url("/homepage/images/charityimage.jpg");
+    -fx-background-position: center 55%;
+    -fx-background-size: 100% auto;
+    -fx-background-repeat: no-repeat;
+}
\ No newline at end of file
diff --git a/src/main/resources/homepage/images/charityimage.jpg b/src/main/resources/homepage/images/charityimage.jpg
new file mode 100644
index 0000000..9072612
Binary files /dev/null and b/src/main/resources/homepage/images/charityimage.jpg differ