diff --git a/backend/galacticPathFinder/settings.py b/backend/galacticPathFinder/settings.py
index 9424bf6..b4ad0b9 100644
--- a/backend/galacticPathFinder/settings.py
+++ b/backend/galacticPathFinder/settings.py
@@ -71,7 +71,7 @@
 TEMPLATES = [
     {
         "BACKEND": "django.template.backends.django.DjangoTemplates",
-        "DIRS": [os.path.join(BASE_DIR, "templates")],
+        "DIRS": [os.path.join(BASE_DIR, 'frontend', 'build')],
         "APP_DIRS": True,
         "OPTIONS": {
             "context_processors": [
@@ -132,7 +132,10 @@
 # Static files (CSS, JavaScript, Images)
 # https://docs.djangoproject.com/en/5.0/howto/static-files/
 
-STATIC_URL = "static/"
+STATIC_URL = '/static/'
+STATICFILES_DIRS = [
+    os.path.join(BASE_DIR, 'frontend', 'build', 'static'),
+]
 
 # Default primary key field type
 # https://docs.djangoproject.com/en/5.0/ref/settings/#default-auto-field
diff --git a/backend/galacticPathFinder/urls.py b/backend/galacticPathFinder/urls.py
index 0f70cc2..a383f19 100644
--- a/backend/galacticPathFinder/urls.py
+++ b/backend/galacticPathFinder/urls.py
@@ -16,6 +16,7 @@
 """
 from django.contrib import admin
 from django.urls import path, re_path, include
+from django.views.generic import TemplateView
 from rest_framework.schemas import get_schema_view
 from rest_framework import permissions
 from drf_yasg.views import get_schema_view
@@ -46,5 +47,7 @@
         schema_view.with_ui("swagger", cache_timeout=0),
         name="schema-swagger-ui",
     ),
-    path("redoc/", schema_view.with_ui("redoc", cache_timeout=0), name="schema-redoc")
+    path("redoc/", schema_view.with_ui("redoc", cache_timeout=0), name="schema-redoc"),
+    # Catch-all route to serve the React app's index.html
+    re_path(r"^(?!admin|graphtraversal|swagger|redoc).*", TemplateView.as_view(template_name="index.html")),
 ]
diff --git a/frontend/src/components/mapGrid/MapGrid.tsx b/frontend/src/components/mapGrid/MapGrid.tsx
index 1e6ecf8..7158daf 100644
--- a/frontend/src/components/mapGrid/MapGrid.tsx
+++ b/frontend/src/components/mapGrid/MapGrid.tsx
@@ -133,6 +133,30 @@ const MapGrid = () => {
       ?.isExplored;
   };
 
+  // Handle scroll to adjust grid size
+  const handleScroll = (event: Event) => {
+    const wheelEvent = event as WheelEvent;
+    if (wheelEvent.deltaY < 0) {
+      // Scrolling up - zooming in
+      mapSizeSliderSignal.value = Math.max(20, mapSizeSliderSignal.value - 2);
+    } else {
+      // Scrolling down - zooming out
+      mapSizeSliderSignal.value = Math.min(70, mapSizeSliderSignal.value + 2);
+    }
+  };
+
+  useEffect(() => {
+    const gridContainer = document.querySelector(".grid-container");
+    if (gridContainer) {
+      gridContainer.addEventListener("wheel", handleScroll);
+    }
+    return () => {
+      if (gridContainer) {
+        gridContainer.removeEventListener("wheel", handleScroll);
+      }
+    };
+  }, []);
+
   return (
     <div
       className="grid-container"
diff --git a/frontend/src/components/mapSizeSlider/MapSizeSlider.tsx b/frontend/src/components/mapSizeSlider/MapSizeSlider.tsx
index 8ee36a7..8fc0c6b 100644
--- a/frontend/src/components/mapSizeSlider/MapSizeSlider.tsx
+++ b/frontend/src/components/mapSizeSlider/MapSizeSlider.tsx
@@ -1,34 +1,28 @@
-import React, { useState } from "react";
+import React from "react";
 import "./MapSizeSlider.css";
 import { mapSizeSliderSignal } from "../../pages/homePage/HomePage";
+import { useSignal } from "@preact/signals-react";
 
 const MapSizeSlider = () => {
-  const [size, setSize] = useState<number>(mapSizeSliderSignal.value);
+  const size = useSignal(mapSizeSliderSignal);
 
   const handleSliderChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setSize(parseInt(e.target.value));
-  };
-
-  const handleCommitChange = () => {
-    console.log("Size = ", size);
-    mapSizeSliderSignal.value = size;
+    mapSizeSliderSignal.value = parseInt(e.target.value);
   };
 
   return (
     <div className="map-size-slider-container">
       <label htmlFor="myRange" className="slider-label">
-        Adjust map size
+        Adjust map size ({size.value}x{size.value})
       </label>
       <input
         type="range"
-        min="20"
-        max="80"
-        value={size}
+        min={20}
+        max={70}
+        value={size.value.toString()}
         className="slider"
         id="myRange"
         onChange={handleSliderChange}
-        onMouseUp={handleCommitChange}
-        onKeyUp={handleCommitChange}
       />
     </div>
   );
diff --git a/frontend/src/components/navbar/Navbar.css b/frontend/src/components/navbar/Navbar.css
index ba747b4..926a1e2 100644
--- a/frontend/src/components/navbar/Navbar.css
+++ b/frontend/src/components/navbar/Navbar.css
@@ -33,13 +33,31 @@
 }
 
 .navbar-links a {
+  position: relative;
   margin: 0 1rem;
   text-decoration: none;
   color: inherit;
   font-size: 1.2rem;
-  /* background-color: green; */
 }
 
-.navbar-links a:hover {
-  text-decoration: underline;
+.navbar-links a::after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 2px;
+  bottom: -2px;
+  left: 0;
+  background-color: white;
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform 0.3s ease-in-out;
+}
+
+.navbar-links a:hover::after {
+  transform: scaleX(1);
+}
+
+.navbar-links a.active::after {
+  transform: scaleX(1);
+  transform-origin: left;
 }
diff --git a/frontend/src/components/navbar/Navbar.tsx b/frontend/src/components/navbar/Navbar.tsx
index 0276de1..a819df0 100644
--- a/frontend/src/components/navbar/Navbar.tsx
+++ b/frontend/src/components/navbar/Navbar.tsx
@@ -1,17 +1,31 @@
 import React from "react";
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 import "./Navbar.css";
 
 const Navbar: React.FC = () => {
+  const location = useLocation();
+
   return (
     <nav className="navbar">
       <div className="navbar-logo" onClick={() => (window.location.href = "/")}>
         GalacticPathFinder
       </div>
       <div className="navbar-links">
-        <Link to="/">Home</Link>
-        <Link to="/tutorial">Tutorial</Link>
-        <Link to="/about-us">About Us</Link>
+        <Link to="/" className={location.pathname === "/" ? "active" : ""}>
+          Home
+        </Link>
+        <Link
+          to="/tutorial"
+          className={location.pathname === "/tutorial" ? "active" : ""}
+        >
+          Tutorial
+        </Link>
+        <Link
+          to="/about-us"
+          className={location.pathname === "/about-us" ? "active" : ""}
+        >
+          About Us
+        </Link>
       </div>
     </nav>
   );
diff --git a/frontend/src/services/mapHandling.ts b/frontend/src/services/mapHandling.ts
index 272cc00..4e7a446 100644
--- a/frontend/src/services/mapHandling.ts
+++ b/frontend/src/services/mapHandling.ts
@@ -60,7 +60,10 @@ export const downloadMap = () => {
 function parseNodes(map: Node[]): string {
   let csvText = "";
   for (const node of map) {
-    csvText += `${node.x},${node.y},${node.weight},${node.isPath}\n`;
+    // Exclude nodes with isPath = true
+    if (!node.isPath) {
+      csvText += `${node.x},${node.y},${node.weight},${node.isPath}\n`;
+    }
   }
   return csvText;
 }