diff --git a/frontend/src/components/Generic/Badges/Badge/index.jsx b/frontend/src/components/Generic/Badges/Badge/index.jsx
index 53c62049..0be7d849 100644
--- a/frontend/src/components/Generic/Badges/Badge/index.jsx
+++ b/frontend/src/components/Generic/Badges/Badge/index.jsx
@@ -4,13 +4,6 @@ import React from "react";
 const colorMapping = (bg) => {
   const mappings = {
     "emerald-600": { text: "text-emerald-100", icon: "text-emerald-200 group-hover:text-emerald-50" },
-    "red-600": { text: "text-red-100", icon: "text-red-200 group-hover:text-red-50" },
-    "blue-600": { text: "text-blue-100", icon: "text-blue-200 group-hover:text-blue-50" },
-    "yellow-600": { text: "text-yellow-100", icon: "text-yellow-200 group-hover:text-yellow-50" },
-    "gray-600": { text: "text-gray-100", icon: "text-gray-200 group-hover:text-gray-50" },
-    "purple-600": { text: "text-purple-100", icon: "text-purple-200 group-hover:text-purple-50" },
-    "pink-600": { text: "text-pink-100", icon: "text-pink-200 group-hover:text-pink-50" },
-    "indigo-600": { text: "text-indigo-100", icon: "text-indigo-200 group-hover:text-indigo-50" },
   };
 
   return mappings[bg] || { text: "text-gray-100", icon: "text-gray-200" };
diff --git a/frontend/src/components/Generic/Blocks/CheckBoxBlock/index.jsx b/frontend/src/components/Generic/Blocks/CheckBoxBlock/index.jsx
index de87cb93..d6f34a46 100644
--- a/frontend/src/components/Generic/Blocks/CheckBoxBlock/index.jsx
+++ b/frontend/src/components/Generic/Blocks/CheckBoxBlock/index.jsx
@@ -2,6 +2,23 @@ import React from "react";
 import Badge from "@/components/Generic/Badges/Badge";
 import CheckBox from "../../Inputs/CheckBox";
 
+/**
+ * @description A block that contains a checkbox and its label and description
+ * @param {boolean} initialChecked - initial state of the checkbox
+ * @param {string} label - label for the checkbox
+ * @param {function} onToggle - function to call when the checkbox is toggled
+ * @param {string} description - description of the checkbox
+ * @param {string} name - name of the checkbox
+ * @param {boolean} badge - whether to show a badge
+ * @param {string} badgeLabel - label for the badge
+ * @param {boolean} badgeAnimated - whether the badge should be animated
+ * @param {string} badgeBg - background color for the badge
+ * @param {boolean} border - whether to show a border
+ * @param {React.Component} Icon - icon to show next to the checkbox
+ * @param {string} contentLocation - location of the content
+ * @param {boolean} disabled - whether the checkbox is disabled
+ * @param {boolean} inline - whether the checkbox should be inline
+ */
 export default function CheckBoxBlock({
   initialChecked,
   label,
@@ -75,7 +92,6 @@ export default function CheckBoxBlock({
             {description}
           </p>
         </div>
-        
       </div>
     </div>
   );
diff --git a/frontend/src/components/Generic/Blocks/ToggleBlock/index.jsx b/frontend/src/components/Generic/Blocks/ToggleBlock/index.jsx
index 967a72a3..5584eda0 100644
--- a/frontend/src/components/Generic/Blocks/ToggleBlock/index.jsx
+++ b/frontend/src/components/Generic/Blocks/ToggleBlock/index.jsx
@@ -14,27 +14,24 @@ export default function ToggleBlock({
   badgeAnimated,
   badgeBg,
   border,
+  bg,
   Icon,
   contentLocation,
   disabled,
   inline = false,
 }) {
   const borderStyle = border ? "border border-gray-600 rounded-2xl p-4" : "";
-  const contentPosition = {
-    middle: "middle",
-    top: "top",
-    bottom: "bottom",
-  }[contentLocation];
+  const backgroundStyle = bg ? "bg-black/10" : "";
 
   return (
-    <div className={`relative w-full max-h-full ${borderStyle}`}>
+    <div
+      className={`relative w-full max-h-full ${borderStyle} ${backgroundStyle}`}
+    >
       <div className="relative rounded-lg">
         <div className="space-y-6 flex h-full w-full">
           <div className="w-full flex flex-col gap-y-4">
             <div className="flex gap-4">
-              {Icon && (
-                <Icon className="w-16 h-16  text-white text-opacity-60" />
-              )}
+              {Icon && <Icon className="w-16 h-16  text-white/30" />}
               <div>
                 <div className="flex flex-row gap-4">
                   {inline && (
diff --git a/frontend/src/pages/WorkspaceSettings/MetaResponse/EnableFeatures/index.jsx b/frontend/src/pages/WorkspaceSettings/MetaResponse/EnableFeatures/index.jsx
index 782aa2cb..17bae4f7 100644
--- a/frontend/src/pages/WorkspaceSettings/MetaResponse/EnableFeatures/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/MetaResponse/EnableFeatures/index.jsx
@@ -8,6 +8,7 @@ export default function EnableFeatures({
   Icon,
   content,
   disabled,
+  bg,
 }) {
   return (
     <div className="relative w-full max-h-full ">
@@ -21,6 +22,7 @@ export default function EnableFeatures({
         Icon={Icon}
         content={content}
         disabled={disabled}
+        bg={bg}
       />
     </div>
   );
diff --git a/frontend/src/pages/WorkspaceSettings/MetaResponse/InputsFeature/EnableSystemPrompt/index.jsx b/frontend/src/pages/WorkspaceSettings/MetaResponse/InputsFeature/EnableSystemPrompt/index.jsx
index afb65806..557c354e 100644
--- a/frontend/src/pages/WorkspaceSettings/MetaResponse/InputsFeature/EnableSystemPrompt/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/MetaResponse/InputsFeature/EnableSystemPrompt/index.jsx
@@ -1,20 +1,40 @@
 import ToggleBlock from "@/components/Generic/Blocks/ToggleBlock";
+import showToast from "@/utils/toast";
 import { useState } from "react";
 
-export default function EnableSystemPrompt({ workspace, config }) {
-  const [isEnabled, setIsEnabled] = useState(config.systemPrompt.isEnabled);
+export default function EnableSystemPrompt({ settings, onUpdateSettings }) {
+  const [isEnabled, setIsEnabled] = useState(
+    settings.config.systemPrompt.isEnabled
+  );
   const toggleSystemPrompt = () => {
+    onUpdateSettings({
+      ...settings,
+      config: {
+        ...settings.config,
+        systemPrompt: {
+          ...settings.config.systemPrompt,
+          isEnabled: !isEnabled,
+        },
+      },
+    });
     setIsEnabled(!isEnabled);
+    showToast(
+      isEnabled
+        ? "System Prompt has been disabled"
+        : "System Prompt has been enabled",
+      "success",
+      { clear: true }
+    );
   };
 
   return (
     <div className="relative w-full max-h-full ">
       <ToggleBlock
-        initialChecked={config.systemPrompt.isEnabled}
+        initialChecked={settings.config.systemPrompt.isEnabled}
         label={
-          config.systemPrompt.isEnabled
-            ? "System Prompt is Enabled - (optional)"
-            : "Enable System Prompt - (optional)"
+          settings.config.systemPrompt.isEnabled
+            ? "System Prompt (is now handled by Meta Response Inputs)"
+            : "Handle System Prompt - (optional)"
         }
         onToggle={toggleSystemPrompt}
         name="systemPrompt"
diff --git a/frontend/src/pages/WorkspaceSettings/MetaResponse/InputsFeature/index.jsx b/frontend/src/pages/WorkspaceSettings/MetaResponse/InputsFeature/index.jsx
index 0a29c0db..70d3754c 100644
--- a/frontend/src/pages/WorkspaceSettings/MetaResponse/InputsFeature/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/MetaResponse/InputsFeature/index.jsx
@@ -5,7 +5,7 @@ import CheckBoxBlock from "@/components/Generic/Blocks/CheckBoxBlock";
 export default function InputsFeature({ workspace, config }) {
   return (
     <div className="flex flex-col gap-4 mt-4">
-      <EnableSystemPrompt workspace={workspace} config={config}  />
+      <EnableSystemPrompt workspace={workspace} config={config} />
       <TextAreaBlock workspace={workspace} />
       <CheckBoxBlock
         workspace={workspace}
diff --git a/frontend/src/pages/WorkspaceSettings/MetaResponse/index.jsx b/frontend/src/pages/WorkspaceSettings/MetaResponse/index.jsx
index ec35ea9a..ac8b034a 100644
--- a/frontend/src/pages/WorkspaceSettings/MetaResponse/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/MetaResponse/index.jsx
@@ -2,7 +2,11 @@ import MetaResponse from "@/models/metaResponse";
 import { ChatText, Heart, UserCircle } from "@phosphor-icons/react";
 import { useEffect, useState } from "react";
 import EnableFeatures from "./EnableFeatures";
-import InputsFeature from "./InputsFeature";
+// import InputsFeature from "./InputsFeature";
+import EnableSystemPrompt from "./InputsFeature/EnableSystemPrompt";
+import TextAreaBlock from "@/components/Generic/Blocks/TextAreaBlock";
+import CheckBoxBlock from "@/components/Generic/Blocks/CheckBoxBlock";
+import showToast from "@/utils/toast";
 
 export default function MetaResponseSettings({ workspace }) {
   const [settings, setSettings] = useState({});
@@ -31,6 +35,27 @@ export default function MetaResponseSettings({ workspace }) {
       }
     );
 
+    console.log("updatedSettings: ", updatedSettings);
+    setSettings(updatedSettings);
+    showToast(
+      `${feature} has been ${enabled ? "enabled" : "disabled"}`,
+      "success",
+      { clear: true }
+    );
+  };
+
+  const handleUpdateFeatureSettings = async (
+    feature,
+    updatedFeatureSettings
+  ) => {
+    const updatedSettings = await MetaResponse.updateMetaResponseSettings(
+      workspace.slug,
+      {
+        ...settings,
+        [feature]: updatedFeatureSettings,
+      }
+    );
+
     console.log("updatedSettings: ", updatedSettings);
     setSettings(updatedSettings);
   };
@@ -45,8 +70,9 @@ export default function MetaResponseSettings({ workspace }) {
     inputs: InputsFeature,
   };
 
+
   return (
-    <div className="relative w-full gap-4 max-h-full grid  grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3">
+    <div className="relative w-full gap-4 max-h-full grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3">
       {Object.keys(settings).map((feature) => {
         const featureSettings = settings[feature];
         const IconComponent = mapIcons[feature];
@@ -73,10 +99,19 @@ export default function MetaResponseSettings({ workspace }) {
                 FeatureComponent && (
                   <FeatureComponent
                     workspace={workspace}
+                    feature={feature}
                     config={featureSettings.config}
+                    settings={featureSettings}
+                    onUpdateSettings={(updatedFeatureSettings) =>
+                      handleUpdateFeatureSettings(
+                        feature,
+                        updatedFeatureSettings
+                      )
+                    }
                   />
                 )
               }
+              bg={featureSettings.isEnabled}
             />
           </div>
         );
@@ -84,3 +119,31 @@ export default function MetaResponseSettings({ workspace }) {
     </div>
   );
 }
+
+/*export default*/ function InputsFeature({
+  workspace,
+  feature,
+  settings,
+  onUpdateSettings,
+}) {
+  return (
+    <div className="flex flex-col gap-2 mt-4">
+      <EnableSystemPrompt
+        workspace={workspace}
+        settings={settings}
+        onUpdateSettings={onUpdateSettings}
+      />
+      {settings.config.systemPrompt.isEnabled && (
+        <>
+          <TextAreaBlock workspace={workspace} />
+          <CheckBoxBlock
+            workspace={workspace}
+            label="override workspace prompt"
+            inline
+            name="systemPrompt"
+          />
+        </>
+      )}
+    </div>
+  );
+}