diff --git a/app/client/src/components/ads/AppIcon.tsx b/app/client/src/components/ads/AppIcon.tsx
index 296b00da1e..c8f920bb00 100644
--- a/app/client/src/components/ads/AppIcon.tsx
+++ b/app/client/src/components/ads/AppIcon.tsx
@@ -14,7 +14,7 @@ import { ReactComponent as FlightIcon } from "assets/icons/ads/flight.svg";
 
 import styled from "styled-components";
 import { Size } from "./Button";
-import { CommonComponentProps } from "./common";
+import { CommonComponentProps, Classes } from "./common";
 
 export const AppIconCollection = [
   "bag",
@@ -72,7 +72,7 @@ const IconWrapper = styled.a<AppIconProps & { styledProps: cssAttributes }>`
     width: ${props => props.styledProps.width}px;
     height: ${props => props.styledProps.height}px;
     path {
-      fill: ${props => props.theme.colors.blackShades[7]};
+      fill: ${props => props.theme.colors.appIcon.normal};
     }
   }
 `;
@@ -133,6 +133,7 @@ const AppIcon = (props: AppIconProps) => {
     <IconWrapper
       data-cy={props.cypressSelector}
       {...props}
+      className={Classes.APP_ICON}
       styledProps={styledProps}
     >
       {returnIcon}
diff --git a/app/client/src/components/ads/Button.tsx b/app/client/src/components/ads/Button.tsx
index cccc465e03..94b41d3539 100644
--- a/app/client/src/components/ads/Button.tsx
+++ b/app/client/src/components/ads/Button.tsx
@@ -81,19 +81,19 @@ const stateStyles = (
           bgColorPrimary = props.theme.colors[props.variant].darkest;
           borderColorPrimary = props.theme.colors[props.variant].darkest;
         }
-        txtColorPrimary = props.theme.colors.blackShades[6];
+        txtColorPrimary = props.theme.colors.button.disabledText;
         break;
       case Category.secondary:
         if (props.variant) {
           bgColorSecondary = props.theme.colors[props.variant].darkest;
           borderColorSecondary = props.theme.colors[props.variant].darker;
         }
-        txtColorSecondary = props.theme.colors.blackShades[6];
+        txtColorSecondary = props.theme.colors.button.disabledText;
         break;
       case Category.tertiary:
         bgColorTertiary = props.theme.colors.tertiary.darker;
         borderColorTertiary = props.theme.colors.tertiary.dark;
-        txtColorTertiary = props.theme.colors.blackShades[6];
+        txtColorTertiary = props.theme.colors.button.disabledText;
         break;
     }
   } else if (state === "main") {
diff --git a/app/client/src/components/ads/Checkbox.tsx b/app/client/src/components/ads/Checkbox.tsx
index 19e6400bec..abcd03a071 100644
--- a/app/client/src/components/ads/Checkbox.tsx
+++ b/app/client/src/components/ads/Checkbox.tsx
@@ -19,16 +19,16 @@ const Checkmark = styled.span<{
   background-color: ${props =>
     props.isChecked
       ? props.disabled
-        ? props.theme.colors.blackShades[3]
+        ? props.theme.colors.checkbox.disabled
         : props.theme.colors.info.main
       : "transparent"};
   border: 2px solid
     ${props =>
       props.isChecked
         ? props.disabled
-          ? props.theme.colors.blackShades[3]
+          ? props.theme.colors.checkbox.disabled
           : props.theme.colors.info.main
-        : props.theme.colors.blackShades[4]};
+        : props.theme.colors.checkbox.unchecked};
 
   &::after {
     content: "";
@@ -40,7 +40,9 @@ const Checkmark = styled.span<{
     height: 11px;
     border: solid
       ${props =>
-        props.disabled ? "#565656" : props.theme.colors.blackShades[9]};
+        props.disabled
+          ? props.theme.colors.checkbox.disabledCheck
+          : props.theme.colors.checkbox.normalCheck};
     border-width: 0 2px 2px 0;
     transform: rotate(45deg);
   }
@@ -57,7 +59,7 @@ const StyledCheckbox = styled.label<{
   font-size: ${props => props.theme.typography.p1.fontSize}px;
   line-height: ${props => props.theme.typography.p1.lineHeight}px;
   letter-spacing: ${props => props.theme.typography.p1.letterSpacing}px;
-  color: ${props => props.theme.colors.blackShades[7]};
+  color: ${props => props.theme.colors.checkbox.labelColor};
   padding-left: ${props => props.theme.spaces[12] - 2}px;
 
   input {
diff --git a/app/client/src/components/ads/ColorSelector.tsx b/app/client/src/components/ads/ColorSelector.tsx
index c033ecea44..b58c50a3b8 100644
--- a/app/client/src/components/ads/ColorSelector.tsx
+++ b/app/client/src/components/ads/ColorSelector.tsx
@@ -29,7 +29,8 @@ const ColorBox = styled.div<{ selected: string; color: string }>`
   position: relative;
 
   &:hover {
-    box-shadow: 0px 0px 0px ${props => props.theme.spaces[1] - 1}px #353535;
+    box-shadow: 0px 0px 0px ${props => props.theme.spaces[1] - 1}px
+      ${props => props.theme.colors.colorSelector.shadow};
   }
 
   &:last-child {
@@ -45,8 +46,8 @@ const ColorBox = styled.div<{ selected: string; color: string }>`
     top: ${props.theme.spaces[1] - 1}px
     width: ${props.theme.spaces[2] - 1}px
     height: ${props.theme.spaces[4] - 1}px
-    border: 1.5px solid ${props.theme.colors.blackShades[9]};
-    border-width: 0 1.5px 1.5px 0;
+    border: 2px solid ${props.theme.colors.colorSelector.checkmark};
+    border-width: 0 2px 2px 0;
     transform: rotate(45deg); 
   }`
       : `
diff --git a/app/client/src/components/ads/Dropdown.tsx b/app/client/src/components/ads/Dropdown.tsx
index fa98463c94..c55df20e19 100644
--- a/app/client/src/components/ads/Dropdown.tsx
+++ b/app/client/src/components/ads/Dropdown.tsx
@@ -27,8 +27,8 @@ const Selected = styled.div<{ isOpen: boolean; disabled?: boolean }>`
     ${props => props.theme.spaces[6]}px;
   background: ${props =>
     props.disabled
-      ? props.theme.colors.blackShades[2]
-      : props.theme.colors.blackShades[0]};
+      ? props.theme.colors.dropdown.header.disabledText
+      : props.theme.colors.dropdown.header.disabledBg};
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -47,15 +47,15 @@ const Selected = styled.div<{ isOpen: boolean; disabled?: boolean }>`
   .${Classes.TEXT} {
     ${props =>
       props.disabled
-        ? `color: ${props.theme.colors.blackShades[6]}`
-        : `color: ${props.theme.colors.blackShades[7]}`};
+        ? `color: ${props.theme.colors.dropdown.text}`
+        : `color: ${props.theme.colors.dropdown.disabledText}`};
   }
 `;
 
 const DropdownWrapper = styled.div`
   margin-top: ${props => props.theme.spaces[2] - 1}px;
-  background: ${props => props.theme.colors.blackShades[3]};
-  box-shadow: 0px 12px 28px rgba(0, 0, 0, 0.6);
+  background: ${props => props.theme.colors.dropdown.menuBg};
+  box-shadow: 0px 12px 28px ${props => props.theme.colors.dropdown.menuShadow};
   width: 100%;
 `;
 
@@ -66,10 +66,14 @@ const OptionWrapper = styled.div<{ selected: boolean }>`
   display: flex;
   align-items: center;
   ${props =>
-    props.selected ? `background: ${props.theme.colors.blackShades[4]}` : null};
+    props.selected
+      ? `background: ${props.theme.colors.dropdown.selected.bg}`
+      : null};
   .${Classes.TEXT} {
     ${props =>
-      props.selected ? `color: ${props.theme.colors.blackShades[9]}` : null};
+      props.selected
+        ? `color: ${props.theme.colors.dropdown.selected.text}`
+        : null};
   }
   .${Classes.ICON} {
     margin-right: ${props => props.theme.spaces[5]}px;
@@ -77,20 +81,20 @@ const OptionWrapper = styled.div<{ selected: boolean }>`
       path {
         ${props =>
           props.selected
-            ? `fill: ${props.theme.colors.blackShades[8]}`
-            : `fill: ${props.theme.colors.blackShades[6]}`};
+            ? `fill: ${props.theme.colors.dropdown.selected.icon}`
+            : `fill: ${props.theme.colors.dropdown.icon}`};
       }
     }
   }
 
   &:hover {
     .${Classes.TEXT} {
-      color: ${props => props.theme.colors.blackShades[9]};
+      color: ${props => props.theme.colors.dropdown.selected.text};
     }
     .${Classes.ICON} {
       svg {
         path {
-          fill: ${props => props.theme.colors.blackShades[8]};
+          fill: ${props => props.theme.colors.dropdown.selected.icon};
         }
       }
     }
@@ -100,7 +104,7 @@ const OptionWrapper = styled.div<{ selected: boolean }>`
 const LabelWrapper = styled.div<{ label?: string }>`
   display: flex;
   flex-direction: column;
-  align-item: flex-start;
+  align-items: flex-start;
 
   ${props =>
     props.label
diff --git a/app/client/src/components/ads/EditableText.tsx b/app/client/src/components/ads/EditableText.tsx
index 0b855cc4ca..4a6c8426bb 100644
--- a/app/client/src/components/ads/EditableText.tsx
+++ b/app/client/src/components/ads/EditableText.tsx
@@ -3,7 +3,7 @@ import { EditableText as BlueprintEditableText } from "@blueprintjs/core";
 import styled from "styled-components";
 import Text, { TextType } from "./Text";
 import Spinner from "./Spinner";
-import { hexToRgba, Classes, CommonComponentProps } from "./common";
+import { Classes, CommonComponentProps } from "./common";
 import { noop } from "lodash";
 import Icon, { IconSize } from "./Icon";
 import { getThemeDetails } from "selectors/themeSelectors";
@@ -55,9 +55,9 @@ const editModeBgcolor = (
   theme: any,
 ): string => {
   if ((isInvalid && isEditing) || savingState === SavingState.ERROR) {
-    return hexToRgba(theme.colors.danger.main, 0.08);
+    return theme.colors.editableText.dangerBg;
   } else if (!isInvalid && isEditing) {
-    return theme.colors.blackShades[2];
+    return theme.colors.editableText.bg;
   } else {
     return "transparent";
   }
@@ -89,7 +89,7 @@ const TextContainer = styled.div<{
 
   &&& .bp3-editable-text-content {
     cursor: pointer;
-    color: ${props => props.theme.colors.blackShades[9]};
+    color: ${props => props.theme.colors.editableText.color};
     overflow: hidden;
     text-overflow: ellipsis;
     ${props => (props.isEditing ? "display: none" : "display: block")};
@@ -99,7 +99,7 @@ const TextContainer = styled.div<{
     border: none;
     outline: none;
     height: ${props => props.theme.spaces[13] + 3}px;
-    color: ${props => props.theme.colors.blackShades[9]};
+    color: ${props => props.theme.colors.editableText.color};
     min-width: 100%;
     border-radius: ${props => props.theme.spaces[0]}px;
   }
diff --git a/app/client/src/components/ads/Icon.tsx b/app/client/src/components/ads/Icon.tsx
index 7550f46194..5db54588aa 100644
--- a/app/client/src/components/ads/Icon.tsx
+++ b/app/client/src/components/ads/Icon.tsx
@@ -101,7 +101,7 @@ const IconWrapper = styled.span<IconProps>`
     width: ${props => sizeHandler(props.size)}px;
     height: ${props => sizeHandler(props.size)}px;
     path {
-      fill: ${props => props.theme.colors.blackShades[6]};
+      fill: ${props => props.theme.colors.icon.normal};
     }
   }
   visibility: ${props => (props.invisible ? "hidden" : "visible")};
