diff --git a/.github/create-invalidate-preview.sh b/.github/create-invalidate-preview.sh
new file mode 100755
index 0000000..337b46d
--- /dev/null
+++ b/.github/create-invalidate-preview.sh
@@ -0,0 +1,43 @@
+#!/bin/bash
+
+# 0. check if cloudfront exists with this prefix folder
+# if exists
+#   invalidate
+# else
+#   create cloudfront distribution
+# echo cloudfront_domain=domain >> $GITHUB_OUTPUT
+prefix=$1
+echo $(aws cloudfront list-distributions --output json) >> ./test.json
+
+data=$(cat ./test.json)
+distribution_id="NONE"
+domain=""
+for row in $(jq '.DistributionList.Items[] | @base64' < './test.json'); do
+    _jq() {
+        echo $row | tr -d '"' | base64 --decode | jq -r "${1}" | tr -d '"'
+    }
+    comment=$(_jq '.Comment')
+    if [[ $comment = $prefix ]]
+    then
+        distribution_id=$(_jq '.Id')
+        domain=$(_jq '.DomainName')
+    fi
+done
+
+if [[ $distribution_id = NONE ]]
+then
+    # config vars: TargetOriginId, Origin.Items.Id, Origin.Items.OriginPath, CallerReference, Comment 
+    config=$(cat .github/template.json)
+    config=$(echo $config | sed  -e "s/{{prefix}}/$prefix/g" | sed  -e "s/{{caller_reference}}/$prefix/g")
+
+    new_config=$(aws cloudfront create-distribution --distribution-config "$config")
+
+    distribution_id=$(echo $new_config | jq '.Distribution.Id' | tr -d '"')
+    domain=$(echo $new_config | jq '.Distribution.DomainName' | tr -d '"')
+    aws cloudfront wait distribution-deployed --id $distribution_id
+else
+    invalidation_id=$(aws cloudfront create-invalidation --distribution-id $distribution_id --paths /* | jq '.Invalidation.Id' | tr -d '"') 
+    aws cloudfront wait invalidation-completed --distribution-id $distribution_id --id $invalidation_id
+fi
+
+echo "domain=$domain" >> $GITHUB_OUTPUT
\ No newline at end of file
diff --git a/.github/template.json b/.github/template.json
new file mode 100644
index 0000000..0f89341
--- /dev/null
+++ b/.github/template.json
@@ -0,0 +1,83 @@
+{
+    "Comment": "{{prefix}}",
+    "CacheBehaviors": {
+        "Quantity": 0
+    },
+    "Origins": {
+        "Items": [
+            {
+                "Id": "preview.gui.tea.xyz.s3-website.us-east-1.amazonaws.com-{{prefix}}",
+                "DomainName": "preview.gui.tea.xyz.s3-website.us-east-1.amazonaws.com",
+                "OriginPath": "/{{prefix}}",
+                "CustomHeaders": {
+                    "Quantity": 0
+                },
+                "CustomOriginConfig": {
+                    "HTTPPort": 80,
+                    "HTTPSPort": 443,
+                    "OriginProtocolPolicy": "http-only",
+                    "OriginSslProtocols": {
+                        "Quantity": 1,
+                        "Items": [
+                            "TLSv1.2"
+                        ]
+                    },
+                    "OriginReadTimeout": 30,
+                    "OriginKeepaliveTimeout": 5
+                },
+                "ConnectionAttempts": 3,
+                "ConnectionTimeout": 10,
+                "OriginShield": {
+                    "Enabled": false
+                }
+            }
+        ],
+        "Quantity": 1
+    },
+    "DefaultRootObject": "index.html",
+    "PriceClass": "PriceClass_All",
+    "Enabled": true,
+    "DefaultCacheBehavior": {
+        "TrustedSigners": {
+            "Enabled": false,
+            "Quantity": 0
+        },
+        "TargetOriginId": "preview.gui.tea.xyz.s3-website.us-east-1.amazonaws.com-{{prefix}}",
+        "ViewerProtocolPolicy": "allow-all",
+        "ForwardedValues": {
+            "Headers": {
+                "Quantity": 0
+            },
+            "Cookies": {
+                "Forward": "none"
+            },
+            "QueryString": false
+        },
+        "SmoothStreaming": false,
+        "AllowedMethods": {
+            "Items": [
+                "GET",
+                "HEAD"
+            ],
+            "Quantity": 2
+        },
+        "MinTTL": 0
+    },
+    "CallerReference": "{{caller_reference}}",
+    "ViewerCertificate": {
+        "CloudFrontDefaultCertificate": true
+    },
+    "CustomErrorResponses": {
+        "Quantity": 0
+    },
+    "Restrictions": {
+        "GeoRestriction": {
+            "RestrictionType": "none",
+            "Quantity": 0
+        }
+    },
+    "Aliases": {
+        "Quantity": 0
+    }
+}
+        
\ No newline at end of file
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 152395b..bcaf081 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -8,6 +8,7 @@ jobs:
     outputs:
       svelte: ${{steps.svelte.outputs.src}}
       tauri: ${{steps.tauri.outputs.src}}
+      preview_folder: ${{steps.preview.outputs.folder}}
     steps:
     - uses: actions/checkout@v3
     - uses: dorny/paths-filter@v2
@@ -23,6 +24,11 @@ jobs:
         filters: |
           src:
             - 'packages/gui/src-tauri/**'
+    - name: get s3 preview folder
+      id: preview
+      run: |
+        preview=$(echo $GITHUB_REF_NAME | sed -e 's/\//-/g')
+        echo "folder=$preview" >> $GITHUB_OUTPUT
   build_svelte:
     needs: changes
     if: needs.changes.outputs.svelte == 'true'
@@ -51,6 +57,29 @@ jobs:
           aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
           aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
           aws-region: us-east-1
+      - name: sync web files into preview folder
+        env:
+          prefix: ${{ needs.changes.outputs.preview_folder }}
+        run: |
+          aws s3 sync ./packages/gui/build \
+            "s3://preview.gui.tea.xyz/$prefix"
+      - name: Install package
+        run: sudo apt-get install -y jq coreutils
+      - name: setup preview
+        id: preview_setup
+        run: .github/create-invalidate-preview.sh ${{ needs.changes.outputs.preview_folder }}
+
+      - name: comment preview site
+        uses: mshick/add-pr-comment@v2
+        with:
+          message-id: preview-comment-${{needs.changes.outputs.preview_folder}}
+          message: |
+            **preview is at**: [https://${{steps.preview_setup.outputs.domain}}](https://${{steps.preview_setup.outputs.domain}})
+            ```bash
+            https://${{steps.preview_setup.outputs.domain}}
+            ```
+            copy-paste into a browser to view
+
   build_tauri:
     needs: changes
     if: needs.changes.outputs.tauri == 'true'
@@ -109,16 +138,10 @@ jobs:
         aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
         aws-region: us-east-1
 
-    - name: get s3 folder
-      id: prefix
-      run: |
-        prefix=$(echo $GITHUB_REF_NAME | sed -e 's/\//-/g')
-        echo "prefix=$prefix" >> $GITHUB_OUTPUT
-
     - name: mac-os cp package images from prod to preview bucket
       if: matrix.platform == 'macos-latest'
       env:
-        prefix: ${{ steps.prefix.outputs.prefix }}
+        prefix: ${{ needs.changes.outputs.preview_folder }}
       run: |
         aws s3 cp ./packages/gui/src-tauri/target/release/bundle/dmg/gui_0.1.0_x64.dmg \
           "s3://preview.gui.tea.xyz/$prefix/gui.dmg"
@@ -126,7 +149,7 @@ jobs:
     - name: ubuntu cp package images from prod to preview bucket
       if: matrix.platform == 'ubuntu-latest'
       env:
-        prefix: ${{ steps.prefix.outputs.prefix }}
+        prefix: ${{ needs.changes.outputs.preview_folder }}
       run: |
         aws s3 cp ./packages/gui/src-tauri/target/release/bundle/deb/gui_0.1.0_amd64.deb \
           "s3://preview.gui.tea.xyz/$prefix/gui.deb"
@@ -139,7 +162,7 @@ jobs:
         message: |
           **installer for ${{ matrix.platform }} is at**: [here](http://preview.gui.tea.xyz.s3-website-us-east-1.amazonaws.com/${{steps.prefix.outputs.prefix}}/gui.deb)
           ```bash
-          http://preview.gui.tea.xyz.s3-website-us-east-1.amazonaws.com/${{steps.prefix.outputs.prefix}}/gui.deb
+          http://preview.gui.tea.xyz.s3-website-us-east-1.amazonaws.com/${{ needs.changes.outputs.preview_folder }}/gui.deb
           ```
           copy-paste into a browser to download
 
@@ -152,6 +175,6 @@ jobs:
         message: |
           **installer for ${{ matrix.platform }} is at**: [here](http://preview.gui.tea.xyz.s3-website-us-east-1.amazonaws.com/${{steps.prefix.outputs.prefix}}/gui.dmg)
           ```bash
-          http://preview.gui.tea.xyz.s3-website-us-east-1.amazonaws.com/${{steps.prefix.outputs.prefix}}/gui.dmg
+          http://preview.gui.tea.xyz.s3-website-us-east-1.amazonaws.com/${{ needs.changes.outputs.preview_folder }}/gui.dmg
           ```
           copy-paste into a browser to download
\ No newline at end of file
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 778fc7e..20c34fd 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -50,7 +50,11 @@ jobs:
           toolchain: stable
       - name: install app dependencies and build it
         run: pnpm install && pnpm --filter gui build
-      
+      - uses: aws-actions/configure-aws-credentials@v1
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: us-east-1
   build_tauri:
     needs: changes
     if: needs.changes.outputs.tauri == 'true'
diff --git a/packages/gui/src/app.css b/packages/gui/src/app.css
index a529a89..4671415 100644
--- a/packages/gui/src/app.css
+++ b/packages/gui/src/app.css
@@ -2,11 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-html {
-  background-color: #1a1a1a;
-  color: #fff;
-}
-
 @font-face {
   font-family: "pp-neue-machina";
   src: url("../static/fonts/PPNeueMachina-InktrapLight.woff");
@@ -17,6 +12,11 @@ html {
   src: url("../static/fonts/Sono-Light.woff2");
 }
 
+html {
+  background-color: #1a1a1a;
+  color: #fff;
+}
+
 @layer base {
   html {
     font-family: sono, sans-serif;
diff --git a/packages/ui/README.md b/packages/ui/README.md
index 8e16cbc..7373408 100644
--- a/packages/ui/README.md
+++ b/packages/ui/README.md
@@ -1,4 +1,4 @@
-# Tea UI
+# @tea/ui
 Isolated set of UI elements/components that can be reused across all svelte related apps of tea. Components here have to be maintained as much as possible as a [dumb/presentational components](https://medium.com/@thejasonfile/dumb-components-and-smart-components-e7b33a698d43). 
 
 ## Developing