diff --git a/apps/web/src/apps/index.tsx b/apps/web/src/apps/index.tsx
index b132d29..7d0920d 100644
--- a/apps/web/src/apps/index.tsx
+++ b/apps/web/src/apps/index.tsx
@@ -1,7 +1,7 @@
 import { lazy, Suspense, useEffect, useState } from 'react';
 import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
 import { ThemeProvider, DensityType } from '@repo/ui/provider';
-import { NotFound, Forbidden, Maintenance, ComingSoon } from '@repo/ui/components';
+import { NotFound, Forbidden, Maintenance, ComingSoon, AgGridProvider } from '@repo/ui/components';
 import { LoadingScreen } from '../core/components/loading-screen';
 import { useThemeStore } from '../core/stores/theme.store';
 import { initializeAndPurgeHistoryBackground } from './modules/layouts/hooks/useHistoryTracker';
@@ -23,22 +23,24 @@ export default function App() {
 
   return (
     <ThemeProvider colorScheme={colorScheme} density={density}>
-      <BrowserRouter>
-        <Suspense fallback={<LoadingScreen />}>
-          <Routes>
-            <Route path="/auth/*" element={<AuthModule />} />
-            <Route path="/app/*" element={<AppModule />} />
-            <Route path="/showcase" element={<ShowcaseView density={density} setDensity={setDensity} />} />
-            <Route path="/shell-demo" element={<ShellDemo />} />
-            <Route path="/404" element={<NotFound homeUrl="/app" />} />
-            <Route path="/403" element={<Forbidden homeUrl="/app" />} />
-            <Route path="/maintenance" element={<Maintenance />} />
-            <Route path="/coming-soon" element={<ComingSoon />} />
-            <Route path="/" element={<Navigate to="/showcase" />} />
-            <Route path="*" element={<Navigate to="/404" />} />
-          </Routes>
-        </Suspense>
-      </BrowserRouter>
+      <AgGridProvider bypassLicense>
+        <BrowserRouter>
+          <Suspense fallback={<LoadingScreen />}>
+            <Routes>
+              <Route path="/auth/*" element={<AuthModule />} />
+              <Route path="/app/*" element={<AppModule />} />
+              <Route path="/showcase" element={<ShowcaseView density={density} setDensity={setDensity} />} />
+              <Route path="/shell-demo" element={<ShellDemo />} />
+              <Route path="/404" element={<NotFound homeUrl="/app" />} />
+              <Route path="/403" element={<Forbidden homeUrl="/app" />} />
+              <Route path="/maintenance" element={<Maintenance />} />
+              <Route path="/coming-soon" element={<ComingSoon />} />
+              <Route path="/" element={<Navigate to="/showcase" />} />
+              <Route path="*" element={<Navigate to="/404" />} />
+            </Routes>
+          </Suspense>
+        </BrowserRouter>
+      </AgGridProvider>
     </ThemeProvider>
   );
 }
diff --git a/packages/core-i18n/src/languages/en/common.json b/packages/core-i18n/src/languages/en/common.json
index 79954bc..9172a9c 100644
--- a/packages/core-i18n/src/languages/en/common.json
+++ b/packages/core-i18n/src/languages/en/common.json
@@ -39,6 +39,7 @@
     "expandAll": "Expand all menu",
     "collapseAll": "Collapse all menu",
     "searchMenu": "Search menu",
+    "searchData": "Search data",
     "collapse": "Collapse",
     "expandSidebar": "Expand Sidebar",
     "actions": {
@@ -55,7 +56,9 @@
       "rollback": "Rollback",
       "hold": "Hold",
       "back": "Back",
-      "reload": "Reload"
+      "reload": "Reload",
+      "filter": "Filter",
+      "setting": "Setting"
     },
     "confirmDialog": {
       "delete": {
diff --git a/packages/core-i18n/src/languages/id/common.json b/packages/core-i18n/src/languages/id/common.json
index 62f187c..2f54f0f 100644
--- a/packages/core-i18n/src/languages/id/common.json
+++ b/packages/core-i18n/src/languages/id/common.json
@@ -39,6 +39,7 @@
     "expandAll": "Buka semua menu",
     "collapseAll": "Tutup semua menu",
     "searchMenu": "Cari menu",
+    "searchData": "Cari data",
     "collapse": "Tutup",
     "expandSidebar": "Perluas Sidebar",
     "actions": {
@@ -55,7 +56,9 @@
       "rollback": "Rollback",
       "hold": "Hold",
       "back": "Kembali",
-      "reload": "Muat Ulang"
+      "reload": "Muat Ulang",
+      "filter": "Filter",
+      "setting": "Pengaturan"
     },
     "confirmDialog": {
       "delete": {
diff --git a/packages/ui/src/components/actions-tools/page-actions.tsx b/packages/ui/src/components/actions-tools/page-actions.tsx
index cdc8780..26b38a8 100644
--- a/packages/ui/src/components/actions-tools/page-actions.tsx
+++ b/packages/ui/src/components/actions-tools/page-actions.tsx
@@ -46,7 +46,7 @@ export const PageActions = memo(function PageActions({ actions = [], customButto
             const ButtonWithDropdown = (
               <Button
                 variant={action.variant || 'transparent'}
-                color={getIntentColor(action.intent)}
+                color={action?.color ? action.color : getIntentColor(action.intent)}
                 leftSection={action.icon}
                 rightSection={<ChevronDown size={14} />}
                 disabled={action.disabled}
@@ -78,7 +78,7 @@ export const PageActions = memo(function PageActions({ actions = [], customButto
                       <Menu.Item
                         key={child.key}
                         leftSection={child.icon}
-                        color={getIntentColor(child.intent)}
+                        color={action?.color ? action.color : getIntentColor(child.intent)}
                         disabled={child.disabled}
                         onClick={() => child.onClick?.(child.key || '')}
                       >
@@ -95,7 +95,7 @@ export const PageActions = memo(function PageActions({ actions = [], customButto
           const StandaloneButton = (
             <Button
               variant={action.variant || 'transparent'}
-              color={getIntentColor(action.intent)}
+              color={action?.color ? action.color : getIntentColor(action.intent)}
               leftSection={action.icon}
               disabled={action.disabled}
               onClick={() => action.onClick?.(action.key || '')}
@@ -142,7 +142,7 @@ export const PageActions = memo(function PageActions({ actions = [], customButto
                         <Menu.Item
                           key={child.key}
                           leftSection={child.icon}
-                          color={getIntentColor(child.intent)}
+                          color={action?.color ? action.color : getIntentColor(child.intent)}
                           disabled={child.disabled}
                           onClick={() => child.onClick?.(child.key || '')}
                           style={{ paddingLeft: '1.5rem' }}
@@ -157,7 +157,7 @@ export const PageActions = memo(function PageActions({ actions = [], customButto
                 );
               }
 
-              const color = getIntentColor(action.intent);
+              const color = action?.color ? action.color : getIntentColor(action.intent);
               const realColor = color === undefined ? 'brand' : color;
 
               return (
diff --git a/packages/ui/src/components/actions-tools/types.ts b/packages/ui/src/components/actions-tools/types.ts
index abf0459..f465efc 100644
--- a/packages/ui/src/components/actions-tools/types.ts
+++ b/packages/ui/src/components/actions-tools/types.ts
@@ -23,6 +23,8 @@ export interface BaseAction {
 
   /** Semantic context to determine visual emphasis (color mapping). */
   intent?: ActionIntent;
+
+  color?: string;
   /** Callback triggered upon action execution. */
   onClick?: (key: string) => void;
 }