From d84ba96bc3436a9712d345addf01fdb829a1e02a Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Wed, 2 Jul 2025 12:23:49 +0530
Subject: [PATCH 01/16] Fix header resizer not coming up on Container, form and
 modal

---
 frontend/src/AppBuilder/Widgets/Container/Container.jsx  | 6 +-----
 .../Widgets/Form/Components/HorizontalSlot.jsx           | 6 +++++-
 frontend/src/AppBuilder/Widgets/Form/Form.jsx            | 9 +--------
 .../src/AppBuilder/Widgets/ModalV2/Components/Footer.jsx | 2 --
 .../src/AppBuilder/Widgets/ModalV2/Components/Header.jsx | 2 --
 .../src/AppBuilder/Widgets/ModalV2/Components/Modal.jsx  | 5 +----
 frontend/src/AppBuilder/_hooks/useActiveSlot.js          | 1 -
 7 files changed, 8 insertions(+), 23 deletions(-)

diff --git a/frontend/src/AppBuilder/Widgets/Container/Container.jsx b/frontend/src/AppBuilder/Widgets/Container/Container.jsx
index 61775f5919..de09b4fed0 100644
--- a/frontend/src/AppBuilder/Widgets/Container/Container.jsx
+++ b/frontend/src/AppBuilder/Widgets/Container/Container.jsx
@@ -33,7 +33,6 @@ export const Container = ({
     setExposedVariables,
     setExposedVariable
   );
-
   const { dynamicHeight } = properties;
 
   useDynamicHeight({
@@ -51,10 +50,8 @@ export const Container = ({
     shallow
   );
 
-  const isEditing = useStore((state) => state.currentMode === 'edit');
   const setComponentProperty = useStore((state) => state.setComponentProperty, shallow);
-
-  const activeSlot = useActiveSlot(isEditing ? id : null); // Track the active slot for this widget
+  const activeSlot = useActiveSlot(id); // Track the active slot for this widget
   const { borderRadius, borderColor, boxShadow } = styles;
   const { headerHeight = 80 } = properties;
   const headerMaxHeight = parseInt(height, 10) - 100 - 10;
@@ -118,7 +115,6 @@ export const Container = ({
             <HorizontalSlot
               slotName={'header'}
               slotStyle={containerHeaderStyles}
-              isEditing={isEditing}
               id={`${id}-header`}
               height={headerHeight}
               width={width}
diff --git a/frontend/src/AppBuilder/Widgets/Form/Components/HorizontalSlot.jsx b/frontend/src/AppBuilder/Widgets/Form/Components/HorizontalSlot.jsx
index 7e73239e96..f7a130a98b 100644
--- a/frontend/src/AppBuilder/Widgets/Form/Components/HorizontalSlot.jsx
+++ b/frontend/src/AppBuilder/Widgets/Form/Components/HorizontalSlot.jsx
@@ -2,6 +2,9 @@ import React, { useEffect } from 'react';
 import { Container as SubContainer } from '@/AppBuilder/AppCanvas/Container';
 import { showGridLines, hideGridLines } from '@/AppBuilder/AppCanvas/Grid/gridUtils';
 import { useSubContainerResizable } from '@/AppBuilder/_hooks/useSubContainerResizable';
+import { useModuleContext } from '@/AppBuilder/_contexts/ModuleContext';
+import useStore from '@/AppBuilder/_stores/store';
+import { shallow } from 'zustand/shallow';
 
 export const HorizontalSlot = React.memo(
   ({
@@ -14,10 +17,11 @@ export const HorizontalSlot = React.memo(
     slotName = 'header', // 'header' or 'footer'
     slotStyle = {},
     onResize,
-    isEditing,
     maxHeight,
     componentType,
   }) => {
+    const { moduleId } = useModuleContext();
+    const isEditing = useStore((state) => state.modeStore.modules[moduleId].currentMode === 'edit', shallow);
     const parsedHeight = parseInt(height, 10);
     const { getRootProps, getHandleProps, getResizeState } = useSubContainerResizable({
       initialHeight: parsedHeight,
diff --git a/frontend/src/AppBuilder/Widgets/Form/Form.jsx b/frontend/src/AppBuilder/Widgets/Form/Form.jsx
index a8da234352..065a1592e6 100644
--- a/frontend/src/AppBuilder/Widgets/Form/Form.jsx
+++ b/frontend/src/AppBuilder/Widgets/Form/Form.jsx
@@ -341,13 +341,8 @@ const FormComponent = (props) => {
     });
     setChildrenData(childDataRef.current);
   };
-
-  const mode = useStore((state) => state.currentMode, shallow);
-  const isEditing = mode === 'edit';
-
-  const activeSlot = useActiveSlot(isEditing ? id : null); // Track the active slot for this widget
+  const activeSlot = useActiveSlot(id); // Track the active slot for this widget
   const setComponentProperty = useStore((state) => state.setComponentProperty, shallow);
-  // const updateContainerAutoHeight = useStore((state) => state.updateContainerAutoHeight);
 
   const updateHeaderSizeInStore = ({ newHeight }) => {
     const _height = parseInt(newHeight, 10);
@@ -388,7 +383,6 @@ const FormComponent = (props) => {
         <HorizontalSlot
           slotName="header"
           slotStyle={formHeader}
-          isEditing={isEditing}
           id={`${id}-header`}
           height={headerHeight}
           width={width}
@@ -469,7 +463,6 @@ const FormComponent = (props) => {
         <HorizontalSlot
           slotName="footer"
           slotStyle={formFooter}
-          isEditing={isEditing}
           id={`${id}-footer`}
           height={footerHeight}
           width={width}
diff --git a/frontend/src/AppBuilder/Widgets/ModalV2/Components/Footer.jsx b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Footer.jsx
index a6297a350c..eb1c5c66d2 100644
--- a/frontend/src/AppBuilder/Widgets/ModalV2/Components/Footer.jsx
+++ b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Footer.jsx
@@ -13,7 +13,6 @@ export const ModalFooter = React.memo(
     width,
     footerHeight,
     onClick,
-    isEditing,
     updateFooterSizeInStore,
     activeSlot,
     footerMaxHeight,
@@ -29,7 +28,6 @@ export const ModalFooter = React.memo(
             padding: `${4.5}px ${MODAL_CANVAS_PADDING}px`,
             margin: '0px',
           }}
-          isEditing={isEditing}
           id={`${id}-footer`}
           height={canvasFooterHeight}
           width={width}
diff --git a/frontend/src/AppBuilder/Widgets/ModalV2/Components/Header.jsx b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Header.jsx
index 845b264c01..16656e0ca3 100644
--- a/frontend/src/AppBuilder/Widgets/ModalV2/Components/Header.jsx
+++ b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Header.jsx
@@ -15,7 +15,6 @@ export const ModalHeader = React.memo(
     onHideModal,
     headerHeight,
     onClick,
-    isEditing,
     updateHeaderSizeInStore,
     activeSlot,
     headerMaxHeight,
@@ -34,7 +33,6 @@ export const ModalHeader = React.memo(
               maxHeight: isFullScreen ? `${headerMaxHeight}` : `${headerMaxHeight}px`,
               minHeight: '10px',
             }}
-            isEditing={isEditing}
             id={`${id}-header`}
             height={canvasHeaderHeight}
             width={width}
diff --git a/frontend/src/AppBuilder/Widgets/ModalV2/Components/Modal.jsx b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Modal.jsx
index 7a0669b5c5..52a0dd32e5 100644
--- a/frontend/src/AppBuilder/Widgets/ModalV2/Components/Modal.jsx
+++ b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Modal.jsx
@@ -29,9 +29,8 @@ export const ModalWidget = ({ ...restProps }) => {
     isFullScreen,
   } = restProps['modalProps'];
 
-  const isEditing = useStore((state) => state.currentMode === 'edit');
   const setComponentProperty = useStore((state) => state.setComponentProperty);
-  const activeSlot = useActiveSlot(isEditing ? id : null); // Track the active slot for this widget
+  const activeSlot = useActiveSlot(id); // Track the active slot for this widget
   const _modalHeight = isFullScreen ? '100vh' : `${modalHeight}px`;
   const headerMaxHeight = isFullScreen
     ? `calc(${_modalHeight} - ${footerHeight} - 100px - 10px)`
@@ -122,7 +121,6 @@ export const ModalWidget = ({ ...restProps }) => {
           onHideModal={onHideModal}
           headerHeight={headerHeight}
           onClick={handleModalSlotClick}
-          isEditing={isEditing}
           updateHeaderSizeInStore={updateHeaderSizeInStore}
           activeSlot={activeSlot}
           headerMaxHeight={headerMaxHeight}
@@ -168,7 +166,6 @@ export const ModalWidget = ({ ...restProps }) => {
           width={modalWidth}
           footerHeight={footerHeight}
           onClick={handleModalSlotClick}
-          isEditing={isEditing}
           updateFooterSizeInStore={updateFooterSizeInStore}
           activeSlot={activeSlot}
           footerMaxHeight={footerMaxHeight}
diff --git a/frontend/src/AppBuilder/_hooks/useActiveSlot.js b/frontend/src/AppBuilder/_hooks/useActiveSlot.js
index 14f80a366f..5b13f509c9 100644
--- a/frontend/src/AppBuilder/_hooks/useActiveSlot.js
+++ b/frontend/src/AppBuilder/_hooks/useActiveSlot.js
@@ -23,7 +23,6 @@ export const useActiveSlot = (widgetId) => {
   useEffect(() => {
     const handleDoubleClick = (event) => {
       let target = event.target;
-
       if (!widgetId) {
         setActiveSlot(null);
         return;

From 304523249710a1fa0fbbe9f9b42aac4513a238f0 Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Wed, 2 Jul 2025 12:25:07 +0530
Subject: [PATCH 02/16] Revert "Fix header resizer not coming up on Container,
 form and modal"

This reverts commit 709ab6250289c17fa100cf25a289c7b3c967bd52.
---
 frontend/src/AppBuilder/Widgets/Container/Container.jsx  | 6 +++++-
 .../Widgets/Form/Components/HorizontalSlot.jsx           | 6 +-----
 frontend/src/AppBuilder/Widgets/Form/Form.jsx            | 9 ++++++++-
 .../src/AppBuilder/Widgets/ModalV2/Components/Footer.jsx | 2 ++
 .../src/AppBuilder/Widgets/ModalV2/Components/Header.jsx | 2 ++
 .../src/AppBuilder/Widgets/ModalV2/Components/Modal.jsx  | 5 ++++-
 frontend/src/AppBuilder/_hooks/useActiveSlot.js          | 1 +
 7 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/frontend/src/AppBuilder/Widgets/Container/Container.jsx b/frontend/src/AppBuilder/Widgets/Container/Container.jsx
index de09b4fed0..61775f5919 100644
--- a/frontend/src/AppBuilder/Widgets/Container/Container.jsx
+++ b/frontend/src/AppBuilder/Widgets/Container/Container.jsx
@@ -33,6 +33,7 @@ export const Container = ({
     setExposedVariables,
     setExposedVariable
   );
+
   const { dynamicHeight } = properties;
 
   useDynamicHeight({
@@ -50,8 +51,10 @@ export const Container = ({
     shallow
   );
 
+  const isEditing = useStore((state) => state.currentMode === 'edit');
   const setComponentProperty = useStore((state) => state.setComponentProperty, shallow);
-  const activeSlot = useActiveSlot(id); // Track the active slot for this widget
+
+  const activeSlot = useActiveSlot(isEditing ? id : null); // Track the active slot for this widget
   const { borderRadius, borderColor, boxShadow } = styles;
   const { headerHeight = 80 } = properties;
   const headerMaxHeight = parseInt(height, 10) - 100 - 10;
@@ -115,6 +118,7 @@ export const Container = ({
             <HorizontalSlot
               slotName={'header'}
               slotStyle={containerHeaderStyles}
+              isEditing={isEditing}
               id={`${id}-header`}
               height={headerHeight}
               width={width}
diff --git a/frontend/src/AppBuilder/Widgets/Form/Components/HorizontalSlot.jsx b/frontend/src/AppBuilder/Widgets/Form/Components/HorizontalSlot.jsx
index f7a130a98b..7e73239e96 100644
--- a/frontend/src/AppBuilder/Widgets/Form/Components/HorizontalSlot.jsx
+++ b/frontend/src/AppBuilder/Widgets/Form/Components/HorizontalSlot.jsx
@@ -2,9 +2,6 @@ import React, { useEffect } from 'react';
 import { Container as SubContainer } from '@/AppBuilder/AppCanvas/Container';
 import { showGridLines, hideGridLines } from '@/AppBuilder/AppCanvas/Grid/gridUtils';
 import { useSubContainerResizable } from '@/AppBuilder/_hooks/useSubContainerResizable';
-import { useModuleContext } from '@/AppBuilder/_contexts/ModuleContext';
-import useStore from '@/AppBuilder/_stores/store';
-import { shallow } from 'zustand/shallow';
 
 export const HorizontalSlot = React.memo(
   ({
@@ -17,11 +14,10 @@ export const HorizontalSlot = React.memo(
     slotName = 'header', // 'header' or 'footer'
     slotStyle = {},
     onResize,
+    isEditing,
     maxHeight,
     componentType,
   }) => {
-    const { moduleId } = useModuleContext();
-    const isEditing = useStore((state) => state.modeStore.modules[moduleId].currentMode === 'edit', shallow);
     const parsedHeight = parseInt(height, 10);
     const { getRootProps, getHandleProps, getResizeState } = useSubContainerResizable({
       initialHeight: parsedHeight,
diff --git a/frontend/src/AppBuilder/Widgets/Form/Form.jsx b/frontend/src/AppBuilder/Widgets/Form/Form.jsx
index 065a1592e6..a8da234352 100644
--- a/frontend/src/AppBuilder/Widgets/Form/Form.jsx
+++ b/frontend/src/AppBuilder/Widgets/Form/Form.jsx
@@ -341,8 +341,13 @@ const FormComponent = (props) => {
     });
     setChildrenData(childDataRef.current);
   };
-  const activeSlot = useActiveSlot(id); // Track the active slot for this widget
+
+  const mode = useStore((state) => state.currentMode, shallow);
+  const isEditing = mode === 'edit';
+
+  const activeSlot = useActiveSlot(isEditing ? id : null); // Track the active slot for this widget
   const setComponentProperty = useStore((state) => state.setComponentProperty, shallow);
+  // const updateContainerAutoHeight = useStore((state) => state.updateContainerAutoHeight);
 
   const updateHeaderSizeInStore = ({ newHeight }) => {
     const _height = parseInt(newHeight, 10);
@@ -383,6 +388,7 @@ const FormComponent = (props) => {
         <HorizontalSlot
           slotName="header"
           slotStyle={formHeader}
+          isEditing={isEditing}
           id={`${id}-header`}
           height={headerHeight}
           width={width}
@@ -463,6 +469,7 @@ const FormComponent = (props) => {
         <HorizontalSlot
           slotName="footer"
           slotStyle={formFooter}
+          isEditing={isEditing}
           id={`${id}-footer`}
           height={footerHeight}
           width={width}
diff --git a/frontend/src/AppBuilder/Widgets/ModalV2/Components/Footer.jsx b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Footer.jsx
index eb1c5c66d2..a6297a350c 100644
--- a/frontend/src/AppBuilder/Widgets/ModalV2/Components/Footer.jsx
+++ b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Footer.jsx
@@ -13,6 +13,7 @@ export const ModalFooter = React.memo(
     width,
     footerHeight,
     onClick,
+    isEditing,
     updateFooterSizeInStore,
     activeSlot,
     footerMaxHeight,
@@ -28,6 +29,7 @@ export const ModalFooter = React.memo(
             padding: `${4.5}px ${MODAL_CANVAS_PADDING}px`,
             margin: '0px',
           }}
+          isEditing={isEditing}
           id={`${id}-footer`}
           height={canvasFooterHeight}
           width={width}
diff --git a/frontend/src/AppBuilder/Widgets/ModalV2/Components/Header.jsx b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Header.jsx
index 16656e0ca3..845b264c01 100644
--- a/frontend/src/AppBuilder/Widgets/ModalV2/Components/Header.jsx
+++ b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Header.jsx
@@ -15,6 +15,7 @@ export const ModalHeader = React.memo(
     onHideModal,
     headerHeight,
     onClick,
+    isEditing,
     updateHeaderSizeInStore,
     activeSlot,
     headerMaxHeight,
@@ -33,6 +34,7 @@ export const ModalHeader = React.memo(
               maxHeight: isFullScreen ? `${headerMaxHeight}` : `${headerMaxHeight}px`,
               minHeight: '10px',
             }}
+            isEditing={isEditing}
             id={`${id}-header`}
             height={canvasHeaderHeight}
             width={width}
diff --git a/frontend/src/AppBuilder/Widgets/ModalV2/Components/Modal.jsx b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Modal.jsx
index 52a0dd32e5..7a0669b5c5 100644
--- a/frontend/src/AppBuilder/Widgets/ModalV2/Components/Modal.jsx
+++ b/frontend/src/AppBuilder/Widgets/ModalV2/Components/Modal.jsx
@@ -29,8 +29,9 @@ export const ModalWidget = ({ ...restProps }) => {
     isFullScreen,
   } = restProps['modalProps'];
 
+  const isEditing = useStore((state) => state.currentMode === 'edit');
   const setComponentProperty = useStore((state) => state.setComponentProperty);
-  const activeSlot = useActiveSlot(id); // Track the active slot for this widget
+  const activeSlot = useActiveSlot(isEditing ? id : null); // Track the active slot for this widget
   const _modalHeight = isFullScreen ? '100vh' : `${modalHeight}px`;
   const headerMaxHeight = isFullScreen
     ? `calc(${_modalHeight} - ${footerHeight} - 100px - 10px)`
@@ -121,6 +122,7 @@ export const ModalWidget = ({ ...restProps }) => {
           onHideModal={onHideModal}
           headerHeight={headerHeight}
           onClick={handleModalSlotClick}
+          isEditing={isEditing}
           updateHeaderSizeInStore={updateHeaderSizeInStore}
           activeSlot={activeSlot}
           headerMaxHeight={headerMaxHeight}
@@ -166,6 +168,7 @@ export const ModalWidget = ({ ...restProps }) => {
           width={modalWidth}
           footerHeight={footerHeight}
           onClick={handleModalSlotClick}
+          isEditing={isEditing}
           updateFooterSizeInStore={updateFooterSizeInStore}
           activeSlot={activeSlot}
           footerMaxHeight={footerMaxHeight}
diff --git a/frontend/src/AppBuilder/_hooks/useActiveSlot.js b/frontend/src/AppBuilder/_hooks/useActiveSlot.js
index 5b13f509c9..14f80a366f 100644
--- a/frontend/src/AppBuilder/_hooks/useActiveSlot.js
+++ b/frontend/src/AppBuilder/_hooks/useActiveSlot.js
@@ -23,6 +23,7 @@ export const useActiveSlot = (widgetId) => {
   useEffect(() => {
     const handleDoubleClick = (event) => {
       let target = event.target;
+
       if (!widgetId) {
         setActiveSlot(null);
         return;

From 81041a0a7ff7c7f80ffae4af9102b3d67c86d25b Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Thu, 5 Jun 2025 21:04:29 +0530
Subject: [PATCH 03/16] feat: Changes background color to match new design

---
 frontend/src/HomePage/AppList.jsx             |   4 +-
 frontend/src/HomePage/AppMenu.jsx             |   2 +-
 frontend/src/HomePage/Header.jsx              |  20 +-
 frontend/src/HomePage/HomePage.jsx            |   8 +-
 frontend/src/HomePage/styles/homepage.scss    | 213 ++++++++++++++++
 frontend/src/_styles/componentdesign.scss     |  22 ++
 frontend/src/_styles/dropdown-custom.scss     |   2 +-
 frontend/src/_styles/global-datasources.scss  |  14 +-
 frontend/src/_styles/left-sidebar.scss        |   4 +-
 frontend/src/_styles/theme.scss               | 239 ++----------------
 .../ConstantFormStyle.scss                    |   2 +-
 .../BaseManageOrgConstants.jsx                |   4 +-
 .../BaseManageOrgConstants/style.scss         |   0
 13 files changed, 287 insertions(+), 247 deletions(-)
 create mode 100644 frontend/src/HomePage/styles/homepage.scss
 create mode 100644 frontend/src/modules/common/components/BaseManageOrgConstants/style.scss

diff --git a/frontend/src/HomePage/AppList.jsx b/frontend/src/HomePage/AppList.jsx
index ae7e458ced..e0669e1dee 100644
--- a/frontend/src/HomePage/AppList.jsx
+++ b/frontend/src/HomePage/AppList.jsx
@@ -26,8 +26,8 @@ const AppList = (props) => {
         </>
       )}
       {!props.isLoading && props.meta.total_count > 0 && (
-        <div className="container px-0">
-          <div className="row homepage-app-card-list-item-wrap">
+        <div className="">
+          <div className="homepage-app-card-list-item-wrap">
             {props.apps.map((app) => {
               return (
                 <div className="homepage-app-card-list-item" key={app.id}>
diff --git a/frontend/src/HomePage/AppMenu.jsx b/frontend/src/HomePage/AppMenu.jsx
index e20137aff7..6c2a521c57 100644
--- a/frontend/src/HomePage/AppMenu.jsx
+++ b/frontend/src/HomePage/AppMenu.jsx
@@ -113,7 +113,7 @@ export const AppMenu = function AppMenu({
         </div>
       }
     >
-      <div className={'cursor-pointer menu-ico'} data-cy={`app-card-menu-icon`}>
+      <div className={'cursor-pointer menu-ico menu-icon--trigger'} data-cy={`app-card-menu-icon`}>
         <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path
             fillRule="evenodd"
diff --git a/frontend/src/HomePage/Header.jsx b/frontend/src/HomePage/Header.jsx
index aa6580cb29..e20c5c5d7c 100644
--- a/frontend/src/HomePage/Header.jsx
+++ b/frontend/src/HomePage/Header.jsx
@@ -14,17 +14,15 @@ export default function HomeHeader({ onSearchSubmit, darkMode, appType }) {
       : t('globals.workflowsSearchItem', 'Search workflows in this workspace');
 
   return (
-    <div className="row">
-      <div className="home-search-holder">
-        <SearchBox
-          dataCy={`home-page`}
-          className="border-0 homepage-search"
-          onSubmit={onSearchSubmit}
-          darkMode={darkMode}
-          placeholder={placeholderText}
-          width={'100%'}
-        />
-      </div>
+    <div className="home-search-holder">
+      <SearchBox
+        dataCy={'home-page'}
+        className="border-0 homepage-search"
+        onSubmit={onSearchSubmit}
+        darkMode={darkMode}
+        placeholder={placeholderText}
+        width={'100%'}
+      />
     </div>
   );
 }
diff --git a/frontend/src/HomePage/HomePage.jsx b/frontend/src/HomePage/HomePage.jsx
index 55d6bd42df..2d430ef4d3 100644
--- a/frontend/src/HomePage/HomePage.jsx
+++ b/frontend/src/HomePage/HomePage.jsx
@@ -49,6 +49,7 @@ import {
 import CreateAppWithPrompt from '@/modules/AiBuilder/components/CreateAppWithPrompt';
 import SolidIcon from '@/_ui/Icon/SolidIcons';
 import EmptyModuleSvg from '../../assets/images/icons/empty-modules.svg';
+import './styles/homepage.scss';
 
 const { iconList, defaultIcon } = configs;
 
@@ -1543,12 +1544,7 @@ class HomePageComponent extends React.Component {
               <OrganizationList customStyle={{ marginBottom: isAdmin || isBuilder ? '' : '0px' }} />
             </div>
 
-            <div
-              className={cx('col home-page-content', {
-                'bg-light-gray': !this.props.darkMode,
-              })}
-              data-cy="home-page-content"
-            >
+            <div className={cx('col home-page-content')} data-cy="home-page-content">
               <div className="w-100 mb-5 container home-page-content-container">
                 {featuresLoaded && !isLoading ? (
                   <>
diff --git a/frontend/src/HomePage/styles/homepage.scss b/frontend/src/HomePage/styles/homepage.scss
new file mode 100644
index 0000000000..a3146e52e6
--- /dev/null
+++ b/frontend/src/HomePage/styles/homepage.scss
@@ -0,0 +1,213 @@
+.app-list {
+  margin: 24px 0;
+}
+
+.home-search-holder {
+  height: 20px;
+  width: 100%;
+  margin-top: 32px;
+
+  .search-box-wrapper {
+    .input-icon {
+      .input-icon-addon {
+        padding-right: 6px;
+      }
+    }
+  }
+
+  .homepage-search {
+    background: none !important;
+    color: var(--slate12);
+    height: 20px;
+    border: none !important;
+
+    &:focus {
+      background: none !important;
+      border: none !important;
+    }
+
+    &:hover {
+      background: none !important;
+      border: none !important;
+      color: var(--slate12);
+    }
+  }
+}
+
+.homepage-app-card-list-item-wrap {
+  column-gap: 24px;
+  display: flex;
+}
+
+.homepage-app-card-list-item {
+  max-width: 272px;
+  flex-basis: 33%;
+  padding: 0 !important;
+}
+
+.homepage-dropdown-style {
+  min-width: 11rem;
+  display: block;
+  align-items: center;
+  margin: 0;
+  line-height: 1.4285714;
+  width: 100%;
+  padding: 0.5rem 0.75rem !important;
+  font-weight: 400;
+  white-space: nowrap;
+  border: 0;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.homepage-dropdown-style:hover {
+  background: rgba(101, 109, 119, 0.06);
+}
+
+.menu-icon--trigger {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10px;
+  background-color: var(--background-surface-layer-01);
+  box-shadow: none;
+  transition: all 0.15s ease-in-out;
+  will-change: background-color, box-shadow;
+
+  &:hover {
+    background-color: var(--background-surface-layer-02);
+    box-shadow: var(--elevation-000-box-shadow);
+  }
+}
+
+.home-app-card-header {
+  margin-bottom: 32px;
+}
+
+.homepage-app-card {
+  height: 160px;
+  outline: 1px solid var(--border-weak);
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+  border-radius: 8px;
+  padding: 16px;
+  background-color: var(--background-surface-layer-01) !important;
+
+  .app-icon-main {
+    background: var(--indigo3) !important;
+    border-radius: 6px !important;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 48px;
+    height: 48px;
+    will-change: height, width;
+    transition: all 0.15s ease-in-out;
+  }
+
+  .appcard-buttons-wrap {
+    visibility: hidden;
+    opacity: 0;
+    height: 0;
+  }
+
+  .home-app-card-header {
+    .menu-ico {
+      visibility: hidden !important;
+    }
+  }
+
+  &:hover {
+    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+
+    .home-app-card-header {
+      margin-bottom: 12px;
+
+      .menu-ico {
+        visibility: visible !important;
+      }
+    }
+
+    .app-creation-time-container {
+      margin-bottom: 0px;
+    }
+
+    .app-card-name {
+      margin-bottom: 0px;
+    }
+
+    .app-creation-time {
+      // display: none;
+    }
+
+
+    .appcard-buttons-wrap {
+      display: flex;
+      visibility: visible;
+      opacity: 1;
+      padding: 0px;
+      gap: 12px;
+      width: 240px;
+      height: 28px;
+      flex-direction: row;
+      transition: all 0.15s ease-in-out;
+      will-change: opacity, visibility;
+
+      div {
+        a {
+          text-decoration: none;
+        }
+      }
+
+    }
+
+    .app-icon-main {
+      width: 36px;
+      height: 36px;
+    }
+  }
+}
+
+@media only screen and (max-width: 992px) {
+  .homepage-app-card-list-item-wrap {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    gap: 24px;
+  }
+
+  .homepage-app-card-list-item {
+    max-width: 304px !important;
+    flex-basis: 100%;
+
+    .edit-button,
+    .launch-button {
+      width: 129px !important;
+    }
+  }
+}
+
+@media only screen and (min-width: 993px) and (max-width: 1311px) {
+  .home-page-content-container {
+    max-width: 568px;
+  }
+
+  .homepage-app-card-list-item-wrap {
+    row-gap: 20px;
+  }
+
+  .homepage-app-card-list-item {
+    max-width: 269px;
+    flex-basis: 100%;
+
+    .edit-button,
+    .launch-button {
+      width: 111.5px !important;
+    }
+  }
+
+  .liner {
+    width: 568px;
+  }
+}
diff --git a/frontend/src/_styles/componentdesign.scss b/frontend/src/_styles/componentdesign.scss
index 52278e374b..80306adb38 100644
--- a/frontend/src/_styles/componentdesign.scss
+++ b/frontend/src/_styles/componentdesign.scss
@@ -109,6 +109,17 @@
     //upgrade
     --upgrade-default: #FFAF41;
     --upgrade-weak: #FFAF4140;
+
+    // Shadows
+    --elevation-000-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.10);
+    --elevation-200-box-shadow: 0px 2px 4px 0px rgba(48, 50, 51, 0.10), 0px 0px 1px 0px rgba(48, 50, 51, 0.05);
+    --elevation-300-box-shadow: 0px 4px 8px 0px rgba(48, 50, 51, 0.10), 0px 0px 1px 0px rgba(48, 50, 51, 0.05);
+    --elevation-400-box-shadow: 0px 8px 16px 0px rgba(48, 50, 51, 0.10), 0px 0px 1px 0px rgba(48, 50, 51, 0.05);
+    --elevation-500-box-shadow: 0px 16px 24px 0px rgba(48, 50, 51, 0.09), 0px 0px 1px 0px rgba(48, 50, 51, 0.05);
+    --elevation-600-box-shadow: 0px 24px 40px 0px rgba(48, 50, 51, 0.08), 0px 0px 1px 0px rgba(48, 50, 51, 0.05);
+    --elevation-700-box-shadow: 0px 32px 50px 0px rgba(48, 50, 51, 0.08), 0px 0px 1px 0px rgba(48, 50, 51, 0.05);
+    --elevation-100-box-shadow: 0px 1px 1px 0px rgba(48, 50, 51, 0.10), 0px 0px 1px 0px rgba(48, 50, 51, 0.05);
+    
 }
 
 .dark-theme {
@@ -222,4 +233,15 @@
     //upgrade
     --upgrade-default: #FFAF41;
     --upgrade-weak: #FFAF4140;
+
+    //box-shadow
+    --elevation-000-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.40);
+    --elevation-100-box-shadow: 0px 1px 1px 0px #000, 0px 0px 1px 0px rgba(0, 0, 0, 0.90);
+    --elevation-200-box-shadow: 0px 2px 4px 0px #000, 0px 0px 1px 0px rgba(0, 0, 0, 0.90);
+    --elevation-300-box-shadow: 0px 4px 8px 0px #000, 0px 0px 1px 0px rgba(0, 0, 0, 0.90);
+    --elevation-400-box-shadow: 0px 8px 16px 0px #000, 0px 0px 1px 0px rgba(0, 0, 0, 0.90);
+    --elevation-500-box-shadow: 0px 16px 24px 0px rgba(0, 0, 0, 0.99), 0px 0px 1px 0px rgba(0, 0, 0, 0.90);
+    --elevation-600-box-shadow: 0px 24px 40px 0px rgba(0, 0, 0, 0.98), 0px 0px 1px 0px rgba(0, 0, 0, 0.90);
+    --elevation-700-box-shadow: 0px 32px 50px 0px rgba(0, 0, 0, 0.98), 0px 0px 1px 0px rgba(0, 0, 0, 0.90);
+    
 }
\ No newline at end of file
diff --git a/frontend/src/_styles/dropdown-custom.scss b/frontend/src/_styles/dropdown-custom.scss
index 7ca2a022c0..601107a018 100644
--- a/frontend/src/_styles/dropdown-custom.scss
+++ b/frontend/src/_styles/dropdown-custom.scss
@@ -48,7 +48,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    border-top: 1px solid var(--slate5);
+    border-top: 1px solid var(--border-weak);
     margin-bottom: var(--dynamic-margin, 0px); //please Remove after Basicplan banner is removed..
 }
 
diff --git a/frontend/src/_styles/global-datasources.scss b/frontend/src/_styles/global-datasources.scss
index d365b1ac0c..852f70286e 100644
--- a/frontend/src/_styles/global-datasources.scss
+++ b/frontend/src/_styles/global-datasources.scss
@@ -4,10 +4,10 @@
 .global-datasources-sidebar {
     height: calc(100vh - 64px);
     max-width: 288px;
-    background: var(--page-default);
+    background: var(--page-weak);
     display: grid;
     grid-template-rows: auto 1fr auto;
-    border-right: 1px solid var(--slate5);
+    border-right: 1px solid var(--border-weak);
 
     .add-datasource-btn {
         height: 40px;
@@ -109,7 +109,7 @@
 
 .datasource-modal-container {
     position: relative;
-    background: var(--page-default);
+    background: var(--page-weak);
 
     .modal-header {
         background-color: var(--slate3) !important;
@@ -118,12 +118,12 @@
     .modal {
         position: absolute;
         z-index: 1050;
-        background: var(--slate2);
+        background: var(--page-weak);
     }
 
     .modal-content {
-        border: 1px solid var(--slate5);
-        background-color: var(--base) !important;
+        border: 1px solid var(--border-weak);
+        background-color: var(--page-weak) !important;
 
         .input-icon {
             &:hover {
@@ -185,7 +185,7 @@
     overflow-y: auto;
     padding-left: 20px;
     max-height: calc(100vh - 64px);
-    border-left: 1px solid var(--slate5);
+
     .datasource-list {
         width: 976px;
         margin: 0 auto;
diff --git a/frontend/src/_styles/left-sidebar.scss b/frontend/src/_styles/left-sidebar.scss
index 2f5dde474b..3149e86a48 100644
--- a/frontend/src/_styles/left-sidebar.scss
+++ b/frontend/src/_styles/left-sidebar.scss
@@ -1,7 +1,7 @@
 @import "./colors.scss";
 @import "./designtheme.scss";
 .left-sidebar {
-  background: var(--page-default) !important;
+  background: var(--page-weak) !important;
   display: flex;
   gap: 16px;
 
@@ -785,7 +785,7 @@
   align-items: center;
   padding-top: 0px;
   width: 48px;
-  border-right: 1px solid var(--slate5);
+  border-right: 1px solid var(--border-weak);
 }
 
 .tj-leftsidebar-icon-wrap {
diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss
index 1e77060ba1..d0031775b1 100644
--- a/frontend/src/_styles/theme.scss
+++ b/frontend/src/_styles/theme.scss
@@ -919,70 +919,6 @@ button {
   }
 }
 
-.home-search-holder {
-  height: 20px;
-  width: 100%;
-  margin-top: 32px;
-
-  .search-box-wrapper {
-    .input-icon {
-      .input-icon-addon {
-        padding-right: 6px;
-      }
-    }
-  }
-
-  .homepage-search {
-    background: none !important;
-    color: var(--slate12);
-    height: 20px;
-    border: none !important;
-
-    &:focus {
-      background: none !important;
-      border: none !important;
-    }
-
-    &:hover {
-      background: none !important;
-      border: none !important;
-      color: var(--slate12);
-    }
-  }
-}
-
-.homepage-app-card-list-item-wrap {
-  row-gap: 16px;
-  column-gap: 32px;
-  display: flex;
-  margin-top: 22px;
-}
-
-.homepage-app-card-list-item {
-  max-width: 272px;
-  flex-basis: 33%;
-  padding: 0 !important;
-}
-
-.homepage-dropdown-style {
-  min-width: 11rem;
-  display: block;
-  align-items: center;
-  margin: 0;
-  line-height: 1.4285714;
-  width: 100%;
-  padding: 0.5rem 0.75rem !important;
-  font-weight: 400;
-  white-space: nowrap;
-  border: 0;
-  cursor: pointer;
-  font-size: 12px;
-}
-
-.homepage-dropdown-style:hover {
-  background: rgba(101, 109, 119, 0.06);
-}
-
 .card-skeleton-container {
   border: 0.5px solid #b4bbc6;
   padding: 1rem;
@@ -7935,16 +7871,6 @@ tbody {
   color: var(--tblr-breadcrumb-item-active-color);
 }
 
-.app-icon-main {
-  background: var(--indigo3) !important;
-  border-radius: 6px !important;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 48px;
-  height: 48px;
-}
-
 .settings-nav-item,
 .audit-log-nav-item,
 .notification-center-nav-item {
@@ -7972,7 +7898,7 @@ tbody {
 
 .workspace-content-wrapper,
 .database-page-content-wrap {
-  background-color: var(--page-default);
+  background-color: var(--page-weak);
   height: calc(100vh - 64px) !important;
 }
 
@@ -7998,8 +7924,8 @@ tbody {
 .organization-page-sidebar {
   height: calc(100vh - 64px);
   max-width: 288px;
-  background-color: var(--page-default);
-  border-right: 1px solid var(--slate5) !important;
+  background-color: var(--page-weak);
+  border-right: 1px solid var(--border-weak) !important;
   display: grid !important;
   grid-template-rows: auto 1fr auto !important;
   position: relative;
@@ -8019,8 +7945,8 @@ tbody {
 .marketplace-page-sidebar {
   height: calc(100vh - 64px);
   max-width: 272px;
-  background-color: var(--page-default);
-  border-right: 1px solid var(--slate5) !important;
+  background-color: var(--page-weak);
+  border-right: 1px solid var(--border-weak) !important;
   display: grid !important;
   grid-template-rows: auto 1fr auto !important;
   position: fixed;
@@ -8028,8 +7954,8 @@ tbody {
 
 .home-page-sidebar {
   max-width: 288px;
-  background-color: var(--page-default);
-  border-right: 1px solid var(--slate5);
+  background-color: var(--page-weak);
+  border-right: 1px solid var(--border-weak);
   display: grid;
   grid-template-rows: auto 1fr auto;
 
@@ -8053,8 +7979,8 @@ tbody {
 
 .tooljet-database-sidebar {
   max-width: 288px;
-  background: var(--page-default);
-  border-right: 1px solid var(--slate5);
+  background: var(--page-weak);
+  border-right: 1px solid var(--border-weak);
   height: calc(100vh - 64px) !important;
 
 
@@ -8468,11 +8394,11 @@ tbody {
   right: 0;
   left: 48px;
   z-index: 1;
-  background: var(--base);
+  background: var(--page-weak);
   height: 64px;
 
   @media only screen and (max-width: 767px) {
-    border-bottom: 1px solid var(--slate5);
+    border-bottom: 1px solid var(--border-weak);
 
     .row {
       display: flex;
@@ -8741,19 +8667,19 @@ tbody {
 
 
 .tj-dashboard-section-header {
-  background-color: var(--page-default);
+  background-color: var(--page-weak);
   max-width: 288px;
   max-height: 64px;
   padding-top: 20px;
   padding-left: 20px;
   padding-bottom: 24px;
-  border-right: 1px solid var(--slate5);
+  border-right: 1px solid var(--border-weak);
 
   &[data-name="Audit logs"],
   &[data-name="Workspace constants"],
   &[data-name="Profile settings"] {
     border-right: none;
-    border-bottom: 1px solid var(--slate5);
+    border-bottom: 1px solid var(--border-weak);
 
     .paid-feature-banner {
       margin-left: 15px;
@@ -9080,7 +9006,7 @@ tbody {
 }
 
 .home-page-content {
-  background-color: var(--page-default);
+  background-color: var(--page-weak);
   height: calc(100vh - 64px) !important;
   overflow-y: auto;
   position: relative;
@@ -9155,76 +9081,6 @@ tbody {
   width: calc(100vw - 48px);
 }
 
-.home-app-card-header {
-  margin-bottom: 32px;
-}
-
-.homepage-app-card {
-  height: 166px;
-  outline: 1px solid var(--slate3);
-  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
-  border-radius: 6px;
-  padding: 16px;
-  background-color: var(--base) !important;
-
-  .appcard-buttons-wrap {
-    display: none;
-  }
-
-  .home-app-card-header {
-    .menu-ico {
-      visibility: hidden !important;
-    }
-  }
-
-  &:hover {
-    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
-
-    .home-app-card-header {
-      margin-bottom: 12px;
-
-      .menu-ico {
-        visibility: visible !important;
-      }
-    }
-
-    .app-creation-time-container {
-      margin-bottom: 0px;
-    }
-
-    .app-card-name {
-      margin-bottom: 0px;
-    }
-
-    .app-creation-time {
-      display: none;
-    }
-
-
-    .appcard-buttons-wrap {
-      display: flex;
-      padding: 0px;
-      gap: 12px;
-      width: 240px;
-      height: 28px;
-      flex-direction: row;
-
-      div {
-        a {
-          text-decoration: none;
-        }
-      }
-
-    }
-
-    .app-icon-main {
-      width: 36px;
-      height: 36px;
-
-    }
-  }
-}
-
 .app-creation-time-container {
   height: 16px;
 }
@@ -9715,7 +9571,7 @@ tbody {
   color: var(--slate11);
 
   .with-border {
-    border-bottom: 1px solid var(--slate5) !important;
+    border-bottom: 1px solid var(--border-weak) !important;
   }
 
   a {
@@ -9766,12 +9622,12 @@ tbody {
 }
 
 .tj-dashboard-header-wrap {
-  background-color: var(--page-default);
+  background-color: var(--page-weak);
   padding-top: 22px;
   padding-bottom: 22px;
   padding-left: 40px;
   height: 64px;
-  border-bottom: 1px solid var(--slate5);
+  border-bottom: 1px solid var(--border-weak);
 
   @media only screen and (max-width: 768px) {
     border-bottom: none;
@@ -12673,8 +12529,10 @@ tbody {
 }
 
 .workspace-nav-list-wrap {
-  padding: 20px 20px 20px 20px;
+  padding: 12px 24px;
   height: calc(100vh - 116px) !important;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .upload-user-form span.file-upload-error {
@@ -12943,12 +12801,12 @@ tbody {
 }
 
 .profile-page-content-wrap {
-  background-color: var(--page-default);
+  background-color: var(--page-weak);
   padding-top: 40px;
 }
 
 .profile-page-card {
-  background-color: var(--base);
+  background-color: var(--page-weak);
   border-radius: 6px;
 }
 
@@ -13095,51 +12953,6 @@ tbody {
   }
 }
 
-@media only screen and (max-width: 992px) {
-  .homepage-app-card-list-item-wrap {
-    display: flex;
-    justify-content: center;
-    margin-left: auto;
-    margin-right: auto;
-    width: 100%;
-    margin-top: 22px;
-  }
-
-  .homepage-app-card-list-item {
-    max-width: 304px !important;
-    flex-basis: 100%;
-
-    .edit-button,
-    .launch-button {
-      width: 129px !important;
-    }
-  }
-}
-
-@media only screen and (min-width: 993px) and (max-width: 1311px) {
-  .home-page-content-container {
-    max-width: 568px;
-  }
-
-  .homepage-app-card-list-item-wrap {
-    row-gap: 20px;
-  }
-
-  .homepage-app-card-list-item {
-    max-width: 269px;
-    flex-basis: 100%;
-
-    .edit-button,
-    .launch-button {
-      width: 111.5px !important;
-    }
-  }
-
-  .liner {
-    width: 568px;
-  }
-}
-
 .tj-docs-link {
   color: var(--indigo9) !important;
   text-decoration: none;
@@ -13165,9 +12978,9 @@ tbody {
   .modal-body-content,
   .modal-sidebar,
   .card {
-    background-color: var(--base) !important;
+    background-color: var(--page-weak) !important;
     color: var(--slate12) !important;
-    border-color: var(--slate5) !important;
+    border-color: var(--border-weak) !important;
   }
 
   .datasource-modal-sidebar-footer {
@@ -13216,7 +13029,7 @@ tbody {
 .marketplace-body {
   height: calc(100vh - 64px) !important;
   overflow-y: auto;
-  background-color: var(--page-default);
+  background-color: var(--page-weak);
 }
 
 .plugins-card {
diff --git a/frontend/src/modules/WorkspaceSettings/components/ManageOrgConstantsSettings/ConstantFormStyle.scss b/frontend/src/modules/WorkspaceSettings/components/ManageOrgConstantsSettings/ConstantFormStyle.scss
index 86bba024b1..f965308bb7 100644
--- a/frontend/src/modules/WorkspaceSettings/components/ManageOrgConstantsSettings/ConstantFormStyle.scss
+++ b/frontend/src/modules/WorkspaceSettings/components/ManageOrgConstantsSettings/ConstantFormStyle.scss
@@ -42,7 +42,7 @@
 }
 
 .constant-wrapper {
-  background-color: #f8f9fa;
+  background-color: var(--page-weak);
   padding: 0px;
 }
 
diff --git a/frontend/src/modules/common/components/BaseManageOrgConstants/BaseManageOrgConstants.jsx b/frontend/src/modules/common/components/BaseManageOrgConstants/BaseManageOrgConstants.jsx
index e0dee2a9f5..d9a473a87d 100644
--- a/frontend/src/modules/common/components/BaseManageOrgConstants/BaseManageOrgConstants.jsx
+++ b/frontend/src/modules/common/components/BaseManageOrgConstants/BaseManageOrgConstants.jsx
@@ -473,10 +473,8 @@ const BaseManageOrgConstants = ({
               featureAceess={featureAccess}
               licenseType={featureAccess?.licenseStatus?.licenseType}
             />
-            <div style={{ marginTop: '850px' }}>
-              <OrganizationList />
-            </div>
           </div>
+          <OrganizationList />
         </div>
         <div className="page-wrapper mt-4">
           <div className="container-xl" style={{ width: '880px' }}>
diff --git a/frontend/src/modules/common/components/BaseManageOrgConstants/style.scss b/frontend/src/modules/common/components/BaseManageOrgConstants/style.scss
new file mode 100644
index 0000000000..e69de29bb2

From 71bd9701c2aad7a5df60b829a7e3f0a4fd3a3bda Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Wed, 11 Jun 2025 02:06:39 +0530
Subject: [PATCH 04/16] Fixes broken styles

---
 frontend/src/HomePage/AppCard.jsx             |   2 +-
 frontend/src/HomePage/HomePage.jsx            |  15 +-
 frontend/src/HomePage/styles/homepage.scss    |  43 +-
 .../src/MarketplacePage/MarketplaceCard.jsx   |   2 +-
 frontend/src/TooljetDatabase/Table/Header.jsx |   4 +-
 .../src/TooljetDatabase/Table/styles.scss     |  20 -
 frontend/src/TooljetDatabase/index.jsx        |   1 +
 .../src/TooljetDatabase/styles/styles.scss    | 249 ++++++++++++
 frontend/src/_components/SearchBox.jsx        |   5 +-
 .../src/_components/_styles/search-box.scss   |  85 ++++
 frontend/src/_styles/global-datasources.scss  |  34 +-
 frontend/src/_styles/rocket/card.scss         |  13 +
 frontend/src/_styles/theme.scss               | 380 ++----------------
 frontend/src/_ui/Card/Card.jsx                |   3 +-
 frontend/src/_ui/Header/index.jsx             |   6 +-
 frontend/src/_ui/Layout/index.jsx             |   2 +-
 frontend/src/components/ui/Card/Index.jsx     |  35 ++
 .../Configuration.scss                        |   4 +-
 .../ConstantFormStyle.scss                    |   5 +-
 .../ConstantTable.jsx                         |  10 +-
 .../components/UsersTable/UsersTable.jsx      |  14 +-
 .../components/GlobalDataSources/index.jsx    |   6 +-
 22 files changed, 491 insertions(+), 447 deletions(-)
 create mode 100644 frontend/src/TooljetDatabase/styles/styles.scss
 create mode 100644 frontend/src/_components/_styles/search-box.scss
 create mode 100644 frontend/src/_styles/rocket/card.scss
 create mode 100644 frontend/src/components/ui/Card/Index.jsx

diff --git a/frontend/src/HomePage/AppCard.jsx b/frontend/src/HomePage/AppCard.jsx
index 83c9bee370..a3f5aa51e5 100644
--- a/frontend/src/HomePage/AppCard.jsx
+++ b/frontend/src/HomePage/AppCard.jsx
@@ -202,7 +202,7 @@ export default function AppCard({
       placement="bottom"
       show={appType === 'module' && props.basicPlan}
     >
-      <div className="card homepage-app-card" ref={cardRef}>
+      <div className="card homepage-app-card card--clickable" ref={cardRef}>
         <div
           className={appType === 'module' && props.basicPlan ? 'disabled-module' : ''}
           key={app?.id}
diff --git a/frontend/src/HomePage/HomePage.jsx b/frontend/src/HomePage/HomePage.jsx
index 2d430ef4d3..88f7e0e586 100644
--- a/frontend/src/HomePage/HomePage.jsx
+++ b/frontend/src/HomePage/HomePage.jsx
@@ -1571,15 +1571,12 @@ class HomePageComponent extends React.Component {
                 {(meta?.total_count > 0 || appSearchKey) && (
                   <>
                     {!(isLoading && !appSearchKey) && (
-                      <>
-                        <HomeHeader
-                          onSearchSubmit={this.onSearchSubmit}
-                          darkMode={this.props.darkMode}
-                          appType={this.props.appType}
-                          disabled={this.props.appType === 'module' && invalidLicense}
-                        />
-                        <div className="liner"></div>
-                      </>
+                      <HomeHeader
+                        onSearchSubmit={this.onSearchSubmit}
+                        darkMode={this.props.darkMode}
+                        appType={this.props.appType}
+                        disabled={this.props.appType === 'module' && invalidLicense}
+                      />
                     )}
                     <div className="filter-container">
                       <span>{currentFolder?.count ?? meta?.total_count} APPS</span>
diff --git a/frontend/src/HomePage/styles/homepage.scss b/frontend/src/HomePage/styles/homepage.scss
index a3146e52e6..3e116bdcc8 100644
--- a/frontend/src/HomePage/styles/homepage.scss
+++ b/frontend/src/HomePage/styles/homepage.scss
@@ -1,39 +1,20 @@
+.home-page-sidebar {
+  height: calc(100vh - 48px) !important; //64 is navbar height
+
+  .folder-list-user {
+    height: calc(100vh - 116px) !important; //64 is navbar height + 52 px footer
+  }
+}
+
 .app-list {
   margin: 24px 0;
 }
 
 .home-search-holder {
-  height: 20px;
+  height: 48px;
   width: 100%;
   margin-top: 32px;
-
-  .search-box-wrapper {
-    .input-icon {
-      .input-icon-addon {
-        padding-right: 6px;
-      }
-    }
-  }
-
-  .homepage-search {
-    background: none !important;
-    color: var(--slate12);
-    height: 20px;
-    border: none !important;
-
-    &:focus {
-      background: none !important;
-      border: none !important;
-    }
-
-    &:hover {
-      background: none !important;
-      border: none !important;
-      color: var(--slate12);
-    }
-  }
 }
-
 .homepage-app-card-list-item-wrap {
   column-gap: 24px;
   display: flex;
@@ -88,11 +69,7 @@
 
 .homepage-app-card {
   height: 160px;
-  outline: 1px solid var(--border-weak);
-  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
-  border-radius: 8px;
   padding: 16px;
-  background-color: var(--background-surface-layer-01) !important;
 
   .app-icon-main {
     background: var(--indigo3) !important;
@@ -119,8 +96,6 @@
   }
 
   &:hover {
-    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
-
     .home-app-card-header {
       margin-bottom: 12px;
 
diff --git a/frontend/src/MarketplacePage/MarketplaceCard.jsx b/frontend/src/MarketplacePage/MarketplaceCard.jsx
index 1a2c07cf61..daf6e470f6 100644
--- a/frontend/src/MarketplacePage/MarketplaceCard.jsx
+++ b/frontend/src/MarketplacePage/MarketplaceCard.jsx
@@ -52,7 +52,7 @@ export const MarketplaceCard = ({ id, name, repo, description, version, isInstal
 
   return (
     <div className="col-sm-6 col-lg-4">
-      <div className="plugins-card card-borderless">
+      <div className="card plugins-card card-borderless">
         <div className="card-body card-body-alignment">
           <div className="row align-items-center">
             <div className="col-auto">
diff --git a/frontend/src/TooljetDatabase/Table/Header.jsx b/frontend/src/TooljetDatabase/Table/Header.jsx
index 9774822a6f..53e43309fe 100644
--- a/frontend/src/TooljetDatabase/Table/Header.jsx
+++ b/frontend/src/TooljetDatabase/Table/Header.jsx
@@ -148,8 +148,8 @@ const Header = ({
   return (
     <>
       <div className="database-table-header-wrapper">
-        <div className="card border-0">
-          <div className="card-body  tj-db-operations-header">
+        <div className="border-0">
+          <div className="tj-db-operations-header">
             <div className="row align-items-center">
               <div className="col-8 align-items-center  gap-1" style={{ padding: '0 16px' }}>
                 <>
diff --git a/frontend/src/TooljetDatabase/Table/styles.scss b/frontend/src/TooljetDatabase/Table/styles.scss
index 5f32c6e68d..e377b88bcb 100644
--- a/frontend/src/TooljetDatabase/Table/styles.scss
+++ b/frontend/src/TooljetDatabase/Table/styles.scss
@@ -283,26 +283,6 @@
   background-color: #2B2F30 !important;
 }
 
-.empty-table-description {
-  font-size: 14px !important;
-  line-height: 20px !important;
-  margin-top: 5px !important;
-}
-
-.empty-table-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: calc(100% - 95px);
-}
-
-.tjdb-create-new-table {
-  width: 180px !important;
-  margin: 0px auto !important;
-  display: flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-}
 
 .keyPress-actions {
 
diff --git a/frontend/src/TooljetDatabase/index.jsx b/frontend/src/TooljetDatabase/index.jsx
index 72c179949d..8de322836b 100644
--- a/frontend/src/TooljetDatabase/index.jsx
+++ b/frontend/src/TooljetDatabase/index.jsx
@@ -7,6 +7,7 @@ import { BreadCrumbContext } from '@/App/App';
 import { useNavigate } from 'react-router-dom';
 import { pageTitles, fetchAndSetWindowTitle } from '@white-label/whiteLabelling';
 import { hasBuilderRole } from '@/_helpers/utils';
+import './styles/styles.scss';
 
 export const TooljetDatabaseContext = createContext({
   organizationId: null,
diff --git a/frontend/src/TooljetDatabase/styles/styles.scss b/frontend/src/TooljetDatabase/styles/styles.scss
new file mode 100644
index 0000000000..e091d8f0c9
--- /dev/null
+++ b/frontend/src/TooljetDatabase/styles/styles.scss
@@ -0,0 +1,249 @@
+.layout-header .tj-dashboard-header-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: var(--page-weak);
+  padding-top: 8px;
+  padding-bottom: 8px;
+  padding-left: 40px;
+  height: 48px;
+  border-bottom: 1px solid var(--border-weak);
+
+  @media only screen and (max-width: 768px) {
+    border-bottom: none;
+  }
+}
+
+.tooljet-database {
+  .search-icon-wrap svg {
+    position: relative;
+    top: 1px;
+    left: 1px;
+  }
+  .create-new-table-btn {
+    width: 248px;
+
+    button {
+      height: 40px !important;
+    }
+  }
+
+  .tooljet-database-sidebar {
+    max-width: 288px;
+    background: var(--page-weak);
+    border-right: 1px solid var(--border-weak);
+    height: calc(100vh - 48px) !important;
+
+    .sidebar-container {
+      height: 40px !important;
+      margin: 24px auto 0;
+      display: flex;
+      justify-content: center;
+    }
+
+    .sidebar-container-with-banner {
+      height: 40px !important;
+      padding-top: 1px !important;
+      margin: 0 auto;
+      display: flex;
+      justify-content: center;
+    }
+  }
+
+  // TABLE
+  .table-left-sidebar {
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+  }
+
+  .toojet-db-table-footer {
+    height: 52px;
+    background: var(--page-default) !important;
+    width: calc(100vw - 336px);
+  }
+
+  .toojet-db-table-footer-collapse {
+    height: 52px;
+    background: var(--page-default) !important;
+    width: calc(100vw - 48px);
+  }
+
+  .toojet-db-table-footer-collapse {
+    height: 52px;
+    background: var(--page-default) !important;
+    width: calc(100vw - 48px);
+  }
+
+  .database-page-content-wrap {
+    background-color: var(--page-weak);
+    height: calc(100vh - 64px) !important;
+  }
+
+  .instance-settings-wrapper {
+  }
+
+  .database-page-content-wrap {
+    height: calc(100vh - 64px) !important;
+  }
+
+  .empty-table-description {
+    font-size: 14px !important;
+    line-height: 20px !important;
+    margin-top: 5px !important;
+  }
+
+  .empty-table-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: calc(100% - 95px);
+  }
+
+  .tjdb-create-new-table {
+    width: 180px !important;
+    margin: 0px auto !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+  }
+
+  .tj-db-operations-header {
+    height: 56px;
+    padding: 0 !important;
+    display: flex;
+    align-items: center;
+    background-color: var(--page-weak);
+
+    .row {
+      margin-left: 0px;
+      width: 98%;
+    }
+
+    .col-8 {
+      padding-left: 0px;
+      display: flex;
+      gap: 12px;
+      align-items: center;
+    }
+  }
+
+  .add-new-column-btn {
+    margin-left: 16px;
+    height: 28px;
+    border-radius: 6px;
+    padding: 0 !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    color: var(--slate12);
+    border: none;
+  }
+
+  .tj-db-filter-btn {
+    width: 100%;
+    height: 28px;
+    display: flex;
+    border-radius: 6px;
+    background: transparent;
+    color: var(--slate12);
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .tj-db-filter-btn-applied,
+  .tj-db-sort-btn-applied {
+    display: flex !important;
+    flex-direction: row !important;
+    justify-content: center !important;
+    align-items: center !important;
+    width: 100% !important;
+    height: 28px !important;
+    background: var(--grass2) !important;
+    border-radius: 6px !important;
+  }
+
+  .tj-db-filter-btn-applied,
+  .tj-db-filter-clear-icon {
+    background-color: var(--indigo4) !important;
+    color: var(--indigo9) !important;
+
+    &:hover {
+      background-color: var(--button-secondary-pressed) !important;
+    }
+  }
+
+  .tj-db-filter-clear-icon {
+    border-radius: 0px 6px 6px 0px;
+  }
+
+  .tj-db-filter-btn-active,
+  .tj-db-sort-btn-active {
+    display: flex !important;
+    flex-direction: row !important;
+    justify-content: center !important;
+    align-items: center !important;
+    width: 100% !important;
+    height: 28px !important;
+    border-radius: 6px !important;
+    background: var(--indigo4) !important;
+    color: var(--indigo9) !important;
+  }
+
+  .tj-db-filter-btn-active {
+    background: var(--button-outline-pressed) !important;
+    color: var(--text-default) !important;
+  }
+
+  .tj-db-filter-btn-active-filter {
+    display: flex !important;
+    flex-direction: row !important;
+    justify-content: center !important;
+    align-items: center !important;
+    width: 100% !important;
+    height: 28px !important;
+    border-radius: 6px !important;
+    background: var(--button-secondary-pressed) !important;
+    color: var(--text-brand) !important;
+  }
+
+  .tj-db-header-add-new-row-btn {
+    height: 28px;
+    background: transparent;
+    border-radius: 6px !important;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 6px;
+    border: none;
+
+    padding: span {
+
+    }
+  }
+
+  .tj-db-sort-btn {
+    width: 100%;
+    height: 28px;
+    background: transparent;
+    color: var(--slate12);
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+  }
+
+  .edit-row-btn {
+    background: transparent;
+    color: var(--slate12);
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
diff --git a/frontend/src/_components/SearchBox.jsx b/frontend/src/_components/SearchBox.jsx
index f0c09054dc..99d5c93aa3 100644
--- a/frontend/src/_components/SearchBox.jsx
+++ b/frontend/src/_components/SearchBox.jsx
@@ -4,6 +4,7 @@ import cx from 'classnames';
 import useDebounce from '@/_hooks/useDebounce';
 import { useMounted } from '@/_hooks/use-mount';
 import SolidIcon from '@/_ui/Icon/SolidIcons';
+import './_styles/search-box.scss';
 
 export const SearchBox = forwardRef(
   (
@@ -65,7 +66,7 @@ export const SearchBox = forwardRef(
     }, [initialValue]);
 
     return (
-      <div className={`search-box-wrapper ${customClass}`}>
+      <div className={`ghost-search-box-wrapper ${customClass}`}>
         <div className="input-icon">
           {!isFocused && (
             <span className="input-icon-addon">
@@ -77,7 +78,7 @@ export const SearchBox = forwardRef(
             type="text"
             value={searchText}
             onChange={handleChange}
-            className={cx('form-control', {
+            className={cx('form-control ghost-search', {
               'dark-theme-placeholder': darkMode,
               [className]: !!className,
             })}
diff --git a/frontend/src/_components/_styles/search-box.scss b/frontend/src/_components/_styles/search-box.scss
new file mode 100644
index 0000000000..f1be3e2be4
--- /dev/null
+++ b/frontend/src/_components/_styles/search-box.scss
@@ -0,0 +1,85 @@
+.ghost-search-box-wrapper {
+  .form-control.ghost-search {
+    background: none !important;
+    color: var(--slate12);
+    height: 48px;
+    border: none !important;
+    border-radius: 0 !important;
+    border-bottom: 1px solid var(--border-weak) !important;
+    transition: border-bottom 0.2s ease-in-out;
+
+    &:hover {
+      background: none !important;
+      border-bottom: 1px solid var(--border-accent-weak) !important;
+      color: var(--slate12);
+    }
+
+    &:focus {
+      background: none !important;
+      border: none !important;
+      border-bottom: 1px solid var(--border-accent-strong) !important;
+    }
+    
+  }
+  .input-icon {
+    .input-icon-addon {
+      padding-right: 6px;
+      display: flex;
+    }
+  }
+}
+
+
+/**
+ * Search Box
+ */
+ .ghost-search-box-wrapper {
+  input {
+    width: 200px;
+    border-radius: 5px !important;
+    color: var(--slate12);
+    background-color: var(--base);
+  }
+
+  .input-icon .form-control:not(:first-child),
+  .input-icon .form-select:not(:last-child) {
+    padding-left: 28px !important;
+  }
+
+  input:focus {
+    width: 200px;
+    background-color: var(--base);
+  }
+
+  .input-icon .input-icon-addon {
+    display: flex;
+  }
+
+  .input-icon .input-icon-addon.end {
+    pointer-events: auto;
+
+    .tj-common-search-input-clear-icon {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      padding: 4px;
+      width: 20px;
+      height: 20px;
+      background: var(--indigo3) !important;
+      border-radius: 4px;
+    }
+
+    div {
+      border-radius: 12px;
+      color: #ffffff;
+      padding: 1px;
+      cursor: pointer;
+
+      svg {
+        height: 14px;
+        width: 14px;
+      }
+    }
+  }
+}
diff --git a/frontend/src/_styles/global-datasources.scss b/frontend/src/_styles/global-datasources.scss
index 852f70286e..6c0d2e4059 100644
--- a/frontend/src/_styles/global-datasources.scss
+++ b/frontend/src/_styles/global-datasources.scss
@@ -2,12 +2,13 @@
 @import "./designtheme.scss";
 
 .global-datasources-sidebar {
-    height: calc(100vh - 64px);
+    height: calc(100vh - 48px);
     max-width: 288px;
     background: var(--page-weak);
     display: grid;
     grid-template-rows: auto 1fr auto;
     border-right: 1px solid var(--border-weak);
+    gap: 30px;
 
     .add-datasource-btn {
         height: 40px;
@@ -28,7 +29,7 @@
         padding: 6px 15px;
         width: 248px;
         height: 32px;
-        margin-bottom: 10px;
+        margin-bottom: 8px;
 
         &:focus-visible {
             box-shadow: 0px 0px 0px 4px #dfe3e6;
@@ -70,6 +71,7 @@
 
     .datasources-list-item {
         background-color: var(--indigo3);
+        color: var(--text-black-000);
     }
 }
 
@@ -165,6 +167,12 @@
             display: flex;
             justify-content: center;
             align-items: center;
+
+            svg {
+                top: 1px;
+                left: 1px;
+                position: relative;
+            }
         }
     }
 
@@ -184,26 +192,24 @@
 .datasource-list-container {
     overflow-y: auto;
     padding-left: 20px;
-    max-height: calc(100vh - 64px);
+    max-height: calc(100vh - 48px);
+
 
     .datasource-list {
         width: 976px;
         margin: 0 auto;
-        max-height: calc(100vh - 70px);
+        padding-bottom: 48px;
 
         .datasource-search-holder {
             width: 100%;
-            margin-top: 22px;
+            margin-top: 24px;
+            margin-bottom: 24px;
+        }
 
-            .liner {
-                margin-top: 5px;
-                width: 100% !important;
-            }
-
-            input {
-                background: none !important;
-                border: none !important;
-            }
+        .ghost-search-box-wrapper .form-control.ghost-search {
+            padding-top: 16px;
+            padding-bottom: 16px;
+            height: 64px;
         }
     }
 
diff --git a/frontend/src/_styles/rocket/card.scss b/frontend/src/_styles/rocket/card.scss
new file mode 100644
index 0000000000..6dc527eb5d
--- /dev/null
+++ b/frontend/src/_styles/rocket/card.scss
@@ -0,0 +1,13 @@
+// Card 
+.card {
+  border: 0 !important;
+  outline: 1px solid var(--border-weak);
+  box-shadow: var(--elevation-100-box-shadow);
+  border-radius: 8px;
+  background-color: var(--background-surface-layer-01) !important;
+
+
+  &.card--clickable:hover {
+    box-shadow: var(--elevation-200-box-shadow);
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss
index d0031775b1..c56c2e4de9 100644
--- a/frontend/src/_styles/theme.scss
+++ b/frontend/src/_styles/theme.scss
@@ -20,6 +20,7 @@
 @import "./componentdesign.scss";
 @import './pages-sidebar.scss';
 @import './modules.scss';
+@import "./rocket/card.scss";
 
 /* ibm-plex-sans-100 - latin */
 @font-face {
@@ -4664,74 +4665,6 @@ input[type="text"] {
   }
 }
 
-/**
- * Search Box
- */
-.search-box-wrapper {
-  input {
-    width: 200px;
-    border-radius: 5px !important;
-    color: var(--slate12);
-    background-color: var(--base);
-  }
-
-  .input-icon .form-control:not(:first-child),
-  .input-icon .form-select:not(:last-child) {
-    padding-left: 28px !important;
-  }
-
-  input:focus {
-    width: 200px;
-    background-color: var(--base);
-  }
-
-  .input-icon .input-icon-addon {
-    display: flex;
-  }
-
-  .input-icon .input-icon-addon.end {
-    pointer-events: auto;
-
-    .tj-common-search-input-clear-icon {
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
-      align-items: center;
-      padding: 4px;
-      width: 20px;
-      height: 20px;
-      background: var(--indigo3) !important;
-      border-radius: 4px;
-    }
-
-    div {
-      border-radius: 12px;
-      color: #ffffff;
-      padding: 1px;
-      cursor: pointer;
-
-      svg {
-        height: 14px;
-        width: 14px;
-      }
-    }
-  }
-}
-
-.searchbox-wrapper {
-  margin-top: 0 !important;
-
-  .search-icon {
-    margin: 0.30rem
-  }
-
-  input {
-    border-radius: $border-radius !important;
-    padding-left: 1.75rem !important;
-    border-radius: $border-radius !important;
-  }
-}
-
 .fixedHeader {
   table thead {
     position: -webkit-sticky; // this is for all Safari (Desktop & iOS), not for Chrome
@@ -5650,12 +5583,11 @@ div#driver-page-overlay {
 .workspace-settings-page {
   width: 880px;
   margin: 0 auto;
-  background: var(--base);
+  background: var(--surfaces-surface-01);
 
   .card {
     background: var(--base);
-    border: 1px solid var(--slate7) !important;
-    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05) !important;
+    border: 1px solid var(--border-weak) !important;
     width: 880px;
 
     .card-header {
@@ -5687,13 +5619,18 @@ div#driver-page-overlay {
       align-items: center;
       padding: 24px 32px;
       gap: 8px;
-      border-top: 1px solid var(--slate5) !important;
-      background: var(--base);
+      border-top: 1px solid var(--border-weak) !important;
+      background: var(--surfaces-surface-01);
       margin-top: 0px !important;
       align-Self: 'stretch';
       height: 88px;
     }
 
+    .card-footer {
+      border-top: 1px solid var(--border-weak) !important;
+      background: var(--surfaces-surface-01);
+    }
+
     .card-body {
       height: 467px;
       padding: 24px;
@@ -6221,7 +6158,7 @@ div#driver-page-overlay {
 
 .org-constant-page {
   .card-footer {
-    background: var(--base);
+    background: var(--page-weak);
     color: var(--slate12);
   }
 }
@@ -7896,18 +7833,11 @@ tbody {
   padding-left: 20px;
 }
 
-.workspace-content-wrapper,
-.database-page-content-wrap {
+.workspace-content-wrapper {
   background-color: var(--page-weak);
   height: calc(100vh - 64px) !important;
 }
 
-.instance-settings-wrapper {}
-
-.database-page-content-wrap {
-  height: calc(100vh - 64px) !important;
-}
-
 .audit-logs-nav-item {
   position: fixed;
   bottom: 100px;
@@ -7922,12 +7852,12 @@ tbody {
 }
 
 .organization-page-sidebar {
-  height: calc(100vh - 64px);
+  height: calc(100vh - 48px);
   max-width: 288px;
   background-color: var(--page-weak);
   border-right: 1px solid var(--border-weak) !important;
-  display: grid !important;
-  grid-template-rows: auto 1fr auto !important;
+  display: flex !important;
+  flex-direction: column !important;
   position: relative;
 
   .trial-banner {
@@ -7943,7 +7873,7 @@ tbody {
 }
 
 .marketplace-page-sidebar {
-  height: calc(100vh - 64px);
+  height: calc(100vh - 48px);
   max-width: 272px;
   background-color: var(--page-weak);
   border-right: 1px solid var(--border-weak) !important;
@@ -7968,38 +7898,6 @@ tbody {
   margin-top: 14px;
 }
 
-.create-new-table-btn {
-  width: 248px;
-
-  button {
-    height: 40px !important;
-
-  }
-}
-
-.tooljet-database-sidebar {
-  max-width: 288px;
-  background: var(--page-weak);
-  border-right: 1px solid var(--border-weak);
-  height: calc(100vh - 64px) !important;
-
-
-  .sidebar-container {
-    height: 40px !important;
-    padding-top: 4px !important;
-    margin: 0 auto;
-    display: flex;
-    justify-content: center;
-  }
-
-  .sidebar-container-with-banner {
-    height: 40px !important;
-    padding-top: 1px !important;
-    margin: 0 auto;
-    display: flex;
-    justify-content: center;
-  }
-}
 
 .create-new-app-dropdown {
   width: 248px !important;
@@ -8395,7 +8293,7 @@ tbody {
   left: 48px;
   z-index: 1;
   background: var(--page-weak);
-  height: 64px;
+  height: 48px;
 
   @media only screen and (max-width: 767px) {
     border-bottom: 1px solid var(--border-weak);
@@ -8669,11 +8567,15 @@ tbody {
 .tj-dashboard-section-header {
   background-color: var(--page-weak);
   max-width: 288px;
+  height: 48px;
   max-height: 64px;
-  padding-top: 20px;
+  padding-top: 8px;
   padding-left: 20px;
-  padding-bottom: 24px;
+  padding-bottom: 8px;
   border-right: 1px solid var(--border-weak);
+  display: flex;
+  align-items: center;
+  // justify-content: center;
 
   &[data-name="Audit logs"],
   &[data-name="Workspace constants"],
@@ -8997,14 +8899,6 @@ tbody {
   padding-top: 4px;
 }
 
-.home-page-sidebar {
-  height: calc(100vh - 64px) !important; //64 is navbar height
-
-  .folder-list-user {
-    height: calc(100vh - 116px) !important; //64 is navbar height + 52 px footer
-  }
-}
-
 .home-page-content {
   background-color: var(--page-weak);
   height: calc(100vh - 64px) !important;
@@ -9057,30 +8951,6 @@ tbody {
 
 // DASHBOARD STYLES END
 
-// TABLE
-.table-left-sidebar {
-  height: calc(100vh - 104px) !important; // 62px [navbar] +  40px [ add table and search ] + extra 2 px(border)
-  overflow-y: auto;
-}
-
-.toojet-db-table-footer {
-  height: 52px;
-  background: var(--page-default) !important;
-  width: calc(100vw - 336px);
-}
-
-.toojet-db-table-footer-collapse {
-  height: 52px;
-  background: var(--page-default) !important;
-  width: calc(100vw - 48px);
-}
-
-.toojet-db-table-footer-collapse {
-  height: 52px;
-  background: var(--page-default) !important;
-  width: calc(100vw - 48px);
-}
-
 .app-creation-time-container {
   height: 16px;
 }
@@ -9621,19 +9491,6 @@ tbody {
   color: var(—-slate12) !important;
 }
 
-.tj-dashboard-header-wrap {
-  background-color: var(--page-weak);
-  padding-top: 22px;
-  padding-bottom: 22px;
-  padding-left: 40px;
-  height: 64px;
-  border-bottom: 1px solid var(--border-weak);
-
-  @media only screen and (max-width: 768px) {
-    border-bottom: none;
-  }
-}
-
 .dashboard-breadcrumb-header-name:hover {
   text-decoration: none !important;
 }
@@ -9690,7 +9547,6 @@ tbody {
 .users-table {
   background: var(--base);
   padding: 16px;
-  width: 848px;
   margin: 0 auto;
   padding: 16px;
 
@@ -9712,7 +9568,7 @@ tbody {
         }
 
         &[data-name="name-header"] {
-          max-width: 220px !important;
+          max-width: 210px !important;
         }
 
         &[data-name="meta-header"] {
@@ -9736,16 +9592,15 @@ tbody {
 
   thead {
     tr {
-      padding: 6px 0px 0px 6px;
+      padding: 6px 24px 0px 24px;
       gap: 8px;
-      width: 848px;
       height: 40px;
       display: flex;
       align-items: center;
     }
 
     tr>th {
-      background: var(--base) !important;
+      background: var(--page-weak) !important;
       border-bottom: none !important;
       padding: 0 !important;
       width: 230px;
@@ -9769,10 +9624,10 @@ tbody {
   }
 
   tr {
-    background: var(--base);
+    background: var(--page-weak);
     height: 66px;
-    padding: 13px 6px;
-    border-bottom: 1px solid var(--slate7);
+    padding: 13px 24px;
+    border-bottom: 1px solid var(--border-weak);
     display: flex;
     justify-content: space-between;
     gap: 8px;
@@ -9843,10 +9698,6 @@ tbody {
   max-width: 880px;
   margin: 0 auto;
 
-  .tj-user-table-wrapper {
-    padding-right: 4px;
-  }
-
   &:hover {
     .tj-user-table-wrapper {
       padding-right: 0px;
@@ -10318,146 +10169,8 @@ tbody {
   }
 }
 
-.tj-db-operations-header {
-  height: 48px;
-  padding: 0 !important;
-  display: flex;
-  align-items: center;
-  background-color: var(--base);
-
-  .row {
-    margin-left: 0px;
-    width: 98%;
-  }
-
-  .col-8 {
-    padding-left: 0px;
-    display: flex;
-    gap: 12px;
-    align-items: center;
-  }
-}
-
-.add-new-column-btn {
-  margin-left: 16px;
-  height: 28px;
-  border-radius: 6px;
-  padding: 0 !important;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: transparent;
-  color: var(--slate12);
-  border: none;
-}
-
-.tj-db-filter-btn {
-  width: 100%;
-  height: 28px;
-  display: flex;
-  border-radius: 6px;
-  background: transparent;
-  color: var(--slate12);
-  border: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.tj-db-filter-btn-applied,
-.tj-db-sort-btn-applied {
-  display: flex !important;
-  flex-direction: row !important;
-  justify-content: center !important;
-  align-items: center !important;
-  width: 100% !important;
-  height: 28px !important;
-  background: var(--grass2) !important;
-  border-radius: 6px !important;
-}
-
-.tj-db-filter-btn-applied,
-.tj-db-filter-clear-icon {
-  background-color: var(--indigo4) !important;
-  color: var(--indigo9) !important;
-
-  &:hover {
-    background-color: var(--button-secondary-pressed) !important;
-  }
-}
-
-.tj-db-filter-clear-icon {
-  border-radius: 0px 6px 6px 0px;
-}
-
-.tj-db-filter-btn-active,
-.tj-db-sort-btn-active {
-  display: flex !important;
-  flex-direction: row !important;
-  justify-content: center !important;
-  align-items: center !important;
-  width: 100% !important;
-  height: 28px !important;
-  border-radius: 6px !important;
-  background: var(--indigo4) !important;
-  color: var(--indigo9) !important;
-}
-
-.tj-db-filter-btn-active {
-  background: var(--button-outline-pressed) !important;
-  color: var(--text-default) !important;
-}
-
-.tj-db-filter-btn-active-filter {
-  display: flex !important;
-  flex-direction: row !important;
-  justify-content: center !important;
-  align-items: center !important;
-  width: 100% !important;
-  height: 28px !important;
-  border-radius: 6px !important;
-  background: var(--button-secondary-pressed) !important;
-  color: var(--text-brand) !important;
-}
-
-.tj-db-header-add-new-row-btn {
-  height: 28px;
-  background: transparent;
-  border-radius: 6px !important;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  gap: 6px;
-  border: none;
-
-  padding: span {}
-}
-
-.tj-db-sort-btn {
-  width: 100%;
-  height: 28px;
-  background: transparent;
-  color: var(--slate12);
-  border: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0
-}
-
-.edit-row-btn {
-  background: transparent;
-  color: var(--slate12);
-  border: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 .workspace-variable-header {
   width: 880px;
-  ;
   margin: 0 auto;
   display: flex;
   padding: 0;
@@ -10621,10 +10334,9 @@ tbody {
 .org-settings-wrapper-card {
   display: flex;
   flex-direction: row;
-  background: var(--base);
+  background: var(--surfaces-surface-01);
   width: 880px;
-  outline: 1px solid var(--slate5);
-  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+  outline: 1px solid var(--border-weak);
   border-radius: 6px;
   max-height: calc(100vh - 156px);
 }
@@ -10641,7 +10353,7 @@ tbody {
     padding: 0px 24px;
     width: 660px;
     height: 72px;
-    border-bottom: 1px solid var(--slate5);
+    border-bottom: 1px solid var(--border-weak);
 
   }
 
@@ -10660,7 +10372,7 @@ tbody {
   gap: 40px;
   width: 188px;
   height: 32px;
-  background: var(--base);
+  background: var(--surfaces-surface-01);
   border-radius: 6px;
   cursor: pointer;
 }
@@ -11748,15 +11460,12 @@ tbody {
 }
 
 .workspace-settings-filter-wrap {
-  background: var(--slate3);
+  background: var(--page-weak);
   padding: 15px 16px;
   gap: 12px;
   width: 880px;
   height: 62px;
-  border-right: 1px solid var(--slate7);
-  border-top: 1px solid var(--slate7);
-  border-left: 1px solid var(--slate7);
-  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+  border: 1px solid var(--border-weak);
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
 }
@@ -11794,11 +11503,11 @@ tbody {
 
   .card,
   thead {
-    background: var(--base) !important;
+    background: var(--page-weak) !important;
 
     tr>th,
     tbody>tr>td {
-      background: var(--base) !important;
+      background: var(--page-weak) !important;
     }
   }
 
@@ -12020,7 +11729,7 @@ tbody {
 .sidebar-list-wrap {
   margin-top: 24px;
   padding: 0px 20px 20px 20px;
-  height: calc(100vh - 180px);
+  flex-grow: 1;
   overflow: auto;
 
   span {
@@ -12141,7 +11850,7 @@ tbody {
 .tj-user-table-wrapper {
   height: calc(100vh - 392px); //52+64+40+32+20+62
   overflow-y: auto;
-  background: var(--base);
+  background: var(--page-weak);
   border-right: 1px solid var(--slate7);
   border-bottom: 1px solid var(--slate7);
   border-left: 1px solid var(--slate7);
@@ -12529,8 +12238,8 @@ tbody {
 }
 
 .workspace-nav-list-wrap {
+  flex-grow: 1;
   padding: 12px 24px;
-  height: calc(100vh - 116px) !important;
   width: 100%;
   box-sizing: border-box;
 }
@@ -12837,7 +12546,6 @@ tbody {
 
   .workspace-constant-card-body {
     min-height: calc(100vh - 408px);
-    background: var(--base);
   }
 
   .constant-table-wrapper {
@@ -12848,13 +12556,9 @@ tbody {
 
   .constant-table-card {
     min-height: 420px;
-    padding: 16px;
-    padding-top: 0px;
-    padding-bottom: 0px;
 
     .p-3-constants {
       padding: 1rem !important;
-      padding-left: 0px !important;
     }
   }
 
@@ -13033,10 +12737,6 @@ tbody {
 }
 
 .plugins-card {
-  background-color: var(--base);
-  border: 1px solid var(--slate3);
-  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
-  border-radius: 6px;
 
   .card-body-alignment {
     min-height: 145px;
diff --git a/frontend/src/_ui/Card/Card.jsx b/frontend/src/_ui/Card/Card.jsx
index e070cb0f14..967fbed113 100644
--- a/frontend/src/_ui/Card/Card.jsx
+++ b/frontend/src/_ui/Card/Card.jsx
@@ -11,6 +11,7 @@ const Card = ({
   width = 50,
   usePluginIcon = false,
   className,
+  cardClassName,
   titleClassName,
   actionButton,
   darkMode,
@@ -37,7 +38,7 @@ const Card = ({
   return (
     <div style={{ height: '112px', width: '164px' }} className={`col-md-2  mb-4 ${className}`}>
       <div
-        className="card"
+        className={`card ${cardClassName}`}
         role="button"
         onClick={(e) => {
           e.preventDefault();
diff --git a/frontend/src/_ui/Header/index.jsx b/frontend/src/_ui/Header/index.jsx
index dc46793984..66425c4619 100644
--- a/frontend/src/_ui/Header/index.jsx
+++ b/frontend/src/_ui/Header/index.jsx
@@ -71,9 +71,9 @@ function Header({
       <div className="row w-100 gx-0">
         {!collapseSidebar && (
           <div className="tj-dashboard-section-header" data-name={pathname}>
-            <div className="row">
+            <div className="row tw-w-full">
               <div className="col-9 d-flex">
-                <p className="tj-text-md font-weight-500" data-cy="dashboard-section-header">
+                <p className="tj-text-md font-weight-500 text-black-000" data-cy="dashboard-section-header">
                   {pathname}
                 </p>
                 {routesWithTags(pathname) && (
@@ -117,7 +117,7 @@ function Header({
           </div>
         )}
         <div className="col tj-dashboard-header-wrap">
-          <div className="d-flex justify-content-sm-between">
+          <div className="d-flex justify-content-sm-between tw-w-full">
             {enableCollapsibleSidebar && collapseSidebar && (
               <ToolTip message="Open sidebar" placement="bottom" delay={{ show: 0, hide: 100 }}>
                 <div className="pe-3">
diff --git a/frontend/src/_ui/Layout/index.jsx b/frontend/src/_ui/Layout/index.jsx
index aa784e04cf..1f7095dd04 100644
--- a/frontend/src/_ui/Layout/index.jsx
+++ b/frontend/src/_ui/Layout/index.jsx
@@ -148,7 +148,7 @@ function Layout({
           collapseSidebar={collapseSidebar}
           toggleCollapsibleSidebar={toggleCollapsibleSidebar}
         />
-        <div style={{ paddingTop: 64 }}>{children}</div>
+        <div style={{ paddingTop: 48 }}>{children}</div>
       </div>
       <ConfirmDialog
         title={'Unsaved Changes'}
diff --git a/frontend/src/components/ui/Card/Index.jsx b/frontend/src/components/ui/Card/Index.jsx
new file mode 100644
index 0000000000..3005fcdea5
--- /dev/null
+++ b/frontend/src/components/ui/Card/Index.jsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const Card = React.forwardRef(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)} {...props} />
+));
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+));
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('text-2xl font-semibold leading-none tracking-tight', className)} {...props} />
+));
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+));
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+));
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
+));
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
diff --git a/frontend/src/modules/WorkspaceSettings/components/BaseSSOConfigurationList/Configuration.scss b/frontend/src/modules/WorkspaceSettings/components/BaseSSOConfigurationList/Configuration.scss
index 666b828022..a194759aad 100644
--- a/frontend/src/modules/WorkspaceSettings/components/BaseSSOConfigurationList/Configuration.scss
+++ b/frontend/src/modules/WorkspaceSettings/components/BaseSSOConfigurationList/Configuration.scss
@@ -273,8 +273,8 @@ input:checked+.slider:before {
       align-items: center;
       padding: 24px 32px;
       gap: 8px;
-      border-top: 1px solid var(--slate5) !important;
-      background: var(--base);
+      border-top: 1px solid var(--border-weak) !important;
+      background: var(--surfaces-surface-01);
       margin-top: 0px !important;
       align-Self: 'stretch';
       height: 88px;
diff --git a/frontend/src/modules/WorkspaceSettings/components/ManageOrgConstantsSettings/ConstantFormStyle.scss b/frontend/src/modules/WorkspaceSettings/components/ManageOrgConstantsSettings/ConstantFormStyle.scss
index f965308bb7..b3d34fca61 100644
--- a/frontend/src/modules/WorkspaceSettings/components/ManageOrgConstantsSettings/ConstantFormStyle.scss
+++ b/frontend/src/modules/WorkspaceSettings/components/ManageOrgConstantsSettings/ConstantFormStyle.scss
@@ -47,9 +47,8 @@
 }
 
 .constant-page-wrapper {
-  background-color: #ffffff;
-  border: 1px solid #e9ecef;
-  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+  background-color: var(--page-weak);
+  border: 1px solid var(--border-weak);
   overflow: hidden;
   width: 920px;
   height: 620px;
diff --git a/frontend/src/modules/WorkspaceSettings/components/ManageOrgConstantsSettings/ConstantTable.jsx b/frontend/src/modules/WorkspaceSettings/components/ManageOrgConstantsSettings/ConstantTable.jsx
index 64e836f976..e999ea0433 100644
--- a/frontend/src/modules/WorkspaceSettings/components/ManageOrgConstantsSettings/ConstantTable.jsx
+++ b/frontend/src/modules/WorkspaceSettings/components/ManageOrgConstantsSettings/ConstantTable.jsx
@@ -44,16 +44,18 @@ const ConstantTable = ({
 
   return (
     <div>
-      <div className="card constant-table-card" style={{ border: 'none' }}>
+      <div className="constant-table-card" style={{ border: 'none' }}>
         <div
-          className="fixedHeader table-responsive px-2"
+          className="fixedHeader table-responsive"
           ref={tableRef}
           style={{ maxHeight: tableRef.current && calculateOffset() }}
         >
           <table className="table table-vcenter mt-2" disabled={true}>
             <thead>
               <tr>
-                <th data-cy="workspace-variable-table-name-header">Name</th>
+                <th className="!tw-pl-4" data-cy="workspace-variable-table-name-header">
+                  Name
+                </th>
                 <th data-cy="workspace-variable-table-value-header">Value</th>
                 {canUpdateDeleteConstant && (
                   <th className="w-1" style={{ paddingRight: '16px' }}>
@@ -99,7 +101,7 @@ const ConstantTable = ({
                 {constants.map((constant) => {
                   return (
                     <tr key={constant.id}>
-                      <td className="p-3-constants">
+                      <td className="p-3-constants !tw-pl-4">
                         <span
                           data-cy={`${constant.name.toLowerCase().replace(/\s+/g, '-')}-workspace-constant-name`}
                           data-tooltip-id="tooltip-for-org-constant-cell"
diff --git a/frontend/src/modules/common/components/UsersTable/UsersTable.jsx b/frontend/src/modules/common/components/UsersTable/UsersTable.jsx
index b04dc74bf0..bec365f214 100644
--- a/frontend/src/modules/common/components/UsersTable/UsersTable.jsx
+++ b/frontend/src/modules/common/components/UsersTable/UsersTable.jsx
@@ -68,7 +68,7 @@ const UsersTable = ({
       />
       <div style={customStyles} className="tj-user-table-wrapper">
         <div className="card-table fixedHeader table-responsive">
-          <table data-testid="usersTable" className="users-table table table-vcenter h-100">
+          <table data-testid="usersTable" className="users-table table table-vcenter h-100 mx-0">
             <thead>
               <tr>
                 <th data-cy="users-table-name-column-header" data-name="name-header">
@@ -106,9 +106,7 @@ const UsersTable = ({
                     {translator('header.organization.menus.manageUsers.workspaces', 'Workspaces')}
                   </th>
                 )}
-                <th className="w-1"></th>
-                <th className="w-1"></th>
-                <th className="w-1"></th>
+                <th className="w-1 tw-w-16 tw-max-w-16 tw-min-w-16"></th>
               </tr>
             </thead>
             {isLoading ? (
@@ -128,7 +126,7 @@ const UsersTable = ({
                   users.length > 0 &&
                   users.map((user) => (
                     <tr key={user.id} data-cy={`${user.name.toLowerCase().replace(/\s+/g, '-')}-user-row`}>
-                      <td>
+                      <td data-name="name-header">
                         <Avatar
                           avatarId={user.avatar_id}
                           text={`${user.first_name ? user.first_name[0] : ''}${
@@ -239,7 +237,7 @@ const UsersTable = ({
                           </a>
                         </td>
                       )}
-                      <td className="user-actions-button">
+                      <td className="user-actions-button tw-w-16 tw-max-w-16">
                         <UsersActionMenu
                           archivingUser={archivingUser}
                           user={user}
@@ -336,7 +334,9 @@ const GroupChipTD = ({ groups = [], isRole = false }) => {
       onClick={(e) => {
         orderedArray.length > 2 && toggleAllGroupsList(e);
       }}
-      className={cx('text-muted groups-name-cell', { 'groups-hover': orderedArray.length > 2 })}
+      className={cx('text-muted groups-name-cell !tw-w-[230px] tw-max-w-[230px]', {
+        'groups-hover': orderedArray.length > 2,
+      })}
     >
       <div className="groups-name-container tj-text-sm font-weight-500">
         {orderedArray.length === 0 ? (
diff --git a/frontend/src/modules/dataSources/components/GlobalDataSources/index.jsx b/frontend/src/modules/dataSources/components/GlobalDataSources/index.jsx
index 9975bf42d4..5127f009af 100644
--- a/frontend/src/modules/dataSources/components/GlobalDataSources/index.jsx
+++ b/frontend/src/modules/dataSources/components/GlobalDataSources/index.jsx
@@ -249,7 +249,7 @@ export const GlobalDataSources = ({ darkMode = false, updateSelectedDatasource }
           <div className="datasource-search-holder">
             <SearchBox
               dataCy={`home-page`}
-              className="border-0 homepage-search"
+              className="border-0"
               darkMode={darkMode}
               placeholder={`Search data sources`}
               initialValue={queryString}
@@ -260,7 +260,6 @@ export const GlobalDataSources = ({ darkMode = false, updateSelectedDatasource }
                 setSuggestingDataSource(false);
               }}
             />
-            <div className="liner mb-4"></div>
           </div>
           {suggestingDataSource ? (
             <center className="empty-ds-container">
@@ -307,7 +306,7 @@ export const GlobalDataSources = ({ darkMode = false, updateSelectedDatasource }
       }, 100);
     };
     return (
-      <div>
+      <div className="tw-pt-4">
         <SegregatedList
           handleOnSelect={handleOnSelect}
           activeDatasourceList={activeDatasourceList}
@@ -375,6 +374,7 @@ export const GlobalDataSources = ({ darkMode = false, updateSelectedDatasource }
                 width={'35px'}
                 actionButton={addDataSourceBtn(item)}
                 className="datasource-card"
+                cardClassName="card--clickable"
                 titleClassName={'datasource-card-title'}
                 tags={tags}
               />

From 83bff0441991e2545da4b9ce02c892ade97326a7 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Thu, 12 Jun 2025 12:00:11 +0530
Subject: [PATCH 05/16] Fixes broken search box

---
 frontend/src/HomePage/Header.jsx              |   2 +-
 frontend/src/SettingsPage/SettingsPage.jsx    |   5 +-
 .../src/TooljetDatabase/styles/styles.scss    |   6 +-
 frontend/src/_components/PageSearchBox.jsx    | 111 ++++++++++++++++++
 frontend/src/_components/SearchBox.jsx        |   4 +-
 .../_components/_styles/page-search-box.scss  |  85 ++++++++++++++
 .../src/_components/_styles/search-box.scss   |  57 +++------
 frontend/src/_styles/license.scss             |  15 ++-
 frontend/src/_styles/theme.scss               |  20 ++--
 .../ConstantFormStyle.scss                    |  10 +-
 .../components/UsersTable/UsersTable.jsx      |   8 +-
 11 files changed, 244 insertions(+), 79 deletions(-)
 create mode 100644 frontend/src/_components/PageSearchBox.jsx
 create mode 100644 frontend/src/_components/_styles/page-search-box.scss

diff --git a/frontend/src/HomePage/Header.jsx b/frontend/src/HomePage/Header.jsx
index e20c5c5d7c..d37e19bbbc 100644
--- a/frontend/src/HomePage/Header.jsx
+++ b/frontend/src/HomePage/Header.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { SearchBox } from '@/_components/SearchBox';
+import { SearchBox } from '@/_components/PageSearchBox';
 import { useTranslation } from 'react-i18next';
 
 export default function HomeHeader({ onSearchSubmit, darkMode, appType }) {
diff --git a/frontend/src/SettingsPage/SettingsPage.jsx b/frontend/src/SettingsPage/SettingsPage.jsx
index 53dfcad2d8..e7768dcf5f 100644
--- a/frontend/src/SettingsPage/SettingsPage.jsx
+++ b/frontend/src/SettingsPage/SettingsPage.jsx
@@ -169,7 +169,7 @@ function SettingsPage(props) {
         <div className="page-wrapper profile-page-content-wrap">
           <div style={{ height: `calc(100vh - 2.5rem - 64px)` }}>
             <div className="container-xl">
-              <div className="profile-page-card">
+              <div className="card profile-page-card">
                 <div className="card-header">
                   <h3 className="card-title" data-cy="card-title-profile">
                     {t('header.profileSettingPage.profile', 'Profile')}
@@ -244,8 +244,7 @@ function SettingsPage(props) {
                   <div></div>
                 </div>
               </div>
-              <br />
-              <div className="profile-page-card">
+              <div className="card profile-page-card tw-mt-16">
                 <div className="card-header">
                   <h3 className="card-title" data-cy="card-title-change-password">
                     {t('header.profileSettingPage.changePassword', 'Change password')}
diff --git a/frontend/src/TooljetDatabase/styles/styles.scss b/frontend/src/TooljetDatabase/styles/styles.scss
index e091d8f0c9..f1bd32a891 100644
--- a/frontend/src/TooljetDatabase/styles/styles.scss
+++ b/frontend/src/TooljetDatabase/styles/styles.scss
@@ -59,19 +59,19 @@
 
   .toojet-db-table-footer {
     height: 52px;
-    background: var(--page-default) !important;
+    background: var(--page-weak) !important;
     width: calc(100vw - 336px);
   }
 
   .toojet-db-table-footer-collapse {
     height: 52px;
-    background: var(--page-default) !important;
+    background: var(--page-weak) !important;
     width: calc(100vw - 48px);
   }
 
   .toojet-db-table-footer-collapse {
     height: 52px;
-    background: var(--page-default) !important;
+    background: var(--page-weak) !important;
     width: calc(100vw - 48px);
   }
 
diff --git a/frontend/src/_components/PageSearchBox.jsx b/frontend/src/_components/PageSearchBox.jsx
new file mode 100644
index 0000000000..2713681480
--- /dev/null
+++ b/frontend/src/_components/PageSearchBox.jsx
@@ -0,0 +1,111 @@
+import React, { useState, useEffect, forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import useDebounce from '@/_hooks/useDebounce';
+import { useMounted } from '@/_hooks/use-mount';
+import SolidIcon from '@/_ui/Icon/SolidIcons';
+import './_styles/page-search-box.scss';
+
+export const SearchBox = forwardRef(
+  (
+    {
+      width = '200px',
+      onSubmit,
+      className,
+      debounceDelay = 300,
+      darkMode = false,
+      placeholder = 'Search',
+      customClass = '',
+      dataCy = '',
+      callBack,
+      onClearCallback,
+      autoFocus = false,
+      showClearButton,
+      initialValue = '',
+      clearTextOnBlur = true,
+    },
+    ref
+  ) => {
+    const [searchText, setSearchText] = useState('');
+    const debouncedSearchTerm = useDebounce(searchText, debounceDelay);
+    const [isFocused, setFocussed] = useState(false);
+
+    const handleChange = (e) => {
+      setSearchText(e.target.value);
+      callBack?.(e);
+    };
+
+    const clearSearchText = () => {
+      setSearchText('');
+      onClearCallback?.();
+    };
+
+    const handleClickOutside = (event) => {
+      if (ref?.current && !ref.current.contains(event.target) && clearTextOnBlur) {
+        clearSearchText();
+        // Your function to be triggered
+      }
+    };
+
+    const mounted = useMounted();
+
+    useEffect(() => {
+      document.addEventListener('mousedown', handleClickOutside);
+      if (mounted) {
+        onSubmit?.(debouncedSearchTerm);
+      }
+      return () => {
+        // Cleanup event listener on component unmount
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [debouncedSearchTerm, onSubmit]);
+
+    useEffect(() => {
+      initialValue !== undefined && setSearchText(initialValue);
+    }, [initialValue]);
+
+    return (
+      <div className={`ghost-search-box-wrapper ${customClass}`}>
+        <div className="input-icon">
+          {!isFocused && (
+            <span className="input-icon-addon">
+              <SolidIcon name="search" width="14" />
+            </span>
+          )}
+          <input
+            style={{ width }}
+            type="text"
+            value={searchText}
+            onChange={handleChange}
+            className={cx('form-control ghost-search', {
+              'dark-theme-placeholder': darkMode,
+              [className]: !!className,
+            })}
+            placeholder={placeholder}
+            onFocus={() => setFocussed(true)}
+            onBlur={() => setFocussed(false)}
+            data-cy={`${dataCy}-search-bar`}
+            autoFocus={autoFocus}
+            ref={ref}
+          />
+          {searchText.length >= 0 ? (
+            <span className="input-icon-addon end" onMouseDown={clearSearchText}>
+              <div className="d-flex tj-common-search-input-clear-icon" title="clear">
+                <SolidIcon name="remove" />
+              </div>
+            </span>
+          ) : (
+            ''
+          )}
+        </div>
+      </div>
+    );
+  }
+);
+
+SearchBox.propTypes = {
+  onSubmit: PropTypes.func.isRequired,
+  debounceDelay: PropTypes.number,
+  width: PropTypes.string,
+};
diff --git a/frontend/src/_components/SearchBox.jsx b/frontend/src/_components/SearchBox.jsx
index 99d5c93aa3..58afc173de 100644
--- a/frontend/src/_components/SearchBox.jsx
+++ b/frontend/src/_components/SearchBox.jsx
@@ -66,7 +66,7 @@ export const SearchBox = forwardRef(
     }, [initialValue]);
 
     return (
-      <div className={`ghost-search-box-wrapper ${customClass}`}>
+      <div className={`search-box-wrapper ${customClass}`}>
         <div className="input-icon">
           {!isFocused && (
             <span className="input-icon-addon">
@@ -78,7 +78,7 @@ export const SearchBox = forwardRef(
             type="text"
             value={searchText}
             onChange={handleChange}
-            className={cx('form-control ghost-search', {
+            className={cx('form-control', {
               'dark-theme-placeholder': darkMode,
               [className]: !!className,
             })}
diff --git a/frontend/src/_components/_styles/page-search-box.scss b/frontend/src/_components/_styles/page-search-box.scss
new file mode 100644
index 0000000000..f1be3e2be4
--- /dev/null
+++ b/frontend/src/_components/_styles/page-search-box.scss
@@ -0,0 +1,85 @@
+.ghost-search-box-wrapper {
+  .form-control.ghost-search {
+    background: none !important;
+    color: var(--slate12);
+    height: 48px;
+    border: none !important;
+    border-radius: 0 !important;
+    border-bottom: 1px solid var(--border-weak) !important;
+    transition: border-bottom 0.2s ease-in-out;
+
+    &:hover {
+      background: none !important;
+      border-bottom: 1px solid var(--border-accent-weak) !important;
+      color: var(--slate12);
+    }
+
+    &:focus {
+      background: none !important;
+      border: none !important;
+      border-bottom: 1px solid var(--border-accent-strong) !important;
+    }
+    
+  }
+  .input-icon {
+    .input-icon-addon {
+      padding-right: 6px;
+      display: flex;
+    }
+  }
+}
+
+
+/**
+ * Search Box
+ */
+ .ghost-search-box-wrapper {
+  input {
+    width: 200px;
+    border-radius: 5px !important;
+    color: var(--slate12);
+    background-color: var(--base);
+  }
+
+  .input-icon .form-control:not(:first-child),
+  .input-icon .form-select:not(:last-child) {
+    padding-left: 28px !important;
+  }
+
+  input:focus {
+    width: 200px;
+    background-color: var(--base);
+  }
+
+  .input-icon .input-icon-addon {
+    display: flex;
+  }
+
+  .input-icon .input-icon-addon.end {
+    pointer-events: auto;
+
+    .tj-common-search-input-clear-icon {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      padding: 4px;
+      width: 20px;
+      height: 20px;
+      background: var(--indigo3) !important;
+      border-radius: 4px;
+    }
+
+    div {
+      border-radius: 12px;
+      color: #ffffff;
+      padding: 1px;
+      cursor: pointer;
+
+      svg {
+        height: 14px;
+        width: 14px;
+      }
+    }
+  }
+}
diff --git a/frontend/src/_components/_styles/search-box.scss b/frontend/src/_components/_styles/search-box.scss
index f1be3e2be4..235490fa48 100644
--- a/frontend/src/_components/_styles/search-box.scss
+++ b/frontend/src/_components/_styles/search-box.scss
@@ -1,44 +1,9 @@
-.ghost-search-box-wrapper {
-  .form-control.ghost-search {
-    background: none !important;
-    color: var(--slate12);
-    height: 48px;
-    border: none !important;
-    border-radius: 0 !important;
-    border-bottom: 1px solid var(--border-weak) !important;
-    transition: border-bottom 0.2s ease-in-out;
-
-    &:hover {
-      background: none !important;
-      border-bottom: 1px solid var(--border-accent-weak) !important;
-      color: var(--slate12);
-    }
-
-    &:focus {
-      background: none !important;
-      border: none !important;
-      border-bottom: 1px solid var(--border-accent-strong) !important;
-    }
-    
-  }
-  .input-icon {
-    .input-icon-addon {
-      padding-right: 6px;
-      display: flex;
-    }
-  }
-}
-
-
-/**
- * Search Box
- */
- .ghost-search-box-wrapper {
+.search-box-wrapper {
   input {
     width: 200px;
     border-radius: 5px !important;
-    color: var(--slate12);
-    background-color: var(--base);
+    color: var(--text-primary);
+    background-color: var(--surfaces-surface-01);
   }
 
   .input-icon .form-control:not(:first-child),
@@ -48,7 +13,7 @@
 
   input:focus {
     width: 200px;
-    background-color: var(--base);
+    background-color: var(--surfaces-surface-02);
   }
 
   .input-icon .input-icon-addon {
@@ -83,3 +48,17 @@
     }
   }
 }
+
+.searchbox-wrapper {
+  margin-top: 0 !important;
+
+  .search-icon {
+    margin: 0.30rem
+  }
+
+  input {
+    border-radius: 8px !important;
+    padding-left: 1.75rem !important;
+    border-radius: 8px !important;
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/_styles/license.scss b/frontend/src/_styles/license.scss
index e058dab5e7..0976a52706 100644
--- a/frontend/src/_styles/license.scss
+++ b/frontend/src/_styles/license.scss
@@ -8,14 +8,14 @@
         border-radius: 6px;
 
         .body-wrapper {
-            border: 1px solid var(--slate5);
             min-height: 620px;
+            border: 1px solid var(--border-weak);
         }
 
         .license-page-sidebar {
             max-width: 220px;
-            background-color: var(--base);
-            border-right: 1px solid var(--slate5) !important;
+            background-color: var(--surfaces-surface-01);
+            border-right: 1px solid var(--border-weak) !important;
             display: grid !important;
             grid-template-rows: auto 1fr auto !important;
 
@@ -29,7 +29,7 @@
         }
 
         .license-content-wrapper {
-            background-color: var(--base);
+            background-color: var(--surfaces-surface-01);
 
             .groups-sub-header-wrap {
                 width: 100%;
@@ -253,11 +253,10 @@
             .license-header-wrap {
                 display: flex;
                 justify-content: space-between;
-                padding-right: 40px;
-                padding-left: 20px;
+                padding: 24px 40px 16px;
                 align-items: center;
                 height: unset !important;
-                background-color: var(--base);
+                background-color: var(--surfaces-surface-01);
 
                 .status-container {
                     border-radius: 20px;
@@ -796,7 +795,7 @@
 }
 
 .license-error-modal {
-    background-color: var(--base);
+    background-color: var(--surfaces-surface-01);
 
     .modal-header {
         background-color: var(--slate3) !important;
diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss
index c56c2e4de9..7454e511dd 100644
--- a/frontend/src/_styles/theme.scss
+++ b/frontend/src/_styles/theme.scss
@@ -3669,7 +3669,7 @@ input:focus-visible {
   position: relative;
   min-height: 100%;
   min-width: 100%;
-  background-color: #2b394b;
+  background-color: var(--page-weak);
 }
 
 .jet-table {
@@ -4679,7 +4679,7 @@ input[type="text"] {
  * Folder List
  */
 .folder-list {
-  overflow-y: scroll;
+  overflow-y: auto;
   scrollbar-width: thin;
   scrollbar-color: #888 transparent;
 
@@ -8901,7 +8901,7 @@ tbody {
 
 .home-page-content {
   background-color: var(--page-weak);
-  height: calc(100vh - 64px) !important;
+  height: calc(100vh - 48px) !important;
   overflow-y: auto;
   position: relative;
 
@@ -12515,7 +12515,7 @@ tbody {
 }
 
 .profile-page-card {
-  background-color: var(--page-weak);
+  background-color: var(--surfaces-surface-01);
   border-radius: 6px;
 }
 
@@ -13018,16 +13018,14 @@ tbody {
 .instance-settings-page {
   width: 880px;
   margin: 0 auto;
-  background: var(--base);
+  background: var(--surfaces-surface-01);
 
   .page-wrapper {
     margin-bottom: 50px !important;
   }
 
   .card {
-    background: var(--base);
-    border: 1px solid var(--slate7) !important;
-    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05) !important;
+    background: var(--surfaces-surface-01);
     width: 880px;
 
     .card-header {
@@ -13059,8 +13057,8 @@ tbody {
       align-items: center;
       padding: 24px 32px;
       gap: 8px;
-      border-top: 1px solid var(--slate5) !important;
-      background: var(--base);
+      border-top: 1px solid var(--border-weak) !important;
+      background: var(--surfaces-surface-01);
       margin-top: 0px !important;
       align-Self: 'stretch';
       height: 88px;
@@ -13184,7 +13182,7 @@ tbody {
 }
 
 .audit-log {
-  background-color: var(--slate2);
+  background-color: var(--page-weak);
   width: unset;
 
   .tj-ms {
diff --git a/frontend/src/modules/WorkspaceSettings/components/ManageOrgConstantsSettings/ConstantFormStyle.scss b/frontend/src/modules/WorkspaceSettings/components/ManageOrgConstantsSettings/ConstantFormStyle.scss
index b3d34fca61..7d848030d5 100644
--- a/frontend/src/modules/WorkspaceSettings/components/ManageOrgConstantsSettings/ConstantFormStyle.scss
+++ b/frontend/src/modules/WorkspaceSettings/components/ManageOrgConstantsSettings/ConstantFormStyle.scss
@@ -256,17 +256,11 @@
   color: #adb5bd;
 }
 
-/* Dark Theme Styles */
-.dark-theme .constant-wrapper,
-.theme-dark .constant-wrapper {
-  background-color: var(--slate2);
-}
 
 .dark-theme .constant-page-wrapper,
 .theme-dark .constant-page-wrapper {
-  background-color: var(--base);
-  border: 1px solid #6c757d;
-  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
+  background-color: var(--page-weak);
+  border: 1px solid var(--border-weak);
 }
 
 .dark-theme .workspace-constant-header .tj-text-sm,
diff --git a/frontend/src/modules/common/components/UsersTable/UsersTable.jsx b/frontend/src/modules/common/components/UsersTable/UsersTable.jsx
index bec365f214..c2b62efb65 100644
--- a/frontend/src/modules/common/components/UsersTable/UsersTable.jsx
+++ b/frontend/src/modules/common/components/UsersTable/UsersTable.jsx
@@ -106,7 +106,7 @@ const UsersTable = ({
                     {translator('header.organization.menus.manageUsers.workspaces', 'Workspaces')}
                   </th>
                 )}
-                <th className="w-1 tw-w-16 tw-max-w-16 tw-min-w-16"></th>
+                <th className="w-1 !tw-w-16 !tw-max-w-16 !tw-min-w-16"></th>
               </tr>
             </thead>
             {isLoading ? (
@@ -159,7 +159,7 @@ const UsersTable = ({
                         </td>
                       )}
                       {isLoadingAllUsers && (
-                        <td className="text-muted">
+                        <td className="text-muted !tw-w-[230px] tw-max-w-[230px]">
                           <span
                             className="text-muted user-type"
                             data-cy={`${user.name.toLowerCase().replace(/\s+/g, '-')}-user-type`}
@@ -174,7 +174,7 @@ const UsersTable = ({
                       {!isLoadingAllUsers && <GroupChipTD groups={user.groups.map((group) => group.name)} />}
                       {user.status && (
                         <td
-                          className="text-muted"
+                          className="text-muted !tw-w-[230px] tw-max-w-[230px]"
                           data-name={wsSettings ? 'status-header' : ''}
                           style={{ marginRight: wsSettings ? '6px' : '0px' }}
                         >
@@ -221,7 +221,7 @@ const UsersTable = ({
                         </td>
                       )}
                       {isLoadingAllUsers && (
-                        <td className="text-muted">
+                        <td className="text-muted !tw-w-[230px] tw-max-w-[230px]">
                           <a
                             className="px-2 text-muted workspaces"
                             onClick={

From dd42ec39cbe44a9209baa59e6b0bfaaf033e8de1 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Sun, 22 Jun 2025 23:19:41 +0530
Subject: [PATCH 06/16] Design review fixes

---
 frontend/src/_styles/dropdown-custom.scss            |  2 +-
 frontend/src/_styles/instancelogout.scss             |  8 +++-----
 frontend/src/_styles/license.scss                    |  3 ++-
 frontend/src/_styles/theme.scss                      | 12 ++++++++++--
 .../BaseSSOConfigurationList/Configuration.scss      |  5 +----
 5 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/frontend/src/_styles/dropdown-custom.scss b/frontend/src/_styles/dropdown-custom.scss
index 601107a018..60009f731c 100644
--- a/frontend/src/_styles/dropdown-custom.scss
+++ b/frontend/src/_styles/dropdown-custom.scss
@@ -57,7 +57,7 @@
         width: 262px;
         height: 32px;
         border: none !important;
-        background-color: var(--page-default) !important;
+        background-color: var(--page-weak) !important;
 
         &:hover {
             background: var(--slate2) !important;
diff --git a/frontend/src/_styles/instancelogout.scss b/frontend/src/_styles/instancelogout.scss
index 5205472426..2e83aa64de 100644
--- a/frontend/src/_styles/instancelogout.scss
+++ b/frontend/src/_styles/instancelogout.scss
@@ -1,16 +1,14 @@
 .instance-logout-wrapper{
-    background: var(--base);
+    background: var(--page-weak);
     .instance-logout-header{
       padding: 24px 24px;
       gap: 12px;
       height: 72px;
       border-top-left-radius: 6px;
       border-top-right-radius: 6px;
-      border-bottom: 1px solid rgb(230, 232, 235);  /* Light gray border */
+      border-bottom: 1px solid var(--border-weak);
       padding-bottom: 1rem;
-      &.dark-mode {
-        border-bottom: 1px solid rgb(43, 47, 49) !important;
-      }
+
       .instance-logout-title{
         font-size: 18px;
         line-height: 28px;
diff --git a/frontend/src/_styles/license.scss b/frontend/src/_styles/license.scss
index 0976a52706..b3f183a951 100644
--- a/frontend/src/_styles/license.scss
+++ b/frontend/src/_styles/license.scss
@@ -6,10 +6,11 @@
         width: 880px;
         margin: auto;
         border-radius: 6px;
+        border: 1px solid var(--border-weak);
 
         .body-wrapper {
+            height: 100%;
             min-height: 620px;
-            border: 1px solid var(--border-weak);
         }
 
         .license-page-sidebar {
diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss
index 7454e511dd..d4d5313880 100644
--- a/frontend/src/_styles/theme.scss
+++ b/frontend/src/_styles/theme.scss
@@ -5586,8 +5586,6 @@ div#driver-page-overlay {
   background: var(--surfaces-surface-01);
 
   .card {
-    background: var(--base);
-    border: 1px solid var(--border-weak) !important;
     width: 880px;
 
     .card-header {
@@ -8587,6 +8585,11 @@ tbody {
       margin-left: 15px;
     }
   }
+
+  &[data-name="Audit logs"] {
+    flex: 1 0 0%;
+    max-width: unset;
+  }
 }
 
 .layout-sidebar-icon {
@@ -16280,6 +16283,11 @@ fieldset:disabled {
   header {
     display: flex;
     gap: 12px;
+    padding: 16px 24px;
+    border-radius: 8px;
+    background: var(--bg-surface-layer-01);
+    box-shadow: var(--elevation-000-box-shadow);
+    border: 1px solid var(--border-weak);
 
     .left {
       border-radius: 24px;
diff --git a/frontend/src/modules/WorkspaceSettings/components/BaseSSOConfigurationList/Configuration.scss b/frontend/src/modules/WorkspaceSettings/components/BaseSSOConfigurationList/Configuration.scss
index a194759aad..c97ff5289d 100644
--- a/frontend/src/modules/WorkspaceSettings/components/BaseSSOConfigurationList/Configuration.scss
+++ b/frontend/src/modules/WorkspaceSettings/components/BaseSSOConfigurationList/Configuration.scss
@@ -236,12 +236,9 @@ input:checked+.slider:before {
 .workspace-settings-page {
   width: 880px;
   margin: 0 auto;
-  background: var(--base);
+  background: var(--page-weak);
 
   .card {
-    background: var(--base);
-    border: 1px solid var(--slate7) !important;
-    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05) !important;
     width: 880px;
 
     .card-header {

From 8e120af0464b07c3065ca88e91686ace5f80d734 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Mon, 30 Jun 2025 12:07:38 +0530
Subject: [PATCH 07/16] Design review fixes

---
 frontend/src/HomePage/Folders.jsx               | 6 ++----
 frontend/src/TooljetDatabase/styles/styles.scss | 2 +-
 frontend/src/_styles/designtheme.scss           | 4 ++--
 frontend/src/_styles/global-datasources.scss    | 4 ++--
 frontend/src/_styles/modules.scss               | 7 ++++---
 frontend/src/_styles/theme.scss                 | 2 +-
 frontend/src/_ui/FolderList/FolderList.scss     | 4 ++--
 7 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/frontend/src/HomePage/Folders.jsx b/frontend/src/HomePage/Folders.jsx
index 3a94991f4e..36ed849b27 100644
--- a/frontend/src/HomePage/Folders.jsx
+++ b/frontend/src/HomePage/Folders.jsx
@@ -287,8 +287,7 @@ export const Folders = function Folders({
             className={cx(
               `list-group-item border-0 list-group-item-action d-flex align-items-center all-apps-link tj-text-xsm`,
               {
-                'bg-light-indigo': _.isEmpty(activeFolder) && !darkMode,
-                'bg-dark-indigo': _.isEmpty(activeFolder) && darkMode,
+                'tw-bg-interactive-default': _.isEmpty(activeFolder),
               }
             )}
             style={{ height: '32px' }}
@@ -314,8 +313,7 @@ export const Folders = function Folders({
             className={cx(
               `folder-list-group-item rounded-2 list-group-item h-4 mb-1 list-group-item-action no-border d-flex align-items-center`,
               {
-                'bg-light-indigo': activeFolder.id === folder.id && !darkMode,
-                'bg-dark-indigo': activeFolder.id === folder.id && darkMode,
+                'tw-bg-interactive-default': activeFolder.id === folder.id,
               }
             )}
             onClick={() => {
diff --git a/frontend/src/TooljetDatabase/styles/styles.scss b/frontend/src/TooljetDatabase/styles/styles.scss
index f1bd32a891..680bc32f9f 100644
--- a/frontend/src/TooljetDatabase/styles/styles.scss
+++ b/frontend/src/TooljetDatabase/styles/styles.scss
@@ -36,7 +36,7 @@
 
     .sidebar-container {
       height: 40px !important;
-      margin: 24px auto 0;
+      margin: 12px auto 0;
       display: flex;
       justify-content: center;
     }
diff --git a/frontend/src/_styles/designtheme.scss b/frontend/src/_styles/designtheme.scss
index bfdb6cee41..091fe42737 100644
--- a/frontend/src/_styles/designtheme.scss
+++ b/frontend/src/_styles/designtheme.scss
@@ -120,7 +120,7 @@
     --interactive-overlays-column-resize: #1B1F244D;
 
     //interactive
-    --interactive-default: #CCD1D54D;
+    --interactive-default: #88909914;
     --interactive-hover: #ACB2B959;
 
 
@@ -211,7 +211,7 @@
     --interactive-overlays-column-resize: #FFFFFF80;
 
     //interactive
-    --interactive-default: #A1A7AE1F;
+    --interactive-default: #858C940D;
     --interactive-hover: #A1A7AE29;
 
 
diff --git a/frontend/src/_styles/global-datasources.scss b/frontend/src/_styles/global-datasources.scss
index 6c0d2e4059..97d9108c44 100644
--- a/frontend/src/_styles/global-datasources.scss
+++ b/frontend/src/_styles/global-datasources.scss
@@ -70,8 +70,8 @@
     }
 
     .datasources-list-item {
-        background-color: var(--indigo3);
-        color: var(--text-black-000);
+        background-color: var(--interactive-default);
+        color: var(--text-default);
     }
 }
 
diff --git a/frontend/src/_styles/modules.scss b/frontend/src/_styles/modules.scss
index 239cc3201c..b86e7043dd 100644
--- a/frontend/src/_styles/modules.scss
+++ b/frontend/src/_styles/modules.scss
@@ -1,6 +1,7 @@
-.apps-modules-tabs {
-    .nav-link {
-        background-color: var(--page-default);
+.apps-modules-tabs.nav-tabs {
+    .nav-link,
+    ul > li.nav-link.active {
+        background-color: var(--page-weak);
     }
 
     .nav-link.active {
diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss
index d4d5313880..69e9bf3e93 100644
--- a/frontend/src/_styles/theme.scss
+++ b/frontend/src/_styles/theme.scss
@@ -16483,7 +16483,7 @@ fieldset:disabled {
 section.ai-message-prompt-input-wrapper {
 
   border-radius: 6px;
-  // border: 1px solid var(--border-accent-strong, #4368E3);
+  border: 1px solid var(--border-weak, #E4E7EB);
   background: var(--background-surface-layer-01, #FFFFFF);
   margin-top: 12px;
   padding: 12px;
diff --git a/frontend/src/_ui/FolderList/FolderList.scss b/frontend/src/_ui/FolderList/FolderList.scss
index 921243f1b3..89ae9937fc 100644
--- a/frontend/src/_ui/FolderList/FolderList.scss
+++ b/frontend/src/_ui/FolderList/FolderList.scss
@@ -5,7 +5,7 @@
     line-height: 20px;
     display: flex;
     align-items: center;
-    color: var(--slate12);
+    color: var(--text-default);
     min-height: 32px;
     cursor: pointer;
     padding: 6px 8px;
@@ -71,5 +71,5 @@
 }
 
 .tj-list-item-selected {
-    background-color: var(--slate5);;
+    background-color: var(--interactive-default);
 }
\ No newline at end of file

From 4e50f819f774898fb5a7b79b969d49bcdca55808 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Wed, 2 Jul 2025 21:10:37 +0530
Subject: [PATCH 08/16] Removes unwanted files

---
 .../modules/common/components/BaseManageOrgConstants/style.scss   | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 frontend/src/modules/common/components/BaseManageOrgConstants/style.scss

diff --git a/frontend/src/modules/common/components/BaseManageOrgConstants/style.scss b/frontend/src/modules/common/components/BaseManageOrgConstants/style.scss
deleted file mode 100644
index e69de29bb2..0000000000

From b1622644ef35a5791131f728a7d85c7c49a8e753 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Thu, 3 Jul 2025 18:31:45 +0530
Subject: [PATCH 09/16] Matches design after release

---
 frontend/src/HomePage/Folders.jsx             |  30 +++--
 frontend/src/HomePage/HomePage.jsx            |   1 -
 frontend/src/HomePage/styles/homepage.scss    | 109 +++++++++++++++---
 .../src/TooljetDatabase/TableList/index.jsx   |  17 ++-
 frontend/src/_styles/theme.scss               |  76 +-----------
 frontend/src/_ui/Icon/solidIcons/Plus.jsx     |   2 +-
 frontend/src/_ui/Icon/solidIcons/Search.jsx   |   2 +-
 .../dataSources/components/List/index.jsx     |  14 ++-
 8 files changed, 144 insertions(+), 107 deletions(-)

diff --git a/frontend/src/HomePage/Folders.jsx b/frontend/src/HomePage/Folders.jsx
index 36ed849b27..4e4a735687 100644
--- a/frontend/src/HomePage/Folders.jsx
+++ b/frontend/src/HomePage/Folders.jsx
@@ -14,6 +14,8 @@ import _ from 'lodash';
 import { validateName, handleHttpErrorMessages, getWorkspaceId } from '@/_helpers/utils';
 import { useNavigate, useLocation } from 'react-router-dom';
 import FolderSkeleton from '@/_ui/FolderSkeleton/FolderSkeleton';
+import { Button } from '@/components/ui/Button/Button';
+
 export const Folders = function Folders({
   folders,
   foldersLoading,
@@ -246,24 +248,36 @@ export const Folders = function Folders({
             <div className="d-flex folder-header-icons-wrap">
               {canCreateFolder && (
                 <>
-                  <div
-                    className="folder-create-btn"
+                  <Button
+                    size="medium"
+                    variant="ghost"
+                    iconOnly
+                    ariaLabel="Create new folder"
                     onClick={() => {
                       setNewFolderName('');
                       setShowForm(true);
                     }}
                     data-cy="create-new-folder-button"
                   >
-                    <SolidIcon name="plus" width="14" fill={darkMode ? '#ECEDEE' : '#11181C'} />
-                  </div>
-                  <div
-                    className="folder-create-btn"
+                    <SolidIcon name="plus" width="14" fill={darkMode ? '#CFD3D8E6' : '#6A727C'} />
+                  </Button>
+                  <Button
+                    size="medium"
+                    variant="ghost"
+                    iconOnly
+                    ariaLabel="Search for folders"
                     onClick={() => {
                       setShowInput(true);
                     }}
+                    data-cy="create-new-folder-button"
                   >
-                    <SolidIcon name="search" width="14" fill={darkMode ? '#ECEDEE' : '#11181C'} />
-                  </div>
+                    <SolidIcon
+                      name="search"
+                      width="14"
+                      fill={darkMode ? '#CFD3D8E6' : '#6A727C'}
+                      className="tw-relative tw-top-[2px]"
+                    />
+                  </Button>
                 </>
               )}
             </div>
diff --git a/frontend/src/HomePage/HomePage.jsx b/frontend/src/HomePage/HomePage.jsx
index 88f7e0e586..dd94ff33a9 100644
--- a/frontend/src/HomePage/HomePage.jsx
+++ b/frontend/src/HomePage/HomePage.jsx
@@ -49,7 +49,6 @@ import {
 import CreateAppWithPrompt from '@/modules/AiBuilder/components/CreateAppWithPrompt';
 import SolidIcon from '@/_ui/Icon/SolidIcons';
 import EmptyModuleSvg from '../../assets/images/icons/empty-modules.svg';
-import './styles/homepage.scss';
 
 const { iconList, defaultIcon } = configs;
 
diff --git a/frontend/src/HomePage/styles/homepage.scss b/frontend/src/HomePage/styles/homepage.scss
index 3e116bdcc8..ab37fb12f8 100644
--- a/frontend/src/HomePage/styles/homepage.scss
+++ b/frontend/src/HomePage/styles/homepage.scss
@@ -17,6 +17,8 @@
 }
 .homepage-app-card-list-item-wrap {
   column-gap: 24px;
+  row-gap: 24px;
+  flex-wrap: wrap;
   display: flex;
 }
 
@@ -116,7 +118,6 @@
       // display: none;
     }
 
-
     .appcard-buttons-wrap {
       display: flex;
       visibility: visible;
@@ -134,7 +135,6 @@
           text-decoration: none;
         }
       }
-
     }
 
     .app-icon-main {
@@ -144,23 +144,83 @@
   }
 }
 
-@media only screen and (max-width: 992px) {
-  .homepage-app-card-list-item-wrap {
-    display: flex;
-    justify-content: center;
-    width: 100%;
-    gap: 24px;
-  }
+.home-page-content-container {
+  max-width: 880px;
 
+  @media only screen and (max-width: 768px) {
+    margin-bottom: 0rem !important;
+
+    .liner {
+      width: unset !important;
+    }
+
+    .app-list {
+      overflow-y: auto;
+      height: calc(100vh - 26rem);
+
+      .skeleton-container {
+        display: flex;
+        flex-direction: column;
+
+        .col {
+          display: flex;
+          justify-content: center;
+          margin-bottom: 1rem;
+        }
+
+        .card-skeleton-container {
+          width: 304px;
+        }
+      }
+    }
+
+    .menu-ico {
+      display: none !important;
+    }
+  }
+}
+
+@media only screen and (min-width: 1728px) {
   .homepage-app-card-list-item {
-    max-width: 304px !important;
-    flex-basis: 100%;
+    // max-width: 304px;
+    max-width: calc(33.3% - 16px);
 
     .edit-button,
     .launch-button {
       width: 129px !important;
     }
   }
+
+  .home-page-content-container {
+    max-width: 976px;
+  }
+
+  .liner {
+    width: 976px;
+  }
+}
+
+@media only screen and (min-width: 1584px) and (max-width: 1727px) {
+  .homepage-app-card-list-item {
+    max-width: calc(33.3% - 16px);
+  }
+
+  .edit-button,
+  .launch-button {
+    width: 113px !important;
+  }
+}
+
+@media only screen and (min-width: 1312px) and (max-width: 1583px) {
+  .homepage-app-card-list-item {
+    // max-width: 264px;
+    max-width: calc(33.3% - 16px);
+
+    .edit-button,
+    .launch-button {
+      width: 109px !important;
+    }
+  }
 }
 
 @media only screen and (min-width: 993px) and (max-width: 1311px) {
@@ -173,8 +233,11 @@
   }
 
   .homepage-app-card-list-item {
-    max-width: 269px;
-    flex-basis: 100%;
+    // max-width: 269px;
+    max-width: calc(50% - 12px);
+    flex-basis: 50%;
+    flex-grow: 1;
+    flex-shrink: 0;
 
     .edit-button,
     .launch-button {
@@ -186,3 +249,23 @@
     width: 568px;
   }
 }
+
+@media only screen and (max-width: 992px) {
+  .homepage-app-card-list-item-wrap {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    gap: 24px;
+  }
+
+  .homepage-app-card-list-item {
+    // max-width: 304px !important;
+    max-width: calc(50% - 12px);
+    flex-basis: 100%;
+
+    .edit-button,
+    .launch-button {
+      width: 129px !important;
+    }
+  }
+}
diff --git a/frontend/src/TooljetDatabase/TableList/index.jsx b/frontend/src/TooljetDatabase/TableList/index.jsx
index 61afc607c3..6686ffb989 100644
--- a/frontend/src/TooljetDatabase/TableList/index.jsx
+++ b/frontend/src/TooljetDatabase/TableList/index.jsx
@@ -8,6 +8,7 @@ import { ListItem } from '../TableListItem';
 import { BreadCrumbContext } from '../../App/App';
 import Search from '../Search';
 import SolidIcon from '@/_ui/Icon/SolidIcons';
+import { Button } from '@/components/ui/Button/Button';
 
 const List = () => {
   const {
@@ -83,15 +84,23 @@ const List = () => {
           <>
             <span>All tables ({filteredTables.length})</span>
 
-            <div
-              className="folder-create-btn search-icon-wrap"
+            <Button
+              size="medium"
+              variant="ghost"
+              iconOnly
+              ariaLabel="Search for folders"
               onClick={() => {
                 setShowInput(true);
               }}
               data-cy="create-new-folder-button"
             >
-              <SolidIcon name="search" width="14" fill={darkMode ? '#ECEDEE' : '#11181C'} />
-            </div>
+              <SolidIcon
+                name="search"
+                width="14"
+                fill={darkMode ? '#CFD3D8E6' : '#6A727C'}
+                className="tw-relative tw-top-[2px]"
+              />
+            </Button>
           </>
         ) : (
           <Search
diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss
index 69e9bf3e93..af93a9b25e 100644
--- a/frontend/src/_styles/theme.scss
+++ b/frontend/src/_styles/theme.scss
@@ -21,6 +21,7 @@
 @import './pages-sidebar.scss';
 @import './modules.scss';
 @import "./rocket/card.scss";
+@import "../HomePage/styles/homepage.scss";
 
 /* ibm-plex-sans-100 - latin */
 @font-face {
@@ -12586,80 +12587,6 @@ tbody {
   }
 }
 
-.home-page-content-container {
-  max-width: 880px;
-
-  @media only screen and (max-width: 768px) {
-    margin-bottom: 0rem !important;
-
-    .liner {
-      width: unset !important;
-    }
-
-    .app-list {
-      overflow-y: auto;
-      height: calc(100vh - 26rem);
-
-      .skeleton-container {
-        display: flex;
-        flex-direction: column;
-
-        .col {
-          display: flex;
-          justify-content: center;
-          margin-bottom: 1rem;
-        }
-
-        .card-skeleton-container {
-          width: 304px;
-        }
-      }
-    }
-
-    .menu-ico {
-      display: none !important;
-    }
-  }
-}
-
-@media only screen and (min-width: 1584px) and (max-width: 1727px) {
-
-  .edit-button,
-  .launch-button {
-    width: 113px !important;
-  }
-}
-
-@media only screen and (max-width: 1583px) and (min-width: 1312px) {
-  .homepage-app-card-list-item {
-    max-width: 264px;
-
-    .edit-button,
-    .launch-button {
-      width: 109px !important;
-    }
-  }
-}
-
-@media only screen and (min-width: 1728px) {
-  .homepage-app-card-list-item {
-    max-width: 304px;
-
-    .edit-button,
-    .launch-button {
-      width: 129px !important;
-    }
-  }
-
-  .home-page-content-container {
-    max-width: 976px;
-  }
-
-  .liner {
-    width: 976px;
-  }
-}
-
 .tj-docs-link {
   color: var(--indigo9) !important;
   text-decoration: none;
@@ -16445,6 +16372,7 @@ fieldset:disabled {
     .right {
       display: flex;
       gap: 8px;
+      flex-wrap: wrap;
 
       button {
         border: none;
diff --git a/frontend/src/_ui/Icon/solidIcons/Plus.jsx b/frontend/src/_ui/Icon/solidIcons/Plus.jsx
index 1af087cdeb..7f7b601dad 100644
--- a/frontend/src/_ui/Icon/solidIcons/Plus.jsx
+++ b/frontend/src/_ui/Icon/solidIcons/Plus.jsx
@@ -5,7 +5,7 @@ const Plus = ({ fill = '#C1C8CD', width = '25', className = '', viewBox = '0 0 2
     width={width}
     height={width}
     viewBox={viewBox}
-    fill="none"
+    fill={fill}
     xmlns="http://www.w3.org/2000/svg"
     className={className}
     data-cy={dataCy}
diff --git a/frontend/src/_ui/Icon/solidIcons/Search.jsx b/frontend/src/_ui/Icon/solidIcons/Search.jsx
index 9fae3533ee..c7045732cb 100644
--- a/frontend/src/_ui/Icon/solidIcons/Search.jsx
+++ b/frontend/src/_ui/Icon/solidIcons/Search.jsx
@@ -5,7 +5,7 @@ const Search = ({ fill = '#C1C8CD', width = '24', className = '', viewBox = '0 0
     width={width}
     height={width}
     viewBox={viewBox}
-    fill="none"
+    fill={fill}
     xmlns="http://www.w3.org/2000/svg"
     className={className}
     style={style}
diff --git a/frontend/src/modules/dataSources/components/List/index.jsx b/frontend/src/modules/dataSources/components/List/index.jsx
index 3ceb1864dc..25f46fd226 100644
--- a/frontend/src/modules/dataSources/components/List/index.jsx
+++ b/frontend/src/modules/dataSources/components/List/index.jsx
@@ -10,6 +10,7 @@ import { SearchBox } from '@/_components/SearchBox';
 import { DATA_SOURCE_TYPE } from '@/_helpers/constants';
 import FolderSkeleton from '@/_ui/FolderSkeleton/FolderSkeleton';
 import Modal from '@/HomePage/Modal';
+import { Button } from '@/components/ui/Button/Button';
 
 export const List = ({ updateSelectedDatasource }) => {
   const {
@@ -141,15 +142,18 @@ export const List = ({ updateSelectedDatasource }) => {
                       Data sources added{' '}
                       {!isLoading && filteredData && filteredData.length > 0 && `(${filteredData.length})`}
                     </div>
-                    <div
-                      className="datasources-search-btn"
+                    <Button
+                      size="medium"
+                      variant="ghost"
+                      iconOnly
+                      ariaLabel="Search for folders"
                       onClick={() => {
                         setShowInput(true);
                       }}
-                      data-cy="added-ds-search-icon"
+                      data-cy="create-new-folder-button"
                     >
-                      <SolidIcon name="search" width="14" fill={darkMode ? '#ECEDEE' : '#11181C'} />
-                    </div>
+                      <SolidIcon name="search" width="14" fill={darkMode ? '#CFD3D8E6' : '#6A727C'} />
+                    </Button>
                   </>
                 ) : (
                   <SearchBox

From 9fc5bb626880bd6194f357b8d91e507378a95c34 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Fri, 4 Jul 2025 10:58:56 +0530
Subject: [PATCH 10/16] Review fixes related to banners

---
 frontend/src/HomePage/styles/homepage.scss | 24 ++++++++++++++++++++++
 frontend/src/_styles/license.scss          |  6 +++---
 frontend/src/_styles/theme.scss            | 22 --------------------
 3 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/frontend/src/HomePage/styles/homepage.scss b/frontend/src/HomePage/styles/homepage.scss
index ab37fb12f8..5f94c9668f 100644
--- a/frontend/src/HomePage/styles/homepage.scss
+++ b/frontend/src/HomePage/styles/homepage.scss
@@ -180,6 +180,30 @@
   }
 }
 
+
+.home-page-footer {
+  height: 52px;
+  background-color: var(--page-weak) !important;
+  border-top: 1px solid var(--border-weak) !important;
+  width: calc(100% - 336px) !important;
+
+  @media only screen and (max-width: 768px) {
+    position: unset;
+    width: 100%;
+
+    .col-4,
+    .col-5 {
+      display: none;
+    }
+
+    .pagination-container {
+      display: flex !important;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+
 @media only screen and (min-width: 1728px) {
   .homepage-app-card-list-item {
     // max-width: 304px;
diff --git a/frontend/src/_styles/license.scss b/frontend/src/_styles/license.scss
index b3f183a951..6b51cc1d77 100644
--- a/frontend/src/_styles/license.scss
+++ b/frontend/src/_styles/license.scss
@@ -599,9 +599,9 @@
     align-items: center;
     align-self: stretch;
     border-radius: 8px;
-    background-color: #FFFFFF;
-    border: 1px solid var(--upgrade-weak, #FFAF4140);
-    box-shadow: 0px 0px 1px 0px var(--dropshadow-100700-layer-1, rgba(48, 50, 51, 0.05)), 0px 1px 1px 0px var(--dropshadow-100400-layer-2, rgba(48, 50, 51, 0.10));
+    background-color: var(--page-weak);
+    border: 1px solid var(--border-weak, #FFAF4140);
+    box-shadow: var(--elevation-200-box-shadow);
 
     .license-loader {
         justify-content: center;
diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss
index af93a9b25e..04e49dfe4d 100644
--- a/frontend/src/_styles/theme.scss
+++ b/frontend/src/_styles/theme.scss
@@ -8710,28 +8710,6 @@ tbody {
   bottom: 0px;
 }
 
-.home-page-footer {
-  height: 52px;
-  background-color: var(--page-default) !important;
-  border-top: 1px solid var(--slate5) !important;
-  width: calc(100% - 336px) !important;
-
-  @media only screen and (max-width: 768px) {
-    position: unset;
-    width: 100%;
-
-    .col-4,
-    .col-5 {
-      display: none;
-    }
-
-    .pagination-container {
-      display: flex !important;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-}
 
 .pagination-container {
   display: flex;

From d7e17249e6b7f8934252a1e3d7b0db8ba1fec3df Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Fri, 4 Jul 2025 19:21:34 +0530
Subject: [PATCH 11/16] REview fixes

---
 frontend/src/App/App.jsx                      |  35 +++-
 .../src/TooljetDatabase/Forms/TableSchema.jsx |   6 +
 .../src/TooljetDatabase/Forms/styles.scss     |   2 +-
 .../_components/NotificationCenter/index.jsx  |   2 +-
 .../src/_components/_styles/search-box.scss   |   3 +-
 frontend/src/_styles/drawer.scss              |   7 +-
 frontend/src/_styles/dropdown-custom.scss     | 189 ++++++++++--------
 .../_styles/editor/react-select-search.scss   |   6 +-
 frontend/src/_styles/theme.scss               |  47 ++---
 .../src/_ui/Icon/solidIcons/AppLimitSvg.jsx   |  12 +-
 .../BaseSSOConfigurationList.jsx              |  11 +-
 .../Configuration.scss                        |   8 +-
 12 files changed, 186 insertions(+), 142 deletions(-)

diff --git a/frontend/src/App/App.jsx b/frontend/src/App/App.jsx
index d3cda91e3f..a47eed96be 100644
--- a/frontend/src/App/App.jsx
+++ b/frontend/src/App/App.jsx
@@ -112,6 +112,7 @@ class AppComponent extends React.Component {
     const featureAccess = await licenseService.getFeatureAccess();
     const isBasicPlan = !featureAccess?.licenseStatus?.isLicenseValid || featureAccess?.licenseStatus?.isExpired;
     this.setState({ showBanner: isBasicPlan });
+    this.updateColorScheme();
   }
   // check if its getting routed from editor
   checkPreviousRoute = (route) => {
@@ -121,7 +122,7 @@ class AppComponent extends React.Component {
     return false;
   };
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps, prevState) {
     // Check if the current location is the dashboard (homepage)
     if (
       this.props.location.pathname === `/${getWorkspaceIdOrSlugFromURL()}` &&
@@ -134,18 +135,24 @@ class AppComponent extends React.Component {
     }
     // Update margin when showBanner changes
     this.updateMargin();
+    // Update color scheme if darkMode changed
+    if (prevState.darkMode !== this.state.darkMode) {
+      this.updateColorScheme();
+    }
   }
 
   switchDarkMode = (newMode) => {
     this.setState({ darkMode: newMode });
     this.props.updateIsTJDarkMode(newMode);
     localStorage.setItem('darkMode', newMode);
+    this.updateColorScheme(newMode);
   };
   isEditorOrViewerFromPath = () => {
     const pathname = this.props.location.pathname;
     if (pathname.includes('/apps/')) {
       return 'editor';
-    } else if (pathname.includes('/applications/') || pathname.includes('/embed-apps/')) {
+    }
+    if (pathname.includes('/applications/') || pathname.includes('/embed-apps/')) {
       return 'viewer';
     }
     return '';
@@ -156,6 +163,14 @@ class AppComponent extends React.Component {
   isExistingPlanUser = (date) => {
     return new Date(date) < new Date('2025-04-24'); //show banner if user created before 2 april (24 for testing)
   };
+  updateColorScheme = (darkModeValue) => {
+    const isDark = darkModeValue !== undefined ? darkModeValue : this.state.darkMode;
+    if (isDark) {
+      document.documentElement.style.setProperty('color-scheme', 'dark');
+    } else {
+      document.documentElement.style.removeProperty('color-scheme');
+    }
+  };
   render() {
     const { updateAvailable, darkMode, isEditorOrViewer, showBanner } = this.state;
     const mergedProps = {
@@ -289,17 +304,19 @@ class AppComponent extends React.Component {
                     }
                   />
                 )}
-                <Route
-                  path="/:workspaceId/workspace-settings/*"
-                  element={<WorkspaceSettings {...mergedProps} />}
-                ></Route>
+                <Route path="/:workspaceId/workspace-settings/*" element={<WorkspaceSettings {...mergedProps} />} />
                 <Route
                   path="settings/*"
                   element={
                     <InstanceSettings switchDarkMode={this.switchDarkMode} darkMode={darkMode} {...this.props} />
                   }
-                ></Route>
-                <Route path="/:workspaceId/settings/*" element={<InstanceSettings {...this.props} darkMode={darkMode} switchDarkMode={this.switchDarkMode} />}></Route>
+                />
+                <Route
+                  path="/:workspaceId/settings/*"
+                  element={
+                    <InstanceSettings {...this.props} darkMode={darkMode} switchDarkMode={this.switchDarkMode} />
+                  }
+                />
                 <Route
                   exact
                   path="/:workspaceId/modules"
@@ -422,7 +439,7 @@ class AppComponent extends React.Component {
                 />
               </Routes>
             </BreadCrumbContext.Provider>
-            <div id="modal-div"></div>
+            <div id="modal-div" />
           </div>
 
           <Toast toastOptions={toastOptions} />
diff --git a/frontend/src/TooljetDatabase/Forms/TableSchema.jsx b/frontend/src/TooljetDatabase/Forms/TableSchema.jsx
index 9bee86278a..e6a2359739 100644
--- a/frontend/src/TooljetDatabase/Forms/TableSchema.jsx
+++ b/frontend/src/TooljetDatabase/Forms/TableSchema.jsx
@@ -368,6 +368,12 @@ function TableSchema({
                     isDisabled={
                       isEditMode && columnDetails[index]?.constraints_type?.is_primary_key === true ? true : false
                     }
+                    classNames={{
+                      control: (state) => cx({
+                        '!tw-border-border-default': true,
+                      }),
+                      
+                    }}
                   />
                 </div>
               </ToolTip>
diff --git a/frontend/src/TooljetDatabase/Forms/styles.scss b/frontend/src/TooljetDatabase/Forms/styles.scss
index 7bc6fe366c..233850ee4e 100644
--- a/frontend/src/TooljetDatabase/Forms/styles.scss
+++ b/frontend/src/TooljetDatabase/Forms/styles.scss
@@ -548,7 +548,7 @@
   }
 
   .empty-foreignkey-container {
-    border: 1px dashed #d7dbdf;
+    border: 1px dashed var(--border-default);
     height: 40px;
     width: 270px !important;
     border-radius: 100px !important;
diff --git a/frontend/src/_components/NotificationCenter/index.jsx b/frontend/src/_components/NotificationCenter/index.jsx
index 4f031857f5..f1fc1cbf8f 100644
--- a/frontend/src/_components/NotificationCenter/index.jsx
+++ b/frontend/src/_components/NotificationCenter/index.jsx
@@ -38,7 +38,7 @@ export const NotificationCenter = ({ darkMode }) => {
 
   const overlay = (
     <div
-      className={`notification-center dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card ${
+      className={`notification-center dropdown-menu dropdown-menu-arrow dropdown-menu-end !tw-rounded-lg dropdown-menu-card ${
         darkMode && 'dark-theme'
       }`}
       data-bs-popper="static"
diff --git a/frontend/src/_components/_styles/search-box.scss b/frontend/src/_components/_styles/search-box.scss
index 235490fa48..202f98b688 100644
--- a/frontend/src/_components/_styles/search-box.scss
+++ b/frontend/src/_components/_styles/search-box.scss
@@ -3,7 +3,8 @@
     width: 200px;
     border-radius: 5px !important;
     color: var(--text-primary);
-    background-color: var(--surfaces-surface-01);
+    background-color: var(--surfaces-surface-01) !important;
+    border: 1px solid var(--border-weak) !important;
   }
 
   .input-icon .form-control:not(:first-child),
diff --git a/frontend/src/_styles/drawer.scss b/frontend/src/_styles/drawer.scss
index 4b2f9b89d5..e9945e3572 100644
--- a/frontend/src/_styles/drawer.scss
+++ b/frontend/src/_styles/drawer.scss
@@ -3,15 +3,14 @@
 }
 
 .drawer {
-  background: var(--base);
+  background: var(--surfaces-surface-01);
   width: 540px;
   height: 100%;
   position: fixed;
-  border: 1px solid var(--slate5);
-  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+  border: 1px solid var(--border-weak);
+  box-shadow: var(--elevation-400-box-shadow);
   transition: transform var(--transition-speed) ease;
   z-index: 1000;
-  background: var(--base);
   overflow-y: auto;
 
   &.left {
diff --git a/frontend/src/_styles/dropdown-custom.scss b/frontend/src/_styles/dropdown-custom.scss
index 60009f731c..5c3f7136c8 100644
--- a/frontend/src/_styles/dropdown-custom.scss
+++ b/frontend/src/_styles/dropdown-custom.scss
@@ -1,80 +1,94 @@
 // for selects and dropdowns across app dashboard
 .react-select__control {
-    background-color: var(--base) !important;
-    border: 1px solid var(--slate7) !important;
+  background-color: var(--surfaces-surface-01) !important;
+  border: 1px solid var(--border-weak) !important;
 
-    &:active {
-        border: 1px solid var(--indigo9);
-    }
+  &:active {
+    border: 1px solid var(--indigo9);
+  }
 }
 
 .react-select__menu-portal {
-    z-index: 100 !important;
+  z-index: 100 !important;
 
-    .react-select__option {
-        color: var(--slate12);
-        z-index: 100;
-
-    }
+  .react-select__option {
+    color: var(--text-default);
+    height: 32px;
+    z-index: 100;
+    padding: 4px 8px;
+  }
 }
 
 .react-select__single-value {
-    color: var(--slate12) ;
+  color: var(--text-default);
 }
 
 .react-select__menu {
-    background-color: var(--base) !important;
-    border: 1px solid var(--slate3) !important;
-    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03) !important;
-    margin: 0px !important;
-    z-index: 100;
+  background-color: var(--surfaces-surface-01) !important;
+  border: 1px solid var(--border-weak) !important;
+  box-shadow: var(--elevation-00-box-shadow) !important;
+  margin: 0px !important;
+  z-index: 100;
 
-    .react-select__menu-list {
-        background-color: var(--base) !important;
-        overflow-y: auto;
+  .react-select__menu-list {
+    background-color: var(--surfaces-surface-01) !important;
+    padding: 4px;
+    overflow-y: auto;
 
-        .react-select__option {
-            background-color: var(--base) !important;
+    .react-select__option {
+      background-color: var(--surfaces-surface-01) !important;
+      border-radius: 6px;
 
-            &:hover {
-                background-color: var(--slate3) !important;
-            }
+
+      > div {
+        color: var(--text-default) !important;
+        background-color: transparent !important;
+      }
+
+      &:hover {
+        background-color: var(--interactive-hover) !important;
+        > div {
+            background-color: transparent !important;
         }
+      }
     }
+  }
 }
 
 .org-select-container {
-    height: 52px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-top: 1px solid var(--border-weak);
-    margin-bottom: var(--dynamic-margin, 0px); //please Remove after Basicplan banner is removed..
+  height: 52px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-top: 1px solid var(--border-weak);
+  margin-bottom: var(
+    --dynamic-margin,
+    0px
+  ); //please Remove after Basicplan banner is removed..
 }
 
 .tj-org-select {
-    .react-select__control {
-        width: 262px;
-        height: 32px;
-        border: none !important;
-        background-color: var(--page-weak) !important;
+  .react-select__control {
+    width: 262px;
+    height: 32px;
+    border: none !important;
+    background-color: var(--surfaces-surface-01) !important;
 
-        &:hover {
-            background: var(--slate2) !important;
-        }
-
-        &:active {
-            background: var(--slate3) !important;
-        }
+    &:hover {
+      background: var(--slate2) !important;
     }
 
-    .tj-text-xsm {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        width: 200px;
+    &:active {
+      background: var(--slate3) !important;
     }
+  }
 
+  .tj-text-xsm {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 200px;
+  }
 }
 
 .users-filter-dropdown,
@@ -85,59 +99,58 @@
 .select-order-field,
 .select-column-field,
 .records-dropdown-field {
-    .react-select__control {
-        border: 1px solid var(--slate7) !important;
-    }
+  .react-select__control {
+    border: 1px solid var(--border-default) !important;
+  }
 }
 
 .css-1ms6gku-MenuPortal,
 .css-169zxdi-MenuList {
-    .react-select__option {
-        border-radius: 6px;
-    }
+  .react-select__option {
+    border-radius: 6px;
+  }
 }
 
 .css-nw08ma-menu {
-    box-shadow: none !important;
+  box-shadow: none !important;
 }
 
 .react-select__menu-portal {
-    z-index: 9999 !important;
+  z-index: 9999 !important;
 }
 
 // following is the styles for table select column type menu list and options styles. If its same for all the select elements in the editor, then we can make it common and not specific for table select
-.table-select-custom-menu-list{
-    .react-select__menu-list{
-        padding: 2px;
-        // this is needed otherwise :active state doesn't look nice, gap is required
-        display: flex;
-        flex-direction: column;
-        gap: 4px !important;
-        background-color: var(--base) !important;
-        overflow-y: auto;
+.table-select-custom-menu-list {
+  .react-select__menu-list {
+    padding: 2px;
+    // this is needed otherwise :active state doesn't look nice, gap is required
+    display: flex;
+    flex-direction: column;
+    gap: 4px !important;
+    background-color: var(--surfaces-surface-01) !important;
+    overflow-y: auto;
+  }
+  .react-select__option {
+    display: flex;
+    justify-content: space-between;
+    padding: 8px 12px;
+    align-self: stretch;
+    align-items: center;
+    color: var(--slate12) !important;
+    border-radius: 6px;
+    /* Paragraph/Extrasmall/Regular */
+    font-family: "IBM Plex Sans";
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px; /* 166.667% */
+    &.react-select__option--is-selected {
+      color: var(--indigo9) !important;
     }
-    .react-select__option{
-        display: flex;
-        justify-content: space-between;
-        padding: 8px 12px;
-        align-self: stretch;
-        align-items: center;
-        color: var(--slate12) !important;
-        border-radius: 6px;
-        /* Paragraph/Extrasmall/Regular */
-        font-family: 'IBM Plex Sans';
-        font-size: 12px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: 20px; /* 166.667% */
-        &.react-select__option--is-selected{
-            color: var(--indigo9) !important;
-        }
-        &:active{
-            background: var(--base) !important;
-            box-shadow: 0px 0px 0px 4px var(--slate6);
-            color : var(--slate12) !important;
-        }
+    &:active {
+      background: var(--surfaces-surface-01) !important;
+      box-shadow: 0px 0px 0px 4px var(--slate6);
+      color: var(--slate12) !important;
     }
+  }
 }
-
diff --git a/frontend/src/_styles/editor/react-select-search.scss b/frontend/src/_styles/editor/react-select-search.scss
index 707c59e8a4..3660056f68 100644
--- a/frontend/src/_styles/editor/react-select-search.scss
+++ b/frontend/src/_styles/editor/react-select-search.scss
@@ -20,10 +20,10 @@
 }
 
 .select-search-container {
-    --select-search-background: var(--base);
-    --select-search-border: var(--slate7);
+    --select-search-background: var(--surfaces-surface-01);
+    --select-search-border: var(--border-weak);
     --select-search-selected: #dadcde;
-    --select-search-text: var(--slate12);
+    --select-search-text: var(--text-default);
     --select-search-subtle-text: #6c6f85;
     --select-search-inverted-text: var(--select-search-background);
     --select-search-highlight: var(--indigo3);
diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss
index 04e49dfe4d..57c151b189 100644
--- a/frontend/src/_styles/theme.scss
+++ b/frontend/src/_styles/theme.scss
@@ -2230,10 +2230,10 @@ tr:focus {
 #popover-app-menu {
   border-radius: 4px;
   width: 150px;
-  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
-  background: var(--base);
-  color: var(--slate12);
-  border: 1px solid var(--slate3);
+  box-shadow: var(--elevation-200-box-shadow);
+  background: var(--surfaces-surface-01);
+  color: var(--text-default);
+  border: 1px solid var(--border-default);
 
   .popover-arrow {
     display: none;
@@ -3708,6 +3708,7 @@ input:focus-visible {
 
 .nav-tabs {
   font-weight: 300;
+  border-bottom: 1px solid var(--border-weak);
 }
 
 .nav-tabs .nav-link.active {
@@ -3728,7 +3729,9 @@ input:focus-visible {
 }
 
 input[type="text"] {
-  outline-color: #dadcde !important;
+  outline-color: var(--border-default) !important;
+  border-color: var(--border-default) !important;
+
 }
 
 .widget-header {
@@ -6530,9 +6533,9 @@ a.step-item-disabled {
 
   .card {
     min-width: 400px;
-    background: var(--base);
-    color: var(--slate12);
-    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+    background: var(--surfaces-surface-01);
+    color: var(--text-default);
+    box-shadow: var(--elevation-400-box-shadow);
   }
 
   .card-footer {
@@ -9708,7 +9711,7 @@ tbody {
   border: 1px solid var(--slate5);
   border-radius: 6px;
   margin: 10px auto;
-  background-color: #FFFFFF;
+  background-color: var(--page-weak);
   display: flex;
   flex-direction: column;
 
@@ -9743,7 +9746,7 @@ tbody {
   .worskspace-sub-header-wrap-nav-ws {
     width: 100%;
     height: 64px;
-    border-bottom: 1px solid var(--slate5);
+    border-bottom: 1px solid var(--surfaces-surface-01);
     display: flex;
 
     .nav-link.active {
@@ -9840,30 +9843,29 @@ tbody {
 }
 
 .manage-workspace-table-wrap.dark-mode {
-  border: 1px solid var(--slate7) !important;
+  border: 1px solid var(--border-weak) !important;
   border-radius: 6px !important;
-  ;
 
   .worskspace-sub-header-wrap-nav-ws {
-    background-color: var(--slate3) !important;
-    border-bottom: 1px solid var(--slate7) !important;
+    background-color: var(--surfaces-surface-01) !important;
+    border-bottom: 1px solid var(--border-weak) !important;
 
   }
 
   .tab-content-ws {
-    background-color: var(--base) !important;
+    background-color: var(--surfaces-surface-01) !important;
   }
 
   .pagination-container-box {
-    background-color: var(--base) !important;
+    background-color: var(--surfaces-surface-01) !important;
   }
 
   .workspace-table-row {
-    border-bottom: 1px solid var(--slate7);
+    border-bottom: 1px solid var(--border-weak);
   }
 
   .worspace-list-table-body-header {
-    border-bottom: 1px solid var(--slate7);
+    border-bottom: 1px solid var(--border-weak);
   }
 
 }
@@ -9878,8 +9880,7 @@ tbody {
 
 .workspace-setting-table-wrapper {
   box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
-  outline: 1px solid var(--slate7);
-  background: var(--base);
+  outline: 1px solid var(--border-weak);
   width: 880px;
   margin: 0 auto;
   border-radius: 6px;
@@ -11763,13 +11764,13 @@ tbody {
   padding: 16px 24px;
   gap: 8px;
   height: 72px;
-  border-top: 1px solid var(--slate5);
-  background: var(--base);
+  border-top: 1px solid var(--border-weak);
+  background: var(--surfaces-surface-01);
 }
 
 .drawer-card-title {
   padding: 16px 20px;
-  border-bottom: 1px solid var(--slate5);
+  border-bottom: 1px solid var(--border-weak);
   height: 64px;
 
   h3 {
diff --git a/frontend/src/_ui/Icon/solidIcons/AppLimitSvg.jsx b/frontend/src/_ui/Icon/solidIcons/AppLimitSvg.jsx
index e9490c038c..91759919a0 100644
--- a/frontend/src/_ui/Icon/solidIcons/AppLimitSvg.jsx
+++ b/frontend/src/_ui/Icon/solidIcons/AppLimitSvg.jsx
@@ -1,22 +1,22 @@
 import React from 'react';
 
-const AppLimitSvg = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25" fill="none">
+const AppLimitSvg = ({ fill }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25" fill={fill}>
     <path
       d="M2.5 4.64844C2.5 3.26773 3.61929 2.14844 5 2.14844H7.5C8.88071 2.14844 10 3.26773 10 4.64844V7.14844C10 8.52915 8.88071 9.64844 7.5 9.64844H5C3.61929 9.64844 2.5 8.52915 2.5 7.14844V4.64844Z"
-      fill="#CCD1D5"
+      fill={fill}
     />
     <path
       d="M17.5 2.14844C16.1193 2.14844 15 3.26773 15 4.64844V7.14844C15 8.52915 16.1193 9.64844 17.5 9.64844H20C21.3807 9.64844 22.5 8.52915 22.5 7.14844V4.64844C22.5 3.26773 21.3807 2.14844 20 2.14844H17.5Z"
-      fill="#CCD1D5"
+      fill={fill}
     />
     <path
       d="M18.75 22.1484C20.8211 22.1484 22.5 20.4695 22.5 18.3984C22.5 16.3274 20.8211 14.6484 18.75 14.6484C16.6789 14.6484 15 16.3274 15 18.3984C15 20.4695 16.6789 22.1484 18.75 22.1484Z"
-      fill="#CCD1D5"
+      fill={fill}
     />
     <path
       d="M5 14.6484C3.61929 14.6484 2.5 15.7677 2.5 17.1484V19.6484C2.5 21.0291 3.61929 22.1484 5 22.1484H7.5C8.88071 22.1484 10 21.0291 10 19.6484V17.1484C10 15.7677 8.88071 14.6484 7.5 14.6484H5Z"
-      fill="#CCD1D5"
+      fill={fill}
     />
   </svg>
 );
diff --git a/frontend/src/modules/WorkspaceSettings/components/BaseSSOConfigurationList/BaseSSOConfigurationList.jsx b/frontend/src/modules/WorkspaceSettings/components/BaseSSOConfigurationList/BaseSSOConfigurationList.jsx
index d46b809fd7..60494ef8b0 100644
--- a/frontend/src/modules/WorkspaceSettings/components/BaseSSOConfigurationList/BaseSSOConfigurationList.jsx
+++ b/frontend/src/modules/WorkspaceSettings/components/BaseSSOConfigurationList/BaseSSOConfigurationList.jsx
@@ -6,6 +6,7 @@ import { Dropdown } from 'react-bootstrap';
 import SolidIcon from '@/_ui/Icon/SolidIcons';
 import { LicenseTooltip } from '@/LicenseTooltip';
 import { DefaultSSOList, DefaultSSOModal } from '@/modules/common/components';
+import { Button } from '@/components/ui/Button/Button';
 class BaseSSOConfigurationList extends React.Component {
   protectedSSO = ['openid', 'ldap', 'saml'];
   constructor(props) {
@@ -304,7 +305,8 @@ class BaseSSOConfigurationList extends React.Component {
         noTooltipIfValid={true}
         placement="left"
       >
-        <div
+        <Button
+          variant="outline"
           className="sso-option"
           key={key}
           onClick={isFeatureAvailable ? () => this.openModal(key) : (e) => e.preventDefault()}
@@ -345,7 +347,7 @@ class BaseSSOConfigurationList extends React.Component {
             />
             <span className="slider round"></span>
           </label>
-        </div>
+        </Button>
       </LicenseTooltip>
     );
   };
@@ -381,7 +383,8 @@ class BaseSSOConfigurationList extends React.Component {
               bsPrefix="no-caret-dropdown-toggle"
               data-cy="dropdown-custom-toggle"
             >
-              <div
+              <Button
+                variant="outline"
                 className="sso-option-label"
                 style={{
                   paddingLeft: '12px',
@@ -395,7 +398,7 @@ class BaseSSOConfigurationList extends React.Component {
               >
                 Instance SSO {defaultSSO ? `(${this.state.inheritedInstanceSSO})` : ''}
                 <SolidIcon className="option-icon" name={showDropdown ? 'cheveronup' : 'cheverondown'} fill={'grey'} />
-              </div>
+              </Button>
             </Dropdown.Toggle>
 
             <Dropdown.Menu style={{ width: '100%' }}>
diff --git a/frontend/src/modules/WorkspaceSettings/components/BaseSSOConfigurationList/Configuration.scss b/frontend/src/modules/WorkspaceSettings/components/BaseSSOConfigurationList/Configuration.scss
index c97ff5289d..acd6c98ca7 100644
--- a/frontend/src/modules/WorkspaceSettings/components/BaseSSOConfigurationList/Configuration.scss
+++ b/frontend/src/modules/WorkspaceSettings/components/BaseSSOConfigurationList/Configuration.scss
@@ -20,8 +20,7 @@
   padding-top: 6px;
   padding-bottom: 6px;
   margin-bottom: 10px;
-  background-color: #f9f9f9;
-  border: 1px solid #e1e1e1;
+  width: 100%;
   border-radius: 8px;
   transition: background-color 0.1s;
   cursor: pointer;
@@ -300,6 +299,11 @@ input:checked+.slider:before {
 .theme-dark {
   .form-control {
     background-color: unset !important;
+
+    input {
+      color: var(--text-default) !important;
+      border-color: var(--border-default) !important;
+    }
   }
 
   .react-tel-input .form-control {

From b74d0f58f1bf7e8d6b83cf71a7b8312bf4e077c8 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Fri, 4 Jul 2025 19:50:16 +0530
Subject: [PATCH 12/16] Fixes banner shadow

---
 frontend/src/_styles/license.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/_styles/license.scss b/frontend/src/_styles/license.scss
index 6b51cc1d77..5a45fa22c0 100644
--- a/frontend/src/_styles/license.scss
+++ b/frontend/src/_styles/license.scss
@@ -599,9 +599,9 @@
     align-items: center;
     align-self: stretch;
     border-radius: 8px;
-    background-color: var(--page-weak);
+    background-color: var(--surfaces-surface-01);
     border: 1px solid var(--border-weak, #FFAF4140);
-    box-shadow: var(--elevation-200-box-shadow);
+    box-shadow: var(--elevation-000-box-shadow);
 
     .license-loader {
         justify-content: center;

From c29751e51904cfbaaaa9da5c860bd74c295c48cc Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Mon, 7 Jul 2025 17:20:55 +0530
Subject: [PATCH 13/16] Fixes missing background changes

---
 frontend/src/_styles/license.scss             |  2 +-
 frontend/src/_styles/tabler.scss              |  2 +-
 frontend/src/_styles/theme.scss               | 48 ++++++++++---------
 frontend/src/_ui/Toggle/Toggle.scss           |  2 +-
 frontend/src/index.ejs                        |  2 +-
 .../BaseSSOConfigurationList.jsx              |  2 +-
 .../BaseOrganizationList.jsx                  |  2 +-
 .../DataSourceManager/DataSourceManager.jsx   |  2 +-
 8 files changed, 33 insertions(+), 29 deletions(-)

diff --git a/frontend/src/_styles/license.scss b/frontend/src/_styles/license.scss
index 5a45fa22c0..62e4011730 100644
--- a/frontend/src/_styles/license.scss
+++ b/frontend/src/_styles/license.scss
@@ -859,7 +859,7 @@
     width: 100%;
     height: 88px;
     border-top: 1px solid var(--slate5) !important;
-    background: var(--base);
+    background: var(--surfaces-surface-01);
     margin-top: 0px !important;
 }
 
diff --git a/frontend/src/_styles/tabler.scss b/frontend/src/_styles/tabler.scss
index ad724a1833..f21427d807 100644
--- a/frontend/src/_styles/tabler.scss
+++ b/frontend/src/_styles/tabler.scss
@@ -18972,7 +18972,7 @@ img {
 @media not print {
     .theme-dark {
         color: #f4f6fa;
-        background-color: #1f2936
+        background-color: #1E2226;
     }
 
     .theme-dark .card,
diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss
index 57c151b189..ffe5b62e76 100644
--- a/frontend/src/_styles/theme.scss
+++ b/frontend/src/_styles/theme.scss
@@ -1164,7 +1164,7 @@ button {
   font-weight: 500;
 
   .modal-header {
-    background-color: var(--base) !important;
+    background-color: var(--surfaces-surface-01) !important;
     border-bottom: 1px solid var(--slate5);
 
   }
@@ -1181,7 +1181,7 @@ button {
       .modal-body {
         height: 80%;
         padding: 0 10px;
-        background-color: var(--base) !important;
+        background-color: var(--surfaces-surface-01) !important;
 
 
         .container-fluid {
@@ -1315,7 +1315,7 @@ button {
   .modal-body {
     height: 80%;
     padding: 0 10px;
-    background-color: var(--base) !important;
+    background-color: var(--surfaces-surface-01) !important;
 
     .container-fluid {
       height: 100%;
@@ -1331,7 +1331,7 @@ button {
   .modal-header,
   .modal-content {
     color: white;
-    background-color: #2b394a;
+    background-color: var(--surfaces-surface-01);
   }
 
   .template-categories {
@@ -3336,7 +3336,7 @@ input:focus-visible {
 
   .modal-content,
   .modal-header {
-    background-color: #1f2936;
+    background-color: var(--surfaces-surface-01);
 
     .text-muted {
       color: var(--slate9) !important;
@@ -4781,7 +4781,7 @@ input[type="text"] {
 .modal-content.home-modal-component {
   border-radius: 8px;
   overflow: hidden;
-  background-color: var(--base);
+  background-color: var(--surfaces-surface-01);
   color: var(--slate12);
   box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
 
@@ -4792,7 +4792,7 @@ input[type="text"] {
   .modal-header,
   .modal-body {
     padding: 16px 28px;
-    background: var(--base);
+    background: var(--surfaces-surface-01);
   }
 
   .modal-title {
@@ -4802,7 +4802,7 @@ input[type="text"] {
 
   input:not([type=checkbox]) {
     border-radius: 5px !important;
-    background: var(--base);
+    background: var(--surfaces-surface-01);
     color: var(--slate12);
   }
 
@@ -4822,13 +4822,13 @@ input[type="text"] {
 
   .modal-header,
   .modal-body {
-    background-color: #232e3c;
+    background-color: var(--surfaces-surface-01);
     color: #fff;
   }
 
   .form-control {
     color: #fff;
-    background-color: #232e3c !important;
+    background-color: var(--surfaces-surface-01) !important;
   }
 
   .btn-close {
@@ -4873,7 +4873,7 @@ input[type="text"] {
   }
 
   .modal-header {
-    background-color: $bg-dark-light !important;
+    background-color: var(--surfaces-surface-01) !important;
     color: $white !important;
     border-bottom: 2px solid #3A3F42 !important;
   }
@@ -4888,7 +4888,7 @@ input[type="text"] {
   }
 
   input {
-    background-color: $bg-dark-light !important;
+    background-color: var(--surfaces-surface-01) !important;
   }
 
   .form-select {
@@ -5581,7 +5581,10 @@ div#driver-page-overlay {
     background: var(--base);
     margin-top: 0px !important;
   }
+}
 
+.form-footer.sso-card-footer {
+  border-top: 0 !important;
 }
 
 .workspace-settings-page {
@@ -6539,7 +6542,7 @@ a.step-item-disabled {
   }
 
   .card-footer {
-    background: var(--base);
+    background: var(--surfaces-surface-01);
     color: var(--slate12);
   }
 
@@ -9926,11 +9929,11 @@ tbody {
     column-gap: 8px;
 
     .limit {
-      width: 100px !important;
+      width: 140px !important;
       display: flex;
       flex-direction: column;
       align-items: center;
-      padding: 5px !important;
+      padding: 5px 10px 10px !important;
       background-color: var(--base);
       border-radius: 5px;
       border: 1px solid var(--slate5);
@@ -9945,6 +9948,7 @@ tbody {
       div {
         width: unset !important;
         font-size: 11px;
+        margin-bottom: 2px !important;
       }
     }
   }
@@ -11475,7 +11479,7 @@ tbody {
 }
 
 .new-app-dropdown {
-  background: var(--base) !important;
+  background: var(--surfaces-surface-01) !important;
   color: var(--slate12);
 }
 
@@ -11517,8 +11521,8 @@ tbody {
     align-items: center;
     padding: 7px 8px;
     gap: 10px;
-    width: 34px;
-    height: 34px;
+    width: 24px;
+    height: 24px;
     background: var(--slate4) !important;
     color: var(--slate9);
     border-radius: 6px;
@@ -11532,8 +11536,8 @@ tbody {
     align-items: center;
     padding: 7px 8px;
     gap: 10px;
-    width: 34px;
-    height: 34px;
+    width: 24px;
+    height: 24px;
     border-radius: 6px;
   }
 
@@ -14178,7 +14182,7 @@ tbody {
 }
 
 .modal-content {
-  background: var(--base);
+  background: var(--surfaces-surface-01);
   color: var(--slate12);
 }
 
@@ -14538,7 +14542,7 @@ tbody {
 }
 
 .modal-content {
-  background: var(--base);
+  background: var(--surfaces-surface-01);
   color: var(--slate12);
 }
 
diff --git a/frontend/src/_ui/Toggle/Toggle.scss b/frontend/src/_ui/Toggle/Toggle.scss
index 187bdb7576..b5a8298463 100644
--- a/frontend/src/_ui/Toggle/Toggle.scss
+++ b/frontend/src/_ui/Toggle/Toggle.scss
@@ -16,7 +16,7 @@
 }
 
 .form-check>.form-check-input:not(:checked) {
-    background-color: #ffffff;
+    background-color: var(--slider-track);
 }
 .text-wrappers{
     display: flex;
diff --git a/frontend/src/index.ejs b/frontend/src/index.ejs
index 93b9b023fe..fca0b51c02 100644
--- a/frontend/src/index.ejs
+++ b/frontend/src/index.ejs
@@ -28,7 +28,7 @@
     }
     .load.dark-loader {
       display: flex;
-      background-color: #1f2936;
+      background-color: #1E2226;
       margin: 0;
     }
 
diff --git a/frontend/src/modules/WorkspaceSettings/components/BaseSSOConfigurationList/BaseSSOConfigurationList.jsx b/frontend/src/modules/WorkspaceSettings/components/BaseSSOConfigurationList/BaseSSOConfigurationList.jsx
index 60494ef8b0..3cc65ccc54 100644
--- a/frontend/src/modules/WorkspaceSettings/components/BaseSSOConfigurationList/BaseSSOConfigurationList.jsx
+++ b/frontend/src/modules/WorkspaceSettings/components/BaseSSOConfigurationList/BaseSSOConfigurationList.jsx
@@ -389,7 +389,7 @@ class BaseSSOConfigurationList extends React.Component {
                 style={{
                   paddingLeft: '12px',
                   width: '270px',
-                  paddingRight: '220px',
+                  paddingRight: '160px',
                   paddingTop: '6px',
                   paddingBottom: '6px',
                   height: '34px',
diff --git a/frontend/src/modules/common/components/BaseOrganizationList/BaseOrganizationList.jsx b/frontend/src/modules/common/components/BaseOrganizationList/BaseOrganizationList.jsx
index 840ac8aac0..6defb9c9c9 100644
--- a/frontend/src/modules/common/components/BaseOrganizationList/BaseOrganizationList.jsx
+++ b/frontend/src/modules/common/components/BaseOrganizationList/BaseOrganizationList.jsx
@@ -13,7 +13,7 @@ import { WorkspaceDropDown } from '@/modules/dashboard/components';
   each workspace related component has organizations list component which can be moved to a single wrapper. 
   otherwise this component will intiate everytime we switch between pages
 */
-const BaseOrganizationList = function ({ workspacesLimit = null, LicenseBadge = () => null, ...props }) {
+const BaseOrganizationList = ({ workspacesLimit = null, LicenseBadge = () => null, ...props }) => {
   const { current_organization_id, admin } = authenticationService.currentSessionValue;
   const { fetchOrganizations, organizationList, isGettingOrganizations } = useCurrentSessionStore(
     (state) => ({
diff --git a/frontend/src/modules/dataSources/components/DataSourceManager/DataSourceManager.jsx b/frontend/src/modules/dataSources/components/DataSourceManager/DataSourceManager.jsx
index 4251ebf866..6fc0428a05 100644
--- a/frontend/src/modules/dataSources/components/DataSourceManager/DataSourceManager.jsx
+++ b/frontend/src/modules/dataSources/components/DataSourceManager/DataSourceManager.jsx
@@ -988,7 +988,7 @@ class DataSourceManagerComponent extends React.Component {
                           <input
                             type="text"
                             onChange={(e) => this.onNameChanged(e.target.value)}
-                            className="form-control-plaintext form-control-plaintext-sm color-slate12"
+                            className="form-control-plaintext form-control-plaintext-sm color-slate12 tw-border-x tw-border-y"
                             value={decodeEntities(selectedDataSource.name)}
                             style={{ width: '160px' }}
                             data-cy="data-source-name-input-field"

From bf19bcbe731d4bb2cdadf7da90cc11c51a1cb02c Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Tue, 8 Jul 2025 12:25:52 +0530
Subject: [PATCH 14/16] Fixes tooljet db styles

---
 frontend/src/TooljetDatabase/Table/styles.scss | 8 ++++----
 frontend/src/_styles/theme.scss                | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/TooljetDatabase/Table/styles.scss b/frontend/src/TooljetDatabase/Table/styles.scss
index e377b88bcb..120148b5d8 100644
--- a/frontend/src/TooljetDatabase/Table/styles.scss
+++ b/frontend/src/TooljetDatabase/Table/styles.scss
@@ -97,8 +97,8 @@
     z-index: 1;
     position: sticky;
     left: 66px;
-    border-right: 2px solid var(--light-slate-08, #C1C8CD);
-    background-color: white;
+    border-right: 2px solid var(--border-weak);
+    background-color: var(--surfaces-surface-01);
   }
 
   th {
@@ -145,14 +145,14 @@
   th:nth-child(2) {
     z-index: 2;
     left: 66px;
-    border-right: 2px solid var(--light-slate-08, #C1C8CD);
+    border-right: 2px solid var(--border-weak);
   }
 
   .dark-background {
 
     td:nth-child(1),
     td:nth-child(2) {
-      background-color: #2B394A;
+      background-color: var(--surfaces-surface-01);
     }
   }
 
diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss
index ffe5b62e76..d25fa93bc5 100644
--- a/frontend/src/_styles/theme.scss
+++ b/frontend/src/_styles/theme.scss
@@ -7525,11 +7525,11 @@ tbody {
     height: 36px;
 
     &:not(.table-row-selected):hover {
-      background: var(--Slate-02, #F8F9FA);
+      background: var(--slate2);
 
       td:nth-child(1),
       td:nth-child(2) {
-        background: var(--Slate-02, #F8F9FA);
+        background: var(--slate2);
       }
 
       .tjdb-checkbox-cell {

From 41f48df1defbe2733cfcf9beed0b639f3c446bce Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Tue, 8 Jul 2025 12:34:14 +0530
Subject: [PATCH 15/16] Fixes sso card body

---
 frontend/src/_styles/theme.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss
index d25fa93bc5..1943727a80 100644
--- a/frontend/src/_styles/theme.scss
+++ b/frontend/src/_styles/theme.scss
@@ -5549,7 +5549,7 @@ div#driver-page-overlay {
 }
 
 .sso-card-wrapper {
-  background: var(--base);
+  background: var(--surfaces-surface-01);
   min-height: 100%;
   // height: calc(100vh - 156px) !important;
 

From bbb02c64b369dc0121ac266cf1ade203dba0d800 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Tue, 8 Jul 2025 12:58:29 +0530
Subject: [PATCH 16/16] Dropdown fixes

---
 frontend/src/_styles/theme.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss
index 1943727a80..87d5be5a14 100644
--- a/frontend/src/_styles/theme.scss
+++ b/frontend/src/_styles/theme.scss
@@ -11631,7 +11631,7 @@ tbody {
 }
 
 .confirm-dialogue-body {
-  background: var(--base);
+  background: var(--surfaces-surface-01);
   color: var(--slate12);
 }
 
@@ -14618,7 +14618,7 @@ tbody {
 }
 
 .popover-body {
-  background-color: var(--base);
+  background-color: var(--surfaces-surface-01);
   color: var(--slate12);
   border-radius: 6px;
 }