diff --git a/.github/workflows/storybook.yaml b/.github/workflows/storybook.yaml
new file mode 100644
index 0000000000..723b10af24
--- /dev/null
+++ b/.github/workflows/storybook.yaml
@@ -0,0 +1,140 @@
+name: 'KyberSwap Interface CI'
+
+concurrency:
+  group: ci-workflow-${{ github.ref }}-${{ github.event_name }}
+  cancel-in-progress: true
+
+on:
+  push:
+    branches:
+      - main
+
+env:
+  SERVICE: kyberswap-interface-storybook
+
+jobs:
+  prepare:
+    runs-on: ubuntu-20.04
+    outputs:
+      current_branch: ${{ steps.current_branch.outputs.value }}
+      head_sha: ${{ steps.head_sha.outputs.value }}
+      image_name: 'asia.gcr.io/kyber-operation/core/${{ env.SERVICE }}'
+      image_tag: ${{ steps.get_tag.outputs.image_tag }}
+      image_tag_stg: ${{ steps.get_tag.outputs.image_tag_stg }}
+      branch_tag: ${{ steps.get_tag.outputs.branch_tag }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Extract branch
+        shell: bash
+        id: current_branch
+        run: |
+          if [[ ! "${{ github.ref }}"  = "refs/tags/"* ]]; then
+            if [[ "${{ github.event_name }}" = "pull_request" ]]; then
+              HEAD_REF=$(printf "%q" "${{ github.head_ref }}")
+              HEAD_REF=${HEAD_REF/refs\/heads\//}
+              BRANCH=$HEAD_REF
+            else
+              REF=$(printf "%q" "${{ github.ref }}")
+              REF_BRANCH=${REF/refs\/pull\//}
+              REF_BRANCH=${REF_BRANCH/refs\/heads\//}
+              BRANCH=$REF_BRANCH
+            fi
+          else
+            REF=$(printf "%q" "${{ github.ref }}")
+            REF_BRANCH=${REF/refs\/tags\//}
+            BRANCH=$REF_BRANCH
+          fi
+          echo "::set-output name=value::$BRANCH"
+
+      - name: Extract GitHub HEAD SHA
+        id: head_sha
+        run: echo "::set-output name=value::$(git rev-parse HEAD)"
+
+      - name: Get Docker image tag
+        id: get_tag
+        env:
+          CURRENT_BRANCH: ${{ steps.current_branch.outputs.value }}
+        run: |
+          short_sha="$(git rev-parse --short HEAD)"
+          branch_tag="$(echo "$CURRENT_BRANCH" | sed 's/[^a-zA-Z0-9]/-/g' | sed 's/--*/-/g' | sed 's/-$//g')"
+          echo "::set-output name=image_tag::$branch_tag-$short_sha"
+          echo "::set-output name=image_tag_stg::$branch_tag-stg-build-$short_sha"
+          echo "::set-output name=branch_tag::$branch_tag-$short_sha"
+
+  build-storybook:
+    runs-on: ubuntu-20.04
+    needs:
+      - prepare
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: 20.9.0
+          registry-url: 'https://npm.pkg.github.com'
+          scope: '@kybernetwork'
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@master
+
+      - name: Gcloud Auth
+        uses: google-github-actions/auth@v0
+        with:
+          credentials_json: '${{ secrets.GCR_CREDENTIALS }}'
+
+      - name: Setup Gcloud SDK
+        uses: google-github-actions/setup-gcloud@v0
+
+      - name: Configure docker
+        run: gcloud auth configure-docker
+
+      - name: Cache Docker layers
+        uses: actions/cache@v2
+        with:
+          path: /tmp/.buildx-cache
+          key: ${{ runner.os }}-${{ env.SERVICE }}-buildx
+
+      - name: Restore node_modules
+        uses: actions/cache@v2
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+
+      - name: Install dependences
+        uses: bahmutov/npm-install@HEAD
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.GH_PAT }} ### authen npm
+
+      - name: Run Lint
+        run: yarn lint --quiet
+
+      - name: Yarn Build
+        env:
+          CI: false
+          VITE_TAG: ${{ needs.prepare.outputs.image_tag }}
+          NODE_OPTIONS: '--max_old_space_size=4096'
+        run: yarn build-storybook
+
+      - name: Docker build and push
+        uses: docker/build-push-action@v2
+        with:
+          context: .
+          push: true
+          labels: |
+            kyber.network.schema-version=1.0
+            kyber.network.vcs-ref=${{ github.sha }}
+            kyber.network.version=${{ needs.prepare.outputs.image_tag }}
+            kyber.network.name=${{ env.SERVICE }}
+          tags: |
+            ${{ needs.prepare.outputs.image_name }}:${{ needs.prepare.outputs.image_tag }}
+          cache-from: type=local,src=/tmp/.buildx-cache
+          cache-to: type=local,dest=/tmp/.buildx-cache-new
+
+      - name: Move Docker cache
+        run: |
+          rm -rf /tmp/.buildx-cache
+          mv /tmp/.buildx-cache-new /tmp/.buildx-cache