diff --git a/README.md b/README.md
new file mode 100644
index 0000000..094dc46
--- /dev/null
+++ b/README.md
@@ -0,0 +1,15 @@
+# vg_companion
+
+[DB Logical Design LucidChart](https://lucid.app/lucidchart/f79a155b-6a9e-40bf-ba05-13a7cc55a194/edit?beaconFlowId=20D12269528BA563&page=0_0&invitationId=inv_9a91e9ae-6987-484e-b29f-2fb772df86a5# "DB Logical Design")
+
+[Sequence Diagram](https://lucid.app/lucidchart/168d17e9-0ad1-499e-aa6b-5bf10eaa2399/edit?beaconFlowId=905D0E1505D5A83D&invitationId=inv_725bef4e-f5e2-4040-b5ec-c2d527884cb8&page=0_0# "Sequence Diagram")
+
+[LoFi Mockup](https://imgur.com/a/t4Y2GQV "LoFi Mockup")
+
+[Use Case Design](https://lucid.app/lucidchart/c1d84bf1-6a1b-4273-9043-2c9e84e461da/edit?view_items=YWIUvePaxaJL%2CYWIUnejlxf7w%2CYWIUuA2PBa70%2CYWIUsaxSwRHg&invitationId=inv_baa3b1bd-0aa5-4dad-9c2e-6147a2014de8 "Use Case Design")
+
+[State Diagram](https://lucid.app/lucidchart/f7b49134-e792-4c6c-bc96-3100d2d4b606/edit?beaconFlowId=EA263B65A1BF114A&invitationId=inv_b445fa03-c469-4ea9-8d92-adb59e0996fa&page=0_0# "State Diagram")
+
+[Figma Design](https://www.figma.com/design/o9ZceBulLnFnE4VmwHazSm/vg_companion_figma?node-id=0-1&t=096e7YyhUMaJiV7l-1 "Figma Design")
+
+[Google Doc](https://docs.google.com/document/d/10ZZMZ_rv8ICpIr0MRWC0qau3UxFNBjpOiRFCHmjUEIw/edit?usp=sharing "Google Doc")
diff --git a/client/src/App.css b/client/src/App.css
index 74b5e05..76559cb 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -32,7 +32,33 @@
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }
 }
+
+#notes {
+  height: 300px;
+  background-color: aqua;
+}
+
+#timer {
+  height: 100px;
+  background-color: greenyellow;
+}
+
+#guides {
+  background-color: yellow;
+}
+
+.page {
+  min-width: 100px;
+  height: auto;
+}
+
+.divider {
+  display: flex;
+  height: auto;
+  background-color: antiquewhite;
+}
\ No newline at end of file
diff --git a/client/src/App.js b/client/src/App.js
index 7b49554..168dd45 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -1,11 +1,27 @@
 // src/App.js
 import "./App.css";
 import Navbar from "./Navbar";
+import Timer from "./Timer"
+import Notes from "./Notes"
+import Guides from "./Guides"
 
 function App() {
   return (
     <>
       <Navbar />
+      <div class="divider">
+        <div class="page">
+          <div id="notes">
+            <Notes />
+          </div>
+          <div id="timer">
+            <Timer />
+          </div>
+        </div>
+        <div id="guides" class="page">
+          <Guides />
+        </div>
+      </div>
     </>
   );
 }
diff --git a/client/src/Guides.css b/client/src/Guides.css
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/Guides.js b/client/src/Guides.js
new file mode 100644
index 0000000..120663f
--- /dev/null
+++ b/client/src/Guides.js
@@ -0,0 +1,12 @@
+import "./Guides.css"
+import React from "react";
+
+const Guides = () => {
+    return (
+        <>
+            <h1>This is where our guides go</h1>
+        </>
+    );
+};
+
+export default Guides;
\ No newline at end of file
diff --git a/client/src/Notes.css b/client/src/Notes.css
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/Notes.js b/client/src/Notes.js
new file mode 100644
index 0000000..9f71c49
--- /dev/null
+++ b/client/src/Notes.js
@@ -0,0 +1,12 @@
+import "./Notes.css"
+import React from "react";
+
+const Notes = () => {
+    return (
+        <>
+            <h1>This is where our notes go</h1>
+        </>
+    );
+};
+
+export default Notes;
\ No newline at end of file
diff --git a/client/src/Timer.css b/client/src/Timer.css
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/Timer.js b/client/src/Timer.js
new file mode 100644
index 0000000..01cd63c
--- /dev/null
+++ b/client/src/Timer.js
@@ -0,0 +1,53 @@
+import React, { useState, useEffect } from "react";
+import "./Timer.css";
+
+const Timer = () => {
+    const [isRunning, setIsRunning] = useState(false);
+    const [time, setTime] = useState(0);
+
+    useEffect(() => {
+        let interval;
+        if (isRunning) {
+            interval = setInterval(() => {
+                setTime((prevTime) => prevTime + 10);
+            }, 10);
+        } else {
+            clearInterval(interval);
+        }
+        return () => clearInterval(interval);
+    }, [isRunning]);
+
+    const hours = Math.floor(time / 3600000);
+    const minutes = Math.floor((time % 3600000) / 60000);
+    const seconds = Math.floor((time % 60000) / 1000);
+    const milliseconds = Math.floor((time % 1000) / 10);
+
+    const handleStart = () => setIsRunning(true);
+    const handleStop = () => setIsRunning(false);
+    const handleReset = () => {
+        setIsRunning(false);
+        setTime(0);
+    };
+
+    return (
+        <div className="container">
+            <h1>Stopwatch</h1>
+            <div id="time">
+                <span className="digit">{String(hours).padStart(2, "0")}</span>
+                <span className="txt">Hr</span>
+                <span className="digit">{String(minutes).padStart(2, "0")}</span>
+                <span className="txt">Min</span>
+                <span className="digit">{String(seconds).padStart(2, "0")}</span>
+                <span className="txt">Sec</span>
+                <span className="digit">{String(milliseconds).padStart(2, "0")}</span>
+            </div>
+            <div id="buttons">
+                <button className="btn" onClick={handleStart}>Start</button>
+                <button className="btn" onClick={handleStop}>Stop</button>
+                <button className="btn" onClick={handleReset}>Reset</button>
+            </div>
+        </div>
+    );
+};
+
+export default Timer;