diff --git a/web/build-xec-apps/package-lock.json b/web/build-xec-apps/package-lock.json
--- a/web/build-xec-apps/package-lock.json
+++ b/web/build-xec-apps/package-lock.json
@@ -13,7 +13,9 @@
                 "gatsby-plugin-styled-components": "^6.3.0",
                 "react": "^18.2.0",
                 "react-dom": "^18.2.0",
-                "styled-components": "^5.3.6"
+                "react-json-pretty": "^2.2.0",
+                "styled-components": "^5.3.6",
+                "util": "^0.12.5"
             }
         },
         "node_modules/@ampproject/remapping": {
@@ -4436,6 +4438,17 @@
                 "postcss": "^8.1.0"
             }
         },
+        "node_modules/available-typed-arrays": {
+            "version": "1.0.5",
+            "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
+            "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
         "node_modules/axe-core": {
             "version": "4.4.3",
             "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.3.tgz",
@@ -7812,6 +7825,14 @@
                 }
             }
         },
+        "node_modules/for-each": {
+            "version": "0.3.3",
+            "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
+            "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
+            "dependencies": {
+                "is-callable": "^1.1.3"
+            }
+        },
         "node_modules/fork-ts-checker-webpack-plugin": {
             "version": "6.5.2",
             "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.2.tgz",
@@ -8641,9 +8662,9 @@
             }
         },
         "node_modules/get-intrinsic": {
-            "version": "1.1.2",
-            "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.2.tgz",
-            "integrity": "sha512-Jfm3OyCxHh9DJyc28qGk+JmfkpO41A4XkneDSujN9MDXrm4oDKdHvndhZ2dN94+ERNfkYJWDclW6k2L/ZGHjXA==",
+            "version": "1.1.3",
+            "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.3.tgz",
+            "integrity": "sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==",
             "dependencies": {
                 "function-bind": "^1.1.1",
                 "has": "^1.0.3",
@@ -8798,6 +8819,17 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/gopd": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
+            "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+            "dependencies": {
+                "get-intrinsic": "^1.1.3"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
         "node_modules/got": {
             "version": "11.8.5",
             "resolved": "https://registry.npmjs.org/got/-/got-11.8.5.tgz",
@@ -9320,6 +9352,21 @@
                 "node": ">=8"
             }
         },
+        "node_modules/is-arguments": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
+            "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
+            "dependencies": {
+                "call-bind": "^1.0.2",
+                "has-tostringtag": "^1.0.0"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
         "node_modules/is-arrayish": {
             "version": "0.2.1",
             "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -9439,6 +9486,20 @@
                 "node": ">=8"
             }
         },
+        "node_modules/is-generator-function": {
+            "version": "1.0.10",
+            "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
+            "integrity": "sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==",
+            "dependencies": {
+                "has-tostringtag": "^1.0.0"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
         "node_modules/is-glob": {
             "version": "4.0.3",
             "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -9648,6 +9709,24 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/is-typed-array": {
+            "version": "1.1.10",
+            "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.10.tgz",
+            "integrity": "sha512-PJqgEHiWZvMpaFZ3uTc8kHPM4+4ADTlDniuQL7cU/UDA0Ql7F70yGfHph3cLNe+c9toaigv+DFzTJKhc2CtO6A==",
+            "dependencies": {
+                "available-typed-arrays": "^1.0.5",
+                "call-bind": "^1.0.2",
+                "for-each": "^0.3.3",
+                "gopd": "^1.0.1",
+                "has-tostringtag": "^1.0.0"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
         "node_modules/is-typedarray": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
@@ -12357,6 +12436,18 @@
             "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
             "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
         },
+        "node_modules/react-json-pretty": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/react-json-pretty/-/react-json-pretty-2.2.0.tgz",
+            "integrity": "sha512-3UMzlAXkJ4R8S4vmkRKtvJHTewG4/rn1Q18n0zqdu/ipZbUPLVZD+QwC7uVcD/IAY3s8iNVHlgR2dMzIUS0n1A==",
+            "dependencies": {
+                "prop-types": "^15.6.2"
+            },
+            "peerDependencies": {
+                "react": ">=15.0",
+                "react-dom": ">=15.0"
+            }
+        },
         "node_modules/react-refresh": {
             "version": "0.14.0",
             "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
@@ -14341,6 +14432,18 @@
                 }
             }
         },
+        "node_modules/util": {
+            "version": "0.12.5",
+            "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
+            "integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==",
+            "dependencies": {
+                "inherits": "^2.0.3",
+                "is-arguments": "^1.0.4",
+                "is-generator-function": "^1.0.7",
+                "is-typed-array": "^1.1.3",
+                "which-typed-array": "^1.1.2"
+            }
+        },
         "node_modules/util-deprecate": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -14585,6 +14688,25 @@
             "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
             "integrity": "sha512-B+enWhmw6cjfVC7kS8Pj9pCrKSc5txArRyaYGe088shv/FGWH+0Rjx/xPgtsWfsUtS27FkP697E4DDhgrgoc0Q=="
         },
+        "node_modules/which-typed-array": {
+            "version": "1.1.9",
+            "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.9.tgz",
+            "integrity": "sha512-w9c4xkx6mPidwp7180ckYWfMmvxpjlZuIudNtDf4N/tTAUB8VJbX25qZoAsrtGuYNnGw3pa0AXgbGKRB8/EceA==",
+            "dependencies": {
+                "available-typed-arrays": "^1.0.5",
+                "call-bind": "^1.0.2",
+                "for-each": "^0.3.3",
+                "gopd": "^1.0.1",
+                "has-tostringtag": "^1.0.0",
+                "is-typed-array": "^1.1.10"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
         "node_modules/widest-line": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-3.1.0.tgz",
@@ -18043,6 +18165,11 @@
                 "postcss-value-parser": "^4.2.0"
             }
         },
+        "available-typed-arrays": {
+            "version": "1.0.5",
+            "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
+            "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw=="
+        },
         "axe-core": {
             "version": "4.4.3",
             "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.3.tgz",
@@ -20591,6 +20718,14 @@
             "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.1.tgz",
             "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA=="
         },
+        "for-each": {
+            "version": "0.3.3",
+            "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
+            "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
+            "requires": {
+                "is-callable": "^1.1.3"
+            }
+        },
         "fork-ts-checker-webpack-plugin": {
             "version": "6.5.2",
             "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.2.tgz",
@@ -21225,9 +21360,9 @@
             "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
         },
         "get-intrinsic": {
-            "version": "1.1.2",
-            "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.2.tgz",
-            "integrity": "sha512-Jfm3OyCxHh9DJyc28qGk+JmfkpO41A4XkneDSujN9MDXrm4oDKdHvndhZ2dN94+ERNfkYJWDclW6k2L/ZGHjXA==",
+            "version": "1.1.3",
+            "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.3.tgz",
+            "integrity": "sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==",
             "requires": {
                 "function-bind": "^1.1.1",
                 "has": "^1.0.3",
@@ -21339,6 +21474,14 @@
                 "slash": "^3.0.0"
             }
         },
+        "gopd": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
+            "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+            "requires": {
+                "get-intrinsic": "^1.1.3"
+            }
+        },
         "got": {
             "version": "11.8.5",
             "resolved": "https://registry.npmjs.org/got/-/got-11.8.5.tgz",
@@ -21706,6 +21849,15 @@
             "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-3.0.3.tgz",
             "integrity": "sha512-opmNIX7uFnS96NtPmhWQgQx6/NYFgsUXYMllcfzwWKUMwfo8kku1TvE6hkNcH+Q1ts5cMVrsY7j0bxXQDciu9Q=="
         },
