diff --git a/web/src/App.tsx b/web/src/App.tsx
index 27cbd71..4cba465 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import { Provider, useSelector } from 'react-redux';
-import { RootState, store } from './store';
+import { AppActions, RootState, store } from './store';
 import { ToastContainer } from 'react-toastify';
 import { Box } from 'lr-components';
 import { NextUIProvider } from '@nextui-org/react';
+import AppActionHook from './components/AppActionHook';
 
 function App() {
   const show = useSelector((state: RootState) => state.state.show);
@@ -11,6 +12,25 @@ function App() {
     show && (
       <NextUIProvider>
         <Provider store={store}>
+          <Box
+            display='flex'
+            position='absolute'
+            flexWrap='wrap'
+            justifyContent='center'
+            alignItems='center'
+            flexDirection='column'
+            width={'50%'}
+            height={'50%'}
+            rGap={10}
+          >
+            {Object.keys(AppActions).map((action) => {
+              return (
+                <AppActionHook
+                  action={action as keyof typeof AppActions}
+                ></AppActionHook>
+              );
+            })}
+          </Box>
           <Box
             width={'100%'}
             height={'100%'}
diff --git a/web/src/components/AppActionHook.tsx b/web/src/components/AppActionHook.tsx
new file mode 100644
index 0000000..6030275
--- /dev/null
+++ b/web/src/components/AppActionHook.tsx
@@ -0,0 +1,36 @@
+import { AppActions, AppDispatch } from '../store';
+import { useNuiEvent } from '../hooks/useNuiEvent';
+import { useDispatch } from 'react-redux';
+import { Box, Text } from 'lr-components';
+import { isEnvBrowser } from '../utils/misc';
+
+interface Props {
+  action: keyof typeof AppActions;
+}
+
+function AppActionHook(props: Props) {
+  const dispatch = useDispatch<AppDispatch>();
+  const isDev = isEnvBrowser();
+  console.log('AppActionHook', props.action);
+  useNuiEvent(props.action, (data) => {
+    //dynamicDispatch(action, data);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const a = AppActions[props.action] as any;
+    dispatch(a(data));
+  });
+
+  return (
+    isDev && (
+      <Box
+        rPadding={5}
+        backgroundColor='#1f1f1f'
+        rBorderRadius={10}
+        opacity={0.5}
+      >
+        <Text>{props.action}</Text>
+      </Box>
+    )
+  );
+}
+
+export default AppActionHook;
diff --git a/web/src/store/index.ts b/web/src/store/index.ts
index d848917..32ea123 100644
--- a/web/src/store/index.ts
+++ b/web/src/store/index.ts
@@ -4,6 +4,8 @@ export const store = configureStore({
   reducer: {},
 });
 
+export const AppActions = {};
+
 // Infer the `RootState` and `AppDispatch` types from the store itself
 export type RootState = ReturnType<typeof store.getState>;
 // Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}