diff --git a/app/client/cypress/manual_TestSuite/Invite_flow_Spec.js b/app/client/cypress/manual_TestSuite/Invite_flow_Spec.js
index 8508607a80..02e401c737 100644
--- a/app/client/cypress/manual_TestSuite/Invite_flow_Spec.js
+++ b/app/client/cypress/manual_TestSuite/Invite_flow_Spec.js
@@ -1,64 +1,47 @@
 const homePage = require("../../../locators/HomePage.json");
 
+describe("adding role without Email Id", function() {
+  it("Empty Email ID Invite flow", function() {
+    // Navigate to Home Page
+    // Click on "Share" option
+    // Add Role from the dropdown
+    // Ensure the "Invite" option is "Inactive"
+  });
+  it("Error message must be dispalyed to user on inappropriate Email ID", function() {
+    // Navigate to Home Page
+    // Click on "Share" option
+    // Add inappropriate Email Id
+    // Select the "Role"
+    // Ensure the "Invite" option is "Inactive" and error message is displayed to user
+  });
+  it("Clicking on the organisation list the user must be lead to organisation Station ", function() {
+    // Navigate to Home Page
+    // Navigate to Organisation list
+    // Click on one of the organisation name
+    // Ensure user is directed to the organisation
+  });
 
-describe("adding role without Email Id", function()  {
-    it("Empty Email ID Invite flow", function() 
-    {
-     // Navigate to Home Page
-     // Click on "Share" option
-     // Add Role from the dropdown
-     // Ensure the "Invite" option is "Inactive"
-    }
-    )
-    it("Error message must be dispalyed to user on inappropriate Email ID", function() 
-    {
-     // Navigate to Home Page
-     // Click on "Share" option
-     // Add inappropriate Email Id
-     // Select the "Role"
-     // Ensure the "Invite" option is "Inactive" and error message is displayed to user
-    }
-    )
-    it("Clicking on the organisation list the user must be lead to organisation Station ", function() 
-    {
-     // Navigate to Home Page
-     // Navigate to Organisation list
-     // Click on one of the organisation name
-     // Ensure user is directed to the organisation
-    }
-    )
+  it("Admin can only assign another Admin ", function() {
+    // Navigate to Organisation Setting
+    // Navigate to Members
+    // Navigate to roles
+    // Ensure your also an "Admin"
+    // Change the role "Admin"
+  });
 
-    it("Admin can only assign another Admin ", function() 
-    {
-        // Navigate to Organisation Setting 
-        // Navigate to Members
-        // Navigate to roles 
-        // Ensure your also an "Admin"
-        // Change the role "Admin" 
+  it("Ensure the user can not delete or create an application in the organisation", function() {
+    // Navigate to Home page
+    // Navigate to Members
+    // Navigate to roles
+    // Ensure role is "App Viewer"
+    // Ensure user is not able to  delete or add any user for the application
+  });
 
-    }
-    )
-
-    it("Ensure the user can not delete or create an application in the organisation", function() 
-    {
-        // Navigate to Home page 
-        // Navigate to Members
-        // Navigate to roles 
-        // Ensure role is "App Viewer"
-        // Ensure user is not able to  delete or add any user for the application 
-
-    }
-    )
-
-    it("Ensure On invaild Email Id the box must get highlighted", function() 
-    {
-        // Navigate to Home page 
-        // Click on the Share option 
-        // Ensure the pop up opens 
-        // Enter an Invaild Email Id 
-        // and ensure the Email ID box is highlight
-        
-    }
-    )
-}
-)
+  it("Ensure On invaild Email Id the box must get highlighted", function() {
+    // Navigate to Home page
+    // Click on the Share option
+    // Ensure the pop up opens
+    // Enter an Invaild Email Id
+    // and ensure the Email ID box is highlight
+  });
+});
diff --git a/app/client/cypress/manual_TestSuite/Login_Spec.js b/app/client/cypress/manual_TestSuite/Login_Spec.js
index 1d2a30bce2..d19d16552a 100644
--- a/app/client/cypress/manual_TestSuite/Login_Spec.js
+++ b/app/client/cypress/manual_TestSuite/Login_Spec.js
@@ -3,32 +3,26 @@ const explorer = require("../../../locators/explorerlocators.json");
 const homePage = require("../../../locators/HomePage.json");
 const loginPage = require("../../../locators/LoginPage.json");
 