+        "is-arguments": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
+            "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
+            "requires": {
+                "call-bind": "^1.0.2",
+                "has-tostringtag": "^1.0.0"
+            }
+        },
         "is-arrayish": {
             "version": "0.2.1",
             "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -21780,6 +21932,14 @@
             "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
             "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
         },
+        "is-generator-function": {
+            "version": "1.0.10",
+            "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
+            "integrity": "sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==",
+            "requires": {
+                "has-tostringtag": "^1.0.0"
+            }
+        },
         "is-glob": {
             "version": "4.0.3",
             "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -21922,6 +22082,18 @@
                 "has-symbols": "^1.0.2"
             }
         },
+        "is-typed-array": {
+            "version": "1.1.10",
+            "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.10.tgz",
+            "integrity": "sha512-PJqgEHiWZvMpaFZ3uTc8kHPM4+4ADTlDniuQL7cU/UDA0Ql7F70yGfHph3cLNe+c9toaigv+DFzTJKhc2CtO6A==",
+            "requires": {
+                "available-typed-arrays": "^1.0.5",
+                "call-bind": "^1.0.2",
+                "for-each": "^0.3.3",
+                "gopd": "^1.0.1",
+                "has-tostringtag": "^1.0.0"
+            }
+        },
         "is-typedarray": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
@@ -23859,6 +24031,14 @@
             "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
             "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
         },
