diff --git a/components/global.tsx b/components/global.tsx
new file mode 100644
index 00000000..920a72f7
--- /dev/null
+++ b/components/global.tsx
@@ -0,0 +1,40 @@
+import { dark, globalCss } from "~/stitches.config";
+
+export const globalStyles = globalCss({
+    "*, *:before, *:after": {
+        margin: 0,
+        boxSizing: "border-box",
+    },
+    "*": {
+        margin: 0,
+    },
+    html: {
+        fontSize: "10px",
+    },
+    "html, body": {
+        fontFamily: "$inter",
+    },
+    body: {
+        fontSize: "1.2rem",
+        color: "$hiContrast",
+        backgroundColor: "$olive1",
+        overflowX: "hidden",
+        textRendering: "optimizelegibility",
+        "-webkit-font-smoothing": "antialiased",
+    },
+    a: {
+        color: "$anchor",
+    },
+
+    [`${dark}`]: {},
+});
+
+export const ApsaraGlobalStyle = () => {
+    globalStyles();
+    globalCss({
+        "@font-face": [],
+        "@import": ["url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap')"],
+    })();
+
+    return null;
+};
diff --git a/index.ts b/index.ts
index 7e34bd9e..1644fed3 100644
--- a/index.ts
+++ b/index.ts
@@ -1 +1,4 @@
+export { config, createTheme, css, getCssText, globalCss, keyframes, reset, styled, theme } from "~/stitches.config";
+// components
 export { Box } from "./components/box";
+export { ApsaraGlobalStyle } from "./components/global";
diff --git a/stitches.config.ts b/stitches.config.ts
index 94742235..76dac1c3 100644
--- a/stitches.config.ts
+++ b/stitches.config.ts
@@ -470,41 +470,6 @@ export const dark = createTheme("dark", {
     },
 });
 
-export const globalStyles = globalCss({
-    "*, *:before, *:after": {
-        margin: 0,
-        boxSizing: "border-box",
-    },
-    "*": {
-        margin: 0,
-    },
-    html: {
-        fontSize: "10px",
-    },
-    "html, body": {
-        fontFamily: "$inter",
-    },
-    body: {
-        fontSize: "1.2rem",
-        color: "$hiContrast",
-        backgroundColor: "$olive1",
-        overflowX: "hidden",
-        textRendering: "optimizelegibility",
-        "-webkit-font-smoothing": "antialiased",
-    },
-    a: {
-        color: "$anchor",
-    },
-
-    [`${dark}`]: {},
-});
-
-globalStyles();
-globalCss({
-    "@font-face": [],
-    "@import": ["url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap')"],
-})();
-
 type CSS = Stitches.CSS<typeof config>;
 type StitchesConfig = typeof config;
 type ScaleValue<TValue> = Stitches.ScaleValue<TValue, StitchesConfig>;