diff --git a/packages/ui/.changeset/pr-12972-fixed-1759935253273.md b/packages/ui/.changeset/pr-12972-fixed-1759935253273.md
new file mode 100644
index 00000000000..dcf9c796dd4
--- /dev/null
+++ b/packages/ui/.changeset/pr-12972-fixed-1759935253273.md
@@ -0,0 +1,5 @@
+---
+"@linode/ui": Fixed
+---
+
+Prevent range background for single selections in DatePicker/Calendar ([#12972](https://github.com/linode/manager/pull/12972))
diff --git a/packages/ui/src/components/DatePicker/Calendar/Calendar.styles.ts b/packages/ui/src/components/DatePicker/Calendar/Calendar.styles.ts
index 1b9367ea72b..00d1a9e262a 100644
--- a/packages/ui/src/components/DatePicker/Calendar/Calendar.styles.ts
+++ b/packages/ui/src/components/DatePicker/Calendar/Calendar.styles.ts
@@ -8,6 +8,7 @@ interface DayBoxBaseProps {
 }
 
 interface DayBoxProps extends DayBoxBaseProps {
+  isRange?: boolean | null;
   isSelected: boolean | null;
 }
 
@@ -18,8 +19,11 @@ interface DayBoxInnerProps extends DayBoxBaseProps {
 export const DayBox = styled(Box, {
   label: 'DayBox',
   shouldForwardProp: (prop) =>
-    prop !== 'isSelected' && prop !== 'isStart' && prop !== 'isEnd',
-})<DayBoxProps>(({ isSelected, isStart, isEnd, theme }) => {
+    prop !== 'isSelected' &&
+    prop !== 'isStart' &&
+    prop !== 'isEnd' &&
+    prop !== 'isRange',
+})<DayBoxProps>(({ isSelected, isStart, isEnd, theme, isRange }) => {
   // Apply rounded edges to create smooth visual flow for date ranges
   const getBorderRadius = () => {
     if (isStart && isEnd) return '50%'; // Single date - fully rounded
@@ -30,7 +34,7 @@ export const DayBox = styled(Box, {
 
   return {
     backgroundColor:
-      isSelected || isStart || isEnd
+      (isSelected || isStart || isEnd) && isRange
         ? theme.tokens.component.Calendar.DateRange.Background.Default
         : 'transparent',
     borderRadius: isSelected || isStart || isEnd ? getBorderRadius() : '0',
diff --git a/packages/ui/src/components/DatePicker/Calendar/Calendar.tsx b/packages/ui/src/components/DatePicker/Calendar/Calendar.tsx
index bca178c61f8..ef519ab5036 100644
--- a/packages/ui/src/components/DatePicker/Calendar/Calendar.tsx
+++ b/packages/ui/src/components/DatePicker/Calendar/Calendar.tsx
@@ -36,6 +36,12 @@ export const Calendar = ({
   const startDay = startOfMonth.weekday % 7;
   const totalDaysInMonth = endOfMonth.day;
   const today = DateTime.now();
+  const isDateRange =
+    startDate &&
+    endDate &&
+    startDate.isValid &&
+    endDate.isValid &&
+    !startDate.hasSame(endDate, 'day');
   // Calculate dynamic grid size based on actual content
   const days = [];
 
@@ -109,6 +115,7 @@ export const Calendar = ({
       <DayBox
         aria-selected={Boolean(isSelected || isStart || isEnd)}
         isEnd={isVisualEnd}
+        isRange={isDateRange}
         isSelected={isSelected}
         isStart={isVisualStart}
         key={`${month.month} ${day}`}