diff --git a/machines/intersectionMachine.ts b/machines/intersectionMachine.ts
new file mode 100644
index 0000000..c77c959
--- /dev/null
+++ b/machines/intersectionMachine.ts
@@ -0,0 +1,43 @@
+import { createMachine } from 'xstate'
+
+export default createMachine({
+  id: 'trafficIntersection',
+  initial: 'allRed',
+  states: {
+    allRed: {
+      after: {
+        2000: 'northSouthGreen',
+      },
+    },
+    northSouthGreen: {
+      after: {
+        5000: 'northSouthYellow',
+      },
+    },
+    northSouthYellow: {
+      after: {
+        2000: 'allRedBeforeEastWest',
+      },
+    },
+    allRedBeforeEastWest: {
+      after: {
+        1000: 'eastWestGreen',
+      },
+    },
+    eastWestGreen: {
+      after: {
+        5000: 'eastWestYellow',
+      },
+    },
+    eastWestYellow: {
+      after: {
+        2000: 'allRedBeforeNorthSouth',
+      },
+    },
+    allRedBeforeNorthSouth: {
+      after: {
+        1000: 'northSouthGreen',
+      },
+    },
+  },
+})
diff --git a/package-lock.json b/package-lock.json
index a6293b1..4b15844 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,9 +9,11 @@
       "version": "0.1.0",
       "dependencies": {
         "@heroicons/react": "^2.1.1",
+        "@xstate/react": "^4.0.2",
         "next": "14.0.4",
         "react": "^18",
-        "react-dom": "^18"
+        "react-dom": "^18",
+        "xstate": "^5.5.1"
       },
       "devDependencies": {
         "@types/node": "^20",
@@ -635,6 +637,24 @@
       "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
       "dev": true
     },
+    "node_modules/@xstate/react": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@xstate/react/-/react-4.0.2.tgz",
+      "integrity": "sha512-t5Xau/H8nS9nlowV+72RneqaQ/wqkQ8C/8ij4gEvHcoCQptc2REgZkjOpV74xyTabUZnUeYwdDTsMmz5ot3S+Q==",
+      "dependencies": {
+        "use-isomorphic-layout-effect": "^1.1.2",
+        "use-sync-external-store": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "xstate": "^5.4.1"
+      },
+      "peerDependenciesMeta": {
+        "xstate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/acorn": {
       "version": "8.11.3",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
@@ -4529,6 +4549,27 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-isomorphic-layout-effect": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",
+      "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -4738,6 +4779,15 @@
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
       "dev": true
     },
+    "node_modules/xstate": {
+      "version": "5.5.1",
+      "resolved": "https://registry.npmjs.org/xstate/-/xstate-5.5.1.tgz",
+      "integrity": "sha512-12Was43pPJKg3JWoelOREtTNYgFz6tRlNrMaRuqOibEe3pn8/uOWiP8ySMfOynyIjHUxd4BU7wV9O54Ma3FM6g==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/xstate"
+      }
+    },
     "node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
diff --git a/package.json b/package.json
index 59feeb9..5ca4ac1 100644
--- a/package.json
+++ b/package.json
@@ -10,9 +10,11 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.1.1",
+    "@xstate/react": "^4.0.2",
     "next": "14.0.4",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "xstate": "^5.5.1"
   },
   "devDependencies": {
     "@types/node": "^20",