+        "react-json-pretty": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/react-json-pretty/-/react-json-pretty-2.2.0.tgz",
+            "integrity": "sha512-3UMzlAXkJ4R8S4vmkRKtvJHTewG4/rn1Q18n0zqdu/ipZbUPLVZD+QwC7uVcD/IAY3s8iNVHlgR2dMzIUS0n1A==",
+            "requires": {
+                "prop-types": "^15.6.2"
+            }
+        },
         "react-refresh": {
             "version": "0.14.0",
             "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
@@ -25319,6 +25499,18 @@
                 "schema-utils": "^3.0.0"
             }
         },
+        "util": {
+            "version": "0.12.5",
+            "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
+            "integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==",
+            "requires": {
+                "inherits": "^2.0.3",
+                "is-arguments": "^1.0.4",
+                "is-generator-function": "^1.0.7",
+                "is-typed-array": "^1.1.3",
+                "which-typed-array": "^1.1.2"
+            }
+        },
         "util-deprecate": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -25506,6 +25698,19 @@
             "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
             "integrity": "sha512-B+enWhmw6cjfVC7kS8Pj9pCrKSc5txArRyaYGe088shv/FGWH+0Rjx/xPgtsWfsUtS27FkP697E4DDhgrgoc0Q=="
         },
+        "which-typed-array": {
+            "version": "1.1.9",
+            "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.9.tgz",
+            "integrity": "sha512-w9c4xkx6mPidwp7180ckYWfMmvxpjlZuIudNtDf4N/tTAUB8VJbX25qZoAsrtGuYNnGw3pa0AXgbGKRB8/EceA==",
+            "requires": {
+                "available-typed-arrays": "^1.0.5",
+                "call-bind": "^1.0.2",
+                "for-each": "^0.3.3",
+                "gopd": "^1.0.1",
+                "has-tostringtag": "^1.0.0",
+                "is-typed-array": "^1.1.10"
+            }
+        },
         "widest-line": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-3.1.0.tgz",
diff --git a/web/build-xec-apps/package.json b/web/build-xec-apps/package.json
--- a/web/build-xec-apps/package.json
+++ b/web/build-xec-apps/package.json
@@ -20,6 +20,8 @@
         "gatsby-plugin-styled-components": "^6.3.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "styled-components": "^5.3.6"
+        "react-json-pretty": "^2.2.0",
+        "styled-components": "^5.3.6",
+        "util": "^0.12.5"
     }
 }