-describe("Onboarding flow", function() 
-{
-    it("Onboarding using Google Id ", function() 
-    {
-        // Navigate to Login Page
-        // Click on "Sign In with Google" 
-        // Ensure user is navigated to Google Account 
-        // Do select the Google Id 
-        // Ensure user is navigated into the Appsmith 
-        // Click on the icon on the right with single letter (Profile)
-        // Check the Email Id 
-        // Click on Logout 
-    }
-    )
+describe("Onboarding flow", function() {
+  it("Onboarding using Google Id ", function() {
+    // Navigate to Login Page
+    // Click on "Sign In with Google"
+    // Ensure user is navigated to Google Account
+    // Do select the Google Id
+    // Ensure user is navigated into the Appsmith
+    // Click on the icon on the right with single letter (Profile)
+    // Check the Email Id
+    // Click on Logout
+  });
 
-    it("Onboarding using Github ID ", function() 
-    {
-        // Navigate to Login Page
-        // Click on "Sign In with Github" 
-        // Ensure user is navigated to Github Account 
-        // Do select the Github Id 
-        // Ensure user is navigated into the Appsmith 
-        // Click on the icon on the right with single letter (Profile)
-        // Check the Email Id 
-        // Click on Logout 
-    }
-    )
-}
-)
+  it("Onboarding using Github ID ", function() {
+    // Navigate to Login Page
+    // Click on "Sign In with Github"
+    // Ensure user is navigated to Github Account
+    // Do select the Github Id
+    // Ensure user is navigated into the Appsmith
+    // Click on the icon on the right with single letter (Profile)
+    // Check the Email Id
+    // Click on Logout
+  });
+});
diff --git a/app/client/cypress/manual_TestSuite/Organisation_Name_Spec.js b/app/client/cypress/manual_TestSuite/Organisation_Name_Spec.js
index 058eb88cd4..8b42ba108b 100644
--- a/app/client/cypress/manual_TestSuite/Organisation_Name_Spec.js
+++ b/app/client/cypress/manual_TestSuite/Organisation_Name_Spec.js
@@ -1,77 +1,61 @@
 const homePage = require("../../../locators/HomePage.json");
 
