diff --git a/src/client/components/feed/FeedArchivePageButton.tsx b/src/client/components/feed/FeedArchivePageButton.tsx
index 50f8131..6aa9572 100644
--- a/src/client/components/feed/FeedArchivePageButton.tsx
+++ b/src/client/components/feed/FeedArchivePageButton.tsx
@@ -3,7 +3,7 @@ import { Button } from '../ui/button';
 import { LuArchive, LuArchiveRestore } from 'react-icons/lu';
 import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
 import { AppRouterOutput, trpc } from '@/api/trpc';
-import { useCurrentWorkspaceId } from '@/store/user';
+import { useCurrentWorkspaceId, useHasAdminPermission } from '@/store/user';
 import { DynamicVirtualList } from '../DynamicVirtualList';
 import { get } from 'lodash-es';
 import { FeedEventItem } from './FeedEventItem';
@@ -28,6 +28,7 @@ export const FeedArchivePageButton: React.FC<FeedArchivePageButtonProps> =
     const clearAllArchivedEventsMutation =
       trpc.feed.clearAllArchivedEvents.useMutation();
     const trpcUtils = trpc.useUtils();
+    const hasAdminPermission = useHasAdminPermission();
 
     const {
       data,
@@ -87,9 +88,11 @@ export const FeedArchivePageButton: React.FC<FeedArchivePageButtonProps> =
           <div className="flex items-center justify-between">
             <h1 className="text-lg font-bold">{t('Archived Events')}</h1>
 
-            <AlertConfirm onConfirm={handleClear}>
-              <Button size="sm">{t('Clear')}</Button>
-            </AlertConfirm>
+            {hasAdminPermission && (
+              <AlertConfirm onConfirm={handleClear}>
+                <Button size="sm">{t('Clear')}</Button>
+              </AlertConfirm>
+            )}
           </div>
 
           <Separator className="my-2" />
diff --git a/src/client/components/monitor/MonitorInfo.tsx b/src/client/components/monitor/MonitorInfo.tsx
index bc816e5..d5c68ff 100644
--- a/src/client/components/monitor/MonitorInfo.tsx
+++ b/src/client/components/monitor/MonitorInfo.tsx
@@ -6,7 +6,7 @@ import {
   defaultSuccessHandler,
   trpc,
 } from '../../api/trpc';
-import { useCurrentWorkspaceId } from '../../store/user';
+import { useCurrentWorkspaceId, useHasAdminPermission } from '../../store/user';
 import { Loading } from '../Loading';
 import { getMonitorLink } from './provider';
 import { NotFoundTip } from '../NotFoundTip';
@@ -35,6 +35,7 @@ export const MonitorInfo: React.FC<MonitorInfoProps> = React.memo((props) => {
   const navigate = useNavigate();
   const [showBadge, setShowBadge] = useState(false);
   const isMobile = useIsMobile();
+  const hasAdminPermission = useHasAdminPermission();
 
   const {
     data: monitorInfo,
@@ -186,76 +187,78 @@ export const MonitorInfo: React.FC<MonitorInfoProps> = React.memo((props) => {
                 </span>
               </div>
 
-              <div className="flex gap-2">
-                <Button
-                  type="primary"
-                  onClick={() => {
-                    navigate({
-                      to: '/monitor/$monitorId/edit',
-                      params: {
-                        monitorId: monitorInfo.id,
-                      },
-                    });
-                  }}
-                >
-                  {t('Edit')}
-                </Button>
-
-                {monitorInfo.active ? (
+              {hasAdminPermission && (
+                <div className="flex gap-2">
                   <Button
-                    loading={changeActiveMutation.isLoading}
-                    onClick={handleStop}
+                    type="primary"
+                    onClick={() => {
+                      navigate({
+                        to: '/monitor/$monitorId/edit',
+                        params: {
+                          monitorId: monitorInfo.id,
+                        },
+                      });
+                    }}
                   >
-                    {t('Stop')}
+                    {t('Edit')}
                   </Button>
-                ) : (
-                  <Button
-                    loading={changeActiveMutation.isLoading}
-                    onClick={handleStart}
+
+                  {monitorInfo.active ? (
+                    <Button
+                      loading={changeActiveMutation.isLoading}
+                      onClick={handleStop}
+                    >
+                      {t('Stop')}
+                    </Button>
+                  ) : (
+                    <Button
+                      loading={changeActiveMutation.isLoading}
+                      onClick={handleStart}
+                    >
+                      {t('Start')}
+                    </Button>
+                  )}
+
+                  <Dropdown
+                    trigger={['click']}
+                    placement="bottomRight"
+                    menu={{
+                      items: [
+                        {
+                          key: 'badge',
+                          label: t('Show Badge'),
+                          onClick: () => setShowBadge(true),
+                        },
+                        {
+                          type: 'divider',
+                        },
+                        {
+                          key: 'delete',
+                          label: t('Delete'),
+                          danger: true,
+                          onClick: handleDelete,
+                        },
+                      ],
+                    }}
                   >
-                    {t('Start')}
-                  </Button>
-                )}
+                    <Button icon={<MoreOutlined />} />
+                  </Dropdown>
 
-                <Dropdown
-                  trigger={['click']}
-                  placement="bottomRight"
-                  menu={{
-                    items: [
-                      {
-                        key: 'badge',
-                        label: t('Show Badge'),
-                        onClick: () => setShowBadge(true),
-                      },
-                      {
-                        type: 'divider',
-                      },
-                      {
-                        key: 'delete',
-                        label: t('Delete'),
-                        danger: true,
-                        onClick: handleDelete,
-                      },
-                    ],
-                  }}
-                >
-                  <Button icon={<MoreOutlined />} />
-                </Dropdown>
-
-                <Modal
-                  open={showBadge}
-                  onCancel={() => setShowBadge(false)}
-                  onOk={() => setShowBadge(false)}
-                  destroyOnClose={true}
-                  centered={true}
-                >
-                  <MonitorBadgeView
-                    workspaceId={workspaceId}
-                    monitorId={monitorId}
-                    monitorName={monitorInfo.name}
-                  />
-                </Modal>
-              </div>
+                  <Modal
+                    open={showBadge}
+                    onCancel={() => setShowBadge(false)}
+                    onOk={() => setShowBadge(false)}
+                    destroyOnClose={true}
+                    centered={true}
+                  >
+                    <MonitorBadgeView
+                      workspaceId={workspaceId}
+                      monitorId={monitorId}
+                      monitorName={monitorInfo.name}
+                    />
+                  </Modal>
+                </div>
+              )}
             </Space>
 
             <div className="text-black text-opacity-75 dark:text-gray-200">
@@ -298,29 +301,31 @@ export const MonitorInfo: React.FC<MonitorInfoProps> = React.memo((props) => {
             <MonitorDataChart monitorId={monitorId} />
           </Card>
 
-          <div className="text-right">
-            <Dropdown
-              trigger={['click']}
-              menu={{
-                items: [
-                  {
-                    key: 'events',
-                    label: t('Events'),
-                    onClick: handleClearEvents,
-                  },
-                  {
-                    key: 'heartbeats',
-                    label: t('Heartbeats'),
-                    onClick: handleClearData,
-                  },
-                ],
-              }}
-            >
-              <Button icon={<DeleteOutlined />} danger={true}>
-                {t('Clear Data')}
-              </Button>
-            </Dropdown>
-          </div>
+          {hasAdminPermission && (
+            <div className="text-right">
+              <Dropdown
+                trigger={['click']}
+                menu={{
+                  items: [
+                    {
+                      key: 'events',
+                      label: t('Events'),
+                      onClick: handleClearEvents,
+                    },
+                    {
+                      key: 'heartbeats',
+                      label: t('Heartbeats'),
+                      onClick: handleClearData,
+                    },
+                  ],
+                }}
+              >
+                <Button icon={<DeleteOutlined />} danger={true}>
+                  {t('Clear Data')}
+                </Button>
+              </Dropdown>
+            </div>
+          )}
 
           <MonitorEventList monitorId={monitorId} />
         </Space>
diff --git a/src/client/components/monitor/StatusPage/useAllowEdit.ts b/src/client/components/monitor/StatusPage/useAllowEdit.ts
index 9d87294..66b2592 100644
--- a/src/client/components/monitor/StatusPage/useAllowEdit.ts
+++ b/src/client/components/monitor/StatusPage/useAllowEdit.ts
@@ -15,5 +15,5 @@ export function useAllowEdit(workspaceId?: string): boolean {
     }
   );
 
-  return role === ROLES.owner;
+  return role === ROLES.owner || role === ROLES.admin;
 }
diff --git a/src/client/components/website/WebsiteLighthouseBtn.tsx b/src/client/components/website/WebsiteLighthouseBtn.tsx
index 219a3bf..e88e629 100644
--- a/src/client/components/website/WebsiteLighthouseBtn.tsx
+++ b/src/client/components/website/WebsiteLighthouseBtn.tsx
@@ -20,13 +20,14 @@ import {
   SheetTrigger,
 } from '../ui/sheet';
 import { defaultErrorHandler, defaultSuccessHandler, trpc } from '@/api/trpc';
-import { useCurrentWorkspaceId } from '@/store/user';
+import { useCurrentWorkspaceId, useHasPermission } from '@/store/user';
 import { formatDate } from '@/utils/date';
 import { Input } from '../ui/input';
 import { toast } from 'sonner';
 import { useEvent } from '@/hooks/useEvent';
 import { Badge } from '../ui/badge';
 import { LuArrowRight, LuPlus } from 'react-icons/lu';
+import { ROLES } from '@tianji/shared';
 
 interface WebsiteLighthouseBtnProps {
   websiteId: string;
@@ -37,6 +38,7 @@ export const WebsiteLighthouseBtn: React.FC<WebsiteLighthouseBtnProps> =
     const { t } = useTranslation();
     const [url, setUrl] = useState('');
     const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
+    const hasAdminPermission = useHasPermission(ROLES.admin);
 
     const { data, hasNextPage, fetchNextPage, isFetchingNextPage, refetch } =
       trpc.website.getLighthouseReport.useInfiniteQuery(
@@ -92,47 +94,51 @@ export const WebsiteLighthouseBtn: React.FC<WebsiteLighthouseBtnProps> =
           </SheetHeader>
 
           <div className="mt-2 flex flex-col gap-2">
-            <div>
-              <Dialog
-                open={isCreateDialogOpen}
-                onOpenChange={setIsCreateDialogOpen}
-              >
-                <DialogTrigger>
-                  <Button
-                    variant="outline"
-                    loading={createMutation.isLoading}
-                    Icon={LuPlus}
-                  >
-                    {t('Create Report')}
-                  </Button>
-                </DialogTrigger>
-                <DialogContent>
-                  <DialogHeader>
-                    <DialogTitle>{t('Generate Lighthouse Report')}</DialogTitle>
-                    <DialogDescription>
-                      {t('Its will take a while to generate the report.')}
-                    </DialogDescription>
-                  </DialogHeader>
-
-                  <div>
-                    <Input
-                      value={url}
-                      onChange={(e) => setUrl(e.target.value)}
-                      placeholder="https://google.com"
-                    />
-                  </div>
-
-                  <DialogFooter>
+            {hasAdminPermission && (
+              <div>
+                <Dialog
+                  open={isCreateDialogOpen}
+                  onOpenChange={setIsCreateDialogOpen}
+                >
+                  <DialogTrigger>
                     <Button
+                      variant="outline"
                       loading={createMutation.isLoading}
-                      onClick={handleGenerateReport}
+                      Icon={LuPlus}
                     >
-                      {t('Create')}
+                      {t('Create Report')}
                     </Button>
-                  </DialogFooter>
-                </DialogContent>
-              </Dialog>
-            </div>
+                  </DialogTrigger>
+                  <DialogContent>
+                    <DialogHeader>
+                      <DialogTitle>
+                        {t('Generate Lighthouse Report')}
+                      </DialogTitle>
+                      <DialogDescription>
+                        {t('Its will take a while to generate the report.')}
+                      </DialogDescription>
+                    </DialogHeader>
+
+                    <div>
+                      <Input
+                        value={url}
+                        onChange={(e) => setUrl(e.target.value)}
+                        placeholder="https://google.com"
+                      />
+                    </div>
+
+                    <DialogFooter>
+                      <Button
+                        loading={createMutation.isLoading}
+                        onClick={handleGenerateReport}
+                      >
+                        {t('Create')}
+                      </Button>
+                    </DialogFooter>
+                  </DialogContent>
+                </Dialog>
+              </div>
+            )}
 
             <div className="flex flex-col gap-2">
               {allData.map((report) => {
diff --git a/src/client/routes/feed.tsx b/src/client/routes/feed.tsx
index 17fa967..f66baca 100644
--- a/src/client/routes/feed.tsx
+++ b/src/client/routes/feed.tsx
@@ -6,7 +6,7 @@ import { Button } from '@/components/ui/button';
 import { useDataReady } from '@/hooks/useDataReady';
 import { useEvent } from '@/hooks/useEvent';
 import { Layout } from '@/components/layout';
-import { useCurrentWorkspaceId } from '@/store/user';
+import { useCurrentWorkspaceId, useHasAdminPermission } from '@/store/user';
 import { routeAuthBeforeLoad } from '@/utils/route';
 import { cn } from '@/utils/style';
 import { useTranslation } from '@i18next-toolkit/react';
@@ -32,6 +32,7 @@ function PageComponent() {
   const pathname = useRouterState({
     select: (state) => state.location.pathname,
   });
+  const hasAdminPermission = useHasAdminPermission();
 
   const items = channels.map((item) => ({
     id: item.id,
@@ -68,14 +69,18 @@ function PageComponent() {
             <CommonHeader
               title={t('Feed')}
               actions={
-                <Button
-                  className={cn(pathname === '/feed/add' && '!bg-muted')}
-                  variant="outline"
-                  Icon={LuPlus}
-                  onClick={handleClickAdd}
-                >
-                  {t('Add')}
-                </Button>
+                <>
+                  {hasAdminPermission && (
+                    <Button
+                      className={cn(pathname === '/feed/add' && '!bg-muted')}
+                      variant="outline"
+                      Icon={LuPlus}
+                      onClick={handleClickAdd}
+                    >
+                      {t('Add')}
+                    </Button>
+                  )}
+                </>
               }
             />
           }
diff --git a/src/client/routes/feed/$channelId/index.tsx b/src/client/routes/feed/$channelId/index.tsx
index c8b32b9..a29331b 100644
--- a/src/client/routes/feed/$channelId/index.tsx
+++ b/src/client/routes/feed/$channelId/index.tsx
@@ -6,7 +6,7 @@ import {
 } from '@/api/trpc';
 import { CommonHeader } from '@/components/CommonHeader';
 import { CommonWrapper } from '@/components/CommonWrapper';
-import { useCurrentWorkspaceId } from '@/store/user';
+import { useCurrentWorkspaceId, useHasAdminPermission } from '@/store/user';
 import { routeAuthBeforeLoad } from '@/utils/route';
 import { useTranslation } from '@i18next-toolkit/react';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
@@ -46,6 +46,7 @@ function PageComponent() {
     workspaceId,
     channelId,
   });
+  const hasAdminPermission = useHasAdminPermission();
 
   const {
     data,
@@ -53,7 +54,6 @@ function PageComponent() {
     hasNextPage,
     fetchNextPage,
     isFetchingNextPage,
-    refetch,
   } = trpc.feed.fetchEventsByCursor.useInfiniteQuery(
     {
       workspaceId,
@@ -122,28 +122,32 @@ function PageComponent() {
 
               <FeedArchivePageButton channelId={channelId} />
 
-              <Button
-                variant="outline"
-                size="icon"
-                Icon={LuPencil}
-                onClick={() =>
-                  navigate({
-                    to: '/feed/$channelId/edit',
-                    params: {
-                      channelId,
-                    },
-                  })
-                }
-              />
+              {hasAdminPermission && (
+                <Button
+                  variant="outline"
+                  size="icon"
+                  Icon={LuPencil}
+                  onClick={() =>
+                    navigate({
+                      to: '/feed/$channelId/edit',
+                      params: {
+                        channelId,
+                      },
+                    })
+                  }
+                />
+              )}
 
-              <AlertConfirm
-                title={t('Confirm to delete this channel?')}
-                description={t('All feed will be remove')}
-                content={t('It will permanently delete the relevant data')}
-                onConfirm={handleDelete}
-              >
-                <Button variant="outline" size="icon" Icon={LuTrash} />
-              </AlertConfirm>
+              {hasAdminPermission && (
+                <AlertConfirm
+                  title={t('Confirm to delete this channel?')}
+                  description={t('All feed will be remove')}
+                  content={t('It will permanently delete the relevant data')}
+                  onConfirm={handleDelete}
+                >
+                  <Button variant="outline" size="icon" Icon={LuTrash} />
+                </AlertConfirm>
+              )}
             </div>
           }
         />
@@ -174,14 +178,16 @@ function PageComponent() {
                     </Button>
                   )}
 
-                  <Button
-                    size="icon"
-                    variant="secondary"
-                    className="h-6 w-6 overflow-hidden"
-                    onClick={() => handleArchive(item)}
-                  >
-                    <LuArchive size={12} />
-                  </Button>
+                  {hasAdminPermission && (
+                    <Button
+                      size="icon"
+                      variant="secondary"
+                      className="h-6 w-6 overflow-hidden"
+                      onClick={() => handleArchive(item)}
+                    >
+                      <LuArchive size={12} />
+                    </Button>
+                  )}
                 </>
               }
             />
diff --git a/src/client/routes/monitor.tsx b/src/client/routes/monitor.tsx
index c4ff671..28c80dd 100644
--- a/src/client/routes/monitor.tsx
+++ b/src/client/routes/monitor.tsx
@@ -7,7 +7,7 @@ import { Button } from '@/components/ui/button';
 import { useDataReady } from '@/hooks/useDataReady';
 import { useEvent } from '@/hooks/useEvent';
 import { Layout } from '@/components/layout';
-import { useCurrentWorkspaceId } from '@/store/user';
+import { useCurrentWorkspaceId, useHasAdminPermission } from '@/store/user';
 import { routeAuthBeforeLoad } from '@/utils/route';
 import { cn } from '@/utils/style';
 import { useTranslation } from '@i18next-toolkit/react';
@@ -34,6 +34,7 @@ function MonitorComponent() {
   const pathname = useRouterState({
     select: (state) => state.location.pathname,
   });
+  const hasAdminPermission = useHasAdminPermission();
 
   const items = data.map((item) => ({
     id: item.id,
@@ -78,14 +79,18 @@ function MonitorComponent() {
             <CommonHeader
               title={t('Monitor')}
               actions={
-                <Button
-                  className={cn(pathname === '/monitor/add' && '!bg-muted')}
-                  variant="outline"
-                  Icon={LuPlus}
-                  onClick={handleClickAdd}
-                >
-                  {t('Add')}
-                </Button>
+                <>
+                  {hasAdminPermission && (
+                    <Button
+                      className={cn(pathname === '/monitor/add' && '!bg-muted')}
+                      variant="outline"
+                      Icon={LuPlus}
+                      onClick={handleClickAdd}
+                    >
+                      {t('Add')}
+                    </Button>
+                  )}
+                </>
               }
             />
           }
diff --git a/src/client/routes/monitor/$monitorId/index.tsx b/src/client/routes/monitor/$monitorId/index.tsx
index caf183b..060abdd 100644
--- a/src/client/routes/monitor/$monitorId/index.tsx
+++ b/src/client/routes/monitor/$monitorId/index.tsx
@@ -13,7 +13,7 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { ScrollArea } from '@/components/ui/scroll-area';
-import { useCurrentWorkspaceId } from '@/store/user';
+import { useCurrentWorkspaceId, useHasAdminPermission } from '@/store/user';
 import { routeAuthBeforeLoad } from '@/utils/route';
 import { useTranslation } from '@i18next-toolkit/react';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
@@ -34,6 +34,7 @@ function MonitorDetailComponent() {
   });
   const { t } = useTranslation();
   const navigate = useNavigate();
+  const hasAdminPermission = useHasAdminPermission();
 
   if (!monitorId) {
     return <ErrorTip />;
@@ -53,35 +54,42 @@ function MonitorDetailComponent() {
         <CommonHeader
           title={monitor.name}
           actions={
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild={true} className="cursor-pointer">
-                <Button variant="outline" size="icon" className="shrink-0">
-                  <LuMoreVertical />
-                </Button>
-              </DropdownMenuTrigger>
+            <>
+              {hasAdminPermission && (
+                <DropdownMenu>
+                  <DropdownMenuTrigger
+                    asChild={true}
+                    className="cursor-pointer"
+                  >
+                    <Button variant="outline" size="icon" className="shrink-0">
+                      <LuMoreVertical />
+                    </Button>
+                  </DropdownMenuTrigger>
 
-              <DropdownMenuContent>
-                <DropdownMenuItem
-                  onClick={() =>
-                    navigate({
-                      to: '/monitor/add',
-                      search: pick(monitor, [
-                        'name',
-                        'type',
-                        'notifications',
-                        'interval',
-                        'maxRetries',
-                        'trendingMode',
-                        'payload',
-                      ]),
-                    })
-                  }
-                >
-                  <LuCopy className="mr-2" />
-                  {t('Duplicate')}
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
+                  <DropdownMenuContent>
+                    <DropdownMenuItem
+                      onClick={() =>
+                        navigate({
+                          to: '/monitor/add',
+                          search: pick(monitor, [
+                            'name',
+                            'type',
+                            'notifications',
+                            'interval',
+                            'maxRetries',
+                            'trendingMode',
+                            'payload',
+                          ]),
+                        })
+                      }
+                    >
+                      <LuCopy className="mr-2" />
+                      {t('Duplicate')}
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              )}
+            </>
           }
         />
       }
diff --git a/src/client/routes/page.tsx b/src/client/routes/page.tsx
index ae009a0..3375d5a 100644
--- a/src/client/routes/page.tsx
+++ b/src/client/routes/page.tsx
@@ -6,7 +6,7 @@ import { Button } from '@/components/ui/button';
 import { useDataReady } from '@/hooks/useDataReady';
 import { useEvent } from '@/hooks/useEvent';
 import { Layout } from '@/components/layout';
-import { useCurrentWorkspaceId } from '@/store/user';
+import { useCurrentWorkspaceId, useHasAdminPermission } from '@/store/user';
 import { routeAuthBeforeLoad } from '@/utils/route';
 import { cn } from '@/utils/style';
 import { useTranslation } from '@i18next-toolkit/react';
@@ -32,6 +32,7 @@ function PageComponent() {
   const pathname = useRouterState({
     select: (state) => state.location.pathname,
   });
+  const hasAdminPermission = useHasAdminPermission();
 
   const items = data.map((item) => ({
     id: item.id,
@@ -68,14 +69,18 @@ function PageComponent() {
             <CommonHeader
               title={t('Pages')}
               actions={
-                <Button
-                  className={cn(pathname === '/page/add' && '!bg-muted')}
-                  variant="outline"
-                  Icon={LuPlus}
-                  onClick={handleClickAdd}
-                >
-                  {t('Add')}
-                </Button>
+                <>
+                  {hasAdminPermission && (
+                    <Button
+                      className={cn(pathname === '/page/add' && '!bg-muted')}
+                      variant="outline"
+                      Icon={LuPlus}
+                      onClick={handleClickAdd}
+                    >
+                      {t('Add')}
+                    </Button>
+                  )}
+                </>
               }
             />
           }
diff --git a/src/client/routes/page/$slug.tsx b/src/client/routes/page/$slug.tsx
index da728d3..bc4847b 100644
--- a/src/client/routes/page/$slug.tsx
+++ b/src/client/routes/page/$slug.tsx
@@ -8,6 +8,7 @@ import { NotFoundTip } from '@/components/NotFoundTip';
 import { MonitorStatusPage } from '@/components/monitor/StatusPage';
 import { Button } from '@/components/ui/button';
 import { useEvent } from '@/hooks/useEvent';
+import { useHasAdminPermission } from '@/store/user';
 import { routeAuthBeforeLoad } from '@/utils/route';
 import { useTranslation } from '@i18next-toolkit/react';
 import { Link, createFileRoute, useNavigate } from '@tanstack/react-router';
@@ -26,6 +27,7 @@ function PageComponent() {
     slug,
   });
   const trpcUtils = trpc.useUtils();
+  const hasAdminPermission = useHasAdminPermission();
 
   const deletePageMutation = trpc.monitor.deletePage.useMutation();
 
@@ -68,13 +70,15 @@ function PageComponent() {
           title={pageInfo.title}
           actions={
             <div className="space-x-2">
-              <AlertConfirm
-                title={t('Confirm to delete this page?')}
-                content={t('It will permanently delete the relevant data')}
-                onConfirm={handleDelete}
-              >
-                <Button variant="outline" size="icon" Icon={LuTrash} />
-              </AlertConfirm>
+              {hasAdminPermission && (
+                <AlertConfirm
+                  title={t('Confirm to delete this page?')}
+                  content={t('It will permanently delete the relevant data')}
+                  onConfirm={handleDelete}
+                >
+                  <Button variant="outline" size="icon" Icon={LuTrash} />
+                </AlertConfirm>
+              )}
 
               <Link to="/status/$slug" params={{ slug }} target="_blank">
                 <Button variant="outline" Icon={LuEye}>
diff --git a/src/client/routes/settings/notifications.tsx b/src/client/routes/settings/notifications.tsx
index 586fc9e..cd9de41 100644
--- a/src/client/routes/settings/notifications.tsx
+++ b/src/client/routes/settings/notifications.tsx
@@ -11,10 +11,11 @@ import {
   NotificationInfoModal,
 } from '../../components/modals/NotificationInfo';
 import { useEvent } from '../../hooks/useEvent';
-import { useCurrentWorkspaceId } from '../../store/user';
+import { useCurrentWorkspaceId, useHasAdminPermission } from '../../store/user';
 import { CommonHeader } from '@/components/CommonHeader';
 import { Button } from '@/components/ui/button';
 import { LuFileEdit, LuPlus, LuTrash2 } from 'react-icons/lu';
+import { compact } from 'lodash-es';
 
 export const Route = createFileRoute('/settings/notifications')({
   beforeLoad: routeAuthBeforeLoad,
@@ -31,6 +32,7 @@ function PageComponent() {
   const [editingFormData, setEditingFormData] = useState<
     NotificationFormValues | undefined
   >(undefined);
+  const hasAdminPermission = useHasAdminPermission();
 
   const upsertMutation = trpc.notification.upsert.useMutation();
   const deleteMutation = trpc.notification.delete.useMutation();
@@ -69,13 +71,15 @@ function PageComponent() {
           title={t('Notifications')}
           actions={
             <>
-              <Button
-                variant="outline"
-                Icon={LuPlus}
-                onClick={() => handleOpenModal()}
-              >
-                {t('New')}
-              </Button>
+              {hasAdminPermission && (
+                <Button
+                  variant="outline"
+                  Icon={LuPlus}
+                  onClick={() => handleOpenModal()}
+                >
+                  {t('New')}
+                </Button>
+              )}
             </>
           }
         />
@@ -88,35 +92,39 @@ function PageComponent() {
             dataSource={list}
             renderItem={(item) => (
               <List.Item
-                actions={[
-                  <Button
-                    variant="default"
-                    Icon={LuFileEdit}
-                    onClick={() => {
-                      handleOpenModal({
-                        id: item.id,
-                        name: item.name,
-                        type: item.type,
-                        payload: item.payload as Record<string, any>,
-                      });
-                    }}
-                  >
-                    {t('Edit')}
-                  </Button>,
-                  <Popconfirm
-                    title={t('Is delete this item?')}
-                    okButtonProps={{
-                      danger: true,
-                    }}
-                    onConfirm={() => {
-                      handleDelete(item.id);
-                    }}
-                  >
-                    <Button variant="destructive" size="icon">
-                      <LuTrash2 />
+                actions={compact([
+                  hasAdminPermission && (
+                    <Button
+                      variant="default"
+                      Icon={LuFileEdit}
+                      onClick={() => {
+                        handleOpenModal({
+                          id: item.id,
+                          name: item.name,
+                          type: item.type,
+                          payload: item.payload as Record<string, any>,
+                        });
+                      }}
+                    >
+                      {t('Edit')}
                     </Button>
-                  </Popconfirm>,
-                ]}
+                  ),
+                  hasAdminPermission && (
+                    <Popconfirm
+                      title={t('Is delete this item?')}
+                      okButtonProps={{
+                        danger: true,
+                      }}
+                      onConfirm={() => {
+                        handleDelete(item.id);
+                      }}
+                    >
+                      <Button variant="destructive" size="icon">
+                        <LuTrash2 />
+                      </Button>
+                    </Popconfirm>
+                  ),
+                ])}
               >
                 <List.Item.Meta title={item.name} />
               </List.Item>
diff --git a/src/client/routes/settings/workspace.tsx b/src/client/routes/settings/workspace.tsx
index d37af05..27079d1 100644
--- a/src/client/routes/settings/workspace.tsx
+++ b/src/client/routes/settings/workspace.tsx
@@ -3,7 +3,7 @@ import { createFileRoute } from '@tanstack/react-router';
 import { useTranslation } from '@i18next-toolkit/react';
 import { CommonWrapper } from '@/components/CommonWrapper';
 import { ScrollArea } from '@/components/ui/scroll-area';
-import { useCurrentWorkspace } from '../../store/user';
+import { useCurrentWorkspace, useHasAdminPermission } from '../../store/user';
 import { CommonHeader } from '@/components/CommonHeader';
 import {
   Card,
@@ -39,6 +39,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
 import { AlertConfirm } from '@/components/AlertConfirm';
 import { ROLES } from '@tianji/shared';
+import { cn } from '@/utils/style';
 
 export const Route = createFileRoute('/settings/workspace')({
   beforeLoad: routeAuthBeforeLoad,
@@ -57,6 +58,7 @@ const columnHelper = createColumnHelper<MemberInfo>();
 function PageComponent() {
   const { t } = useTranslation();
   const { id: workspaceId, name, role } = useCurrentWorkspace();
+  const hasAdminPermission = useHasAdminPermission();
   const { data: members = [], refetch: refetchMembers } =
     trpc.workspace.members.useQuery({
       workspaceId,
@@ -128,6 +130,10 @@ function PageComponent() {
               {t('Current Workspace:')} {name}
             </CardHeader>
             <CardContent>
+              <div>
+                <span className="mr-2">{t('Current Role')}:</span>
+                <span className="font-semibold">{role}</span>
+              </div>
               <div>
                 <span className="mr-2">{t('Workspace ID')}:</span>
                 <span>
@@ -140,7 +146,10 @@ function PageComponent() {
           </Card>
 
           <Form {...form}>
-            <form onSubmit={form.handleSubmit(handleInvite)}>
+            <form
+              onSubmit={form.handleSubmit(handleInvite)}
+              className={cn(!hasAdminPermission && 'opacity-50')}
+            >
               <Card>
                 <CardHeader className="text-lg font-bold">
                   {t('Invite new members by email address')}
@@ -166,7 +175,11 @@ function PageComponent() {
                 </CardContent>
 
                 <CardFooter>
-                  <Button type="submit" loading={isLoading}>
+                  <Button
+                    type="submit"
+                    loading={isLoading}
+                    disabled={!hasAdminPermission}
+                  >
                     {t('Invite')}
                   </Button>
                 </CardFooter>
diff --git a/src/client/routes/survey.tsx b/src/client/routes/survey.tsx
index 15e649c..182eacd 100644
--- a/src/client/routes/survey.tsx
+++ b/src/client/routes/survey.tsx
@@ -6,7 +6,7 @@ import { Button } from '@/components/ui/button';
 import { useDataReady } from '@/hooks/useDataReady';
 import { useEvent } from '@/hooks/useEvent';
 import { Layout } from '@/components/layout';
-import { useCurrentWorkspaceId } from '@/store/user';
+import { useCurrentWorkspaceId, useHasAdminPermission } from '@/store/user';
 import { routeAuthBeforeLoad } from '@/utils/route';
 import { cn } from '@/utils/style';
 import { useTranslation } from '@i18next-toolkit/react';
@@ -35,6 +35,7 @@ function PageComponent() {
   const pathname = useRouterState({
     select: (state) => state.location.pathname,
   });
+  const hasAdminPermission = useHasAdminPermission();
 
   const items = data.map((item) => ({
     id: item.id,
@@ -71,14 +72,18 @@ function PageComponent() {
             <CommonHeader
               title={t('Survey')}
               actions={
-                <Button
-                  className={cn(pathname === '/survey/add' && '!bg-muted')}
-                  variant="outline"
-                  Icon={LuPlus}
-                  onClick={handleClickAdd}
-                >
-                  {t('Add')}
-                </Button>
+                <>
+                  {hasAdminPermission && (
+                    <Button
+                      className={cn(pathname === '/survey/add' && '!bg-muted')}
+                      variant="outline"
+                      Icon={LuPlus}
+                      onClick={handleClickAdd}
+                    >
+                      {t('Add')}
+                    </Button>
+                  )}
+                </>
               }
             />
           }
diff --git a/src/client/routes/survey/$surveyId/index.tsx b/src/client/routes/survey/$surveyId/index.tsx
index 0bc8033..e3c1846 100644
--- a/src/client/routes/survey/$surveyId/index.tsx
+++ b/src/client/routes/survey/$surveyId/index.tsx
@@ -6,8 +6,7 @@ import {
 } from '@/api/trpc';
 import { CommonHeader } from '@/components/CommonHeader';
 import { CommonWrapper } from '@/components/CommonWrapper';
-import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
-import { useCurrentWorkspaceId } from '@/store/user';
+import { useCurrentWorkspaceId, useHasAdminPermission } from '@/store/user';
 import { routeAuthBeforeLoad } from '@/utils/route';
 import { useTranslation } from '@i18next-toolkit/react';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
@@ -16,12 +15,11 @@ import { AlertConfirm } from '@/components/AlertConfirm';
 import { LuPencil, LuTrash } from 'react-icons/lu';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { DataTable, createColumnHelper } from '@/components/DataTable';
+import { createColumnHelper } from '@/components/DataTable';
 import { useMemo } from 'react';
 import { SurveyDownloadBtn } from '@/components/survey/SurveyDownloadBtn';
 import dayjs from 'dayjs';
 import { SurveyUsageBtn } from '@/components/survey/SurveyUsageBtn';
-import { Scrollbar } from '@radix-ui/react-scroll-area';
 import { VirtualizedInfiniteDataTable } from '@/components/VirtualizedInfiniteDataTable';
 import { Loading } from '@/components/Loading';
 
@@ -39,6 +37,7 @@ function PageComponent() {
   const { surveyId } = Route.useParams<{ surveyId: string }>();
   const workspaceId = useCurrentWorkspaceId();
   const { t } = useTranslation();
+  const hasAdminPermission = useHasAdminPermission();
   const { data: info } = trpc.survey.get.useQuery({
     workspaceId,
     surveyId,
@@ -105,31 +104,38 @@ function PageComponent() {
           title={info?.name ?? ''}
           actions={
             <div className="space-x-2">
-              <Button
-                variant="outline"
-                size="icon"
-                Icon={LuPencil}
-                onClick={() =>
-                  navigate({
-                    to: '/survey/$surveyId/edit',
-                    params: {
-                      surveyId,
-                    },
-                  })
-                }
-              />
+              {hasAdminPermission && (
+                <Button
+                  variant="outline"
+                  size="icon"
+                  Icon={LuPencil}
+                  onClick={() =>
+                    navigate({
+                      to: '/survey/$surveyId/edit',
+                      params: {
+                        surveyId,
+                      },
+                    })
+                  }
+                />
+              )}
 
-              <AlertConfirm
-                title={t('Confirm to delete this survey?')}
-                description={t('Survey name: {{name}} | data count: {{num}}', {
-                  name: info?.name ?? '',
-                  num: count ?? 0,
-                })}
-                content={t('It will permanently delete the relevant data')}
-                onConfirm={handleDelete}
-              >
-                <Button variant="outline" size="icon" Icon={LuTrash} />
-              </AlertConfirm>
+              {hasAdminPermission && (
+                <AlertConfirm
+                  title={t('Confirm to delete this survey?')}
+                  description={t(
+                    'Survey name: {{name}} | data count: {{num}}',
+                    {
+                      name: info?.name ?? '',
+                      num: count ?? 0,
+                    }
+                  )}
+                  content={t('It will permanently delete the relevant data')}
+                  onConfirm={handleDelete}
+                >
+                  <Button variant="outline" size="icon" Icon={LuTrash} />
+                </AlertConfirm>
+              )}
             </div>
           }
         />
diff --git a/src/client/routes/telemetry.tsx b/src/client/routes/telemetry.tsx
index edc504a..4234468 100644
--- a/src/client/routes/telemetry.tsx
+++ b/src/client/routes/telemetry.tsx
@@ -6,7 +6,7 @@ import { Button } from '@/components/ui/button';
 import { useDataReady } from '@/hooks/useDataReady';
 import { useEvent } from '@/hooks/useEvent';
 import { Layout } from '@/components/layout';
-import { useCurrentWorkspaceId } from '@/store/user';
+import { useCurrentWorkspaceId, useHasAdminPermission } from '@/store/user';
 import { routeAuthBeforeLoad } from '@/utils/route';
 import { cn } from '@/utils/style';
 import { Trans, useTranslation } from '@i18next-toolkit/react';
@@ -35,6 +35,7 @@ function TelemetryComponent() {
   const pathname = useRouterState({
     select: (state) => state.location.pathname,
   });
+  const hasAdminPermission = useHasAdminPermission();
 
   const items = data.map((item) => ({
     id: item.id,
@@ -101,14 +102,20 @@ function TelemetryComponent() {
                 </div>
               }
               actions={
-                <Button
-                  className={cn(pathname === '/telemetry/add' && '!bg-muted')}
-                  variant="outline"
-                  Icon={LuPlus}
-                  onClick={handleClickAdd}
-                >
-                  {t('Add')}
-                </Button>
+                <>
+                  {hasAdminPermission && (
+                    <Button
+                      className={cn(
+                        pathname === '/telemetry/add' && '!bg-muted'
+                      )}
+                      variant="outline"
+                      Icon={LuPlus}
+                      onClick={handleClickAdd}
+                    >
+                      {t('Add')}
+                    </Button>
+                  )}
+                </>
               }
             />
           }
diff --git a/src/client/routes/website.tsx b/src/client/routes/website.tsx
index 6605d7e..40fb617 100644
--- a/src/client/routes/website.tsx
+++ b/src/client/routes/website.tsx
@@ -5,7 +5,7 @@ import { CommonWrapper } from '@/components/CommonWrapper';
 import { Button } from '@/components/ui/button';
 import { useEvent } from '@/hooks/useEvent';
 import { Layout } from '@/components/layout';
-import { useCurrentWorkspaceId } from '@/store/user';
+import { useCurrentWorkspaceId, useHasAdminPermission } from '@/store/user';
 import { routeAuthBeforeLoad } from '@/utils/route';
 import { cn } from '@/utils/style';
 import { useTranslation } from '@i18next-toolkit/react';
@@ -24,6 +24,7 @@ export const Route = createFileRoute('/website')({
 
 function WebsiteComponent() {
   const workspaceId = useCurrentWorkspaceId();
+  const hasAdminPermission = useHasAdminPermission();
   const { t } = useTranslation();
   const { data = [], isLoading } = trpc.website.all.useQuery({
     workspaceId,
@@ -83,13 +84,16 @@ function WebsiteComponent() {
                   >
                     {t('Overview')}
                   </Button>
-                  <Button
-                    className={cn(pathname === '/website/add' && '!bg-muted')}
-                    variant="outline"
-                    size="icon"
-                    Icon={LuPlus}
-                    onClick={handleClickAdd}
-                  />
+
+                  {hasAdminPermission && (
+                    <Button
+                      className={cn(pathname === '/website/add' && '!bg-muted')}
+                      variant="outline"
+                      size="icon"
+                      Icon={LuPlus}
+                      onClick={handleClickAdd}
+                    />
+                  )}
                 </div>
               }
             />
diff --git a/src/client/routes/website/$websiteId/index.tsx b/src/client/routes/website/$websiteId/index.tsx
index 9bc72fd..05f2a3d 100644
--- a/src/client/routes/website/$websiteId/index.tsx
+++ b/src/client/routes/website/$websiteId/index.tsx
@@ -12,7 +12,11 @@ import { WebsiteMetricsTable } from '@/components/website/WebsiteMetricsTable';
 import { WebsiteOverview } from '@/components/website/WebsiteOverview';
 import { WebsiteVisitorMapBtn } from '@/components/website/WebsiteVisitorMapBtn';
 import { useGlobalRangeDate } from '@/hooks/useGlobalRangeDate';
-import { useCurrentWorkspaceId } from '@/store/user';
+import {
+  useCurrentWorkspaceId,
+  useHasAdminPermission,
+  useHasPermission,
+} from '@/store/user';
 import { routeAuthBeforeLoad } from '@/utils/route';
 import { useTranslation } from '@i18next-toolkit/react';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
@@ -34,6 +38,7 @@ function WebsiteDetailComponent() {
   });
   const { startDate, endDate } = useGlobalRangeDate();
   const navigate = useNavigate();
+  const hasAdminPermission = useHasAdminPermission();
 
   if (!websiteId) {
     return <ErrorTip />;
@@ -57,20 +62,22 @@ function WebsiteDetailComponent() {
           title={website.name}
           actions={
             <div className="space-x-2">
-              <Button
-                size="icon"
-                variant="outline"
-                onClick={() =>
-                  navigate({
-                    to: '/website/$websiteId/config',
-                    params: {
-                      websiteId,
-                    },
-                  })
-                }
-              >
-                <LuSettings />
-              </Button>
+              {hasAdminPermission && (
+                <Button
+                  size="icon"
+                  variant="outline"
+                  onClick={() =>
+                    navigate({
+                      to: '/website/$websiteId/config',
+                      params: {
+                        websiteId,
+                      },
+                    })
+                  }
+                >
+                  <LuSettings />
+                </Button>
+              )}
 
               <WebsiteLighthouseBtn websiteId={website.id} />
 
diff --git a/src/client/store/user.ts b/src/client/store/user.ts
index eaf577e..f285463 100644
--- a/src/client/store/user.ts
+++ b/src/client/store/user.ts
@@ -2,6 +2,7 @@ import { shallow } from 'zustand/shallow';
 import { createWithEqualityFn } from 'zustand/traditional';
 import { createSocketIOClient } from '../api/socketio';
 import { AppRouterOutput } from '../api/trpc';
+import { ROLES } from '@tianji/shared';
 
 export type UserLoginInfo = NonNullable<AppRouterOutput['user']['info']>;
 
@@ -108,3 +109,36 @@ export function useCurrentWorkspaceId() {
 
   return currentWorkspaceId;
 }
+
+/**
+ * Direct return current workspace role
+ */
+export function useCurrentWorkspaceRole(): ROLES {
+  const workspace = useCurrentWorkspace();
+
+  return (workspace.role as ROLES) || ROLES.readOnly;
+}
+
+export function useHasPermission(role: ROLES): boolean {
+  const currentWorkspaceRole = useCurrentWorkspaceRole();
+
+  if (currentWorkspaceRole === ROLES.owner) {
+    return true;
+  }
+
+  if (currentWorkspaceRole === ROLES.admin && role !== ROLES.owner) {
+    return true;
+  }
+
+  if (currentWorkspaceRole === ROLES.readOnly && role === ROLES.readOnly) {
+    return true;
+  }
+
+  return false;
+}
+
+export function useHasAdminPermission(): boolean {
+  const hasAdminPermission = useHasPermission(ROLES.admin);
+
+  return hasAdminPermission;
+}
diff --git a/src/shared/src/role.ts b/src/shared/src/role.ts
index 2939236..c2670d7 100644
--- a/src/shared/src/role.ts
+++ b/src/shared/src/role.ts
@@ -5,5 +5,6 @@ export enum SYSTEM_ROLES {
 
 export enum ROLES {
   owner = 'owner',
+  admin = 'admin',
   readOnly = 'readOnly',
 }