diff --git a/apps/demo/pages/app/index.tsx b/apps/demo/pages/app/index.tsx
index 6d3912c6b5..3a89040ba9 100644
--- a/apps/demo/pages/app/index.tsx
+++ b/apps/demo/pages/app/index.tsx
@@ -1,53 +1,76 @@
-import fbsetup from "../../public/fb-setup.png";
 import formbricks from "@formbricks/js";
 import Image from "next/image";
+import { useEffect, useState } from "react";
+import fbsetup from "../../public/fb-setup.png";
 
 export default function AppPage({}) {
+  const [darkMode, setDarkMode] = useState(false);
+
+  useEffect(() => {
+    if (darkMode) {
+      document.body.classList.add("dark");
+    } else {
+      document.body.classList.remove("dark");
+    }
+  }, [darkMode]);
+
   return (
-    <div className="px-12 py-6">
-      <div>
-        <h1 className="text-2xl font-bold">Formbricks In-product Survey Demo App</h1>
-        <p className="text-slate-700">
-          This app helps you test your in-app surveys. You can create an test user actions, create and update
-          user attributes, etc.
-        </p>
+    <div className="h-screen bg-white px-12 py-6 dark:bg-slate-800">
+      <div className="flex justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-slate-900 dark:text-white">
+            Formbricks In-product Survey Demo App
+          </h1>
+          <p className="text-slate-700 dark:text-slate-300">
+            This app helps you test your in-app surveys. You can create and test user actions, create and
+            update user attributes, etc.
+          </p>
+        </div>
+        <button
+          className="rounded-lg bg-slate-200 px-6 py-1 dark:bg-slate-700 dark:text-slate-100"
+          onClick={() => setDarkMode(!darkMode)}>
+          Toggle Dark Mode
+        </button>
       </div>
+
       <div className="my-4 grid grid-cols-1 gap-6 md:grid-cols-2">
         <div>
-          <div className="rounded-lg border border-slate-300 bg-slate-100 p-6">
-            <h3 className="text-lg font-semibold">Setup .env</h3>
-            <p className="text-slate-700">
+          <div className="rounded-lg border border-slate-300 bg-slate-100 p-6 dark:border-slate-600 dark:bg-slate-900">
+            <h3 className="text-lg font-semibold text-slate-900 dark:text-white">Setup .env</h3>
+            <p className="text-slate-700 dark:text-slate-300">
               Copy the environment ID of your Formbricks app to the env variable in demo/.env
             </p>
             <Image src={fbsetup} alt="fb setup" className="mt-4 rounded" priority />
           </div>
-          <div className="mt-4 rounded-lg border border-slate-300 bg-slate-100 p-6">
-            <h3 className="text-lg font-semibold">Widget Logs</h3>
-            <p className="text-slate-700">
-              Look at the logs to understand how the widget works. <strong>Open your browser console</strong>{" "}
-              to see the logs.
+          <div className="mt-4 rounded-lg border border-slate-300 bg-slate-100 p-6 dark:border-slate-600 dark:bg-slate-900">
+            <h3 className="text-lg font-semibold text-slate-900 dark:text-white">Widget Logs</h3>
+            <p className="text-slate-700 dark:text-slate-300">
+              Look at the logs to understand how the widget works.{" "}
+              <strong className="dark:text-white">Open your browser console</strong> to see the logs.
             </p>
-            {/*           <div className="max-h-[40vh] overflow-y-auto py-4">
+            {/* <div className="max-h-[40vh] overflow-y-auto py-4">
               <LogsContainer />
             </div> */}
           </div>
         </div>
 
         <div className="md:grid md:grid-cols-3">
-          <div className="col-span-3 rounded-lg border border-slate-300 bg-slate-100 p-6">
-            <h3 className="text-lg font-semibold">Reset person / pull data from Formbricks app</h3>
-            <p className="text-slate-700">
+          <div className="col-span-3 rounded-lg border border-slate-300 bg-slate-100 p-6 dark:border-gray-600 dark:bg-gray-800">
+            <h3 className="text-lg font-semibold dark:text-white">
+              Reset person / pull data from Formbricks app
+            </h3>
+            <p className="text-slate-700 dark:text-gray-300">
               On formbricks.logout() a few things happen: <strong>New person is created</strong> and{" "}
               <strong>surveys & no-code actions are pulled from Formbricks:</strong>.
             </p>
             <button
-              className="my-4 rounded-lg bg-slate-500 px-6 py-3 text-white hover:bg-slate-700"
+              className="my-4 rounded-lg bg-slate-500 px-6 py-3 text-white hover:bg-slate-700 dark:bg-gray-700 dark:hover:bg-gray-600"
               onClick={() => {
                 formbricks.logout();
               }}>
               Logout
             </button>
-            <p className="text-xs text-slate-700">
+            <p className="text-xs text-slate-700 dark:text-gray-300">
               If you made a change in Formbricks app and it does not seem to work, hit &apos;Logout&apos; and
               try again.
             </p>
@@ -56,7 +79,7 @@ export default function AppPage({}) {
           <div className="p-6">
             <div>
               <button
-                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700"
+                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700 dark:bg-gray-700 dark:hover:bg-gray-600"
                 onClick={() => {
                   formbricks.track("Code Action");
                 }}>
@@ -64,7 +87,7 @@ export default function AppPage({}) {
               </button>
             </div>
             <div>
-              <p className="text-xs text-slate-700">
+              <p className="text-xs text-slate-700 dark:text-gray-300">
                 This button sends a{" "}
                 <a href="https://formbricks.com/docs/actions/code" className="underline" target="_blank">
                   Code Action
@@ -75,18 +98,24 @@ export default function AppPage({}) {
           </div>
           <div className="p-6">
             <div>
-              <button className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700">
+              <button className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700  dark:bg-gray-700 dark:hover:bg-gray-600">
                 No-Code Action
               </button>
             </div>
             <div>
-              <p className="text-xs text-slate-700">
+              <p className="text-xs text-slate-700 dark:text-gray-300">
                 This button sends a{" "}
-                <a href="https://formbricks.com/docs/actions/no-code" className="underline" target="_blank">
+                <a
+                  href="https://formbricks.com/docs/actions/no-code"
+                  className="underline dark:text-blue-500"
+                  target="_blank">
                   No Code Action
                 </a>{" "}
                 as long as you created it beforehand in the Formbricks App.{" "}
-                <a href="https://formbricks.com/docs/actions/no-code" target="_blank" className="underline">
+                <a
+                  href="https://formbricks.com/docs/actions/no-code"
+                  target="_blank"
+                  className="underline dark:text-blue-500">
                   Here are instructions on how to do it.
                 </a>
               </p>
@@ -98,17 +127,17 @@ export default function AppPage({}) {
                 onClick={() => {
                   formbricks.setAttribute("Plan", "Free");
                 }}
-                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700">
+                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700  dark:bg-gray-700 dark:hover:bg-gray-600">
                 Set Plan to &apos;Free&apos;
               </button>
             </div>
             <div>
-              <p className="text-xs text-slate-700">
+              <p className="text-xs text-slate-700 dark:text-gray-300">
                 This button sets the{" "}
                 <a
                   href="https://formbricks.com/docs/attributes/custom-attributes"
                   target="_blank"
-                  className="underline">
+                  className="underline dark:text-blue-500">
                   attribute
                 </a>{" "}
                 &apos;Plan&apos; to &apos;Free&apos;. If the attribute does not exist, it creates it.
@@ -121,17 +150,17 @@ export default function AppPage({}) {
                 onClick={() => {
                   formbricks.setAttribute("Plan", "Paid");
                 }}
-                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700">
+                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700  dark:bg-gray-700 dark:hover:bg-gray-600">
                 Set Plan to &apos;Paid&apos;
               </button>
             </div>
             <div>
-              <p className="text-xs text-slate-700">
+              <p className="text-xs text-slate-700 dark:text-gray-300">
                 This button sets the{" "}
                 <a
                   href="https://formbricks.com/docs/attributes/custom-attributes"
                   target="_blank"
-                  className="underline">
+                  className="underline dark:text-blue-500">
                   attribute
                 </a>{" "}
                 &apos;Plan&apos; to &apos;Paid&apos;. If the attribute does not exist, it creates it.
@@ -144,17 +173,17 @@ export default function AppPage({}) {
                 onClick={() => {
                   formbricks.setEmail("test@web.com");
                 }}
-                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700">
+                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700  dark:bg-gray-700 dark:hover:bg-gray-600">
                 Set Email
               </button>
             </div>
             <div>
-              <p className="text-xs text-slate-700">
+              <p className="text-xs text-slate-700 dark:text-gray-300">
                 This button sets the{" "}
                 <a
                   href="https://formbricks.com/docs/attributes/identify-users"
                   target="_blank"
-                  className="underline">
+                  className="underline dark:text-blue-500">
                   user email
                 </a>{" "}
                 &apos;test@web.com&apos;
@@ -167,17 +196,17 @@ export default function AppPage({}) {
                 onClick={() => {
                   formbricks.setUserId("THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING");
                 }}
-                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700">
+                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700  dark:bg-gray-700 dark:hover:bg-gray-600">
                 Set User ID
               </button>
             </div>
             <div>
-              <p className="text-xs text-slate-700">
+              <p className="text-xs text-slate-700 dark:text-gray-300">
                 This button sets an external{" "}
                 <a
                   href="https://formbricks.com/docs/attributes/identify-users"
                   target="_blank"
-                  className="underline">
+                  className="underline dark:text-blue-500">
                   user ID
                 </a>{" "}
                 to &apos;THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING&apos;
diff --git a/apps/demo/tailwind.config.js b/apps/demo/tailwind.config.js
index fa51e9f4b3..0ccb1b5185 100644
--- a/apps/demo/tailwind.config.js
+++ b/apps/demo/tailwind.config.js
@@ -5,6 +5,7 @@ module.exports = {
     "./pages/**/*.{js,ts,jsx,tsx}",
     "./components/**/*.{js,ts,jsx,tsx}",
   ],
+  darkMode: "class",
   theme: {
     extend: {},
   },
diff --git a/packages/js/src/components/ConsentQuestion.tsx b/packages/js/src/components/ConsentQuestion.tsx
index 565a8e62b9..1c18445c39 100644
--- a/packages/js/src/components/ConsentQuestion.tsx
+++ b/packages/js/src/components/ConsentQuestion.tsx
@@ -59,7 +59,7 @@ export default function ConsentQuestion({
           e.preventDefault();
           handleSumbit(answer);
         }}>
-        <label className="fb-relative fb-z-10 fb-mt-4 fb-flex fb-w-full fb-cursor-pointer fb-items-center fb-rounded-md fb-border fb-border-gray-200 fb-bg-slate-50 fb-p-4 fb-text-sm focus:fb-outline-none">
+        <label className="fb-relative fb-z-10 fb-mt-4 fb-flex fb-w-full fb-cursor-pointer fb-items-center fb-rounded-md fb-border fb-border-gray-200 fb-bg-slate-50 fb-p-4 fb-text-sm focus:fb-outline-none fb-text-slate-800">
           <input
             type="checkbox"
             id={question.id}
diff --git a/packages/js/src/components/MultipleChoiceMultiQuestion.tsx b/packages/js/src/components/MultipleChoiceMultiQuestion.tsx
index 6a7d6f7964..8913a72c2b 100644
--- a/packages/js/src/components/MultipleChoiceMultiQuestion.tsx
+++ b/packages/js/src/components/MultipleChoiceMultiQuestion.tsx
@@ -126,7 +126,7 @@ export default function MultipleChoiceMultiQuestion({
                   selectedChoices.includes(choice.label)
                     ? "fb-z-10 fb-border-slate-400 fb-bg-slate-50"
                     : "fb-border-gray-200",
-                  "fb-relative fb-flex fb-cursor-pointer fb-flex-col fb-space-y-3 fb-rounded-md fb-border fb-p-4 hover:fb-bg-slate-50 focus:fb-outline-none"
+                  "fb-relative fb-flex fb-cursor-pointer fb-flex-col fb-space-y-3 fb-rounded-md fb-border fb-p-4 hover:fb-bg-slate-50 focus:fb-outline-none fb-text-slate-800"
                 )}>
                 <span className="fb-flex fb-items-center fb-text-sm">
                   <input
diff --git a/packages/js/src/components/MultipleChoiceSingleQuestion.tsx b/packages/js/src/components/MultipleChoiceSingleQuestion.tsx
index e86b652d25..7fae48eca5 100644
--- a/packages/js/src/components/MultipleChoiceSingleQuestion.tsx
+++ b/packages/js/src/components/MultipleChoiceSingleQuestion.tsx
@@ -109,7 +109,7 @@ export default function MultipleChoiceSingleQuestion({
                   selectedChoice === choice.label
                     ? "fb-z-10 fb-bg-slate-50 fb-border-slate-400"
                     : "fb-border-gray-200",
-                  "fb-relative fb-flex fb-cursor-pointer fb-flex-col fb-rounded-md fb-border fb-p-4 focus:fb-outline-none hover:bg-slate-50"
+                  "fb-relative fb-flex fb-cursor-pointer fb-flex-col fb-rounded-md fb-border fb-p-4 focus:fb-outline-none hover:bg-slate-50 fb-text-slate-800"
                 )}>
                 <span className="fb-flex fb-items-center fb-text-sm">
                   <input
diff --git a/packages/js/src/components/NPSQuestion.tsx b/packages/js/src/components/NPSQuestion.tsx
index 9dd2079cce..e7d2292c74 100644
--- a/packages/js/src/components/NPSQuestion.tsx
+++ b/packages/js/src/components/NPSQuestion.tsx
@@ -72,7 +72,7 @@ export default function NPSQuestion({
                 key={number}
                 className={cn(
                   selectedChoice === number ? "fb-z-10 fb-border-slate-400 fb-bg-slate-50" : "",
-                  "fb-relative fb-h-10 fb-flex-1 fb-cursor-pointer fb-border fb-bg-white fb-text-center fb-text-sm fb-leading-10 first:fb-rounded-l-md last:fb-rounded-r-md hover:fb-bg-gray-100 focus:fb-outline-none"
+                  "fb-relative fb-h-10 fb-flex-1 fb-cursor-pointer fb-border fb-bg-white fb-text-center fb-text-sm fb-leading-10 first:fb-rounded-l-md last:fb-rounded-r-md hover:fb-bg-gray-100 focus:fb-outline-none fb-text-slate-800"
                 )}>
                 <input
                   type="radio"
diff --git a/packages/js/src/components/RatingQuestion.tsx b/packages/js/src/components/RatingQuestion.tsx
index bf0dee85dd..1d80fd954f 100644
--- a/packages/js/src/components/RatingQuestion.tsx
+++ b/packages/js/src/components/RatingQuestion.tsx
@@ -105,7 +105,7 @@ export default function RatingQuestion({
                       selectedChoice === number ? "fb-z-10 fb-border-slate-400 fb-bg-slate-50" : "",
                       a.length === number ? "fb-rounded-r-md" : "",
                       number === 1 ? "fb-rounded-l-md" : "",
-                      "fb-block fb-h-full fb-w-full fb-border hover:fb-bg-gray-100 focus:fb-outline-none"
+                      "fb-block fb-h-full fb-w-full fb-border hover:fb-bg-gray-100 focus:fb-outline-none fb-text-slate-800"
                     )}>
                     <HiddenRadioInput number={number} />
                     {number}
@@ -148,7 +148,7 @@ export default function RatingQuestion({
                     )}
                   </label>
                 ) : (
-                  <label className="fb-flex fb-h-full fb-w-full fb-justify-center">
+                  <label className="fb-flex fb-h-full fb-w-full fb-justify-center fb-text-slate-800">
                     <HiddenRadioInput number={number} />
                     <RatingSmiley
                       active={selectedChoice == number || hoveredNumber == number}
@@ -160,7 +160,7 @@ export default function RatingQuestion({
               </span>
             ))}
           </div>
-          <div className="fb-flex fb-justify-between fb-text-slate-500  fb-leading-6 fb-px-1.5 fb-text-xs">
+          <div className="fb-flex fb-justify-between fb-text-slate-500 fb-leading-6 fb-px-1.5 fb-text-xs">
             <p>{question.lowerLabel}</p>
             <p>{question.upperLabel}</p>
           </div>