-describe("Checking for error message on Organisation Name ", function()  {
-    it("Ensure of Inactive Submit button ", function() 
-    {
-        // Navigate to home Page 
-        // Click on Create Organisation 
-        // Type "Space" as first character
-        // Ensure "Submit" button does not get Active
-        // Now click on "X" (Close icon) ensure the pop up closes
-    }
-    )
-    it("Reuse the name of the deleted application name ", function() 
-    {
-        // Navigate to home Page 
-        // Create an Application by name "XYZ"
-        // Add some widgets
-        // Navigate back to the application
-        // Delete the Application
-        // Click on "Create New" option under same organisation  
-        // Enter the name "XYZ"
-        // Ensure the application can be created with the same name 
-    }
-    )
-    it("Adding Special Character ", function() 
-    {
-        // Navigate to home Page 
-        // Click on Create Organisation 
-        // Add special as first character
-        // Ensure "Submit" get Active
-        // Now click outside and ensure the pop up closes
-    }
-    )
-    it("Reuse the name of the deleted application name on the other organisation", function() 
-    {
-        // Navigate to home Page 
-        // Create an Application by name "XYZ"
-        // Add some widgets
-        // Navigate back to the application
-        // Delete the Application
-        // Click on "Create New" option under different organisation  
-        // Enter the name "XYZ"
-        // Ensure the application can be created with the same name 
-    }
-    )
+describe("Checking for error message on Organisation Name ", function() {
+  it("Ensure of Inactive Submit button ", function() {
+    // Navigate to home Page
+    // Click on Create Organisation
+    // Type "Space" as first character
+    // Ensure "Submit" button does not get Active
+    // Now click on "X" (Close icon) ensure the pop up closes
+  });
+  it("Reuse the name of the deleted application name ", function() {
+    // Navigate to home Page
+    // Create an Application by name "XYZ"
+    // Add some widgets
+    // Navigate back to the application
+    // Delete the Application
+    // Click on "Create New" option under same organisation
+    // Enter the name "XYZ"
+    // Ensure the application can be created with the same name
+  });
+  it("Adding Special Character ", function() {
+    // Navigate to home Page
+    // Click on Create Organisation
+    // Add special as first character
+    // Ensure "Submit" get Active
+    // Now click outside and ensure the pop up closes
+  });
+  it("Reuse the name of the deleted application name on the other organisation", function() {
+    // Navigate to home Page
+    // Create an Application by name "XYZ"
+    // Add some widgets
+    // Navigate back to the application
+    // Delete the Application
+    // Click on "Create New" option under different organisation
+    // Enter the name "XYZ"
+    // Ensure the application can be created with the same name
+  });
 
-    it("User must not be able to add empty organisation name", function() 
-    {
-        // Navigate to home Page 
-        // Click on the "Create Organisation" button 
-        // Ensure "Organisation Name" field is empty
-        // Ensure "Submit" is inactive
-    }
-    )
+  it("User must not be able to add empty organisation name", function() {
+    // Navigate to home Page
+    // Click on the "Create Organisation" button
+    // Ensure "Organisation Name" field is empty
+    // Ensure "Submit" is inactive
+  });
 
-    it("Cancel creating an Organisation when the Organisation name is empty", function() 
-    {
-        // Navigate to home Page 
-        // Click on the "Create Organisation" button 
-        // Ensure "Organisation Name" field is empty
-        // Click on "Cancel" option 
-        // Observe the organisation is not created 
-    }
-    )
+  it("Cancel creating an Organisation when the Organisation name is empty", function() {
+    // Navigate to home Page
+    // Click on the "Create Organisation" button
+    // Ensure "Organisation Name" field is empty
+    // Click on "Cancel" option
+    // Observe the organisation is not created
+  });
 
-
-    it("Cancel creating an Organisation when the Organisation name is dually filled", function() 
-    {
-        // Navigate to home Page 
-        // Click on the "Create Organisation" button 
-        // Ensure "Organisation Name" field is enterd respectively
-        // Click on "Cancel" option 
-        // Observe the organisation is not created 
-    }
-    )
-}
-)
+  it("Cancel creating an Organisation when the Organisation name is dually filled", function() {
+    // Navigate to home Page
+    // Click on the "Create Organisation" button
+    // Ensure "Organisation Name" field is enterd respectively
+    // Click on "Cancel" option
+    // Observe the organisation is not created
+  });
+});
diff --git a/app/client/src/components/ads/Button.tsx b/app/client/src/components/ads/Button.tsx
index aa07d126ae..11c877be92 100644
--- a/app/client/src/components/ads/Button.tsx
+++ b/app/client/src/components/ads/Button.tsx
@@ -301,7 +301,7 @@ const ButtonStyles = css<ThemeProp & ButtonProps>`
   background-color: ${(props) => btnColorStyles(props, "main").bgColor};
   color: ${(props) => btnColorStyles(props, "main").txtColor};
   border: ${(props) => btnColorStyles(props, "main").border};
-  border-radius: ${(props) => props.theme.radii[0]};
+  border-radius: 0;
   ${(props) => btnFontStyles(props).buttonFont};
   padding: ${(props) => btnFontStyles(props).padding};
   .${Classes.ICON} {
diff --git a/app/client/src/components/ads/DialogComponent.tsx b/app/client/src/components/ads/DialogComponent.tsx
index fd49a8d6c3..4d62c50978 100644
--- a/app/client/src/components/ads/DialogComponent.tsx
+++ b/app/client/src/components/ads/DialogComponent.tsx
@@ -9,7 +9,7 @@ const StyledDialog = styled(Dialog)<{
   showHeaderUnderline?: boolean;
 }>`
   && {
-    border-radius: ${(props) => props.theme.radii[0]}px;
+    border-radius: 0;
     padding-bottom: ${(props) => props.theme.spaces[2]}px;
     background: ${(props) => props.theme.colors.modal.bg};
     ${(props) => (props.maxHeight ? `max-height: ${props.maxHeight};` : "")}
diff --git a/app/client/src/components/designSystems/appsmith/ChartComponent.tsx b/app/client/src/components/designSystems/appsmith/ChartComponent.tsx
index 0d3df28d93..3bca4da390 100644
--- a/app/client/src/components/designSystems/appsmith/ChartComponent.tsx
+++ b/app/client/src/components/designSystems/appsmith/ChartComponent.tsx
@@ -2,7 +2,7 @@ import _ from "lodash";
 import React from "react";
 import styled from "styled-components";
 
-import { invisible } from "constants/DefaultTheme";
+import { getBorderCSSShorthand, invisible } from "constants/DefaultTheme";
 import { getAppsmithConfigs } from "configs";
 import { ChartType, ChartData, ChartDataPoint } from "widgets/ChartWidget";
 
@@ -31,12 +31,12 @@ export interface ChartComponentProps {
 }
 
 const CanvasContainer = styled.div<ChartComponentProps>`
-  border: none;
-  border-radius: ${(props) => `${props.theme.radii[1]}px`};
+  border: ${(props) => getBorderCSSShorthand(props.theme.borders[2])};
+  border-radius: 0;
   height: 100%;
   width: 100%;
   background: white;
-  box-shadow: 0 1px 1px 0 rgba(60,75,100,.14),0 2px 1px -1px rgba(60,75,100,.12),0 1px 3px 0 rgba(60,75,100,.2);
+  overflow: hidden;
   position: relative;
   ${(props) => (!props.isVisible ? invisible : "")};
   padding: 10px 0 0 0;
diff --git a/app/client/src/components/designSystems/appsmith/ContainerComponent.tsx b/app/client/src/components/designSystems/appsmith/ContainerComponent.tsx
index 9711c52d06..f454819070 100644
--- a/app/client/src/components/designSystems/appsmith/ContainerComponent.tsx
+++ b/app/client/src/components/designSystems/appsmith/ContainerComponent.tsx
@@ -1,7 +1,7 @@
 import React, { ReactNode, useRef, useEffect, RefObject } from "react";
 import styled, { css } from "styled-components";
 import { ComponentProps } from "./BaseComponent";
-import { invisible } from "constants/DefaultTheme";
+import { getBorderCSSShorthand, invisible } from "constants/DefaultTheme";
 import { Color } from "constants/Colors";
 import { generateClassName, getCanvasClassName } from "utils/generators";
 
@@ -18,18 +18,13 @@ const StyledContainerComponent = styled.div<
   ${(props) =>
     props.containerStyle !== "none"
       ? `
-  border: none;
-  border-radius: ${
-    props.containerStyle === "card" || props.containerStyle === "rounded-border"
-      ? props.theme.radii[1]
-      : 0
-  }px;`
+  border: ${getBorderCSSShorthand(props.theme.borders[2])};
+  border-radius: 0;`
       : ""}
   height: 100%;
   width: 100%;
   background: ${(props) => props.backgroundColor};
