diff --git a/app/client/src/theme/wds.css b/app/client/src/theme/wds.css
index d6ff4084e8..1bd78a5b52 100644
--- a/app/client/src/theme/wds.css
+++ b/app/client/src/theme/wds.css
@@ -1,11 +1,16 @@
 :root {
   --wds-color-border: #E0DEDE;
+  --wds-color-border-light: #FDDDDD;
   --wds-color-border-hover: #B3B3B3;
   --wds-color-border-disabled: #E0DEDE;
   --wds-color-border-danger: #D91921;
   --wds-color-border-danger-hover: #B90707;
+  --wds-color-border-danger-focus-light: #EDDDDD;
 
+  --wds-color-bg: #FFFFFF;
   --wds-color-bg-hover: #EBEBEB;
+  --wds-color-bg-focus: #e3e3e3;
+  --wds-color-bg-light: #EBEBEB;
   --wds-color-bg-strong: #E0DEDE;
   --wds-color-bg-strong-hover: #B3B3B3;
   --wds-color-bg-disabled: #F3F3F3;
@@ -22,3 +27,4 @@
   --wds-color-text-disabled: #A9A7A7;
   --wds-color-text-disabled-light: #CAC7C7;
 }
+
diff --git a/app/client/src/widgets/MultiSelectTreeWidget/component/index.styled.tsx b/app/client/src/widgets/MultiSelectTreeWidget/component/index.styled.tsx
index 90cd1b6109..af778b2d10 100644
--- a/app/client/src/widgets/MultiSelectTreeWidget/component/index.styled.tsx
+++ b/app/client/src/widgets/MultiSelectTreeWidget/component/index.styled.tsx
@@ -16,6 +16,7 @@ import {
   multiSelectInputContainerStyles,
 } from "design-system";
 import { lightenColor } from "widgets/WidgetUtils";
