diff --git a/www/app/components/dashboard.js b/www/app/components/dashboard.js
index cf5c75c0..9c73f6f3 100644
--- a/www/app/components/dashboard.js
+++ b/www/app/components/dashboard.js
@@ -15,43 +15,82 @@ export function Dashboard({
   stream,
 }) {
   const [openIndex, setOpenIndex] = useState(null);
+  const [autoscrollEnabled, setAutoscrollEnabled] = useState(true);
+
+  useEffect(() => {
+    if (autoscrollEnabled) scrollToBottom();
+  }, [topics.length]);
+
+  const scrollToBottom = () => {
+    const topicsDiv = document.getElementById("topics-div");
+    topicsDiv.scrollTop = topicsDiv.scrollHeight;
+  };
+
+  const handleScroll = (e) => {
+    const bottom =
+      e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight;
+    if (!bottom && autoscrollEnabled) {
+      setAutoscrollEnabled(false);
+    } else if (bottom && !autoscrollEnabled) {
+      setAutoscrollEnabled(true);
+    }
+  };
 
   return (
     <>
-      <div className="flex-grow w-3/4 py-4">
-        <div className="text-center py-6">
+      <div className="relative h-[60svh] w-3/4 flex flex-col">
+        <div className="text-center pb-1 pt-4">
           <h1 className="text-2xl font-bold text-blue-500">Meeting Notes</h1>
         </div>
         <div className="flex justify-between border-b-2">
-          <div className="w-1/4">Timestamp</div>
-          <div className="w-1/4">Topic</div>
-          <div className="w-1/4"></div>
+          <div className="w-1/4 font-bold">Timestamp</div>
+          <div className="w-3/4 font-bold">Topic</div>
         </div>
 
-        {topics.map((item, index) => (
-          <div key={index} className="border-b-2 py-2">
-            <div
-              className="flex justify-between items-center cursor-pointer"
-              onClick={() => setOpenIndex(openIndex === index ? null : index)}
-            >
-              <div className="w-1/4">{item.timestamp}</div>
-              <div className="w-1/4 flex justify-between items-center">
-                {item.title}
-                <FontAwesomeIcon
-                  className={`transform transition-transform duration-200`}
-                  icon={openIndex === index ? faChevronDown : faChevronRight}
-                />
+        <div
+          className={`absolute right-5 w-10 h-10 ${
+            autoscrollEnabled ? "hidden" : "flex"
+          } ${
+            finalSummary ? "top-[49%]" : "bottom-1"
+          } justify-center items-center text-2xl cursor-pointer opacity-70 hover:opacity-100 transition-opacity duration-200 animate-bounce rounded-xl border-slate-400 bg-[#3c82f638] text-[#3c82f6ed]`}
+          onClick={scrollToBottom}
+        >
+          &#11015;
+        </div>
+        <div
+          id="topics-div"
+          className="py-2 overflow-y-auto"
+          onScroll={handleScroll}
+        >
+          {topics.map((item, index) => (
+            <div key={index} className="border-b-2 py-2 hover:bg-[#8ec5fc30]">
+              <div
+                className="flex justify-between items-center cursor-pointer px-4"
+                onClick={() => setOpenIndex(openIndex === index ? null : index)}
+              >
+                <div className="w-1/4">{item.timestamp}</div>
+                <div className="w-3/4 flex justify-between items-center">
+                  {item.title}
+                  <FontAwesomeIcon
+                    className={`transform transition-transform duration-200`}
+                    icon={openIndex === index ? faChevronDown : faChevronRight}
+                  />
+                </div>
               </div>
-              <div className="w-1/4 flex flex-row space-x-0.5"></div>
+              {openIndex === index && (
+                <div className="p-2 mt-2 -mb-2 bg-slate-50 rounded">
+                  {item.transcript}
+                </div>
+              )}
             </div>
-            {openIndex === index && (
-              <div className="mt-2 p-2 bg-white rounded">{item.transcript}</div>
-            )}
-          </div>
-        ))}
+          ))}
+          {topics.length === 0 && (
+            <div className="text-center text-gray-500">No topics yet</div>
+          )}
+        </div>
 
         {finalSummary && (
-          <div className="mt-2 p-2 bg-white temp-transcription rounded">
+          <div className="min-h-[200px] overflow-y-auto mt-2 p-2 bg-white temp-transcription rounded">
             <h2>Final Summary</h2>
             <p>Duration: {finalSummary.duration}</p>
             <p>{finalSummary.summary}</p>
@@ -59,7 +98,7 @@ export function Dashboard({
         )}
       </div>
 
-      <footer className="w-full bg-gray-800 text-white text-center py-4 text-2xl mt-8 h-32">
+      <footer className="h-[7svh] w-full bg-gray-800 text-white text-center py-4 text-2xl">
         &nbsp;{transcriptionText}&nbsp;
       </footer>
     </>
diff --git a/www/app/components/record.js b/www/app/components/record.js
index 33ee8fb4..d1a71093 100644
--- a/www/app/components/record.js
+++ b/www/app/components/record.js
@@ -67,7 +67,7 @@ export default function Recorder(props) {
       });
       const wsWrapper = _wavesurfer.getWrapper();
       wsWrapper.style.cursor = "pointer";
-      wsWrapper.style.backgroundColor = "lightgray";
+      wsWrapper.style.backgroundColor = "#e0c3fc42";
       wsWrapper.style.borderRadius = "15px";
 
       _wavesurfer.on("play", () => {
@@ -115,6 +115,7 @@ export default function Recorder(props) {
         <AudioInputsDropdown setDeviceId={setDeviceId} disabled={isRecording} />
         &nbsp;
         <button
+          className="w-20"
           onClick={handleRecClick}
           data-color={isRecording ? "red" : "blue"}
           disabled={!deviceId}
@@ -123,6 +124,7 @@ export default function Recorder(props) {
         </button>
         &nbsp;
         <button
+          className="w-20"
           id="play-btn"
           onClick={handlePlayClick}
           data-color={isPlaying ? "orange" : "green"}
@@ -130,8 +132,9 @@ export default function Recorder(props) {
           {isPlaying ? "Pause" : "Play"}
         </button>
       </div>
-      <div ref={waveformRef} className="w-full"></div>
+      <div ref={waveformRef} className="w-full shadow-xl rounded-2xl"></div>
       {/* TODO: Download audio <a> tag */}
+      {/* TODO: current time / audio duration */}
     </div>
   );
 }
diff --git a/www/app/globals.scss b/www/app/globals.scss
index 016ef0b5..c24395c8 100644
--- a/www/app/globals.scss
+++ b/www/app/globals.scss
@@ -18,3 +18,10 @@ body {
   background: beige;
   border-radius: 5px;
 }
+
+.Dropdown-placeholder {
+  text-wrap: nowrap;
+}
+.Dropdown-arrow {
+  top: 47% !important;
+}
diff --git a/www/app/page.js b/www/app/page.js
index 9fcf0087..128d8703 100644
--- a/www/app/page.js
+++ b/www/app/page.js
@@ -16,8 +16,8 @@ const App = () => {
     serverData?.peer?.send(JSON.stringify({ cmd: "STOP" }));
 
   return (
-    <div className="flex flex-col items-center h-[100svh]">
-      <div className="text-center py-6 mt-10">
+    <div className="flex flex-col items-center h-[100svh] bg-gradient-to-r from-[#8ec5fc30] to-[#e0c3fc42]">
+      <div className="h-[13svh] flex flex-col justify-center items-center">
         <h1 className="text-5xl font-bold text-blue-500">Reflector</h1>
         <p className="text-gray-500">Capture The Signal, Not The Noise</p>
       </div>