diff --git a/src/containers/Rules/Provider/index.tsx b/src/containers/Rules/Provider/index.tsx
index ec964ec..b53381c 100644
--- a/src/containers/Rules/Provider/index.tsx
+++ b/src/containers/Rules/Provider/index.tsx
@@ -29,7 +29,7 @@ export function Provider (props: ProvidersProps) {
     const updateClassnames = classnames('rule-provider-icon', { 'rule-provider-loading': visible })
 
     return (
-        <Card className="rule-provider">
+        <div className="rule-provider">
             <div className="rule-provider-header">
                 <div className="rule-provider-header-part">
                     <span className="rule-provider-name">{ provider.name }</span>
@@ -45,6 +45,6 @@ export function Provider (props: ProvidersProps) {
                     <Icon className={updateClassnames} type="update" size={18} onClick={handleUpdate} />
                 </div>
             </div>
-        </Card>
+        </div>
     )
 }
diff --git a/src/containers/Rules/index.tsx b/src/containers/Rules/index.tsx
index 61f84e2..7a98842 100644
--- a/src/containers/Rules/index.tsx
+++ b/src/containers/Rules/index.tsx
@@ -17,15 +17,13 @@ function RuleProviders () {
             providers.length !== 0 &&
             <div className="flex flex-col">
                 <Header title={t('providerTitle')} />
-                <ul className="proxies-providers-list">
+                <Card className="rounded shadow-primary p-0 divide-y mt-4">
                     {
                         providers.map(p => (
-                            <li className="proxies-providers-item" key={p.name}>
-                                <Provider provider={p} />
-                            </li>
+                            <Provider key={p.name} provider={p} />
                         ))
                     }
-                </ul>
+                </Card>
             </div>
         }
     </>
@@ -54,7 +52,7 @@ export default function Rules () {
     return (
         <div className="page">
             <RuleProviders />
-            <Header title={t('title')} />
+            <Header className="not-first:mt-7.5" title={t('title')} />
             <Card className="flex flex-col flex-1 mt-2.5 md:mt-4 p-0 focus:outline-none">
                 <AutoSizer className="rules">
                     {
diff --git a/src/stores/jotai.ts b/src/stores/jotai.ts
index 13f4281..649bec9 100644
--- a/src/stores/jotai.ts
+++ b/src/stores/jotai.ts
@@ -69,7 +69,7 @@ export function useRuleProviders () {
     const [{ premium }] = useAtom(version)
     const client = useClient()
 
-    const { data, mutate } = useSWR(['/providers/rule', client], async () => {
+    const { data, mutate } = useSWR(['/providers/rule', client, premium], async () => {
         if (!premium) {
             return []
         }
diff --git a/tsconfig.json b/tsconfig.json
index 8927435..5125298 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -35,6 +35,8 @@
         }
     },
     "include": [
-        "src"
+        "src",
+        "windi.config.ts",
+        "vite.config.ts"
     ]
 }
diff --git a/vite.config.ts b/vite.config.ts
index b77c502..ac6cae8 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -12,22 +12,22 @@ export default defineConfig({
         {
             name: 'remove-css-in-js',
             enforce: 'post',
-            transform(_, id) {
+            transform (_, id) {
                 if (id.endsWith('.scss') || id.endsWith('.css')) {
                     return ''
                 }
             },
-        }
+        },
     ],
     base: './',
     css: {
         preprocessorOptions: {
             scss: {
-                additionalData: '@use "sass:math"; @import "src/styles/variables.scss";'
-            }
-        }
+                additionalData: '@use "sass:math"; @import "src/styles/variables.scss";',
+            },
+        },
     },
     build: {
-        minify: 'esbuild'
-    }
+        minify: 'esbuild',
+    },
 })
diff --git a/windi.config.ts b/windi.config.ts
index 39700d7..82fe0f6 100644
--- a/windi.config.ts
+++ b/windi.config.ts
@@ -6,14 +6,17 @@ export default defineConfig({
             colors: {
                 primary: {
                     500: '#57befc',
-                    600: '#2c8af8'
+                    600: '#2c8af8',
                 },
                 red: '#f56c6c',
-                green: '#67c23a'
+                green: '#67c23a',
             },
             textShadow: {
-                primary: '0 0 6px rgb(44 138 248 / 40%)'
-            }
-        }
-    }
+                primary: '0 0 6px rgb(44 138 248 / 40%)',
+            },
+            boxShadow: {
+                primary: '2px 5px 20px -3px rgb(44 138 248 / 18%)',
+            },
+        },
+    },
 })