diff --git a/package-lock.json b/package-lock.json
index 436f17e..cbc7b2f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
         "framer-motion": "^10.16.4",
         "langchain": "^0.0.182",
         "next": "13.4.13",
+        "openai": "^4.20.1",
         "postcss": "8.4.27",
         "react": "18.2.0",
         "react-dom": "18.2.0",
@@ -1920,14 +1921,6 @@
         }
       }
     },
-    "node_modules/langchain/node_modules/zod": {
-      "version": "3.22.4",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-3.22.4.tgz",
-      "integrity": "sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==",
-      "funding": {
-        "url": "https://github.com/sponsors/colinhacks"
-      }
-    },
     "node_modules/langchainhub": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/langchainhub/-/langchainhub-0.0.6.tgz",
@@ -2205,6 +2198,15 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/next/node_modules/zod": {
+      "version": "3.21.4",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.21.4.tgz",
+      "integrity": "sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
     "node_modules/node-domexception": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
@@ -2299,22 +2301,29 @@
       }
     },
     "node_modules/openai": {
-      "version": "4.16.1",
-      "resolved": "https://registry.npmjs.org/openai/-/openai-4.16.1.tgz",
-      "integrity": "sha512-Gr+uqUN1ICSk6VhrX64E+zL7skjI1TgPr/XUN+ZQuNLLOvx15+XZulx/lSW4wFEAQzgjBDlMBbBeikguGIjiMg==",
+      "version": "4.76.0",
+      "resolved": "https://registry.npmjs.org/openai/-/openai-4.76.0.tgz",
+      "integrity": "sha512-QBGIetjX1C9xDp5XGa/3mPnfKI9BgAe2xHQX6PmO98wuW9qQaurBaumcYptQWc9LHZZq7cH/Y1Rjnsr6uUDdVw==",
+      "license": "Apache-2.0",
       "dependencies": {
         "@types/node": "^18.11.18",
         "@types/node-fetch": "^2.6.4",
         "abort-controller": "^3.0.0",
         "agentkeepalive": "^4.2.1",
-        "digest-fetch": "^1.3.0",
         "form-data-encoder": "1.7.2",
         "formdata-node": "^4.3.2",
-        "node-fetch": "^2.6.7",
-        "web-streams-polyfill": "^3.2.1"
+        "node-fetch": "^2.6.7"
       },
       "bin": {
         "openai": "bin/cli"
+      },
+      "peerDependencies": {
+        "zod": "^3.23.8"
+      },
+      "peerDependenciesMeta": {
+        "zod": {
+          "optional": true
+        }
       }
     },
     "node_modules/openai/node_modules/@types/node": {
@@ -3139,9 +3148,10 @@
       }
     },
     "node_modules/zod": {
-      "version": "3.21.4",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-3.21.4.tgz",
-      "integrity": "sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==",
+      "version": "3.23.8",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
+      "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==",
+      "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/src/app/button.css b/src/app/button.css
index 7ede9fc..a68d356 100644
--- a/src/app/button.css
+++ b/src/app/button.css
@@ -77,6 +77,13 @@ body {
   transform: rotateY(180deg) skew(14deg) rotate3d(1.1, 1, 0.9, 0);
   animation: curve-rotate-pink 3s infinite linear;
 }
+.rainbow-container:hover {
+  background-color: rgba(255, 255, 255, 0.8);
+  transition: background-color 0.5s;
+}
+.rainbow-container-active {
+  background-color: rgba(255, 255, 255, 0.8);
+}
 @-webkit-keyframes curve-rotate-green {
   0% {
     transform: rotateY(0) skew(14deg) rotate3d(1.1, 1, 0.9, 0deg);
diff --git a/src/components/AssistantButton/AssistantButton.tsx b/src/components/AssistantButton/AssistantButton.tsx
index 374f939..1f266f7 100644
--- a/src/components/AssistantButton/AssistantButton.tsx
+++ b/src/components/AssistantButton/AssistantButton.tsx
@@ -97,6 +97,7 @@ const AssistantButton: React.FC = () => {
   // Function to start recording
   const startRecording = () => {
     if (mediaRecorder && mediaRecorderInitialized) {
+      document.querySelector(".rainbow-container")?.classList.add("rainbow-container-active");
       mediaRecorder.start();
       setRecording(true);
     }
@@ -119,6 +120,7 @@ const AssistantButton: React.FC = () => {
       position: "top-right",
     });
     if (mediaRecorder) {
+      document.querySelector(".rainbow-container")?.classList.remove("rainbow-container-active");
       mediaRecorder.stop();
       setRecording(false);
     }