diff --git a/storybook/.storybook/preview-head.html b/storybook/.storybook/preview-head.html
index 5efba73..424f713 100644
--- a/storybook/.storybook/preview-head.html
+++ b/storybook/.storybook/preview-head.html
@@ -2,6 +2,9 @@
   window.global = window;
 </script>
 <style>
+    html, body, #root {
+        height: 100%
+    }
     * {
         box-sizing: border-box;
     }
diff --git a/storybook/package.json b/storybook/package.json
index d20e4cf..cf82a4d 100644
--- a/storybook/package.json
+++ b/storybook/package.json
@@ -17,6 +17,7 @@
         "@mapbox/mapbox-gl-draw": "^1.4.3",
         "@togglecorp/fujs": "^2.0.0",
         "@togglecorp/re-map": "^0.3.0",
+        "chromatic": "^9.0.0",
         "immer": "^10.0.3",
         "maplibre-gl": "^3.5.2",
         "react": "^18.2.0",
diff --git a/storybook/stories/BubbleMap.stories.tsx b/storybook/stories/BubbleMap.stories.tsx
index 0d4f611..0783ebc 100644
--- a/storybook/stories/BubbleMap.stories.tsx
+++ b/storybook/stories/BubbleMap.stories.tsx
@@ -72,5 +72,5 @@ export function Default() {
 
 export default {
     title: 'Type/Bubble Map',
-    parameters: { delay: 500 },
+    parameters: { delay: 1000 },
 };
diff --git a/storybook/stories/ChoroplethMap.stories.tsx b/storybook/stories/ChoroplethMap.stories.tsx
index 5f22b5c..d86b458 100644
--- a/storybook/stories/ChoroplethMap.stories.tsx
+++ b/storybook/stories/ChoroplethMap.stories.tsx
@@ -187,5 +187,5 @@ export function Default() {
 
 export default {
     title: 'Type/Choropleth Map',
-    parameters: { delay: 500 },
+    parameters: { delay: 1000 },
 };
diff --git a/storybook/stories/FitBounds.stories.tsx b/storybook/stories/FitBounds.stories.tsx
index 5c92a9e..c92e690 100644
--- a/storybook/stories/FitBounds.stories.tsx
+++ b/storybook/stories/FitBounds.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import isChromatic from 'chromatic/isChromatic';
 import Map, {
     MapContainer,
     MapBounds,
@@ -27,7 +28,7 @@ export function Default() {
             <MapBounds
                 bounds={bounds}
                 padding={10}
-                duration={1000}
+                duration={isChromatic() ? 0 : 1000}
             />
         </Map>
     );
@@ -35,5 +36,5 @@ export function Default() {
 
 export default {
     title: 'Basic/Fit Bounds',
-    parameters: { delay: 500 },
+    parameters: { delay: 1000 },
 };
diff --git a/storybook/stories/FlyToLocation.stories.tsx b/storybook/stories/FlyToLocation.stories.tsx
index 57fbb95..6c684c3 100644
--- a/storybook/stories/FlyToLocation.stories.tsx
+++ b/storybook/stories/FlyToLocation.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import isChromatic from 'chromatic/isChromatic';
 import Map, {
     MapContainer,
     MapCenter,
@@ -25,7 +26,7 @@ export function Default() {
                 ]}
                 centerOptions={{
                     zoom: 4,
-                    duration: 1000,
+                    duration: isChromatic() ? 0 : 1000,
                 }}
             />
         </Map>
@@ -34,5 +35,5 @@ export function Default() {
 
 export default {
     title: 'Basic/Fly to Location',
-    parameters: { delay: 500 },
+    parameters: { delay: 1000 },
 };
diff --git a/storybook/stories/GeoJSONMap.stories.tsx b/storybook/stories/GeoJSONMap.stories.tsx
index f6a23d8..af01414 100644
--- a/storybook/stories/GeoJSONMap.stories.tsx
+++ b/storybook/stories/GeoJSONMap.stories.tsx
@@ -76,5 +76,5 @@ export function Default() {
 
 export default {
     title: 'Source/GeoJSON Source',
-    parameters: { delay: 500 },
+    parameters: { delay: 1000 },
 };
diff --git a/storybook/stories/MbtilesMap.stories.tsx b/storybook/stories/MbtilesMap.stories.tsx
index d12b3f8..cc2f102 100644
--- a/storybook/stories/MbtilesMap.stories.tsx
+++ b/storybook/stories/MbtilesMap.stories.tsx
@@ -10,5 +10,4 @@ export function Default() {
 
 export default {
     title: 'Source/Mbtiles Source',
-    parameters: { delay: 500 },
 };
diff --git a/storybook/stories/PmtilesMap.stories.tsx b/storybook/stories/PmtilesMap.stories.tsx
index 4d3fcf6..ca0c21c 100644
--- a/storybook/stories/PmtilesMap.stories.tsx
+++ b/storybook/stories/PmtilesMap.stories.tsx
@@ -10,5 +10,4 @@ export function Default() {
 
 export default {
     title: 'Source/Pmtiles Source',
-    parameters: { delay: 500 },
 };
diff --git a/storybook/stories/SimpleMap.stories.tsx b/storybook/stories/SimpleMap.stories.tsx
index 2c98b18..d14dbea 100644
--- a/storybook/stories/SimpleMap.stories.tsx
+++ b/storybook/stories/SimpleMap.stories.tsx
@@ -24,5 +24,5 @@ export function Default() {
 
 export default {
     title: 'Basic/Simple Map',
-    parameters: { delay: 500 },
+    parameters: { delay: 1000 },
 };
diff --git a/storybook/stories/WithClickInteraction.stories.tsx b/storybook/stories/WithClickInteraction.stories.tsx
index 4a03261..0b427a6 100644
--- a/storybook/stories/WithClickInteraction.stories.tsx
+++ b/storybook/stories/WithClickInteraction.stories.tsx
@@ -10,5 +10,4 @@ export function Default() {
 
 export default {
     title: 'Basic/With Click Interaction',
-    parameters: { delay: 500 },
 };
diff --git a/storybook/stories/WithClickInteractionAndPopup.stories.tsx b/storybook/stories/WithClickInteractionAndPopup.stories.tsx
index 57b2220..4f8c59c 100644
--- a/storybook/stories/WithClickInteractionAndPopup.stories.tsx
+++ b/storybook/stories/WithClickInteractionAndPopup.stories.tsx
@@ -10,5 +10,4 @@ export function Default() {
 
 export default {
     title: 'Basic/With Click Interaction and Popup',
-    parameters: { delay: 500 },
 };
diff --git a/storybook/stories/WithDragInteraction.stories.tsx b/storybook/stories/WithDragInteraction.stories.tsx
index 6f1e3f7..f03830c 100644
--- a/storybook/stories/WithDragInteraction.stories.tsx
+++ b/storybook/stories/WithDragInteraction.stories.tsx
@@ -170,5 +170,5 @@ export function Default() {
 
 export default {
     title: 'Basic/With Drag Interaction',
-    parameters: { delay: 500 },
+    parameters: { delay: 1000 },
 };
diff --git a/storybook/stories/WithHoverInteractionAndPopup.stories.tsx b/storybook/stories/WithHoverInteractionAndPopup.stories.tsx
index 911ec4a..bf84fc0 100644
--- a/storybook/stories/WithHoverInteractionAndPopup.stories.tsx
+++ b/storybook/stories/WithHoverInteractionAndPopup.stories.tsx
@@ -131,5 +131,5 @@ export function Default() {
 
 export default {
     title: 'Basic/With Hover Interaction and Popup',
-    parameters: { delay: 500 },
+    parameters: { delay: 1000 },
 };
diff --git a/storybook/stories/WithHoverInteractive.stories.tsx b/storybook/stories/WithHoverInteractive.stories.tsx
index 3daf712..c124851 100644
--- a/storybook/stories/WithHoverInteractive.stories.tsx
+++ b/storybook/stories/WithHoverInteractive.stories.tsx
@@ -85,5 +85,5 @@ export function Default() {
 
 export default {
     title: 'Basic/With Hover Interaction',
-    parameters: { delay: 500 },
+    parameters: { delay: 1000 },
 };
diff --git a/storybook/stories/styles.module.css b/storybook/stories/styles.module.css
index 5c2caaf..d980c75 100644
--- a/storybook/stories/styles.module.css
+++ b/storybook/stories/styles.module.css
@@ -1,4 +1,5 @@
 .container {
+    border-radius: 0.5rem;
     width: 100%;
-    height: 512px;
+    height: 100%;
 }
diff --git a/yarn.lock b/yarn.lock
index 8d596a5..ce06ceb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4943,6 +4943,11 @@ chownr@^2.0.0:
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece"
   integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
 
+chromatic@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/chromatic/-/chromatic-9.0.0.tgz#0b429b5b171428495a39e7dcbaeaa56b06f055e6"
+  integrity sha512-PczbWYOfqsf/SM0yIzI3ZOpFznEyf9Fc96EkxoYkhztFaA9CEOcpA9nk8zpmNgPUQWmIWNyG7z4xEK40sApFzw==
+
 chrome-trace-event@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz#1015eced4741e15d06664a957dbbf50d041e26ac"