diff --git a/web/build-xec-apps/src/components/ChronikMethodCard.js b/web/build-xec-apps/src/components/ChronikMethodCard.js
new file mode 100644
--- /dev/null
+++ b/web/build-xec-apps/src/components/ChronikMethodCard.js
@@ -0,0 +1,185 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import JSONPretty from 'react-json-pretty';
+import JSONPrettyMon from 'react-json-pretty/themes/monikai.css';
+const Wrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    height: fit-content;
+    align-items: center;
+    padding: 0 1rem;
+    max-width: 100%;
+    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,
+        rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
+    background-color: lightgrey;
+    svg {
+        transform: ${props => (props.expanded ? 'rotate(90deg)' : 'rotate(0)')};
+        transition: ${props =>
+            props.expanded
+                ? 'transform 200ms ease-out'
+                : 'transform 90ms ease-out'};
+    }
+`;
+
+const MethodTitle = styled.h3`
+    font-size: 16px;
+    background-color: #00abe7;
+    color: white;
+    width: 30%;
+    white-space: nowrap;
+    height: auto;
+    margin-right: 2rem;
+    text-align: center;
+    padding: 0.5rem 0.5rem;
+    @media (max-width: 762px) {
+        font-size: 14px;
+        width: 50%;
+    }
+`;
+
+const MethodDesc = styled.span``;
+const MethodHeader = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: 100%;
+    gap: 1rem;
+
+    ${MethodTitle} {
+        flex: 2;
+    }
+    ${MethodDesc} {
+        flex: 3;
+        float: right;
+        text-align: left;
+        max-width: 50%;
+        @media (max-width: 762px) {
+            font-size: 14px;
+        }
+    }
+`;
+
+const ExpandingElement = styled.div`
+    max-height: ${props => (props.open ? '30rem' : '0rem')};
+    transition: ${props =>
+        props.open
+            ? 'max-height 1000ms ease-out'
+            : 'max-height 300ms ease-out'};
+    overflow: hidden;
+    width: 100%;
+    background-color: white;
+    margin: 0;
+    padding: 0 1rem;
+    display: flex;
+    flex-direction: column;
+`;
+
+const InputCtn = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    height: 5rem;
+`;
+
+const StyledSubmit = styled.button``;
+
+const StyledInput = styled.input`
+    padding: 10px;
+    width: 50%;
+    height: 1.3rem;
+    font-size: 16px;
+`;
+
+const ExampleCode = styled.pre`
+    background-color: black;
+    color: white;
+    font-size: 14px;
+    float: left;
+    width: 50%;
+    height: 10rem;
+    white-space: wrap;
+`;
+
+const ExampleCtn = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  justify;
+  width: 100%;
+  svg{
+    transform: rotate(180deg);
+    margin-right: 10%;
+    &:hover{
+        fill: #00abe7;
+    }
+  }
+`;
+
+const JsonCtn = styled.div`
+    background-color: transparent;
+    max-width: 100%;
+    overflow-y: scroll;
+    height: 100%;
+`;
+const ChronikMethodCard = ({
+    name,
+    description,
+    inputLabel,
+    method,
+    isExpanded,
+    example,
+    details,
+}) => {
+    const [result, setResult] = useState('');
+    const [userInput, setUserInput] = useState({ value: '' });
+
+    const handleTextInputChange = event => {
+        setUserInput(event.target.value);
+    };
+
+    return (
+        <>
+            <Wrapper expanded={isExpanded}>
+                <MethodHeader>
+                    <MethodTitle>{name}</MethodTitle>
+                    <MethodDesc>{description}</MethodDesc>
+                </MethodHeader>
+                <ExpandingElement open={isExpanded}>
+                    <ExampleCtn>
+                        <ExampleCode>{details}</ExampleCode>
+                    </ExampleCtn>
+                    <InputCtn>
+                        <StyledInput
+                            placeholder={inputLabel}
+                            onChange={handleTextInputChange}
+                        />
+                        <StyledSubmit
+                            onClick={async () => {
+                                const response = await method(userInput);
+                                if (response) {
+                                    setResult(response);
+                                } else setResult('Please enter a valid input');
+                            }}
+                        >
+                            Try it
+                        </StyledSubmit>
+                    </InputCtn>
+                    {result.length > 0 && (
+                        <JsonCtn>
+                            <JSONPretty
+                                id="json-pretty"
+                                data={result}
+                                theme={JSONPrettyMon}
+                            ></JSONPretty>
+                        </JsonCtn>
+                    )}
+                </ExpandingElement>
+            </Wrapper>
+        </>
+    );
+};
+
+export default ChronikMethodCard;
diff --git a/web/build-xec-apps/src/pages/chronik-demo.js b/web/build-xec-apps/src/pages/chronik-demo.js
new file mode 100644
--- /dev/null
+++ b/web/build-xec-apps/src/pages/chronik-demo.js
@@ -0,0 +1,95 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import ChronikMethodCard from '../components/ChronikMethodCard';
+import { chronikMethods } from '../assets/chronikMethods';
+const Wrapper = styled.div`
+    background-color: white;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: top;
+    padding-top: 0.5rem;
+    max-width: 100%;
+    height: 100%;
+`;
+const Header = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: white;
+    color: black;
+    min-width: 100%;
+`;
+
+const PageTitle = styled.h1``;
+
+const PageDesc = styled.p`
+    padding: 0rem 1rem;
+    max-width: 60%;
+    @media (max-width: 762px) {
+        max-width: 100%;
+    }
+`;
+const ChronikCardCtn = styled.div`
+    display: flex;
+    flex-wrap: wrap;
+    width: 70%;
+    background-color: white;
+    gap: 1rem;
+    color: black;
+    padding-bottom: 2rem;
+    @media (max-width: 762px) {
+        width: 100%;
+    }
+`;
+const ClickableComponentWrapper = styled.div`
+    width: 100%;
+`;
+
+const ChronikDemo = () => {
+    const [expandChronikMethodCard, setExpandChronikMethodCard] =
+        useState(null);
+
+    return (
+        <>
+            <Header>
+                <PageTitle>Chronik Indexer</PageTitle>
+                <PageDesc>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                    Aliquam rutrum aliquet erat et congue.{' '}
+                </PageDesc>
+            </Header>
+            <Wrapper>
+                <ChronikCardCtn>
+                    {chronikMethods.map(method => {
+                        return (
+                            <ClickableComponentWrapper
+                                onClick={() => {
+                                    setExpandChronikMethodCard(method.key);
+                                }}
+                                key={method.key}
+                            >
+                                <ChronikMethodCard
+                                    name={method.name}
+                                    description={method.description}
+                                    inputLabel={method.inputLabel}
+                                    example={method.example}
+                                    details={method.details}
+                                    method={method.method}
+                                    isExpanded={
+                                        expandChronikMethodCard === method.key
+                                            ? true
+                                            : false
+                                    }
+                                />
+                            </ClickableComponentWrapper>
+                        );
+                    })}
+                </ChronikCardCtn>
+            </Wrapper>
+        </>
+    );
+};
+
+export default ChronikDemo;