diff --git a/src/app/discover/List/index.tsx b/src/app/discover/List/index.tsx
index 2b402c15..d6e3d55b 100644
--- a/src/app/discover/List/index.tsx
+++ b/src/app/discover/List/index.tsx
@@ -17,8 +17,12 @@ const useStyles = createStyles(({ css, token }) => ({
     background-color: rgba(255, 255, 255, 2%);
     border-radius: ${token.borderRadius}px;
   `,
-  header: css`
-    padding: ${token.padding}px ${token.paddingSM}px;
+  searchBar: css`
+    margin-top: ${token.margin}px;
+    padding-inline: ${token.paddingSM}px;
+  `,
+  tabsNav: css`
+    padding-inline: ${token.paddingSM}px;
   `,
   list: css`
     overflow-y: scroll;
@@ -72,25 +76,20 @@ const AgentList = (props: AgentListProps) => {
 
   return (
     <Flexbox className={classNames(className, styles.container)} style={style}>
-      <Flexbox
-        className={styles.header}
-        gap={16}
-        direction="horizontal"
-        align="center"
-        justify="space-between"
-      >
-        <TabsNav
-          activeKey={activeCategory}
-          items={CATEGORIES}
-          onChange={(key) => setActiveCategory(key)}
-        />
-        <SearchBar
-          placeholder={t('search', { ns: 'common' })}
-          value={searchKeyword}
-          onChange={(e) => setSearchKeyword(e.target.value)}
-          allowClear
-        />
-      </Flexbox>
+      <SearchBar
+        placeholder={t('search', { ns: 'common' })}
+        value={searchKeyword}
+        className={styles.searchBar}
+        onChange={(e) => setSearchKeyword(e.target.value)}
+        allowClear
+      />
+
+      <TabsNav
+        activeKey={activeCategory}
+        items={CATEGORIES}
+        className={styles.tabsNav}
+        onChange={(key) => setActiveCategory(key)}
+      />
 
       {loading ? (
         <SkeletonList count={6} />
diff --git a/src/app/role/RoleEdit/style.ts b/src/app/role/RoleEdit/style.ts
index 208e2dad..4327dda2 100644
--- a/src/app/role/RoleEdit/style.ts
+++ b/src/app/role/RoleEdit/style.ts
@@ -1,5 +1,7 @@
 import { createStyles } from 'antd-style';
 
 export const useStyles = createStyles(({ css }) => ({
-  container: css``,
+  container: css`
+    width: 100%;
+  `,
 }));
diff --git a/src/app/role/style.ts b/src/app/role/style.ts
index c0c4bfd2..f3436f20 100644
--- a/src/app/role/style.ts
+++ b/src/app/role/style.ts
@@ -1,14 +1,13 @@
 import { createStyles } from 'antd-style';
 
-import { ROLE_VIEWER_WIDTH } from '@/constants/common';
-
-export const useStyles = createStyles(({ css, cx }) => ({
+export const useStyles = createStyles(({ css, cx, token }) => ({
   preview: cx(
     'role-preview',
     css`
-      overflow: auto;
+      overflow: scroll;
       width: 100%;
-      padding: 0 12px;
+      height: 100%;
+      padding: 0 ${token.paddingSM}px;
     `,
   ),
   container: css`
@@ -16,8 +15,4 @@ export const useStyles = createStyles(({ css, cx }) => ({
     height: 100%;
     margin: 0 auto;
   `,
-  model: css`
-    width: ${ROLE_VIEWER_WIDTH}px;
-    height: 100%;
-  `,
 }));