diff --git a/frontend/src/App/App.jsx b/frontend/src/App/App.jsx
index 20f54e3f54..e7a5b21f11 100644
--- a/frontend/src/App/App.jsx
+++ b/frontend/src/App/App.jsx
@@ -113,6 +113,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) => {
@@ -122,7 +123,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()}` &&
@@ -135,18 +136,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 '';
@@ -157,6 +164,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 = {
@@ -290,22 +305,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
                   exact
                   path="/:workspaceId/modules"
@@ -428,7 +440,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/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/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 470ebd5cb9..5db2f81af5 100644
--- a/frontend/src/HomePage/AppMenu.jsx
+++ b/frontend/src/HomePage/AppMenu.jsx
@@ -119,7 +119,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/Folders.jsx b/frontend/src/HomePage/Folders.jsx
index 3a94991f4e..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>
@@ -287,8 +301,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 +327,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/HomePage/Header.jsx b/frontend/src/HomePage/Header.jsx
index aa6580cb29..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 }) {
@@ -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 7aedd29910..d31f087f04 100644
--- a/frontend/src/HomePage/HomePage.jsx
+++ b/frontend/src/HomePage/HomePage.jsx
@@ -1652,12 +1652,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 ? (
                   <>
@@ -1684,15 +1679,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
new file mode 100644
index 0000000000..5f94c9668f
--- /dev/null
+++ b/frontend/src/HomePage/styles/homepage.scss
@@ -0,0 +1,295 @@
+.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: 48px;
+  width: 100%;
+  margin-top: 32px;
+}
+.homepage-app-card-list-item-wrap {
+  column-gap: 24px;
+  row-gap: 24px;
+  flex-wrap: wrap;
+  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;
+  padding: 16px;
+
+  .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 {
+    .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;
+    }
+  }
+}
+
+.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;
+    }
+  }
+}
+
+
+.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;
+    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) {
+  .home-page-content-container {
+    max-width: 568px;
+  }
+
+  .homepage-app-card-list-item-wrap {
+    row-gap: 20px;
+  }
+
+  .homepage-app-card-list-item {
+    // max-width: 269px;
+    max-width: calc(50% - 12px);
+    flex-basis: 50%;
+    flex-grow: 1;
+    flex-shrink: 0;
+
+    .edit-button,
+    .launch-button {
+      width: 111.5px !important;
+    }
+  }
+
+  .liner {
+    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/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/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/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/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..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);
     }
   }
 
@@ -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/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/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..680bc32f9f
--- /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: 12px 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-weak) !important;
+    width: calc(100vw - 336px);
+  }
+
+  .toojet-db-table-footer-collapse {
+    height: 52px;
+    background: var(--page-weak) !important;
+    width: calc(100vw - 48px);
+  }
+
+  .toojet-db-table-footer-collapse {
+    height: 52px;
+    background: var(--page-weak) !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/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/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 f0c09054dc..58afc173de 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(
   (
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
new file mode 100644
index 0000000000..202f98b688
--- /dev/null
+++ b/frontend/src/_components/_styles/search-box.scss
@@ -0,0 +1,65 @@
+.search-box-wrapper {
+  input {
+    width: 200px;
+    border-radius: 5px !important;
+    color: var(--text-primary);
+    background-color: var(--surfaces-surface-01) !important;
+    border: 1px solid var(--border-weak) !important;
+  }
+
+  .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(--surfaces-surface-02);
+  }
+
+  .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: 8px !important;
+    padding-left: 1.75rem !important;
+    border-radius: 8px !important;
+  }
+}
\ No newline at end of file
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/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/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 7ca2a022c0..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(--slate5);
-    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-default) !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/global-datasources.scss b/frontend/src/_styles/global-datasources.scss
index d365b1ac0c..97d9108c44 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-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);
+    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;
@@ -69,7 +70,8 @@
     }
 
     .datasources-list-item {
-        background-color: var(--indigo3);
+        background-color: var(--interactive-default);
+        color: var(--text-default);
     }
 }
 
@@ -109,7 +111,7 @@
 
 .datasource-modal-container {
     position: relative;
-    background: var(--page-default);
+    background: var(--page-weak);
 
     .modal-header {
         background-color: var(--slate3) !important;
@@ -118,12 +120,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 {
@@ -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);
-    border-left: 1px solid var(--slate5);
+    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/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/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/license.scss b/frontend/src/_styles/license.scss
index e058dab5e7..62e4011730 100644
--- a/frontend/src/_styles/license.scss
+++ b/frontend/src/_styles/license.scss
@@ -6,16 +6,17 @@
         width: 880px;
         margin: auto;
         border-radius: 6px;
+        border: 1px solid var(--border-weak);
 
         .body-wrapper {
-            border: 1px solid var(--slate5);
+            height: 100%;
             min-height: 620px;
         }
 
         .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 +30,7 @@
         }
 
         .license-content-wrapper {
-            background-color: var(--base);
+            background-color: var(--surfaces-surface-01);
 
             .groups-sub-header-wrap {
                 width: 100%;
@@ -253,11 +254,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;
@@ -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(--surfaces-surface-01);
+    border: 1px solid var(--border-weak, #FFAF4140);
+    box-shadow: var(--elevation-000-box-shadow);
 
     .license-loader {
         justify-content: center;
@@ -796,7 +796,7 @@
 }
 
 .license-error-modal {
-    background-color: var(--base);
+    background-color: var(--surfaces-surface-01);
 
     .modal-header {
         background-color: var(--slate3) !important;
@@ -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/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/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/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 1e77060ba1..87d5be5a14 100644
--- a/frontend/src/_styles/theme.scss
+++ b/frontend/src/_styles/theme.scss
@@ -20,6 +20,8 @@
 @import "./componentdesign.scss";
 @import './pages-sidebar.scss';
 @import './modules.scss';
+@import "./rocket/card.scss";
+@import "../HomePage/styles/homepage.scss";
 
 /* ibm-plex-sans-100 - latin */
 @font-face {
@@ -919,70 +921,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;
@@ -1226,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);
 
   }
@@ -1243,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 {
@@ -1377,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%;
@@ -1393,7 +1331,7 @@ button {
   .modal-header,
   .modal-content {
     color: white;
-    background-color: #2b394a;
+    background-color: var(--surfaces-surface-01);
   }
 
   .template-categories {
@@ -2292,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;
@@ -3398,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;
@@ -3732,7 +3670,7 @@ input:focus-visible {
   position: relative;
   min-height: 100%;
   min-width: 100%;
-  background-color: #2b394b;
+  background-color: var(--page-weak);
 }
 
 .jet-table {
@@ -3770,6 +3708,7 @@ input:focus-visible {
 
 .nav-tabs {
   font-weight: 300;
+  border-bottom: 1px solid var(--border-weak);
 }
 
 .nav-tabs .nav-link.active {
@@ -3790,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 {
@@ -4728,74 +4669,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
@@ -4810,7 +4683,7 @@ input[type="text"] {
  * Folder List
  */
 .folder-list {
-  overflow-y: scroll;
+  overflow-y: auto;
   scrollbar-width: thin;
   scrollbar-color: #888 transparent;
 
@@ -4908,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);
 
@@ -4919,7 +4792,7 @@ input[type="text"] {
   .modal-header,
   .modal-body {
     padding: 16px 28px;
-    background: var(--base);
+    background: var(--surfaces-surface-01);
   }
 
   .modal-title {
@@ -4929,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);
   }
 
@@ -4949,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 {
@@ -5000,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;
   }
@@ -5015,7 +4888,7 @@ input[type="text"] {
   }
 
   input {
-    background-color: $bg-dark-light !important;
+    background-color: var(--surfaces-surface-01) !important;
   }
 
   .form-select {
@@ -5676,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;
 
@@ -5708,18 +5581,18 @@ div#driver-page-overlay {
     background: var(--base);
     margin-top: 0px !important;
   }
+}
 
+.form-footer.sso-card-footer {
+  border-top: 0 !important;
 }
 
 .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;
     width: 880px;
 
     .card-header {
@@ -5751,13 +5624,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;
@@ -6285,7 +6163,7 @@ div#driver-page-overlay {
 
 .org-constant-page {
   .card-footer {
-    background: var(--base);
+    background: var(--page-weak);
     color: var(--slate12);
   }
 }
@@ -6658,13 +6536,13 @@ 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 {
-    background: var(--base);
+    background: var(--surfaces-surface-01);
     color: var(--slate12);
   }
 
@@ -7647,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 {
@@ -7935,16 +7813,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 {
@@ -7970,15 +7838,8 @@ tbody {
   padding-left: 20px;
 }
 
-.workspace-content-wrapper,
-.database-page-content-wrap {
-  background-color: var(--page-default);
-  height: calc(100vh - 64px) !important;
-}
-
-.instance-settings-wrapper {}
-
-.database-page-content-wrap {
+.workspace-content-wrapper {
+  background-color: var(--page-weak);
   height: calc(100vh - 64px) !important;
 }
 
@@ -7996,12 +7857,12 @@ tbody {
 }
 
 .organization-page-sidebar {
-  height: calc(100vh - 64px);
+  height: calc(100vh - 48px);
   max-width: 288px;
-  background-color: var(--page-default);
-  border-right: 1px solid var(--slate5) !important;
-  display: grid !important;
-  grid-template-rows: auto 1fr auto !important;
+  background-color: var(--page-weak);
+  border-right: 1px solid var(--border-weak) !important;
+  display: flex !important;
+  flex-direction: column !important;
   position: relative;
 
   .trial-banner {
@@ -8017,10 +7878,10 @@ tbody {
 }
 
 .marketplace-page-sidebar {
-  height: calc(100vh - 64px);
+  height: calc(100vh - 48px);
   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 +7889,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;
 
@@ -8042,38 +7903,6 @@ tbody {
   margin-top: 14px;
 }
 
-.create-new-table-btn {
-  width: 248px;
-
-  button {
-    height: 40px !important;
-
-  }
-}
-
-.tooljet-database-sidebar {
-  max-width: 288px;
-  background: var(--page-default);
-  border-right: 1px solid var(--slate5);
-  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;
@@ -8468,11 +8297,11 @@ tbody {
   right: 0;
   left: 48px;
   z-index: 1;
-  background: var(--base);
-  height: 64px;
+  background: var(--page-weak);
+  height: 48px;
 
   @media only screen and (max-width: 767px) {
-    border-bottom: 1px solid var(--slate5);
+    border-bottom: 1px solid var(--border-weak);
 
     .row {
       display: flex;
@@ -8741,24 +8570,33 @@ tbody {
 
 
 .tj-dashboard-section-header {
-  background-color: var(--page-default);
+  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;
-  border-right: 1px solid var(--slate5);
+  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"],
   &[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;
     }
   }
+
+  &[data-name="Audit logs"] {
+    flex: 1 0 0%;
+    max-width: unset;
+  }
 }
 
 .layout-sidebar-icon {
@@ -8878,28 +8716,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;
@@ -9071,17 +8887,9 @@ 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-default);
-  height: calc(100vh - 64px) !important;
+  background-color: var(--page-weak);
+  height: calc(100vh - 48px) !important;
   overflow-y: auto;
   position: relative;
 
@@ -9131,100 +8939,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);
-}
-
-.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 +9429,7 @@ tbody {
   color: var(--slate11);
 
   .with-border {
-    border-bottom: 1px solid var(--slate5) !important;
+    border-bottom: 1px solid var(--border-weak) !important;
   }
 
   a {
@@ -9765,19 +9479,6 @@ tbody {
   color: var(—-slate12) !important;
 }
 
-.tj-dashboard-header-wrap {
-  background-color: var(--page-default);
-  padding-top: 22px;
-  padding-bottom: 22px;
-  padding-left: 40px;
-  height: 64px;
-  border-bottom: 1px solid var(--slate5);
-
-  @media only screen and (max-width: 768px) {
-    border-bottom: none;
-  }
-}
-
 .dashboard-breadcrumb-header-name:hover {
   text-decoration: none !important;
 }
@@ -9834,7 +9535,6 @@ tbody {
 .users-table {
   background: var(--base);
   padding: 16px;
-  width: 848px;
   margin: 0 auto;
   padding: 16px;
 
@@ -9856,7 +9556,7 @@ tbody {
         }
 
         &[data-name="name-header"] {
-          max-width: 220px !important;
+          max-width: 210px !important;
         }
 
         &[data-name="meta-header"] {
@@ -9880,16 +9580,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;
@@ -9913,10 +9612,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;
@@ -9987,10 +9686,6 @@ tbody {
   max-width: 880px;
   margin: 0 auto;
 
-  .tj-user-table-wrapper {
-    padding-right: 4px;
-  }
-
   &:hover {
     .tj-user-table-wrapper {
       padding-right: 0px;
@@ -10019,7 +9714,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;
 
@@ -10054,7 +9749,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 {
@@ -10151,30 +9846,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);
   }
 
 }
@@ -10189,8 +9883,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;
@@ -10236,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);
@@ -10255,6 +9948,7 @@ tbody {
       div {
         width: unset !important;
         font-size: 11px;
+        margin-bottom: 2px !important;
       }
     }
   }
@@ -10462,146 +10156,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;
@@ -10765,10 +10321,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);
 }
@@ -10785,7 +10340,7 @@ tbody {
     padding: 0px 24px;
     width: 660px;
     height: 72px;
-    border-bottom: 1px solid var(--slate5);
+    border-bottom: 1px solid var(--border-weak);
 
   }
 
@@ -10804,7 +10359,7 @@ tbody {
   gap: 40px;
   width: 188px;
   height: 32px;
-  background: var(--base);
+  background: var(--surfaces-surface-01);
   border-radius: 6px;
   cursor: pointer;
 }
@@ -11892,15 +11447,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;
 }
@@ -11927,7 +11479,7 @@ tbody {
 }
 
 .new-app-dropdown {
-  background: var(--base) !important;
+  background: var(--surfaces-surface-01) !important;
   color: var(--slate12);
 }
 
@@ -11938,11 +11490,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;
     }
   }
 
@@ -11969,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;
@@ -11984,8 +11536,8 @@ tbody {
     align-items: center;
     padding: 7px 8px;
     gap: 10px;
-    width: 34px;
-    height: 34px;
+    width: 24px;
+    height: 24px;
     border-radius: 6px;
   }
 
@@ -12079,7 +11631,7 @@ tbody {
 }
 
 .confirm-dialogue-body {
-  background: var(--base);
+  background: var(--surfaces-surface-01);
   color: var(--slate12);
 }
 
@@ -12164,7 +11716,7 @@ tbody {
 .sidebar-list-wrap {
   margin-top: 24px;
   padding: 0px 20px 20px 20px;
-  height: calc(100vh - 180px);
+  flex-grow: 1;
   overflow: auto;
 
   span {
@@ -12216,13 +11768,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 {
@@ -12285,7 +11837,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);
@@ -12673,8 +12225,10 @@ tbody {
 }
 
 .workspace-nav-list-wrap {
-  padding: 20px 20px 20px 20px;
-  height: calc(100vh - 116px) !important;
+  flex-grow: 1;
+  padding: 12px 24px;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .upload-user-form span.file-upload-error {
@@ -12943,12 +12497,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(--surfaces-surface-01);
   border-radius: 6px;
 }
 
@@ -12979,7 +12533,6 @@ tbody {
 
   .workspace-constant-card-body {
     min-height: calc(100vh - 408px);
-    background: var(--base);
   }
 
   .constant-table-wrapper {
@@ -12990,13 +12543,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;
     }
   }
 
@@ -13021,125 +12570,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;
-  }
-}
-
-@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 +12595,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,14 +12646,10 @@ tbody {
 .marketplace-body {
   height: calc(100vh - 64px) !important;
   overflow-y: auto;
-  background-color: var(--page-default);
+  background-color: var(--page-weak);
 }
 
 .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;
@@ -13505,16 +12931,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 {
@@ -13546,8 +12970,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;
@@ -13671,7 +13095,7 @@ tbody {
 }
 
 .audit-log {
-  background-color: var(--slate2);
+  background-color: var(--page-weak);
   width: unset;
 
   .tj-ms {
@@ -14758,7 +14182,7 @@ tbody {
 }
 
 .modal-content {
-  background: var(--base);
+  background: var(--surfaces-surface-01);
   color: var(--slate12);
 }
 
@@ -15118,7 +14542,7 @@ tbody {
 }
 
 .modal-content {
-  background: var(--base);
+  background: var(--surfaces-surface-01);
   color: var(--slate12);
 }
 
@@ -15194,7 +14618,7 @@ tbody {
 }
 
 .popover-body {
-  background-color: var(--base);
+  background-color: var(--surfaces-surface-01);
   color: var(--slate12);
   border-radius: 6px;
 }
@@ -16769,6 +16193,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;
@@ -16926,6 +16355,7 @@ fieldset:disabled {
     .right {
       display: flex;
       gap: 8px;
+      flex-wrap: wrap;
 
       button {
         border: none;
@@ -16964,7 +16394,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/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/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
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/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/_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/_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/_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/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/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 d46b809fd7..3cc65ccc54 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,12 +383,13 @@ 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',
                   width: '270px',
-                  paddingRight: '220px',
+                  paddingRight: '160px',
                   paddingTop: '6px',
                   paddingBottom: '6px',
                   height: '34px',
@@ -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 666b828022..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;
@@ -236,12 +235,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 {
@@ -273,8 +269,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;
@@ -303,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 {
diff --git a/frontend/src/modules/WorkspaceSettings/components/ManageOrgConstantsSettings/ConstantFormStyle.scss b/frontend/src/modules/WorkspaceSettings/components/ManageOrgConstantsSettings/ConstantFormStyle.scss
index 86bba024b1..7d848030d5 100644
--- a/frontend/src/modules/WorkspaceSettings/components/ManageOrgConstantsSettings/ConstantFormStyle.scss
+++ b/frontend/src/modules/WorkspaceSettings/components/ManageOrgConstantsSettings/ConstantFormStyle.scss
@@ -42,14 +42,13 @@
 }
 
 .constant-wrapper {
-  background-color: #f8f9fa;
+  background-color: var(--page-weak);
   padding: 0px;
 }
 
 .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;
@@ -257,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/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/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/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/common/components/UsersTable/UsersTable.jsx b/frontend/src/modules/common/components/UsersTable/UsersTable.jsx
index b04dc74bf0..c2b62efb65 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] : ''}${
@@ -161,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`}
@@ -176,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' }}
                         >
@@ -223,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={
@@ -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/DataSourceManager/DataSourceManager.jsx b/frontend/src/modules/dataSources/components/DataSourceManager/DataSourceManager.jsx
index 89f40ae0bb..65c03aa074 100644
--- a/frontend/src/modules/dataSources/components/DataSourceManager/DataSourceManager.jsx
+++ b/frontend/src/modules/dataSources/components/DataSourceManager/DataSourceManager.jsx
@@ -995,7 +995,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"
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}
               />
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