diff --git a/apps/web/package.json b/apps/web/package.json
index fe1e490f07..9ce8e6a811 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@formbricks/web",
-  "version": "3.1.4",
+  "version": "3.1.5",
   "private": true,
   "scripts": {
     "clean": "rimraf .turbo node_modules .next",
diff --git a/packages/surveys/src/components/questions/date-question.tsx b/packages/surveys/src/components/questions/date-question.tsx
index 48a636c029..543f893563 100644
--- a/packages/surveys/src/components/questions/date-question.tsx
+++ b/packages/surveys/src/components/questions/date-question.tsx
@@ -158,7 +158,7 @@ export function DateQuestion({
             subheader={question.subheader ? getLocalizedValue(question.subheader, languageCode) : ""}
             questionId={question.id}
           />
-          <div className="fb-text-red-600">
+          <div id="error-message" className="fb-text-red-600" aria-live="assertive">
             <span>{errorMessage}</span>
           </div>
           <div
@@ -166,7 +166,7 @@ export function DateQuestion({
             id="date-picker-root">
             <div className="fb-relative">
               {!datePickerOpen && (
-                <div
+                <button
                   onClick={() => {
                     setDatePickerOpen(true);
                   }}
@@ -174,6 +174,8 @@ export function DateQuestion({
                   onKeyDown={(e) => {
                     if (e.key === " ") setDatePickerOpen(true);
                   }}
+                  aria-label={selectedDate ? `You have selected ${formattedDate}` : "Select a date"}
+                  aria-describedby={errorMessage ? "error-message" : undefined}
                   className="focus:fb-outline-brand fb-bg-input-bg hover:fb-bg-input-bg-selected fb-border-border fb-text-heading fb-rounded-custom fb-relative fb-flex fb-h-[12dvh] fb-w-full fb-cursor-pointer fb-appearance-none fb-items-center fb-justify-center fb-border fb-text-left fb-text-base fb-font-normal">
                   <div className="fb-flex fb-items-center fb-gap-2">
                     {selectedDate ? (
@@ -186,7 +188,7 @@ export function DateQuestion({
                       </div>
                     )}
                   </div>
-                </div>
+                </button>
               )}
 
               <DatePicker
@@ -222,14 +224,14 @@ export function DateQuestion({
                     "calendar-root !fb-bg-input-bg fb-border fb-border-border fb-rounded-custom fb-p-3 fb-h-[46dvh] sm:fb-h-[33dvh] fb-overflow-auto",
                   tileClassName: ({ date }: { date: Date }) => {
                     const baseClass =
-                      "hover:fb-bg-input-bg-selected fb-rounded-custom fb-h-9 fb-p-0 fb-mt-1 fb-font-normal fb-text-heading aria-selected:fb-opacity-100 focus:fb-ring-2 focus:fb-bg-slate-200";
+                      "hover:fb-bg-input-bg-selected fb-rounded-custom fb-h-9 fb-p-0 fb-mt-1 fb-font-normal aria-selected:fb-opacity-100 focus:fb-ring-2 focus:fb-bg-slate-200";
                     // today's date class
                     if (
                       date.getDate() === new Date().getDate() &&
                       date.getMonth() === new Date().getMonth() &&
                       date.getFullYear() === new Date().getFullYear()
                     ) {
-                      return `${baseClass} !fb-bg-brand !fb-border-border-highlight !fb-text-heading focus:fb-ring-2 focus:fb-bg-slate-200`;
+                      return `${baseClass} !fb-bg-brand !fb-border-border-highlight !fb-text-calendar-tile focus:fb-ring-2 focus:fb-bg-slate-200`;
                     }
                     // active date class
                     if (
@@ -238,10 +240,10 @@ export function DateQuestion({
                       date.getMonth() === selectedDate.getMonth() &&
                       date.getFullYear() === selectedDate.getFullYear()
                     ) {
-                      return `${baseClass} !fb-bg-brand !fb-border-border-highlight !fb-text-heading`;
+                      return `${baseClass} !fb-bg-brand !fb-border-border-highlight !fb-text-calendar-tile`;
                     }
 
-                    return baseClass;
+                    return `${baseClass} !fb-text-heading`;
                   },
                   formatShortWeekday: (_: any, date: Date) => {
                     return date.toLocaleDateString("en-US", { weekday: "short" }).slice(0, 2);
diff --git a/packages/surveys/src/lib/styles.ts b/packages/surveys/src/lib/styles.ts
index 58fc2da75d..c18d067e84 100644
--- a/packages/surveys/src/lib/styles.ts
+++ b/packages/surveys/src/lib/styles.ts
@@ -77,16 +77,17 @@ export const addCustomThemeToDom = ({ styling }: { styling: TProjectStyling | TS
   appendCssVariable("input-background-color", styling.inputColor?.light);
 
   if (styling.questionColor?.light) {
-    let signatureColor = "";
-    let brandingColor = "";
-
-    if (isLight(styling.questionColor.light)) {
-      signatureColor = mixColor(styling.questionColor.light, "#000000", 0.2);
-      brandingColor = mixColor(styling.questionColor.light, "#000000", 0.3);
-    } else {
-      signatureColor = mixColor(styling.questionColor.light, "#ffffff", 0.2);
-      brandingColor = mixColor(styling.questionColor.light, "#ffffff", 0.3);
-    }
+    const isLightQuestionColor = isLight(styling.questionColor.light);
+    const signatureColor = mixColor(
+      styling.questionColor.light,
+      isLightQuestionColor ? "#000000" : "#ffffff",
+      0.2
+    );
+    const brandingColor = mixColor(
+      styling.questionColor.light,
+      isLightQuestionColor ? "#000000" : "#ffffff",
+      0.3
+    );
 
     appendCssVariable("signature-text-color", signatureColor);
     appendCssVariable("branding-text-color", brandingColor);
@@ -115,6 +116,10 @@ export const addCustomThemeToDom = ({ styling }: { styling: TProjectStyling | TS
 
     appendCssVariable("accent-background-color", accentColor);
     appendCssVariable("accent-background-color-selected", accentColorSelected);
+
+    if (isLight(brandColor)) {
+      appendCssVariable("calendar-tile-color", mixColor(brandColor, "#000000", 0.7));
+    }
   }
 
   // Close the :root block
diff --git a/packages/surveys/src/styles/global.css b/packages/surveys/src/styles/global.css
index 436bb72fa1..1732362444 100644
--- a/packages/surveys/src/styles/global.css
+++ b/packages/surveys/src/styles/global.css
@@ -93,7 +93,7 @@ p.fb-editor-paragraph {
   --fb-rating-selected: black;
   --fb-close-btn-color: var(--slate-500);
   --fb-close-btn-color-hover: var(--slate-700);
-
+  --fb-calendar-tile-color: var(--slate-50);
   --fb-border-radius: 8px;
 }
 
diff --git a/packages/surveys/tailwind.config.cjs b/packages/surveys/tailwind.config.cjs
index 83487eb2d3..1c3e27c5ad 100644
--- a/packages/surveys/tailwind.config.cjs
+++ b/packages/surveys/tailwind.config.cjs
@@ -37,6 +37,7 @@ module.exports = {
         "submit-button-border": "var(--fb-submit-btn-border)",
         "close-button": "var(--fb-close-btn-color)",
         "close-button-focus": "var(--fb-close-btn-hover-color)",
+        "calendar-tile": "var(--fb-calendar-tile-color)",
       },
       borderRadius: {
         custom: "var(--fb-border-radius)",