diff --git a/.github/workflows/frontend-storybook-deploy.yml b/.github/workflows/frontend-storybook-deploy.yml
index 2ae6c5f24..ef09cab30 100644
--- a/.github/workflows/frontend-storybook-deploy.yml
+++ b/.github/workflows/frontend-storybook-deploy.yml
@@ -71,8 +71,3 @@ jobs:
       - name: Upload to S3
         run: |
           aws s3 sync frontend/storybook s3://2023-team-project/2023-zipgo/storybook --delete
-      - name: Cloudfront invalidation
-        run: |
-          aws cloudfront create-invalidation \
-            --distribution-id ${{ secrets.AWS_DISTRIBUTION_ID }} \
-            --paths "/storybook/*"
diff --git a/frontend/.storybook/preview.tsx b/frontend/.storybook/preview.tsx
index 0d85ce0af..97dbdb1e4 100644
--- a/frontend/.storybook/preview.tsx
+++ b/frontend/.storybook/preview.tsx
@@ -8,7 +8,18 @@ import { initialize, mswDecorator } from 'msw-storybook-addon';
 import { withRouter } from 'storybook-addon-react-router-v6';
 import handlers from '../src/mocks/handlers';
 
-initialize(); // msw-storybook-addon
+let options = {};
+
+if (location.hostname.includes('cloudfront')) {
+  options = {
+    serviceWorker: {
+      url: '/storybook/mockServiceWorker.js',
+    },
+  };
+}
+
+// Initialize MSW
+initialize(options);
 
 const queryClient = new QueryClient({
   defaultOptions: {