diff --git a/src/PathfindingVisualizer/PathfindingVisualizer.css b/src/PathfindingVisualizer/PathfindingVisualizer.css
index b056768..43a2741 100644
--- a/src/PathfindingVisualizer/PathfindingVisualizer.css
+++ b/src/PathfindingVisualizer/PathfindingVisualizer.css
@@ -1,117 +1,67 @@
+
 .grid {
   margin: 0 0;
+  background-color: #050801;
 }
-.navbar{
-  width: 100vw;
-  height: fit-content;
-  background-color: gray;
+/* Navbar container */
+.navbar {
+  background-color: #333;
   display: flex;
-  flex-direction: row;
-  justify-content: center;
+  justify-content: space-around;
+  align-items: center;
+  padding: 10px;
+  color: white;
+  
 }
 
-.navbar button{
-  box-sizing: border-box;
-  appearance: none;
-  background-color: transparent;
-  border: 2px solid black;
-  border-radius: 0.6em;
-  color: black;
+/* Navbar buttons */
+.nav-button {
+  background-color: #007acc;
+  color: white;
+  margin-left: 2px;
+  border-radius: 2px;
+  padding: 10px 10px;
   cursor: pointer;
-  display: flex;
-  align-self: center;
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1;
-  margin: 20px;
-  padding: 1.2em 2.8em;
-  text-decoration: none;
-  text-align: center;
-  text-transform: uppercase;
-  font-family: 'Montserrat', sans-serif;
-  font-weight: 700;  
+  transition: background-color 0.3s;
 }
 
-.navbar button:hover,:focus {
-    color: #fff;
-    outline: 0;
+.nav-button:hover {
+  background-color: #005e9d;
 }
 
-.first {
-  transition: box-shadow 300ms ease-in-out, color 300ms ease-in-out;
+/* Navbar nodes */
+.nav-nodes {
+  display: flex;
+  flex-direction: column;
   align-items: center;
 }
 
-.first:hover {
-  box-shadow: 0 0 40px 40px lightgray inset;
-
+.nav-node {
+  margin: 5px;
+  padding: 5px;
 }
 
-.navbar .first:after {
-  content: '»';
-  position: relative;
-  opacity: 0;  
-  top: -2px;
-  left: 10px;
-  transition: 0.5s;
-  size: 100px;
+.unvisited {
+  background-color: black;
+  color: #f7f0f0;
 }
 
-.navbar .first:hover:after {
-  opacity: 1;
-  right: 40px;
+.visited {
+  background-color: #2ebfd8;
+  color: #000000;
 }
 
-.Nodes1{
-  margin-top: 40px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  line-height: 1.3;
-  gap:10px;
+.shortest {
+  background-color: #f3d242;
+  color: #000000;
 }
 
-.Nodes2{
-  margin: 20px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  line-height: 1.3;
-  gap:5px;
+.starting {
+  background-color: #4caf50;
+  color: #ffffff;
 }
 
-.UnvisitedNode{
-  height: fit-content;
-  width: 140px;
-  background-color: white;
-  border: 2px solid black;
-  border-radius: 50%;
-}
-.VisitedNode{
-  height: fit-content;
-  width: 140px;
-  background-color: #64cee4;
-  border: 2px solid black;
-  border-radius: 50%;
-}
-.ShortestNode{
-  height: fit-content;
-  width: 140px;
-  background-color: Yellow;
-  border: 2px solid black;
-  border-radius: 50%;
-}
-.StartingNode{
-  height: fit-content;
-  width: 140px;
-  background-color: Green;
-  border: 2px solid black;
-  border-radius: 50%;
+.target {
+  background-color: #ff5722;
+  color: #ffffff;
 }
-.TargetNode{
-  height: fit-content;
-  width: 140px;
-  background-color: red;
-  border: 2px solid black;
-  border-radius: 50%;
-}
\ No newline at end of file
diff --git a/src/PathfindingVisualizer/PathfindingVisualizer.jsx b/src/PathfindingVisualizer/PathfindingVisualizer.jsx
index f18f624..a581a82 100644
--- a/src/PathfindingVisualizer/PathfindingVisualizer.jsx
+++ b/src/PathfindingVisualizer/PathfindingVisualizer.jsx
@@ -1,7 +1,7 @@
-import React, {Component} from 'react';
-import Node from './Node/Node';
-import {dijkstra, getNodesInShortestPathOrder} from '../algorithms/dijkstra';
-import './PathfindingVisualizer.css';
+import React, { Component } from "react";
+import Node from "./Node/Node";
+import { dijkstra, getNodesInShortestPathOrder } from "../algorithms/dijkstra";
+import "./PathfindingVisualizer.css";
 
 const START_NODE_ROW = 10;
 const START_NODE_COL = 10;
@@ -19,22 +19,22 @@ export default class PathfindingVisualizer extends Component {
 
   componentDidMount() {
     const grid = getInitialGrid();
-    this.setState({grid});
+    this.setState({ grid });
   }
 
   handleMouseDown(row, col) {
     const newGrid = getNewGridWithWallToggled(this.state.grid, row, col);
-    this.setState({grid: newGrid, mouseIsPressed: true});
+    this.setState({ grid: newGrid, mouseIsPressed: true });
   }
 
   handleMouseEnter(row, col) {
     if (!this.state.mouseIsPressed) return;
     const newGrid = getNewGridWithWallToggled(this.state.grid, row, col);
-    this.setState({grid: newGrid});
+    this.setState({ grid: newGrid });
   }
 
   handleMouseUp() {
-    this.setState({mouseIsPressed: false});
+    this.setState({ mouseIsPressed: false });
   }
 
   animateDijkstra(visitedNodesInOrder, nodesInShortestPathOrder) {
@@ -48,7 +48,7 @@ export default class PathfindingVisualizer extends Component {
       setTimeout(() => {
         const node = visitedNodesInOrder[i];
         document.getElementById(`node-${node.row}-${node.col}`).className =
-          'node node-visited';
+          "node node-visited";
       }, 10 * i);
     }
   }
@@ -58,13 +58,13 @@ export default class PathfindingVisualizer extends Component {
       setTimeout(() => {
         const node = nodesInShortestPathOrder[i];
         document.getElementById(`node-${node.row}-${node.col}`).className =
-          'node node-shortest-path';
+          "node node-shortest-path";
       }, 50 * i);
     }
   }
 
   visualizeDijkstra() {
-    const {grid} = this.state;
+    const { grid } = this.state;
     const startNode = grid[START_NODE_ROW][START_NODE_COL];
     const finishNode = grid[FINISH_NODE_ROW][FINISH_NODE_COL];
     const visitedNodesInOrder = dijkstra(grid, startNode, finishNode);
@@ -73,33 +73,43 @@ export default class PathfindingVisualizer extends Component {
   }
 
   render() {
-    const {grid, mouseIsPressed} = this.state;
+    const { grid, mouseIsPressed } = this.state;
 
     return (
-      <>
-        <div className='navbar'>
-          <flex className="Nodes1">
-            <flex className='StartingNode'>Starting Node</flex>
-            <flex className='TargetNode'>Target Node</flex>
-          </flex>
-          <flex>
-            <button className='first' onClick={() => this.visualizeDijkstra()}>Visualize Dijkstra's Algorithm</button>
-          </flex>
-          <flex>
-            <a href="https://sorting-visualizer-ruby.vercel.app/"><button className='first'>Go To Sorting Visualizer</button></a>
-          </flex>
-          <flex className="Nodes2">
-            <flex className='UnvisitedNode'>Unvisited Node</flex>
-            <flex className='VisitedNode'>Visited Nodes</flex>
-            <flex className='ShortestNode'>Shortest-path Node</flex>
-          </flex>
+      
+        <>
+        <div className="navbar">
+        <div className="flex">
+  <button className="nav-button" onClick={() => this.visualizeDijkstra()}>
+    Visualize Dijkstra's Algorithm
+  </button>
+  
+  <a href="https://sorting-visualizer-ruby.vercel.app/" className="nav-link">
+    <button className="nav-button">Go To Sorting Visualizer</button>
+  </a>
+</div>
+
+          <div className="flex">
+            <div className="nav-nodes">
+              <div className="nav-node unvisited">Unvisited Node</div>
+              <div className="nav-node visited">Visited Nodes</div>
+              <div className="nav-node shortest">Shortest-path Node</div>
+            </div>
+          </div>
+          <div className="flex">
+            <div className="nav-nodes" style={{ padding: "20px" }}>
+              <div className="nav-node starting">Starting Node</div>
+              <div className="nav-node target">Target Node</div>
+            </div>
+          </div>
         </div>
+        {/* Rest of your component */}
         <div className="grid">
           {grid.map((row, rowIdx) => {
             return (
               <div key={rowIdx}>
                 {row.map((node, nodeIdx) => {
-                  const {row, col, isFinish, isStart, isWall} = node;
+                  const { row, col, isFinish, isStart, isWall } = node;
                   return (
                     <Node
                       key={nodeIdx}
@@ -113,7 +123,8 @@ export default class PathfindingVisualizer extends Component {
                         this.handleMouseEnter(row, col)
                       }
                       onMouseUp={() => this.handleMouseUp()}
-                      row={row}></Node>
+                      row={row}
+                    ></Node>
                   );
                 })}
               </div>