diff --git a/src/pages/MonitoringPage/MonitoringPage.module.css b/src/pages/MonitoringPage/MonitoringPage.module.css
new file mode 100644
index 0000000..3db4884
--- /dev/null
+++ b/src/pages/MonitoringPage/MonitoringPage.module.css
@@ -0,0 +1,130 @@
+/* MonitoringPage UI*/
+
+.dashboard-container {
+  display: grid;
+  grid-template-areas:
+    'header header header'
+    'main logs logs'
+    'footer footer footer';
+  grid-template-columns: 2fr 1fr 1fr;
+  gap: 1rem;
+  padding: 1rem;
+  background-color: #f5f5f5;
+  font-family: Arial, sans-serif;
+}
+
+.experiment-overview {
+  grid-area: header;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  background: white;
+  border-radius: 8px;
+  padding: 1rem;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+}
+
+.phase-progress .phase {
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+  border-radius: 5px;
+  margin: 0 3px;
+  text-align: center;
+  line-height: 25px;
+  background: #ccc;
+}
+
+.phase.active {
+  background-color: #5cb85c;
+  color: white;
+}
+
+.phase.current {
+  background-color: #f0ad4e;
+  color: white;
+}
+
+.experiment-controls button {
+  margin-right: 5px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  font-size: 1.2rem;
+}
+
+.connection-status .connected {
+  color: green;
+  font-weight: bold;
+}
+
+.phase-overview {
+  grid-area: main;
+  background: white;
+  border-radius: 8px;
+  padding: 1rem;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+}
+
+.phase-overview section {
+  margin-bottom: 1rem;
+}
+
+.phase-overview ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+.phase-overview li.checked::before {
+  content: '✔️ ';
+}
+
+.logs {
+  grid-area: logs;
+  background: white;
+  border-radius: 8px;
+  padding: 1rem;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+}
+
+.logs textarea {
+  width: 100%;
+  height: 200px;
+  margin-top: 0.5rem;
+}
+
+.controls-section {
+  grid-area: footer;
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  background: white;
+  border-radius: 8px;
+  padding: 1rem;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+}
+
+.gestures, .speech, .direct-speech {
+  flex: 1;
+}
+
+.direct-speech .speech-input {
+  display: flex;
+  margin-top: 0.5rem;
+}
+
+.direct-speech input {
+  flex: 1;
+  padding: 0.5rem;
+  border: 1px solid #ccc;
+  border-radius: 4px 0 0 4px;
+}
+
+.direct-speech button {
+  background: #007bff;
+  color: white;
+  border: none;
+  padding: 0.5rem 1rem;
+  border-radius: 0 4px 4px 0;
+  cursor: pointer;
+}
diff --git a/src/pages/MonitoringPage/MonitoringPage.tsx b/src/pages/MonitoringPage/MonitoringPage.tsx
new file mode 100644
index 0000000..86142b7
--- /dev/null
+++ b/src/pages/MonitoringPage/MonitoringPage.tsx
@@ -0,0 +1,118 @@
+import React from 'react';
+import styles from './MonitoringPage.module.css'
+
+export default function ExperimentDashboard() {
+  return (
+    <div className="dashboard-container">
+      <header className="experiment-overview">
+        <div className="phase-name">
+          <h2>Experiment Overview</h2>
+          <p><strong>Phase name:</strong> Rhyming fish</p>
+          <div className="phase-progress">
+            <span className="phase active">1</span>
+            <span className="phase active">2</span>
+            <span className="phase current">3</span>
+            <span className="phase">4</span>
+            <span className="phase">5</span>
+          </div>
+        </div>
+
+        <div className="experiment-controls">
+          <h3>Experiment Controls</h3>
+          <div className="controls-buttons">
+            <button className="play">▶️</button>
+            <button className="pause">⏸️</button>
+            <button className="restart">🔁</button>
+            <button className="stop">⏹️</button>
+          </div>
+        </div>
+
+        <div className="connection-status">
+          <h3>Connection:</h3>
+          <p className="connected">● Robot is connected</p>
+        </div>
+      </header>
+
+      <main className="phase-overview">
+        <section>
+          <h3>Goals</h3>
+          <ul>
+            <li className="checked">Convince the RP that you are a fish</li>
+            <li>Reference Shakespeare</li>
+            <li>Give a compliment</li>
+          </ul>
+        </section>
+
+        <section>
+          <h3>Triggers</h3>
+          <ul>
+            <li className="checked">Convince the RP that you are a fish</li>
+            <li>Reference Shakespeare</li>
+            <li>Give a compliment</li>
+          </ul>
+        </section>
+
+        <section>
+          <h3>Norms</h3>
+          <ul>
+            <li>Rhyme when talking</li>
+            <li>Talk like a fish</li>
+          </ul>
+        </section>
+
+        <section>
+          <h3>Conditional Norms</h3>
+          <ul>
+            <li>“RP is sad” - Be nice</li>
+          </ul>
+        </section>
+      </main>
+
+      <aside className="logs">
+        <h3>Logs</h3>
+        <div className="log-header">
+          <span>Global:</span>
+          <button>ALL</button>
+          <button>Add</button>
+          <button className="live">Live</button>
+        </div>
+        <textarea defaultValue="Example Log: much log"></textarea>
+      </aside>
+
+      <footer className="controls-section">
+        <div className="gestures">
+          <h4>Controls</h4>
+          <ul>
+            <li>Gesture: Wave Left Hand</li>
+            <li>Gesture: Wave Right Hand</li>
+            <li>Gesture: Left Thumbs Up</li>
+            <li>Gesture: Right Thumbs Up</li>
+          </ul>
+        </div>
+
+        <div className="speech">
+          <h4>Speech Options</h4>
+          <ul>
+            <li>"Hello, my name is pepper."</li>
+            <li>"How is the weather today?"</li>
+            <li>"I like your outfit, very pretty."</li>
+            <li>"How is your day going?"</li>
+          </ul>
+        </div>
+
+        <div className="direct-speech">
+          <h4>Direct Pepper Speech</h4>
+          <ul>
+            <li>[time] Send: *Previous message*</li>
+            <li>[time] Send: *Previous message*</li>
+            <li>[time] Send: *Previous message*</li>
+          </ul>
+          <div className="speech-input">
+            <input type="text" placeholder="Type message..." />
+            <button>Send</button>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+}