+import CheckIcon from "assets/icons/widget/checkbox/check-icon.svg";
 
 export const StyledIcon = styled(Icon)<{ expanded: boolean }>`
   transform: rotate(${({ expanded }) => (expanded ? 0 : 270)}deg);
@@ -392,7 +393,7 @@ border: 1px solid #E8E8E8;
 
 .rc-tree-select-tree-checkbox {
   box-sizing: border-box;
-  margin: 0 2px 0 9px;
+  margin: 0 0px 0 9px;
   white-space: nowrap;
   outline: none;
   cursor: pointer;
@@ -405,7 +406,9 @@ border: 1px solid #E8E8E8;
 .rc-tree-select-tree-checkbox-checked .rc-tree-select-tree-checkbox-inner {
   border: none !important;
   background-color: ${({ accentColor }) => accentColor};
-  background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='14' height='14' fill='transparent' /%3E%3Cpath d='M10.1039 3.5L11 4.40822L5.48269 10L2.5 6.97705L3.39613 6.06883L5.48269 8.18305L10.1039 3.5Z' fill='white'/%3E%3C/svg%3E%0A");
+  background-image: url(${CheckIcon}) !important;
+  background-repeat: no-repeat !important;
+  background-position: center !important;
 }
 
 .rc-tree-select-tree-checkbox-inner {
@@ -419,7 +422,7 @@ border: 1px solid #E8E8E8;
     border: 1px solid ${Colors.GREY_3};
     border-radius: 0px;
     border-collapse: separate;
-    transition: all .1s;
+    transition: none;
     border-radius: ${({ borderRadius }) => borderRadius};
 }
   .rc-tree-select-tree
@@ -443,7 +446,7 @@ border: 1px solid #E8E8E8;
 	display: inline-block;
 	width: 0px;
 	height: 16px;
-	margin-right: 2px;
+	margin-right: 0px;
 	line-height: 16px;
 	vertical-align: -0.125em;
 	background-color: transparent;
@@ -468,7 +471,7 @@ border: 1px solid #E8E8E8;
 .rc-tree-select-tree
 	.rc-tree-select-tree-treenode
 	span.rc-tree-select-tree-icon_loading {
-	margin-right: 2px;
+	margin-right: 0px;
 	vertical-align: top;
 	background: none;
 }
@@ -526,34 +529,43 @@ border: 1px solid #E8E8E8;
 	cursor: not-allowed;
 }
 .rc-tree-select-tree-treenode-active {
-	background: ${({ accentColor }) => lightenColor(accentColor)};
+	background: var(--wds-color-bg-focus) !important;
+
+  :not(.rc-tree-select-tree-treenode-checkbox-checked) .rc-tree-select-tree-checkbox-inner {
+    background: transparent;
+    border-color: var(--wds-color-border-hover);
+  }
 }
 .rc-tree-select-tree-treenode:hover {
-	background: ${({ accentColor }) => lightenColor(accentColor)};
+  &.rc-tree-select-tree-treenode-checkbox-checked {
+    background: ${({ accentColor }) =>
+      lightenColor(accentColor, "0.90")} !important;
+  }
+	background: var(--wds-color-bg-hover);
   .rc-tree-select-tree-title {
-    color: ${Colors.GREY_9};
+    color: var(--wds-color-text);
   }
   .rc-tree-select-tree-checkbox-indeterminate .rc-tree-select-tree-checkbox-inner {
     background-color: ${({ accentColor }) => accentColor} !important;
   }
   :not(.rc-tree-select-tree-treenode-checkbox-checked) .rc-tree-select-tree-checkbox-inner {
-    background-color:  ${({ accentColor }) => lightenColor(accentColor)};
-    border-color: ${({ accentColor }) => accentColor};
+    background: transparent;
+    border-color: var(--wds-color-border-hover);
   }
 }
 .rc-tree-select-tree-treenode-checkbox-checked {
   background: ${({ accentColor }) => lightenColor(accentColor)};
   .rc-tree-select-tree-title {
-    color: ${Colors.GREY_10};
+    color: var(--wds-color-text);
   }
 }
 .rc-tree-select-tree-icon__open {
-	margin-right: 2px;
+	margin-right: 0px;
 	vertical-align: top;
 	background-position: -110px -16px;
 }
 .rc-tree-select-tree-icon__close {
-	margin-right: 2px;
+	margin-right: 0px;
 	vertical-align: top;
 	background-position: -110px 0;
 }
@@ -563,14 +575,14 @@ border: 1px solid #E8E8E8;
 	background-position: -110px -32px;
 }
 .rc-tree-select-tree-icon__customize {
-	margin-right: 2px;
+	margin-right: 0px;
 	vertical-align: top;
 }
 .rc-tree-select-tree-title {
 	display: inline-block;
   margin-left: 10px;
   font-size: 14px !important;
-  color: ${Colors.GREY_8};
+  color: var(--wds-color-text);
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -627,11 +639,12 @@ export const TreeSelectContainer = styled.div<{
       transition: all 0.3s;
       flex: 1;
       overflow: hidden;
-      color: ${Colors.GREY_6};
+      color: var(--wds-color-text-light);
       white-space: nowrap;
       text-overflow: ellipsis;
       pointer-events: none;
       font-size: 14px;
+      margin-left: -8px;
     }
     .rc-tree-select-selection-search-input {
       appearance: none;
@@ -649,13 +662,23 @@ export const TreeSelectContainer = styled.div<{
     cursor: not-allowed;
     input {
       cursor: not-allowed;
-      background-color: ${Colors.GREY_1} !important;
+      background-color: var(--wds-color-bg-disabled) !important;
     }
     .rc-tree-select-selector {
-      border: 1.2px solid ${Colors.GREY_3} !important;
-      background-color: ${Colors.GREY_1} !important;
+      border: 1px solid var(--wds-color-border-disabled) !important;
+      background-color: var(--wds-color-bg-disabled) !important;
       .rc-tree-select-selection-item-content {
-        color: ${Colors.GREY_7};
+        color: var(--wds-color-text-disabled);
+      }
+    }
+    .rc-tree-select-selection-placeholder {
+      color: var(--wds-color-text-disabled-light);
+    }
+    .rc-tree-select-arrow .dropdown-icon
+      svg {
+        path {
+          fill: var(--wds-color-icon-disabled);
+        }
       }
     }
   }
@@ -678,7 +701,7 @@ export const TreeSelectContainer = styled.div<{
   .rc-tree-select-single {
     &:hover {
       .rc-tree-select-selector {
-        border: 1.2px solid ${Colors.GREY_5};
+        border: 1px solid var(--wds-color-border-hover);
       }
     }
   }
@@ -689,12 +712,11 @@ export const TreeSelectContainer = styled.div<{
     background: ${Colors.WHITE};
     border-radius: ${({ borderRadius }) => borderRadius};
     box-shadow: ${({ boxShadow }) => `${boxShadow}`} !important;
-    border: 1px solid rgb(231, 231, 231);
-    border: 1px solid ${Colors.GREY_3};
+    border: 1px solid var(--wds-color-border);
     box-sizing: border-box;
     width: 100%;
     transition: none;
-    background-color: white;
+    background-color: var(--wds-color-bg);
     height: 100%;
     .rc-tree-select-selection-search {
       width: 100%;
@@ -733,18 +755,18 @@ export const TreeSelectContainer = styled.div<{
     .rc-tree-select-selector {
       display: flex;
       flex-wrap: wrap;
-      background: ${Colors.WHITE};
+      background: var(--wds-color-bg);
     border-radius: ${({ borderRadius }) => borderRadius};
     box-shadow: ${({ boxShadow }) => `${boxShadow}`} !important;
       width: 100%;
       transition: none;
       .rc-tree-select-selection-item {
         background: none;
-        border: 1px solid ${Colors.GREY_3};
-        border-radius: 360px;
+        border: 1px solid var(--wds-color-border);
+        border-radius:${({ borderRadius }) => borderRadius};
         max-width: 273.926px;
         height: 20px;
-        color: ${Colors.GREY_10};
+        color: var(--wds-color-text);
         overflow-wrap: break-word;
         display: inline-flex;
         flex-direction: row;
@@ -842,6 +864,8 @@ export const TreeSelectContainer = styled.div<{
       .rc-tree-select-clear-icon {
         font-size: 18px;
         font-weight: bold;
+
+
       }
     }
   }
@@ -850,7 +874,7 @@ export const TreeSelectContainer = styled.div<{
     .rc-tree-select-selector {
       padding-right: ${({ allowClear }) => (allowClear ? "40px" : "20px")};
       padding-left: 10px;
-      background: ${Colors.WHITE};
+      background: var(--wds-color-bg);
     border-radius: ${({ borderRadius }) => borderRadius};
     box-shadow: ${({ boxShadow }) => `${boxShadow}`} !important;
       height: inherit;
@@ -858,10 +882,16 @@ export const TreeSelectContainer = styled.div<{
       line-height: 30px;
       transition: none;
       border: 1px solid
-        ${(props) => (props.isValid ? Colors.GREY_3 : Colors.DANGER_SOLID)};
+        ${(props) =>
+          props.isValid
+            ? "var(--wds-color-border)"
+            : "var(--wds-color-border-danger)"};
       &:hover {
         border: 1px solid
-          ${(props) => (props.isValid ? Colors.GREY_5 : Colors.DANGER_SOLID)};
+        ${(props) =>
+          props.isValid
+            ? "var(--wds-color-border-hover)"
+            : "var(--wds-color-border-danger-hover)"};
       }
     }
   }
@@ -884,9 +914,16 @@ export const TreeSelectContainer = styled.div<{
 
       & .clear-icon {
         width: 16px;
+        margin-right: 8px;
+
         svg {
           width: 16px;
           height: 16px;
+          fill: var(--wds-color-icon);
+
+          path {
+            fill: var(--wds-color-icon);
+          }
         }
       }
     }
@@ -905,8 +942,11 @@ export const TreeSelectContainer = styled.div<{
         svg {
           width: 20px;
           height: 20px;
+
+          path {
+            fill: var(--wds-color-icon);
+          }
         }
-      fill: ${Colors.SLATE_GRAY};
     }
     .rc-tree-select-arrow-icon {
       &::after {
diff --git a/app/client/src/widgets/MultiSelectWidgetV2/component/index.styled.tsx b/app/client/src/widgets/MultiSelectWidgetV2/component/index.styled.tsx
index 59f75094a2..86f2e708f5 100644
--- a/app/client/src/widgets/MultiSelectWidgetV2/component/index.styled.tsx
+++ b/app/client/src/widgets/MultiSelectWidgetV2/component/index.styled.tsx
@@ -14,6 +14,7 @@ import {
   multiSelectInputContainerStyles,
 } from "design-system";
 import { lightenColor } from "widgets/WidgetUtils";
+import CheckIcon from "assets/icons/widget/checkbox/check-icon.svg";
 
 const Input = styled.input`
   height: 0;
