diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
new file mode 100644
index 0000000..630ebcf
--- /dev/null
+++ b/.github/workflows/deploy.yml
@@ -0,0 +1,53 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - micro_refactor
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+          cache: 'npm'
+          cache-dependency-path: './care_livekit_fe/package-lock.json'
+
+      - name: Install dependencies
+        working-directory: ./care_livekit_fe
+        run: npm ci
+
+      - name: Build
+        working-directory: ./care_livekit_fe
+        run: npm run build
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: './care_livekit_fe/dist'
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4 
\ No newline at end of file
diff --git a/package.json b/package.json
index 466fc2a..6eff500 100644
--- a/package.json
+++ b/package.json
@@ -3,9 +3,11 @@
   "version": "0.0.1",
   "description": "",
   "main": "index.js",
+  "homepage": "https://ohcnetwork.github.io/care_livekit_fe/",
   "scripts": {
     "start": "vite build --watch & vite preview --port 5173",
-    "build": "vite build"
+    "build": "vite build",
+    "preview": "vite preview"
   },
   "author": "",
   "license": "ISC",
diff --git a/vite.config.ts b/vite.config.ts
index 699b64a..5afe27f 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,31 +1,63 @@
 import { defineConfig } from "vite";
 import federation from "@originjs/vite-plugin-federation";
+import react from "@vitejs/plugin-react";
+import { fileURLToPath } from "url";
+import { dirname, resolve } from "path";
 
-const getFederationConfig = () => {
-  const federationConfig = federation({
-    name: "care_livekit",
-    filename: "remoteEntry.js",
-    exposes: {
-      "./CareLivekit": "./src/components/CareLivekit.tsx",
-    },
-  });
-  console.log("Federation plugin initialized");
-  return federationConfig;
-};
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
 
 export default defineConfig({
-  plugins: [getFederationConfig()],
-  server: {
-    // Directly add middleware here without enabling middlewareMode
-    fs: {
-      allow: ["."],
-    },
-  },
+  base: "/care_livekit_fe/",
+  plugins: [
+    react(),
+    federation({
+      name: "care_livekit",
+      filename: "remoteEntry.js",
+      exposes: {
+        "./CareLivekit": {
+          import: "./src/components/CareLivekit.tsx",
+          name: "CareLivekit",
+        },
+      },
+      shared: {
+        react: {
+          singleton: true,
+          requiredVersion: "^18.0.0",
+          eager: true,
+        },
+        "react-dom": {
+          singleton: true,
+          requiredVersion: "^18.0.0",
+          eager: true,
+        },
+      },
+    }),
+  ],
   build: {
-    target: "es2022",
+    modulePreload: false,
+    target: "esnext",
     minify: false,
+    cssCodeSplit: false,
+    outDir: "dist",
     rollupOptions: {
-      input: "./src/index.tsx",
+      preserveEntrySignatures: "strict",
+      input: {
+        "care-livekit": resolve(__dirname, "src/components/CareLivekit.tsx"),
+      },
+      output: {
+        format: "esm",
+        entryFileNames: "assets/[name].js",
+        chunkFileNames: "assets/[name].[hash].js",
+        assetFileNames: "assets/[name].[hash].[ext]",
+      },
+    },
+  },
+  preview: {
+    port: 5173,
+    strictPort: true,
+    headers: {
+      "Access-Control-Allow-Origin": "*",
     },
   },
 });