-  box-shadow: ${(props) =>
-    props.containerStyle === "card" ? props.theme.shadows[2] : "none"};
+
   ${(props) => (!props.isVisible ? invisible : "")};
   overflow: hidden;
   ${(props) => (props.shouldScrollContents ? scrollContents : "")}
diff --git a/app/client/src/components/designSystems/appsmith/MapComponent.tsx b/app/client/src/components/designSystems/appsmith/MapComponent.tsx
index a3a255adf0..d7083f085f 100644
--- a/app/client/src/components/designSystems/appsmith/MapComponent.tsx
+++ b/app/client/src/components/designSystems/appsmith/MapComponent.tsx
@@ -5,6 +5,7 @@ import { MarkerProps } from "widgets/MapWidget";
 import PickMyLocation from "./PickMyLocation";
 import styled from "styled-components";
 import { useScript, ScriptStatus, AddScriptTo } from "utils/hooks/useScript";
+import { getBorderCSSShorthand } from "constants/DefaultTheme";
 
 interface MapComponentProps {
   apiKey: string;
@@ -38,6 +39,8 @@ const MapWrapper = styled.div`
   position: relative;
   width: 100%;
   height: 100%;
+  border: ${(props) => getBorderCSSShorthand(props.theme.borders[2])};
+  border-radius: 0;
 `;
 
 const MapContainerWrapper = styled.div`
diff --git a/app/client/src/components/designSystems/appsmith/TableComponent.tsx b/app/client/src/components/designSystems/appsmith/TableComponent.tsx
index 52d9ba5074..7ff1cd530d 100644
--- a/app/client/src/components/designSystems/appsmith/TableComponent.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableComponent.tsx
@@ -2,6 +2,7 @@ import BaseTable from "react-base-table";
 import styled from "styled-components";
 import React from "react";
 import { noop } from "utils/AppsmithUtils";
+import { getBorderCSSShorthand } from "constants/DefaultTheme";
 
 const RowLoader = styled.div`
   height: 16px !important;
@@ -20,6 +21,8 @@ const rowProps = ({ rowData }: { rowData: { isLoading: boolean } }) => {
 };
 
 const StyledTable = styled(BaseTable)`
+  border: ${(props) => getBorderCSSShorthand(props.theme.borders[2])};
+  border-radius: 0;
   .row-selected {
     background-color: ${(props) =>
       props.theme.widgets.tableWidget.selectHighlightColor};
diff --git a/app/client/src/components/designSystems/appsmith/TabsComponent.tsx b/app/client/src/components/designSystems/appsmith/TabsComponent.tsx
index f8139b3cfc..2ea2719171 100644
--- a/app/client/src/components/designSystems/appsmith/TabsComponent.tsx
+++ b/app/client/src/components/designSystems/appsmith/TabsComponent.tsx
@@ -3,7 +3,7 @@ import styled, { css } from "styled-components";
 import { ComponentProps } from "./BaseComponent";
 import { TabsWidgetProps, TabContainerWidgetProps } from "widgets/TabsWidget";
 import { generateClassName, getCanvasClassName } from "utils/generators";
-import { scrollbarLight } from "constants/DefaultTheme";
+import { getBorderCSSShorthand, scrollbarLight } from "constants/DefaultTheme";
 
 interface TabsComponentProps extends ComponentProps {
   children?: ReactNode;
@@ -32,11 +32,9 @@ const TabsContainerWrapper = styled.div<{
   width: 100%;
   justify-content: center;
   align-items: center;
-  border-bottom-right-radius: ${(props) => `${props.theme.radii[1]}px`};
-  border-bottom-left-radius: ${(props) => `${props.theme.radii[1]}px`};
-  border-top-right-radius: ${(props) => `${props.theme.radii[1]}px`};
-  border-top-left-radius: ${(props) => `${props.theme.radii[1]}px`};
-  box-shadow: ${(props) => props.theme.shadows[2]};
+  border: ${(props) => getBorderCSSShorthand(props.theme.borders[2])};
+  border-radius: 0;
+  box-shadow: none;
   overflow: hidden;
 `;
 
diff --git a/app/client/src/components/designSystems/blueprint/ButtonComponent.tsx b/app/client/src/components/designSystems/blueprint/ButtonComponent.tsx
index 40d9e561db..d8639c3a76 100644
--- a/app/client/src/components/designSystems/blueprint/ButtonComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/ButtonComponent.tsx
@@ -22,7 +22,7 @@ const getButtonColorStyles = (props: { theme: Theme } & ButtonStyleProps) => {
   if (props.filled) return props.theme.colors.textOnDarkBG;
   if (props.accent) {
     if (props.accent === "secondary") {
-      return props.theme.colors.OXFORD_BLUE;
+      return props.theme.colors[AccentColorMap["primary"]];
     }
     return props.theme.colors[AccentColorMap[props.accent]];
   }
@@ -56,8 +56,8 @@ const ButtonWrapper = styled((props: ButtonStyleProps & IButtonProps) => (
       ${(props) =>
         props.accent
           ? props.theme.colors[AccentColorMap[props.accent]]
-          : props.theme.colors.secondary};
-    border-radius: 4px;
+          : props.theme.colors.primary};
+    border-radius: 0;
     font-weight: ${(props) => props.theme.fontWeights[2]};
     outline: none;
     &.bp3-button {
diff --git a/app/client/src/components/designSystems/blueprint/CheckboxComponent.tsx b/app/client/src/components/designSystems/blueprint/CheckboxComponent.tsx
index 32cb277c5a..d055e6a1ed 100644
--- a/app/client/src/components/designSystems/blueprint/CheckboxComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/CheckboxComponent.tsx
@@ -39,6 +39,7 @@ class CheckboxComponent extends React.Component<CheckboxComponentProps> {
           className={
             this.props.isLoading ? "bp3-skeleton" : Classes.RUNNING_TEXT
           }
+          style={{ borderRadius: 0 }}
           onChange={this.onCheckChange}
           disabled={this.props.isDisabled}
           checked={this.props.isChecked}
diff --git a/app/client/src/components/designSystems/blueprint/DatePickerComponent.tsx b/app/client/src/components/designSystems/blueprint/DatePickerComponent.tsx
index ccc1152670..4d1e95c631 100644
--- a/app/client/src/components/designSystems/blueprint/DatePickerComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/DatePickerComponent.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { labelStyle } from "constants/DefaultTheme";
+import { getBorderCSSShorthand, labelStyle } from "constants/DefaultTheme";
 import { ControlGroup, Classes, Label } from "@blueprintjs/core";
 import { ComponentProps } from "components/designSystems/appsmith/BaseComponent";
 import { DateInput } from "@blueprintjs/datetime";
@@ -16,9 +16,10 @@ const StyledControlGroup = styled(ControlGroup)`
   &&& {
     .${Classes.INPUT} {
       box-shadow: none;
-      border: 1px solid;
-      border-color: ${Colors.GEYSER_LIGHT};
-      border-radius: ${(props) => props.theme.radii[1]}px;
+      color: ${Colors.OXFORD_BLUE};
+      font-size: ${(props) => props.theme.fontSizes[3]}px;
+      border: ${(props) => getBorderCSSShorthand(props.theme.borders[2])};
+      border-radius: 0;
       width: 100%;
       height: inherit;
       align-items: center;
@@ -26,7 +27,10 @@ const StyledControlGroup = styled(ControlGroup)`
         border-color: ${Colors.HIT_GRAY};
       }
       &:focus {
-        border-color: ${Colors.MYSTIC};
+        border: ${(props) => getBorderCSSShorthand(props.theme.borders[2])};
+        border-color: #80bdff;
+        outline: 0;
+        box-shadow: 0 0 0 0.1rem rgba(0, 123, 255, 0.25);
       }
     }
     .${Classes.INPUT_GROUP} {
@@ -45,15 +49,6 @@ const StyledControlGroup = styled(ControlGroup)`
       max-width: calc(30% - ${WIDGET_PADDING}px);
     }
   }
-  &&& {
-    input {
-      border: 1px solid ${Colors.HIT_GRAY};
-      border-radius: ${(props) => props.theme.radii[1]}px;
-      box-shadow: none;
-      color: ${Colors.OXFORD_BLUE};
-      font-size: ${(props) => props.theme.fontSizes[3]}px;
-    }
-  }
 `;
 
 class DatePickerComponent extends React.Component<
diff --git a/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx b/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
index 06ce0e93dc..3218cffebb 100644
--- a/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
@@ -25,6 +25,7 @@ import styled, {
   labelStyle,
   BlueprintCSSTransform,
   BlueprintInputTransform,
+  getBorderCSSShorthand,
 } from "constants/DefaultTheme";
 import { Colors } from "constants/Colors";
 import Fuse from "fuse.js";
@@ -57,6 +58,7 @@ const StyledSingleDropDown = styled(SingleDropDown)`
     box-shadow: none;
     background: white;
     min-height: 32px;
+    border: ${(props) => getBorderCSSShorthand(props.theme.borders[2])};
   }
   .${Classes.BUTTON_TEXT} {
     text-overflow: ellipsis;
@@ -94,8 +96,11 @@ const StyledControlGroup = styled(ControlGroup)<{ haslabel: string }>`
 const DropdownStyles = createGlobalStyle`
   .select-popover-wrapper {
     width: 100%;
-    border-radius: ${(props) => props.theme.radii[1]}px;
-    box-shadow:  0px 2px 4px rgba(67, 70, 74, 0.14);
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2) !important;
+    border: ${(props) => getBorderCSSShorthand(props.theme.borders[2])};
+    border-color: rgba(0, 0, 0, 0.2);
+    border-radius: 0;
+    margin-top: ${(props) => props.theme.spaces[3]}px;
     padding: ${(props) => props.theme.spaces[3]}px;
     background: white;
     && .${Classes.MENU} {
diff --git a/app/client/src/components/designSystems/blueprint/InputComponent.tsx b/app/client/src/components/designSystems/blueprint/InputComponent.tsx
index 49690b6995..298340ccee 100644
--- a/app/client/src/components/designSystems/blueprint/InputComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/InputComponent.tsx
@@ -1,6 +1,10 @@
 import React from "react";
 import styled from "styled-components";
-import { IntentColors, labelStyle } from "constants/DefaultTheme";
+import {
+  getBorderCSSShorthand,
+  IntentColors,
+  labelStyle,
+} from "constants/DefaultTheme";
 import { ComponentProps } from "components/designSystems/appsmith/BaseComponent";
 import {
   Intent,
@@ -39,7 +43,7 @@ const InputComponentWrapper = styled((props) => (
       border: 1px solid;
       border-color: ${({ hasError }) =>
         hasError ? IntentColors.danger : Colors.GEYSER_LIGHT};
-      border-radius: ${(props) => props.theme.radii[1]}px;
+      border-radius: 0;
       height: ${(props) => (props.multiline === "true" ? "100%" : "inherit")};
       width: 100%;
       ${(props) =>
@@ -49,6 +53,7 @@ const InputComponentWrapper = styled((props) => (
         border-bottom-right-radius: 0px;
         border-right-width: 0px;
       `}
+      transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
       &:active {
         border-color: ${({ hasError }) =>
           hasError ? IntentColors.danger : Colors.HIT_GRAY};
@@ -56,6 +61,13 @@ const InputComponentWrapper = styled((props) => (
       &:focus {
         border-color: ${({ hasError }) =>
           hasError ? IntentColors.danger : Colors.MYSTIC};
+
+        &:focus {
+          border: ${(props) => getBorderCSSShorthand(props.theme.borders[2])};
+          border-color: #80bdff;
+          outline: 0;
+          box-shadow: 0 0 0 0.1rem rgba(0, 123, 255, 0.25);
+        }
       }
     }
     .${Classes.INPUT_GROUP} {
diff --git a/app/client/src/constants/Colors.tsx b/app/client/src/constants/Colors.tsx
index 8eefb11aa3..f20aae2bc9 100644
--- a/app/client/src/constants/Colors.tsx
+++ b/app/client/src/constants/Colors.tsx
@@ -4,7 +4,7 @@ export const Colors: Record<string, string> = {
   WHITE_SMOKE: "#F4F4F4",
   POLAR: "#E9FAF3",
   GEYSER: "#D3DEE3",
-  GEYSER_LIGHT: "#D0D7DD",
+  GEYSER_LIGHT: "#E7E7E7",
   ATHENS_GRAY: "#EBEFF2",
   CONCRETE: "#F3F3F3",
   MYSTIC: "#E1E8ED",
@@ -36,11 +36,11 @@ export const Colors: Record<string, string> = {
   MAKO: "#464D53",
   ALTO: "#DFDFDF",
 
-  GREEN: "#29CCA3",
+  GREEN: "#03B365",
   JUNGLE_GREEN: "#24BA91",
   JUNGLE_GREEN_DARKER: "#30A481",
   EUCALYPTUS: "#218358",
-  RED: "#CE4257",
+  RED: "#B30338",
   ERROR_RED: "#E22C2C",
   PURPLE: "#6871EF",
   OXFORD_BLUE: "#2E3D49",
diff --git a/app/client/src/constants/DefaultTheme.tsx b/app/client/src/constants/DefaultTheme.tsx
index c3a8596c96..fec129ec5e 100644
--- a/app/client/src/constants/DefaultTheme.tsx
+++ b/app/client/src/constants/DefaultTheme.tsx
@@ -98,6 +98,11 @@ export const BlueprintControlTransform = css`
         border: 2px solid ${Colors.SLATE_GRAY};
       }
     }
+
+    .${Classes.CHECKBOX} .${Classes.CONTROL_INDICATOR} {
+      border-radius: 0;
+    }
+
     .${Classes.CONTROL_INDICATOR} {
       box-shadow: none;
       background: none;
@@ -121,9 +126,8 @@ export const BlueprintCSSTransform = css`
   &&&& {
     .${Classes.BUTTON} {
       box-shadow: none;
-      border-radius: 4px;
+      border-radius: 0;
       background: white;
-      border: 1px solid ${Colors.GEYSER};
     }
     .${Classes.INTENT_PRIMARY} {
       background: ${IntentColors.primary};
@@ -1520,7 +1524,8 @@ export const theme: Theme = {
       lightBg: lightShades[0],
       darkBg: lightShades[10],
     },
-    appBackground: "#EFEFEF",
+    appBackground: "#EDEDED",
+    artboard: "#F6F6F6",
     primaryOld: Colors.GREEN,
     primaryDarker: Colors.JUNGLE_GREEN,
     primaryDarkest: Colors.JUNGLE_GREEN_DARKER,
diff --git a/app/client/src/index.css b/app/client/src/index.css
index 1ec1403d8f..0d39211503 100755
--- a/app/client/src/index.css
+++ b/app/client/src/index.css
@@ -63,3 +63,44 @@ div.bp3-popover-arrow {
   z-index: 10;
 }
 
+.bp3-popover.bp3-dateinput-popover  {
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2) !important;
+  border-radius: 0;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+.bp3-popover .bp3-input {
+  outline: 0;
+  box-shadow: none;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 0 !important;
+}
+
+.bp3-popover .bp3-input:focus {
+  border-color: #80bdff;
+  outline: 0;
+  box-shadow: 0 0 0 0.1rem rgba(0, 123, 255, 0.25);
+}
+
+.bp3-popover.bp3-minimal {
+  margin-top: 8px !important;
+}
+
+.bp3-datepicker {
+  border-radius: 0 !important;
+}
+
+/* rich text editor styles */
+.tox-tinymce {
+  border-color: #E7E7E7 !important;
+}
+
+.tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type), .tox .tox-statusbar  {
+  border-color: #E7E7E7 !important;
+}
+
+.tox .tox-toolbar__primary {
+  background: white !important;
+  border-bottom: 1px solid #E7E7E7 !important;
+}
+
diff --git a/app/client/src/pages/AppViewer/AppViewerPageContainer.tsx b/app/client/src/pages/AppViewer/AppViewerPageContainer.tsx
index bd59d1f4de..395e7d72aa 100644
--- a/app/client/src/pages/AppViewer/AppViewerPageContainer.tsx
+++ b/app/client/src/pages/AppViewer/AppViewerPageContainer.tsx
@@ -25,7 +25,7 @@ import {
 import { fetchPublishedPage } from "actions/pageActions";
 
 const Section = styled.section`
-  background: ${(props) => props.theme.colors.bodyBG};
+  background: ${(props) => props.theme.colors.artboard};
   height: 100%;
   width: 100%;
   position: relative;
diff --git a/app/client/src/pages/Editor/MainContainer.tsx b/app/client/src/pages/Editor/MainContainer.tsx
index fa6014ebf0..71ccccff07 100644
--- a/app/client/src/pages/Editor/MainContainer.tsx
+++ b/app/client/src/pages/Editor/MainContainer.tsx
@@ -12,6 +12,7 @@ const SentryRoute = Sentry.withSentryRouting(Route);
 const Container = styled.div`
   display: flex;
   height: calc(100vh - ${(props) => props.theme.smallHeaderHeight});
+  background-color: ${(props) => props.theme.appBackground};
 `;
 
 const EditorContainer = styled.div`
diff --git a/app/client/src/pages/common/ArtBoard.tsx b/app/client/src/pages/common/ArtBoard.tsx
index 98211bbbf3..19b9b19dde 100644
--- a/app/client/src/pages/common/ArtBoard.tsx
+++ b/app/client/src/pages/common/ArtBoard.tsx
@@ -3,5 +3,8 @@ export default styled.div<{ width: number }>`
   width: ${(props) => props.width}px;
   margin: 0 auto;
   position: relative;
+  background: ${(props) => {
+    return props.theme.colors.artboard;
+  }};
   padding: ${(props) => props.theme.canvasPadding};
 `;
diff --git a/app/client/src/widgets/MapWidget.tsx b/app/client/src/widgets/MapWidget.tsx
index 463519375e..62b8ede9b9 100644
--- a/app/client/src/widgets/MapWidget.tsx
+++ b/app/client/src/widgets/MapWidget.tsx
@@ -11,6 +11,7 @@ import styled from "styled-components";
 import * as Sentry from "@sentry/react";
 import withMeta, { WithMeta } from "./MetaHOC";
 import { DEFAULT_CENTER } from "constants/WidgetConstants";
+import { getBorderCSSShorthand } from "constants/DefaultTheme";
 
 const { google } = getAppsmithConfigs();
 
@@ -20,6 +21,8 @@ const DisabledContainer = styled.div`
   text-align: center;
   display: flex;
   flex-direction: column;
+  border: ${(props) => getBorderCSSShorthand(props.theme.borders[2])};
+  border-radius: 0;
   h1 {
     margin-top: 15%;
     margin-bottom: 10%;