diff --git a/src/app/insights/components/InsightsDisplay.tsx b/src/app/insights/components/InsightsDisplay.tsx
index e676547c..17f37382 100644
--- a/src/app/insights/components/InsightsDisplay.tsx
+++ b/src/app/insights/components/InsightsDisplay.tsx
@@ -180,7 +180,7 @@ export default function InsightsDisplay() {
               }
               className={clsx(
                 "font-normal",
-                isActive && "bg-twd-primary-purple text-white"
+                isActive && "bg-twd-secondary-purple text-white"
               )}
             />
           );
diff --git a/src/app/moods/components/Cube.tsx b/src/app/moods/components/Cube.tsx
index 3b519195..966474d9 100644
--- a/src/app/moods/components/Cube.tsx
+++ b/src/app/moods/components/Cube.tsx
@@ -10,6 +10,7 @@ import quadrants from "./data/quadrants.json";
 import labelsMood from "./data/labels_mood.json";
 import labelsPriority from "./data/labels_priority.json";
 import moodTooltips from "./data/mood_tooltips.json";
+import clsx from "clsx";
 
 // Cube quadrants and labels order (in quadrants.json/labels.json):
 // Bottom-front-left
@@ -90,36 +91,76 @@ export default function Cube({ neuroState }: CubeProps) {
       />
 
       <button
-        className="absolute left-1/2 top-[122px] transform -translate-x-28 z-20 w-20 h-6"
+        className={clsx(
+          "",
+          isPriorityMatrix
+            ? "hidden"
+            : "absolute left-1/2 top-[122px] transform -translate-x-28 z-20 w-20 h-6"
+        )}
         onClick={() => handleTooltip("fight/flight")}
       ></button>
       <button
-        className="absolute left-1/2 top-[122px] transform translate-x-14 z-20 w-14 h-6"
+        className={clsx(
+          "",
+          isPriorityMatrix
+            ? "hidden"
+            : "absolute left-1/2 top-[122px] transform translate-x-14 z-20 w-14 h-6"
+        )}
         onClick={() => handleTooltip("interest")}
       ></button>
       <button
-        className="absolute left-1/2 top-[327px] transform -translate-x-28 z-20 w-16 h-6"
+        className={clsx(
+          "",
+          isPriorityMatrix
+            ? "hidden"
+            : "absolute left-1/2 top-[327px] transform -translate-x-28 z-20 w-16 h-6"
+        )}
         onClick={() => handleTooltip("distress")}
       ></button>
       <button
-        className="absolute left-1/2 top-[327px] transform translate-x-16 z-20 w-12 h-6"
+        className={clsx(
+          "",
+          isPriorityMatrix
+            ? "hidden"
+            : "absolute left-1/2 top-[327px] transform translate-x-16 z-20 w-12 h-6"
+        )}
         onClick={() => handleTooltip("relief")}
       ></button>
 
       <button
-        className="absolute left-1/2 top-[180px] transform -translate-x-20 z-20 w-16 h-6"
+        className={clsx(
+          "",
+          isPriorityMatrix
+            ? "hidden"
+            : "absolute left-1/2 top-[180px] transform -translate-x-20 z-20 w-16 h-6"
+        )}
         onClick={() => handleTooltip("freeze")}
       ></button>
       <button
-        className="absolute left-1/2 top-[180px] transform translate-x-6 z-20 w-10 h-6"
+        className={clsx(
+          "",
+          isPriorityMatrix
+            ? "hidden"
+            : "absolute left-1/2 top-[180px] transform translate-x-6 z-20 w-10 h-6"
+        )}
         onClick={() => handleTooltip("joy")}
       ></button>
       <button
-        className="absolute left-1/2 top-[267px] transform -translate-x-16 z-20 w-10 h-6"
+        className={clsx(
+          "",
+          isPriorityMatrix
+            ? "hidden"
+            : "absolute left-1/2 top-[267px] transform -translate-x-16 z-20 w-10 h-6"
+        )}
         onClick={() => handleTooltip("guilt")}
       ></button>
       <button
-        className="absolute left-1/2 top-[267px] transform translate-x-3 z-20 w-16 h-6"
+        className={clsx(
+          "",
+          isPriorityMatrix
+            ? "hidden"
+            : "absolute left-1/2 top-[267px] transform translate-x-3 z-20 w-16 h-6"
+        )}
         onClick={() => handleTooltip("content")}
       ></button>
 
diff --git a/src/app/moods/components/MoodSlider.tsx b/src/app/moods/components/MoodSlider.tsx
index 7c833ac5..161cb55d 100644
--- a/src/app/moods/components/MoodSlider.tsx
+++ b/src/app/moods/components/MoodSlider.tsx
@@ -31,9 +31,12 @@ export default function MoodSlider({ chem, label, handleChange }: SliderProps) {
 
   return (
     <div
-      className={clsx("flex flex-col py-2 px-3 rounded-lg", {
-        "bg-gray-900": isActive,
-      })}
+      className={clsx(
+        "flex flex-col py-2 px-3 rounded-lg transition-colors duration-300 ease-in-out",
+        {
+          "bg-gray-900": isActive,
+        }
+      )}
     >
       <label
         id={`label-${chem}`}
diff --git a/src/app/moods/components/MoodsDisplay.tsx b/src/app/moods/components/MoodsDisplay.tsx
index 469af27d..a27ade3b 100644
--- a/src/app/moods/components/MoodsDisplay.tsx
+++ b/src/app/moods/components/MoodsDisplay.tsx
@@ -2,7 +2,6 @@
 
 import Cube from "./Cube";
 import SliderBox from "./SliderBox";
-// import MoodButtons from "./MoodButtons";
 import { useDatabase } from "@/context/DatabaseContext";
 import { useState } from "react";
 import { Datum } from "plotly.js";
@@ -26,13 +25,14 @@ export default function MoodsDisplay() {
     serotonin: 1,
     adrenaline: 1,
   });
+  const [hasSaved, setHasSaved] = useState(false);
 
   const handleChange = (value: number | number[], chem: string) => {
     setNeuroState((prev) => ({
       ...prev,
       [chem]: value,
     }));
-    console.log(neuroState);
+    setHasSaved(false);
   };
 
   const submitMood = () => {
@@ -85,10 +85,11 @@ export default function MoodsDisplay() {
 
     database.addToDb("mood_records", submitObj);
     setModalOpen(true);
+    setHasSaved(true);
   };
 
   const forwardButton = {
-    label: "ok",
+    label: "Close",
     action: () => setModalOpen(false),
   };
   const insightsForwardButton = {
@@ -121,7 +122,9 @@ export default function MoodsDisplay() {
         <Button
           label="Go to Insights"
           className="mt-2 px-3 py-1 bg-gray-700 text-white rounded"
-          onClick={() => setInsightsModalOpen(true)}
+          onClick={() =>
+            hasSaved ? router.push("/insights") : setInsightsModalOpen(true)
+          }
         />
       </div>
 
diff --git a/src/app/needs/components/NeedsDisplay.tsx b/src/app/needs/components/NeedsDisplay.tsx
index d4ec1646..4423a008 100644
--- a/src/app/needs/components/NeedsDisplay.tsx
+++ b/src/app/needs/components/NeedsDisplay.tsx
@@ -84,9 +84,13 @@ export default function NeedsDisplay() {
 
   const handleCloseNeedsModal = () => {
     setNeedsModalOpen(false);
-    setSelectedNeed(null);
     setNeedsStep(1);
     resetNeuros();
+
+    // This is so that the animation when closing NeedsModal doesn't look ugly
+    setTimeout(() => {
+      setSelectedNeed(null);
+    }, 100);
   };
 
   const handleCloseDeselectModal = () => {
@@ -268,16 +272,16 @@ export default function NeedsDisplay() {
   useEffect(() => {
     switch (needsStep) {
       case 1:
-        setPositiveLabel("urgent");
-        setNegativeLabel("not urgent");
+        setPositiveLabel("Urgent");
+        setNegativeLabel("Not urgent");
         break;
       case 2:
         setPositiveLabel("A lot of effort");
         setNegativeLabel("A little effort");
         break;
       case 3:
-        setPositiveLabel("worth doing");
-        setNegativeLabel("not worth doing");
+        setPositiveLabel("Worth doing");
+        setNegativeLabel("Not worth doing");
         break;
     }
   }, [needsStep]);
@@ -296,7 +300,7 @@ export default function NeedsDisplay() {
           />
         ))}
       </div>
-      
+
       <Button
         onClick={openNextActions}
         label="Next Actions"
@@ -315,9 +319,6 @@ export default function NeedsDisplay() {
         needsStep={needsStep}
         positiveLabel={positiveLabel}
         negativeLabel={negativeLabel}
-        urgent={urgent}
-        effortful={effortful}
-        worthDoing={worthDoing}
         handlePositiveClick={handlePositiveClick}
         handleNegativeClick={handleNegativeClick}
         handleBackClick={handleBackClick}
@@ -338,4 +339,4 @@ export default function NeedsDisplay() {
       />
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/src/app/needs/components/NeedsModal.tsx b/src/app/needs/components/NeedsModal.tsx
index e42f500d..3ffc6434 100644
--- a/src/app/needs/components/NeedsModal.tsx
+++ b/src/app/needs/components/NeedsModal.tsx
@@ -7,9 +7,6 @@ interface NeedsModalProps {
   modalOpen: boolean;
   title?: string;
   needsStep: number;
-  urgent: number;
-  effortful: number;
-  worthDoing: number;
   positiveLabel: string;
   negativeLabel: string;
   handlePositiveClick: () => void;
@@ -29,11 +26,17 @@ export default function NeedsModal({
   handleBackClick,
   handleCloseClick,
 }: NeedsModalProps) {
-  if (!modalOpen) return null;
-
   return (
-    <div className="fixed inset-0 flex items-center justify-center bg-gray-800 bg-opacity-75 z-50">
-      <div className="w-11/12 max-w-lg bg-gray-900 border border-gray-700 rounded-lg p-6 shadow-lg">
+    <div
+      className={`fixed inset-0 z-50 flex items-center justify-center bg-gray-800 bg-opacity-75 transition-opacity duration-300 ${
+        modalOpen ? "opacity-100" : "opacity-0 pointer-events-none"
+      }`}
+    >
+      <div
+        className={`w-11/12 max-w-lg bg-gray-900 border border-gray-700 rounded-lg p-6 shadow-lg transform transition-transform duration-300 ${
+          modalOpen ? "scale-100" : "scale-95"
+        }`}
+      >
         <div className="relative">
           <p className="text-center text-white mb-4">Step {needsStep} of 3</p>
 
@@ -57,7 +60,11 @@ export default function NeedsModal({
         </div>
 
         <div className="flex flex-col w-full items-center py-6 justify-between h-full">
-          <p className="text-xl w-10/12 text-center text-white mb-5">
+          <p
+            className={`text-xl w-10/12 text-center text-white mb-5 ${
+              modalOpen ? "opacity-100" : "opacity-0 pointer-events-none"
+            }`}
+          >
             {title}
           </p>
 
diff --git a/src/ui/shared/Modal.tsx b/src/ui/shared/Modal.tsx
index beb59d8d..158ac77f 100644
--- a/src/ui/shared/Modal.tsx
+++ b/src/ui/shared/Modal.tsx
@@ -33,40 +33,46 @@ export default function Modal({
 
   return (
     <>
-      {modalOpen && (
-        <div className="fixed inset-0 flex items-center justify-center bg-gray-800 bg-opacity-75 z-50">
-          <div className="w-11/12 max-w-lg bg-gray-900 border border-gray-700 rounded-lg p-6 shadow-lg">
-            <div className="flex flex-col items-center">
-              {inputModal ? (
-                <input
-                  type="text"
-                  placeholder={placeholder}
-                  className="w-9/12 px-3 py-2 mt-4 text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-twd-primary-purple addToolInput"
-                  onChange={handleInputChange}
+      <div
+        className={`fixed inset-0 z-50 flex items-center justify-center bg-gray-800 bg-opacity-75 transition-opacity duration-300 ${
+          modalOpen ? "opacity-100" : "opacity-0 pointer-events-none"
+        }`}
+      >
+        <div
+          className={`w-11/12 max-w-lg bg-gray-900 border border-gray-700 rounded-lg p-6 shadow-lg transform transition-transform duration-300 ${
+            modalOpen ? "scale-100" : "scale-95"
+          }`}
+        >
+          <div className="flex flex-col items-center">
+            {inputModal ? (
+              <input
+                type="text"
+                placeholder={placeholder}
+                className="w-9/12 px-3 py-2 mt-4 text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-twd-primary-purple addToolInput"
+                onChange={handleInputChange}
+              />
+            ) : (
+              <p className="mt-4 text-xl text-center text-white">{title}</p>
+            )}
+            <div className="flex justify-center gap-4 mt-6 w-full">
+              {backButton && (
+                <Button
+                  onClick={backButton.action}
+                  label={backButton.label}
+                  className="px-4 py-2 text-lg font-medium text-white bg-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-gray-400 w-36 text-nowrap"
+                />
+              )}
+              {forwardButton && (
+                <Button
+                  onClick={forwardButton.action}
+                  label={forwardButton.label}
+                  className="px-4 py-2 text-lg font-medium text-white bg-twd-primary-purple rounded-full focus:outline-none focus:ring-2 focus:ring-purple-400 w-36 text-nowrap"
                 />
-              ) : (
-                <p className="mt-4 text-xl text-center text-white">{title}</p>
               )}
-              <div className="flex justify-center gap-4 mt-6 w-full">
-                {backButton && (
-                  <Button
-                    onClick={backButton.action}
-                    label={backButton.label}
-                    className="px-4 py-2 text-lg font-medium text-white bg-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-gray-400 w-36 text-nowrap"
-                  />
-                )}
-                {forwardButton && (
-                  <Button
-                    onClick={forwardButton.action}
-                    label={forwardButton.label}
-                    className="px-4 py-2 text-lg font-medium text-white bg-twd-primary-purple rounded-full focus:outline-none focus:ring-2 focus:ring-purple-400 w-36 text-nowrap"
-                  />
-                )}
-              </div>
             </div>
           </div>
         </div>
-      )}
+      </div>
     </>
   );
 }