@@ -109,14 +109,14 @@ const IconWrapper = styled.span<IconProps>`
   &:hover {
     cursor: pointer;
     path {
-      fill: ${props => props.theme.colors.blackShades[8]};
+      fill: ${props => props.theme.colors.icon.hover};
     }
   }
 
   &:active {
     cursor: pointer;
     path {
-      fill: ${props => props.theme.colors.blackShades[9]};
+      fill: ${props => props.theme.colors.icon.active};
     }
   }
 `;
diff --git a/app/client/src/components/ads/IconSelector.tsx b/app/client/src/components/ads/IconSelector.tsx
index 57a8214b9a..0dc17980fb 100644
--- a/app/client/src/components/ads/IconSelector.tsx
+++ b/app/client/src/components/ads/IconSelector.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import styled from "styled-components";
 import AppIcon, { AppIconName, AppIconCollection } from "./AppIcon";
 import { Size } from "./Button";
-import { CommonComponentProps } from "./common";
+import { CommonComponentProps, Classes } from "./common";
 
 type IconSelectorProps = CommonComponentProps & {
   onSelect?: (icon: AppIconName) => void;
@@ -28,7 +28,7 @@ const IconBox = styled.div<{ selectedColor?: string }>`
   justify-content: center;
   align-items: center;
   background-color: ${props =>
-    props.selectedColor || props.theme.colors.blackShades[2]};
+    props.selectedColor || props.theme.colors.appIcon.background};
   margin: 0 ${props => props.theme.spaces[2]}px
     ${props => props.theme.spaces[2]}px 0;
   position: relative;
@@ -36,6 +36,17 @@ const IconBox = styled.div<{ selectedColor?: string }>`
   &:nth-child(6n) {
     margin-right: ${props => props.theme.spaces[0]}px;
   }
+
+  ${props =>
+    props.selectedColor
+      ? `.${Classes.APP_ICON} {
+    svg {
+      path {
+        fill: #fff;
+      }
+    }
+  }`
+      : null};
 `;
 
 const IconSelector = (props: IconSelectorProps) => {
diff --git a/app/client/src/components/ads/Menu.tsx b/app/client/src/components/ads/Menu.tsx
index d19971d87c..6ace64786b 100644
--- a/app/client/src/components/ads/Menu.tsx
+++ b/app/client/src/components/ads/Menu.tsx
@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react";
-import { CommonComponentProps, Classes } from "./common";
+import { CommonComponentProps } from "./common";
 import styled from "styled-components";
 import { Popover } from "@blueprintjs/core/lib/esm/components/popover/popover";
 import { Position } from "@blueprintjs/core/lib/esm/common/position";
@@ -14,18 +14,12 @@ type MenuProps = CommonComponentProps & {
 
 const MenuWrapper = styled.div`
   width: 234px;
-  background: ${props => props.theme.colors.blackShades[3]};
-  box-shadow: 0px 12px 28px rgba(0, 0, 0, 0.75);
+  background: ${props => props.theme.colors.menu.background};
+  box-shadow: 0px 12px 28px ${props => props.theme.colors.menu.shadow};
 `;
 
 const MenuOption = styled.div`
-  color: ${props => props.theme.colors.blackShades[6]};
   font-family: ${props => props.theme.fonts[3]};
-  .${Classes.ICON} {
-    path {
-      fill: ${props => props.theme.colors.blackShades[6]};
-    }
-  }
 `;
 
 const Menu = (props: MenuProps) => {
@@ -36,6 +30,7 @@ const Menu = (props: MenuProps) => {
       onOpening={props.onOpening}
       onClosing={props.onClosing}
       className={props.className}
+      portalClassName={props.className}
       data-cy={props.cypressSelector}
     >
       {props.target}
diff --git a/app/client/src/components/ads/MenuDivider.tsx b/app/client/src/components/ads/MenuDivider.tsx
index b8ba4aef29..98bc9894ee 100644
--- a/app/client/src/components/ads/MenuDivider.tsx
+++ b/app/client/src/components/ads/MenuDivider.tsx
@@ -3,7 +3,7 @@ import styled from "styled-components";
 const MenuDivider = styled.div`
   margin: ${props => props.theme.spaces[1]}px
     ${props => props.theme.spaces[6]}px;
-  border-top: 1px solid #404040;
+  border-top: 1px solid ${props => props.theme.colors.menuBorder};
 `;
 
 export default MenuDivider;
diff --git a/app/client/src/components/ads/MenuItem.tsx b/app/client/src/components/ads/MenuItem.tsx
index 917107f0e4..08f763eec5 100644
--- a/app/client/src/components/ads/MenuItem.tsx
+++ b/app/client/src/components/ads/MenuItem.tsx
@@ -18,21 +18,31 @@ const ItemRow = styled.a<{ disabled?: boolean }>`
   justify-content: space-between;
   text-decoration: none;
   padding: 0px ${props => props.theme.spaces[6]}px;
+  .${Classes.TEXT} {
+    color: ${props => props.theme.colors.menuItem.normalText};
+  }
+  .${Classes.ICON} {
+    svg {
+      path {
+        fill: ${props => props.theme.colors.menuItem.normalIcon};
+      }
+    }
+  }
   height: 38px;
 
   ${props =>
     !props.disabled
       ? ` 
     &:hover {
-      cursor: pointer;
       text-decoration: none;
-      background-color: ${props.theme.colors.blackShades[4]};
+      cursor: pointer;
+      background-color: ${props.theme.colors.menuItem.hoverBg};
       .${Classes.TEXT} {
-        color: ${props.theme.colors.blackShades[9]};
+        color: ${props.theme.colors.menuItem.hoverText};
       }
       .${Classes.ICON} {
         path {
-          fill: ${props.theme.colors.blackShades[9]};
+          fill: ${props.theme.colors.menuItem.hoverIcon};
         }
       }
     }`
diff --git a/app/client/src/components/ads/Radio.tsx b/app/client/src/components/ads/Radio.tsx
index d79b2b63bc..f853383df0 100644
--- a/app/client/src/components/ads/Radio.tsx
+++ b/app/client/src/components/ads/Radio.tsx
@@ -44,7 +44,7 @@ const Radio = styled.label<{
   font-weight: ${props => props.theme.typography.p1.fontWeight};
   line-height: ${props => props.theme.typography.p1.lineHeight}px;
   letter-spacing: ${props => props.theme.typography.p1.letterSpacing}px;
-  color: ${props => props.theme.colors.blackShades[9]};
+  color: ${props => props.theme.colors.radio.text};
   ${props =>
     props.rows && props.rows > 0
       ? `flex-basis: calc(100% / ${props.rows})`
@@ -71,7 +71,7 @@ const Radio = styled.label<{
     height: ${props => props.theme.spaces[8]}px;
     background-color: transparent;
     border: ${props => props.theme.spaces[1] - 2}px solid
-      ${props => props.theme.colors.blackShades[4]};
+      ${props => props.theme.colors.radio.border};
     border-radius: 50%;
     margin-top: ${props => props.theme.spaces[0]}px;
   }
diff --git a/app/client/src/components/ads/RectangularSwitcher.tsx b/app/client/src/components/ads/RectangularSwitcher.tsx
index 03dd1ce2cf..506a0f0dca 100644
--- a/app/client/src/components/ads/RectangularSwitcher.tsx
+++ b/app/client/src/components/ads/RectangularSwitcher.tsx
@@ -30,7 +30,7 @@ const StyledSwitch = styled.label<{
     cursor: pointer;
     top: 0;
     left: 0;
-    border: 1px solid ${props => props.theme.colors.blackShades[5]};
+    border: 1px solid ${props => props.theme.colors.switch.border};
     background-color: ${props => props.theme.colors.info.main};
     width: 78px;
     height: 26px;
@@ -43,7 +43,7 @@ const StyledSwitch = styled.label<{
 			width: 36px;
 			height: 20px;
 			top: 2px;
-	    background-color: ${props.theme.colors.blackShades[0]};
+	    background-color: ${props.theme.colors.switch.bg};
       left: ${props.value && !props.firstRender ? "38px" : "2px"};
     	transition: ${props.firstRender ? "0.4s" : "none"};
 		}
@@ -54,17 +54,20 @@ const StyledSwitch = styled.label<{
   }
 
   input:checked + .slider:before {
-    background-color: ${props => props.theme.colors.blackShades[0]};
+    background-color: ${props => props.theme.colors.switch.hover.bg};
   }
 
   input:hover + .slider {
-    border: 1px solid ${props => props.theme.colors.blackShades[7]};
+    border: 1px solid ${props => props.theme.colors.switch.hover.border};
   }
 `;
 
 const Light = styled.div<{ value: boolean }>`
   .${Classes.TEXT} {
-    color: ${props => (props.value ? "#FFFFFF" : "#939090")};
+    color: ${props =>
+      props.value
+        ? props.theme.colors.switch.lightText
+        : props.theme.colors.switch.darkText};
     font-size: 10px;
     line-height: 12px;
     letter-spacing: -0.171429px;
@@ -75,11 +78,11 @@ const Light = styled.div<{ value: boolean }>`
 `;
 
 const Dark = styled.div<{ value: boolean }>`
-  .${Classes.TEXT} {
+  &&&& .${Classes.TEXT} {
     font-size: 10px;
     line-height: 12px;
     letter-spacing: -0.171429px;
-    color: ${props => (!props.value ? "#FFFFFF" : "#939090")};
+    color: ${props => props.theme.colors.switch.lightText};
   }
   position: absolute;
   top: 3px;
diff --git a/app/client/src/components/ads/SearchInput.tsx b/app/client/src/components/ads/SearchInput.tsx
index c3b43c3030..9aa36d2f98 100644
--- a/app/client/src/components/ads/SearchInput.tsx
+++ b/app/client/src/components/ads/SearchInput.tsx
@@ -41,10 +41,10 @@ const StyledInput = styled.input<
   letter-spacing: ${props => props.theme.typography.p1.letterSpacing}px;
   text-overflow: ellipsis;
 
-  color: ${props => props.theme.colors.blackShades[9]};
+  color: ${props => props.theme.colors.searchInput.text};
 
   &::placeholder {
-    color: ${props => props.theme.colors.blackShades[5]};
+    color: ${props => props.theme.colors.searchInput.placeholder};
   }
 `;
 
@@ -61,12 +61,14 @@ const InputWrapper = styled.div<{
     ${props => props.theme.spaces[6]}px;
   width: ${props => (props.fill ? "100%" : "210px")};
   background-color: ${props =>
-    props.variant === SearchVariant.SEAMLESS ? "transparent" : "#262626"};
+    props.variant === SearchVariant.SEAMLESS
+      ? "transparent"
+      : props.theme.colors.searchInput.bg};
   ${props =>
     props.variant === SearchVariant.BACKGROUND
       ? props.isFocused || props.value
         ? `box-shadow: 0px 1px 0px ${props.theme.colors.info.main}`
-        : `box-shadow: 0px 1px 0px ${props.theme.colors.blackShades[4]}`
+        : `box-shadow: 0px 1px 0px ${props.theme.colors.searchInput.border}`
       : null}
 `;
 
@@ -82,8 +84,8 @@ const SearchIcon = styled.div<{
       circle {
         stroke: ${props =>
           props.isFocused || props.value
-            ? props.theme.colors.blackShades[7]
-            : props.theme.colors.blackShades[5]};
+            ? props.theme.colors.searchInput.icon.focused
+            : props.theme.colors.searchInput.icon.normal};
       }
     }
   }
diff --git a/app/client/src/components/ads/Spinner.tsx b/app/client/src/components/ads/Spinner.tsx
index 2f40c640a1..737af40a23 100644
--- a/app/client/src/components/ads/Spinner.tsx
+++ b/app/client/src/components/ads/Spinner.tsx
@@ -31,7 +31,7 @@ const SvgContainer = styled.svg<SpinnerProp>`
 `;
 
 const SvgCircle = styled.circle`
-  stroke: ${props => props.theme.colors.blackShades[9]};
+  stroke: ${props => props.theme.colors.spinner};
   stroke-linecap: round;
   animation: ${dash} 1.5s ease-in-out infinite;
   stroke-width: ${props => props.theme.spaces[1]}px;
diff --git a/app/client/src/components/ads/Table.tsx b/app/client/src/components/ads/Table.tsx
index aadb9a3306..ae371e134b 100644
--- a/app/client/src/components/ads/Table.tsx
+++ b/app/client/src/components/ads/Table.tsx
@@ -12,7 +12,7 @@ const Styles = styled.div`
 
     thead {
       tr {
-        background-color: ${props => props.theme.colors.blackShades[2]};
+        background-color: ${props => props.theme.colors.table.headerBg};
 
         th:first-child {
           padding: 0 ${props => props.theme.spaces[9]}px;
@@ -21,7 +21,7 @@ const Styles = styled.div`
         th {
           padding: ${props => props.theme.spaces[5]}px 0;
           text-align: left;
-          color: ${props => props.theme.colors.blackShades[5]};
+          color: ${props => props.theme.colors.table.headerText};
           font-weight: ${props => props.theme.fontWeights[1]};
           font-size: ${props => props.theme.typography.h6.fontSize}px;
           line-height: ${props => props.theme.typography.h6.lineHeight}px;
@@ -33,11 +33,11 @@ const Styles = styled.div`
           }
 
           &:hover {
-            color: ${props => props.theme.colors.blackShades[7]};
+            color: ${props => props.theme.colors.table.hover.headerColor};
             cursor: pointer;
             svg {
               path {
-                fill: ${props => props.theme.colors.blackShades[7]};
+                fill: ${props => props.theme.colors.table.hover.headerColor};
               }
             }
           }
@@ -48,33 +48,33 @@ const Styles = styled.div`
     tbody {
       tr {
         td:first-child {
-          color: ${props => props.theme.colors.blackShades[7]};
+          color: ${props => props.theme.colors.table.rowTitle};
           padding: 0 ${props => props.theme.spaces[9]}px;
           font-weight: ${props => props.theme.fontWeights[1]};
         }
 
         td {
           padding: ${props => props.theme.spaces[4]}px 0;
-          color: ${props => props.theme.colors.blackShades[6]};
+          color: ${props => props.theme.colors.table.rowData};
           font-size: ${props => props.theme.typography.p1.fontSize}px;
           line-height: ${props => props.theme.typography.p1.lineHeight}px;
           letter-spacing: ${props => props.theme.typography.p1.letterSpacing}px;
           font-weight: normal;
-          border-bottom: 1px solid ${props => props.theme.colors.blackShades[3]};
+          border-bottom: 1px solid ${props => props.theme.colors.table.border};
         }
 
         &:hover {
-          background-color: ${props => props.theme.colors.blackShades[4]};
+          background-color: ${props => props.theme.colors.table.hover.rowBg};
           .${Classes.ICON} {
             path {
-              fill: ${props => props.theme.colors.blackShades[9]};
+              fill: ${props => props.theme.colors.table.hover.rowTitle};
             }
           }
           td:first-child {
-            color: ${props => props.theme.colors.blackShades[9]};
+            color: ${props => props.theme.colors.table.hover.rowTitle};
           }
           td {
-            color: ${props => props.theme.colors.blackShades[7]};
+            color: ${props => props.theme.colors.table.hover.rowData};
           }
         }
       }
diff --git a/app/client/src/components/ads/TableDropdown.tsx b/app/client/src/components/ads/TableDropdown.tsx
index 00d74ae7b8..9b14f05206 100644
--- a/app/client/src/components/ads/TableDropdown.tsx
+++ b/app/client/src/components/ads/TableDropdown.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { CommonComponentProps, hexToRgba, Classes } from "./common";
+import { CommonComponentProps, Classes } from "./common";
 import { ReactComponent as DownArrow } from "assets/icons/ads/down_arrow.svg";
 import Text, { TextType } from "./Text";
 import styled from "styled-components";
@@ -36,10 +36,10 @@ const OptionsWrapper = styled.div`
   width: 200px;
   display: flex;
   flex-direction: column;
-  background-color: ${props => props.theme.colors.blackShades[3]};
+  background-color: ${props => props.theme.colors.tableDropdown.bg};
   box-shadow: ${props => props.theme.spaces[0]}px
     ${props => props.theme.spaces[5]}px ${props => props.theme.spaces[13] - 2}px
-    ${props => hexToRgba(props.theme.colors.blackShades[0], 0.75)};
+    ${props => props.theme.colors.tableDropdown.shadow};
 `;
 
 const DropdownOption = styled.div<{
@@ -51,7 +51,7 @@ const DropdownOption = styled.div<{
   cursor: pointer;
   ${props =>
     props.isSelected
-      ? `background-color: ${props.theme.colors.blackShades[4]}`
+      ? `background-color: ${props.theme.colors.tableDropdown.selectedBg}`
       : null};
 
   .${Classes.TEXT}:last-child {
@@ -60,7 +60,7 @@ const DropdownOption = styled.div<{
 
   &:hover {
     .${Classes.TEXT} {
-      color: ${props => props.theme.colors.blackShades[9]};
+      color: ${props => props.theme.colors.tableDropdown.selectedText};
     }
   }
 `;
diff --git a/app/client/src/components/ads/Tabs.tsx b/app/client/src/components/ads/Tabs.tsx
index 0e79d959e9..f159b21034 100644
--- a/app/client/src/components/ads/Tabs.tsx
+++ b/app/client/src/components/ads/Tabs.tsx
@@ -30,10 +30,10 @@ const TabsWrapper = styled.div<{ shouldOverflow?: boolean }>`
     display: flex;
     align-items: center;
     border-bottom: ${props => props.theme.spaces[1] - 2}px solid
-      ${props => props.theme.colors.blackShades[3]};
-    color: ${props => props.theme.colors.blackShades[6]};
+      ${props => props.theme.colors.tabs.border};
+    color: ${props => props.theme.colors.tabs.normal};
     path {
-      fill: ${props => props.theme.colors.blackShades[6]};
+      fill: ${props => props.theme.colors.tabs.normal};
     }
     ${props =>
       props.shouldOverflow &&
@@ -57,17 +57,17 @@ const TabsWrapper = styled.div<{ shouldOverflow?: boolean }>`
     position: relative;
   }
   .react-tabs__tab:hover {
-    color: ${props => props.theme.colors.blackShades[9]};
+    color: ${props => props.theme.colors.tabs.hover};
     path {
-      fill: ${props => props.theme.colors.blackShades[9]};
+      fill: ${props => props.theme.colors.tabs.hover};
     }
   }
   .react-tabs__tab--selected {
-    color: ${props => props.theme.colors.blackShades[9]};
+    color: ${props => props.theme.colors.tabs.hover};
     background-color: transparent;
 
     path {
-      fill: ${props => props.theme.colors.blackShades[9]};
+      fill: ${props => props.theme.colors.tabs.hover};
     }
 
     &::after {
@@ -93,7 +93,7 @@ const TabsWrapper = styled.div<{ shouldOverflow?: boolean }>`
     box-shadow: none;
     border-color: transparent;
     path {
-      fill: ${props => props.theme.colors.blackShades[9]};
+      fill: ${props => props.theme.colors.tabs.hover};
     }
   }
 `;
diff --git a/app/client/src/components/ads/Text.tsx b/app/client/src/components/ads/Text.tsx
index fda2639320..b657ca2c32 100644
--- a/app/client/src/components/ads/Text.tsx
+++ b/app/client/src/components/ads/Text.tsx
@@ -38,16 +38,16 @@ const typeSelector = (props: TextProps & ThemeProp): string => {
   let color = "";
   switch (props.type) {
     case TextType.P1:
-      color = props.theme.colors.blackShades[6];
+      color = props.theme.colors.text.normal;
       break;
     case TextType.P2:
-      color = props.theme.colors.blackShades[6];
+      color = props.theme.colors.text.normal;
       break;
     case TextType.P3:
-      color = props.theme.colors.blackShades[6];
+      color = props.theme.colors.text.normal;
       break;
     default:
-      color = props.theme.colors.blackShades[7];
+      color = props.theme.colors.text.heading;
       break;
   }
   return color;
@@ -70,7 +70,7 @@ const Text = styled.span.attrs((props: TextProps) => ({
   letter-spacing: ${props =>
     props.theme.typography[props.type].letterSpacing}px;
   color: ${props =>
-    props.highlight ? props.theme.colors.blackShades[9] : typeSelector(props)};
+    props.highlight ? props.theme.colors.text.hightlight : typeSelector(props)};
   text-transform: ${props => (props.case ? props.case : "none")};
 `;
 
diff --git a/app/client/src/components/ads/TextInput.tsx b/app/client/src/components/ads/TextInput.tsx
index 92c040cef1..b2bc1d87e6 100644
--- a/app/client/src/components/ads/TextInput.tsx
+++ b/app/client/src/components/ads/TextInput.tsx
@@ -52,14 +52,14 @@ const boxStyles = (
   isValid: boolean,
   theme: any,
 ): boxReturnType => {
-  let bgColor = theme.colors.blackShades[0];
-  let color = theme.colors.blackShades[9];
-  let borderColor = theme.colors.blackShades[0];
+  let bgColor = theme.colors.textInput.normal.bg;
+  let color = theme.colors.textInput.normal.text;
+  let borderColor = theme.colors.textInput.normal.border;
 
   if (props.disabled) {
-    bgColor = theme.colors.blackShades[2];
-    color = theme.colors.blackShades[6];
-    borderColor = theme.colors.blackShades[2];
+    bgColor = theme.colors.textInput.disable.bg;
+    color = theme.colors.textInput.disable.text;
+    borderColor = theme.colors.textInput.disable.border;
   }
   if (!isValid) {
     bgColor = hexToRgba(theme.colors.danger.main, 0.1);
@@ -83,7 +83,7 @@ const StyledInput = styled.input<
   color: ${props => props.inputStyle.color};
 
   &::placeholder {
-    color: ${props => props.theme.colors.blackShades[5]};
+    color: ${props => props.theme.colors.textInput.placeholder};
   }
   &:focus {
     border: 1px solid
diff --git a/app/client/src/components/ads/Toggle.tsx b/app/client/src/components/ads/Toggle.tsx
index b44475462c..edb7f9a21e 100644
--- a/app/client/src/components/ads/Toggle.tsx
+++ b/app/client/src/components/ads/Toggle.tsx
@@ -29,8 +29,8 @@ const StyledToggle = styled.label<{
     left: 0;
     background-color: ${props =>
       props.isLoading
-        ? props.theme.colors.blackShades[3]
-        : props.theme.colors.blackShades[4]};
+        ? props.theme.colors.toggle.disable.off
+        : props.theme.colors.toggle.bg};
     transition: 0.4s;
     width: 46px;
     height: 23px;
@@ -56,8 +56,8 @@ const StyledToggle = styled.label<{
       left: 2px;
       background-color: ${
         props.disabled && !props.value
-          ? lighten(props.theme.colors.tertiary.dark, 16)
-          : props.theme.colors.blackShades[9]
+          ? props.theme.colors.toggle.disabledSlider.off
+          : props.theme.colors.toggle.disabledSlider.on
       };
       box-shadow: ${
         props.value
@@ -93,21 +93,21 @@ const StyledToggle = styled.label<{
   input:focus + .slider {
     background-color: ${props =>
       props.value
-        ? lighten(props.theme.colors.info.main, 12)
-        : lighten(props.theme.colors.blackShades[3], 16)};
+        ? props.theme.colors.toggle.hover.on
+        : props.theme.colors.toggle.hover.off};
   }
 
   input:disabled + .slider {
     cursor: not-allowed;
     background-color: ${props =>
       props.value && !props.isLoading
-        ? darken(props.theme.colors.info.darker, 20)
-        : props.theme.colors.tertiary.dark};
+        ? props.theme.colors.toggle.disable.on
+        : props.theme.colors.toggle.disable.off};
   }
 
   .${Classes.SPINNER} {
     circle {
-      stroke: ${props => props.theme.colors.blackShades[6]};
+      stroke: ${props => props.theme.colors.toggle.spinner};
     }
   }
 `;
diff --git a/app/client/src/components/ads/Tooltip.tsx b/app/client/src/components/ads/Tooltip.tsx
index 1d1a3f5af1..e17ed05706 100644
--- a/app/client/src/components/ads/Tooltip.tsx
+++ b/app/client/src/components/ads/Tooltip.tsx
@@ -19,21 +19,24 @@ const TooltipWrapper = styled.div<{ variant?: Variant }>`
     border-radius: 0px;
     background-color: ${props =>
       props.variant === "dark"
-        ? props.theme.colors.blackShades[0]
-        : props.theme.colors.blackShades[8]};
+        ? props.theme.colors.tooltip.darkBg
+        : props.theme.colors.tooltip.lightBg};
   }
   div.${Classes.POPOVER_ARROW} {
     display: block;
   }
   .${Classes.TOOLTIP} {
-    box-shadow: 0px 12px 20px rgba(0, 0, 0, 0.35);a
+    box-shadow: 0px 12px 20px rgba(0, 0, 0, 0.35);
   }
-  .${Classes.TOOLTIP} .${CsClasses.BP3_POPOVER_ARROW_BORDER},
-  &&&& .${Classes.TOOLTIP} .${CsClasses.BP3_POPOVER_ARROW_FILL} {
+  .${Classes.TOOLTIP}
+    .${CsClasses.BP3_POPOVER_ARROW_BORDER},
+    &&&&
+    .${Classes.TOOLTIP}
+    .${CsClasses.BP3_POPOVER_ARROW_FILL} {
     fill: ${props =>
       props.variant === "dark"
-        ? props.theme.colors.blackShades[0]
-        : props.theme.colors.blackShades[8]};
+        ? props.theme.colors.tooltip.darkBg
+        : props.theme.colors.tooltip.lightBg};
   }
 `;
 
diff --git a/app/client/src/constants/DefaultTheme.tsx b/app/client/src/constants/DefaultTheme.tsx
index e3b1ea8987..ed5a76292f 100644
--- a/app/client/src/constants/DefaultTheme.tsx
+++ b/app/client/src/constants/DefaultTheme.tsx
@@ -429,25 +429,226 @@ export const largeButton = css`
   letter-spacing: ${props => props.theme.typography.btnLarge.letterSpacing}px;
 `;
 
-export const dark = {
-  blackShades: [
-    // "#090707",
-    "#1A191C",
-    "#232324",
-    "#262626",
-    "#2B2B2B",
-    "#404040",
-    "#6D6D6D",
-    "#9F9F9F",
-    "#D4D4D4",
-    "#E9E9E9",
-    "#FFFFFF",
-  ],
+const darkShades = [
+  "#1A191C",
+  "#232324",
+  "#262626",
+  "#2B2B2B",
+  "#404040",
+  "#6D6D6D",
+  "#9F9F9F",
+  "#D4D4D4",
+  "#E9E9E9",
+  "#FFFFFF",
+] as const;
+
+const lightShades = [
+  "#FAFAFA",
+  "#F7F7F7",
+  "#F0F0F0",
+  "#E8E8E8",
+  "#C5C5C5",
+  "#A9A7A7",
+  "#939090",
+  "#716E6E",
+  "#4B4848",
+  "#302D2D",
+  "#090707",
+  "#FFFFFF",
+] as const;
+
+type ColorPalette = typeof darkShades[number] | typeof lightShades[number];
+
+type buttonVariant = {
+  main: string;
+  light: string;
+  dark: string;
+  darker: string;
+  darkest: string;
+};
+
+type ColorType = {
+  button: {
+    disabledText: ColorPalette;
+  };
+  tertiary: buttonVariant;
+  info: buttonVariant;
+  success: buttonVariant;
+  warning: buttonVariant;
+  danger: buttonVariant;
+  homepageBackground: string;
+  card: {
+    hoverBG: Color;
+    hoverBGOpacity: number;
+    hoverBorder: ColorPalette;
+    targetBg: string;
+    iconColor: ColorPalette;
+  };
+  appCardColors: string[];
+  text: {
+    normal: ColorPalette;
+    heading: ColorPalette;
+    hightlight: ColorPalette;
+  };
+  icon: {
+    normal: ColorPalette;
+    hover: ColorPalette;
+    active: ColorPalette;
+  };
+  appIcon: {
+    normal: ColorPalette;
+    background: ColorPalette;
+  };
+  menu: {
+    background: ColorPalette;
+    shadow: string;
+  };
+  menuItem: {
+    normalText: ColorPalette;
+    normalIcon: ColorPalette;
+    hoverIcon: ColorPalette;
+    hoverText: ColorPalette;
+    hoverBg: ColorPalette;
+  };
+  colorSelector: {
+    shadow: string;
+    checkmark: ColorPalette;
+  };
+  checkbox: {
+    disabled: ColorPalette;
+    unchecked: ColorPalette;
+    disabledCheck: string;
+    normalCheck: ColorPalette;
+    labelColor: ColorPalette;
+  };
+  dropdown: {
+    header: {
+      text: ColorPalette;
+      disabled: ColorPalette;
+      bg: ColorPalette;
+      disabledBg: ColorPalette;
+    };
+    menuBg: ColorPalette;
+    menuShadow: string;
+    selected: {
+      text: ColorPalette;
+      bg: ColorPalette;
+      icon: ColorPalette;
+    };
+    icon: ColorPalette;
+  };
+  toggle: {
+    bg: ColorPalette;
+    hover: {
+      on: string;
+      off: string;
+    };
+    disable: {
+      on: string;
+      off: ColorPalette;
+    };
+    disabledSlider: {
+      on: ColorPalette;
+      off: string;
+    };
+    spinner: ColorPalette;
+  };
+  textInput: {
+    disable: {
+      bg: ColorPalette;
+      text: ColorPalette;
+      border: ColorPalette;
+    };
+    normal: {
+      bg: ColorPalette;
+      text: ColorPalette;
+      border: ColorPalette;
+    };
+    placeholder: ColorPalette;
+  };
+  menuBorder: ColorPalette;
+  editableText: {
+    color: ColorPalette;
+    bg: string;
+    dangerBg: string;
+  };
+  radio: {
+    disable: string;
+    border: ColorPalette;
+  };
+  searchInput: {
+    placeholder: ColorPalette;
+    text: ColorPalette;
+    border: ColorPalette;
+    bg: ColorPalette;
+    icon: {
+      focused: ColorPalette;
+      normal: ColorPalette;
+    };
+  };
+  spinner: ColorPalette;
+  tableDropdown: {
+    bg: ColorPalette;
+    selectedBg: ColorPalette;
+    selectedText: ColorPalette;
+    shadow: string;
+  };
+  tabs: {
+    normal: ColorPalette;
+    hover: ColorPalette;
+    border: ColorPalette;
+  };
+  settingHeading: ColorPalette;
+  table: {
+    headerBg: ColorPalette;
+    headerText: ColorPalette;
+    rowData: ColorPalette;
+    rowTitle: ColorPalette;
+    border: ColorPalette;
+    hover: {
+      headerColor: ColorPalette;
+      rowBg: ColorPalette;
+      rowTitle: ColorPalette;
+      rowData: ColorPalette;
+    };
+  };
+  applications: {
+    bg: ColorPalette;
+    textColor: ColorPalette;
+    orgColor: ColorPalette;
+    iconColor: ColorPalette;
+    hover: {
+      bg: ColorPalette;
+      textColor: ColorPalette;
+      orgColor: ColorPalette;
+    };
+  };
+  switch: {
+    border: ColorPalette;
+    bg: ColorPalette;
+    hover: {
+      border: ColorPalette;
+      bg: ColorPalette;
+    };
+    lightText: ColorPalette;
+    darkText: ColorPalette;
+  };
+  queryTemplate: {
+    bg: ColorPalette;
+    color: ColorPalette;
+  };
+};
+
+export const dark: ColorType = {
+  button: {
+    disabledText: darkShades[6],
+  },
   tertiary: {
     main: "#D4D4D4",
     light: "#FFFFFF",
     dark: "#2B2B2B",
     darker: "#202021",
+    darkest: "#1A191C",
   },
   info: {
     main: "#CB4810",
@@ -481,6 +682,9 @@ export const dark = {
   card: {
     hoverBG: Colors.BLACK,
     hoverBGOpacity: 0.5,
+    hoverBorder: darkShades[4],
+    targetBg: "rgba(0, 0, 0, 0.1)",
+    iconColor: darkShades[9],
   },
   appCardColors: [
     "#4F70FD",
@@ -493,34 +697,174 @@ export const dark = {
     "#A8D76C",
     "#6C4CF1",
   ],
+  text: {
+    normal: darkShades[6],
+    heading: darkShades[7],
+    hightlight: darkShades[9],
+  },
+  icon: {
+    normal: darkShades[6],
+    hover: darkShades[8],
+    active: darkShades[9],
+  },
+  appIcon: {
+    normal: darkShades[9],
+    background: darkShades[1],
+  },
+  menu: {
+    background: darkShades[3],
+    shadow: "rgba(0, 0, 0, 0.75)",
+  },
+  menuItem: {
+    normalText: darkShades[7],
+    normalIcon: darkShades[6],
+    hoverIcon: darkShades[8],
+    hoverText: darkShades[9],
+    hoverBg: darkShades[4],
+  },
+  colorSelector: {
+    shadow: "#353535",
+    checkmark: darkShades[9],
+  },
+  checkbox: {
+    disabled: darkShades[3],
+    unchecked: darkShades[4],
+    disabledCheck: "#565656",
+    normalCheck: darkShades[9],
+    labelColor: darkShades[7],
+  },
+  dropdown: {
+    header: {
+      text: darkShades[7],
+      disabled: darkShades[6],
+      bg: darkShades[2],
+      disabledBg: darkShades[0],
+    },
+    menuBg: darkShades[3],
+    menuShadow: "rgba(0, 0, 0, 0.6)",
+    selected: {
+      text: darkShades[9],
+      bg: darkShades[4],
+      icon: darkShades[8],
+    },
+    icon: darkShades[6],
+  },
+  toggle: {
+    bg: darkShades[4],
+    hover: {
+      on: "#F56426",
+      off: "#5E5E5E",
+    },
+    disable: {
+      on: "#3D2219",
+      off: darkShades[3],
+    },
+    disabledSlider: {
+      on: darkShades[9],
+      off: "#565656",
+    },
+    spinner: darkShades[6],
+  },
+  textInput: {
+    disable: {
+      bg: darkShades[2],
+      text: darkShades[6],
+      border: darkShades[2],
+    },
+    normal: {
+      bg: darkShades[0],
+      text: darkShades[9],
+      border: darkShades[0],
+    },
+    placeholder: darkShades[5],
+  },
+  menuBorder: darkShades[4],
+  editableText: {
+    color: darkShades[9],
+    bg: darkShades[1],
+    dangerBg: "rgba(226, 44, 44, 0.08)",
+  },
+  radio: {
+    disable: "#565656",
+    border: darkShades[4],
+  },
+  searchInput: {
+    placeholder: darkShades[5],
+    text: darkShades[9],
+    border: darkShades[4],
+    bg: darkShades[2],
+    icon: {
+      focused: darkShades[7],
+      normal: darkShades[5],
+    },
+  },
+  spinner: darkShades[6],
+  tableDropdown: {
+    bg: darkShades[3],
+    selectedBg: darkShades[4],
+    selectedText: darkShades[9],
+    shadow: "rgba(0, 0, 0, 0.75)",
+  },
+  tabs: {
+    normal: darkShades[6],
+    hover: darkShades[9],
+    border: darkShades[3],
+  },
+  settingHeading: darkShades[9],
+  table: {
+    headerBg: darkShades[2],
+    headerText: darkShades[5],
+    rowData: darkShades[6],
+    rowTitle: darkShades[7],
+    border: darkShades[3],
+    hover: {
+      headerColor: darkShades[7],
+      rowBg: darkShades[4],
+      rowTitle: darkShades[9],
+      rowData: darkShades[7],
+    },
+  },
+  applications: {
+    bg: darkShades[1],
+    textColor: darkShades[7],
+    orgColor: darkShades[7],
+    iconColor: darkShades[7],
+    hover: {
+      bg: darkShades[4],
+      textColor: darkShades[8],
+      orgColor: darkShades[9],
+    },
+  },
+  switch: {
+    border: darkShades[5],
+    bg: darkShades[0],
+    hover: {
+      border: darkShades[7],
+      bg: darkShades[0],
+    },
+    lightText: darkShades[9],
+    darkText: darkShades[6],
+  },
+  queryTemplate: {
+    bg: darkShades[3],
+    color: darkShades[7],
+  },
 };
 
-export const light = {
-  blackShades: [
-    "#FAFAFA",
-    "#F7F7F7",
-    "#F0F0F0",
-    "#E8E8E8",
-    "#C5C5C5",
-    // "#EFEFEF",
-    // "#E7E7E7",
-    "#A9A7A7",
-    "#939090",
-    "#716E6E",
-    "#4B4848",
-    // "#4B4848",
-    "#302D2D",
-    // "#161414"
-  ],
+export const light: ColorType = {
+  button: {
+    disabledText: lightShades[6],
+  },
   tertiary: {
     main: "#716E6E",
     light: "#090707",
-    dark: "#F0F0F0",
+    dark: "#F7F7F7",
     darker: "#E8E8E8",
+    darkest: "#939090",
   },
   info: {
     main: "#F86A2B",
-    light: "#FB773C",
+    light: "#DC5B21",
     dark: "#BF4109",
     darker: "#FEEDE5",
     darkest: "#F7EBE6",
@@ -550,6 +894,9 @@ export const light = {
   card: {
     hoverBG: Colors.WHITE,
     hoverBGOpacity: 0.7,
+    hoverBorder: lightShades[2],
+    targetBg: "rgba(0, 0, 0, 0.1)",
+    iconColor: lightShades[11],
   },
   appCardColors: [
     "#4266FD",
@@ -562,6 +909,158 @@ export const light = {
     "#B0E968",
     "#9177FF",
   ],
+  text: {
+    normal: lightShades[8],
+    heading: lightShades[9],
+    hightlight: lightShades[11],
+  },
+  icon: {
+    normal: lightShades[4],
+    hover: lightShades[8],
+    active: lightShades[9],
+  },
+  appIcon: {
+    normal: lightShades[7],
+    background: lightShades[1],
+  },
+  menu: {
+    background: lightShades[11],
+    shadow: "rgba(0, 0, 0, 0.32)",
+  },
+  menuItem: {
+    normalText: lightShades[8],
+    normalIcon: lightShades[6],
+    hoverIcon: lightShades[8],
+    hoverText: lightShades[10],
+    hoverBg: lightShades[2],
+  },
+  colorSelector: {
+    shadow: lightShades[3],
+    checkmark: lightShades[11],
+  },
+  checkbox: {
+    disabled: lightShades[3],
+    unchecked: lightShades[4],
+    disabledCheck: lightShades[6],
+    normalCheck: lightShades[11],
+    labelColor: lightShades[9],
+  },
+  dropdown: {
+    header: {
+      text: lightShades[9],
+      disabled: darkShades[6],
+      bg: lightShades[2],
+      disabledBg: lightShades[1],
+    },
+    menuBg: lightShades[11],
+    menuShadow: "rgba(0, 0, 0, 0.32)",
+    selected: {
+      text: lightShades[9],
+      bg: lightShades[2],
+      icon: lightShades[8],
+    },
+    icon: lightShades[7],
+  },
+  toggle: {
+    bg: lightShades[4],
+    hover: {
+      on: "#E4500E",
+      off: lightShades[5],
+    },
+    disable: {
+      on: "#FDE0D2",
+      off: lightShades[3],
+    },
+    disabledSlider: {
+      off: lightShades[11],
+      on: lightShades[11],
+    },
+    spinner: lightShades[6],
+  },
+  textInput: {
+    disable: {
+      bg: lightShades[1],
+      text: darkShades[6],
+      border: lightShades[1],
+    },
+    normal: {
+      bg: lightShades[2],
+      text: lightShades[9],
+      border: lightShades[2],
+    },
+    placeholder: lightShades[6],
+  },
+  menuBorder: lightShades[3],
+  editableText: {
+    color: lightShades[10],
+    bg: "rgba(247, 247, 247, 0.8)",
+    dangerBg: "rgba(242, 43, 43, 0.06)",
+  },
+  radio: {
+    disable: lightShades[4],
+    border: lightShades[3],
+  },
+  searchInput: {
+    placeholder: lightShades[6],
+    text: lightShades[10],
+    border: lightShades[3],
+    bg: lightShades[1],
+    icon: {
+      focused: lightShades[7],
+      normal: lightShades[5],
+    },
+  },
+  spinner: lightShades[6],
+  tableDropdown: {
+    bg: lightShades[11],
+    selectedBg: lightShades[2],
+    selectedText: lightShades[9],
+    shadow: "rgba(0, 0, 0, 0.32)",
+  },
+  tabs: {
+    normal: lightShades[6],
+    hover: lightShades[10],
+    border: lightShades[3],
+  },
+  settingHeading: lightShades[9],
+  table: {
+    headerBg: lightShades[1],
+    headerText: lightShades[6],
+    rowData: lightShades[7],
+    rowTitle: lightShades[9],
+    border: lightShades[3],
+    hover: {
+      headerColor: lightShades[9],
+      rowBg: lightShades[2],
+      rowTitle: lightShades[10],
+      rowData: lightShades[9],
+    },
+  },
+  applications: {
+    bg: lightShades[2],
+    textColor: lightShades[7],
+    orgColor: lightShades[7],
+    iconColor: lightShades[7],
+    hover: {
+      bg: lightShades[3],
+      textColor: lightShades[8],
+      orgColor: lightShades[9],
+    },
+  },
+  switch: {
+    border: lightShades[5],
+    bg: lightShades[11],
+    hover: {
+      border: lightShades[7],
+      bg: lightShades[11],
+    },
+    lightText: lightShades[11],
+    darkText: lightShades[6],
+  },
+  queryTemplate: {
+    bg: lightShades[3],
+    color: lightShades[7],
+  },
 };
 
 export const theme: Theme = {
@@ -664,6 +1163,10 @@ export const theme: Theme = {
   },
   drawerWidth: "80%",
   colors: {
+    tooltip: {
+      lightBg: lightShades[0],
+      darkBg: lightShades[10],
+    },
     callout: {
       note: {
         dark: {
@@ -686,9 +1189,6 @@ export const theme: Theme = {
         },
       },
     },
-    radio: {
-      disabled: "#565656",
-    },
     appBackground: "#EFEFEF",
     primaryOld: Colors.GREEN,
     primaryDarker: Colors.JUNGLE_GREEN,
diff --git a/app/client/src/pages/Applications/ApplicationCard.tsx b/app/client/src/pages/Applications/ApplicationCard.tsx
index 0a19d29bc3..10247c950f 100644
--- a/app/client/src/pages/Applications/ApplicationCard.tsx
+++ b/app/client/src/pages/Applications/ApplicationCard.tsx
@@ -40,6 +40,7 @@ import { getThemeDetails } from "selectors/themeSelectors";
 import { useSelector } from "react-redux";
 import { UpdateApplicationPayload } from "api/ApplicationApi";
 import { getIsSavingAppName } from "selectors/applicationSelectors";
+import { Classes as CsClasses } from "components/ads/common";
 
 type NameWrapperProps = {
   hasReadPermission: boolean;
@@ -57,7 +58,7 @@ const NameWrapper = styled((props: HTMLDivProps & NameWrapperProps) => (
     props.showOverlay &&
     `
       {
-        background-color: ${props.theme.colors.blackShades[4]};
+        background-color: ${props.theme.colors.card.hoverBorder}};
         justify-content: center;
         align-items: center;
 
@@ -125,6 +126,14 @@ const Wrapper = styled(
   .bp3-card {
     border-radius: 0;
   }
+  .${CsClasses.APP_ICON} {
+    margin: 0 auto;
+    svg {
+      path {
+        fill: #fff;
+      }
+    }
+  }
 `;
 
 const ApplicationImage = styled.div`
@@ -193,13 +202,16 @@ const ContextDropdownWrapper = styled.div`
   position: absolute;
   top: -6px;
   right: -3px;
-`;
 
-const StyledAppIcon = styled(AppIcon)`
-  margin: 0 auto;
-  svg {
-    path {
-      fill: #fff;
+  .${Classes.POPOVER_TARGET} {
+    span {
+      background: ${props => props.theme.colors.card.targetBg};
+
+      svg {
+        path {
+          fill: ${props => props.theme.colors.card.iconColor};
+        }
+      }
     }
   }
 `;
@@ -379,7 +391,7 @@ export const ApplicationCard = (props: ApplicationCardProps) => {
         hasReadPermission={hasReadPermission}
         backgroundColor={colorCode}
       >
-        <StyledAppIcon size={Size.large} name={appIcon} />
+        <AppIcon size={Size.large} name={appIcon} />
         {/* <Initials>{initials}</Initials> */}
         {showOverlay && (
           <div className="overlay">
diff --git a/app/client/src/pages/Applications/index.tsx b/app/client/src/pages/Applications/index.tsx
index d94b50c3e0..24ec19411a 100644
--- a/app/client/src/pages/Applications/index.tsx
+++ b/app/client/src/pages/Applications/index.tsx
@@ -174,8 +174,8 @@ const textIconStyles = (props: { color: string; hover: string }) => {
 const NewWorkspaceWrapper = styled.div`
   ${props => {
     return `${textIconStyles({
-      color: props.theme.colors.blackShades[7],
-      hover: props.theme.colors.blackShades[8],
+      color: props.theme.colors.applications.textColor,
+      hover: props.theme.colors.applications.hover.textColor,
     })}`;
   }}
 `;
@@ -184,7 +184,7 @@ const ApplicationAddCardWrapper = styled(Card)`
   display: flex;
   flex-direction: column;
   // justify-content: center;
-  background: ${props => props.theme.colors.blackShades[2]};
+  background: ${props => props.theme.colors.applications.bg};
   align-items: center;
   width: ${props => props.theme.card.minWidth}px;
   height: ${props => props.theme.card.minHeight}px;
@@ -205,12 +205,12 @@ const ApplicationAddCardWrapper = styled(Card)`
   }
   cursor: pointer;
   &:hover {
-    background: ${props => props.theme.colors.blackShades[4]};
+    background: ${props => props.theme.colors.applications.hover.bg};
   }
   ${props => {
     return `${textIconStyles({
-      color: props.theme.colors.blackShades[7],
-      hover: props.theme.colors.blackShades[8],
+      color: props.theme.colors.applications.textColor,
+      hover: props.theme.colors.applications.hover.textColor,
     })}`;
   }}
 `;
@@ -260,8 +260,8 @@ const OrgNameWrapper = styled.div<{ disabled?: boolean }>`
 cursor: ${props => (!props.disabled ? "pointer" : "inherit")};
 ${props => {
   const color = props.disabled
-    ? props.theme.colors.blackShades[7]
-    : props.theme.colors.blackShades[9];
+    ? props.theme.colors.applications.orgColor
+    : props.theme.colors.applications.hover.orgColor[9];
   return `${textIconStyles({
     color: color,
     hover: color,
@@ -271,6 +271,7 @@ ${props => {
 .${Classes.ICON} {
   display: ${props => (!props.disabled ? "inline" : "none")};;
   margin-left: 8px;
+  color: ${props => props.theme.colors.applications.iconColor};
 }
 `;
 
@@ -405,41 +406,48 @@ const ApplicationsSection = () => {
                 )}
               </OrgDropDown>
               <ApplicationCardsWrapper key={organization.id}>
-                <FormDialogComponent
-                  permissions={organization.userPermissions}
-                  permissionRequired={PERMISSION_TYPE.CREATE_APPLICATION}
-                  trigger={
-                    <PaddingWrapper>
-                      <ApplicationAddCardWrapper>
-                        <Icon
-                          className="t--create-app-popup"
-                          name={"plus"}
-                          size={IconSize.LARGE}
-                        ></Icon>
-                        <CreateNewLabel
-                          type={TextType.H4}
-                          className="createnew"
-                          // cypressSelector={"t--create-new-app"}
-                        >
-                          Create New
-                        </CreateNewLabel>
-                      </ApplicationAddCardWrapper>
-                    </PaddingWrapper>
-                  }
-                  Form={CreateApplicationForm}
-                  orgId={organization.id}
-                  title={"Create Application"}
-                />
+                {isPermitted(
+                  organization.userPermissions,
+                  PERMISSION_TYPE.CREATE_APPLICATION,
+                ) && (
+                  <PaddingWrapper>
+                    <FormDialogComponent
+                      permissions={organization.userPermissions}
+                      permissionRequired={PERMISSION_TYPE.CREATE_APPLICATION}
+                      trigger={
+                        <ApplicationAddCardWrapper>
+                          <Icon
+                            className="t--create-app-popup"
+                            name={"plus"}
+                            size={IconSize.LARGE}
+                          ></Icon>
+                          <CreateNewLabel
+                            type={TextType.H4}
+                            className="createnew"
+                            // cypressSelector={"t--create-new-app"}
+                          >
+                            Create New
+                          </CreateNewLabel>
+                        </ApplicationAddCardWrapper>
+                      }
+                      Form={CreateApplicationForm}
+                      orgId={organization.id}
+                      title={"Create Application"}
+                    />
+                  </PaddingWrapper>
+                )}
                 {applications.map((application: any) => {
                   return (
                     application.pages?.length > 0 && (
-                      <ApplicationCard
-                        key={application.id}
-                        application={application}
-                        delete={deleteApplication}
-                        update={updateApplicationDispatch}
-                        duplicate={duplicateApplicationDispatch}
-                      />
+                      <PaddingWrapper>
+                        <ApplicationCard
+                          key={application.id}
+                          application={application}
+                          delete={deleteApplication}
+                          update={updateApplicationDispatch}
+                          duplicate={duplicateApplicationDispatch}
+                        />
+                      </PaddingWrapper>
                     )
                   );
                 })}
diff --git a/app/client/src/pages/Editor/Explorer/Datasources/QueryTemplates.tsx b/app/client/src/pages/Editor/Explorer/Datasources/QueryTemplates.tsx
index 6084d899a1..653dde148e 100644
--- a/app/client/src/pages/Editor/Explorer/Datasources/QueryTemplates.tsx
+++ b/app/client/src/pages/Editor/Explorer/Datasources/QueryTemplates.tsx
@@ -15,13 +15,13 @@ import { ExplorerURLParams } from "../helpers";
 import { QUERY_EDITOR_URL_WITH_SELECTED_PAGE_ID } from "constants/routes";
 
 const Container = styled.div`
-  background-color: ${props => props.theme.colors.blackShades[3]};
+  background-color: ${props => props.theme.colors.queryTemplate.bg};
   color: ${props => props.theme.colors.textOnDarkBG};
   width: 250px;
 `;
 
 const TemplateType = styled.div`
-  color: ${props => props.theme.colors.blackShades[7]};
+  color: ${props => props.theme.colors.queryTemplate.color};
   padding: 8px;
   &:hover {
     cursor: pointer;
diff --git a/app/client/src/pages/common/ProfileDropdown.tsx b/app/client/src/pages/common/ProfileDropdown.tsx
index d663794afa..af0d0e680c 100644
--- a/app/client/src/pages/common/ProfileDropdown.tsx
+++ b/app/client/src/pages/common/ProfileDropdown.tsx
@@ -1,10 +1,10 @@
-import React from "react";
+import React, { Fragment } from "react";
 import { CommonComponentProps } from "components/ads/common";
 import { getInitialsAndColorCode } from "utils/AppsmithUtils";
 import { useSelector } from "react-redux";
 import { getThemeDetails } from "selectors/themeSelectors";
 import Text, { TextType } from "components/ads/Text";
-import styled from "styled-components";
+import styled, { createGlobalStyle } from "styled-components";
 import { Position } from "@blueprintjs/core";
 import Menu from "components/ads/Menu";
 import ThemeSwitcher from "./ThemeSwitcher";
@@ -32,6 +32,14 @@ const ProfileImage = styled.div<{ backgroundColor?: string }>`
   background-color: ${props => props.backgroundColor};
 `;
 
+const ProfileMenuStyle = createGlobalStyle`
+  .profile-menu {
+    .bp3-popover .bp3-popover-content{
+      margin-top: 2px;
+    }
+  }
+`;
+
 export default function ProfileDropdown(props: TagProps) {
   const themeDetails = useSelector(getThemeDetails);
 
@@ -41,27 +49,31 @@ export default function ProfileDropdown(props: TagProps) {
   );
 
   return (
-    <Menu
-      position={Position.BOTTOM}
-      target={
-        <ProfileImage backgroundColor={initialsAndColorCode[1]}>
-          <Text type={TextType.H6} highlight>
-            {initialsAndColorCode[0]}
-          </Text>
-        </ProfileImage>
-      }
-    >
-      <ThemeSwitcher />
-      <MenuDivider />
-      <MenuItem
-        icon="logout"
-        text="Sign Out"
-        onSelect={() =>
-          getOnSelectAction(DropdownOnSelectActions.DISPATCH, {
-            type: ReduxActionTypes.LOGOUT_USER_INIT,
-          })
+    <Fragment>
+      <ProfileMenuStyle />
+      <Menu
+        className="profile-menu"
+        position={Position.BOTTOM}
+        target={
+          <ProfileImage backgroundColor={initialsAndColorCode[1]}>
+            <Text type={TextType.H6} highlight>
+              {initialsAndColorCode[0]}
+            </Text>
+          </ProfileImage>
         }
-      />
-    </Menu>
+      >
+        <ThemeSwitcher />
+        <MenuDivider />
+        <MenuItem
+          icon="logout"
+          text="Sign Out"
+          onSelect={() =>
+            getOnSelectAction(DropdownOnSelectActions.DISPATCH, {
+              type: ReduxActionTypes.LOGOUT_USER_INIT,
+            })
+          }
+        />
+      </Menu>
+    </Fragment>
   );
 }
diff --git a/app/client/src/pages/organization/General.tsx b/app/client/src/pages/organization/General.tsx
index 111a3dd1ca..525d2f4ff0 100644
--- a/app/client/src/pages/organization/General.tsx
+++ b/app/client/src/pages/organization/General.tsx
@@ -27,7 +27,7 @@ const SettingWrapper = styled.div`
 `;
 
 export const SettingsHeading = styled(Text)`
-  color: ${props => props.theme.colors.blackShades[9]};
+  color: ${props => props.theme.colors.settingHeading};
   display: inline-block;
   margin-top: 25px;
   margin-bottom: 32px;