diff --git a/README.md b/README.md
index 9191d87ba..b2b088a2e 100644
--- a/README.md
+++ b/README.md
@@ -113,6 +113,7 @@ npm start
 | arrowColor                 | string | Specifies the relationship arrow fill color.                                                   |
 | arrowIndent                | number | Specifies the relationship arrow right indent. Sets in px                                      |
 | todayColor                 | string | Specifies the current period column fill color.                                                |
+| weekendColor               | string | Specifies the weekend columns fill color.                                                      |
 | TooltipContent             |        | Specifies the Tooltip view for selected taskbar.                                               |
 | TaskListHeader             |        | Specifies the task list Header view                                                            |
 | TaskListTable              |        | Specifies the task list Table view                                                             |
diff --git a/example/src/App.tsx b/example/src/App.tsx
index c2ab602eb..7a45ca82b 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -87,6 +87,7 @@ const App = () => {
         onExpanderClick={handleExpanderClick}
         listCellWidth={isChecked ? "155px" : ""}
         columnWidth={columnWidth}
+        weekendColor={"#97979714"}
       />
       <h3>Gantt With Limited Height</h3>
       <Gantt
@@ -102,6 +103,7 @@ const App = () => {
         listCellWidth={isChecked ? "155px" : ""}
         ganttHeight={300}
         columnWidth={columnWidth}
+        weekendColor={"#97979714"}
       />
     </div>
   );
diff --git a/src/components/gantt/gantt.tsx b/src/components/gantt/gantt.tsx
index b90483f3d..20e408b51 100644
--- a/src/components/gantt/gantt.tsx
+++ b/src/components/gantt/gantt.tsx
@@ -53,7 +53,8 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
   fontFamily = "Arial, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue",
   fontSize = "14px",
   arrowIndent = 20,
-  todayColor = "rgba(252, 248, 227, 0.5)",
+  todayColor = "rgba(252, 248, 227, 1)",
+  weekendColor = "transparent",
   viewDate,
   TooltipContent = StandardTooltipContent,
   TaskListHeader = TaskListHeaderDefault,
@@ -394,6 +395,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     rowHeight,
     dates: dateSetup.dates,
     todayColor,
+    weekendColor,
     rtl,
   };
   const calendarProps: CalendarProps = {
diff --git a/src/components/grid/grid-body.tsx b/src/components/grid/grid-body.tsx
index af689e509..4696127dc 100644
--- a/src/components/grid/grid-body.tsx
+++ b/src/components/grid/grid-body.tsx
@@ -10,6 +10,7 @@ export type GridBodyProps = {
   rowHeight: number;
   columnWidth: number;
   todayColor: string;
+  weekendColor: string;
   rtl: boolean;
 };
 export const GridBody: React.FC<GridBodyProps> = ({
@@ -19,6 +20,7 @@ export const GridBody: React.FC<GridBodyProps> = ({
   svgWidth,
   columnWidth,
   todayColor,
+  weekendColor,
   rtl,
 }) => {
   let y = 0;
@@ -60,6 +62,7 @@ export const GridBody: React.FC<GridBodyProps> = ({
   const now = new Date();
   let tickX = 0;
   const ticks: ReactElement[] = [];
+  const weekends: ReactElement[] = [];
   let today: ReactElement = <rect />;
   for (let i = 0; i < dates.length; i++) {
     const date = dates[i];
@@ -73,6 +76,19 @@ export const GridBody: React.FC<GridBodyProps> = ({
         className={styles.gridTick}
       />
     );
+
+    if (weekendColor !== "transparent" && dates[i + 1] && [0, 6].includes(dates[i + 1].getDay())) {
+      weekends.push(
+        <rect
+          key={"WeekendColumn" + i}
+          x={tickX + columnWidth}
+          y={0}
+          width={columnWidth}
+          height={y}
+          fill={weekendColor}
+        />
+      );
+    }
     if (
       (i + 1 !== dates.length &&
         date.getTime() < now.getTime() &&
@@ -121,6 +137,7 @@ export const GridBody: React.FC<GridBodyProps> = ({
       <g className="rows">{gridRows}</g>
       <g className="rowLines">{rowLines}</g>
       <g className="ticks">{ticks}</g>
+      <g className="weekends">{weekends}</g>
       <g className="today">{today}</g>
     </g>
   );
diff --git a/src/types/public-types.ts b/src/types/public-types.ts
index cc44ff17c..60e6313fb 100644
--- a/src/types/public-types.ts
+++ b/src/types/public-types.ts
@@ -113,6 +113,7 @@ export interface StylingOption {
   arrowColor?: string;
   arrowIndent?: number;
   todayColor?: string;
+  weekendColor?: string;
   TooltipContent?: React.FC<{
     task: Task;
     fontSize: string;