diff --git a/.env.example b/.env.example
deleted file mode 100644
index 271a0decf2..0000000000
--- a/.env.example
+++ /dev/null
@@ -1,76 +0,0 @@
-########################################################################
-# ------------ MANDATORY (CHANGE ACCORDING TO YOUR SETUP) ------------#
-########################################################################
-
-
-############
-#  Basics  #
-############
-
-NEXTAUTH_SECRET=RANDOM_STRING
-
-# Set this to your public-facing URL, e.g., https://example.com
-NEXTAUTH_URL=http://localhost:3000
-
-# This should always be localhost:3000 (or whatever port your app is running on)
-NEXTAUTH_URL_INTERNAL=http://localhost:3000
-
-DATABASE_URL='postgresql://postgres:postgres@localhost:5432/postgres?schema=public'
-
-# For Docker Compose Production Setup use this Database URL:
-# DATABASE_URL='postgresql://postgres:postgres@postgres:5432/formbricks?schema=public'
-
-################
-#  Mail Setup  #
-################
-
-# Necessary if email verification and password reset are enabled.
-# See optional configurations below if you want to disable these features.
-
-MAIL_FROM=noreply@example.com
-SMTP_HOST=localhost
-SMTP_PORT=1025
-SMTP_SECURE_ENABLED=0 # Enable for TLS (port 465)
-SMTP_USER=smtpUser
-SMTP_PASSWORD=smtpPassword
-
-
-########################################################################
-# ------------------------------ OPTIONAL -----------------------------#
-########################################################################
-
-# Uncomment the variables you would like to use and customize the values.
-
-#####################
-# Disable Features  #
-#####################
-
-# Email Verification. If you enable Email Verification you have to setup SMTP-Settings, too.
-# NEXT_PUBLIC_EMAIL_VERIFICATION_DISABLED=1
-
-# Password Reset. If you enable Password Reset functionality you have to setup SMTP-Settings, too.
-# NEXT_PUBLIC_PASSWORD_RESET_DISABLED=1
-
-# Signup. Disable the ability for new users to create an account.
-# NEXT_PUBLIC_SIGNUP_DISABLED=1
-
-##########
-# Other  #
-##########
-
-# Disable Sentry warning
-SENTRY_IGNORE_API_RESOLUTION_ERROR=1
-
-# Enable Sentry Error Tracking
-NEXT_PUBLIC_SENTRY_DSN=
-
-# Configure Github Login
-NEXT_PUBLIC_GITHUB_AUTH_ENABLED=0
-GITHUB_ID=
-GITHUB_SECRET=
-
-# Stripe Billing Variables
-NEXT_PUBLIC_STRIPE_PRICING_TABLE_ID=
-NEXT_PUBLIC_STRIPE_PUBLIC_KEY=
-STRIPE_SECRET_KEY=
-STRIPE_WEBHOOK_SECRET=
\ No newline at end of file
diff --git a/apps/demo/components/AppPage.tsx b/apps/demo/components/AppPage.tsx
index e946a5b547..b55e356cf2 100644
--- a/apps/demo/components/AppPage.tsx
+++ b/apps/demo/components/AppPage.tsx
@@ -56,7 +56,7 @@ const transactions = [
 const statusStyles = {
   success: "bg-green-100 text-green-800",
   processing: "bg-yellow-100 text-yellow-800",
-  failed: "bg-gray-100 text-gray-800",
+  failed: "bg-slate-100 text-slate-800",
 };
 
 function classNames(...classes) {
@@ -84,7 +84,7 @@ export default function AppPage({ onClickFeedback = () => {} }: AppPageProps) {
               leave="transition-opacity ease-linear duration-300"
               leaveFrom="opacity-100"
               leaveTo="opacity-0">
-              <div className="fixed inset-0 bg-gray-600 bg-opacity-75" />
+              <div className="fixed inset-0 bg-slate-600 bg-opacity-75" />
             </Transition.Child>
 
             <div className="fixed inset-0 z-40 flex">
@@ -217,10 +217,10 @@ export default function AppPage({ onClickFeedback = () => {} }: AppPageProps) {
         </div>
 
         <div className="flex flex-1 flex-col lg:pl-64">
-          <div className="flex h-16 flex-shrink-0 border-b border-gray-200 bg-white lg:border-none">
+          <div className="flex h-16 flex-shrink-0 border-b border-slate-200 bg-white lg:border-none">
             <button
               type="button"
-              className="border-r border-gray-200 px-4 text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-cyan-500 lg:hidden"
+              className="border-r border-slate-200 px-4 text-slate-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-cyan-500 lg:hidden"
               onClick={() => setSidebarOpen(true)}>
               <span className="sr-only">Open sidebar</span>
               <Bars3CenterLeftIcon className="h-6 w-6" aria-hidden="true" />
@@ -232,7 +232,7 @@ export default function AppPage({ onClickFeedback = () => {} }: AppPageProps) {
                   <label htmlFor="search-field" className="sr-only">
                     Search
                   </label>
-                  <div className="relative w-full text-gray-400 focus-within:text-gray-600">
+                  <div className="relative w-full text-slate-400 focus-within:text-slate-600">
                     <div
                       className="pointer-events-none absolute inset-y-0 left-0 flex items-center"
                       aria-hidden="true">
@@ -241,7 +241,7 @@ export default function AppPage({ onClickFeedback = () => {} }: AppPageProps) {
                     <input
                       id="search-field"
                       name="search-field"
-                      className="block h-full w-full border-transparent py-2 pl-8 pr-3 text-gray-900 placeholder-gray-500 focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm"
+                      className="block h-full w-full border-transparent py-2 pl-8 pr-3 text-slate-900 placeholder-slate-500 focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm"
                       placeholder="Search transactions"
                       type="search"
                     />
@@ -251,29 +251,29 @@ export default function AppPage({ onClickFeedback = () => {} }: AppPageProps) {
               <div className="ml-4 flex items-center md:ml-6">
                 <button
                   onClick={onClickFeedback}
-                  className="mr-2 flex max-w-xs items-center rounded-full bg-white text-sm  font-medium text-gray-700 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 lg:rounded-md lg:p-2 lg:hover:bg-gray-50">
+                  className="mr-2 flex max-w-xs items-center rounded-full bg-white text-sm  font-medium text-slate-700 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 lg:rounded-md lg:p-2 lg:hover:bg-slate-50">
                   Feedback
                 </button>
                 <button
                   type="button"
-                  className="rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2">
+                  className="rounded-full bg-white p-1 text-slate-400 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2">
                   <span className="sr-only">View notifications</span>
                   <BellIcon className="h-6 w-6" aria-hidden="true" />
                 </button>
                 {/* Profile dropdown */}
                 <Menu as="div" className="relative ml-3">
                   <div>
-                    <Menu.Button className="flex max-w-xs items-center rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 lg:rounded-md lg:p-2 lg:hover:bg-gray-50">
+                    <Menu.Button className="flex max-w-xs items-center rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 lg:rounded-md lg:p-2 lg:hover:bg-slate-50">
                       <img
                         className="h-8 w-8 rounded-full"
                         src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
                         alt=""
                       />
-                      <span className="ml-3 hidden text-sm font-medium text-gray-700 lg:block">
+                      <span className="ml-3 hidden text-sm font-medium text-slate-700 lg:block">
                         <span className="sr-only">Open user menu for </span>Emilia Birch
                       </span>
                       <ChevronDownIcon
-                        className="ml-1 hidden h-5 w-5 flex-shrink-0 text-gray-400 lg:block"
+                        className="ml-1 hidden h-5 w-5 flex-shrink-0 text-slate-400 lg:block"
                         aria-hidden="true"
                       />
                     </Menu.Button>
@@ -292,8 +292,8 @@ export default function AppPage({ onClickFeedback = () => {} }: AppPageProps) {
                           <a
                             href="#"
                             className={classNames(
-                              active ? "bg-gray-100" : "",
-                              "block px-4 py-2 text-sm text-gray-700"
+                              active ? "bg-slate-100" : "",
+                              "block px-4 py-2 text-sm text-slate-700"
                             )}>
                             Your Profile
                           </a>
@@ -304,8 +304,8 @@ export default function AppPage({ onClickFeedback = () => {} }: AppPageProps) {
                           <a
                             href="#"
                             className={classNames(
-                              active ? "bg-gray-100" : "",
-                              "block px-4 py-2 text-sm text-gray-700"
+                              active ? "bg-slate-100" : "",
+                              "block px-4 py-2 text-sm text-slate-700"
                             )}>
                             Settings
                           </a>
@@ -316,8 +316,8 @@ export default function AppPage({ onClickFeedback = () => {} }: AppPageProps) {
                           <a
                             href="#"
                             className={classNames(
-                              active ? "bg-gray-100" : "",
-                              "block px-4 py-2 text-sm text-gray-700"
+                              active ? "bg-slate-100" : "",
+                              "block px-4 py-2 text-sm text-slate-700"
                             )}>
                             Logout
                           </a>
@@ -333,7 +333,7 @@ export default function AppPage({ onClickFeedback = () => {} }: AppPageProps) {
             {/* Page header */}
             <div className="bg-white shadow">
               <div className="px-4 sm:px-6 lg:mx-auto lg:max-w-6xl lg:px-8">
-                <div className="py-6 md:flex md:items-center md:justify-between lg:border-t lg:border-gray-200">
+                <div className="py-6 md:flex md:items-center md:justify-between lg:border-t lg:border-slate-200">
                   <div className="min-w-0 flex-1">
                     {/* Profile */}
                     <div className="flex items-center">
@@ -349,21 +349,21 @@ export default function AppPage({ onClickFeedback = () => {} }: AppPageProps) {
                             src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.6&w=256&h=256&q=80"
                             alt=""
                           />
-                          <h1 className="ml-3 text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:leading-9">
+                          <h1 className="ml-3 text-2xl font-bold leading-7 text-slate-900 sm:truncate sm:leading-9">
                             Good morning, Emilia Birch
                           </h1>
                         </div>
                         <dl className="mt-6 flex flex-col sm:ml-3 sm:mt-1 sm:flex-row sm:flex-wrap">
                           <dt className="sr-only">Company</dt>
-                          <dd className="flex items-center text-sm font-medium capitalize text-gray-500 sm:mr-6">
+                          <dd className="flex items-center text-sm font-medium capitalize text-slate-500 sm:mr-6">
                             <BuildingOfficeIcon
-                              className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
+                              className="mr-1.5 h-5 w-5 flex-shrink-0 text-slate-400"
                               aria-hidden="true"
                             />
                             Duke street studio
                           </dd>
                           <dt className="sr-only">Account status</dt>
-                          <dd className="mt-3 flex items-center text-sm font-medium capitalize text-gray-500 sm:mr-6 sm:mt-0">
+                          <dd className="mt-3 flex items-center text-sm font-medium capitalize text-slate-500 sm:mr-6 sm:mt-0">
                             <CheckCircleIcon
                               className="mr-1.5 h-5 w-5 flex-shrink-0 text-green-400"
                               aria-hidden="true"
@@ -377,7 +377,7 @@ export default function AppPage({ onClickFeedback = () => {} }: AppPageProps) {
                   <div className="mt-6 flex space-x-3 md:mt-0 md:ml-4">
                     <button
                       type="button"
-                      className="inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2">
+                      className="inline-flex items-center rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2">
                       Add money
                     </button>
                     <button
@@ -392,7 +392,7 @@ export default function AppPage({ onClickFeedback = () => {} }: AppPageProps) {
 
             <div className="mt-8">
               <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
-                <h2 className="text-lg font-medium leading-6 text-gray-900">Overview</h2>
+                <h2 className="text-lg font-medium leading-6 text-slate-900">Overview</h2>
                 <div className="mt-2 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
                   {/* Card */}
                   {cards.map((card) => (
@@ -400,19 +400,19 @@ export default function AppPage({ onClickFeedback = () => {} }: AppPageProps) {
                       <div className="p-5">
                         <div className="flex items-center">
                           <div className="flex-shrink-0">
-                            <card.icon className="h-6 w-6 text-gray-400" aria-hidden="true" />
+                            <card.icon className="h-6 w-6 text-slate-400" aria-hidden="true" />
                           </div>
                           <div className="ml-5 w-0 flex-1">
                             <dl>
-                              <dt className="truncate text-sm font-medium text-gray-500">{card.name}</dt>
+                              <dt className="truncate text-sm font-medium text-slate-500">{card.name}</dt>
                               <dd>
-                                <div className="text-lg font-medium text-gray-900">{card.amount}</div>
+                                <div className="text-lg font-medium text-slate-900">{card.amount}</div>
                               </dd>
                             </dl>
                           </div>
                         </div>
                       </div>
-                      <div className="bg-gray-50 px-5 py-3">
+                      <div className="bg-slate-50 px-5 py-3">
                         <div className="text-sm">
                           <a href={card.href} className="font-medium text-cyan-700 hover:text-cyan-900">
                             View all
@@ -424,33 +424,33 @@ export default function AppPage({ onClickFeedback = () => {} }: AppPageProps) {
                 </div>
               </div>
 
-              <h2 className="mx-auto mt-8 max-w-6xl px-4 text-lg font-medium leading-6 text-gray-900 sm:px-6 lg:px-8">
+              <h2 className="mx-auto mt-8 max-w-6xl px-4 text-lg font-medium leading-6 text-slate-900 sm:px-6 lg:px-8">
                 Recent activity
               </h2>
 
               {/* Activity list (smallest breakpoint only) */}
               <div className="shadow sm:hidden">
-                <ul role="list" className="mt-2 divide-y divide-gray-200 overflow-hidden shadow sm:hidden">
+                <ul role="list" className="mt-2 divide-y divide-slate-200 overflow-hidden shadow sm:hidden">
                   {transactions.map((transaction) => (
                     <li key={transaction.id}>
-                      <a href={transaction.href} className="block bg-white px-4 py-4 hover:bg-gray-50">
+                      <a href={transaction.href} className="block bg-white px-4 py-4 hover:bg-slate-50">
                         <span className="flex items-center space-x-4">
                           <span className="flex flex-1 space-x-2 truncate">
                             <BanknotesIcon
-                              className="h-5 w-5 flex-shrink-0 text-gray-400"
+                              className="h-5 w-5 flex-shrink-0 text-slate-400"
                               aria-hidden="true"
                             />
-                            <span className="flex flex-col truncate text-sm text-gray-500">
+                            <span className="flex flex-col truncate text-sm text-slate-500">
                               <span className="truncate">{transaction.name}</span>
                               <span>
-                                <span className="font-medium text-gray-900">{transaction.amount}</span>{" "}
+                                <span className="font-medium text-slate-900">{transaction.amount}</span>{" "}
                                 {transaction.currency}
                               </span>
                               <time dateTime={transaction.datetime}>{transaction.date}</time>
                             </span>
                           </span>
                           <ChevronRightIcon
-                            className="h-5 w-5 flex-shrink-0 text-gray-400"
+                            className="h-5 w-5 flex-shrink-0 text-slate-400"
                             aria-hidden="true"
                           />
                         </span>
@@ -460,17 +460,17 @@ export default function AppPage({ onClickFeedback = () => {} }: AppPageProps) {
                 </ul>
 
                 <nav
-                  className="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3"
+                  className="flex items-center justify-between border-t border-slate-200 bg-white px-4 py-3"
                   aria-label="Pagination">
                   <div className="flex flex-1 justify-between">
                     <a
                       href="#"
-                      className="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-500">
+                      className="relative inline-flex items-center rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:text-slate-500">
                       Previous
                     </a>
                     <a
                       href="#"
-                      className="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-500">
+                      className="relative ml-3 inline-flex items-center rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:text-slate-500">
                       Next
                     </a>
                   </div>
@@ -482,54 +482,54 @@ export default function AppPage({ onClickFeedback = () => {} }: AppPageProps) {
                 <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
                   <div className="mt-2 flex flex-col">
                     <div className="min-w-full overflow-hidden overflow-x-auto align-middle shadow sm:rounded-lg">
-                      <table className="min-w-full divide-y divide-gray-200">
+                      <table className="min-w-full divide-y divide-slate-200">
                         <thead>
                           <tr>
                             <th
-                              className="bg-gray-50 px-6 py-3 text-left text-sm font-semibold text-gray-900"
+                              className="bg-slate-50 px-6 py-3 text-left text-sm font-semibold text-slate-900"
                               scope="col">
                               Transaction
                             </th>
                             <th
-                              className="bg-gray-50 px-6 py-3 text-right text-sm font-semibold text-gray-900"
+                              className="bg-slate-50 px-6 py-3 text-right text-sm font-semibold text-slate-900"
                               scope="col">
                               Amount
                             </th>
                             <th
-                              className="hidden bg-gray-50 px-6 py-3 text-left text-sm font-semibold text-gray-900 md:block"
+                              className="hidden bg-slate-50 px-6 py-3 text-left text-sm font-semibold text-slate-900 md:block"
                               scope="col">
                               Status
                             </th>
                             <th
-                              className="bg-gray-50 px-6 py-3 text-right text-sm font-semibold text-gray-900"
+                              className="bg-slate-50 px-6 py-3 text-right text-sm font-semibold text-slate-900"
                               scope="col">
                               Date
                             </th>
                           </tr>
                         </thead>
-                        <tbody className="divide-y divide-gray-200 bg-white">
+                        <tbody className="divide-y divide-slate-200 bg-white">
                           {transactions.map((transaction) => (
                             <tr key={transaction.id} className="bg-white">
-                              <td className="w-full max-w-0 whitespace-nowrap px-6 py-4 text-sm text-gray-900">
+                              <td className="w-full max-w-0 whitespace-nowrap px-6 py-4 text-sm text-slate-900">
                                 <div className="flex">
                                   <a
                                     href={transaction.href}
                                     className="group inline-flex space-x-2 truncate text-sm">
                                     <BanknotesIcon
-                                      className="h-5 w-5 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
+                                      className="h-5 w-5 flex-shrink-0 text-slate-400 group-hover:text-slate-500"
                                       aria-hidden="true"
                                     />
-                                    <p className="truncate text-gray-500 group-hover:text-gray-900">
+                                    <p className="truncate text-slate-500 group-hover:text-slate-900">
                                       {transaction.name}
                                     </p>
                                   </a>
                                 </div>
                               </td>
-                              <td className="whitespace-nowrap px-6 py-4 text-right text-sm text-gray-500">
-                                <span className="font-medium text-gray-900">{transaction.amount}</span>
+                              <td className="whitespace-nowrap px-6 py-4 text-right text-sm text-slate-500">
+                                <span className="font-medium text-slate-900">{transaction.amount}</span>
                                 {transaction.currency}
                               </td>
-                              <td className="hidden whitespace-nowrap px-6 py-4 text-sm text-gray-500 md:block">
+                              <td className="hidden whitespace-nowrap px-6 py-4 text-sm text-slate-500 md:block">
                                 <span
                                   className={classNames(
                                     statusStyles[transaction.status],
@@ -538,7 +538,7 @@ export default function AppPage({ onClickFeedback = () => {} }: AppPageProps) {
                                   {transaction.status}
                                 </span>
                               </td>
-                              <td className="whitespace-nowrap px-6 py-4 text-right text-sm text-gray-500">
+                              <td className="whitespace-nowrap px-6 py-4 text-right text-sm text-slate-500">
                                 <time dateTime={transaction.datetime}>{transaction.date}</time>
                               </td>
                             </tr>
@@ -547,10 +547,10 @@ export default function AppPage({ onClickFeedback = () => {} }: AppPageProps) {
                       </table>
                       {/* Pagination */}
                       <nav
-                        className="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6"
+                        className="flex items-center justify-between border-t border-slate-200 bg-white px-4 py-3 sm:px-6"
                         aria-label="Pagination">
                         <div className="hidden sm:block">
-                          <p className="text-sm text-gray-700">
+                          <p className="text-sm text-slate-700">
                             Showing <span className="font-medium">1</span> to{" "}
                             <span className="font-medium">10</span> of <span className="font-medium">20</span>{" "}
                             results
@@ -559,12 +559,12 @@ export default function AppPage({ onClickFeedback = () => {} }: AppPageProps) {
                         <div className="flex flex-1 justify-between sm:justify-end">
                           <a
                             href="#"
-                            className="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">
+                            className="relative inline-flex items-center rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">
                             Previous
                           </a>
                           <a
                             href="#"
-                            className="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">
+                            className="relative ml-3 inline-flex items-center rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">
                             Next
                           </a>
                         </div>
diff --git a/apps/demo/components/SimpleFeedbackModal.tsx b/apps/demo/components/SimpleFeedbackModal.tsx
index b7e1a63420..646472a744 100644
--- a/apps/demo/components/SimpleFeedbackModal.tsx
+++ b/apps/demo/components/SimpleFeedbackModal.tsx
@@ -26,7 +26,7 @@ export default function SimpleFeedbackModal({ show, setShow }) {
               <div className="p-4">
                 <div className="flex items-start">
                   <div className="ml-3 w-0 flex-1 pt-0.5">
-                    <p className="text-sm font-medium text-gray-900">We would like to hear your feedback</p>
+                    <p className="text-sm font-medium text-slate-900">We would like to hear your feedback</p>
                     <div className="mt-3 flex space-x-7">
                       <Form
                         hqUrl={process.env.NEXT_PUBLIC_FORMBRICKS_URL}
@@ -46,7 +46,7 @@ export default function SimpleFeedbackModal({ show, setShow }) {
                       </Form>
                     </div>
                     <hr className="my-2" />
-                    <p className="mt-1 text-sm text-gray-500">
+                    <p className="mt-1 text-sm text-slate-500">
                       If you have a specific issue, please contact support directly at email us or visit our
                       docs
                     </p>
@@ -54,7 +54,7 @@ export default function SimpleFeedbackModal({ show, setShow }) {
                   <div className="ml-4 flex flex-shrink-0">
                     <button
                       type="button"
-                      className="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                      className="inline-flex rounded-md bg-white text-slate-400 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
                       onClick={() => {
                         setShow(false);
                       }}>
diff --git a/apps/demo/components/feedback/FeedbackModal.tsx b/apps/demo/components/feedback/FeedbackModal.tsx
index 4812dbb4b1..8b041eade5 100644
--- a/apps/demo/components/feedback/FeedbackModal.tsx
+++ b/apps/demo/components/feedback/FeedbackModal.tsx
@@ -46,7 +46,7 @@ export default function FeedbackModal({ show, setShow, formId, customer }: Feedb
                 <div className="absolute right-4 top-4 ml-4 flex flex-shrink-0">
                   <button
                     type="button"
-                    className="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2"
+                    className="inline-flex rounded-md bg-white text-slate-400 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2"
                     onClick={() => {
                       setShow(false);
                       setTimeout(() => {
@@ -65,7 +65,7 @@ export default function FeedbackModal({ show, setShow, formId, customer }: Feedb
 
               {typeof feedbackType === "undefined" ? (
                 <div className="p-4">
-                  <div className="w-full text-center text-xs text-gray-700">What&apos;s on your mind?</div>
+                  <div className="w-full text-center text-xs text-slate-700">What&apos;s on your mind?</div>
                   <nav className="mt-3 space-y-1" aria-label="Sidebar">
                     {navigation.map((item) => (
                       <button
@@ -73,10 +73,10 @@ export default function FeedbackModal({ show, setShow, formId, customer }: Feedb
                         onClick={() => {
                           setFeedbackType(item);
                         }}
-                        className="group flex w-full items-center rounded-md px-3 py-2 text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-gray-900">
+                        className="group flex w-full items-center rounded-md px-3 py-2 text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-slate-900">
                         <item.icon
                           className={clsx(
-                            "text-gray-400 group-hover:text-gray-500",
+                            "text-slate-400 group-hover:text-slate-500",
                             "-ml-1 mr-3 h-7 w-7 flex-shrink-0"
                           )}
                           aria-hidden="true"
@@ -91,13 +91,13 @@ export default function FeedbackModal({ show, setShow, formId, customer }: Feedb
                   <button
                     key={feedbackType.name}
                     onClick={() => setFeedbackType(undefined)}
-                    className="group flex w-full items-center justify-center bg-gray-200 px-3 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100 hover:text-gray-900">
+                    className="group flex w-full items-center justify-center bg-slate-200 px-3 py-2 text-sm font-medium text-slate-600 hover:bg-slate-100 hover:text-slate-900">
                     <feedbackType.icon
-                      className="-ml-1 mr-3 h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
+                      className="-ml-1 mr-3 h-6 w-6 flex-shrink-0 text-slate-400 group-hover:text-slate-500"
                       aria-hidden="true"
                     />
                     <span className="truncate">{feedbackType.name}</span>
-                    <ChevronDownIcon className="h-6 w-6 text-gray-500" />
+                    <ChevronDownIcon className="h-6 w-6 text-slate-500" />
                   </button>
 
                   <div className="p-4">
@@ -111,10 +111,10 @@ export default function FeedbackModal({ show, setShow, formId, customer }: Feedb
                           />
                         </div>
                         <div className="ml-3">
-                          <p className="text-sm font-medium text-gray-700 group-hover:text-gray-900">
+                          <p className="text-sm font-medium text-slate-700 group-hover:text-slate-900">
                             Thanks for sharing this!
                           </p>
-                          <p className="text-xs font-medium text-gray-500 group-hover:text-gray-700">
+                          <p className="text-xs font-medium text-slate-500 group-hover:text-slate-700">
                             Tom Cook, CEO
                           </p>
                         </div>
@@ -147,7 +147,7 @@ export default function FeedbackModal({ show, setShow, formId, customer }: Feedb
                         rows={5}
                         name="message"
                         id="message"
-                        className="mt-5 block w-full rounded-md border-gray-300 shadow-sm focus:border-slate-500 focus:ring-slate-500 sm:text-sm"
+                        className="mt-5 block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-500 focus:ring-slate-500 sm:text-sm"
                         placeholder={
                           feedbackType.id === "idea"
                             ? "I would love to..."
@@ -168,14 +168,14 @@ export default function FeedbackModal({ show, setShow, formId, customer }: Feedb
                 </>
               ) : (
                 <div className="p-4">
-                  <div className="w-full text-center font-medium text-gray-600">
+                  <div className="w-full text-center font-medium text-slate-600">
                     {feedbackType.id === "bug"
                       ? "Feedback received."
                       : feedbackType.id === "compliment"
                       ? "Thanks for sharing!"
                       : "Brainstorming in progress..."}
                   </div>
-                  <div className="mt-2 w-full text-center text-sm text-gray-500">
+                  <div className="mt-2 w-full text-center text-sm text-slate-500">
                     {feedbackType.id === "bug"
                       ? "We are doing our best to fix this asap. Thank you!"
                       : feedbackType.id === "compliment"
@@ -192,16 +192,16 @@ export default function FeedbackModal({ show, setShow, formId, customer }: Feedb
                         />
                       </div>
                       <div className="ml-3">
-                        <p className="text-xs font-medium text-gray-700 group-hover:text-gray-900">
+                        <p className="text-xs font-medium text-slate-700 group-hover:text-slate-900">
                           Tom Cook
                         </p>
-                        <p className="text-xs font-medium text-gray-500 group-hover:text-gray-700">CEO</p>
+                        <p className="text-xs font-medium text-slate-500 group-hover:text-slate-700">CEO</p>
                       </div>
                     </div>
                   </div>
                   <div className="mt-5 mb-2">
-                    <div className="text-center text-xs text-gray-600">More to share?</div>
-                    <div className="text-center text-xs font-bold text-gray-600">
+                    <div className="text-center text-xs text-slate-600">More to share?</div>
+                    <div className="text-center text-xs font-bold text-slate-600">
                       <Link href="https://slack.com" target="_blank">
                         Join Slack
                       </Link>
diff --git a/apps/demo/pages/demos/poll-results.tsx b/apps/demo/pages/demos/poll-results.tsx
index 952d55f847..87b93a76df 100644
--- a/apps/demo/pages/demos/poll-results.tsx
+++ b/apps/demo/pages/demos/poll-results.tsx
@@ -124,7 +124,7 @@ export default function Demo() {
               </a>
             </div>
             <div className="-my-2 -mr-2 md:hidden">
-              <Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
+              <Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-slate-400 hover:bg-slate-100 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
                 <span className="sr-only">Open menu</span>
                 <Bars3Icon className="h-6 w-6" aria-hidden="true" />
               </Popover.Button>
@@ -142,7 +142,7 @@ export default function Demo() {
             <Popover.Panel
               focus
               className="absolute inset-x-0 top-0 z-30 origin-top-right transform p-2 transition md:hidden">
-              <div className="divide-y-2 divide-gray-50 rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
+              <div className="divide-y-2 divide-slate-50 rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
                 <div className="px-5 pt-5 pb-6">
                   <div className="flex items-center justify-between">
                     <div>
@@ -153,7 +153,7 @@ export default function Demo() {
                       />
                     </div>
                     <div className="-mr-2">
-                      <Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
+                      <Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-slate-400 hover:bg-slate-100 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
                         <span className="sr-only">Close menu</span>
                         <XMarkIcon className="h-6 w-6" aria-hidden="true" />
                       </Popover.Button>
@@ -169,7 +169,7 @@ export default function Demo() {
       <main>
         {/* Hero section */}
         <div className="relative">
-          <div className="absolute inset-x-0 bottom-0 h-1/2 bg-gray-100" />
+          <div className="absolute inset-x-0 bottom-0 h-1/2 bg-slate-100" />
           <div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
             <div className="relative shadow-xl sm:overflow-hidden sm:rounded-2xl">
               <div className="absolute inset-0">
@@ -196,7 +196,7 @@ export default function Demo() {
         {/* Alternating Feature Sections */}
 
         <div className="relative overflow-hidden pl-12 pb-16">
-          <div aria-hidden="true" className="absolute inset-x-0 top-0 h-48 bg-gradient-to-b from-gray-100" />
+          <div aria-hidden="true" className="absolute inset-x-0 top-0 h-48 bg-gradient-to-b from-slate-100" />
           <div className="relative">
             <hr className="my-24 px-10" />
             <div className="lg:mx-auto lg:max-w-7xl">
@@ -208,8 +208,8 @@ export default function Demo() {
                     </span>
                   </div>
                   <div className="mt-6">
-                    <h2 className="text-3xl font-bold tracking-tight text-gray-900">The door is open</h2>
-                    <p className="mt-4 text-lg text-gray-500">
+                    <h2 className="text-3xl font-bold tracking-tight text-slate-900">The door is open</h2>
+                    <p className="mt-4 text-lg text-slate-500">
                       Now it&lsquo;s up to you to continue! And we are here to support you.
                       <br />
                       <br />
@@ -219,7 +219,7 @@ export default function Demo() {
                   </div>
                 </div>
                 {/* Feedback Form */}
-                <div className="mt-8 border-l border-gray-200 pl-10">
+                <div className="mt-8 border-l border-slate-200 pl-10">
                   {!answered ? (
                     /* Formbricks Form using React Library */
                     <Form
@@ -229,8 +229,8 @@ export default function Demo() {
                       <Radio
                         name="evaluate"
                         label="Evaluate the online course you just completed"
-                        legendClassName="mb-3 font-bold text-gray-800 text-xl"
-                        labelClassName="font-regular text-gray-500 text-lg"
+                        legendClassName="mb-3 font-bold text-slate-800 text-xl"
+                        labelClassName="font-regular text-slate-500 text-lg"
                         options={[
                           "Perfect",
                           "Very satisfactory",
@@ -243,7 +243,7 @@ export default function Demo() {
                         name="feedback"
                         label="Would you like to send us a comment, an opinion, a correction?"
                         help="Only you and us can see your answer."
-                        labelClassName="font-bold text-gray-800 text-xl"
+                        labelClassName="font-bold text-slate-800 text-xl"
                         innerClassName="mt-3"
                         cols={50}
                         rows={4}
@@ -255,10 +255,10 @@ export default function Demo() {
                     </Form>
                   ) : (
                     <>
-                      <h2 className="mx-auto mb-3 text-lg font-bold text-gray-800">
+                      <h2 className="mx-auto mb-3 text-lg font-bold text-slate-800">
                         Thanks a lot for your feedback
                       </h2>
-                      <p className="mb-5 text-lg text-gray-500">
+                      <p className="mb-5 text-lg text-slate-500">
                         Here you can see what other people answered.
                       </p>
                       {/* Visualize Submission using Formbricks Graphs Library */}
@@ -272,9 +272,9 @@ export default function Demo() {
         </div>
 
         {/* CTA Section */}
-        <div className="bg-gray-50">
+        <div className="bg-slate-50">
           <div className="mx-auto max-w-4xl py-16 px-4 sm:px-6 sm:py-24 lg:flex lg:max-w-7xl lg:items-center lg:justify-between lg:px-8">
-            <h2 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-4xl">
+            <h2 className="text-4xl font-bold tracking-tight text-slate-900 sm:text-4xl">
               <span className="block">Ready to get started?</span>
               <span className="-mb-1 block bg-gradient-to-r from-purple-600 to-indigo-600 bg-clip-text pb-1 text-transparent">
                 Get in touch or create an account.
@@ -296,7 +296,7 @@ export default function Demo() {
         </div>
       </main>
 
-      <footer className="bg-gray-50" aria-labelledby="footer-heading">
+      <footer className="bg-slate-50" aria-labelledby="footer-heading">
         <h2 id="footer-heading" className="sr-only">
           Footer
         </h2>
@@ -305,11 +305,11 @@ export default function Demo() {
             <div className="grid grid-cols-2 gap-8 xl:col-span-2">
               <div className="md:grid md:grid-cols-2 md:gap-8">
                 <div>
-                  <h3 className="text-base font-medium text-gray-900">Solutions</h3>
+                  <h3 className="text-base font-medium text-slate-900">Solutions</h3>
                   <ul role="list" className="mt-4 space-y-4">
                     {footerNavigation.solutions.map((item) => (
                       <li key={item.name}>
-                        <a href={item.href} className="text-base text-gray-500 hover:text-gray-900">
+                        <a href={item.href} className="text-base text-slate-500 hover:text-slate-900">
                           {item.name}
                         </a>
                       </li>
@@ -317,11 +317,11 @@ export default function Demo() {
                   </ul>
                 </div>
                 <div className="mt-12 md:mt-0">
-                  <h3 className="text-base font-medium text-gray-900">Support</h3>
+                  <h3 className="text-base font-medium text-slate-900">Support</h3>
                   <ul role="list" className="mt-4 space-y-4">
                     {footerNavigation.support.map((item) => (
                       <li key={item.name}>
-                        <a href={item.href} className="text-base text-gray-500 hover:text-gray-900">
+                        <a href={item.href} className="text-base text-slate-500 hover:text-slate-900">
                           {item.name}
                         </a>
                       </li>
@@ -331,11 +331,11 @@ export default function Demo() {
               </div>
               <div className="md:grid md:grid-cols-2 md:gap-8">
                 <div>
-                  <h3 className="text-base font-medium text-gray-900">Company</h3>
+                  <h3 className="text-base font-medium text-slate-900">Company</h3>
                   <ul role="list" className="mt-4 space-y-4">
                     {footerNavigation.company.map((item) => (
                       <li key={item.name}>
-                        <a href={item.href} className="text-base text-gray-500 hover:text-gray-900">
+                        <a href={item.href} className="text-base text-slate-500 hover:text-slate-900">
                           {item.name}
                         </a>
                       </li>
@@ -343,11 +343,11 @@ export default function Demo() {
                   </ul>
                 </div>
                 <div className="mt-12 md:mt-0">
-                  <h3 className="text-base font-medium text-gray-900">Legal</h3>
+                  <h3 className="text-base font-medium text-slate-900">Legal</h3>
                   <ul role="list" className="mt-4 space-y-4">
                     {footerNavigation.legal.map((item) => (
                       <li key={item.name}>
-                        <a href={item.href} className="text-base text-gray-500 hover:text-gray-900">
+                        <a href={item.href} className="text-base text-slate-500 hover:text-slate-900">
                           {item.name}
                         </a>
                       </li>
@@ -357,22 +357,22 @@ export default function Demo() {
               </div>
             </div>
             <div className="mt-12 xl:mt-0">
-              <h3 className="text-base font-medium text-gray-900">Subscribe to our newsletter</h3>
-              <p className="mt-4 text-base text-gray-500">
+              <h3 className="text-base font-medium text-slate-900">Subscribe to our newsletter</h3>
+              <p className="mt-4 text-base text-slate-500">
                 The latest news, articles, and resources, sent to your inbox weekly.
               </p>
             </div>
           </div>
-          <div className="mt-12 border-t border-gray-200 pt-8 md:flex md:items-center md:justify-between lg:mt-16">
+          <div className="mt-12 border-t border-slate-200 pt-8 md:flex md:items-center md:justify-between lg:mt-16">
             <div className="flex space-x-6 md:order-2">
               {footerNavigation.social.map((item) => (
-                <a key={item.name} href={item.href} className="text-gray-400 hover:text-gray-500">
+                <a key={item.name} href={item.href} className="text-slate-400 hover:text-slate-500">
                   <span className="sr-only">{item.name}</span>
                   <item.icon className="h-6 w-6" aria-hidden="true" />
                 </a>
               ))}
             </div>
-            <p className="mt-8 text-base text-gray-400 md:order-1 md:mt-0">
+            <p className="mt-8 text-base text-slate-400 md:order-1 md:mt-0">
               &copy; 2020 Your Company, Inc. All rights reserved.
             </p>
           </div>
diff --git a/apps/demo/pages/index.tsx b/apps/demo/pages/index.tsx
index c06ecdcf73..fb65bedb06 100644
--- a/apps/demo/pages/index.tsx
+++ b/apps/demo/pages/index.tsx
@@ -32,12 +32,12 @@ export default function DemosOverview() {
         {demos.map((demo) => (
           <div
             key={demo.name}
-            className="relative flex items-center space-x-3 rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm focus-within:ring-2 focus-within:ring-teal-500 focus-within:ring-offset-2 hover:border-gray-400">
+            className="relative flex items-center space-x-3 rounded-lg border border-slate-300 bg-white px-6 py-5 shadow-sm focus-within:ring-2 focus-within:ring-teal-500 focus-within:ring-offset-2 hover:border-slate-400">
             <div className="min-w-0 flex-1">
               <Link href={demo.href} className="focus:outline-none" target="_blank">
                 <span className="absolute inset-0" aria-hidden="true" />
-                <p className="text-sm font-medium text-gray-900">{demo.name}</p>
-                <p className="truncate text-sm text-gray-500">{demo.description}</p>
+                <p className="text-sm font-medium text-slate-900">{demo.name}</p>
+                <p className="truncate text-sm text-slate-500">{demo.description}</p>
               </Link>
             </div>
           </div>
diff --git a/apps/formbricks-com/components/engine/FeatureSelection.tsx b/apps/formbricks-com/components/engine/FeatureSelection.tsx
index c950544ead..1c70aea4f7 100644
--- a/apps/formbricks-com/components/engine/FeatureSelection.tsx
+++ b/apps/formbricks-com/components/engine/FeatureSelection.tsx
@@ -43,7 +43,7 @@ export default function FeatureSelection({
           <div className=" mx-auto grid max-w-5xl grid-cols-1 gap-6 px-2 sm:grid-cols-2">
             {shuffledOptions.map((option) => (
               <label htmlFor={`${element.id}-${option.value}`} key={`${element.id}-${option.value}`}>
-                <div className="drop-shadow-card duration-120 relative cursor-default rounded-lg border border-gray-200 bg-white p-6 transition-all ease-in-out hover:scale-105 dark:border-slate-700 dark:bg-slate-700">
+                <div className="drop-shadow-card duration-120 relative cursor-default rounded-lg border border-slate-200 bg-white p-6 transition-all ease-in-out hover:scale-105 dark:border-slate-700 dark:bg-slate-700">
                   <div className="absolute right-10">
                     <input
                       id={`${element.id}-${option.value}`}
diff --git a/apps/formbricks-com/components/engine/Input.tsx b/apps/formbricks-com/components/engine/Input.tsx
index acd800a439..83e9027744 100644
--- a/apps/formbricks-com/components/engine/Input.tsx
+++ b/apps/formbricks-com/components/engine/Input.tsx
@@ -36,7 +36,7 @@ export default function Input({
         <input
           type={element.frontend?.type || "text"}
           onBlur=""
-          className="focus:border-brand focus:ring-brand mx-auto mt-4 block w-full max-w-xl rounded-md border-gray-300 text-slate-700 shadow-sm dark:bg-slate-700 dark:text-slate-200 dark:placeholder:text-slate-400 dark:focus:bg-slate-700 dark:active:bg-slate-700 sm:text-sm"
+          className="focus:border-brand focus:ring-brand mx-auto mt-4 block w-full max-w-xl rounded-md border-slate-300 text-slate-700 shadow-sm dark:bg-slate-700 dark:text-slate-200 dark:placeholder:text-slate-400 dark:focus:bg-slate-700 dark:active:bg-slate-700 sm:text-sm"
           placeholder={element.frontend?.placeholder || ""}
           required={!!element.frontend?.required}
           {...register(element.name!)}
diff --git a/apps/formbricks-com/components/engine/Progressbar.tsx b/apps/formbricks-com/components/engine/Progressbar.tsx
index 5ef381e1c8..3e52a01d74 100644
--- a/apps/formbricks-com/components/engine/Progressbar.tsx
+++ b/apps/formbricks-com/components/engine/Progressbar.tsx
@@ -1,6 +1,6 @@
 export default function Progressbar({ progress }: { progress: number }) {
   return (
-    <div className="h-1.5 w-full rounded-full bg-gray-200 dark:bg-gray-700">
+    <div className="h-1.5 w-full rounded-full bg-slate-200 dark:bg-slate-700">
       <div
         className="h-1.5 rounded-full bg-slate-700 dark:bg-slate-300"
         style={{ width: `${Math.floor(progress * 100)}%` }}></div>
diff --git a/apps/formbricks-com/components/engine/Scale.tsx b/apps/formbricks-com/components/engine/Scale.tsx
index 7c3de87a02..429f885902 100644
--- a/apps/formbricks-com/components/engine/Scale.tsx
+++ b/apps/formbricks-com/components/engine/Scale.tsx
@@ -85,7 +85,7 @@ export default function Scale({
                   value={num}
                   className={({ checked, active }) =>
                     clsx(
-                      checked ? "border-transparent" : "border-gray-200 dark:border-slate-700",
+                      checked ? "border-transparent" : "border-slate-200 dark:border-slate-700",
                       active ? "border-brand ring-brand ring-2" : "",
                       "xs:rounded-lg relative flex cursor-pointer rounded-md border bg-white py-3 shadow-sm transition-all ease-in-out hover:scale-105 focus:outline-none dark:bg-slate-700 sm:p-4"
                     )
@@ -95,7 +95,7 @@ export default function Scale({
                       <div className="flex flex-1 flex-col justify-center">
                         <RadioGroup.Label
                           as="span"
-                          className="mx-auto text-sm font-medium text-gray-900 dark:text-gray-200">
+                          className="mx-auto text-sm font-medium text-slate-900 dark:text-slate-200">
                           {num}
                         </RadioGroup.Label>
                       </div>
@@ -120,7 +120,7 @@ export default function Scale({
                 </RadioGroup.Option>
               ))}
             </div>
-            <div className="xs:text-sm mt-2 flex justify-between  text-xs text-gray-700 dark:text-slate-400">
+            <div className="xs:text-sm mt-2 flex justify-between  text-xs text-slate-700 dark:text-slate-400">
               <p>{element.frontend.minLabel}</p>
               <p>{element.frontend.maxLabel}</p>
             </div>
diff --git a/apps/formbricks-com/components/engine/Textarea.tsx b/apps/formbricks-com/components/engine/Textarea.tsx
index 4d4eef0681..68caf9463c 100644
--- a/apps/formbricks-com/components/engine/Textarea.tsx
+++ b/apps/formbricks-com/components/engine/Textarea.tsx
@@ -32,7 +32,7 @@ export default function Textarea({
         </label>
         <textarea
           rows={element.frontend?.rows || 4}
-          className="focus:border-brand focus:ring-brand mx-auto mt-4 block w-full max-w-xl rounded-md border-gray-300 text-slate-700 shadow-sm dark:bg-slate-700 dark:text-slate-200 dark:placeholder:text-slate-400 sm:text-sm"
+          className="focus:border-brand focus:ring-brand mx-auto mt-4 block w-full max-w-xl rounded-md border-slate-300 text-slate-700 shadow-sm dark:bg-slate-700 dark:text-slate-200 dark:placeholder:text-slate-400 sm:text-sm"
           placeholder={element.frontend?.placeholder || ""}
           required={!!element.frontend?.required}
           {...register(element.name!)}
diff --git a/apps/formbricks-com/components/home/Features.tsx b/apps/formbricks-com/components/home/Features.tsx
index 066d624616..a404459e42 100644
--- a/apps/formbricks-com/components/home/Features.tsx
+++ b/apps/formbricks-com/components/home/Features.tsx
@@ -49,7 +49,7 @@ export default function Features() {
                 </h3>
                 <dl className="mt-1 flex flex-grow flex-col justify-between">
                   <dt className="sr-only">Description</dt>
-                  <dd className="text-sm text-gray-600 dark:text-slate-400">{feature.description}</dd>
+                  <dd className="text-sm text-slate-600 dark:text-slate-400">{feature.description}</dd>
                 </dl>
               </div>
             </li>
diff --git a/apps/formbricks-com/components/shared/CTA.tsx b/apps/formbricks-com/components/shared/CTA.tsx
index c4ad5ef9b7..f4b9434d4f 100644
--- a/apps/formbricks-com/components/shared/CTA.tsx
+++ b/apps/formbricks-com/components/shared/CTA.tsx
@@ -10,14 +10,14 @@ export default function CTA() {
         <HeadingCentered closer teaser="Get started" heading="Ready for the last form tool you need?" />
 
         <div className="mt-12 grid grid-cols-1 content-center md:grid-cols-2">
-          <div className="-mb-4 rounded-t-xl bg-gradient-to-br from-slate-300 to-slate-200 px-8 py-24  text-center text-gray-900 dark:from-slate-800 dark:to-slate-900 dark:text-gray-100 md:mb-0 md:ml-2.5 md:-mr-5 md:rounded-l-xl lg:p-24">
+          <div className="-mb-4 rounded-t-xl bg-gradient-to-br from-slate-300 to-slate-200 px-8 py-24  text-center text-slate-900 dark:from-slate-800 dark:to-slate-900 dark:text-slate-100 md:mb-0 md:ml-2.5 md:-mr-5 md:rounded-l-xl lg:p-24">
             <h3 className="text-3xl font-bold">Self-hosted</h3>
             <p className="mt-2 mb-4">Run locally e.g. with docker-compose.</p>
             <Button variant="secondary" onClick={() => router.push("/docs")} className="mt-3">
               Read docs
             </Button>
           </div>
-          <div className="rounded-xl bg-gradient-to-br from-slate-400 to-slate-300 py-24 text-center text-gray-800 dark:from-slate-800 dark:to-slate-700 dark:text-gray-100">
+          <div className="rounded-xl bg-gradient-to-br from-slate-400 to-slate-300 py-24 text-center text-slate-800 dark:from-slate-800 dark:to-slate-700 dark:text-slate-100">
             <h3 className="text-3xl font-bold">Cloud</h3>
             <p className="mt-2 mb-4">Use our free managed service.</p>
             <Button variant="secondary" onClick={() => router.push("/waitlist")} className="mt-3" disabled>
diff --git a/apps/formbricks-com/components/shared/Footer.tsx b/apps/formbricks-com/components/shared/Footer.tsx
index c35e974b5f..f0f27d4678 100644
--- a/apps/formbricks-com/components/shared/Footer.tsx
+++ b/apps/formbricks-com/components/shared/Footer.tsx
@@ -64,8 +64,8 @@ export default function Footer() {
           <FooterLogo className="mx-auto h-8 w-auto sm:h-10" />
         </Link>
         <p className="text-base text-slate-500 dark:text-slate-400">Experience Management for B2B SaaS</p>
-        <div className="border-gray-500">
-          <p className="text-sm text-slate-400 dark:text-gray-500">
+        <div className="border-slate-500">
+          <p className="text-sm text-slate-400 dark:text-slate-500">
             &copy; 2022. All rights reserved.
             <br />
             <Link href="/imprint">Imprint</Link> | <Link href="/privacy">Privacy Policy</Link> |{" "}
@@ -74,7 +74,7 @@ export default function Footer() {
         </div>
         <div className="flex justify-center space-x-6">
           {navigation.social.map((item) => (
-            <Link key={item.name} href={item.href} className="text-slate-400 hover:text-gray-500">
+            <Link key={item.name} href={item.href} className="text-slate-400 hover:text-slate-500">
               <span className="sr-only">{item.name}</span>
               <item.icon className="h-6 w-6" aria-hidden="true" />
             </Link>
diff --git a/apps/formbricks-com/components/shared/Header.tsx b/apps/formbricks-com/components/shared/Header.tsx
index 5c2a9aec23..e7f81a7f0f 100644
--- a/apps/formbricks-com/components/shared/Header.tsx
+++ b/apps/formbricks-com/components/shared/Header.tsx
@@ -19,7 +19,7 @@ export default function Header() {
           </Link>
         </div>
         <div className="-my-2 -mr-2 md:hidden">
-          <Popover.Button className="inline-flex items-center justify-center rounded-md bg-gray-100 p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-500 dark:bg-slate-700 dark:text-slate-200">
+          <Popover.Button className="inline-flex items-center justify-center rounded-md bg-slate-100 p-2 text-slate-400 hover:bg-slate-100 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-500 dark:bg-slate-700 dark:text-slate-200">
             <span className="sr-only">Open menu</span>
             <Bars3Icon className="h-6 w-6" aria-hidden="true" />
           </Popover.Button>
@@ -55,14 +55,14 @@ export default function Header() {
         <Popover.Panel
           focus
           className="absolute inset-x-0 top-0 z-20 origin-top-right transform p-2 transition md:hidden">
-          <div className="dark:divide-slate divide-y-2 divide-gray-100 rounded-lg bg-gray-200 shadow-lg ring-1 ring-black ring-opacity-5 dark:divide-gray-700 dark:bg-slate-800">
+          <div className="dark:divide-slate divide-y-2 divide-slate-100 rounded-lg bg-slate-200 shadow-lg ring-1 ring-black ring-opacity-5 dark:divide-slate-700 dark:bg-slate-800">
             <div className="px-5 pt-5 pb-6">
               <div className="flex items-center justify-between">
                 <div>
                   <FooterLogo className="h-8 w-auto" />
                 </div>
                 <div className="-mr-2">
-                  <Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-500 dark:bg-slate-700 dark:text-slate-200">
+                  <Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-slate-400 hover:bg-slate-100 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-500 dark:bg-slate-700 dark:text-slate-200">
                     <span className="sr-only">Close menu</span>
                     <XMarkIcon className="h-6 w-6" aria-hidden="true" />
                   </Popover.Button>
diff --git a/apps/formbricks-com/components/shared/HeaderPMF.tsx b/apps/formbricks-com/components/shared/HeaderPMF.tsx
index 994a4d9e4f..ec8fe48e8c 100644
--- a/apps/formbricks-com/components/shared/HeaderPMF.tsx
+++ b/apps/formbricks-com/components/shared/HeaderPMF.tsx
@@ -19,7 +19,7 @@ export default function Header() {
           </Link>
         </div>
         <div className="-my-2 -mr-2 md:hidden">
-          <Popover.Button className="inline-flex items-center justify-center rounded-md bg-gray-100 p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-500 dark:bg-slate-700 dark:text-slate-200">
+          <Popover.Button className="inline-flex items-center justify-center rounded-md bg-slate-100 p-2 text-slate-400 hover:bg-slate-100 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-500 dark:bg-slate-700 dark:text-slate-200">
             <span className="sr-only">Open menu</span>
             <Bars3Icon className="h-6 w-6" aria-hidden="true" />
           </Popover.Button>
@@ -62,14 +62,14 @@ export default function Header() {
         <Popover.Panel
           focus
           className="absolute inset-x-0 top-0 z-20 origin-top-right transform p-2 transition md:hidden">
-          <div className="dark:divide-slate divide-y-2 divide-gray-100 rounded-lg bg-gray-200 shadow-lg ring-1 ring-black ring-opacity-5 dark:divide-gray-700 dark:bg-slate-800">
+          <div className="dark:divide-slate divide-y-2 divide-slate-100 rounded-lg bg-slate-200 shadow-lg ring-1 ring-black ring-opacity-5 dark:divide-slate-700 dark:bg-slate-800">
             <div className="px-5 pt-5 pb-6">
               <div className="flex items-center justify-between">
                 <div>
                   <FooterLogo className="h-8 w-auto" />
                 </div>
                 <div className="-mr-2">
-                  <Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-500 dark:bg-slate-700 dark:text-slate-200">
+                  <Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-slate-400 hover:bg-slate-100 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-500 dark:bg-slate-700 dark:text-slate-200">
                     <span className="sr-only">Close menu</span>
                     <XMarkIcon className="h-6 w-6" aria-hidden="true" />
                   </Popover.Button>
diff --git a/apps/formbricks-com/components/shared/HeaderWithMenu.tsx b/apps/formbricks-com/components/shared/HeaderWithMenu.tsx
index 0b41b9e446..10a246c88a 100644
--- a/apps/formbricks-com/components/shared/HeaderWithMenu.tsx
+++ b/apps/formbricks-com/components/shared/HeaderWithMenu.tsx
@@ -107,7 +107,7 @@ export default function Header() {
           </Link>
         </div>
         <div className="-my-2 -mr-2 md:hidden">
-          <Popover.Button className="inline-flex items-center justify-center rounded-md bg-gray-100 p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-500 dark:bg-slate-700 dark:text-slate-200">
+          <Popover.Button className="inline-flex items-center justify-center rounded-md bg-slate-100 p-2 text-slate-400 hover:bg-slate-100 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-500 dark:bg-slate-700 dark:text-slate-200">
             <span className="sr-only">Open menu</span>
             <Bars3Icon className="h-6 w-6" aria-hidden="true" />
           </Popover.Button>
@@ -294,23 +294,23 @@ export default function Header() {
         <Popover.Panel
           focus
           className="absolute inset-x-0 top-0 z-20 origin-top-right transform p-2 transition md:hidden">
-          <div className="dark:divide-slate divide-y-2 divide-gray-100 rounded-lg bg-gray-200 shadow-lg ring-1 ring-black ring-opacity-5 dark:divide-gray-700 dark:bg-slate-800">
+          <div className="dark:divide-slate divide-y-2 divide-slate-100 rounded-lg bg-slate-200 shadow-lg ring-1 ring-black ring-opacity-5 dark:divide-slate-700 dark:bg-slate-800">
             <div className="px-5 pt-5 pb-6">
               <div className="flex items-center justify-between">
                 <div>
                   <FooterLogo className="h-8 w-auto" />
                 </div>
                 <div className="-mr-2">
-                  <Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-500 dark:bg-slate-700 dark:text-slate-200">
+                  <Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-slate-400 hover:bg-slate-100 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-500 dark:bg-slate-700 dark:text-slate-200">
                     <span className="sr-only">Close menu</span>
                     <XMarkIcon className="h-6 w-6" aria-hidden="true" />
                   </Popover.Button>
                 </div>
               </div>
 
-              <nav className="relative bg-gray-200 px-5 py-6 dark:bg-slate-800">
+              <nav className="relative bg-slate-200 px-5 py-6 dark:bg-slate-800">
                 <div>
-                  <h4 className="mb-3 text-sm text-gray-900 dark:text-gray-300">Survey Creation</h4>
+                  <h4 className="mb-3 text-sm text-slate-900 dark:text-slate-300">Survey Creation</h4>
                   {creation.map((brick) => (
                     <Link
                       key={brick.name}
@@ -330,8 +330,8 @@ export default function Header() {
                         <p
                           className={clsx(
                             brick.status
-                              ? "text-gray-900 dark:text-gray-200"
-                              : "text-gray-400 dark:text-gray-500",
+                              ? "text-slate-900 dark:text-slate-200"
+                              : "text-slate-400 dark:text-slate-500",
                             "text-lg font-semibold"
                           )}>
                           {brick.name}
@@ -339,8 +339,8 @@ export default function Header() {
                         <p
                           className={clsx(
                             brick.status
-                              ? "text-gray-900 dark:text-gray-400"
-                              : "text-gray-400 dark:text-gray-600",
+                              ? "text-slate-900 dark:text-slate-400"
+                              : "text-slate-400 dark:text-slate-600",
                             "text-sm"
                           )}>
                           {brick.description}
@@ -350,7 +350,7 @@ export default function Header() {
                   ))}
                 </div>
                 <div>
-                  <h4 className="mt-8 mb-3 text-sm text-gray-900 dark:text-gray-300">Data Pipelines</h4>
+                  <h4 className="mt-8 mb-3 text-sm text-slate-900 dark:text-slate-300">Data Pipelines</h4>
                   {pipes.map((brick) => (
                     <Link
                       key={brick.name}
@@ -370,8 +370,8 @@ export default function Header() {
                         <p
                           className={clsx(
                             brick.status
-                              ? "text-gray-900 dark:text-gray-200"
-                              : "text-gray-400 dark:text-gray-500",
+                              ? "text-slate-900 dark:text-slate-200"
+                              : "text-slate-400 dark:text-slate-500",
                             "text-lg font-semibold"
                           )}>
                           {brick.name}
@@ -379,8 +379,8 @@ export default function Header() {
                         <p
                           className={clsx(
                             brick.status
-                              ? "text-gray-900 dark:text-gray-400"
-                              : "text-gray-400 dark:text-gray-600",
+                              ? "text-slate-900 dark:text-slate-400"
+                              : "text-slate-400 dark:text-slate-600",
                             "text-sm"
                           )}>
                           {brick.description}
@@ -390,7 +390,7 @@ export default function Header() {
                   ))}
                 </div>
                 <div>
-                  <h4 className="mt-8 mb-3 text-sm text-gray-900 dark:text-gray-300">Data Insights</h4>
+                  <h4 className="mt-8 mb-3 text-sm text-slate-900 dark:text-slate-300">Data Insights</h4>
                   {insights.map((brick) => (
                     <Link
                       key={brick.name}
@@ -410,8 +410,8 @@ export default function Header() {
                         <p
                           className={clsx(
                             brick.status
-                              ? "text-gray-900 dark:text-gray-200"
-                              : "text-gray-400 dark:text-gray-500",
+                              ? "text-slate-900 dark:text-slate-200"
+                              : "text-slate-400 dark:text-slate-500",
                             "text-lg font-semibold"
                           )}>
                           {brick.name}
@@ -419,8 +419,8 @@ export default function Header() {
                         <p
                           className={clsx(
                             brick.status
-                              ? "text-gray-900 dark:text-gray-400"
-                              : "text-gray-400 dark:text-gray-600",
+                              ? "text-slate-900 dark:text-slate-400"
+                              : "text-slate-400 dark:text-slate-600",
                             "text-sm"
                           )}>
                           {brick.description}
@@ -432,7 +432,7 @@ export default function Header() {
               </nav>
             </div>
             <div className="px-5 py-6">
-              <div className="grid grid-cols-3 text-center text-sm font-medium text-gray-900 hover:text-gray-700 dark:text-slate-200 sm:text-base">
+              <div className="grid grid-cols-3 text-center text-sm font-medium text-slate-900 hover:text-slate-700 dark:text-slate-200 sm:text-base">
                 <Link href="/community">Community</Link>
 
                 <Link href="/blog">Blog</Link>
diff --git a/apps/formbricks-com/components/shared/LayoutMdx.tsx b/apps/formbricks-com/components/shared/LayoutMdx.tsx
index 55d43b76e0..0ee8cfd2ff 100644
--- a/apps/formbricks-com/components/shared/LayoutMdx.tsx
+++ b/apps/formbricks-com/components/shared/LayoutMdx.tsx
@@ -23,7 +23,7 @@ export default function LayoutMdx({ meta, children }: Props) {
           {meta.title && (
             <header className="mb-9 space-y-1">
               {meta.title && (
-                <h1 className="font-display text-3xl tracking-tight text-slate-800 dark:text-gray-100">
+                <h1 className="font-display text-3xl tracking-tight text-slate-800 dark:text-slate-100">
                   {meta.title}
                 </h1>
               )}
diff --git a/apps/formbricks-com/components/shared/MdxCTA.tsx b/apps/formbricks-com/components/shared/MdxCTA.tsx
index 7737c01183..c917121333 100644
--- a/apps/formbricks-com/components/shared/MdxCTA.tsx
+++ b/apps/formbricks-com/components/shared/MdxCTA.tsx
@@ -14,14 +14,14 @@ export default function CTA() {
           Try Formbricks right now!
         </p>
         <div className="mt-12 grid grid-cols-1 content-center md:grid-cols-2">
-          <div className="-mb-2 rounded-t-xl bg-gradient-to-br from-slate-300 to-slate-200 text-center text-gray-900 dark:from-slate-800 dark:to-slate-900 dark:text-slate-200 md:mb-0 md:ml-2.5 md:-mr-5 md:rounded-l-xl">
+          <div className="-mb-2 rounded-t-xl bg-gradient-to-br from-slate-300 to-slate-200 text-center text-slate-900 dark:from-slate-800 dark:to-slate-900 dark:text-slate-200 md:mb-0 md:ml-2.5 md:-mr-5 md:rounded-l-xl">
             <h3 className="text-3xl font-bold">Self-hosted</h3>
             <p className="mt-2 mb-4 dark:text-slate-400">Run locally with docker-compose.</p>
             <Button variant="secondary" onClick={() => router.push("/docs")} className="mt-3 mb-8 md:mb-0">
               Read docs
             </Button>
           </div>
-          <div className="rounded-xl bg-gradient-to-br from-slate-400 to-slate-300 pb-10 text-center text-gray-800 dark:from-slate-800 dark:to-slate-700 dark:text-slate-200">
+          <div className="rounded-xl bg-gradient-to-br from-slate-400 to-slate-300 pb-10 text-center text-slate-800 dark:from-slate-800 dark:to-slate-700 dark:text-slate-200">
             <h3 className="text-3xl font-bold">Cloud</h3>
             <p className="mt-2 mb-4 dark:text-slate-400">Use our free managed service.</p>
             <Button variant="secondary" onClick={() => router.push("/waitlist")} className="mt-3">
diff --git a/apps/formbricks-com/components/shared/PricingPmf.tsx b/apps/formbricks-com/components/shared/PricingPmf.tsx
index 0578bf9a80..fb72340982 100644
--- a/apps/formbricks-com/components/shared/PricingPmf.tsx
+++ b/apps/formbricks-com/components/shared/PricingPmf.tsx
@@ -61,7 +61,9 @@ export default function PricingPmf() {
                 <p
                   className={clsx(
                     "mt-4 whitespace-pre-wrap text-sm",
-                    tier.highlight ? "text-gray-600 dark:text-slate-300" : "text-gray-500 dark:text-slate-300"
+                    tier.highlight
+                      ? "text-slate-600 dark:text-slate-300"
+                      : "text-slate-500 dark:text-slate-300"
                   )}>
                   {tier.description}
                 </p>
@@ -83,8 +85,8 @@ export default function PricingPmf() {
                     className={clsx(
                       "text-base font-medium",
                       tier.highlight
-                        ? "text-gray-500 dark:text-slate-400"
-                        : "text-gray-400 dark:text-slate-500"
+                        ? "text-slate-500 dark:text-slate-400"
+                        : "text-slate-400 dark:text-slate-500"
                     )}>
                     {tier.paymentRythm}
                   </span>
diff --git a/apps/formbricks-com/components/shared/TryItCTA.tsx b/apps/formbricks-com/components/shared/TryItCTA.tsx
index 078ac2db88..dc69e9319e 100644
--- a/apps/formbricks-com/components/shared/TryItCTA.tsx
+++ b/apps/formbricks-com/components/shared/TryItCTA.tsx
@@ -26,7 +26,7 @@ export default function HeadingCentered() {
         </Button>
       </div>
       <div className="flex items-center">
-        <div className="flex h-20 w-full items-center justify-between rounded-lg bg-slate-800 px-8 text-gray-100 ">
+        <div className="flex h-20 w-full items-center justify-between rounded-lg bg-slate-800 px-8 text-slate-100 ">
           <p>npm install @formbricks/react</p>
           <button onClick={() => navigator.clipboard.writeText("npm install @formbricks/react")}>
             <DocumentDuplicateIcon className="h-8 w-8" />
diff --git a/apps/formbricks-com/pages/blog/weekly-update-021222/index.mdx b/apps/formbricks-com/pages/blog/weekly-update-021222/index.mdx
index c30d5fd02e..e53897e96c 100644
--- a/apps/formbricks-com/pages/blog/weekly-update-021222/index.mdx
+++ b/apps/formbricks-com/pages/blog/weekly-update-021222/index.mdx
@@ -58,15 +58,15 @@ import { Form, Radio, Submit, sendToHq, Textarea } from "@formbricks/react";
   <Radio
     name="evaluate"
     label="Evaluate the online course you just completed"
-    legendClassName="mb-3 font-bold text-gray-800 text-xl"
-    labelClassName="font-regular text-gray-500 text-lg"
+    legendClassName="mb-3 font-bold text-slate-800 text-xl"
+    labelClassName="font-regular text-slate-500 text-lg"
     options={["Perfect", "Very satisfactory", "Satisfactory", "Not very satisfactory", "Useless"]}
   />
   <Textarea
     name="feedback"
     label="Would you like to send us a comment, an opinion, a correction?"
     help="Only you and us can see your answer."
-    labelClassName="font-bold text-gray-800 text-xl"
+    labelClassName="font-bold text-slate-800 text-xl"
     innerClassName="mt-3"
     cols={50}
     rows={4}
@@ -105,10 +105,10 @@ import { Bar } from "@formbricks/charts";
 
 ...
 
-<h2 className="mx-auto mb-3 text-lg font-bold text-gray-800">
+<h2 className="mx-auto mb-3 text-lg font-bold text-slate-800">
   Thanks a lot for your feedback
 </h2>
-<p className="mb-5 text-lg text-gray-500">
+<p className="mb-5 text-lg text-slate-500">
   Here you can see what other people answered.
 </p>
 
diff --git a/apps/formbricks-com/pages/docs/react-form-library/input-checkbox/index.mdx b/apps/formbricks-com/pages/docs/react-form-library/input-checkbox/index.mdx
index 4e4917a40f..8dd9788f33 100644
--- a/apps/formbricks-com/pages/docs/react-form-library/input-checkbox/index.mdx
+++ b/apps/formbricks-com/pages/docs/react-form-library/input-checkbox/index.mdx
@@ -141,7 +141,7 @@ You can also use Tailwind to extend the classes, like so:
   help="Take what you like"
   options={["Pineapple", "Ananas", "Piña"]}
   legendClassName="font-bold"
-  optionClassName="bg-gray rounded-sm"
+  optionClassName="bg-slate rounded-sm"
 />
 ```
 
diff --git a/apps/formbricks-com/pages/docs/react-form-library/input-email/index.mdx b/apps/formbricks-com/pages/docs/react-form-library/input-email/index.mdx
index dd5791e9f5..a417e9db9f 100644
--- a/apps/formbricks-com/pages/docs/react-form-library/input-email/index.mdx
+++ b/apps/formbricks-com/pages/docs/react-form-library/input-email/index.mdx
@@ -75,7 +75,7 @@ You can style your email field with adding CSS to the section classes. This is h
 You can also use Tailwind to extend the classes, like so:
 
 ```jsx
-<Email name="email" label="What's your email?" inputClassName="bg-gray-800 my-5" />
+<Email name="email" label="What's your email?" inputClassName="bg-slate-800 my-5" />
 ```
 
 Here are the in-depth guides for [CSS](/docs/react-form-library/style-css) or [Tailwind](/docs/react-form-library/style-tailwind).
diff --git a/apps/formbricks-com/pages/docs/react-form-library/input-password/index.mdx b/apps/formbricks-com/pages/docs/react-form-library/input-password/index.mdx
index bcaec5f991..b8519d6cbe 100644
--- a/apps/formbricks-com/pages/docs/react-form-library/input-password/index.mdx
+++ b/apps/formbricks-com/pages/docs/react-form-library/input-password/index.mdx
@@ -83,7 +83,7 @@ You can style your field with adding CSS to the pre-assigned classes. This is ho
 You can also use Tailwind to extend the classes, like so:
 
 ```jsx
-<Password name="password" label="Password" validation="required" outerClassName="bg-gray-800" />
+<Password name="password" label="Password" validation="required" outerClassName="bg-slate-800" />
 ```
 
 Here are the in-depth guides for [CSS](/docs/react-form-library/style-css) or [Tailwind](/docs/react-form-library/style-tailwind).
diff --git a/apps/formbricks-com/pages/docs/react-form-library/input-phone/index.mdx b/apps/formbricks-com/pages/docs/react-form-library/input-phone/index.mdx
index 20da666b18..704af3f32e 100644
--- a/apps/formbricks-com/pages/docs/react-form-library/input-phone/index.mdx
+++ b/apps/formbricks-com/pages/docs/react-form-library/input-phone/index.mdx
@@ -77,7 +77,7 @@ You can style your field with adding CSS to the pre-assigned classes. This is ho
 You can also use Tailwind to extend the classes, like so:
 
 ```jsx
-<Phone name="phone" label="Phone" outerClassName="bg-gray-800" />
+<Phone name="phone" label="Phone" outerClassName="bg-slate-800" />
 ```
 
 Here are the in-depth guides for [CSS](/docs/react-form-library/style-css) or [Tailwind](/docs/react-form-library/style-tailwind).
diff --git a/apps/formbricks-com/pages/docs/react-form-library/input-radio/index.mdx b/apps/formbricks-com/pages/docs/react-form-library/input-radio/index.mdx
index 8e046fd31b..fb9eb818be 100644
--- a/apps/formbricks-com/pages/docs/react-form-library/input-radio/index.mdx
+++ b/apps/formbricks-com/pages/docs/react-form-library/input-radio/index.mdx
@@ -163,7 +163,7 @@ You can also use Tailwind to extend the classes, like so:
   help="Only choose one"
   options={["Sushi", "Pasta", "Pizza"]}
   legendClassName="font-bold"
-  optionClassName="bg-gray rounded-sm"
+  optionClassName="bg-slate rounded-sm"
 />
 ```
 
diff --git a/apps/formbricks-com/pages/docs/react-form-library/input-search/index.mdx b/apps/formbricks-com/pages/docs/react-form-library/input-search/index.mdx
index 4eb6b77a41..2d7326f73c 100644
--- a/apps/formbricks-com/pages/docs/react-form-library/input-search/index.mdx
+++ b/apps/formbricks-com/pages/docs/react-form-library/input-search/index.mdx
@@ -81,7 +81,7 @@ You can also use Tailwind to extend the classes, like so:
   name="search"
   placeholder="Search..."
   label="Search"
-  innerClassName="border-gray-700 border-2 rounded-full"
+  innerClassName="border-slate-700 border-2 rounded-full"
 />
 ```
 
diff --git a/apps/formbricks-com/pages/docs/react-form-library/input-text/index.mdx b/apps/formbricks-com/pages/docs/react-form-library/input-text/index.mdx
index a2e4db8350..06ac5c3f96 100644
--- a/apps/formbricks-com/pages/docs/react-form-library/input-text/index.mdx
+++ b/apps/formbricks-com/pages/docs/react-form-library/input-text/index.mdx
@@ -77,7 +77,7 @@ You can style your field with adding CSS to the pre-assigned classes. This is ho
 You can also use Tailwind to extend the classes, like so:
 
 ```jsx
-<Text name="firstname" label="What's your first name?" outerClassName="bg-gray-800 my-5" />
+<Text name="firstname" label="What's your first name?" outerClassName="bg-slate-800 my-5" />
 ```
 
 Here are the in-depth guides for [CSS](/docs/react-form-library/style-css) or [Tailwind](/docs/react-form-library/style-tailwind).
diff --git a/apps/formbricks-com/pages/docs/react-form-library/input-textarea/index.mdx b/apps/formbricks-com/pages/docs/react-form-library/input-textarea/index.mdx
index bbc76d7bda..95f155cb39 100644
--- a/apps/formbricks-com/pages/docs/react-form-library/input-textarea/index.mdx
+++ b/apps/formbricks-com/pages/docs/react-form-library/input-textarea/index.mdx
@@ -84,7 +84,7 @@ You can style your field with adding CSS to the pre-assigned classes. This is ho
 You can also use Tailwind to extend the classes, like so:
 
 ```jsx
-<Text name="firstname" label="What's your first name?" outerClassName="bg-gray-800 my-5" />
+<Text name="firstname" label="What's your first name?" outerClassName="bg-slate-800 my-5" />
 ```
 
 Here are the in-depth guides for [CSS](/docs/react-form-library/style-css) or [Tailwind](/docs/react-form-library/style-tailwind).
diff --git a/apps/formbricks-com/pages/docs/react-form-library/input-url/index.mdx b/apps/formbricks-com/pages/docs/react-form-library/input-url/index.mdx
index f4d82d68e1..6272744033 100644
--- a/apps/formbricks-com/pages/docs/react-form-library/input-url/index.mdx
+++ b/apps/formbricks-com/pages/docs/react-form-library/input-url/index.mdx
@@ -75,7 +75,7 @@ You can style your field with adding CSS to the pre-assigned classes. This is ho
 You can also use Tailwind to extend the classes, like so:
 
 ```jsx
-<URL name="url" label="Company website" outerClassName="bg-gray-800 my-5" />
+<URL name="url" label="Company website" outerClassName="bg-slate-800 my-5" />
 ```
 
 Here are the in-depth guides for [CSS](/docs/react-form-library/style-css) or [Tailwind](/docs/react-form-library/style-tailwind).
diff --git a/apps/formbricks-com/pages/docs/react-form-library/style-tailwind/index.mdx b/apps/formbricks-com/pages/docs/react-form-library/style-tailwind/index.mdx
index 58d6eb3912..6555daf019 100644
--- a/apps/formbricks-com/pages/docs/react-form-library/style-tailwind/index.mdx
+++ b/apps/formbricks-com/pages/docs/react-form-library/style-tailwind/index.mdx
@@ -9,7 +9,7 @@ export const meta = {
 We love Tailwind! This is why Formbricks React natively supports Tailwind. All you have to do is target the classes using props. For example, to extend “formbricks-outer” class:
 
 ```jsx
-<Text name="firstname" label="What's your first name?" outerClassName="bg-gray-800 my-5" />
+<Text name="firstname" label="What's your first name?" outerClassName="bg-slate-800 my-5" />
 ```
 
 ### Overview of props to target CSS classes
diff --git a/apps/formbricks-com/pages/docs/react-form-library/validation-errors/index.mdx b/apps/formbricks-com/pages/docs/react-form-library/validation-errors/index.mdx
index da09002932..90c4f48538 100644
--- a/apps/formbricks-com/pages/docs/react-form-library/validation-errors/index.mdx
+++ b/apps/formbricks-com/pages/docs/react-form-library/validation-errors/index.mdx
@@ -67,7 +67,7 @@ to style the message wrapper and the message itself:
 <Text
   name="email"
   label="Email"
-  messagesClassName="bg-gray-100 rounded"
+  messagesClassName="bg-slate-100 rounded"
   messageClassName="text-base sm:text-sm text-red-500"
 />
 ```
diff --git a/apps/web/src/components/AnalyticsCard.tsx b/apps/web/src/components/AnalyticsCard.tsx
index 4c5d5d0e7b..e5ce2825b7 100644
--- a/apps/web/src/components/AnalyticsCard.tsx
+++ b/apps/web/src/components/AnalyticsCard.tsx
@@ -17,13 +17,13 @@ const AnalyticsCard: React.FC<Props> = ({ value, label, toolTipText, trend, smal
   return (
     <div className="rounded-md bg-white shadow-md">
       <div key={label} className="px-4 py-5 sm:p-6">
-        <dt className="has-tooltip inline-flex text-base font-normal text-gray-900">
+        <dt className="has-tooltip inline-flex text-base font-normal text-slate-900">
           {label}{" "}
           {toolTipText && (
-            <QuestionMarkCircleIcon className="text-red hover:text-ui-gray-dark ml-1 h-4 w-4" />
+            <QuestionMarkCircleIcon className="text-red hover:text-ui-slate-dark ml-1 h-4 w-4" />
           )}
           {toolTipText && (
-            <span className="tooltip -mt-6 -ml-8 flex grow rounded bg-gray-600 p-1 px-4 text-center text-xs text-white shadow-lg">
+            <span className="tooltip -mt-6 -ml-8 flex grow rounded bg-slate-600 p-1 px-4 text-center text-xs text-white shadow-lg">
               {toolTipText}
             </span>
           )}
@@ -32,7 +32,7 @@ const AnalyticsCard: React.FC<Props> = ({ value, label, toolTipText, trend, smal
           <div
             className={clsx(
               smallerText ? "text-lg" : "text-xl",
-              "flex items-baseline text-xl font-semibold text-gray-800"
+              "flex items-baseline text-xl font-semibold text-slate-800"
             )}>
             {value}
           </div>
diff --git a/apps/web/src/components/Modal.tsx b/apps/web/src/components/Modal.tsx
index ca9c4043ec..491e78ddce 100644
--- a/apps/web/src/components/Modal.tsx
+++ b/apps/web/src/components/Modal.tsx
@@ -15,7 +15,7 @@ export default function Modal({ open, setOpen, children }) {
           leave="ease-in duration-200"
           leaveFrom="opacity-100"
           leaveTo="opacity-0">
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+          <div className="fixed inset-0 bg-slate-500 bg-opacity-75 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -32,7 +32,7 @@ export default function Modal({ open, setOpen, children }) {
                 <div className="absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
                   <button
                     type="button"
-                    className="focus:ring-brand rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2"
+                    className="focus:ring-brand rounded-md bg-white text-slate-400 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-offset-2"
                     onClick={() => setOpen(false)}>
                     <span className="sr-only">Close</span>
                     <XMarkIcon className="h-6 w-6" aria-hidden="true" />
diff --git a/apps/web/src/components/TabNavigation.tsx b/apps/web/src/components/TabNavigation.tsx
index e650d52f04..e0715e3bca 100644
--- a/apps/web/src/components/TabNavigation.tsx
+++ b/apps/web/src/components/TabNavigation.tsx
@@ -11,7 +11,7 @@ export default function TabNavigation({ tabs, currentTab, setCurrentTab }) {
         <select
           id="tabs"
           name="tabs"
-          className="block w-full rounded-md border-gray-300 focus:border-teal-500 focus:ring-teal-500"
+          className="block w-full rounded-md border-slate-300 focus:border-teal-500 focus:ring-teal-500"
           onChange={(e) => setCurrentTab(e.target.value)}
           defaultValue={currentTab}>
           {tabs.map((tab) => (
@@ -20,7 +20,7 @@ export default function TabNavigation({ tabs, currentTab, setCurrentTab }) {
         </select>
       </div>
       <div className="hidden sm:block">
-        <div className="border-b border-gray-200">
+        <div className="border-b border-slate-200">
           <nav className="-mb-px flex space-x-8" aria-label="Tabs">
             {tabs.map((tab) => (
               <button
@@ -29,13 +29,13 @@ export default function TabNavigation({ tabs, currentTab, setCurrentTab }) {
                 className={clsx(
                   tab.name === currentTab
                     ? "border-teal-500 text-teal-600"
-                    : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700",
+                    : "border-transparent text-slate-500 hover:border-slate-300 hover:text-slate-700",
                   "group inline-flex items-center border-b-2 py-4 px-1 text-sm font-medium"
                 )}
                 aria-current={currentTab === tab.name ? "page" : undefined}>
                 <tab.icon
                   className={clsx(
-                    tab.name === currentTab ? "text-teal-500" : "text-gray-400 group-hover:text-gray-500",
+                    tab.name === currentTab ? "text-teal-500" : "text-slate-400 group-hover:text-slate-500",
                     "-ml-0.5 mr-2 h-5 w-5"
                   )}
                   aria-hidden="true"
diff --git a/apps/web/src/components/UpgradeModal.tsx b/apps/web/src/components/UpgradeModal.tsx
index 4e63f32837..6b4e3021cf 100644
--- a/apps/web/src/components/UpgradeModal.tsx
+++ b/apps/web/src/components/UpgradeModal.tsx
@@ -5,8 +5,8 @@ export default function UpgradeModal({ open, setOpen, organisationId }) {
   return (
     <Modal open={open} setOpen={setOpen}>
       <div className="my-6 sm:flex-auto">
-        <h1 className="text-xl font-semibold text-gray-900">Upgrade to benefit from all features</h1>
-        <p className="mt-2 text-sm text-gray-700">
+        <h1 className="text-xl font-semibold text-slate-900">Upgrade to benefit from all features</h1>
+        <p className="mt-2 text-sm text-slate-700">
           You do not currently have an active subscription. Upgrade to get access to all features and improve
           your user research.
         </p>
diff --git a/apps/web/src/components/auth/PasswordResetForm.tsx b/apps/web/src/components/auth/PasswordResetForm.tsx
index 739d6dfb13..c45fe21803 100644
--- a/apps/web/src/components/auth/PasswordResetForm.tsx
+++ b/apps/web/src/components/auth/PasswordResetForm.tsx
@@ -49,7 +49,7 @@ export const PasswordResetForm = ({}) => {
               type="email"
               autoComplete="email"
               required
-              className="focus:border-brand focus:ring-brand block w-full rounded-md border-gray-300 shadow-sm sm:text-sm"
+              className="focus:border-brand focus:ring-brand block w-full rounded-md border-slate-300 shadow-sm sm:text-sm"
             />
           </div>
         </div>
diff --git a/apps/web/src/components/auth/ResetPasswordForm.tsx b/apps/web/src/components/auth/ResetPasswordForm.tsx
index 14e9cc5347..125cea6510 100644
--- a/apps/web/src/components/auth/ResetPasswordForm.tsx
+++ b/apps/web/src/components/auth/ResetPasswordForm.tsx
@@ -49,7 +49,7 @@ export const ResetPasswordForm = ({ token }) => {
               name="password"
               type="password"
               required
-              className="focus:border-brand focus:ring-brand block w-full rounded-md border-gray-300 shadow-sm sm:text-sm"
+              className="focus:border-brand focus:ring-brand block w-full rounded-md border-slate-300 shadow-sm sm:text-sm"
             />
           </div>
         </div>
diff --git a/apps/web/src/components/auth/SigninForm.tsx b/apps/web/src/components/auth/SigninForm.tsx
index 00a7c50e97..097005c82a 100644
--- a/apps/web/src/components/auth/SigninForm.tsx
+++ b/apps/web/src/components/auth/SigninForm.tsx
@@ -45,7 +45,7 @@ export const SigninForm = ({ callbackUrl, error }) => {
               type="email"
               autoComplete="email"
               required
-              className="focus:border-brand focus:ring-brand block w-full rounded-md border-gray-300 shadow-sm sm:text-sm"
+              className="focus:border-brand focus:ring-brand block w-full rounded-md border-slate-300 shadow-sm sm:text-sm"
             />
           </div>
         </div>
@@ -60,7 +60,7 @@ export const SigninForm = ({ callbackUrl, error }) => {
               type="password"
               autoComplete="current-password"
               required
-              className="focus:border-brand focus:ring-brand block w-full rounded-md border-gray-300 shadow-sm sm:text-sm"
+              className="focus:border-brand focus:ring-brand block w-full rounded-md border-slate-300 shadow-sm sm:text-sm"
             />
           </div>
         </div>
@@ -83,10 +83,10 @@ export const SigninForm = ({ callbackUrl, error }) => {
           <>
             <div className="relative">
               <div className="absolute inset-0 flex items-center" aria-hidden="true">
-                <div className="w-full border-t border-gray-300" />
+                <div className="w-full border-t border-slate-300" />
               </div>
               <div className="relative flex justify-center">
-                <span className="bg-white px-2 text-sm text-gray-500">Sign in with</span>
+                <span className="bg-white px-2 text-sm text-slate-500">Sign in with</span>
               </div>
             </div>
             <GithubButton text="Sign in with GitHub" />{" "}
diff --git a/apps/web/src/components/auth/SignupForm.tsx b/apps/web/src/components/auth/SignupForm.tsx
index 62072fc9ec..776c96a26d 100644
--- a/apps/web/src/components/auth/SignupForm.tsx
+++ b/apps/web/src/components/auth/SignupForm.tsx
@@ -60,7 +60,7 @@ export const SignupForm = () => {
               type="text"
               autoComplete="given-name"
               required
-              className="focus:border-brand focus:ring-brand block w-full rounded-md border-gray-300 shadow-sm sm:text-sm"
+              className="focus:border-brand focus:ring-brand block w-full rounded-md border-slate-300 shadow-sm sm:text-sm"
             />
           </div>
         </div>
@@ -75,7 +75,7 @@ export const SignupForm = () => {
               type="email"
               autoComplete="email"
               required
-              className="focus:border-brand focus:ring-brand block w-full rounded-md border-gray-300 shadow-sm sm:text-sm"
+              className="focus:border-brand focus:ring-brand block w-full rounded-md border-slate-300 shadow-sm sm:text-sm"
             />
           </div>
         </div>
@@ -89,7 +89,7 @@ export const SignupForm = () => {
               name="password"
               type="password"
               required
-              className="focus:border-brand focus:ring-brand block w-full rounded-md border-gray-300 shadow-sm sm:text-sm"
+              className="focus:border-brand focus:ring-brand block w-full rounded-md border-slate-300 shadow-sm sm:text-sm"
             />
           </div>
         </div>
@@ -99,14 +99,14 @@ export const SignupForm = () => {
             Sign up
           </Button>
 
-          <div className="mt-3 text-center text-xs text-gray-600">
+          <div className="mt-3 text-center text-xs text-slate-600">
             Already have an account?{" "}
             <Link href="/auth/signin" className="text-brand hover:text-brand-light">
               Log in.
             </Link>
           </div>
           {(process.env.NEXT_PUBLIC_TERMS_URL || process.env.NEXT_PUBLIC_PRIVACY_URL) && (
-            <div className="mt-3 text-center text-xs text-gray-400">
+            <div className="mt-3 text-center text-xs text-slate-400">
               By clicking &quot;Sign Up&quot;, you agree to our
               <br />
               {process.env.NEXT_PUBLIC_TERMS_URL && (
@@ -137,10 +137,10 @@ export const SignupForm = () => {
           <>
             <div className="relative">
               <div className="absolute inset-0 flex items-center" aria-hidden="true">
-                <div className="w-full border-t border-gray-300" />
+                <div className="w-full border-t border-slate-300" />
               </div>
               <div className="relative flex justify-center">
-                <span className="bg-white px-2 text-sm text-gray-500">Sign up with</span>
+                <span className="bg-white px-2 text-sm text-slate-500">Sign up with</span>
               </div>
             </div>
             <GithubButton text="Sign up with GitHub" />
diff --git a/apps/web/src/components/customers/CustomersPage.tsx b/apps/web/src/components/customers/CustomersPage.tsx
index f4b4d4ecf3..21dfe8ba24 100644
--- a/apps/web/src/components/customers/CustomersPage.tsx
+++ b/apps/web/src/components/customers/CustomersPage.tsx
@@ -32,7 +32,7 @@ export default function FormsPage() {
   return (
     <div className="mx-auto py-8 sm:px-6 lg:px-8">
       <header className="mb-8">
-        <h1 className="text-3xl font-bold leading-tight tracking-tight text-gray-900">
+        <h1 className="text-3xl font-bold leading-tight tracking-tight text-slate-900">
           Customers
           <span className="text-brand-dark ml-4 inline-flex items-center rounded-md border border-teal-100 bg-teal-50 px-2.5 py-0.5 text-sm font-medium">
             {organisation.name}
@@ -55,18 +55,18 @@ export default function FormsPage() {
           <div className="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
             <div className="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
               <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
-                <table className="min-w-full divide-y divide-gray-300">
-                  <thead className="bg-gray-50">
+                <table className="min-w-full divide-y divide-slate-300">
+                  <thead className="bg-slate-50">
                     <tr>
                       <th
                         scope="col"
-                        className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
+                        className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-slate-900 sm:pl-6">
                         Email
                       </th>
-                      <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                      <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-slate-900">
                         created At
                       </th>
-                      <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                      <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-slate-900">
                         # submissions
                       </th>
                       <th scope="col" className="relative py-3.5 pl-3 pr-4 sm:pr-6">
@@ -76,17 +76,17 @@ export default function FormsPage() {
                   </thead>
                   <tbody className="bg-white">
                     {customers.map((customer, customerIdx) => (
-                      <tr key={customer.email} className={customerIdx % 2 === 0 ? undefined : "bg-gray-50"}>
-                        <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
+                      <tr key={customer.email} className={customerIdx % 2 === 0 ? undefined : "bg-slate-50"}>
+                        <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-slate-900 sm:pl-6">
                           <Link
                             href={`/organisations/${router.query.organisationId}/customers/${customer.email}`}>
                             {customer.email}
                           </Link>
                         </td>
-                        <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                        <td className="whitespace-nowrap px-3 py-4 text-sm text-slate-500">
                           {convertDateTimeString(customer.createdAt)}
                         </td>
-                        <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                        <td className="whitespace-nowrap px-3 py-4 text-sm text-slate-500">
                           {customer._count?.submissions}
                         </td>
                         <td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
diff --git a/apps/web/src/components/customers/SingleCustomerPage.tsx b/apps/web/src/components/customers/SingleCustomerPage.tsx
index 36d2469174..9d38d3e785 100644
--- a/apps/web/src/components/customers/SingleCustomerPage.tsx
+++ b/apps/web/src/components/customers/SingleCustomerPage.tsx
@@ -38,45 +38,45 @@ export default function SingleCustomerPage() {
   return (
     <div>
       <main className="mx-auto px-4 sm:px-6 lg:px-8">
-        <button className="inline-flex pt-5 text-sm text-gray-500" onClick={() => router.back()}>
+        <button className="inline-flex pt-5 text-sm text-slate-500" onClick={() => router.back()}>
           <BackIcon className="mr-2 h-5 w-5" />
           Back
         </button>
-        <div className="flex items-baseline justify-between border-b border-gray-200 pt-4 pb-6">
-          <h1 className="text-4xl font-bold tracking-tight text-gray-900">{customer.email}</h1>
+        <div className="flex items-baseline justify-between border-b border-slate-200 pt-4 pb-6">
+          <h1 className="text-4xl font-bold tracking-tight text-slate-900">{customer.email}</h1>
         </div>
 
         <section className="pt-6 pb-24">
           <div className="grid grid-cols-1 gap-x-8 gap-y-10 lg:grid-cols-4">
             <div className="space-y-6">
-              <h2 className="text-lg font-bold text-gray-700">Properties</h2>
+              <h2 className="text-lg font-bold text-slate-700">Properties</h2>
               {"name" in customer.data && (
                 <div>
-                  <dt className="text-sm font-medium text-gray-500">Name</dt>
-                  <dd className="mt-1 text-sm text-gray-900">{customer.data.name}</dd>
+                  <dt className="text-sm font-medium text-slate-500">Name</dt>
+                  <dd className="mt-1 text-sm text-slate-900">{customer.data.name}</dd>
                 </div>
               )}
               <div>
-                <dt className="text-sm font-medium text-gray-500">Email</dt>
-                <dd className="mt-1 text-sm text-gray-900">{customer.email}</dd>
+                <dt className="text-sm font-medium text-slate-500">Email</dt>
+                <dd className="mt-1 text-sm text-slate-900">{customer.email}</dd>
               </div>
               {Object.entries(customer.data).map(
                 ([key, value]) =>
                   !["name", "email"].includes(key) && (
                     <div>
-                      <dt className="text-sm font-medium text-gray-500">{key}</dt>
-                      <dd className="mt-1 text-sm text-gray-900">{value.toString()}</dd>
+                      <dt className="text-sm font-medium text-slate-500">{key}</dt>
+                      <dd className="mt-1 text-sm text-slate-900">{value.toString()}</dd>
                     </div>
                   )
               )}
-              <hr className="text-gray-600" />
+              <hr className="text-slate-600" />
               <div>
-                <dt className="text-sm font-medium text-gray-500">Number of forms participated</dt>
-                <dd className="mt-1 text-sm text-gray-900">{formsParticipated}</dd>
+                <dt className="text-sm font-medium text-slate-500">Number of forms participated</dt>
+                <dd className="mt-1 text-sm text-slate-900">{formsParticipated}</dd>
               </div>
               <div>
-                <dt className="text-sm font-medium text-gray-500">Number of form submissions</dt>
-                <dd className="mt-1 text-sm text-gray-900">{customer.submissions.length}</dd>
+                <dt className="text-sm font-medium text-slate-500">Number of form submissions</dt>
+                <dd className="mt-1 text-sm text-slate-900">{customer.submissions.length}</dd>
               </div>
             </div>
 
@@ -96,7 +96,7 @@ export default function SingleCustomerPage() {
                       <div className="relative pb-8">
                         {submissionIdx !== customer.submissions.length - 1 ? (
                           <span
-                            className="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
+                            className="absolute top-4 left-4 -ml-px h-full w-0.5 bg-slate-200"
                             aria-hidden="true"
                           />
                         ) : null}
@@ -106,23 +106,23 @@ export default function SingleCustomerPage() {
                               <div className="flex w-full justify-between">
                                 <div></div>
 
-                                <div className="text-sm text-gray-400">
+                                <div className="text-sm text-slate-400">
                                   <time dateTime={convertDateTimeString(submission.createdAt)}>
                                     {convertDateTimeString(submission.createdAt)}
                                   </time>
                                 </div>
                               </div>
                               <div className="mt-3">
-                                <p className="whitespace-pre-wrap text-sm text-gray-500">
+                                <p className="whitespace-pre-wrap text-sm text-slate-500">
                                   {Object.entries(
                                     MergeWithSchema(submission.data, submission.form.schema)
                                   ).map(([key, value]) => (
                                     <li key={key} className="py-5">
-                                      <p className="text-sm font-semibold text-gray-800">{key}</p>
+                                      <p className="text-sm font-semibold text-slate-800">{key}</p>
                                       <p
                                         className={clsx(
-                                          value ? "text-gray-600" : "text-gray-400",
-                                          "whitespace-pre-line pt-1 text-sm text-gray-600"
+                                          value ? "text-slate-600" : "text-slate-400",
+                                          "whitespace-pre-line pt-1 text-sm text-slate-600"
                                         )}>
                                         {value.toString()}
                                       </p>
@@ -131,11 +131,11 @@ export default function SingleCustomerPage() {
                                 </p>
                               </div>
                             </div>
-                            <div className=" bg-gray-50 p-4 sm:p-6">
+                            <div className=" bg-slate-50 p-4 sm:p-6">
                               <div className="flex w-full justify-between gap-4">
                                 <div>
-                                  <p className="text-sm font-thin text-gray-500">Device</p>
-                                  <p className="text-sm text-gray-500">
+                                  <p className="text-sm font-thin text-slate-500">Device</p>
+                                  <p className="text-sm text-slate-500">
                                     {parseUserAgent(submission.meta.userAgent)}
                                   </p>
                                 </div>
diff --git a/apps/web/src/components/forms/FormsPage.tsx b/apps/web/src/components/forms/FormsPage.tsx
index 5c245f3fca..3a5e9fe516 100644
--- a/apps/web/src/components/forms/FormsPage.tsx
+++ b/apps/web/src/components/forms/FormsPage.tsx
@@ -27,7 +27,7 @@ export default function FormsPage({}) {
   return (
     <div className="mx-auto py-8 sm:px-6 lg:px-8">
       <header className="mb-8">
-        <h1 className="text-3xl font-bold leading-tight tracking-tight text-gray-900">
+        <h1 className="text-3xl font-bold leading-tight tracking-tight text-slate-900">
           Forms
           <span className="text-brand-dark ml-4 inline-flex items-center rounded-md border border-teal-100 bg-teal-50 px-2.5 py-0.5 text-sm font-medium">
             {organisation.name}
diff --git a/apps/web/src/components/forms/NewFormModal.tsx b/apps/web/src/components/forms/NewFormModal.tsx
index d0050b5def..e753ff1cea 100644
--- a/apps/web/src/components/forms/NewFormModal.tsx
+++ b/apps/web/src/components/forms/NewFormModal.tsx
@@ -232,7 +232,7 @@ export default function NewFormModal({ open, setOpen, organisationId }: FormOnbo
             leave="ease-in duration-200"
             leaveFrom="opacity-100"
             leaveTo="opacity-0">
-            <div className="fixed inset-0 bg-gray-500 bg-opacity-30 backdrop-blur-md transition-opacity" />
+            <div className="fixed inset-0 bg-slate-500 bg-opacity-30 backdrop-blur-md transition-opacity" />
           </Transition.Child>
 
           <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -249,7 +249,7 @@ export default function NewFormModal({ open, setOpen, organisationId }: FormOnbo
                   <div className="absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
                     <button
                       type="button"
-                      className="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-0 focus:ring-offset-2"
+                      className="rounded-md bg-white text-slate-400 hover:text-slate-500 focus:outline-none focus:ring-0 focus:ring-offset-2"
                       onClick={() => setOpen(false)}>
                       <span className="sr-only">Close</span>
                       <XMarkIcon className="h-6 w-6" aria-hidden="true" />
@@ -269,7 +269,7 @@ export default function NewFormModal({ open, setOpen, organisationId }: FormOnbo
                         <input
                           type="text"
                           name="label"
-                          className="focus:border-brand focus:ring-brand block w-full rounded-md border-gray-300 shadow-sm sm:text-sm"
+                          className="focus:border-brand focus:ring-brand block w-full rounded-md border-slate-300 shadow-sm sm:text-sm"
                           placeholder="e.g. Feedback Box App"
                           value={label}
                           onChange={(e) => setLabel(e.target.value)}
@@ -278,7 +278,7 @@ export default function NewFormModal({ open, setOpen, organisationId }: FormOnbo
                         />
                       </div>
                     </div>
-                    <hr className="my-6 text-gray-600" />
+                    <hr className="my-6 text-slate-600" />
                     <RadioGroup value={formType} onChange={setFormType}>
                       <RadioGroup.Label className="text-sm font-light text-slate-800">
                         Choose your form type
@@ -297,9 +297,9 @@ export default function NewFormModal({ open, setOpen, organisationId }: FormOnbo
                               value={formType.id}
                               className={({ checked, active, disabled }) =>
                                 clsx(
-                                  checked ? "border-transparent" : "border-gray-300",
+                                  checked ? "border-transparent" : "border-slate-300",
                                   active ? "border-brand ring-brand ring-2" : "",
-                                  disabled ? "bg-gray-100" : "bg-white",
+                                  disabled ? "bg-slate-100" : "bg-white",
                                   "relative block cursor-pointer rounded-lg border bg-white px-6 py-4 shadow-sm focus:outline-none sm:flex"
                                 )
                               }>
@@ -312,7 +312,7 @@ export default function NewFormModal({ open, setOpen, organisationId }: FormOnbo
                                   </RadioGroup.Description>
                                   <span className="flex items-center">
                                     <span className="flex flex-col text-sm">
-                                      <RadioGroup.Label as="span" className="font-medium text-gray-900">
+                                      <RadioGroup.Label as="span" className="font-medium text-slate-900">
                                         {formType.name}
                                         {formType.needsUpgrade && (
                                           <Link href={`/organisations/${organisation.id}/settings/billing`}>
@@ -322,7 +322,7 @@ export default function NewFormModal({ open, setOpen, organisationId }: FormOnbo
                                           </Link>
                                         )}
                                       </RadioGroup.Label>
-                                      <RadioGroup.Description as="span" className="text-gray-500">
+                                      <RadioGroup.Description as="span" className="text-slate-500">
                                         {formType.description}
                                       </RadioGroup.Description>
                                     </span>
diff --git a/apps/web/src/components/forms/custom/FormOverviewPage.tsx b/apps/web/src/components/forms/custom/FormOverviewPage.tsx
index c076934c68..a19f9cb61b 100644
--- a/apps/web/src/components/forms/custom/FormOverviewPage.tsx
+++ b/apps/web/src/components/forms/custom/FormOverviewPage.tsx
@@ -57,7 +57,7 @@ export default function FormOverviewPage() {
   return (
     <div className="mx-auto py-8 sm:px-6 lg:px-8">
       <header className="mb-8">
-        <h1 className="text-3xl font-bold leading-tight tracking-tight text-gray-900">
+        <h1 className="text-3xl font-bold leading-tight tracking-tight text-slate-900">
           {form.label}
           <span className="text-brand-dark ml-4 inline-flex items-center rounded-md border border-teal-100 bg-teal-50 px-2.5 py-0.5 text-sm font-medium">
             {organisation.name}
@@ -74,7 +74,7 @@ export default function FormOverviewPage() {
             <select
               id="tabs"
               name="tabs"
-              className="block w-full rounded-md border-gray-300 focus:border-teal-500 focus:ring-teal-500"
+              className="block w-full rounded-md border-slate-300 focus:border-teal-500 focus:ring-teal-500"
               defaultValue={activeTab.name}>
               {tabs.map((tab) => (
                 <option key={tab.name}>{tab.name}</option>
@@ -82,7 +82,7 @@ export default function FormOverviewPage() {
             </select>
           </div>
           <div className="hidden sm:block">
-            <div className="border-b border-gray-200">
+            <div className="border-b border-slate-200">
               <nav className="-mb-px flex space-x-8" aria-label="Tabs">
                 {tabs.map((tab) => (
                   <button
@@ -91,7 +91,7 @@ export default function FormOverviewPage() {
                     className={clsx(
                       activeTab.name === tab.name
                         ? "border-teal-500 text-teal-600"
-                        : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700",
+                        : "border-transparent text-slate-500 hover:border-slate-300 hover:text-slate-700",
                       "group inline-flex items-center border-b-2 py-4 px-1 text-sm font-medium"
                     )}
                     aria-current={activeTab.name === tab.name ? "page" : undefined}>
@@ -99,7 +99,7 @@ export default function FormOverviewPage() {
                       className={clsx(
                         activeTab.name === tab.name
                           ? "text-teal-500"
-                          : "text-gray-400 group-hover:text-gray-500",
+                          : "text-slate-400 group-hover:text-slate-500",
                         "-ml-0.5 mr-2 h-5 w-5"
                       )}
                       aria-hidden="true"
@@ -124,7 +124,7 @@ export default function FormOverviewPage() {
                     <input
                       id="formId"
                       type="text"
-                      className="focus:border-brand focus:ring-brand block w-full rounded-md border-gray-300 shadow-sm disabled:bg-gray-100 sm:text-sm"
+                      className="focus:border-brand focus:ring-brand block w-full rounded-md border-slate-300 shadow-sm disabled:bg-slate-100 sm:text-sm"
                       value={form.id}
                       disabled
                     />
@@ -147,13 +147,13 @@ export default function FormOverviewPage() {
                   </label>
                   <div className="mt-3">
                     <div className="mt-1 flex rounded-md shadow-sm">
-                      <span className="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-200 px-3 text-gray-500  sm:text-sm">
+                      <span className="inline-flex items-center rounded-l-md border border-r-0 border-slate-300 bg-slate-200 px-3 text-slate-500  sm:text-sm">
                         POST
                       </span>
                       <input
                         id="captureUrl"
                         type="text"
-                        className="focus:border-brand focus:ring-brand block w-full rounded-r-md border-gray-300 bg-gray-100 shadow-sm sm:text-sm"
+                        className="focus:border-brand focus:ring-brand block w-full rounded-r-md border-slate-300 bg-slate-100 shadow-sm sm:text-sm"
                         value={capturePostUrl}
                         disabled
                       />
@@ -172,7 +172,7 @@ export default function FormOverviewPage() {
                 </div>
               </div>
 
-              <div className="col-span-2  text-sm text-gray-600">
+              <div className="col-span-2  text-sm text-slate-600">
                 <h3 className="block text-lg font-semibold text-slate-800">How to get started</h3>
                 <ol className="list-decimal leading-8 text-slate-700">
                   <li>POST a submission to the capture endpoint.</li>
@@ -218,13 +218,13 @@ export default function FormOverviewPage() {
                   </label>
                   <div className="mt-3">
                     <div className="mt-1 flex rounded-md shadow-sm">
-                      <span className="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-200 px-3 text-gray-500  sm:text-sm">
+                      <span className="inline-flex items-center rounded-l-md border border-r-0 border-slate-300 bg-slate-200 px-3 text-slate-500  sm:text-sm">
                         POST
                       </span>
                       <input
                         id="captureUrl"
                         type="text"
-                        className="focus:border-brand focus:ring-brand block w-full rounded-r-md border-gray-300 bg-gray-100 shadow-sm sm:text-sm"
+                        className="focus:border-brand focus:ring-brand block w-full rounded-r-md border-slate-300 bg-slate-100 shadow-sm sm:text-sm"
                         value={`${window.location.protocol}//${window.location.host}/api/capture/forms/${form.id}/submissions`}
                         disabled
                       />
@@ -241,7 +241,7 @@ export default function FormOverviewPage() {
                     </Button>
                   </div>
                 </div>
-                <div className="mt-4 rounded-md bg-black p-4 font-light text-gray-200 first-letter:text-sm">
+                <div className="mt-4 rounded-md bg-black p-4 font-light text-slate-200 first-letter:text-sm">
                   <pre>
                     <code className="language-js whitespace-pre-wrap">
                       {`{
@@ -256,15 +256,15 @@ export default function FormOverviewPage() {
                   </pre>
                 </div>
               </div>
-              <div className="col-span-2  text-sm text-gray-600">
+              <div className="col-span-2  text-sm text-slate-600">
                 <h3 className="block pb-4 text-lg font-semibold text-slate-800">Quick Tips</h3>
                 <p className="font-bold">Authentication</p>
-                <p className="my-3 text-sm text-gray-600">
+                <p className="my-3 text-sm text-slate-600">
                   Via the API you can send submissions directly to Formbricks HQ. The API doesn&apos;t need
                   any authentication and can also be called in the users browser.
                 </p>
                 <p className="pt-3 font-bold">CustomerId</p>
-                <p className="my-3 text-sm text-gray-600">
+                <p className="my-3 text-sm text-slate-600">
                   You can pass along a customer ID to identify the respondent. This allows you to attribute
                   submissions of several surveys to the same respondent.
                 </p>
diff --git a/apps/web/src/components/forms/feedback/FeedbackPage.tsx b/apps/web/src/components/forms/feedback/FeedbackPage.tsx
index b8e2ee9294..039b3cde81 100644
--- a/apps/web/src/components/forms/feedback/FeedbackPage.tsx
+++ b/apps/web/src/components/forms/feedback/FeedbackPage.tsx
@@ -39,8 +39,8 @@ export default function FeedbackPage() {
   return (
     <div>
       <main className="mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="border-b border-gray-200 pt-8">
-          <h1 className="pb-6 text-4xl font-bold tracking-tight text-gray-900">{form.label}</h1>
+        <div className="border-b border-slate-200 pt-8">
+          <h1 className="pb-6 text-4xl font-bold tracking-tight text-slate-900">{form.label}</h1>
           <TabNavigation tabs={tabs} currentTab={currentTab} setCurrentTab={setCurrentTab} />
         </div>
         {currentTab === "Results" ? (
diff --git a/apps/web/src/components/forms/feedback/FeedbackResults.tsx b/apps/web/src/components/forms/feedback/FeedbackResults.tsx
index 10b746064f..8b569b26ed 100644
--- a/apps/web/src/components/forms/feedback/FeedbackResults.tsx
+++ b/apps/web/src/components/forms/feedback/FeedbackResults.tsx
@@ -71,10 +71,10 @@ export default function FeedbackResults() {
               leaveTo="translate-x-full">
               <Dialog.Panel className="relative ml-auto flex h-full w-full max-w-xs flex-col overflow-y-auto bg-white py-4 pb-12 shadow-xl">
                 <div className="flex items-center justify-between px-4">
-                  <h2 className="text-lg font-medium text-gray-900">Filters</h2>
+                  <h2 className="text-lg font-medium text-slate-900">Filters</h2>
                   <button
                     type="button"
-                    className="-mr-2 flex h-10 w-10 items-center justify-center rounded-md bg-white p-2 text-gray-400"
+                    className="-mr-2 flex h-10 w-10 items-center justify-center rounded-md bg-white p-2 text-slate-400"
                     onClick={() => setMobileFiltersOpen(false)}>
                     <span className="sr-only">Close menu</span>
                     <XMarkIcon className="h-6 w-6" aria-hidden="true" />
@@ -82,9 +82,9 @@ export default function FeedbackResults() {
                 </div>
 
                 {/* Filters */}
-                <form className="mt-4 border-t border-gray-200">
+                <form className="mt-4 border-t border-slate-200">
                   <h3 className="sr-only">Categories</h3>
-                  <ul role="list" className="px-2 py-3 font-medium text-gray-900">
+                  <ul role="list" className="px-2 py-3 font-medium text-slate-900">
                     {subCategories.map((category) => (
                       <li key={category.name}>
                         <Link href={category.href} className="block px-2 py-3">
diff --git a/apps/web/src/components/forms/feedback/FeedbackTimeline.tsx b/apps/web/src/components/forms/feedback/FeedbackTimeline.tsx
index f0d93f162f..64325f92ae 100644
--- a/apps/web/src/components/forms/feedback/FeedbackTimeline.tsx
+++ b/apps/web/src/components/forms/feedback/FeedbackTimeline.tsx
@@ -51,7 +51,7 @@ export default function FeedbackTimeline({ submissions }) {
                 <div className="relative pb-8">
                   {submissionIdx !== submissions.length - 1 ? (
                     <span
-                      className="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
+                      className="absolute top-4 left-4 -ml-px h-full w-0.5 bg-slate-200"
                       aria-hidden="true"
                     />
                   ) : null}
@@ -60,7 +60,7 @@ export default function FeedbackTimeline({ submissions }) {
                       <span
                         className={clsx(
                           "bg-white",
-                          "flex h-8 w-8 items-center justify-center rounded-full ring-8 ring-gray-50"
+                          "flex h-8 w-8 items-center justify-center rounded-full ring-8 ring-slate-50"
                         )}>
                         {submission.data.feedbackType === "compliment" ? (
                           <ComplimentIcon className="h-6 w-6 text-white" aria-hidden="true" />
@@ -88,54 +88,54 @@ export default function FeedbackTimeline({ submissions }) {
                             </span>
                           )}
 
-                          <div className="text-sm text-gray-400">
+                          <div className="text-sm text-slate-400">
                             <time dateTime={convertDateTimeString(submission.createdAt)}>
                               {convertDateTimeString(submission.createdAt)}
                             </time>
                           </div>
                         </div>
                         <div className="mt-3">
-                          <p className="whitespace-pre-wrap text-sm text-gray-500">
+                          <p className="whitespace-pre-wrap text-sm text-slate-500">
                             {submission.data.message}{" "}
                           </p>
                         </div>
                       </div>
-                      <div className=" bg-gray-50 p-4 sm:p-6">
+                      <div className=" bg-slate-50 p-4 sm:p-6">
                         <div className="flex w-full justify-between gap-4">
                           <div>
-                            <p className="text-sm font-thin text-gray-500">User</p>
+                            <p className="text-sm font-thin text-slate-500">User</p>
                             {submission.customerEmail ? (
                               <Link
-                                className="text-sm font-medium text-gray-700"
+                                className="text-sm font-medium text-slate-700"
                                 href={`/organisations/${router.query.organisationId}/customers/${submission.customerEmail}`}>
                                 {submission.customerEmail}
                               </Link>
                             ) : (
-                              <p className="text-sm text-gray-500">Anonymous</p>
+                              <p className="text-sm text-slate-500">Anonymous</p>
                             )}
                           </div>
                           <div>
-                            <p className="text-sm font-thin text-gray-500">Device</p>
-                            <p className="text-sm text-gray-500">
+                            <p className="text-sm font-thin text-slate-500">Device</p>
+                            <p className="text-sm text-slate-500">
                               {parseUserAgent(submission.meta.userAgent)}
                             </p>
                           </div>
                           <div>
-                            <p className="text-sm font-thin text-gray-500">Page</p>
-                            <p className="text-sm text-gray-500">{submission.data.pageUrl}</p>
+                            <p className="text-sm font-thin text-slate-500">Page</p>
+                            <p className="text-sm text-slate-500">{submission.data.pageUrl}</p>
                           </div>
                         </div>
 
                         <div className="mt-8 flex w-full justify-end">
                           {!submission.archived ? (
                             <button
-                              className="text-base text-gray-500 underline"
+                              className="text-base text-slate-500 underline"
                               onClick={() => toggleArchiveSubmission(submission)}>
                               Archive
                             </button>
                           ) : (
                             <button
-                              className="text-base text-gray-500 underline"
+                              className="text-base text-slate-500 underline"
                               onClick={() => toggleArchiveSubmission(submission)}>
                               Restore
                             </button>
diff --git a/apps/web/src/components/forms/feedback/SetupInstructions.tsx b/apps/web/src/components/forms/feedback/SetupInstructions.tsx
index 3a3375f9f0..c22916fc2c 100644
--- a/apps/web/src/components/forms/feedback/SetupInstructions.tsx
+++ b/apps/web/src/components/forms/feedback/SetupInstructions.tsx
@@ -14,63 +14,94 @@ export default function SetupInstructions({}) {
 
   return (
     <div>
-      <div className="grid grid-cols-5 gap-8 py-4">
-        <div className="col-span-3 text-sm text-gray-600">
-          <h3 className="block text-lg font-semibold text-slate-800">How to get started</h3>
-          <p>You have to options to embed your Fedback widget: Via JavaScript embed and via NPM.</p>
-        </div>
-        <div className="col-span-2">
+      <div className="grid max-w-6xl grid-cols-5 gap-16 py-4">
+        <div className="col-span-3">
           <div>
-            <label htmlFor="formId" className="block text-lg font-semibold text-slate-800">
-              Your form ID
-            </label>
-            <div className="mt-3 w-96">
-              <input
-                id="formId"
-                type="text"
-                className="focus:border-brand focus:ring-brand block w-full rounded-md border-gray-300 shadow-sm disabled:bg-gray-100 sm:text-sm"
-                value={formId}
-                disabled
-              />
-
-              <Button
-                variant="secondary"
-                className="mt-2 w-full justify-center"
-                onClick={() => {
-                  navigator.clipboard.writeText(formId);
-                  toast("Copied form ID to clipboard");
-                }}>
-                copy
-              </Button>
+            <div className="mb-6">
+              <h2 className="mb-3 text-3xl font-bold text-slate-800">Quick Start Guides</h2>
+              <p>You can install the Feedback Box with NPM and with a JavaScript embed:</p>
             </div>
-          </div>
-        </div>
-      </div>
-      <hr className="my-4 text-gray-800" />
-      <div className="py-6">
-        <label htmlFor="formId" className="block text-lg font-semibold text-slate-800">
-          Javascript Snippet
-        </label>
-        <ol className="mt-2 list-decimal pl-4 leading-8 text-slate-700">
-          <li>
-            Copy the Javascript widget below into your application and customize the config according to your
-            needs.
-          </li>
-          <li>
-            Setup the button that opens the widget with the onClick handler let your users open the widget.
-          </li>
-          <li>You are ready to receive your feedback and view it in the Results tab.</li>
-          <li>Get notified or pipe submission data to to Slack or Email in the Data Pipelines tab.</li>
-        </ol>
-        <p>
-          Place this Javascript script tags into the head of your HTML file and include the button into the
-          body to start using Formbricks Feedback.
-        </p>
-        <div className="mt-3">
-          <div className="col-span-3 rounded-md bg-black p-4 text-sm font-light text-gray-200">
-            <pre>
-              <code className="language-html whitespace-pre-wrap">
-                {`<!--HTML header script -->
+            <div>
+              <h3 className="block text-xl font-semibold text-slate-800">NPM Install</h3>
+              <ol className="my-2 list-decimal pl-4 leading-8 text-slate-700">
+                <li>Install Feedback Box with NPM</li>
+                <li>
+                  Set up the config file according to your needs.{" "}
+                  <a
+                    target="_blank"
+                    rel="noreferrer"
+                    className="text-brand-dark font-bold underline"
+                    href="https://formbricks.com/docs/best-practices/feedback-box">
+                    Read the docs
+                  </a>{" "}
+                  for more info.
+                </li>
+                <li>You&apos;re done! Your feedback will show up in the Results tab.</li>
+              </ol>
+              <h4 className="my-2 block text-lg font-semibold text-slate-800">NPM Install</h4>
+              <div className="col-span-3 rounded-md bg-black p-4 text-sm font-light text-slate-200">
+                <pre>
+                  <code className="language-html whitespace-pre-wrap">{`npm install @formbricks/feedback`}</code>
+                </pre>
+              </div>
+              <h4 className="my-2 block text-lg font-semibold text-slate-800">Example config</h4>
+              <div className="col-span-3 rounded-md bg-black p-4 text-sm font-light text-slate-200">
+                <pre>
+                  <code className="language-html whitespace-pre-wrap">{`config: {
+         hqUrl: "${window.location.protocol}//${window.location.host}",
+         formId: "${formId}",
+        divId: "test-div",
+        contact: {
+          name: "Johannes",
+          position: "Co-Founder",
+          imgUrl: "https://avatars.githubusercontent.com/u/72809645?v=4",
+        },
+        customer: {
+          id: "uUid", // fill dynamically
+          name: "User", // fill dynamically
+          email: "test@cal.com", // fill dynamically
+        },
+        style: {
+          brandColor: "#0E1420",
+          headerBGColor: "#E5E7EB",
+          headerTitleColor: "#4B5563",
+          boxBGColor: "#F9FAFB",
+          textColor: "#374151",
+          buttonHoverColor: "#F3F4F6",
+        },
+      }`}</code>
+                </pre>
+              </div>
+            </div>
+
+            <hr className="my-10 text-slate-800" />
+
+            <div>
+              <h3 className="block text-xl font-semibold text-slate-800">Javascript Embed</h3>
+              <ol className="mt-2 list-decimal pl-4 leading-8 text-slate-700">
+                <li>Copy the Javascript snippet below into the HEAD of your HTML file.</li>
+                <li>Set up a button with the onClick handler below to let your users open the widget.</li>
+                <li>
+                  Set up the config file according to your needs.{" "}
+                  <a
+                    target="_blank"
+                    rel="noreferrer"
+                    className="text-brand-dark font-bold underline"
+                    href="https://formbricks.com/docs/best-practices/feedback-box">
+                    Read the docs
+                  </a>{" "}
+                  for more info.
+                </li>
+                <li>You&apos;re done! Your feedback will show up in the Results tab.</li>
+              </ol>
+              <div className="mt-6">
+                <h4 className="mb-2 block text-lg font-semibold text-slate-800">
+                  Add to HTML &#60;head&#62;{" "}
+                </h4>
+                <div className="col-span-3 rounded-md bg-black p-4 text-sm font-light text-slate-200">
+                  <pre>
+                    <code className="language-html whitespace-pre-wrap">
+                      {`<!--HTML header script -->
 <script src="https://cdn.jsdelivr.net/npm/@formbricks/feedback@0.1.5/dist/index.umd.js" defer></script>
 
 <script>
@@ -82,11 +113,72 @@ window.formbricks = {
   ...window.formbricks,
 };
 </script>
+`}
+                    </code>
+                  </pre>
+                </div>
+              </div>
 
-<!--Button element -->
+              <div className="mt-3">
+                <h4 className="my-2 block text-lg font-semibold text-slate-800">Setup Button onClick</h4>
+                <div className="col-span-3 rounded-md bg-black p-4 text-sm font-light text-slate-200">
+                  <pre>
+                    <code className="language-html whitespace-pre-wrap">
+                      {`<!--Button element -->
 <button onclick={(e) => window.formbricks.open(e)}>Feedback</button>`}
-              </code>
-            </pre>
+                    </code>
+                  </pre>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="col-span-2">
+          <div className="rounded-lg bg-slate-100 p-8">
+            <label htmlFor="formId" className="block text-xl font-bold text-slate-800">
+              Your Feedback Box ID
+            </label>
+            <div className="mt-3">
+              <input
+                id="formId"
+                type="text"
+                className="focus:border-brand focus:ring-brand block w-full rounded-md border-slate-300 shadow-sm disabled:bg-slate-100 sm:text-sm"
+                value={formId}
+                disabled
+              />
+
+              <Button
+                variant="primary"
+                className="mt-2 w-full justify-center"
+                onClick={() => {
+                  navigator.clipboard.writeText(formId);
+                  toast("Copied form ID to clipboard");
+                }}>
+                Copy to clipboard
+              </Button>
+            </div>
+            <div className="mt-10">
+              <h4 className="my-2 block text-xl font-semibold text-slate-800">Feedback Box Docs</h4>
+              <p>Get detailed instructions in our Docs:</p>
+              <Button
+                variant="secondary"
+                target="_blank"
+                className="mt-2 w-full justify-center"
+                onClick={() => router.push("https://formbricks.com/docs")}>
+                Docs
+              </Button>
+            </div>
+            <div className="mt-10">
+              <h4 className="my-2 block text-xl font-semibold text-slate-800">Need help? Join Discord!</h4>
+              <p>Got a question? We&apos;re happy to help:</p>
+              <Button
+                variant="secondary"
+                target="_blank"
+                className="bg-purple mt-2 w-full justify-center"
+                onClick={() => router.push("https://formbricks.com/discord")}>
+                Join Discord
+              </Button>
+            </div>
           </div>
         </div>
       </div>
diff --git a/apps/web/src/components/forms/pipelines/AddPipelineModal.tsx b/apps/web/src/components/forms/pipelines/AddPipelineModal.tsx
index 284d11afbf..ea94824778 100644
--- a/apps/web/src/components/forms/pipelines/AddPipelineModal.tsx
+++ b/apps/web/src/components/forms/pipelines/AddPipelineModal.tsx
@@ -57,17 +57,17 @@ export default function AddPipelineModal({ open, setOpen }) {
       <>
         {typeId === null ? (
           <>
-            <h2 className="text-ui-gray-dark mb-6 text-xl font-bold">
+            <h2 className="text-ui-slate-dark mb-6 text-xl font-bold">
               Please choose a pipeline you want to add
             </h2>
             {availablePipelines.map((pipeline) => (
               <div
-                className="border-ui-gray-light mb-5 w-full border bg-white shadow sm:rounded"
+                className="border-ui-slate-light mb-5 w-full border bg-white shadow sm:rounded"
                 key={pipeline.title}>
                 <div className="px-4 py-5 sm:p-6">
-                  <h3 className="text-lg font-medium leading-6 text-gray-900">{pipeline.title}</h3>
+                  <h3 className="text-lg font-medium leading-6 text-slate-900">{pipeline.title}</h3>
                   <div className="mt-2 sm:flex sm:items-start sm:justify-between">
-                    <div className="max-w-xl text-sm text-gray-500">
+                    <div className="max-w-xl text-sm text-slate-500">
                       <p>{pipeline.description}</p>
                     </div>
                     <div className="mt-5 sm:mt-0 sm:ml-6 sm:flex sm:flex-shrink-0 sm:items-center">
@@ -84,7 +84,7 @@ export default function AddPipelineModal({ open, setOpen }) {
             ))}
           </>
         ) : (
-          <form className="w-full space-y-8 divide-y divide-gray-200" onSubmit={handleSubmit}>
+          <form className="w-full space-y-8 divide-y divide-slate-200" onSubmit={handleSubmit}>
             <PipelineSettings typeId={typeId} pipeline={pipeline} setPipeline={setPipeline} />
             <div className="pt-5">
               <div className="flex justify-end">
diff --git a/apps/web/src/components/forms/pipelines/PipelinesOverview.tsx b/apps/web/src/components/forms/pipelines/PipelinesOverview.tsx
index 7ae702f6d1..f42606935c 100644
--- a/apps/web/src/components/forms/pipelines/PipelinesOverview.tsx
+++ b/apps/web/src/components/forms/pipelines/PipelinesOverview.tsx
@@ -152,7 +152,7 @@ export default function PipelinesOverview({}) {
       {pipelines.length > 0 ? (
         <>
           <div className="overflow-hidden bg-white shadow sm:rounded-md">
-            <ul role="list" className="divide-y divide-gray-200">
+            <ul role="list" className="divide-y divide-slate-200">
               {pipelines.map((pipeline) => (
                 <li key={pipeline.id}>
                   <div className="block">
@@ -161,9 +161,9 @@ export default function PipelinesOverview({}) {
                         <div className="min-w-0 flex-1 px-4 md:grid md:grid-cols-2 md:gap-4">
                           <div>
                             <p className="truncate text-sm font-medium text-slate-800">{pipeline.label}</p>
-                            <p className="mt-2 flex items-center text-sm text-gray-500">
+                            <p className="mt-2 flex items-center text-sm text-slate-500">
                               <BoltIcon
-                                className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
+                                className="mr-1.5 h-5 w-5 flex-shrink-0 text-slate-400"
                                 aria-hidden="true"
                               />
                               <span className="truncate">{pipeline.type}</span>
@@ -176,8 +176,8 @@ export default function PipelinesOverview({}) {
                                 checked={pipeline.enabled}
                                 onChange={() => toggleEnabled(pipeline)}
                                 className={clsx(
-                                  pipeline.enabled ? "bg-brand-dark" : "bg-gray-200",
-                                  "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
+                                  pipeline.enabled ? "bg-brand-dark" : "bg-slate-200",
+                                  "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2"
                                 )}>
                                 <span className="sr-only">Use setting</span>
                                 <span
@@ -193,7 +193,7 @@ export default function PipelinesOverview({}) {
                                       "absolute inset-0 flex h-full w-full items-center justify-center transition-opacity"
                                     )}
                                     aria-hidden="true">
-                                    <svg className="h-3 w-3 text-gray-400" fill="none" viewBox="0 0 12 12">
+                                    <svg className="h-3 w-3 text-slate-400" fill="none" viewBox="0 0 12 12">
                                       <path
                                         d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2"
                                         stroke="currentColor"
@@ -226,7 +226,7 @@ export default function PipelinesOverview({}) {
                       </div>
                       <div className="inline-flex">
                         <button onClick={() => openSettings(pipeline)}>
-                          <Cog6ToothIcon className="mx-2 h-4 w-4 text-gray-400" aria-hidden="true" />
+                          <Cog6ToothIcon className="mx-2 h-4 w-4 text-slate-400" aria-hidden="true" />
                         </button>
                         <button
                           onClick={() => {
@@ -234,7 +234,7 @@ export default function PipelinesOverview({}) {
                               deletePipelineAction(pipeline.id);
                             }
                           }}>
-                          <TrashIcon className="mx-2 h-4 w-4 text-gray-400" aria-hidden="true" />
+                          <TrashIcon className="mx-2 h-4 w-4 text-slate-400" aria-hidden="true" />
                         </button>
                       </div>
                     </div>
@@ -251,8 +251,8 @@ export default function PipelinesOverview({}) {
           <div className="mx-10 mb-5 grid grid-cols-3 gap-3">
             {integrations.map((integration) => (
               <div className="col-span-1 my-1 flex" key={integration.id}>
-                <div className="text-ui-gray-medium relative col-span-1 flex w-full">
-                  <integration.icon className="text-ui-gray-medium h-6 w-6" />
+                <div className="text-ui-slate-medium relative col-span-1 flex w-full">
+                  <integration.icon className="text-ui-slate-medium h-6 w-6" />
                   <div className="inline-flex items-center truncate px-4 text-sm">
                     <p className="">{integration.name}</p>
                     {integration.comingSoon && (
diff --git a/apps/web/src/components/forms/pipelines/UpdatePipelineModal.tsx b/apps/web/src/components/forms/pipelines/UpdatePipelineModal.tsx
index c6be2a2fd2..21f6442b93 100644
--- a/apps/web/src/components/forms/pipelines/UpdatePipelineModal.tsx
+++ b/apps/web/src/components/forms/pipelines/UpdatePipelineModal.tsx
@@ -33,7 +33,7 @@ export default function UpdatePipelineModal({ open, setOpen, pipelineId }) {
       {isLoadingPipeline ? (
         <LoadingSpinner />
       ) : (
-        <form className="w-full space-y-8 divide-y divide-gray-200" onSubmit={handleSubmit}>
+        <form className="w-full space-y-8 divide-y divide-slate-200" onSubmit={handleSubmit}>
           <PipelineSettings
             typeId={pipeline.type}
             pipeline={pipeline}
@@ -44,7 +44,7 @@ export default function UpdatePipelineModal({ open, setOpen, pipelineId }) {
               <button
                 type="button"
                 onClick={() => setOpen(false)}
-                className="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2">
+                className="rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2">
                 Cancel
               </button>
               <button
diff --git a/apps/web/src/components/forms/pipelines/emailNotification.tsx b/apps/web/src/components/forms/pipelines/emailNotification.tsx
index 0b81e8f7b5..a6a00b4b4b 100644
--- a/apps/web/src/components/forms/pipelines/emailNotification.tsx
+++ b/apps/web/src/components/forms/pipelines/emailNotification.tsx
@@ -46,17 +46,17 @@ export function EmailNotificationSettings({ pipeline, setPipeline }) {
   };
 
   return (
-    <div className="space-y-8 divide-y divide-gray-200">
+    <div className="space-y-8 divide-y divide-slate-200">
       <div>
-        <h2 className="text-ui-gray-dark mb-3 text-xl font-bold">Configure Email notifications</h2>
-        <p className="mt-1 text-sm text-gray-500">
+        <h2 className="text-ui-slate-dark mb-3 text-xl font-bold">Configure Email notifications</h2>
+        <p className="mt-1 text-sm text-slate-500">
           Configure Email notifications. To learn more about how email notifications work, please check out
           our docs.
         </p>
 
         <div className="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
           <div className="sm:col-span-4">
-            <label htmlFor="label" className="block text-sm font-medium text-gray-700">
+            <label htmlFor="label" className="block text-sm font-medium text-slate-700">
               Pipeline Label
             </label>
             <div className="mt-1">
@@ -67,14 +67,14 @@ export function EmailNotificationSettings({ pipeline, setPipeline }) {
                 placeholder="My Email Notification Pipeline"
                 value={pipeline.label || ""}
                 onChange={(e) => updateField("label", e.target.value)}
-                className="block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500 sm:text-sm"
+                className="block w-full rounded-md border-slate-300 shadow-sm focus:border-teal-500 focus:ring-teal-500 sm:text-sm"
                 required
               />
             </div>
           </div>
 
           <div className="sm:col-span-4">
-            <label htmlFor="email" className="block text-sm font-medium text-gray-700">
+            <label htmlFor="email" className="block text-sm font-medium text-slate-700">
               Email address
             </label>
             <div className="mt-1">
@@ -85,11 +85,11 @@ export function EmailNotificationSettings({ pipeline, setPipeline }) {
                 placeholder="mail@example.com"
                 value={pipeline.config.email || ""}
                 onChange={(e) => updateField("email", e.target.value, "config")}
-                className="block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500 sm:text-sm"
+                className="block w-full rounded-md border-slate-300 shadow-sm focus:border-teal-500 focus:ring-teal-500 sm:text-sm"
                 required
               />
             </div>
-            <p className="mt-2 text-xs text-gray-500" id="email-description">
+            <p className="mt-2 text-xs text-slate-500" id="email-description">
               The email address that will receive notifications when the form/page is completed
             </p>
           </div>
@@ -98,13 +98,13 @@ export function EmailNotificationSettings({ pipeline, setPipeline }) {
 
       <div className="pt-8">
         <div>
-          <h3 className="text-lg font-medium leading-6 text-gray-900">Advanced Settings</h3>
-          <p className="mt-1 text-sm text-gray-500">Set up this webhook to fit your needs.</p>
+          <h3 className="text-lg font-medium leading-6 text-slate-900">Advanced Settings</h3>
+          <p className="mt-1 text-sm text-slate-500">Set up this webhook to fit your needs.</p>
         </div>
         <div className="mt-6">
           <fieldset>
             <legend className="sr-only">Events</legend>
-            <div className="text-base font-medium text-gray-900" aria-hidden="true">
+            <div className="text-base font-medium text-slate-900" aria-hidden="true">
               Events
             </div>
             <div className="mt-4 space-y-4">
@@ -118,14 +118,14 @@ export function EmailNotificationSettings({ pipeline, setPipeline }) {
                         type="checkbox"
                         checked={pipeline.events.includes(eventType.id)}
                         onChange={() => toggleEvent(eventType.id)}
-                        className="h-4 w-4 rounded-sm border-gray-300 text-teal-600 focus:ring-teal-500"
+                        className="h-4 w-4 rounded-sm border-slate-300 text-teal-600 focus:ring-teal-500"
                       />
                     </div>
                     <div className="ml-3 text-sm">
-                      <label htmlFor={eventType.id} className="font-medium text-gray-700">
+                      <label htmlFor={eventType.id} className="font-medium text-slate-700">
                         {eventType.name}
                       </label>
-                      <p className="text-gray-500">{eventType.description}</p>
+                      <p className="text-slate-500">{eventType.description}</p>
                     </div>
                   </div>
                 </div>
@@ -136,12 +136,12 @@ export function EmailNotificationSettings({ pipeline, setPipeline }) {
         {/*  <div className="mt-6">
           <fieldset>
             <legend className="sr-only">Conditions</legend>
-            <div className="text-base font-medium text-gray-900" aria-hidden="true">
+            <div className="text-base font-medium text-slate-900" aria-hidden="true">
               Conditions
             </div>
             <div className="mt-4 space-y-4">
-              <div className="rounded-sm border border-gray-100 bg-gray-50 px-2 py-5">
-                <p className="flex justify-center text-xs text-gray-600">
+              <div className="rounded-sm border border-slate-100 bg-slate-50 px-2 py-5">
+                <p className="flex justify-center text-xs text-slate-600">
                   conditional data piping coming soon
                 </p>
               </div>
diff --git a/apps/web/src/components/forms/pipelines/slackNotification.tsx b/apps/web/src/components/forms/pipelines/slackNotification.tsx
index ab7611d481..334ea37896 100644
--- a/apps/web/src/components/forms/pipelines/slackNotification.tsx
+++ b/apps/web/src/components/forms/pipelines/slackNotification.tsx
@@ -48,10 +48,10 @@ export function SlackNotificationSettings({ pipeline, setPipeline }) {
   };
 
   return (
-    <div className="space-y-8 divide-y divide-gray-200">
+    <div className="space-y-8 divide-y divide-slate-200">
       <div>
-        <h2 className="text-ui-gray-dark mb-3 text-xl font-bold">Configure Slack Notification</h2>
-        <p className="mt-1 text-sm text-gray-500">
+        <h2 className="text-ui-slate-dark mb-3 text-xl font-bold">Configure Slack Notification</h2>
+        <p className="mt-1 text-sm text-slate-500">
           This pipeline uses Slack webhooks. To learn more how to setup these please checkout the{" "}
           <Link href="https://api.slack.com/messaging/webhooks" target="_blank" className="underline">
             Slack Documentation
@@ -60,7 +60,7 @@ export function SlackNotificationSettings({ pipeline, setPipeline }) {
 
         <div className="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
           <div className="sm:col-span-4">
-            <label htmlFor="label" className="block text-sm font-medium text-gray-700">
+            <label htmlFor="label" className="block text-sm font-medium text-slate-700">
               Pipeline Label
             </label>
             <div className="mt-1">
@@ -71,14 +71,14 @@ export function SlackNotificationSettings({ pipeline, setPipeline }) {
                 placeholder="My Slack Notification Pipeline"
                 value={pipeline.label || ""}
                 onChange={(e) => updateField("label", e.target.value)}
-                className="block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500 sm:text-sm"
+                className="block w-full rounded-md border-slate-300 shadow-sm focus:border-teal-500 focus:ring-teal-500 sm:text-sm"
                 required
               />
             </div>
           </div>
 
           <div className="sm:col-span-4">
-            <label htmlFor="endpointUrl" className="block text-sm font-medium text-gray-700">
+            <label htmlFor="endpointUrl" className="block text-sm font-medium text-slate-700">
               Endpoint URL
             </label>
             <div className="mt-1">
@@ -94,11 +94,11 @@ export function SlackNotificationSettings({ pipeline, setPipeline }) {
                 placeholder="https://hooks.slack.com/services/ABC123/DEFGH456/IJKLM7890"
                 value={pipeline.config.endpointUrl || ""}
                 onChange={(e) => updateField("endpointUrl", e.target.value, "config")}
-                className="block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500 sm:text-sm"
+                className="block w-full rounded-md border-slate-300 shadow-sm focus:border-teal-500 focus:ring-teal-500 sm:text-sm"
                 required
               />
             </div>
-            <p className="mt-2 text-xs text-gray-500" id="url-description">
+            <p className="mt-2 text-xs text-slate-500" id="url-description">
               The Webhook URL provided by Slack
             </p>
           </div>
@@ -107,13 +107,13 @@ export function SlackNotificationSettings({ pipeline, setPipeline }) {
 
       <div className="pt-8">
         <div>
-          <h3 className="text-lg font-medium leading-6 text-gray-900">Advanced Settings</h3>
-          <p className="mt-1 text-sm text-gray-500">Set up this pipeline to fit your needs.</p>
+          <h3 className="text-lg font-medium leading-6 text-slate-900">Advanced Settings</h3>
+          <p className="mt-1 text-sm text-slate-500">Set up this pipeline to fit your needs.</p>
         </div>
         <div className="mt-6">
           <fieldset>
             <legend className="sr-only">Events</legend>
-            <div className="text-base font-medium text-gray-900" aria-hidden="true">
+            <div className="text-base font-medium text-slate-900" aria-hidden="true">
               Events
             </div>
             <div className="mt-4 space-y-4">
@@ -127,14 +127,14 @@ export function SlackNotificationSettings({ pipeline, setPipeline }) {
                         type="checkbox"
                         checked={pipeline.events.includes(eventType.id)}
                         onChange={() => toggleEvent(eventType.id)}
-                        className="h-4 w-4 rounded-sm border-gray-300 text-teal-600 focus:ring-teal-500"
+                        className="h-4 w-4 rounded-sm border-slate-300 text-teal-600 focus:ring-teal-500"
                       />
                     </div>
                     <div className="ml-3 text-sm">
-                      <label htmlFor={eventType.id} className="font-medium text-gray-700">
+                      <label htmlFor={eventType.id} className="font-medium text-slate-700">
                         {eventType.name}
                       </label>
-                      <p className="text-gray-500">{eventType.description}</p>
+                      <p className="text-slate-500">{eventType.description}</p>
                     </div>
                   </div>
                 </div>
diff --git a/apps/web/src/components/forms/pipelines/webhook.tsx b/apps/web/src/components/forms/pipelines/webhook.tsx
index 6c4bb544f9..6a764e229d 100644
--- a/apps/web/src/components/forms/pipelines/webhook.tsx
+++ b/apps/web/src/components/forms/pipelines/webhook.tsx
@@ -46,16 +46,16 @@ export function WebhookSettings({ pipeline, setPipeline }) {
   };
 
   return (
-    <div className="space-y-8 divide-y divide-gray-200">
+    <div className="space-y-8 divide-y divide-slate-200">
       <div>
-        <h2 className="text-ui-gray-dark mb-3 text-xl font-bold">Configure Webhook</h2>
-        <p className="mt-1 text-sm text-gray-500">
+        <h2 className="text-ui-slate-dark mb-3 text-xl font-bold">Configure Webhook</h2>
+        <p className="mt-1 text-sm text-slate-500">
           Configure your webhook. To learn more about how webhooks work, please check out our docs.
         </p>
 
         <div className="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
           <div className="sm:col-span-4">
-            <label htmlFor="label" className="block text-sm font-medium text-gray-700">
+            <label htmlFor="label" className="block text-sm font-medium text-slate-700">
               Webhook Label
             </label>
             <div className="mt-1">
@@ -66,14 +66,14 @@ export function WebhookSettings({ pipeline, setPipeline }) {
                 placeholder="My Webhook Pipeline"
                 value={pipeline.label || ""}
                 onChange={(e) => updateField("label", e.target.value)}
-                className="block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500 sm:text-sm"
+                className="block w-full rounded-md border-slate-300 shadow-sm focus:border-teal-500 focus:ring-teal-500 sm:text-sm"
                 required
               />
             </div>
           </div>
 
           <div className="sm:col-span-4">
-            <label htmlFor="endpointUrl" className="block text-sm font-medium text-gray-700">
+            <label htmlFor="endpointUrl" className="block text-sm font-medium text-slate-700">
               Endpoint URL
             </label>
             <div className="mt-1">
@@ -89,16 +89,16 @@ export function WebhookSettings({ pipeline, setPipeline }) {
                 value={pipeline.config.endpointUrl || ""}
                 placeholder="https://api.example.com"
                 onChange={(e) => updateField("endpointUrl", e.target.value, "config")}
-                className="block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500 sm:text-sm"
+                className="block w-full rounded-md border-slate-300 shadow-sm focus:border-teal-500 focus:ring-teal-500 sm:text-sm"
                 required
               />
             </div>
-            <p className="mt-2 text-xs text-gray-500" id="email-description">
+            <p className="mt-2 text-xs text-slate-500" id="email-description">
               Your server URL to which the data should be sent (https requiteal)
             </p>
           </div>
           <div className="sm:col-span-4">
-            <label htmlFor="secret" className="block text-sm font-medium text-gray-700">
+            <label htmlFor="secret" className="block text-sm font-medium text-slate-700">
               Secret
             </label>
             <div className="mt-1">
@@ -108,10 +108,10 @@ export function WebhookSettings({ pipeline, setPipeline }) {
                 id="secret"
                 value={pipeline.config.secret || ""}
                 onChange={(e) => updateField("secret", e.target.value, "config")}
-                className="block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500 sm:text-sm"
+                className="block w-full rounded-md border-slate-300 shadow-sm focus:border-teal-500 focus:ring-teal-500 sm:text-sm"
               />
             </div>
-            <p className="mt-2 text-xs text-gray-500" id="email-description">
+            <p className="mt-2 text-xs text-slate-500" id="email-description">
               We sign all event notification payloads with a SHA256 signature using this secret
             </p>
           </div>
@@ -120,13 +120,13 @@ export function WebhookSettings({ pipeline, setPipeline }) {
 
       <div className="pt-8">
         <div>
-          <h3 className="text-lg font-medium leading-6 text-gray-900">Advanced Settings</h3>
-          <p className="mt-1 text-sm text-gray-500">Set up this webhook to fit your needs.</p>
+          <h3 className="text-lg font-medium leading-6 text-slate-900">Advanced Settings</h3>
+          <p className="mt-1 text-sm text-slate-500">Set up this webhook to fit your needs.</p>
         </div>
         <div className="mt-6">
           <fieldset>
             <legend className="sr-only">Events</legend>
-            <div className="text-base font-medium text-gray-900" aria-hidden="true">
+            <div className="text-base font-medium text-slate-900" aria-hidden="true">
               Events
             </div>
             <div className="mt-4 space-y-4">
@@ -140,14 +140,14 @@ export function WebhookSettings({ pipeline, setPipeline }) {
                         type="checkbox"
                         checked={pipeline.events.includes(eventType.id)}
                         onChange={() => toggleEvent(eventType.id)}
-                        className="h-4 w-4 rounded-sm border-gray-300 text-teal-600 focus:ring-teal-500"
+                        className="h-4 w-4 rounded-sm border-slate-300 text-teal-600 focus:ring-teal-500"
                       />
                     </div>
                     <div className="ml-3 text-sm">
-                      <label htmlFor={eventType.id} className="font-medium text-gray-700">
+                      <label htmlFor={eventType.id} className="font-medium text-slate-700">
                         {eventType.name}
                       </label>
-                      <p className="text-gray-500">{eventType.description}</p>
+                      <p className="text-slate-500">{eventType.description}</p>
                     </div>
                   </div>
                 </div>
@@ -158,12 +158,12 @@ export function WebhookSettings({ pipeline, setPipeline }) {
         <div className="mt-6">
           <fieldset>
             <legend className="sr-only">Conditions</legend>
-            <div className="text-base font-medium text-gray-900" aria-hidden="true">
+            <div className="text-base font-medium text-slate-900" aria-hidden="true">
               Conditions
             </div>
             <div className="mt-4 space-y-4">
-              <div className="rounded-sm border border-gray-100 bg-gray-50 px-2 py-5">
-                <p className="flex justify-center text-xs text-gray-600">
+              <div className="rounded-sm border border-slate-100 bg-slate-50 px-2 py-5">
+                <p className="flex justify-center text-xs text-slate-600">
                   conditional data piping coming soon
                 </p>
               </div>
diff --git a/apps/web/src/components/forms/pmf/PMFPage.tsx b/apps/web/src/components/forms/pmf/PMFPage.tsx
index 77fb98ab60..7429ca5f08 100644
--- a/apps/web/src/components/forms/pmf/PMFPage.tsx
+++ b/apps/web/src/components/forms/pmf/PMFPage.tsx
@@ -49,8 +49,8 @@ export default function PMFPage() {
   return (
     <div>
       <main className="mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="border-b border-gray-200 pt-8">
-          <h1 className="pb-6 text-4xl font-bold tracking-tight text-gray-900">{form.label}</h1>
+        <div className="border-b border-slate-200 pt-8">
+          <h1 className="pb-6 text-4xl font-bold tracking-tight text-slate-900">{form.label}</h1>
           <TabNavigation tabs={tabs} currentTab={currentTab} setCurrentTab={setCurrentTab} />
         </div>
         {currentTab === "Results" ? (
diff --git a/apps/web/src/components/forms/pmf/PMFTimeline.tsx b/apps/web/src/components/forms/pmf/PMFTimeline.tsx
index a4e3fccb82..61769d3384 100644
--- a/apps/web/src/components/forms/pmf/PMFTimeline.tsx
+++ b/apps/web/src/components/forms/pmf/PMFTimeline.tsx
@@ -67,7 +67,7 @@ export default function PMFTimeline({ submissions }) {
                 <div className="relative pb-8">
                   {submissionIdx !== submissions.length - 1 ? (
                     <span
-                      className="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
+                      className="absolute top-4 left-4 -ml-px h-full w-0.5 bg-slate-200"
                       aria-hidden="true"
                     />
                   ) : null}
@@ -76,7 +76,7 @@ export default function PMFTimeline({ submissions }) {
                       <span
                         className={clsx(
                           "bg-white",
-                          "flex h-8 w-8 items-center justify-center rounded-full ring-8 ring-gray-50"
+                          "flex h-8 w-8 items-center justify-center rounded-full ring-8 ring-slate-50"
                         )}>
                         {submission.data.disappointment === "veryDisappointed" ? (
                           <VeryDisappointedIcon className="h-6 w-6 text-white" aria-hidden="true" />
@@ -104,22 +104,22 @@ export default function PMFTimeline({ submissions }) {
                             </span>
                           ) : null}
 
-                          <div className="text-sm text-gray-400">
+                          <div className="text-sm text-slate-400">
                             <time dateTime={convertDateTimeString(submission.createdAt)}>
                               {convertDateTimeString(submission.createdAt)}
                             </time>
                           </div>
                         </div>
                         <div className="mt-3">
-                          <ul className="whitespace-pre-wrap text-sm text-gray-500">
+                          <ul className="whitespace-pre-wrap text-sm text-slate-500">
                             {Object.entries(MergeWithSchema(submission.data, form.schema)).map(
                               ([key, value]) => (
                                 <li key={key} className="py-5">
-                                  <p className="text-sm font-semibold text-gray-800">{key}</p>
+                                  <p className="text-sm font-semibold text-slate-800">{key}</p>
                                   <p
                                     className={clsx(
-                                      value ? "text-gray-600" : "text-gray-400",
-                                      "whitespace-pre-line pt-1 text-sm text-gray-600"
+                                      value ? "text-slate-600" : "text-slate-400",
+                                      "whitespace-pre-line pt-1 text-sm text-slate-600"
                                     )}>
                                     {value.toString()}
                                   </p>
@@ -129,44 +129,44 @@ export default function PMFTimeline({ submissions }) {
                           </ul>
                         </div>
                       </div>
-                      <div className=" bg-gray-50 p-4 sm:p-6">
+                      <div className=" bg-slate-50 p-4 sm:p-6">
                         <div className="flex w-full justify-between gap-4">
                           <div>
-                            <p className="text-sm font-thin text-gray-500">User</p>
+                            <p className="text-sm font-thin text-slate-500">User</p>
                             {submission.customerEmail ? (
                               <Link
-                                className="text-sm font-medium text-gray-700"
+                                className="text-sm font-medium text-slate-700"
                                 href={`${form.id.startsWith("demo") ? "/demo" : ""}/organisations/${
                                   router.query.organisationId
                                 }/customers/${submission.customerEmail}`}>
                                 {submission.customerEmail}
                               </Link>
                             ) : (
-                              <p className="text-sm text-gray-500">Anonymous</p>
+                              <p className="text-sm text-slate-500">Anonymous</p>
                             )}
                           </div>
                           <div>
-                            <p className="text-sm font-thin text-gray-500">Device</p>
-                            <p className="text-sm text-gray-500">
+                            <p className="text-sm font-thin text-slate-500">Device</p>
+                            <p className="text-sm text-slate-500">
                               {parseUserAgent(submission.meta.userAgent)}
                             </p>
                           </div>
                           <div>
-                            <p className="text-sm font-thin text-gray-500">Page</p>
-                            <p className="text-sm text-gray-500">{submission.data.pageUrl}</p>
+                            <p className="text-sm font-thin text-slate-500">Page</p>
+                            <p className="text-sm text-slate-500">{submission.data.pageUrl}</p>
                           </div>
                         </div>
 
                         <div className="mt-8 flex w-full justify-end">
                           {!submission.archived ? (
                             <button
-                              className="text-base text-gray-500 underline"
+                              className="text-base text-slate-500 underline"
                               onClick={() => toggleArchiveSubmission(submission)}>
                               Archive
                             </button>
                           ) : (
                             <button
-                              className="text-base text-gray-500 underline"
+                              className="text-base text-slate-500 underline"
                               onClick={() => toggleArchiveSubmission(submission)}>
                               Restore
                             </button>
diff --git a/apps/web/src/components/forms/pmf/SetupInstructions.tsx b/apps/web/src/components/forms/pmf/SetupInstructions.tsx
index 2f07a8ad6e..fa8906498c 100644
--- a/apps/web/src/components/forms/pmf/SetupInstructions.tsx
+++ b/apps/web/src/components/forms/pmf/SetupInstructions.tsx
@@ -13,9 +13,171 @@ export default function SetupInstructions({}) {
   }, []);
 
   return (
+    <div>
+      <div className="grid max-w-6xl grid-cols-5 gap-16 py-4">
+        <div className="col-span-3">
+          <div>
+            <div className="mb-6">
+              <h2 className="mb-3 text-3xl font-bold text-slate-800">Quick Start Guides</h2>
+              <p>You can install the PMF Survey with NPM and with a JavaScript embed:</p>
+            </div>
+            <div>
+              <h3 className="block text-xl font-semibold text-slate-800">NPM Install</h3>
+              <ol className="my-2 list-decimal pl-4 leading-8 text-slate-700">
+                <li>Install PMF Survey Box with NPM</li>
+                <li>
+                  Set up the config file according to your needs.{" "}
+                  <a
+                    target="_blank"
+                    rel="noreferrer"
+                    className="text-brand-dark font-bold underline"
+                    href="https://formbricks.com/docs/best-practices/pmf-survey">
+                    Read the docs
+                  </a>{" "}
+                  for more info.
+                </li>
+                <li>You&apos;re done! Your submissions will show up in the Results tab.</li>
+              </ol>
+              <h4 className="my-2 block text-lg font-semibold text-slate-800">NPM Install</h4>
+              <div className="col-span-3 rounded-md bg-black p-4 text-sm font-light text-slate-200">
+                <pre>
+                  <code className="language-html whitespace-pre-wrap">{`npm install @formbricks/pmf`}</code>
+                </pre>
+              </div>
+              <h4 className="my-2 block text-lg font-semibold text-slate-800">Example config</h4>
+              <div className="col-span-3 rounded-md bg-black p-4 text-sm font-light text-slate-200">
+                <pre>
+                  <code className="language-html whitespace-pre-wrap">{`config: {
+        formbricksUrl: "${window.location.protocol}//${window.location.host}",
+        formId: "${formId}",
+        containerId: "formbricks",
+        customer: {
+          id: "uUid", // fill dynamically e.g. from session object
+          name: "User name", // fill dynamically 
+          email: "example@fmail.com", // fill dynamically 
+        },
+      }`}</code>
+                </pre>
+              </div>
+            </div>
+
+            <hr className="my-10 text-slate-800" />
+
+            <div>
+              <h3 className="block text-xl font-semibold text-slate-800">Javascript Embed</h3>
+              <ol className="mt-2 list-decimal pl-4 leading-8 text-slate-700">
+                <li>Copy the Javascript snippet below into the HEAD of your HTML file.</li>
+                <li>Set up a button with the onClick handler below to let your users open the widget.</li>
+                <li>
+                  Set up the config file according to your needs.{" "}
+                  <a
+                    target="_blank"
+                    rel="noreferrer"
+                    className="text-brand-dark font-bold underline"
+                    href="https://formbricks.com/docs/best-practices/pmf-survey">
+                    Read the docs
+                  </a>{" "}
+                  for more info.
+                </li>
+                <li>You&apos;re done! Your submissions will show up in the Results tab.</li>
+              </ol>
+              <div className="mt-6">
+                <h4 className="mb-2 block text-lg font-semibold text-slate-800">
+                  Add to HTML &#60;head&#62;{" "}
+                </h4>
+                <div className="col-span-3 rounded-md bg-black p-4 text-sm font-light text-slate-200">
+                  <pre>
+                    <code className="language-html whitespace-pre-wrap">
+                      {`<!-- HTML header script -->
+<script src="https://cdn.jsdelivr.net/npm/@formbricks/pmf@0.1.0/dist/index.umd.js" defer></script>
+
+<script>
+window.formbricks = {
+  ...window.formbricks,
+  config: {
+    formbricksUrl: "${window.location.protocol}//${window.location.host}",
+    formId: "${formId}",
+    containerId: "formbricks-container",
+  },
+};
+</script>`}
+                    </code>
+                  </pre>
+                </div>
+              </div>
+
+              <div className="mt-3">
+                <h4 className="my-2 block text-lg font-semibold text-slate-800">Setup Button onClick</h4>
+                <div className="col-span-3 rounded-md bg-black p-4 text-sm font-light text-slate-200">
+                  <pre>
+                    <code className="language-html whitespace-pre-wrap">
+                      {`
+<!-- Element to hold the survey -->
+<div id="formbricks-container"></div>`}
+                    </code>
+                  </pre>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="col-span-2">
+          <div className="rounded-lg bg-slate-100 p-8">
+            <label htmlFor="formId" className="block text-xl font-bold text-slate-800">
+              Your PMF Survey ID
+            </label>
+            <div className="mt-3">
+              <input
+                id="formId"
+                type="text"
+                className="focus:border-brand focus:ring-brand block w-full rounded-md border-slate-300 shadow-sm disabled:bg-slate-100 sm:text-sm"
+                value={formId}
+                disabled
+              />
+
+              <Button
+                variant="primary"
+                className="mt-2 w-full justify-center"
+                onClick={() => {
+                  navigator.clipboard.writeText(formId);
+                  toast("Copied form ID to clipboard");
+                }}>
+                Copy to clipboard
+              </Button>
+            </div>
+            <div className="mt-10">
+              <h4 className="my-2 block text-xl font-semibold text-slate-800">PMF Survey Docs</h4>
+              <p>Get detailed instructions in our Docs:</p>
+              <Button
+                variant="secondary"
+                target="_blank"
+                className="mt-2 w-full justify-center"
+                onClick={() => router.push("https://formbricks.com/docs")}>
+                Docs
+              </Button>
+            </div>
+            <div className="mt-10">
+              <h4 className="my-2 block text-xl font-semibold text-slate-800">Need help? Join Discord!</h4>
+              <p>Got a question? We&apos;re happy to help:</p>
+              <Button
+                variant="secondary"
+                target="_blank"
+                className="bg-purple mt-2 w-full justify-center"
+                onClick={() => router.push("https://formbricks.com/discord")}>
+                Join Discord
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    /* 
+
+
     <div>
       <div className="grid grid-cols-5 gap-8 py-4">
-        <div className="col-span-3 text-sm text-gray-600">
+        <div className="col-span-3 text-sm text-slate-600">
           <h3 className="block text-lg font-semibold text-slate-800">How to get started</h3>
           <ol className="mt-2 list-decimal pl-4 leading-8 text-slate-700">
             <li>Copy the Javascript widget below into your application</li>
@@ -39,19 +201,19 @@ export default function SetupInstructions({}) {
         <div className="col-span-2">
           <div>
             <label htmlFor="formId" className="block text-lg font-semibold text-slate-800">
-              Your form ID
+              Your PMF Survey ID
             </label>
             <div className="mt-3 w-96">
               <input
                 id="formId"
                 type="text"
-                className="focus:border-brand focus:ring-brand block w-full rounded-md border-gray-300 shadow-sm disabled:bg-gray-100 sm:text-sm"
+                className="focus:border-brand focus:ring-brand block w-full rounded-md border-slate-300 shadow-sm disabled:bg-slate-100 sm:text-sm"
                 value={formId}
                 disabled
               />
 
               <Button
-                variant="secondary"
+                variant="primary"
                 className="mt-2 w-full justify-center"
                 onClick={() => {
                   navigator.clipboard.writeText(formId);
@@ -63,7 +225,7 @@ export default function SetupInstructions({}) {
           </div>
         </div>
       </div>
-      <hr className="my-4 text-gray-800" />
+      <hr className="my-4 text-slate-800" />
       <div className="py-6">
         <label htmlFor="formId" className="block text-lg font-semibold text-slate-800">
           Javascript Snippet
@@ -73,7 +235,7 @@ export default function SetupInstructions({}) {
           hold the survey into the body to start using the Formbricks PMF survey.
         </p>
         <div className="mt-3">
-          <div className="col-span-3 rounded-md bg-black p-4 text-sm font-light text-gray-200">
+          <div className="col-span-3 rounded-md bg-black p-4 text-sm font-light text-slate-200">
             <pre>
               <code className="language-html whitespace-pre-wrap">
                 {`<!-- HTML header script -->
@@ -97,6 +259,6 @@ window.formbricks = {
           </div>
         </div>
       </div>
-    </div>
+    </div> */
   );
 }
diff --git a/apps/web/src/components/forms/shared/FilterNavigation.tsx b/apps/web/src/components/forms/shared/FilterNavigation.tsx
index bae076b38b..59419f17c2 100644
--- a/apps/web/src/components/forms/shared/FilterNavigation.tsx
+++ b/apps/web/src/components/forms/shared/FilterNavigation.tsx
@@ -154,8 +154,8 @@ export default function FilterNavigation({
               }}
               className={clsx(
                 option.active
-                  ? "bg-gray-200 text-gray-900"
-                  : "text-gray-600 hover:bg-gray-100 hover:text-gray-900",
+                  ? "bg-slate-200 text-slate-900"
+                  : "text-slate-600 hover:bg-slate-100 hover:text-slate-900",
                 "group flex w-full items-center rounded-md px-3 py-2 text-sm font-medium"
               )}
               aria-current={option.active ? "page" : undefined}>
@@ -164,7 +164,7 @@ export default function FilterNavigation({
               {/* {item.count ? (
               <span
                 className={clsx(
-                  item.id === currentFilter ? "bg-white" : "bg-gray-100 group-hover:bg-white",
+                  item.id === currentFilter ? "bg-white" : "bg-slate-100 group-hover:bg-white",
                   "ml-auto inline-block rounded-full py-0.5 px-3 text-xs"
                 )}>
                 {item.count}
diff --git a/apps/web/src/components/forms/submissions/SubmissionDisplay.tsx b/apps/web/src/components/forms/submissions/SubmissionDisplay.tsx
index 34a6217d30..c6b3011118 100644
--- a/apps/web/src/components/forms/submissions/SubmissionDisplay.tsx
+++ b/apps/web/src/components/forms/submissions/SubmissionDisplay.tsx
@@ -6,14 +6,14 @@ import clsx from "clsx";
 export default function SubmissionDisplay({ schema, submission }) {
   return (
     <div className="flow-root">
-      <ul role="list" className="divide-ui-gray-light divide-y">
+      <ul role="list" className="divide-ui-slate-light divide-y">
         {Object.entries(MergeWithSchema(submission.data, schema)).map(([key, value]) => (
           <li key={key} className="py-5">
-            <p className="text-sm font-semibold text-gray-800">{key}</p>
+            <p className="text-sm font-semibold text-slate-800">{key}</p>
             <p
               className={clsx(
-                value ? "text-gray-600" : "text-gray-400",
-                "whitespace-pre-line pt-1 text-sm text-gray-600"
+                value ? "text-slate-600" : "text-slate-400",
+                "whitespace-pre-line pt-1 text-sm text-slate-600"
               )}>
               {value.toString()}
             </p>
diff --git a/apps/web/src/components/forms/submissions/SubmissionsPage.tsx b/apps/web/src/components/forms/submissions/SubmissionsPage.tsx
index 75c049f168..a6440bdda3 100644
--- a/apps/web/src/components/forms/submissions/SubmissionsPage.tsx
+++ b/apps/web/src/components/forms/submissions/SubmissionsPage.tsx
@@ -75,8 +75,8 @@ export default function SubmissionsPage() {
             {!activeSubmission ? (
               <button
                 type="button"
-                className="relative mx-auto mt-8 block w-96 rounded-lg border-2 border-dashed border-gray-300 p-12 text-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2">
-                <span className="mt-2 block text-sm font-medium text-gray-500">
+                className="relative mx-auto mt-8 block w-96 rounded-lg border-2 border-dashed border-slate-300 p-12 text-center hover:border-slate-400 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2">
+                <span className="mt-2 block text-sm font-medium text-slate-500">
                   Select a response on the left to see the details here
                 </span>
               </button>
@@ -85,7 +85,7 @@ export default function SubmissionsPage() {
                 <div className="bg-white px-4 py-5 shadow sm:px-12 sm:pb-4 sm:pt-12">
                   <div className="grid grid-cols-2 gap-8 divide-x">
                     <div className="flow-root">
-                      <h1 className="mb-8 text-gray-700">
+                      <h1 className="mb-8 text-slate-700">
                         {convertDateTimeString(activeSubmission.createdAt.toString())}
                       </h1>
                       <SubmissionDisplay submission={activeSubmission} schema={form.schema} />
@@ -94,7 +94,7 @@ export default function SubmissionsPage() {
                 </div>
                 <div className="w-full">
                   <button
-                    className="flex w-full items-center justify-center gap-2 border border-transparent bg-gray-300 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-red-500 focus:outline-none"
+                    className="flex w-full items-center justify-center gap-2 border border-transparent bg-slate-300 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-red-500 focus:outline-none"
                     onClick={() => {
                       if (
                         confirm("Are you sure you want to delete this submission? It will be gone forever!")
@@ -110,16 +110,16 @@ export default function SubmissionsPage() {
             )}
           </div>
         </main>
-        <aside className="border-ui-gray-light order-first flex h-full flex-1 flex-shrink-0 flex-col border-r md:w-96 md:flex-none">
+        <aside className="border-ui-slate-light order-first flex h-full flex-1 flex-shrink-0 flex-col border-r md:w-96 md:flex-none">
           {/*  <DownloadResponses formId={params.formId} /> */}
           <div className="flex justify-between pt-4 pb-2">
-            <h2 className="px-5 text-lg font-medium text-gray-900">Responses</h2>
+            <h2 className="px-5 text-lg font-medium text-slate-900">Responses</h2>
             <Switch.Group as="div" className="mr-3 flex items-center">
               <Switch
                 checked={finishedOnly}
                 onChange={setFinishedOnly}
                 className={clsx(
-                  finishedOnly ? "bg-teal-600" : "bg-gray-200",
+                  finishedOnly ? "bg-teal-600" : "bg-slate-200",
                   "relative inline-flex h-5 w-8 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2"
                 )}>
                 <span
@@ -136,7 +136,7 @@ export default function SubmissionsPage() {
             </Switch.Group>
           </div>
           {filteredSubmissions.length === 0 ? (
-            <p className="mt-3 px-5 text-sm text-gray-500">No responses yet</p>
+            <p className="mt-3 px-5 text-sm text-slate-500">No responses yet</p>
           ) : (
             <RadioGroup
               value={activeSubmission}
@@ -144,13 +144,13 @@ export default function SubmissionsPage() {
               className="mb-32 min-h-0 flex-1 overflow-y-auto shadow-inner"
               as="div">
               <div className="relative">
-                <ul className="divide-ui-gray-light relative z-0 divide-y">
+                <ul className="divide-ui-slate-light relative z-0 divide-y">
                   {filteredSubmissions.map((submission) => (
                     <RadioGroup.Option
                       key={submission.id}
                       value={submission}
                       className={({ checked }) =>
-                        clsx(checked ? "bg-gray-100" : "", "relative flex items-center space-x-3 px-6 py-5 ")
+                        clsx(checked ? "bg-slate-100" : "", "relative flex items-center space-x-3 px-6 py-5 ")
                       }>
                       <div className="min-w-0 flex-1">
                         <button
@@ -158,7 +158,7 @@ export default function SubmissionsPage() {
                           className="w-full text-left focus:outline-none">
                           {/* Extend touch target to entire panel */}
                           <span className="absolute inset-0" aria-hidden="true" />
-                          <p className="text-sm font-medium text-gray-900">
+                          <p className="text-sm font-medium text-slate-900">
                             {submission.finished ? "✅" : "💬"} {convertDateTimeString(submission.createdAt)}
                           </p>
                         </button>
diff --git a/apps/web/src/components/forms/summary/SummaryPage.tsx b/apps/web/src/components/forms/summary/SummaryPage.tsx
index a82c152fba..0dd54637dc 100644
--- a/apps/web/src/components/forms/summary/SummaryPage.tsx
+++ b/apps/web/src/components/forms/summary/SummaryPage.tsx
@@ -40,7 +40,7 @@ export default function SummaryPage() {
   return (
     <div className="mx-auto py-8 sm:px-6 lg:px-8">
       <header className="mb-8">
-        <h1 className="text-3xl font-bold leading-tight tracking-tight text-gray-900">
+        <h1 className="text-3xl font-bold leading-tight tracking-tight text-slate-900">
           Summary - {form.label}
           <span className="text-brand-dark ml-4 inline-flex items-center rounded-md border border-teal-100 bg-teal-50 px-2.5 py-0.5 text-sm font-medium">
             {organisation.name}
@@ -52,10 +52,10 @@ export default function SummaryPage() {
       </div>
       <div className="relative my-10">
         <div className="absolute inset-0 flex items-center" aria-hidden="true">
-          <div className="w-full border-t border-gray-300" />
+          <div className="w-full border-t border-slate-300" />
         </div>
         <div className="relative flex justify-center">
-          <span className="bg-gray-50 px-3 text-lg font-medium text-gray-900">Questions &amp; Answers</span>
+          <span className="bg-slate-50 px-3 text-lg font-medium text-slate-900">Questions &amp; Answers</span>
         </div>
       </div>
       {Object.keys(form.schema).length === 0 ? (
@@ -104,7 +104,7 @@ export default function SummaryPage() {
                 <div className="py-12">
                   {["email", "number", "phone", "search", "text", "textarea", "url"].includes(elem.type) ? (
                     <div>
-                      <h2 className="mb-6 text-xl font-bold leading-tight tracking-tight text-gray-900">
+                      <h2 className="mb-6 text-xl font-bold leading-tight tracking-tight text-slate-900">
                         {elem.label}
                         <span className="text-brand-dark ml-4 inline-flex items-center rounded-md border border-teal-100 bg-teal-50 px-2.5 py-0.5 text-sm font-medium">
                           {capitalizeFirstLetter(elem.type)}
@@ -114,7 +114,7 @@ export default function SummaryPage() {
                     </div>
                   ) : ["checkbox", "radio"].includes(elem.type) ? (
                     <div>
-                      <h2 className="mb-6 text-xl font-bold leading-tight tracking-tight text-gray-900">
+                      <h2 className="mb-6 text-xl font-bold leading-tight tracking-tight text-slate-900">
                         {elem.label}
                         <span className="text-brand-dark ml-4 inline-flex items-center rounded-md border border-teal-100 bg-teal-50 px-2.5 py-0.5 text-sm font-medium">
                           {capitalizeFirstLetter(elem.type)}
@@ -124,7 +124,7 @@ export default function SummaryPage() {
                     </div>
                   ) : ["nps"].includes(elem.type) ? (
                     <div>
-                      <h2 className="mb-6 text-xl font-bold leading-tight tracking-tight text-gray-900">
+                      <h2 className="mb-6 text-xl font-bold leading-tight tracking-tight text-slate-900">
                         {elem.label}
                         <span className="text-brand-dark ml-4 inline-flex items-center rounded-md border border-teal-100 bg-teal-50 px-2.5 py-0.5 text-sm font-medium">
                           {capitalizeFirstLetter(elem.type)}
diff --git a/apps/web/src/components/integrations/IconCheckbox.tsx b/apps/web/src/components/integrations/IconCheckbox.tsx
index 844782a63b..f6295c4c4e 100644
--- a/apps/web/src/components/integrations/IconCheckbox.tsx
+++ b/apps/web/src/components/integrations/IconCheckbox.tsx
@@ -35,7 +35,7 @@ export default function IconCheckbox({
                 <label
                   htmlFor={`${page.id}-${element.id}-${option.value}`}
                   key={`${page.id}-${element.id}-${option.value}`}>
-                  <div className="drop-shadow-card duration-120 relative w-32 cursor-default rounded-lg border border-gray-200 bg-white p-6 text-center transition-all ease-in-out hover:scale-105">
+                  <div className="drop-shadow-card duration-120 relative w-32 cursor-default rounded-lg border border-slate-200 bg-white p-6 text-center transition-all ease-in-out hover:scale-105">
                     <div className="absolute right-4 top-3">
                       <input
                         id={`${page.id}-${element.id}-${option.value}`}
diff --git a/apps/web/src/components/integrations/ThankYouPage.tsx b/apps/web/src/components/integrations/ThankYouPage.tsx
index 9c7d0a789d..d80fc89295 100644
--- a/apps/web/src/components/integrations/ThankYouPage.tsx
+++ b/apps/web/src/components/integrations/ThankYouPage.tsx
@@ -1,6 +1,6 @@
 export default function ThankYouPage() {
   return (
-    <div className="mt-6 mb-10 max-w-2xl rounded-lg border border-gray-200 bg-white p-6 text-center">
+    <div className="mt-6 mb-10 max-w-2xl rounded-lg border border-slate-200 bg-white p-6 text-center">
       <h3 className="text-brand-dark mt-2 text-lg font-bold">Thank you!</h3>
       <p className="py-2 text-sm text-slate-400">
         We&apos;ll send you a message once we built these integrations.
diff --git a/apps/web/src/components/layout/LayoutApp.tsx b/apps/web/src/components/layout/LayoutApp.tsx
index 4a64bcf1f2..aacbef2d06 100644
--- a/apps/web/src/components/layout/LayoutApp.tsx
+++ b/apps/web/src/components/layout/LayoutApp.tsx
@@ -67,8 +67,8 @@ export default function LayoutApp({ children }) {
         <title>Formbricks</title>
         <meta name="description" content="Build user research into your product" />
       </Head>
-      <div className="h-screen">
-        <Disclosure as="nav" className="border-b border-gray-200 bg-white">
+      <div className="">
+        <Disclosure as="nav" className="border-b border-slate-200 bg-white">
           {({ open }) => (
             <>
               <div className="mx-auto w-full px-4 sm:px-6 lg:px-8">
@@ -83,7 +83,7 @@ export default function LayoutApp({ children }) {
                   <div className="hidden sm:ml-6 sm:flex sm:items-center">
                     {/* <button
                       type="button"
-                      className="rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+                      className="rounded-full bg-white p-1 text-slate-400 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
                       <span className="sr-only">View notifications</span>
                       <BellIcon className="h-6 w-6" aria-hidden="true" />
                     </button> */}
@@ -110,10 +110,10 @@ export default function LayoutApp({ children }) {
                         leave="transition ease-in duration-75"
                         leaveFrom="transform opacity-100 scale-100"
                         leaveTo="transform opacity-0 scale-95">
-                        <Menu.Items className="absolute right-0 z-10 mt-2 w-48 origin-top-right divide-y divide-gray-100 rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                        <Menu.Items className="absolute right-0 z-10 mt-2 w-48 origin-top-right divide-y divide-slate-100 rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                           <div className="px-4 py-3">
                             <p className="text-sm">Signed in as</p>
-                            <p className="truncate text-sm font-medium text-gray-900">{session.user.name}</p>
+                            <p className="truncate text-sm font-medium text-slate-900">{session.user.name}</p>
                           </div>
                           <div className="py-1">
                             {userNavigation.map((item) => (
@@ -122,8 +122,8 @@ export default function LayoutApp({ children }) {
                                   <Link
                                     href={item.href}
                                     className={clsx(
-                                      active ? "bg-gray-100" : "",
-                                      "flex justify-start px-4 py-2 text-sm text-gray-700"
+                                      active ? "bg-slate-100" : "",
+                                      "flex justify-start px-4 py-2 text-sm text-slate-700"
                                     )}>
                                     {item.name}
                                   </Link>
@@ -135,7 +135,7 @@ export default function LayoutApp({ children }) {
                             memberships.map((membership) => (
                               <>
                                 <div className="px-4 py-3">
-                                  <p className="truncate text-sm font-medium text-gray-900">
+                                  <p className="truncate text-sm font-medium text-slate-900">
                                     {membership.organisation.name}
                                   </p>
                                 </div>
@@ -145,8 +145,8 @@ export default function LayoutApp({ children }) {
                                       <Link
                                         href={`/organisations/${membership.organisation.id}/settings/billing`}
                                         className={clsx(
-                                          active ? "bg-gray-100" : "",
-                                          "flex justify-start px-4 py-2 text-sm text-gray-700"
+                                          active ? "bg-slate-100" : "",
+                                          "flex justify-start px-4 py-2 text-sm text-slate-700"
                                         )}>
                                         Billing
                                       </Link>
@@ -161,8 +161,8 @@ export default function LayoutApp({ children }) {
                                 <button
                                   onClick={() => signOut()}
                                   className={clsx(
-                                    active ? "bg-gray-100" : "",
-                                    "flex w-full justify-start px-4 py-2 text-sm text-gray-700"
+                                    active ? "bg-slate-100" : "",
+                                    "flex w-full justify-start px-4 py-2 text-sm text-slate-700"
                                   )}>
                                   Sign out
                                 </button>
@@ -175,7 +175,7 @@ export default function LayoutApp({ children }) {
                   </div>
                   <div className="-mr-2 flex items-center sm:hidden">
                     {/* Mobile menu button */}
-                    <Disclosure.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+                    <Disclosure.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-slate-400 hover:bg-slate-100 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
                       <span className="sr-only">Open main menu</span>
                       {open ? (
                         <XMarkIcon className="block h-6 w-6" aria-hidden="true" />
@@ -188,7 +188,7 @@ export default function LayoutApp({ children }) {
               </div>
 
               <Disclosure.Panel className="sm:hidden">
-                <div className="border-t border-gray-200 pt-4 pb-3">
+                <div className="border-t border-slate-200 pt-4 pb-3">
                   <div className="flex items-center px-4">
                     <div className="flex-shrink-0">
                       <Image
@@ -198,12 +198,12 @@ export default function LayoutApp({ children }) {
                       />
                     </div>
                     <div className="ml-3">
-                      <div className="text-base font-medium text-gray-800">{session.user.name}</div>
-                      <div className="text-sm font-medium text-gray-500">{session.user.email}</div>
+                      <div className="text-base font-medium text-slate-800">{session.user.name}</div>
+                      <div className="text-sm font-medium text-slate-500">{session.user.email}</div>
                     </div>
                     {/*  <button
                       type="button"
-                      className="ml-auto flex-shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+                      className="ml-auto flex-shrink-0 rounded-full bg-white p-1 text-slate-400 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
                       <span className="sr-only">View notifications</span>
                       <BellIcon className="h-6 w-6" aria-hidden="true" />
                     </button> */}
@@ -214,7 +214,7 @@ export default function LayoutApp({ children }) {
                         key={item.name}
                         as="a"
                         href={item.href}
-                        className="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800">
+                        className="block px-4 py-2 text-base font-medium text-slate-500 hover:bg-slate-100 hover:text-slate-800">
                         {item.name}
                       </Disclosure.Button>
                     ))}
@@ -225,7 +225,7 @@ export default function LayoutApp({ children }) {
           )}
         </Disclosure>
 
-        <main className="h-full bg-gray-50">{children}</main>
+        <main className="min-h-screen bg-slate-50">{children}</main>
         <ToastContainer />
       </div>
     </>
diff --git a/apps/web/src/components/layout/LayoutAuth.tsx b/apps/web/src/components/layout/LayoutAuth.tsx
index 255ec5307f..c95dc5c92b 100644
--- a/apps/web/src/components/layout/LayoutAuth.tsx
+++ b/apps/web/src/components/layout/LayoutAuth.tsx
@@ -20,10 +20,10 @@ export default function LayoutAuth({ title = "Formbricks HQ", children }: Props)
       <Head>
         <title>{title}</title>
       </Head>
-      <div className="min-h-screen bg-gray-50">
+      <div className="min-h-screen bg-slate-50">
         {" "}
         <div className="isolate bg-white">
-          <div className="bg-gradient-radial flex min-h-screen from-gray-200 to-gray-50">
+          <div className="bg-gradient-radial flex min-h-screen from-slate-200 to-slate-50">
             <div className="mx-auto flex flex-1 flex-col justify-center px-4 py-12 sm:px-6 lg:flex-none lg:px-20 xl:px-24">
               <div className="mx-auto w-full max-w-sm rounded-xl bg-white p-8 shadow-xl lg:w-96">
                 <div className="mb-8 text-center">
diff --git a/apps/web/src/components/layout/LayoutDemo.tsx b/apps/web/src/components/layout/LayoutDemo.tsx
index 1740b62437..3024c5a2a4 100644
--- a/apps/web/src/components/layout/LayoutDemo.tsx
+++ b/apps/web/src/components/layout/LayoutDemo.tsx
@@ -18,7 +18,7 @@ export default function LayoutDemo({ children }) {
         <meta name="description" content="Build user research into your product" />
       </Head>
       <div className="min-h-screen">
-        <Disclosure as="nav" className="border-b border-gray-200 bg-white">
+        <Disclosure as="nav" className="border-b border-slate-200 bg-white">
           {({ open }) => (
             <>
               <div className="mx-auto w-full px-4 sm:px-6 lg:px-8">
@@ -33,7 +33,7 @@ export default function LayoutDemo({ children }) {
                   <div className="hidden sm:ml-6 sm:flex sm:items-center">
                     {/* <button
                       type="button"
-                      className="rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+                      className="rounded-full bg-white p-1 text-slate-400 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
                       <span className="sr-only">View notifications</span>
                       <BellIcon className="h-6 w-6" aria-hidden="true" />
                     </button> */}
@@ -60,10 +60,10 @@ export default function LayoutDemo({ children }) {
                         leave="transition ease-in duration-75"
                         leaveFrom="transform opacity-100 scale-100"
                         leaveTo="transform opacity-0 scale-95">
-                        <Menu.Items className="absolute right-0 z-10 mt-2 w-48 origin-top-right divide-y divide-gray-100 rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                        <Menu.Items className="absolute right-0 z-10 mt-2 w-48 origin-top-right divide-y divide-slate-100 rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                           <div className="px-4 py-3">
                             <p className="text-sm">Signed in as</p>
-                            <p className="truncate text-sm font-medium text-gray-900">Demo</p>
+                            <p className="truncate text-sm font-medium text-slate-900">Demo</p>
                           </div>
                         </Menu.Items>
                       </Transition>
@@ -71,7 +71,7 @@ export default function LayoutDemo({ children }) {
                   </div>
                   <div className="-mr-2 flex items-center sm:hidden">
                     {/* Mobile menu button */}
-                    <Disclosure.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+                    <Disclosure.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-slate-400 hover:bg-slate-100 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
                       <span className="sr-only">Open main menu</span>
                       {open ? (
                         <XMarkIcon className="block h-6 w-6" aria-hidden="true" />
@@ -84,7 +84,7 @@ export default function LayoutDemo({ children }) {
               </div>
 
               <Disclosure.Panel className="sm:hidden">
-                <div className="border-t border-gray-200 pt-4 pb-3">
+                <div className="border-t border-slate-200 pt-4 pb-3">
                   <div className="flex items-center px-4">
                     <div className="flex-shrink-0">
                       <Image
@@ -94,12 +94,12 @@ export default function LayoutDemo({ children }) {
                       />
                     </div>
                     <div className="ml-3">
-                      <div className="text-base font-medium text-gray-800">Demo User</div>
-                      <div className="text-sm font-medium text-gray-500">demo@formbricks.com</div>
+                      <div className="text-base font-medium text-slate-800">Demo User</div>
+                      <div className="text-sm font-medium text-slate-500">demo@formbricks.com</div>
                     </div>
                     {/*  <button
                       type="button"
-                      className="ml-auto flex-shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+                      className="ml-auto flex-shrink-0 rounded-full bg-white p-1 text-slate-400 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
                       <span className="sr-only">View notifications</span>
                       <BellIcon className="h-6 w-6" aria-hidden="true" />
                     </button> */}
@@ -110,7 +110,7 @@ export default function LayoutDemo({ children }) {
           )}
         </Disclosure>
 
-        <main className="h-full bg-gray-50">{children}</main>
+        <main className="h-full bg-slate-50">{children}</main>
         <ToastContainer />
       </div>
     </>
diff --git a/apps/web/src/components/layout/LayoutWrapperCustomForm.tsx b/apps/web/src/components/layout/LayoutWrapperCustomForm.tsx
index c4855605a3..80e043d684 100644
--- a/apps/web/src/components/layout/LayoutWrapperCustomForm.tsx
+++ b/apps/web/src/components/layout/LayoutWrapperCustomForm.tsx
@@ -40,7 +40,7 @@ export default function LayoutWrapperCustomForm({ children }) {
       <Disclosure as="header" className="bg-white shadow">
         {({}) => (
           <>
-            <div className="px-2 sm:px-4 lg:divide-y lg:divide-gray-200 lg:px-8">
+            <div className="px-2 sm:px-4 lg:divide-y lg:divide-slate-200 lg:px-8">
               <nav className="hidden lg:flex lg:space-x-8 lg:py-2" aria-label="Global">
                 {navigation.map((item) => (
                   <Link
@@ -48,8 +48,8 @@ export default function LayoutWrapperCustomForm({ children }) {
                     href={item.href}
                     className={clsx(
                       item.current
-                        ? "bg-gray-100 text-gray-900"
-                        : "text-gray-900 hover:bg-gray-50 hover:text-gray-900",
+                        ? "bg-slate-100 text-slate-900"
+                        : "text-slate-900 hover:bg-slate-50 hover:text-slate-900",
                       "inline-flex items-center rounded-md py-2 px-3 text-sm font-medium"
                     )}
                     aria-current={item.current ? "page" : undefined}>
@@ -68,8 +68,8 @@ export default function LayoutWrapperCustomForm({ children }) {
                     href={item.href}
                     className={clsx(
                       item.current
-                        ? "bg-gray-100 text-gray-900"
-                        : "text-gray-900 hover:bg-gray-50 hover:text-gray-900",
+                        ? "bg-slate-100 text-slate-900"
+                        : "text-slate-900 hover:bg-slate-50 hover:text-slate-900",
                       "block rounded-md py-2 px-3 text-base font-medium"
                     )}
                     aria-current={item.current ? "page" : undefined}>
diff --git a/apps/web/src/components/layout/LayoutWrapperOrganisation.tsx b/apps/web/src/components/layout/LayoutWrapperOrganisation.tsx
index 6c74377cc6..78bb7e171e 100644
--- a/apps/web/src/components/layout/LayoutWrapperOrganisation.tsx
+++ b/apps/web/src/components/layout/LayoutWrapperOrganisation.tsx
@@ -40,11 +40,11 @@ export default function LayoutWrapperOrganisation({ children }: LayoutWrapperOrg
       <Disclosure as="header" className="bg-white shadow">
         {({ open }) => (
           <>
-            <div className="mx-auto w-full px-2 sm:px-4 lg:divide-y lg:divide-gray-200 lg:px-8">
+            <div className="mx-auto w-full px-2 sm:px-4 lg:divide-y lg:divide-slate-200 lg:px-8">
               <nav className="py-2" aria-label="Global">
-                <div className="relative z-10 flex items-center lg:hidden">
+                <div className="relative z-10 flex items-center sm:hidden">
                   {/* Mobile menu button */}
-                  <Disclosure.Button className="focus:ring-brand inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset">
+                  <Disclosure.Button className="focus:ring-brand inline-flex items-center justify-center rounded-md p-2 text-slate-400 hover:bg-slate-100 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-inset">
                     <span className="sr-only">Open menu</span>
                     {open ? (
                       <XMarkIcon className="block h-6 w-6" aria-hidden="true" />
@@ -53,15 +53,15 @@ export default function LayoutWrapperOrganisation({ children }: LayoutWrapperOrg
                     )}
                   </Disclosure.Button>
                 </div>
-                <div className="hidden lg:flex lg:space-x-4">
+                <div className="hidden sm:flex lg:space-x-4">
                   {navigation.map((item) => (
                     <Link
                       key={item.name}
                       href={item.href}
                       className={clsx(
                         item.current
-                          ? "bg-gray-100 text-gray-900"
-                          : "text-gray-900 hover:bg-gray-50 hover:text-gray-900",
+                          ? "bg-slate-100 text-slate-900"
+                          : "text-slate-900 hover:bg-slate-50 hover:text-slate-900",
                         "inline-flex items-center rounded-md py-2 px-3 text-sm font-medium"
                       )}
                       aria-current={item.current ? "page" : undefined}>
@@ -81,8 +81,8 @@ export default function LayoutWrapperOrganisation({ children }: LayoutWrapperOrg
                     onClick={() => router.push(item.href)}
                     className={clsx(
                       item.current
-                        ? "bg-gray-100 text-gray-900"
-                        : "text-gray-900 hover:bg-gray-50 hover:text-gray-900",
+                        ? "bg-slate-100 text-slate-900"
+                        : "text-slate-900 hover:bg-slate-50 hover:text-slate-900",
                       "block rounded-md py-2 px-3 text-base font-medium"
                     )}
                     aria-current={item.current ? "page" : undefined}>
diff --git a/apps/web/src/components/me/ProfileSettingsPage.tsx b/apps/web/src/components/me/ProfileSettingsPage.tsx
index e5e5eef022..a4a305d5cb 100644
--- a/apps/web/src/components/me/ProfileSettingsPage.tsx
+++ b/apps/web/src/components/me/ProfileSettingsPage.tsx
@@ -14,7 +14,7 @@ export default function ProfileSettingsPage() {
   return (
     <div className="mx-auto mt-8 max-w-7xl px-4 sm:px-6 lg:px-8">
       <header className="mb-8">
-        <h1 className="text-3xl font-bold leading-tight tracking-tight text-gray-900">Account Settings</h1>
+        <h1 className="text-3xl font-bold leading-tight tracking-tight text-slate-900">Account Settings</h1>
       </header>
       {/* Payment details */}
       <div className="space-y-6 sm:px-6 lg:col-span-9 lg:px-0">
@@ -23,8 +23,8 @@ export default function ProfileSettingsPage() {
             <div className="px-4 sm:px-6 lg:px-8">
               <div className="sm:flex sm:items-center">
                 <div className="mt-6 sm:flex-auto">
-                  <h1 className="text-xl font-semibold text-gray-900">Personal API Keys</h1>
-                  <p className="mt-2 text-sm text-gray-700">
+                  <h1 className="text-xl font-semibold text-slate-900">Personal API Keys</h1>
+                  <p className="mt-2 text-sm text-slate-700">
                     These keys allow full access to your personal account through the API, as if you were
                     logged in. Try not to keep disused keys around. If you have any suspicion that one of
                     these may be compromised, delete it and use a new one.
@@ -39,27 +39,27 @@ export default function ProfileSettingsPage() {
                 <div className="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
                   <div className="inline-block min-w-full py-2 align-middle">
                     <div className="overflow-hidden shadow-sm ring-1 ring-black ring-opacity-5">
-                      <table className="min-w-full divide-y divide-gray-300">
-                        <thead className="bg-gray-50">
+                      <table className="min-w-full divide-y divide-slate-300">
+                        <thead className="bg-slate-50">
                           <tr>
                             <th
                               scope="col"
-                              className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6 lg:pl-8">
+                              className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-slate-900 sm:pl-6 lg:pl-8">
                               Label
                             </th>
                             <th
                               scope="col"
-                              className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                              className="px-3 py-3.5 text-left text-sm font-semibold text-slate-900">
                               Value
                             </th>
                             <th
                               scope="col"
-                              className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                              className="px-3 py-3.5 text-left text-sm font-semibold text-slate-900">
                               Last Used
                             </th>
                             <th
                               scope="col"
-                              className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                              className="px-3 py-3.5 text-left text-sm font-semibold text-slate-900">
                               Created
                             </th>
                             <th scope="col" className="relative py-3.5 pl-3 pr-4 sm:pr-6 lg:pr-8">
@@ -67,28 +67,28 @@ export default function ProfileSettingsPage() {
                             </th>
                           </tr>
                         </thead>
-                        <tbody className="divide-y divide-gray-200 bg-white">
+                        <tbody className="divide-y divide-slate-200 bg-white">
                           {isLoadingApiKeys ? (
                             <LoadingSpinner />
                           ) : apiKeys.length === 0 ? (
                             <tr>
-                              <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6 lg:pl-8">
+                              <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-slate-900 sm:pl-6 lg:pl-8">
                                 You don&apos;t have any API Keys yet
                               </td>
                             </tr>
                           ) : (
                             apiKeys.map((apiKey) => (
                               <tr key={apiKey.hashedKey}>
-                                <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6 lg:pl-8">
+                                <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-slate-900 sm:pl-6 lg:pl-8">
                                   {apiKey.label}
                                 </td>
-                                <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                <td className="whitespace-nowrap px-3 py-4 text-sm text-slate-500">
                                   {apiKey.apiKey || <span className="italic">secret</span>}
                                 </td>
-                                <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                <td className="whitespace-nowrap px-3 py-4 text-sm text-slate-500">
                                   {convertDateTimeString(apiKey.lastUsed)}
                                 </td>
-                                <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                                <td className="whitespace-nowrap px-3 py-4 text-sm text-slate-500">
                                   {convertDateTimeString(apiKey.createdAt)}
                                 </td>
                                 <td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8">
@@ -122,10 +122,10 @@ export default function ProfileSettingsPage() {
       </div>
       {openNewApiKeyModal && (
         <Modal open={openNewApiKeyModal} setOpen={setOpenNewApiKeyModal}>
-          <h2 className="text-2xl font-bold leading-tight tracking-tight text-gray-900">
+          <h2 className="text-2xl font-bold leading-tight tracking-tight text-slate-900">
             Create a Personal API Key
           </h2>
-          <hr className="my-4 w-full text-gray-400" />
+          <hr className="my-4 w-full text-slate-400" />
           <form
             onSubmit={async (e: any) => {
               e.preventDefault();
@@ -134,7 +134,7 @@ export default function ProfileSettingsPage() {
               setOpenNewApiKeyModal(false);
             }}>
             <div>
-              <label htmlFor="label" className="block text-sm font-medium text-gray-700">
+              <label htmlFor="label" className="block text-sm font-medium text-slate-700">
                 Email
               </label>
               <div className="mt-1">
@@ -142,12 +142,12 @@ export default function ProfileSettingsPage() {
                   type="text"
                   name="label"
                   id="label"
-                  className="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+                  className="block w-full rounded-md border-slate-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                   placeholder="Label, e.g. Github"
                 />
               </div>
             </div>
-            <p className="mt-3 text-sm text-gray-800">
+            <p className="mt-3 text-sm text-slate-800">
               Key value will only ever be shown once, immediately after creation. Copy it to your destination
               right away.
             </p>
diff --git a/apps/web/src/components/onboarding/OnboardingPage.tsx b/apps/web/src/components/onboarding/OnboardingPage.tsx
index 8120b3a648..681a87a122 100644
--- a/apps/web/src/components/onboarding/OnboardingPage.tsx
+++ b/apps/web/src/components/onboarding/OnboardingPage.tsx
@@ -26,7 +26,7 @@ export default function OnboardingPage() {
           leave="ease-in duration-200"
           leaveFrom="opacity-100"
           leaveTo="opacity-0">
-          <div className="fixed inset-0 bg-gray-200 bg-opacity-75 backdrop-blur transition-opacity" />
+          <div className="fixed inset-0 bg-slate-200 bg-opacity-75 backdrop-blur transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
diff --git a/apps/web/src/components/settings/BillingPage.tsx b/apps/web/src/components/settings/BillingPage.tsx
index 4f221c52c3..15708cc4b7 100644
--- a/apps/web/src/components/settings/BillingPage.tsx
+++ b/apps/web/src/components/settings/BillingPage.tsx
@@ -48,7 +48,7 @@ export default function SettingsPage() {
   return (
     <div className="mx-auto py-8 sm:px-6 lg:px-8">
       <header className="mb-8">
-        <h1 className="text-3xl font-bold leading-tight tracking-tight text-gray-900">
+        <h1 className="text-3xl font-bold leading-tight tracking-tight text-slate-900">
           Billing
           <span className="text-brand-dark ml-4 inline-flex items-center rounded-md border border-teal-100 bg-teal-50 px-2.5 py-0.5 text-sm font-medium">
             {organisation.name}
@@ -58,8 +58,8 @@ export default function SettingsPage() {
       {organisation.plan === "free" ? (
         <>
           <div className="my-6 sm:flex-auto">
-            <h1 className="text-xl font-semibold text-gray-900">Upgrade to benefit from all features</h1>
-            <p className="mt-2 text-sm text-gray-700">
+            <h1 className="text-xl font-semibold text-slate-900">Upgrade to benefit from all features</h1>
+            <p className="mt-2 text-sm text-slate-700">
               You do not currently have an active subscription. Upgrade to get access to all features and
               improve your user research.
             </p>
@@ -71,8 +71,8 @@ export default function SettingsPage() {
       ) : (
         <>
           <div className="my-6 sm:flex-auto">
-            <h1 className="text-xl font-semibold text-gray-900">View and manage your billing details</h1>
-            <p className="mt-2 text-sm text-gray-700">
+            <h1 className="text-xl font-semibold text-slate-900">View and manage your billing details</h1>
+            <p className="mt-2 text-sm text-slate-700">
               View and edit your billing details, as well as cancel your subscription.
             </p>
           </div>
diff --git a/apps/web/src/components/settings/SettingsPage.tsx b/apps/web/src/components/settings/SettingsPage.tsx
index 187226f198..0cc97fda68 100644
--- a/apps/web/src/components/settings/SettingsPage.tsx
+++ b/apps/web/src/components/settings/SettingsPage.tsx
@@ -25,7 +25,7 @@ export default function SettingsPage() {
   return (
     <div className="mx-auto py-8 sm:px-6 lg:px-8">
       <header className="mb-8">
-        <h1 className="text-3xl font-bold leading-tight tracking-tight text-gray-900">
+        <h1 className="text-3xl font-bold leading-tight tracking-tight text-slate-900">
           Settings
           <span className="text-brand-dark ml-4 inline-flex items-center rounded-md border border-teal-100 bg-teal-50 px-2.5 py-0.5 text-sm font-medium">
             {organisation.name}
diff --git a/apps/web/src/pages/auth/signup/index.tsx b/apps/web/src/pages/auth/signup/index.tsx
index ae3d5d8f89..f9e9bcf127 100644
--- a/apps/web/src/pages/auth/signup/index.tsx
+++ b/apps/web/src/pages/auth/signup/index.tsx
@@ -15,7 +15,7 @@ export default function SignUpPage() {
           <hr className="my-4" />
           <Link
             href="/"
-            className="mt-5 flex w-full justify-center rounded-md border border-gray-400 bg-white px-4 py-2 text-sm font-medium text-gray-600 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2">
+            className="mt-5 flex w-full justify-center rounded-md border border-slate-400 bg-white px-4 py-2 text-sm font-medium text-slate-600 shadow-sm hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2">
             Login
           </Link>
         </>
diff --git a/apps/web/src/pages/billing-confirmation.tsx b/apps/web/src/pages/billing-confirmation.tsx
index 41dab97534..b95e51db99 100644
--- a/apps/web/src/pages/billing-confirmation.tsx
+++ b/apps/web/src/pages/billing-confirmation.tsx
@@ -10,8 +10,8 @@ export default function Billing({}) {
       <Confetti />
       <div className="mx-auto max-w-sm py-8 sm:px-6 lg:px-8">
         <div className="my-6 sm:flex-auto">
-          <h1 className="text-center text-xl font-semibold text-gray-900">Upgrade successful</h1>
-          <p className="mt-2 text-center text-sm text-gray-700">
+          <h1 className="text-center text-xl font-semibold text-slate-900">Upgrade successful</h1>
+          <p className="mt-2 text-center text-sm text-slate-700">
             Thanks a lot for upgrading your formbricks subscription. You can now access all features and
             improve your user research.
           </p>
diff --git a/packages/charts/src/charts/Table.tsx b/packages/charts/src/charts/Table.tsx
index a8777079fc..20321e2002 100644
--- a/packages/charts/src/charts/Table.tsx
+++ b/packages/charts/src/charts/Table.tsx
@@ -39,11 +39,11 @@ export function Table({ submissions, schema, fieldName }: Props) {
   }, [submissions, schema]);
   return (
     <div className="my-4 mt-6 flow-root h-44 max-h-64 overflow-y-scroll px-8 text-center">
-      <ul className="divide-ui-gray-light -my-5 divide-y">
+      <ul className="divide-ui-slate-light -my-5 divide-y">
         {data.map((answer) => (
           <li key={answer} className="py-4">
             <div className="relative focus-within:ring-2 focus-within:ring-slate-500">
-              <h3 className="text-sm text-gray-700">
+              <h3 className="text-sm text-slate-700">
                 <span className="absolute inset-0" aria-hidden="true" />
                 {answer}
               </h3>
diff --git a/packages/react/README.md b/packages/react/README.md
index e7f2aeeafa..3777ff8479 100644
--- a/packages/react/README.md
+++ b/packages/react/README.md
@@ -73,7 +73,7 @@ Simply create a style sheet, import it and add your CSS to these classes:
 We love Tailwind! This is why Formbricks React natively supports Tailwind. All you have to do is target the classes using props. For example, to extend “formbricks-outer” class:
 
 ```jsx
-<Text name="firstname" label="What's your first name?" outerClassName="bg-gray-800 my-5" />
+<Text name="firstname" label="What's your first name?" outerClassName="bg-slate-800 my-5" />
 ```
 
 ## Validation & Error Messages
diff --git a/packages/react/src/styles.css b/packages/react/src/styles.css
index 19e1e21a65..5b5771c34a 100644
--- a/packages/react/src/styles.css
+++ b/packages/react/src/styles.css
@@ -7,7 +7,7 @@
 }
 
 .formbricks-label {
-  @apply text-base font-medium text-gray-700 font-sans sm:text-sm;
+  @apply text-base font-medium text-slate-700 font-sans sm:text-sm;
 }
 
 button.formbricks-input {
@@ -21,19 +21,19 @@ input[type="password"].formbricks-input,
 input[type="search"].formbricks-input,
 input[type="tel"].formbricks-input,
 input[type="url"].formbricks-input {
-  @apply form-input text-base block rounded-md border-gray-300 shadow-sm focus:border-slate-500 focus:ring-slate-500 sm:text-sm;
+  @apply form-input text-base block rounded-md border-slate-300 shadow-sm focus:border-slate-500 focus:ring-slate-500 sm:text-sm;
 }
 
 input[type="radio"].formbricks-input {
-  @apply h-4 w-4 border-gray-300 text-slate-600 focus:ring-slate-500 mr-2;
+  @apply h-4 w-4 border-slate-300 text-slate-600 focus:ring-slate-500 mr-2;
 }
 
 textarea.formbricks-input {
-  @apply form-textarea text-base font-sans block rounded-md border-gray-300 shadow-sm focus:border-slate-500 focus:ring-slate-500 sm:text-sm;
+  @apply form-textarea text-base font-sans block rounded-md border-slate-300 shadow-sm focus:border-slate-500 focus:ring-slate-500 sm:text-sm;
 }
 
 .formbricks-help {
-  @apply font-sans text-base sm:text-sm text-gray-500;
+  @apply font-sans text-base sm:text-sm text-slate-500;
 }
 
 .formbricks-prefix-icon {
@@ -49,11 +49,11 @@ textarea.formbricks-input {
 }
 
 .formbricks-legend {
-  @apply text-base font-medium text-gray-700 font-sans sm:text-sm;
+  @apply text-base font-medium text-slate-700 font-sans sm:text-sm;
 }
 
 .formbricks-fieldset {
-  @apply border-gray-50 rounded-lg  max-w-md;
+  @apply border-slate-50 rounded-lg  max-w-md;
 }
 
 .formbricks-input-nps {
@@ -77,5 +77,5 @@ textarea.formbricks-input {
 }
 
 [data-type="nps"] .formbricks-input-addition-item {
-  @apply text-xs text-gray-500;
+  @apply text-xs text-slate-500;
 }
diff --git a/packages/ui/src/Button.tsx b/packages/ui/src/Button.tsx
index 582ddf13a3..161509d2a2 100644
--- a/packages/ui/src/Button.tsx
+++ b/packages/ui/src/Button.tsx
@@ -59,7 +59,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
         size === "base" && "px-6 py-2 text-sm font-medium rounded-xl",
         size === "lg" && "px-4 py-2 text-base font-medium rounded-lg",
         size === "icon" &&
-          "w-10 h-10 justify-center group p-2 border rounded-lg border-transparent text-neutral-400 hover:border-gray-200 transition",
+          "w-10 h-10 justify-center group p-2 border rounded-lg border-transparent text-neutral-400 hover:border-slate-200 transition",
         // turn button into a floating action button (fab)
         size === "fab" ? "fixed" : "relative",
         size === "fab" && "justify-center bottom-20 right-8 rounded-full p-4 w-14 h-14",
@@ -67,20 +67,20 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
         // different styles depending on variant
         variant === "highlight" &&
           (disabled
-            ? "border border-transparent bg-gray-400 text-white"
+            ? "border border-transparent bg-slate-400 text-white"
             : "text-white bg-gradient-to-b from-brand-light to-brand-dark hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-slate-900 transition ease-in-out delay-50 hover:scale-105"),
         variant === "primary" &&
           (disabled
-            ? "border border-transparent bg-gray-400 text-white"
+            ? "border border-transparent bg-slate-400 text-white"
             : "text-slate-900 bg-gradient-to-b from-brand-light to-brand-dark  hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-slate-900"),
 
         variant === "secondary" &&
           (disabled
-            ? "border border-gray-200 text-gray-400 bg-white"
+            ? "border border-slate-200 text-slate-400 bg-white"
             : "hover:text-slate-600 hover:bg-slate-300 bg-slate-200 text-slate-700 hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-neutral-900 dark:text-slate-400 dark:hover:text-slate-300 dark:bg-slate-800 dark:hover:bg-slate-700 transition ease-in-out delay-50 hover:scale-105"),
         variant === "alert" &&
           (disabled
-            ? "border border-transparent bg-gray-400 text-white"
+            ? "border border-transparent bg-slate-400 text-white"
             : "border border-transparent dark:text-darkmodebrandcontrast text-brandcontrast bg-red-600 dark:bg-darkmodebrand hover:bg-opacity-90 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-neutral-900"),
         variant === "minimal" &&
           (disabled
@@ -88,8 +88,8 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
             : "text-slate-600 hover:text-slate-500 bg-slate-200 hover:bg-slate-100 dark:bg-slate-800 dark:text-slate-300 dark:hover:text-slate-400 dark:hover:bg-slate-900 focus:outline-none focus:ring-2 focus:ring-offset-1 dark:focus:bg-slate-900 focus:bg-slate-700 focus:ring-neutral-500 transition ease-in-out delay-50 hover:scale-105"),
         variant === "warn" &&
           (disabled
-            ? "text-gray-400 bg-transparent"
-            : "text-gray-700 bg-transparent hover:text-red-700 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:bg-red-50 focus:ring-red-500"),
+            ? "text-slate-400 bg-transparent"
+            : "text-slate-700 bg-transparent hover:text-red-700 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:bg-red-50 focus:ring-red-500"),
 
         // set not-allowed cursor if disabled
         loading ? "cursor-wait" : disabled ? "cursor-not-allowed" : "",