@@ -31,10 +32,9 @@ export const CommonSelectFilterStyle = css<{
     padding-left: 42px;
     margin-bottom: 0;
     .${Classes.CONTROL_INDICATOR} {
-      margin-right: 20px;
+      margin-right: 10px;
     }
     &.all-options.selected {
-      background: ${(props) => lightenColor(props.accentColor)};
       color: ${Colors.GREY_10} !important;
     }
   }
@@ -44,33 +44,37 @@ export const CommonSelectFilterStyle = css<{
     box-shadow: none;
     border-width: 1px;
     border-style: solid;
-    border-color: ${Colors.GREY_3};
+    border-color: var(--wds-color-border);
     border-radius: 0px;
     &::before {
       width: auto;
-      height: 1em;
+      height: 100%;
     }
   }
 
   & .${Classes.INPUT} {
-    height: 32px !important;
-    padding-left: 29px !important;
+    height: 30px !important;
+    padding-left: 34px !important;
     font-size: 14px;
-    color: ${Colors.GREY_10};
+    color: var(--wds-color-text);
     box-shadow: 0px 0px 0px 0px;
     border: none;
   }
 
+  & .${Classes.INPUT}::placeholder {
+    color: var(--wds-color-text-light);
+  }
+
   & .${Classes.INPUT_GROUP} {
     margin: 12px 12px 8px 12px;
     position: relative;
-    border: 1px solid ${Colors.GREY_3};
+    border: 1px solid var(--wds-color-border);
     border-radius: ${({ borderRadius }) =>
       borderRadius === "1.5rem" ? `0.375rem` : borderRadius};
     overflow: hidden;
     &:focus-within {
       border: 1px solid ${(props) => props.accentColor};
-      box-shadow: 0px 0px 0px 3px ${(props) => lightenColor(props.accentColor)};
+      box-shadow: 0px 0px 0px 2px ${(props) => lightenColor(props.accentColor)};
     }
 
     & > .${Classes.ICON} {
@@ -78,8 +82,8 @@ export const CommonSelectFilterStyle = css<{
         left: 0px;
         top: 0px;
         bottom: 0px;
-        margin: 9px;
-        color: ${Colors.GREY_7};
+        margin: 8px 10px;
+        color: var(--wds-color-icon);
 
         & > svg {
           width: 14px;
@@ -127,6 +131,10 @@ const Indicator = styled.div`
   &::disabled {
     cursor: not-allowed;
   }
+
+  &::before {
+    height: 100% !important;
+  }
 `;
 
 export default function MenuItemCheckBox({ checked }: { checked: boolean }) {
@@ -189,7 +197,7 @@ ${({ dropDownWidth, id }) => `
 
 	.rc-select-item-option-state {
 		pointer-events: all;
-		margin-right: 10px;
+		margin-right: 0px;
 	}
 }
 .rc-select-item-option-grouped {
@@ -201,23 +209,31 @@ ${({ dropDownWidth, id }) => `
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: ${Colors.GREY_8};
+  color: var(--wds-color-text);
   font-weight: 400;
 }
-.rc-select-item-option:hover {
-	background: ${({ accentColor }) => lightenColor(accentColor)};
+.rc-select-item-option-active {
+  background: var(--wds-color-bg-focus) !important;
+  color: var(--wds-color-text);
 
   & .${Classes.CONTROL} .${Classes.CONTROL_INDICATOR} {
-    border-color: ${({ accentColor }) => accentColor} !important;
+    border-color: var(--wds-color-border-hover) !important;
+  }
+}
+.rc-select-item-option:hover {
+	background: var(--wds-color-bg-hover);
+
+  & .${Classes.CONTROL} .${Classes.CONTROL_INDICATOR} {
+    border-color: var(--wds-color-border-hover) !important;
   }
 
   & .rc-select-item-option-content {
-    color: ${Colors.GREY_9};
+    color: var(--wds-color-text);
   }
 }
 .rc-select-item-option-selected {
   & .rc-select-item-option-content {
-    color: ${Colors.GREY_10};
+    color: var(--wds-color-text);
   }
 }
 .rc-select-item-option-disabled {
@@ -318,11 +334,10 @@ ${({ dropDownWidth, id }) => `
     padding-left: 42px;
     margin-bottom: 0;
     .${Classes.CONTROL_INDICATOR} {
-      margin-right: 20px;
+      margin-right: 0px;
     }
     &.all-options.selected {
-      background: ${({ accentColor }) => lightenColor(accentColor)};
-      color: ${Colors.GREY_10} !important;
+      color: var(--wds-color-text) !important;
     }
   }
   &&&& .${Classes.CONTROL} .${Classes.CONTROL_INDICATOR} {
@@ -344,6 +359,12 @@ ${({ dropDownWidth, id }) => `
     border-color: ${({ accentColor }) => accentColor} !important;
     box-shadow: none;
     outline: none !important;
+
+    &::before {
+      background-image: url(${CheckIcon}) !important;
+      background-repeat: no-repeat !important;
+      background-position: center !important;
+    }
   }
   ${CommonSelectFilterStyle}
   .rc-select-item {
@@ -397,12 +418,12 @@ export const MultiSelectContainer = styled.div<{
       position: absolute;
       top: 50%;
       right: 12px;
-      left: 19px;
+      left: 10px;
       transform: translateY(-50%);
       transition: all 0.3s;
       flex: 1;
       overflow: hidden;
-      color: ${Colors.GREY_6};
+      color: var(--wds-color-text-light);
       white-space: nowrap;
       text-overflow: ellipsis;
       pointer-events: none;
@@ -426,13 +447,23 @@ export const MultiSelectContainer = styled.div<{
       cursor: not-allowed;
     }
     & .rc-select-selector {
-      background-color: ${Colors.GREY_1} !important;
-      border: 1px solid ${Colors.GREY_3};
+      background-color: var(--wds-color-bg-disabled) !important;
+      border: 1px solid var(--wds-color-border-disabled) !important;
+
+      .rc-select-selection-item {
+        border-color: var(--wds-color-border-disabled);
+      }
       .rc-select-selection-item-content {
-        color: ${Colors.GREY_7};
+        color: var(--wds-color-text-disabled) !important;
       }
     }
-    & .rc-select-arrow {
+
+    & .rc-select-selection-placeholder {
+      color: var(--wds-color-text-disabled-light);
+    }
+
+    & .rc-select-arrow svg path {
+      fill: var(--wds-color-icon-disabled);
     }
   }
   .rc-select-show-arrow.rc-select-loading {
@@ -457,7 +488,7 @@ export const MultiSelectContainer = styled.div<{
       display: flex;
       flex-wrap: wrap;
       padding: 1px;
-      background: ${Colors.WHITE};
+      background: var(--wds-color-bg);
       border-radius: ${({ borderRadius }) => borderRadius} !important;
       box-shadow: ${({ boxShadow }) => `${boxShadow}`} !important;
       width: 100%;
@@ -467,7 +498,7 @@ export const MultiSelectContainer = styled.div<{
       .rc-select-selection-item {
         background: none;
         border: 1px solid ${Colors.GREY_3};
-        border-radius: 360px;
+        border-radius: ${({ borderRadius }) => borderRadius} !important;
         max-width: 273.926px;
         height: 20px;
         color: ${Colors.GREY_10};
@@ -569,17 +600,23 @@ export const MultiSelectContainer = styled.div<{
     .rc-select-selector {
       padding-right: 36px;
       padding-left: 10px;
-      background: ${Colors.WHITE};
+      background: var(--wds-color-bg);
       border-radius: ${({ borderRadius }) => borderRadius};
       box-shadow: ${({ boxShadow }) => `${boxShadow}`} !important;
       height: inherit;
       width: 100%;
       transition: none;
       border: 1px solid
-        ${(props) => (props.isValid ? Colors.GREY_3 : Colors.DANGER_SOLID)};
+        ${(props) =>
+          props.isValid
+            ? "var(--wds-color-border)"
+            : "var(--wds-color-border-danger)"};
       &:hover {
         border: 1px solid
-          ${(props) => (props.isValid ? Colors.GREY_5 : Colors.DANGER_SOLID)};
+        ${(props) =>
+          props.isValid
+            ? "var(--wds-color-border-hover)"
+            : "var(--wds-color-border-danger-hover)"};
       }
     }
   }
@@ -594,11 +631,16 @@ export const MultiSelectContainer = styled.div<{
       display: flex;
       align-items: center;
       justify-content: center;
-      fill: ${Colors.SLATE_GRAY};
+      fill: var(--wds-color-icon);
 
       & svg {
         width: 20px;
         height: 20px;
+        fill: var(--wds-color-icon);
+
+        path {
+          fill: var(--wds-color-icon);
+        }
       }
     }
   }
@@ -610,10 +652,10 @@ export const MultiSelectContainer = styled.div<{
         props.isValid
           ? `
           border: 1px solid  ${props.accentColor};
-          box-shadow: 0px 0px 0px 3px ${lightenColor(
+          box-shadow: 0px 0px 0px 2px ${lightenColor(
             props.accentColor,
           )} !important;`
-          : `border: 1px solid ${Colors.DANGER_SOLID};`}
+          : `border: 1px solid var(--wds-color-border-danger); box-shadow: 0px 0px 0px 2px var(--wds-color-border-danger-focus-light) !important;`}
     }
   }
 `;
@@ -626,12 +668,25 @@ export const StyledCheckbox = styled(Checkbox)<{
     text-overflow: ellipsis;
     height: 38px;
     padding-bottom: 0 !important;
-    color: ${Colors.GREY_8} !important;
+    color: var(--wds-color-text) !important;
     display: flex;
     align-items: center;
+    padding-left: 16px !important;
+    & .${Classes.CONTROL_INDICATOR} {
+      margin: 0;
+      margin-right: 10px;
+    }
     &:hover {
-      background: ${Colors.GREEN_SOLID_LIGHT_HOVER};
-      color: ${Colors.GREY_9} !important;
+      background: var(--wds-color-bg-hover);
+      color: var(--wds-color-text) !important;
+
+      & .${Classes.CONTROL_INDICATOR} {
+        border-color: var(--wds-color-border-hover) !important;
+      }
+    }
+
+    & input:checked ~ .${Classes.CONTROL_INDICATOR} {
+      border-color: ${({ accentColor }) => accentColor} !important;
     }
   }
 `;
diff --git a/app/client/src/widgets/SelectWidget/component/index.styled.tsx b/app/client/src/widgets/SelectWidget/component/index.styled.tsx
index 344a94c3d4..63a69ee3ad 100644
--- a/app/client/src/widgets/SelectWidget/component/index.styled.tsx
+++ b/app/client/src/widgets/SelectWidget/component/index.styled.tsx
@@ -21,6 +21,7 @@ export const StyledDiv = styled.div`
 export const StyledControlGroup = styled(ControlGroup)<{
   compactMode: boolean;
   labelPosition?: LabelPosition;
+  isDisabled?: boolean;
 }>`
   &&& > {
     span {
@@ -34,14 +35,34 @@ export const StyledControlGroup = styled(ControlGroup)<{
         svg {
           width: 10px !important;
           height: 10px !important;
+          fill: var(--wds-color-icon);
+
+          path {
+            fill: ${({ isDisabled }) =>
+              isDisabled
+                ? "var(--wds-color-icon-disabled)"
+                : "var(--wds-color-icon)"};
+            stroke: ${({ isDisabled }) =>
+              isDisabled
+                ? "var(--wds-color-icon-disabled)"
+                : "var(--wds-color-icon)"} !important;
+          }
         }
       }
       .dropdown-icon {
         width: 20px;
 
         svg {
+          fill: var(--wds-color-icon);
           width: 20px;
           height: 20px;
+
+          path {
+            fill: ${({ isDisabled }) =>
+              isDisabled
+                ? "var(--wds-color-icon-disabled)"
+                : "var(--wds-color-icon)"};
+          }
         }
       }
     }
@@ -81,24 +102,24 @@ export const StyledSingleDropDown = styled(SingleDropDown)<{
     box-shadow: ${(props) => props.boxShadow} !important;
     border: 1px solid;
     border-color: ${(props) =>
-      props.hasError ? Colors.DANGER_SOLID : Colors.GREY_3};
-    ${(props) =>
-      props.isValid
-        ? `
-        &:hover {
-          border-color: ${Colors.GREY_5};
-        }
-        &:focus {
-          outline: 0;
-          border-color:
-            ${props.hasError ? Colors.DANGER_SOLID : props.accentColor};
-          box-shadow:
-            ${`0px 0px 0px 3px ${lightenColor(
-              props.hasError ? Colors.DANGER_SOLID : props.accentColor,
-            )} !important;`};
-        }
-      `
-        : ""};
+      props.hasError
+        ? "var(--wds-color-border-danger)"
+        : "var(--wds-color-border)"};
+    &:hover {
+      border-color: ${(props) =>
+        props.hasError
+          ? "var(--wds-color-border-danger-hover)"
+          : "var(--wds-color-border-hover)"};
+    }
+    &:focus {
+      outline: 0;
+      border-color: ${(props) =>
+        props.hasError ? "var(--wds-color-border-danger)" : props.accentColor};
+      box-shadow: ${(props) =>
+        `0px 0px 0px 2px ${lightenColor(
+          props.hasError ? Colors.DANGER_SOLID : props.accentColor,
+        )} !important;`};
+    }
   }
 
   &&&&& .${Classes.POPOVER_OPEN} .${Classes.BUTTON} {
@@ -107,19 +128,22 @@ export const StyledSingleDropDown = styled(SingleDropDown)<{
       !props.hasError
         ? `
         border-color: ${
-          props.hasError ? Colors.DANGER_SOLID : props.accentColor
+          props.hasError ? "var(--wds-color-border-danger)" : props.accentColor
         };
-        box-shadow: ${`0px 0px 0px 3px ${lightenColor(
+        box-shadow: ${`0px 0px 0px 2px ${lightenColor(
           props.hasError ? Colors.DANGER_SOLID : props.accentColor,
         )} !important;`};
       `
-        : `border: 1px solid ${Colors.DANGER_SOLID};`}
+        : `border: 1px solid var(--wds-color-border-danger);`}
   }
   &&&&& .${Classes.DISABLED} {
-    background-color: ${Colors.GREY_1};
-    border: 1px solid ${Colors.GREY_3};
+    background-color: var(--wds-color-bg-disabled);
+    border: 1px solid var(--wds-color-border-disabled);
     .${Classes.BUTTON_TEXT} {
-      color: ${Colors.GREY_7};
+      color: ${(props) =>
+        !isEmptyOrNill(props.value)
+          ? "var(--wds-color-text-disabled)"
+          : "var(--wds-color-text-disabled-light)"};
     }
   }
   .${Classes.BUTTON_TEXT} {
@@ -131,12 +155,14 @@ export const StyledSingleDropDown = styled(SingleDropDown)<{
     -webkit-line-clamp: 1;
     -webkit-box-orient: vertical;
     color: ${(props) =>
-      !isEmptyOrNill(props.value) ? Colors.GREY_10 : Colors.GREY_6};
+      !isEmptyOrNill(props.value)
+        ? "var(--wds-color-text)"
+        : "var(--wds-color-text-light)"};
   }
   && {
     .${Classes.ICON} {
       width: fit-content;
-      color: ${Colors.SLATE_GRAY};
+      color: var(--wds-color-icon-disabled);
     }
   }
 `;
@@ -155,7 +181,7 @@ ${({ dropDownWidth, id }) => `
 .select-popover-wrapper {
   box-shadow: 0 6px 20px 0px rgba(0, 0, 0, 0.15) !important;
   border-radius: ${({ borderRadius }) =>
-    borderRadius === "1.5rem" ? `0.375rem` : borderRadius} !important;
+    `min(${borderRadius}, 0.375rem) !important`};
   overflow: hidden;
   background: white;
   ${CommonSelectFilterStyle}
@@ -171,10 +197,10 @@ ${({ dropDownWidth, id }) => `
     border-radius: 0;
     color: ${Colors.GREY_8};
     &:hover{
-      background: ${({ accentColor }) => `${lightenColor(accentColor)}`};
+      background: var(--wds-color-bg-hover);
     }
     &.is-focused{
-      background: ${({ accentColor }) => `${lightenColor(accentColor)}`};
+      background: var(--wds-color-bg-focus);
     }
     &.${Classes.ACTIVE} {
       background: ${({ accentColor }) => `${lightenColor(accentColor)}`};
@@ -209,7 +235,6 @@ export const MenuItem = styled.div<{
     display: flex;
     flex-direction: row;
     align-items: flex-start;
-    border-radius: 2px;
     color: inherit;
     line-height: 20px;
     padding: 5px 7px;
@@ -220,24 +245,35 @@ export const MenuItem = styled.div<{
 
     min-height: 38px;
     padding: 9px 12px;
-    color: ${Colors.DOVE_GRAY2};
+    color: var(--wds-color-text);
     outline: none !important;
     background-color: transparent;
 
     &:hover {
-      background-color: ${({ accentColor }) => lightenColor(accentColor)};
-      color: ${Colors.GREY_10};
+      background-color: var(--wds-color-bg-hover);
+      color: var(--wds-color-text);
       position: relative;
     }
   }
 
   & .menu-item-active {
-    background-color: ${({ accentColor }) => lightenColor(accentColor)};
+    background-color: ${({ accentColor }) =>
+      lightenColor(accentColor)} !important;
+
+    &:hover {
+      background-color: ${({ accentColor }) =>
+        lightenColor(accentColor, "0.90")} !important;
+    }
   }
 
   && .has-focus {
+    color: var(--wds-color-text);
+    background-color: var(--wds-color-bg-focus) !important;
+  }
+
+  && .has-focus.menu-item-active {
     background-color: ${({ accentColor }) =>
-      lightenColor(accentColor)} !important;
+      lightenColor(accentColor, "0.90")} !important;
   }
 
   & .menu-item-text {
diff --git a/app/client/src/widgets/SelectWidget/component/index.tsx b/app/client/src/widgets/SelectWidget/component/index.tsx
index 60983a900e..1521ef957c 100644
--- a/app/client/src/widgets/SelectWidget/component/index.tsx
+++ b/app/client/src/widgets/SelectWidget/component/index.tsx
@@ -318,6 +318,7 @@ class SelectComponent extends React.Component<
         <StyledControlGroup
           compactMode={compactMode}
           fill
+          isDisabled={disabled}
           labelPosition={labelPosition}
         >
           <StyledSingleDropDown
diff --git a/app/client/src/widgets/SingleSelectTreeWidget/component/index.styled.tsx b/app/client/src/widgets/SingleSelectTreeWidget/component/index.styled.tsx
index 9d91a8b6b2..fa6f169ba8 100644
--- a/app/client/src/widgets/SingleSelectTreeWidget/component/index.styled.tsx
+++ b/app/client/src/widgets/SingleSelectTreeWidget/component/index.styled.tsx
@@ -192,10 +192,10 @@ ${({ dropDownWidth, id }) => `
     height: 14px;
     direction: ltr;
     background-color: transparent;
-    border: 1px solid ${Colors.GREY_3};
+    border: 1px solid var(--wds-color-border);
     border-radius: 100%;
     border-collapse: separate;
-    transition: all .3s;
+    transition: none;
     flex-shrink: 0;
   }
 }
@@ -404,7 +404,7 @@ ${({ dropDownWidth, id }) => `
 
 
 .rc-tree-select-tree-checkbox-wrapper:hover .rc-tree-select-tree-checkbox-inner, .rc-tree-select-tree-checkbox:hover .rc-tree-select-tree-checkbox-inner, .rc-tree-select-tree-checkbox-input:focus+.rc-tree-select-tree-checkbox-inner {
-  border-color: ${({ accentColor }) => accentColor} !important;
+  border-color: var(--wds-color-border-hover) !important;
  }
  .rc-tree-select-tree-checkbox-checked .rc-tree-select-tree-checkbox-inner {
    border-color: ${({ accentColor }) => accentColor} !important;
@@ -527,16 +527,29 @@ ${({ dropDownWidth, id }) => `
 	color: #767676;
 	cursor: not-allowed;
 }
-.rc-tree-select-tree-treenode-active,
 .rc-tree-select-tree-treenode-selected
 {
 	background: ${({ accentColor }) => lightenColor(accentColor)};
+
+  &:hover {
+    background: ${({ accentColor }) =>
+      lightenColor(accentColor, "0.90")} !important;
+  }
+
+
+}
+.rc-tree-select-tree-treenode-selected.rc-tree-select-tree-treenode-active {
+  background: ${({ accentColor }) =>
+    lightenColor(accentColor, "0.90")} !important;
+}
+.rc-tree-select-tree-treenode-active {
+  background: var(--wds-color-bg-focus) !important;
 }
 .rc-tree-select-tree-treenode:hover {
-	background: ${({ accentColor }) => lightenColor(accentColor)};
+	background: var(--wds-color-bg-hover);
 
   .rc-tree-select-tree-iconEle {
-    border-color: ${({ accentColor }) => accentColor} !important;;
+    border-color: var(--wds-color-border-hover) !important;
   }
 }
 .rc-tree-select-tree-node-selected {
@@ -545,7 +558,7 @@ ${({ dropDownWidth, id }) => `
 	opacity: 1;
 
   .rc-tree-select-tree-title {
-    color: ${Colors.GREY_10};
+    color: var(--wds-color-text);
   }
 
   .rc-tree-select-tree-icon__customize {
@@ -582,7 +595,7 @@ ${({ dropDownWidth, id }) => `
 	display: inline-block;
   margin-left: 10px;
   font-size: 14px !important;
-  color: ${Colors.GREY_8};
+  color: var(--wds-color-text);
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -636,7 +649,7 @@ export const TreeSelectContainer = styled.div<{
       transition: all 0.3s;
       flex: 1;
       overflow: hidden;
-      color: ${Colors.GREY_6};
+      color: var(--wds-color-text-light);
       white-space: nowrap;
       text-overflow: ellipsis;
       pointer-events: none;
@@ -658,18 +671,28 @@ export const TreeSelectContainer = styled.div<{
     cursor: not-allowed;
     input {
       cursor: not-allowed;
-      background-color: ${Colors.GREY_1} !important;
+      background-color: var(--wds-color-bg-disabled) !important;
     }
     .rc-tree-select-selector {
-      border: 1.2px solid ${Colors.GREY_3} !important;
-      background-color: ${Colors.GREY_1} !important;
+      border: 1px solid var(--wds-color-border-disabled) !important;
+      background-color: var(--wds-color-bg-disabled) !important;
 
       .rc-tree-select-selection-search input {
-        background-color: ${Colors.GREY_1}; // color fix for mozilla
+        background-color: var(--wds-color-bg-disabled) // color fix for mozilla
       }
       .rc-tree-select-selection-item {
-        color: ${Colors.GREY_7};
-        background-color: ${Colors.GREY_1};
+        color: var(--wds-color-text-disabled);
+        background-color: var(--wds-color-bg-disabled) !important;
+      }
+    }
+
+    .rc-tree-select-selection-placeholder {
+      color: var(--wds-color-text-disabled-light);
+    }
+
+    & .dropdown-icon {
+      svg path {
+        fill: var(--wds-color-icon-disabled) !important;
       }
     }
   }
@@ -693,7 +716,10 @@ export const TreeSelectContainer = styled.div<{
     &:hover {
       .rc-tree-select-selector {
         border: 1.2px solid
-          ${(props) => (props.isValid ? Colors.GREY_5 : Colors.DANGER_SOLID)};
+        ${(props) =>
+          props.isValid
+            ? "var(--wds-color-border-hover)"
+            : "var(--wds-color-border-danger-hover)"};
       }
     }
   }
@@ -702,9 +728,12 @@ export const TreeSelectContainer = styled.div<{
     flex-wrap: wrap;
     padding-right: 42px;
     border: 1px solid
-      ${(props) => (props.isValid ? Colors.GREY_3 : Colors.DANGER_SOLID)};
+      ${(props) =>
+        props.isValid
+          ? "var(--wds-color-border)"
+          : "var(--wds-color-border-danger)"};
     box-sizing: border-box;
-    background: ${Colors.WHITE};
+    background: var(--wds-color-bg);
     border-radius: ${({ borderRadius }) => borderRadius};
     box-shadow: ${({ boxShadow }) => `${boxShadow}`} !important;
     overflow: hidden;
@@ -891,9 +920,17 @@ export const TreeSelectContainer = styled.div<{
 
       & .clear-icon {
         width: 16px;
+        margin-right: 8px;
+
         svg {
           width: 16px;
           height: 16px;
+
+          fill: var(--wds-color-icon);
+
+          path {
+            fill: var(--wds-color-icon);
+          }
         }
       }
     }
@@ -912,8 +949,11 @@ export const TreeSelectContainer = styled.div<{
         svg {
           width: 20px;
           height: 20px;
+          path {
+            fill: var(--wds-color-icon);
+          }
         }
-      fill: ${Colors.SLATE_GRAY};
+      fill: var(--wds-color-icon);
       }
     }
     .rc-tree-select-arrow-icon {
diff --git a/app/client/src/widgets/WidgetUtils.ts b/app/client/src/widgets/WidgetUtils.ts
index 75127e43b5..a21d0470bb 100644
--- a/app/client/src/widgets/WidgetUtils.ts
+++ b/app/client/src/widgets/WidgetUtils.ts
@@ -234,10 +234,10 @@ export const getComplementaryGrayscaleColor = (color = "#fff") => {
  * @param borderRadius
  * @returns
  */
-export const lightenColor = (color = "#fff") => {
+export const lightenColor = (color = "#fff", amount = "0.93") => {
   const { h, s } = tinycolor(color).toHsl();
 
-  const newColor = tinycolor(`hsl ${h} ${s} 0.93}`).toHex();
+  const newColor = tinycolor(`hsl ${h} ${s} ${amount}}`).toHex();
 
   return `#${newColor}`;
 };