diff --git a/.env b/.env
index 4a7e37cccc..adc21721c8 100644
--- a/.env
+++ b/.env
@@ -129,6 +129,11 @@ SHIPPING_SERVICE_DOCKERFILE=./src/shippingservice/Dockerfile
 FLAGD_HOST=flagd
 FLAGD_PORT=8013
 
+#flagd-ui
+FLAGD_UI_HOST=flagd-ui
+FLAGD_UI_PORT=4000
+FLAGD_UI_DOCKERFILE=./src/flagd-ui/Dockerfile
+
 # Kafka
 KAFKA_SERVICE_PORT=9092
 KAFKA_SERVICE_ADDR=kafka:${KAFKA_SERVICE_PORT}
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 74f5e8ce28..402e84a827 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,677 +7,679 @@ the release.
 
 ## Unreleased
 
-* [accountingservice] allow running the container with non root user
+- [accountingservice] allow running the container with non root user
   ([#1692](https://github.com/open-telemetry/opentelemetry-demo/pull/1692))
-* [chore] Add yamllint to `make all`
+- [chore] Add yamllint to `make all`
   ([#1707](https://github.com/open-telemetry/opentelemetry-demo/pull/1707))
-* [chore] Fix gen-proto for accountingservice
+- [chore] Fix gen-proto for accountingservice
   ([#1709](https://github.com/open-telemetry/opentelemetry-demo/pull/1709))
+- [flagd-ui] Add UI for managing Flagd feature flags
+  ([#1725](https://github.com/open-telemetry/opentelemetry-demo/pull/1725))
 
 ## 1.11.1
 
-* [otel-col] Add docker stats receiver
+- [otel-col] Add docker stats receiver
   ([#1650](https://github.com/open-telemetry/opentelemetry-demo/pull/1650))
-* [otel-col] strip high-cardinality segments of span names
+- [otel-col] strip high-cardinality segments of span names
   ([#1668](https://github.com/open-telemetry/opentelemetry-demo/pull/1668))
-* [tests] run trace based tests concurrently
+- [tests] run trace based tests concurrently
   ([#1659](https://github.com/open-telemetry/opentelemetry-demo/pull/1659))
-* [otel-col] Set OTLP receiver endpoint to avoid breaking changes
+- [otel-col] Set OTLP receiver endpoint to avoid breaking changes
   ([#1662](https://github.com/open-telemetry/opentelemetry-demo/pull/1662))
-* [accountingservice] increase memory to 120MB
+- [accountingservice] increase memory to 120MB
   ([#1666](https://github.com/open-telemetry/opentelemetry-demo/pull/1666))
-* [frontend] Update nodejs to latest LTS and bump dependencies
+- [frontend] Update nodejs to latest LTS and bump dependencies
   ([#1670](https://github.com/open-telemetry/opentelemetry-demo/pull/1670))
-* [otel-col] Add host metrics receiver
+- [otel-col] Add host metrics receiver
   ([#1675](https://github.com/open-telemetry/opentelemetry-demo/pull/1675))
-* [adservice] bump dependencies & gradle version
+- [adservice] bump dependencies & gradle version
   ([#1681](https://github.com/open-telemetry/opentelemetry-demo/pull/1681))
 
 ## 1.11.0
 
-* [accountingservice] convert from Go service to .NET service, uses
+- [accountingservice] convert from Go service to .NET service, uses
   OpenTelemetry .NET Automatic Instrumentation.
   ([#1538](https://github.com/open-telemetry/opentelemetry-demo/pull/1538))
-* [frontend] fixed default flagd port for HTTPS connections
+- [frontend] fixed default flagd port for HTTPS connections
   ([#1609](https://github.com/open-telemetry/opentelemetry-demo/pull/1609))
-* [cartservice] bump .NET package to 1.9.0 release
+- [cartservice] bump .NET package to 1.9.0 release
   ([#1610](https://github.com/open-telemetry/opentelemetry-demo/pull/1610))
-* [Valkey] Replace Redis with Valkey
+- [Valkey] Replace Redis with Valkey
   ([#1619](https://github.com/open-telemetry/opentelemetry-demo/pull/1619))
-* [recommendation] updated flag name to match flagd configuration
+- [recommendation] updated flag name to match flagd configuration
   ([#1634](https://github.com/open-telemetry/opentelemetry-demo/pull/1634))
 
 ## 1.10.0
 
-* [frauddetectionservice] use span links when consuming from Kafka
+- [frauddetectionservice] use span links when consuming from Kafka
   ([#1501](https://github.com/open-telemetry/opentelemetry-demo/pull/1501))
-* [frontend] reunite trace from loadgenerator
+- [frontend] reunite trace from loadgenerator
   ([#1506](https://github.com/open-telemetry/opentelemetry-demo/pull/1506))
-* [repo] add traceBasedTests image to published images
+- [repo] add traceBasedTests image to published images
   ([#1507](https://github.com/open-telemetry/opentelemetry-demo/pull/1507))
-* [quoteservice] add manual metric, export logs periodically
+- [quoteservice] add manual metric, export logs periodically
   ([#1519](https://github.com/open-telemetry/opentelemetry-demo/pull/1519))
-* [flagd] export flagd traces to otel collector
+- [flagd] export flagd traces to otel collector
   ([#1522](https://github.com/open-telemetry/opentelemetry-demo/pull/1522))
-* [frontend] Pass down image optimization requests to imageprovider
+- [frontend] Pass down image optimization requests to imageprovider
   ([#1522](https://github.com/open-telemetry/opentelemetry-demo/pull/1522))
-* [kafka] add kafkaQueueProblems feature flag
+- [kafka] add kafkaQueueProblems feature flag
   ([#1528](https://github.com/open-telemetry/opentelemetry-demo/pull/1528))
-* [otelcollector] Add `redisreceiver`
+- [otelcollector] Add `redisreceiver`
   ([#1537](https://github.com/open-telemetry/opentelemetry-demo/pull/1537))
-* [traceBasedTests] update to v1.0.0
+- [traceBasedTests] update to v1.0.0
   ([#1551](https://github.com/open-telemetry/opentelemetry-demo/pull/1551))
-* [flagd] update to 0.10.1 and set 50M memory limit
+- [flagd] update to 0.10.1 and set 50M memory limit
   ([#1554](https://github.com/open-telemetry/opentelemetry-demo/pull/1554))
-* [loadgenerator] Configure feature flag evaluation tracing
+- [loadgenerator] Configure feature flag evaluation tracing
   ([#1553](https://github.com/open-telemetry/opentelemetry-demo/pull/1553))
-* [recommendationservice] Configure feature flag evaluation tracing
+- [recommendationservice] Configure feature flag evaluation tracing
   ([#1553](https://github.com/open-telemetry/opentelemetry-demo/pull/1553))
-* [loadgenerator] Fix feature flag hooks setter method
+- [loadgenerator] Fix feature flag hooks setter method
   ([#1556](https://github.com/open-telemetry/opentelemetry-demo/pull/1556))
-* [frontend] Slowloading of images based on imageSlowLoad flag
+- [frontend] Slowloading of images based on imageSlowLoad flag
   ([#1515](https://github.com/open-telemetry/opentelemetry-demo/pull/1486))
-* [frontend] Fix imageloading issues on optimized images. bump next.js version
+- [frontend] Fix imageloading issues on optimized images. bump next.js version
   ([#1571](https://github.com/open-telemetry/opentelemetry-demo/pull/1571))
-* [cartservice] bump .NET package to 1.8.1 release
+- [cartservice] bump .NET package to 1.8.1 release
   ([#1514](https://github.com/open-telemetry/opentelemetry-demo/pull/1514),
-   [#1580](https://github.com/open-telemetry/opentelemetry-demo/pull/1580))
-* [kafka] Fix permission issue with the telemetry agent when running in docker compose
+  [#1580](https://github.com/open-telemetry/opentelemetry-demo/pull/1580))
+- [kafka] Fix permission issue with the telemetry agent when running in docker compose
   ([#1574](https://github.com/open-telemetry/opentelemetry-demo/pull/1574))
-* [flagd] Add flagd service to minimal docker compose deployment
+- [flagd] Add flagd service to minimal docker compose deployment
   ([#1585](https://github.com/open-telemetry/opentelemetry-demo/pull/1585))
-* [kafka] Increase memory and Java heap limits
+- [kafka] Increase memory and Java heap limits
   ([#1592](https://github.com/open-telemetry/opentelemetry-demo/pull/1592))
-* chore: Add service version to OTEL_RESOURCE_ATTRIBUTES
+- chore: Add service version to OTEL_RESOURCE_ATTRIBUTES
   ([#1594](https://github.com/open-telemetry/opentelemetry-demo/pull/1594))
-* [checkout] increase Kafka resiliency and observability
+- [checkout] increase Kafka resiliency and observability
   ([#1590](https://github.com/open-telemetry/opentelemetry-demo/pull/1590))
 
 ## 1.9.0
 
-* [chore] docker compose: add container name as tag attribute to container logs
-* [featureflag] deprecate in favor of flagd
+- [chore] docker compose: add container name as tag attribute to container logs
+- [featureflag] deprecate in favor of flagd
   ([#1338](https://github.com/open-telemetry/opentelemetry-demo/pull/1388))
-* [checkoutservice] add producer interceptor for tracing
+- [checkoutservice] add producer interceptor for tracing
   ([#1400](https://github.com/open-telemetry/opentelemetry-demo/pull/1400))
-* [chore] increase memory for Collector and Jaeger
+- [chore] increase memory for Collector and Jaeger
   ([#1396](https://github.com/open-telemetry/opentelemetry-demo/pull/1396))
-* [chore] fix Make targets for restart and redeploy
+- [chore] fix Make targets for restart and redeploy
   ([#1397](https://github.com/open-telemetry/opentelemetry-demo/pull/1397))
-* [chore] add nightly releases
+- [chore] add nightly releases
   ([#1398](https://github.com/open-telemetry/opentelemetry-demo/pull/1398))
-* [checkoutservice] add producer interceptor for tracing
+- [checkoutservice] add producer interceptor for tracing
   ([#1400](https://github.com/open-telemetry/opentelemetry-demo/pull/1400))
-* [productcatalogservice] fix graceful shutdown issues
+- [productcatalogservice] fix graceful shutdown issues
   ([#1402](https://github.com/open-telemetry/opentelemetry-demo/pull/1402))
-* [chore] remove unused integration test
+- [chore] remove unused integration test
   ([#1406](https://github.com/open-telemetry/opentelemetry-demo/pull/1406))
-* [CartService] - Add Host Detector
+- [CartService] - Add Host Detector
   ([#1415](https://github.com/open-telemetry/opentelemetry-demo/pull/1415))
-* [chore] - add tests and odd profiles to make stop
+- [chore] - add tests and odd profiles to make stop
   ([#1427](https://github.com/open-telemetry/opentelemetry-demo/pull/1427))
-* [shippingservice] fix context propagation
+- [shippingservice] fix context propagation
   ([#1433](https://github.com/open-telemetry/opentelemetry-demo/pull/1433))
-* [chore] - Update Telemetry Components
+- [chore] - Update Telemetry Components
   ([#1440](https://github.com/open-telemetry/opentelemetry-demo/pull/1440))
-* [loadgenerator] emit logs via OTLP
+- [loadgenerator] emit logs via OTLP
   ([#1446](https://github.com/open-telemetry/opentelemetry-demo/pull/1446))
-* [frontend] reset quantity when new product selected
+- [frontend] reset quantity when new product selected
   ([#1447](https://github.com/open-telemetry/opentelemetry-demo/pull/1447))
-* [paymentservice] add paymentServiceFailure feature flag
+- [paymentservice] add paymentServiceFailure feature flag
   ([#1449](https://github.com/open-telemetry/opentelemetry-demo/pull/1449))
-* [checkoutservice] add paymentServiceUnreachable feature flag
+- [checkoutservice] add paymentServiceUnreachable feature flag
   ([#1449](https://github.com/open-telemetry/opentelemetry-demo/pull/1449))
-* [Frontend-proxy] Add restart policy to compose file
+- [Frontend-proxy] Add restart policy to compose file
   ([#1448](https://github.com/open-telemetry/opentelemetry-demo/pull/1448))
-* [cartservice] update .NET to .NET 8.0.3
+- [cartservice] update .NET to .NET 8.0.3
   ([#1460](https://github.com/open-telemetry/opentelemetry-demo/pull/1460))
-* [adservice] add adServiceManualGC feature flag
+- [adservice] add adServiceManualGC feature flag
   ([#1463](https://github.com/open-telemetry/opentelemetry-demo/pull/1463))
-* [frontendproxy] remove deprecated start_child_span option
+- [frontendproxy] remove deprecated start_child_span option
   ([#1469](https://github.com/open-telemetry/opentelemetry-demo/pull/1469))
-* [currency] fix metric name
+- [currency] fix metric name
   ([#1470](https://github.com/open-telemetry/opentelemetry-demo/pull/1470))
-* [frontend] disable instrumentation-fs library
+- [frontend] disable instrumentation-fs library
   ([#1473](https://github.com/open-telemetry/opentelemetry-demo/pull/1473))
-* [Imageprovider] Create Nginx service to host images, add instrumentation to it
+- [Imageprovider] Create Nginx service to host images, add instrumentation to it
   ([#1462](https://github.com/open-telemetry/opentelemetry-demo/pull/1462))
-* [loadgenerator] added loadgeneratorFloodHomepage flagd
+- [loadgenerator] added loadgeneratorFloodHomepage flagd
   ([#1486](https://github.com/open-telemetry/opentelemetry-demo/pull/1486))
-* [adservice] add adServiceHighCpu feature flag
+- [adservice] add adServiceHighCpu feature flag
   ([#1510](https://github.com/open-telemetry/opentelemetry-demo/pull/1510))
 
 ## 1.8.0
 
-* [grafana] update grafana to 10.2.3
+- [grafana] update grafana to 10.2.3
   ([#1332](https://github.com/open-telemetry/opentelemetry-demo/pull/1332))
-* [frontendproxy] Enable envoy environment resource detector
+- [frontendproxy] Enable envoy environment resource detector
   ([#1291](https://github.com/open-telemetry/opentelemetry-demo/pull/1291))
-* [currencyservice] - add package name prefix to `rpc.service` attribute
+- [currencyservice] - add package name prefix to `rpc.service` attribute
   ([#1333](https://github.com/open-telemetry/opentelemetry-demo/pull/1333))
-* [currency] fix metric exporter options
+- [currency] fix metric exporter options
   ([#1335](https://github.com/open-telemetry/opentelemetry-demo/pull/1335))
-* [ffspostgres] define and use demo specific postgres image
+- [ffspostgres] define and use demo specific postgres image
   ([#1338](https://github.com/open-telemetry/opentelemetry-demo/pull/1338))
-* [loadgenerator, frontend] enable browser traffic in loadgenerator using playwright
+- [loadgenerator, frontend] enable browser traffic in loadgenerator using playwright
   ([#1345](https://github.com/open-telemetry/opentelemetry-demo/pull/1345))
-* [accountingservice] update wiki link
+- [accountingservice] update wiki link
   ([#1346](https://github.com/open-telemetry/opentelemetry-demo/pull/1346))
-* [checkoutservice] update wiki link
+- [checkoutservice] update wiki link
   ([#1346](https://github.com/open-telemetry/opentelemetry-demo/pull/1346))
-* [productcatalogservice] update wiki link
+- [productcatalogservice] update wiki link
   ([#1346](https://github.com/open-telemetry/opentelemetry-demo/pull/1346))
-* [adservice] added group and anonymous read permission to
+- [adservice] added group and anonymous read permission to
   opentelemetry-javaagent.jar
   ([#1348](https://github.com/open-telemetry/opentelemetry-demo/pull/1348))
-* [frauddetectionservice] added group and anonymous read permission to
+- [frauddetectionservice] added group and anonymous read permission to
   opentelemetry-javaagent.jar
   ([#1348](https://github.com/open-telemetry/opentelemetry-demo/pull/1348))
-* [adservice] Major version update for Java instrumentation, version 2.0.0
+- [adservice] Major version update for Java instrumentation, version 2.0.0
   ([#1352](https://github.com/open-telemetry/opentelemetry-demo/pull/1352))
-* [frauddetectionservice] Major version update for Java instrumentation,
+- [frauddetectionservice] Major version update for Java instrumentation,
   version 2.0.0
   ([#1352](https://github.com/open-telemetry/opentelemetry-demo/pull/1352))
-* [kafka] Major version update for Java instrumentation, version 2.0.0
+- [kafka] Major version update for Java instrumentation, version 2.0.0
   ([#1352](https://github.com/open-telemetry/opentelemetry-demo/pull/1352))
-* Align env variables for OTLP ports
+- Align env variables for OTLP ports
   ([#1353](https://github.com/open-telemetry/opentelemetry-demo/pull/1353))
-* Update dependent services - Collector, Grafana, Jaeger, Prometheus, etc.
+- Update dependent services - Collector, Grafana, Jaeger, Prometheus, etc.
   ([#1354](https://github.com/open-telemetry/opentelemetry-demo/pull/1354))
-* [OpenSearch] Use native OpenSearch exporter from Collector
+- [OpenSearch] Use native OpenSearch exporter from Collector
   ([#1356](https://github.com/open-telemetry/opentelemetry-demo/pull/1356))
-* Update GO SDKs & fix metrics config
+- Update GO SDKs & fix metrics config
   ([#1357](https://github.com/open-telemetry/opentelemetry-demo/pull/1357))
-* Update Python SDKs
+- Update Python SDKs
   ([#1358](https://github.com/open-telemetry/opentelemetry-demo/pull/1358))
-* [loadgenerator] fix browser traffic enabled flag
+- [loadgenerator] fix browser traffic enabled flag
   ([#1359](https://github.com/open-telemetry/opentelemetry-demo/pull/1359))
-* [productcatalog] allow products to be extended
+- [productcatalog] allow products to be extended
   ([#1363](https://github.com/open-telemetry/opentelemetry-demo/pull/1363))
-* [tests] update trace based tests for semantic conventions
+- [tests] update trace based tests for semantic conventions
   ([#1377](https://github.com/open-telemetry/opentelemetry-demo/pull/1377))
-* [currencyservice] Add OTLP logs
+- [currencyservice] Add OTLP logs
   ([#1378](https://github.com/open-telemetry/opentelemetry-demo/pull/1378))
-* [cartservice] update .NET to .NET 8.0.2
+- [cartservice] update .NET to .NET 8.0.2
   ([#1380](https://github.com/open-telemetry/opentelemetry-demo/pull/1380))
 
 ## 1.7.2
 
-* [cartservice] update .NET package to 1.7.0 release
+- [cartservice] update .NET package to 1.7.0 release
   ([#1326](https://github.com/open-telemetry/opentelemetry-demo/pull/1326))
-* [loadgenerator and recommendationservice] Update python base image
+- [loadgenerator and recommendationservice] Update python base image
   ([#1329](https://github.com/open-telemetry/opentelemetry-demo/pull/1329))
 
 ## 1.7.1
 
-* [grafana] revert to 10.2.0
-* [cartservice] disable config reload
+- [grafana] revert to 10.2.0
+- [cartservice] disable config reload
   ([#1312](https://github.com/open-telemetry/opentelemetry-demo/pull/1312))
-* [cartservice] fixed cartServiceFailure feature flag
+- [cartservice] fixed cartServiceFailure feature flag
   ([#1313](https://github.com/open-telemetry/opentelemetry-demo/pull/1313))
-* [accountingservice] Update dependencies and semconv
-* ([#1316](https://github.com/open-telemetry/opentelemetry-demo/pull/1316))
-* [featureflagservice] Allow setting initial feature flag values
+- [accountingservice] Update dependencies and semconv
+- ([#1316](https://github.com/open-telemetry/opentelemetry-demo/pull/1316))
+- [featureflagservice] Allow setting initial feature flag values
   ([#1319](https://github.com/open-telemetry/opentelemetry-demo/pull/1319))
 
 ## 1.7.0
 
-* update PHP quoteservice to use 1.0.0
+- update PHP quoteservice to use 1.0.0
   ([#1236](https://github.com/open-telemetry/opentelemetry-demo/pull/1236))
-* Add ability to do probabilistic A/B testing with feature flags
+- Add ability to do probabilistic A/B testing with feature flags
   ([#1237](https://github.com/open-telemetry/opentelemetry-demo/pull/1237))
-* add env var for pinning trace-based test tool version
+- add env var for pinning trace-based test tool version
   ([#1239](https://github.com/open-telemetry/opentelemetry-demo/pull/1239))
-* [cartservice] Add .NET memory, CPU, and thread metrics
+- [cartservice] Add .NET memory, CPU, and thread metrics
   ([#1265](https://github.com/open-telemetry/opentelemetry-demo/pull/1265))
-* [cartservice] update .NET to .NET 8.0
+- [cartservice] update .NET to .NET 8.0
   ([#1272](https://github.com/open-telemetry/opentelemetry-demo/pull/1272))
-* update loadgenerator dependencies and the base image
+- update loadgenerator dependencies and the base image
   ([#1274](https://github.com/open-telemetry/opentelemetry-demo/pull/1274))
-* [currencyservice]: update opentelemetry-cpp to 1.12.0
+- [currencyservice]: update opentelemetry-cpp to 1.12.0
   ([#1275](https://github.com/open-telemetry/opentelemetry-demo/pull/1275))
-* [currencyservice] bring back multistage build
+- [currencyservice] bring back multistage build
   ([#1276](https://github.com/open-telemetry/opentelemetry-demo/pull/1276))
-* fix env var for pinning trace-based test tool version
+- fix env var for pinning trace-based test tool version
   ([#1283](https://github.com/open-telemetry/opentelemetry-demo/pull/1283))
-* [accountingservice] Add additional attributes to Kafka spans
+- [accountingservice] Add additional attributes to Kafka spans
   ([#1286](https://github.com/open-telemetry/opentelemetry-demo/pull/1286))
-* [shippingservice] update Rust OTel libraries to 0.21
+- [shippingservice] update Rust OTel libraries to 0.21
   ([#1287](https://github.com/open-telemetry/opentelemetry-demo/pull/1287))
 
 ## 1.6.0
 
-* update PHP quoteservice to use RC1
+- update PHP quoteservice to use RC1
   ([#1114](https://github.com/open-telemetry/opentelemetry-demo/pull/1114))
-* [cartservice] update .NET package to 1.6.0 release
+- [cartservice] update .NET package to 1.6.0 release
   ([#1115](https://github.com/open-telemetry/opentelemetry-demo/pull/1115))
-* Set metric description to blank for rpc.server.duration and queueSize
+- Set metric description to blank for rpc.server.duration and queueSize
   ([#1120](https://github.com/open-telemetry/opentelemetry-demo/pull/1120))
-* sluggify Grafana dashboard name
+- sluggify Grafana dashboard name
   ([#1121](https://github.com/open-telemetry/opentelemetry-demo/pull/1121))
-* [kafka frauddetection adservice] update java agent versions
+- [kafka frauddetection adservice] update java agent versions
   ([#1132](https://github.com/open-telemetry/opentelemetry-demo/pull/1132))
-* update dependent components to latest versions
+- update dependent components to latest versions
   ([#1146](https://github.com/open-telemetry/opentelemetry-demo/pull/1146))
-* [prometheus] Enabled support for the OTLP write receiver
+- [prometheus] Enabled support for the OTLP write receiver
   ([#1149](https://github.com/open-telemetry/opentelemetry-demo/pull/1149))
-* [grafana] fix dashboard metric names and update settings
+- [grafana] fix dashboard metric names and update settings
   ([#1150](https://github.com/open-telemetry/opentelemetry-demo/pull/1150))
-* [otelcol] add httpcheck receiver for synthetic check of frontendproxy
+- [otelcol] add httpcheck receiver for synthetic check of frontendproxy
   ([#1162](https://github.com/open-telemetry/opentelemetry-demo/pull/1162))
-* pinning trace-based test tool version and adding files as volumes
+- pinning trace-based test tool version and adding files as volumes
   ([#1182](https://github.com/open-telemetry/opentelemetry-demo/pull/1182))
-* [jaeger] fix Jager SPM / Monitor support
+- [jaeger] fix Jager SPM / Monitor support
   ([#1174](https://github.com/open-telemetry/opentelemetry-demo/pull/1174))
-* [otelcol] merge configuration files for base and observability configs
+- [otelcol] merge configuration files for base and observability configs
   ([#1173](https://github.com/open-telemetry/opentelemetry-demo/pull/1173))
-* [frontendproxy] Fix service graph by enabling client spans in envoy proxy
+- [frontendproxy] Fix service graph by enabling client spans in envoy proxy
   ([#1180](https://github.com/open-telemetry/opentelemetry-demo/pull/1180))
-* [java-services] Update java, gradle and OTel agent versions
+- [java-services] Update java, gradle and OTel agent versions
   ([#1183](https://github.com/open-telemetry/opentelemetry-demo/pull/1183))
-* [opensearch] Add OpenSearch as an OTLP Logging backend
+- [opensearch] Add OpenSearch as an OTLP Logging backend
   ([#1151](https://github.com/open-telemetry/opentelemetry-demo/pull/1151))
-* [opensearch] Add Grafana dashboard panels for OpenSearch log data
+- [opensearch] Add Grafana dashboard panels for OpenSearch log data
   ([#1193](https://github.com/open-telemetry/opentelemetry-demo/pull/1193))
-* [go-sdk] Workaround: disable gRPC metrics in Go services
+- [go-sdk] Workaround: disable gRPC metrics in Go services
   ([#1205](https://github.com/open-telemetry/opentelemetry-demo/pull/1205))
 
 ## 1.5.0
 
-* update trace-based tests to test stream events
+- update trace-based tests to test stream events
   ([#1072](https://github.com/open-telemetry/opentelemetry-demo/pull/1072))
-* Add cartServiceFailure feature flag triggering Cart Service errors
+- Add cartServiceFailure feature flag triggering Cart Service errors
   ([#824](https://github.com/open-telemetry/opentelemetry-demo/pull/824))
-* [paymentservice] update JS SDKs to 1.12.0/0.38.0
+- [paymentservice] update JS SDKs to 1.12.0/0.38.0
   ([#853](https://github.com/open-telemetry/opentelemetry-demo/pull/853))
-* [frontend] update JS SDKs to 1.12.0/0.38.0
+- [frontend] update JS SDKs to 1.12.0/0.38.0
   ([#853](https://github.com/open-telemetry/opentelemetry-demo/pull/853))
-* [chore] use `otel-demo` namespace for generated kubernetes manifests
+- [chore] use `otel-demo` namespace for generated kubernetes manifests
   ([#848](https://github.com/open-telemetry/opentelemetry-demo/pull/848))
-* [collector] update collector version to 0.76.1 and remove connectors feature gate.
+- [collector] update collector version to 0.76.1 and remove connectors feature gate.
   ([#857](https://github.com/open-telemetry/opentelemetry-demo/pull/857))
-* [shippingservice] update rust version and dependencies
+- [shippingservice] update rust version and dependencies
   ([#865](https://github.com/open-telemetry/opentelemetry-demo/pull/865))
-* [load generator] Bump loagen dependencies
+- [load generator] Bump loagen dependencies
   ([#869](https://github.com/open-telemetry/opentelemetry-demo/pull/869))
-* [grafana] fix demo dashboard to be compatible with spanmetrics connector
+- [grafana] fix demo dashboard to be compatible with spanmetrics connector
   ([#874](https://github.com/open-telemetry/opentelemetry-demo/pull/874))
-* [quoteservice] enabling batch span processor metrics
+- [quoteservice] enabling batch span processor metrics
   ([#878](https://github.com/open-telemetry/opentelemetry-demo/pull/878))
-* [kafka] remove KRaft mode support workarounds
+- [kafka] remove KRaft mode support workarounds
   ([#880](https://github.com/open-telemetry/opentelemetry-demo/pull/880))
-* [currencyservice] Fix OTel C++ build and update OTel version to 1.9.0
+- [currencyservice] Fix OTel C++ build and update OTel version to 1.9.0
   ([#886](https://github.com/open-telemetry/opentelemetry-demo/pull/886))
-* [featureflagservice] Upgrade opentelemetry_ecto to 1.1.1
+- [featureflagservice] Upgrade opentelemetry_ecto to 1.1.1
   ([#899](https://github.com/open-telemetry/opentelemetry-demo/pull/899))
-* [currencyservice] Fix OTLP export to use default env vars
+- [currencyservice] Fix OTLP export to use default env vars
   ([#904](https://github.com/open-telemetry/opentelemetry-demo/pull/904))
-* [featureflagservice] Bump OTP version to 26.0
+- [featureflagservice] Bump OTP version to 26.0
   ([#903](https://github.com/open-telemetry/opentelemetry-demo/pull/903))
-* Regenerate kubernetes manifest and add auto-generate comment
+- Regenerate kubernetes manifest and add auto-generate comment
   ([#909](https://github.com/open-telemetry/opentelemetry-demo/pull/909))
-* [loadgenerator] fix redirect on recommendations load
+- [loadgenerator] fix redirect on recommendations load
   ([#913](https://github.com/open-telemetry/opentelemetry-demo/pull/913))
-* [loadgenerator] run load through frontend proxy (Envoy)
+- [loadgenerator] run load through frontend proxy (Envoy)
   ([#914](https://github.com/open-telemetry/opentelemetry-demo/pull/914))
-* [cartservice] update .NET package to 1.5.0 release
+- [cartservice] update .NET package to 1.5.0 release
   ([#935](https://github.com/open-telemetry/opentelemetry-demo/pull/935))
-* [cartservice] update service to .NET 7
+- [cartservice] update service to .NET 7
   ([#942](https://github.com/open-telemetry/opentelemetry-demo/pull/942))
-* [tests] Add trace-based testing examples
+- [tests] Add trace-based testing examples
   ([#877](https://github.com/open-telemetry/opentelemetry-demo/pull/877))
-* Introduce minimal mode to run demo
+- Introduce minimal mode to run demo
   ([#872](https://github.com/open-telemetry/opentelemetry-demo/pull/872))
-* [frontendproxy]Envoy expose a route for the collector to route frontend spans
+- [frontendproxy]Envoy expose a route for the collector to route frontend spans
   ([#938](https://github.com/open-telemetry/opentelemetry-demo/pull/938))
-* [frontend] update JS SDKs to 1.15.0/0.41.0
+- [frontend] update JS SDKs to 1.15.0/0.41.0
   ([#853](https://github.com/open-telemetry/opentelemetry-demo/pull/853))
-* [shippingservice] Update Rust dependencies and add TelemetryResourceDetector
+- [shippingservice] Update Rust dependencies and add TelemetryResourceDetector
   ([#972](https://github.com/open-telemetry/opentelemetry-demo/pull/972))
-* Update frontendproxy's env for minimal
+- Update frontendproxy's env for minimal
   ([#983](https://github.com/open-telemetry/opentelemetry-demo/pull/983))
-* [FeatureFlagService] Update dependencies
+- [FeatureFlagService] Update dependencies
   ([#992](https://github.com/open-telemetry/opentelemetry-demo/pull/992))
-* [currencyService] Update OTel dependency
+- [currencyService] Update OTel dependency
   ([#991](https://github.com/open-telemetry/opentelemetry-demo/pull/991))
-* [LoadGenerator & RecommendatationService] update dependencies
+- [LoadGenerator & RecommendatationService] update dependencies
   ([#988](https://github.com/open-telemetry/opentelemetry-demo/pull/988))
-* [FraudDetectionService] Updated Kotlin version and OTel dependencies
+- [FraudDetectionService] Updated Kotlin version and OTel dependencies
   ([#987](https://github.com/open-telemetry/opentelemetry-demo/pull/987))
-* [quoteservice] update php dependencies
+- [quoteservice] update php dependencies
   ([#1009](https://github.com/open-telemetry/opentelemetry-demo/pull/1009))
-* [tests] Update trace-based tests run script
+- [tests] Update trace-based tests run script
   ([#1018](https://github.com/open-telemetry/opentelemetry-demo/pull/1018))
-* [PaymentService] Update node to LTS version and bump deps
+- [PaymentService] Update node to LTS version and bump deps
   ([#1029](https://github.com/open-telemetry/opentelemetry-demo/pull/1029))
-* [frontend] Update dependencies
+- [frontend] Update dependencies
   ([#1054](https://github.com/open-telemetry/opentelemetry-demo/pull/1054))
-* [frontendproxy] Fix typo URL endpoint for FrontendProxy
+- [frontendproxy] Fix typo URL endpoint for FrontendProxy
   ([#1075](https://github.com/open-telemetry/opentelemetry-demo/pull/1075))
-* [checkoutservice] Upgrade Shopify/sarama to IBM/sarama
+- [checkoutservice] Upgrade Shopify/sarama to IBM/sarama
   ([#1083](https://github.com/open-telemetry/opentelemetry-demo/pull/1083))
-* [accountingservice] Upgrade Shopify/sarama to IBM/sarama
+- [accountingservice] Upgrade Shopify/sarama to IBM/sarama
   ([#1083](https://github.com/open-telemetry/opentelemetry-demo/pull/1083))
-* Update Telemetry Components
+- Update Telemetry Components
   ([#1085](https://github.com/open-telemetry/opentelemetry-demo/pull/1085))
-* [cartservice] Support for logs
+- [cartservice] Support for logs
   ([#1086](https://github.com/open-telemetry/opentelemetry-demo/pull/1086))
-* [TraceTests] Update span attributes to align with new IBM/sarama instrumentation
+- [TraceTests] Update span attributes to align with new IBM/sarama instrumentation
   ([#1096](https://github.com/open-telemetry/opentelemetry-demo/pull/1096))
 
 ## 1.4.0
 
-* [cart] use 60m TTL for cart entries in redis
+- [cart] use 60m TTL for cart entries in redis
   ([#779](https://github.com/open-telemetry/opentelemetry-demo/pull/779))
-* spanmetrics dashboard service&operation rates & latencies
+- spanmetrics dashboard service&operation rates & latencies
   ([#787](https://github.com/open-telemetry/opentelemetry-demo/pull/787))
-* Adds Kubernetes manifests for the demo
+- Adds Kubernetes manifests for the demo
   ([#791](https://github.com/open-telemetry/opentelemetry-demo/pull/791))
-* [bug] fixing quoteservice metrics exporting (PHP)
+- [bug] fixing quoteservice metrics exporting (PHP)
   ([#793](https://github.com/open-telemetry/opentelemetry-demo/pull/793))
-* Added app.session.id attribute to frontend spans
+- Added app.session.id attribute to frontend spans
   ([#795](https://github.com/open-telemetry/opentelemetry-demo/pull/795))
-* Add logs for Ad service and Recommendation service
+- Add logs for Ad service and Recommendation service
   ([#796](https://github.com/open-telemetry/opentelemetry-demo/pull/796))
-* Opentelemetry Collector Data Flow Dashboard
+- Opentelemetry Collector Data Flow Dashboard
   ([#797](https://github.com/open-telemetry/opentelemetry-demo/pull/797))
-* Fixed shipping update in the frontend UI when number of products in cart
+- Fixed shipping update in the frontend UI when number of products in cart
   changes
   ([#799](https://github.com/open-telemetry/opentelemetry-demo/pull/799))
-* Update frontend JavaScript SDKs to: 1.10.1/0.36.x
+- Update frontend JavaScript SDKs to: 1.10.1/0.36.x
   ([#805](https://github.com/open-telemetry/opentelemetry-demo/pull/805))
-* Fix http.status_code on error in frontend
+- Fix http.status_code on error in frontend
   ([#810](https://github.com/open-telemetry/opentelemetry-demo/pull/810))
-* Fix bug in shipping calculation
+- Fix bug in shipping calculation
   ([#814](https://github.com/open-telemetry/opentelemetry-demo/pull/814))
-* Reduce Kafka mem allocation
+- Reduce Kafka mem allocation
   ([#798](https://github.com/open-telemetry/opentelemetry-demo/pull/798))
-* Updated frontend web tracer to us batch processor
+- Updated frontend web tracer to us batch processor
   ([#819](https://github.com/open-telemetry/opentelemetry-demo/pull/819))
-* Moved env platform flag to the footer, changed it to free text
+- Moved env platform flag to the footer, changed it to free text
   ([#818](https://github.com/open-telemetry/opentelemetry-demo/pull/818))
-* Update OTel Collector
+- Update OTel Collector
   ([#822](https://github.com/open-telemetry/opentelemetry-demo/pull/822))
-* Update OTel Collector to use spanmetrics connector instead of spanmetrics
+- Update OTel Collector to use spanmetrics connector instead of spanmetrics
   processors
   ([#829](https://github.com/open-telemetry/opentelemetry-demo/pull/829))
 
 ## 1.3.1
 
-* [docs] Drop docs folder as step in migration to OTel website
+- [docs] Drop docs folder as step in migration to OTel website
   ([#729](https://github.com/open-telemetry/opentelemetry-demo/issues/729))
-* rename proto package from hipstershop to oteldemo
+- rename proto package from hipstershop to oteldemo
   ([#740](https://github.com/open-telemetry/opentelemetry-demo/pull/740))
-* Removed unnecessary code from Program.cs
+- Removed unnecessary code from Program.cs
   ([#754](https://github.com/open-telemetry/opentelemetry-demo/pull/754))
-* feature flag service: update the dependency tls_certificate_check and bump to
+- feature flag service: update the dependency tls_certificate_check and bump to
   OTP-25 ([#756](https://github.com/open-telemetry/opentelemetry-demo/pull/756))
-* Bump up OTEL Java Agent version to 1.23.0
+- Bump up OTEL Java Agent version to 1.23.0
   ([#757](https://github.com/open-telemetry/opentelemetry-demo/pull/757))
-* Add counter metric to currency service (C++)
+- Add counter metric to currency service (C++)
   ([#759](https://github.com/open-telemetry/opentelemetry-demo/issues/759))
-* Use browserDetector to populate browser info to frontend-web telemetry
+- Use browserDetector to populate browser info to frontend-web telemetry
   ([#760](https://github.com/open-telemetry/opentelemetry-demo/pull/760))
-* [chore] update for Mac M2 architecture
+- [chore] update for Mac M2 architecture
   ([#764](https://github.com/open-telemetry/opentelemetry-demo/pull/764))
-* [chore] align memory limits with Helm chart
+- [chore] align memory limits with Helm chart
   ([#781](https://github.com/open-telemetry/opentelemetry-demo/pull/781))
-* Use an async PHP runtime, bump versions to latest betas
+- Use an async PHP runtime, bump versions to latest betas
   ([#823](https://github.com/open-telemetry/opentelemetry-demo/pull/823))
 
 ## 1.3.0
 
-* Use `frontend-web` as service name for browser/web requests
-([#628](https://github.com/open-telemetry/opentelemetry-demo/pull/628))
-* Update `quoteservice` to use opentelemetry-php beta release
-([#644](https://github.com/open-telemetry/opentelemetry-demo/pull/644))
-* Add build for arm64 arch
-([#644](https://github.com/open-telemetry/opentelemetry-demo/pull/657))
-* Add synthetic attribute flag to front end instrumentation
-([#631](https://github.com/open-telemetry/opentelemetry-demo/pull/631))
-* Fix the total sum on the cart page
-([#633](https://github.com/open-telemetry/opentelemetry-demo/pull/633))
-* Add OTel java agent with JMX Metric Insights to kafka
-([#654](https://github.com/open-telemetry/opentelemetry-demo/pull/654))
-* Add resource detectors to payment service
-([#651](https://github.com/open-telemetry/opentelemetry-demo/pull/651))
-* Add resource detectors to frontend service
-([#648](https://github.com/open-telemetry/opentelemetry-demo/pull/648))
-* Add Jaeger-SPM-Config
-([#655](https://github.com/open-telemetry/opentelemetry-demo/pull/655))
-* Add healthcheck to featureflagservice
-([#661](https://github.com/open-telemetry/opentelemetry-demo/pull/661)
-* Add resource detectors to checkout service
-([#662](https://github.com/open-telemetry/opentelemetry-demo/pull/662))
-* Add resource detectors to cart service
-([#663](https://github.com/open-telemetry/opentelemetry-demo/pull/663))
-* Add `OTEL_RESOURCE_ATTRIBUTES` to docker compose setup
-([#664](https://github.com/open-telemetry/opentelemetry-demo/pull/664))
-* Update loadgenerator python base image and dependencies
-([#669](https://github.com/open-telemetry/opentelemetry-demo/pull/669))
-* Add basic metric support to productcatalog service
-([#674](https://github.com/open-telemetry/opentelemetry-demo/pull/674))
-* Add resource detectors to accounting service
-([#676](https://github.com/open-telemetry/opentelemetry-demo/pull/676))
-* Add resource detectors to product catalog service
-([#677](https://github.com/open-telemetry/opentelemetry-demo/pull/677))
-* Add custom metrics to ads service
-([#678](https://github.com/open-telemetry/opentelemetry-demo/pull/678))
-* Rebuild currency service Dockerfile with alpine
-([#687](https://github.com/open-telemetry/opentelemetry-demo/pull/687))
-* Remove grpc from loadgenerator
-([#688](https://github.com/open-telemetry/opentelemetry-demo/pull/688))
-* Update docker-compose services to restart unless stopped
-([#690](https://github.com/open-telemetry/opentelemetry-demo/pull/690))
-* Use different docker base images for frauddetection service
-([#691](https://github.com/open-telemetry/opentelemetry-demo/pull/691))
-* Fix payment service version to support temporality environment variable
-([#693](https://github.com/open-telemetry/opentelemetry-demo/pull/693))
-* Update recommendationservice python base image and dependencies
-([#700](https://github.com/open-telemetry/opentelemetry-demo/pull/700))
-* Add adServiceFailure feature flag triggering Ad Service errors
-([#694](https://github.com/open-telemetry/opentelemetry-demo/pull/694))
-* Reduce spans generated from quote service
-([#702](https://github.com/open-telemetry/opentelemetry-demo/pull/702))
-* Update emailservice Dockerfile to use alpine and multistage build
-([#703](https://github.com/open-telemetry/opentelemetry-demo/pull/703))
-* Update dockerfile for adservice to use different base images
-([#705](https://github.com/open-telemetry/opentelemetry-demo/pull/705))
-* Enable exemplar support in the metrics exporter, Prometheus, and Grafana
-([#704](https://github.com/open-telemetry/opentelemetry-demo/pull/704))
-* Add cross-compilation for shipping service
-([#715](https://github.com/open-telemetry/opentelemetry-demo/issues/715))
+- Use `frontend-web` as service name for browser/web requests
+  ([#628](https://github.com/open-telemetry/opentelemetry-demo/pull/628))
+- Update `quoteservice` to use opentelemetry-php beta release
+  ([#644](https://github.com/open-telemetry/opentelemetry-demo/pull/644))
+- Add build for arm64 arch
+  ([#644](https://github.com/open-telemetry/opentelemetry-demo/pull/657))
+- Add synthetic attribute flag to front end instrumentation
+  ([#631](https://github.com/open-telemetry/opentelemetry-demo/pull/631))
+- Fix the total sum on the cart page
+  ([#633](https://github.com/open-telemetry/opentelemetry-demo/pull/633))
+- Add OTel java agent with JMX Metric Insights to kafka
+  ([#654](https://github.com/open-telemetry/opentelemetry-demo/pull/654))
+- Add resource detectors to payment service
+  ([#651](https://github.com/open-telemetry/opentelemetry-demo/pull/651))
+- Add resource detectors to frontend service
+  ([#648](https://github.com/open-telemetry/opentelemetry-demo/pull/648))
+- Add Jaeger-SPM-Config
+  ([#655](https://github.com/open-telemetry/opentelemetry-demo/pull/655))
+- Add healthcheck to featureflagservice
+  ([#661](https://github.com/open-telemetry/opentelemetry-demo/pull/661)
+- Add resource detectors to checkout service
+  ([#662](https://github.com/open-telemetry/opentelemetry-demo/pull/662))
+- Add resource detectors to cart service
+  ([#663](https://github.com/open-telemetry/opentelemetry-demo/pull/663))
+- Add `OTEL_RESOURCE_ATTRIBUTES` to docker compose setup
+  ([#664](https://github.com/open-telemetry/opentelemetry-demo/pull/664))
+- Update loadgenerator python base image and dependencies
+  ([#669](https://github.com/open-telemetry/opentelemetry-demo/pull/669))
+- Add basic metric support to productcatalog service
+  ([#674](https://github.com/open-telemetry/opentelemetry-demo/pull/674))
+- Add resource detectors to accounting service
+  ([#676](https://github.com/open-telemetry/opentelemetry-demo/pull/676))
+- Add resource detectors to product catalog service
+  ([#677](https://github.com/open-telemetry/opentelemetry-demo/pull/677))
+- Add custom metrics to ads service
+  ([#678](https://github.com/open-telemetry/opentelemetry-demo/pull/678))
+- Rebuild currency service Dockerfile with alpine
+  ([#687](https://github.com/open-telemetry/opentelemetry-demo/pull/687))
+- Remove grpc from loadgenerator
+  ([#688](https://github.com/open-telemetry/opentelemetry-demo/pull/688))
+- Update docker-compose services to restart unless stopped
+  ([#690](https://github.com/open-telemetry/opentelemetry-demo/pull/690))
+- Use different docker base images for frauddetection service
+  ([#691](https://github.com/open-telemetry/opentelemetry-demo/pull/691))
+- Fix payment service version to support temporality environment variable
+  ([#693](https://github.com/open-telemetry/opentelemetry-demo/pull/693))
+- Update recommendationservice python base image and dependencies
+  ([#700](https://github.com/open-telemetry/opentelemetry-demo/pull/700))
+- Add adServiceFailure feature flag triggering Ad Service errors
+  ([#694](https://github.com/open-telemetry/opentelemetry-demo/pull/694))
+- Reduce spans generated from quote service
+  ([#702](https://github.com/open-telemetry/opentelemetry-demo/pull/702))
+- Update emailservice Dockerfile to use alpine and multistage build
+  ([#703](https://github.com/open-telemetry/opentelemetry-demo/pull/703))
+- Update dockerfile for adservice to use different base images
+  ([#705](https://github.com/open-telemetry/opentelemetry-demo/pull/705))
+- Enable exemplar support in the metrics exporter, Prometheus, and Grafana
+  ([#704](https://github.com/open-telemetry/opentelemetry-demo/pull/704))
+- Add cross-compilation for shipping service
+  ([#715](https://github.com/open-telemetry/opentelemetry-demo/issues/715))
 
 ## 1.2.0
 
-* Change ZipCode data type from int to string
-([#587](https://github.com/open-telemetry/opentelemetry-demo/pull/587))
-* Pass product's `categories` as an input for the Ad service
-([#600](https://github.com/open-telemetry/opentelemetry-demo/pull/600))
-* Add HTTP client instrumentation to shippingservice
-([#610](https://github.com/open-telemetry/opentelemetry-demo/pull/610))
-* Added Kafka, accountingservice and frauddetectionservice for async workflows
-([#512](https://github.com/open-telemetry/opentelemetry-demo/pull/457))
-* Added support for non-root containers
-([#615](https://github.com/open-telemetry/opentelemetry-demo/pull/615))
-* Add tracing to Envoy (frontend-proxy)
-([#613](https://github.com/open-telemetry/opentelemetry-demo/pull/613))
-* Build Kafka image
-([#617](https://github.com/open-telemetry/opentelemetry-demo/pull/617))
+- Change ZipCode data type from int to string
+  ([#587](https://github.com/open-telemetry/opentelemetry-demo/pull/587))
+- Pass product's `categories` as an input for the Ad service
+  ([#600](https://github.com/open-telemetry/opentelemetry-demo/pull/600))
+- Add HTTP client instrumentation to shippingservice
+  ([#610](https://github.com/open-telemetry/opentelemetry-demo/pull/610))
+- Added Kafka, accountingservice and frauddetectionservice for async workflows
+  ([#512](https://github.com/open-telemetry/opentelemetry-demo/pull/457))
+- Added support for non-root containers
+  ([#615](https://github.com/open-telemetry/opentelemetry-demo/pull/615))
+- Add tracing to Envoy (frontend-proxy)
+  ([#613](https://github.com/open-telemetry/opentelemetry-demo/pull/613))
+- Build Kafka image
+  ([#617](https://github.com/open-telemetry/opentelemetry-demo/pull/617))
 
 ## v1.1.0
 
-* Replaced PHP-CLI to PHP-Apache for a more realistic service
-([#563](https://github.com/open-telemetry/opentelemetry-demo/pull/563))
-* Optimize currencyservice build time with parallel build jobs
-([#569](https://github.com/open-telemetry/opentelemetry-demo/pull/569))
-* Optimize GitHub Builds and fix broken emulation of featureflag
-([#536](https://github.com/open-telemetry/opentelemetry-demo/pull/536))
-* Add basic metrics support for payment service
-([#583](https://github.com/open-telemetry/opentelemetry-demo/pull/583))
+- Replaced PHP-CLI to PHP-Apache for a more realistic service
+  ([#563](https://github.com/open-telemetry/opentelemetry-demo/pull/563))
+- Optimize currencyservice build time with parallel build jobs
+  ([#569](https://github.com/open-telemetry/opentelemetry-demo/pull/569))
+- Optimize GitHub Builds and fix broken emulation of featureflag
+  ([#536](https://github.com/open-telemetry/opentelemetry-demo/pull/536))
+- Add basic metrics support for payment service
+  ([#583](https://github.com/open-telemetry/opentelemetry-demo/pull/583))
 
 ## v1.0.0
 
-* Add component owners for adservice Java app by @trask in
+- Add component owners for adservice Java app by @trask in
   ([519](https://github.com/open-telemetry/opentelemetry-demo/pull/519))
-* Add gradle wrapper validation by @trask in
+- Add gradle wrapper validation by @trask in
   ([518](https://github.com/open-telemetry/opentelemetry-demo/pull/518))
-* fix currency bug by @cartersocha in
+- fix currency bug by @cartersocha in
   ([522](https://github.com/open-telemetry/opentelemetry-demo/pull/522))
-* Final Docs Review by @austinlparker in
+- Final Docs Review by @austinlparker in
   ([515](https://github.com/open-telemetry/opentelemetry-demo/pull/515))
-* Front End -> Frontend by @austinlparker in
+- Front End -> Frontend by @austinlparker in
   ([537](https://github.com/open-telemetry/opentelemetry-demo/pull/537))
-* [docs] kubernetes by @puckpuck in
+- [docs] kubernetes by @puckpuck in
   ([521](https://github.com/open-telemetry/opentelemetry-demo/pull/521))
-* bump to v1.0 for release by @austinlparker in
+- bump to v1.0 for release by @austinlparker in
   ([538](https://github.com/open-telemetry/opentelemetry-demo/pull/538))
 
 ## v0.7.0-beta
 
-* Update shippingservice to add resource data to spans
-([#504](https://github.com/open-telemetry/opentelemetry-demo/pull/504))
-* Add Envoy as reverse proxy for all user-facing services
-([#508](https://github.com/open-telemetry/opentelemetry-demo/pull/508))
-* Envoy: Grafana, Load Generator, Jaeger exposed.
-([#513](https://github.com/open-telemetry/opentelemetry-demo/pull/513))
-* Added frontend instrumentation exporter custom url
-([#512](https://github.com/open-telemetry/opentelemetry-demo/pull/512))
+- Update shippingservice to add resource data to spans
+  ([#504](https://github.com/open-telemetry/opentelemetry-demo/pull/504))
+- Add Envoy as reverse proxy for all user-facing services
+  ([#508](https://github.com/open-telemetry/opentelemetry-demo/pull/508))
+- Envoy: Grafana, Load Generator, Jaeger exposed.
+  ([#513](https://github.com/open-telemetry/opentelemetry-demo/pull/513))
+- Added frontend instrumentation exporter custom url
+  ([#512](https://github.com/open-telemetry/opentelemetry-demo/pull/512))
 
 ## v0.6.1-beta
 
-* Set resource memory limits for all services
-([#460](https://github.com/open-telemetry/opentelemetry-demo/pull/460))
-* Added cache scenario to recommendation service
-([#455](https://github.com/open-telemetry/opentelemetry-demo/pull/455))
-* Update cartservice Dockerfile to support ARM64
-([#439](https://github.com/open-telemetry/opentelemetry-demo/pull/439))
+- Set resource memory limits for all services
+  ([#460](https://github.com/open-telemetry/opentelemetry-demo/pull/460))
+- Added cache scenario to recommendation service
+  ([#455](https://github.com/open-telemetry/opentelemetry-demo/pull/455))
+- Update cartservice Dockerfile to support ARM64
+  ([#439](https://github.com/open-telemetry/opentelemetry-demo/pull/439))
 
 ## v0.6.0-beta
 
-* Added basic metrics support for recommendation service (Python)
-([#416](https://github.com/open-telemetry/opentelemetry-demo/pull/416))
-* Added metrics auto-instrumentation + minor metrics refactor for recommendation
- service (Python)
- [#432](https://github.com/open-telemetry/opentelemetry-demo/pull/432)
-* Replaced the Jaeger exporter to the OTLP exporter in the OTel Collector
-([#435](https://github.com/open-telemetry/opentelemetry-demo/pull/435))
+- Added basic metrics support for recommendation service (Python)
+  ([#416](https://github.com/open-telemetry/opentelemetry-demo/pull/416))
+- Added metrics auto-instrumentation + minor metrics refactor for recommendation
+  service (Python)
+  [#432](https://github.com/open-telemetry/opentelemetry-demo/pull/432)
+- Replaced the Jaeger exporter to the OTLP exporter in the OTel Collector
+  ([#435](https://github.com/open-telemetry/opentelemetry-demo/pull/435))
 
 ## v0.5.0
 
-* Add custom span and custom span attributes for Feature Flag Service
-([#371](https://github.com/open-telemetry/opentelemetry-demo/pull/371))
-* Change Cart Service to be async
-([#372](https://github.com/open-telemetry/opentelemetry-demo/pull/372))
-* Removed Postgres error on startup
-([#378](https://github.com/open-telemetry/opentelemetry-demo/pull/378))
-* Fixed traffic to Ad and Recommendation Service
-([#379](https://github.com/open-telemetry/opentelemetry-demo/pull/379))
-* Add dotnet runtime metrics to the Cart Service
-([#393](https://github.com/open-telemetry/opentelemetry-demo/pull/393))
-* Add dotnet instrumentation libraries to the Cart Service
-([#394](https://github.com/open-telemetry/opentelemetry-demo/pull/394))
-* Fixed Feature Flag Service error on start up
-([#402](https://github.com/open-telemetry/opentelemetry-demo/pull/402))
-* Update Checkout Service Go version to 1.19 once OTel Go Metrics require 1.18+
-([#409](https://github.com/open-telemetry/opentelemetry-demo/pull/409))
-* Added hero scenario metric to Checkout Service on cache leak
-([#339](https://github.com/open-telemetry/opentelemetry-demo/pull/339))
+- Add custom span and custom span attributes for Feature Flag Service
+  ([#371](https://github.com/open-telemetry/opentelemetry-demo/pull/371))
+- Change Cart Service to be async
+  ([#372](https://github.com/open-telemetry/opentelemetry-demo/pull/372))
+- Removed Postgres error on startup
+  ([#378](https://github.com/open-telemetry/opentelemetry-demo/pull/378))
+- Fixed traffic to Ad and Recommendation Service
+  ([#379](https://github.com/open-telemetry/opentelemetry-demo/pull/379))
+- Add dotnet runtime metrics to the Cart Service
+  ([#393](https://github.com/open-telemetry/opentelemetry-demo/pull/393))
+- Add dotnet instrumentation libraries to the Cart Service
+  ([#394](https://github.com/open-telemetry/opentelemetry-demo/pull/394))
+- Fixed Feature Flag Service error on start up
+  ([#402](https://github.com/open-telemetry/opentelemetry-demo/pull/402))
+- Update Checkout Service Go version to 1.19 once OTel Go Metrics require 1.18+
+  ([#409](https://github.com/open-telemetry/opentelemetry-demo/pull/409))
+- Added hero scenario metric to Checkout Service on cache leak
+  ([#339](https://github.com/open-telemetry/opentelemetry-demo/pull/339))
 
 ## v0.4.0
 
-* Add span events to shipping service
-([#344](https://github.com/open-telemetry/opentelemetry-demo/pull/344))
-* Add PHP quote service
-([#345](https://github.com/open-telemetry/opentelemetry-demo/pull/345))
-* Improve initial run time, without a build
-([#362](https://github.com/open-telemetry/opentelemetry-demo/pull/362))
+- Add span events to shipping service
+  ([#344](https://github.com/open-telemetry/opentelemetry-demo/pull/344))
+- Add PHP quote service
+  ([#345](https://github.com/open-telemetry/opentelemetry-demo/pull/345))
+- Improve initial run time, without a build
+  ([#362](https://github.com/open-telemetry/opentelemetry-demo/pull/362))
 
 ## v0.3.0
 
-* Enhanced cart service attributes
-([#183](https://github.com/open-telemetry/opentelemetry-demo/pull/183))
-* Re-implemented currency service using C++
-([#189](https://github.com/open-telemetry/opentelemetry-demo/pull/189))
-* Simplified repo name and dropped the '-webstore' suffix in every place
-([#225](https://github.com/open-telemetry/opentelemetry-demo/pull/225))
-* Added end-to-end tests to each individual service
-([#242](https://github.com/open-telemetry/opentelemetry-demo/pull/242))
-* Added ability for repo forks to specify additional collector settings
-([#246](https://github.com/open-telemetry/opentelemetry-demo/pull/246))
-* Add metrics endpoint in adservice to send metrics from java agent
-([#237](https://github.com/open-telemetry/opentelemetry-demo/pull/237))
-* Support override java agent jar
-([#244](https://github.com/open-telemetry/opentelemetry-demo/pull/244))
-* Pulling java agent from the Java instrumentation releases instead.
-([#253](https://github.com/open-telemetry/opentelemetry-demo/pull/253))
-* Added explicit support for Kubernetes.
-([#255](https://github.com/open-telemetry/opentelemetry-demo/pull/255))
-* Added spanmetrics processor to otelcol
-([#212](https://github.com/open-telemetry/opentelemetry-demo/pull/212))
-* Added span attributes to shipping service
-([#260](https://github.com/open-telemetry/opentelemetry-demo/pull/260))
-* Added span attributes to currency service
-([#265](https://github.com/open-telemetry/opentelemetry-demo/pull/265))
-* Restricted network and port bindings
-([#272](https://github.com/open-telemetry/opentelemetry-demo/pull/272))
-* Feature Flag Service UI exposed on port 8081
-([#273](https://github.com/open-telemetry/opentelemetry-demo/pull/273))
-* Reimplemented Frontend app using [Next.js](https://nextjs.org/) Browser client
-([#236](https://github.com/open-telemetry/opentelemetry-demo/pull/236))
-* Remove set_currency from load generator
-([#290](https://github.com/open-telemetry/opentelemetry-demo/pull/290))
-* Added Frontend [Cypress](https://www.cypress.io/) E2E tests
-([#298](https://github.com/open-telemetry/opentelemetry-demo/pull/298))
-* Added baggage support in CurrencyService
-([#281](https://github.com/open-telemetry/opentelemetry-demo/pull/281))
-* Added error for a specific product based on a feature flag
-([#245](https://github.com/open-telemetry/opentelemetry-demo/pull/245))
-* Added Frontend Instrumentation
-([#293](https://github.com/open-telemetry/opentelemetry-demo/pull/293))
-* Add Feature Flags definitions
-([#314](https://github.com/open-telemetry/opentelemetry-demo/pull/314))
-* Enable Locust loadgen environment variable config options
-([#316](https://github.com/open-telemetry/opentelemetry-demo/pull/316))
-* Simplified and cleaned up ProductCatalogService
-([#317](https://github.com/open-telemetry/opentelemetry-demo/pull/317))
-* Updated Product Catalog to Match Astronomy Webstore
-([#285](https://github.com/open-telemetry/opentelemetry-demo/pull/285))
-* Add Span link for synthetic requests (from load generator)
-([#332](https://github.com/open-telemetry/opentelemetry-demo/pull/332))
-* Add `synthetic_request=true` baggage to load generator requests
-([#331](https://github.com/open-telemetry/opentelemetry-demo/pull/331))
+- Enhanced cart service attributes
+  ([#183](https://github.com/open-telemetry/opentelemetry-demo/pull/183))
+- Re-implemented currency service using C++
+  ([#189](https://github.com/open-telemetry/opentelemetry-demo/pull/189))
+- Simplified repo name and dropped the '-webstore' suffix in every place
+  ([#225](https://github.com/open-telemetry/opentelemetry-demo/pull/225))
+- Added end-to-end tests to each individual service
+  ([#242](https://github.com/open-telemetry/opentelemetry-demo/pull/242))
+- Added ability for repo forks to specify additional collector settings
+  ([#246](https://github.com/open-telemetry/opentelemetry-demo/pull/246))
+- Add metrics endpoint in adservice to send metrics from java agent
+  ([#237](https://github.com/open-telemetry/opentelemetry-demo/pull/237))
+- Support override java agent jar
+  ([#244](https://github.com/open-telemetry/opentelemetry-demo/pull/244))
+- Pulling java agent from the Java instrumentation releases instead.
+  ([#253](https://github.com/open-telemetry/opentelemetry-demo/pull/253))
+- Added explicit support for Kubernetes.
+  ([#255](https://github.com/open-telemetry/opentelemetry-demo/pull/255))
+- Added spanmetrics processor to otelcol
+  ([#212](https://github.com/open-telemetry/opentelemetry-demo/pull/212))
+- Added span attributes to shipping service
+  ([#260](https://github.com/open-telemetry/opentelemetry-demo/pull/260))
+- Added span attributes to currency service
+  ([#265](https://github.com/open-telemetry/opentelemetry-demo/pull/265))
+- Restricted network and port bindings
+  ([#272](https://github.com/open-telemetry/opentelemetry-demo/pull/272))
+- Feature Flag Service UI exposed on port 8081
+  ([#273](https://github.com/open-telemetry/opentelemetry-demo/pull/273))
+- Reimplemented Frontend app using [Next.js](https://nextjs.org/) Browser client
+  ([#236](https://github.com/open-telemetry/opentelemetry-demo/pull/236))
+- Remove set_currency from load generator
+  ([#290](https://github.com/open-telemetry/opentelemetry-demo/pull/290))
+- Added Frontend [Cypress](https://www.cypress.io/) E2E tests
+  ([#298](https://github.com/open-telemetry/opentelemetry-demo/pull/298))
+- Added baggage support in CurrencyService
+  ([#281](https://github.com/open-telemetry/opentelemetry-demo/pull/281))
+- Added error for a specific product based on a feature flag
+  ([#245](https://github.com/open-telemetry/opentelemetry-demo/pull/245))
+- Added Frontend Instrumentation
+  ([#293](https://github.com/open-telemetry/opentelemetry-demo/pull/293))
+- Add Feature Flags definitions
+  ([#314](https://github.com/open-telemetry/opentelemetry-demo/pull/314))
+- Enable Locust loadgen environment variable config options
+  ([#316](https://github.com/open-telemetry/opentelemetry-demo/pull/316))
+- Simplified and cleaned up ProductCatalogService
+  ([#317](https://github.com/open-telemetry/opentelemetry-demo/pull/317))
+- Updated Product Catalog to Match Astronomy Webstore
+  ([#285](https://github.com/open-telemetry/opentelemetry-demo/pull/285))
+- Add Span link for synthetic requests (from load generator)
+  ([#332](https://github.com/open-telemetry/opentelemetry-demo/pull/332))
+- Add `synthetic_request=true` baggage to load generator requests
+  ([#331](https://github.com/open-telemetry/opentelemetry-demo/pull/331))
 
 ## v0.2.0
 
-* Added feature flag service implementation
-([#141](https://github.com/open-telemetry/opentelemetry-demo/pull/141))
-* Added additional attributes to productcatalog service
-([#143](https://github.com/open-telemetry/opentelemetry-demo/pull/143))
-* Added manual instrumentation to ad service
-([#150](https://github.com/open-telemetry/opentelemetry-demo/pull/150))
-* Added manual instrumentation to email service
-([#158](https://github.com/open-telemetry/opentelemetry-demo/pull/158))
-* Added basic metric support and Prometheus storage
-([#160](https://github.com/open-telemetry/opentelemetry-demo/pull/160))
-* Added manual instrumentation to recommendation service
-([#163](https://github.com/open-telemetry/opentelemetry-demo/pull/163))
-* Added manual instrumentation to checkout service
-([#164](https://github.com/open-telemetry/opentelemetry-demo/pull/164))
-* Added Grafana service and enhanced metric experience
-([#175](https://github.com/open-telemetry/opentelemetry-demo/pull/175))
+- Added feature flag service implementation
+  ([#141](https://github.com/open-telemetry/opentelemetry-demo/pull/141))
+- Added additional attributes to productcatalog service
+  ([#143](https://github.com/open-telemetry/opentelemetry-demo/pull/143))
+- Added manual instrumentation to ad service
+  ([#150](https://github.com/open-telemetry/opentelemetry-demo/pull/150))
+- Added manual instrumentation to email service
+  ([#158](https://github.com/open-telemetry/opentelemetry-demo/pull/158))
+- Added basic metric support and Prometheus storage
+  ([#160](https://github.com/open-telemetry/opentelemetry-demo/pull/160))
+- Added manual instrumentation to recommendation service
+  ([#163](https://github.com/open-telemetry/opentelemetry-demo/pull/163))
+- Added manual instrumentation to checkout service
+  ([#164](https://github.com/open-telemetry/opentelemetry-demo/pull/164))
+- Added Grafana service and enhanced metric experience
+  ([#175](https://github.com/open-telemetry/opentelemetry-demo/pull/175))
 
 ## v0.1.0
 
-* The initial code base is donated from a
-[fork](https://github.com/julianocosta89/opentelemetry-microservices-demo) of
-the [Google microservices
-demo](https://github.com/GoogleCloudPlatform/microservices-demo) with express
-knowledge of the owners. The pre-existing copyrights will remain. Any future
-significant modifications will be credited to OpenTelemetry Authors.
-* Added feature flag service protos
-([#26](https://github.com/open-telemetry/opentelemetry-demo/pull/26))
-* Added span attributes to frontend service
-([#82](https://github.com/open-telemetry/opentelemetry-demo/pull/82))
-* Rewrote shipping service in Rust
-([#35](https://github.com/open-telemetry/opentelemetry-demo/issues/35))
+- The initial code base is donated from a
+  [fork](https://github.com/julianocosta89/opentelemetry-microservices-demo) of
+  the [Google microservices
+  demo](https://github.com/GoogleCloudPlatform/microservices-demo) with express
+  knowledge of the owners. The pre-existing copyrights will remain. Any future
+  significant modifications will be credited to OpenTelemetry Authors.
+- Added feature flag service protos
+  ([#26](https://github.com/open-telemetry/opentelemetry-demo/pull/26))
+- Added span attributes to frontend service
+  ([#82](https://github.com/open-telemetry/opentelemetry-demo/pull/82))
+- Rewrote shipping service in Rust
+  ([#35](https://github.com/open-telemetry/opentelemetry-demo/issues/35))
diff --git a/docker-compose.yml b/docker-compose.yml
index ab38c239ae..6c718dc7ff 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -182,7 +182,7 @@ services:
       - CURRENCY_SERVICE_PORT
       - VERSION=${IMAGE_VERSION}
       - OTEL_EXPORTER_OTLP_ENDPOINT
-      - OTEL_RESOURCE_ATTRIBUTES=${OTEL_RESOURCE_ATTRIBUTES},service.name=currencyservice   # The C++ SDK does not support OTEL_SERVICE_NAME
+      - OTEL_RESOURCE_ATTRIBUTES=${OTEL_RESOURCE_ATTRIBUTES},service.name=currencyservice # The C++ SDK does not support OTEL_SERVICE_NAME
     depends_on:
       otelcol:
         condition: service_started
@@ -340,6 +340,8 @@ services:
       - ENVOY_PORT
       - FLAGD_HOST
       - FLAGD_PORT
+      - FLAGD_UI_HOST
+      - FLAGD_UI_PORT
     depends_on:
       frontend:
         condition: service_started
@@ -349,6 +351,8 @@ services:
         condition: service_started
       grafana:
         condition: service_started
+      flagd-ui:
+        condition: service_started
 
   # Imageprovider
   imageprovider:
@@ -517,7 +521,7 @@ services:
     deploy:
       resources:
         limits:
-          memory: 500M               # This is high to enable supporting the recommendationCache feature flag use case
+          memory: 500M # This is high to enable supporting the recommendationCache feature flag use case
     restart: unless-stopped
     ports:
       - "${RECOMMENDATION_SERVICE_PORT}"
@@ -585,17 +589,39 @@ services:
       - FLAGD_METRICS_EXPORTER=otel
       - OTEL_RESOURCE_ATTRIBUTES
       - OTEL_SERVICE_NAME=flagd
-    command: [
-      "start",
-      "--uri",
-      "file:./etc/flagd/demo.flagd.json"
-    ]
+    command: ["start", "--uri", "file:./etc/flagd/demo.flagd.json"]
     ports:
       - 8013
     volumes:
       - ./src/flagd:/etc/flagd
-    logging:
-      *logging
+    logging: *logging
+
+  #Flagd-ui, UI for configuring the feature flagging service
+  flagd-ui:
+    image: ${IMAGE_NAME}:${DEMO_VERSION}-flagd-ui
+    container_name: flagd-ui
+    build:
+      context: ./
+      dockerfile: ${FLAGD_UI_DOCKERFILE}
+    deploy:
+      resources:
+        limits:
+          memory: 150M
+    restart: unless-stopped
+    environment:
+      - OTEL_EXPORTER_OTLP_ENDPOINT=http://${OTEL_COLLECTOR_HOST}:${OTEL_COLLECTOR_PORT_HTTP}
+      - OTEL_EXPORTER_OTLP_METRICS_TEMPORALITY_PREFERENCE
+      - OTEL_RESOURCE_ATTRIBUTES
+      - OTEL_SERVICE_NAME=flagd-ui
+    ports:
+      - "${FLAGD_UI_PORT}"
+    depends_on:
+      otelcol:
+        condition: service_started
+      flagd:
+        condition: service_started
+    volumes:
+      - ./src/flagd:/app/data
 
   # Kafka used by Checkout, Accounting, and Fraud Detection services
   kafka:
@@ -640,7 +666,6 @@ services:
       - "${VALKEY_PORT}"
     logging: *logging
 
-
   # ********************
   # Telemetry Components
   # ********************
@@ -660,7 +685,7 @@ services:
           memory: 400M
     restart: unless-stopped
     ports:
-      - "${JAEGER_SERVICE_PORT}"         # Jaeger UI
+      - "${JAEGER_SERVICE_PORT}" # Jaeger UI
       - "${OTEL_COLLECTOR_PORT_GRPC}"
     environment:
       - METRICS_STORAGE_TYPE=prometheus
@@ -693,7 +718,11 @@ services:
         limits:
           memory: 200M
     restart: unless-stopped
-    command: [ "--config=/etc/otelcol-config.yml", "--config=/etc/otelcol-config-extras.yml" ]
+    command:
+      [
+        "--config=/etc/otelcol-config.yml",
+        "--config=/etc/otelcol-config-extras.yml",
+      ]
     user: 0:0
     volumes:
       - ${HOST_FILESYSTEM}:/hostfs:ro
diff --git a/src/flagd-ui/.dockerignore b/src/flagd-ui/.dockerignore
new file mode 100644
index 0000000000..36c93f02e1
--- /dev/null
+++ b/src/flagd-ui/.dockerignore
@@ -0,0 +1,56 @@
+# Dependency directories
+node_modules
+/.pnp
+.pnp.js
+
+# Next.js build output
+.next
+out
+
+# Testing
+/coverage
+
+# Production
+/build
+
+# Misc
+.DS_Store
+*.pem
+
+# Debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Local env files
+.env*.local
+
+# Vercel
+.vercel
+
+# TypeScript
+*.tsbuildinfo
+next-env.d.ts
+
+# IDE/Editor folders
+.idea
+.vscode
+
+# OS generated files
+Thumbs.db
+
+# Temporary files
+*.swp
+*.swo
+
+# Git related
+.git
+.gitignore
+
+# Docker related
+Dockerfile
+.dockerignore
+
+# Other
+README.md
+*.log
\ No newline at end of file
diff --git a/src/flagd-ui/.prettierrc b/src/flagd-ui/.prettierrc
new file mode 100644
index 0000000000..b4bfed3579
--- /dev/null
+++ b/src/flagd-ui/.prettierrc
@@ -0,0 +1,3 @@
+{
+  "plugins": ["prettier-plugin-tailwindcss"]
+}
diff --git a/src/flagd-ui/Dockerfile b/src/flagd-ui/Dockerfile
index e326aa2d62..4e504015a1 100644
--- a/src/flagd-ui/Dockerfile
+++ b/src/flagd-ui/Dockerfile
@@ -1,6 +1,34 @@
-FROM node:20.15.1-slim
-WORKDIR /data
-COPY . .
-RUN npm install
-CMD [ "/bin/bash -c 'npm run dev'" ]
+# Copyright The OpenTelemetry Authors
+# SPDX-License-Identifier: Apache-2.0
 
+FROM node:20 AS builder
+
+WORKDIR /app
+
+COPY ./src/flagd-ui/package*.json ./
+
+RUN npm ci
+
+COPY ./src/flagd-ui/. ./
+
+RUN npm run build
+
+# -----------------------------------------------------------------------------
+
+FROM node:20-alpine
+
+WORKDIR /app
+
+COPY ./src/flagd-ui/package*.json ./
+
+RUN npm ci --only=production
+
+COPY --from=builder /app/src/instrumentation.ts ./instrumentation.ts
+COPY --from=builder /app/next.config.mjs ./next.config.mjs
+
+COPY --from=builder /app/.next ./.next
+COPY --from=builder /app/public ./public
+
+EXPOSE 4000
+
+CMD ["npm", "start"]
\ No newline at end of file
diff --git a/src/flagd-ui/data/output.json b/src/flagd-ui/data/output.json
deleted file mode 100644
index e15129f3fe..0000000000
--- a/src/flagd-ui/data/output.json
+++ /dev/null
@@ -1,105 +0,0 @@
-{
-  "$schema": "https://flagd.dev/schema/v0/flags.json",
-  "flags": {
-    "productCatalogFailure": {
-      "description": "Fail product catalog service on a specific product",
-      "state": "ENABLED",
-      "variants": {
-        "on": true,
-        "off": false
-      },
-      "defaultVariant": "off"
-    },
-    "recommendationServiceCacheFailure": {
-      "description": "Fail recommendation service cache",
-      "state": "DISABLED",
-      "variants": {
-        "on": true,
-        "off": false
-      },
-      "defaultVariant": "on"
-    },
-    "adServiceManualGc": {
-      "description": "Triggers full manual garbage collections in the ad service",
-      "state": "DISABLED",
-      "variants": {
-        "on": true,
-        "off": false
-      },
-      "defaultVariant": "on"
-    },
-    "adServiceHighCpu": {
-      "description": "Triggers high cpu load in the ad service",
-      "state": "ENABLED",
-      "variants": {
-        "on": true,
-        "off": false
-      },
-      "defaultVariant": "off"
-    },
-    "adServiceFailure": {
-      "description": "Fail ad service",
-      "state": "ENABLED",
-      "variants": {
-        "on": true,
-        "off": false
-      },
-      "defaultVariant": "off"
-    },
-    "kafkaQueueProblems": {
-      "description": "Overloads Kafka queue while simultaneously introducing a consumer side delay leading to a lag spike",
-      "state": "ENABLED",
-      "variants": {
-        "on": 100,
-        "off": 0
-      },
-      "defaultVariant": "off"
-    },
-    "cartServiceFailure": {
-      "description": "Fail cart service",
-      "state": "ENABLED",
-      "variants": {
-        "on": true,
-        "off": false
-      },
-      "defaultVariant": "off"
-    },
-    "paymentServiceFailure": {
-      "description": "Fail payment service charge requests",
-      "state": "ENABLED",
-      "variants": {
-        "on": true,
-        "off": false
-      },
-      "defaultVariant": "off"
-    },
-    "paymentServiceUnreachable": {
-      "description": "Payment service is unavailable",
-      "state": "ENABLED",
-      "variants": {
-        "on": true,
-        "off": false
-      },
-      "defaultVariant": "off"
-    },
-    "loadgeneratorFloodHomepage": {
-      "description": "Flood the frontend with a large amount of requests.",
-      "state": "ENABLED",
-      "variants": {
-        "on": 100,
-        "off": 0
-      },
-      "defaultVariant": "off"
-    },
-    "imageSlowLoad": {
-      "description": "slow loading images in the frontend",
-      "state": "ENABLED",
-      "variants": {
-        "10sec": 10000,
-        "5sec": 5000,
-        "off": 0
-      },
-      "defaultVariant": "off"
-    }
-  }
-}
\ No newline at end of file
diff --git a/src/flagd-ui/next.config.mjs b/src/flagd-ui/next.config.mjs
index 4678774e6d..85f1012825 100644
--- a/src/flagd-ui/next.config.mjs
+++ b/src/flagd-ui/next.config.mjs
@@ -1,4 +1,9 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  experimental: {
+    instrumentationHook: true,
+  },
+  basePath: "/feature",
+};
 
 export default nextConfig;
diff --git a/src/flagd-ui/package-lock.json b/src/flagd-ui/package-lock.json
index 157e5576ea..0fc2d9756f 100644
--- a/src/flagd-ui/package-lock.json
+++ b/src/flagd-ui/package-lock.json
@@ -8,19 +8,35 @@
       "name": "flagd-ui",
       "version": "0.1.0",
       "dependencies": {
+        "@opentelemetry/api": "^1.9.0",
+        "@opentelemetry/api-logs": "^0.53.0",
+        "@opentelemetry/exporter-jaeger": "^1.26.0",
+        "@opentelemetry/exporter-trace-otlp-http": "^0.53.0",
+        "@opentelemetry/instrumentation": "^0.53.0",
+        "@opentelemetry/instrumentation-fetch": "^0.53.0",
+        "@opentelemetry/resources": "^1.26.0",
+        "@opentelemetry/sdk-logs": "^0.53.0",
+        "@opentelemetry/sdk-node": "^0.53.0",
+        "@opentelemetry/sdk-trace-node": "^1.26.0",
+        "@opentelemetry/semantic-conventions": "^1.27.0",
+        "@vercel/otel": "^1.10.0",
         "ajv": "^8.17.1",
         "next": "14.2.5",
         "react": "^18",
         "react-dom": "^18"
       },
       "devDependencies": {
+        "@types/json5": "^2.2.0",
         "@types/node": "^20",
-        "@types/react": "^18",
-        "@types/react-dom": "^18",
+        "@types/react": "^18.3.4",
+        "@types/react-dom": "^18.3.0",
+        "autoprefixer": "^10.4.20",
         "eslint": "^8",
         "eslint-config-next": "14.2.5",
-        "postcss": "^8",
-        "tailwindcss": "^3.4.1",
+        "postcss": "^8.4.41",
+        "prettier": "^3.3.3",
+        "prettier-plugin-tailwindcss": "^0.6.6",
+        "tailwindcss": "^3.4.10",
         "typescript": "^5"
       }
     },
@@ -114,6 +130,37 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@grpc/grpc-js": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.11.1.tgz",
+      "integrity": "sha512-gyt/WayZrVPH2w/UTLansS7F9Nwld472JxxaETamrM8HNlsa+jSLNyKAZmhxI2Me4c3mQHFiS1wWHDY1g1Kthw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@grpc/proto-loader": "^0.7.13",
+        "@js-sdsl/ordered-map": "^4.4.2"
+      },
+      "engines": {
+        "node": ">=12.10.0"
+      }
+    },
+    "node_modules/@grpc/proto-loader": {
+      "version": "0.7.13",
+      "resolved": "https://registry.npmjs.org/@grpc/proto-loader/-/proto-loader-0.7.13.tgz",
+      "integrity": "sha512-AiXO/bfe9bmxBjxxtYxFAXGZvMaN5s8kO+jBHAJCON8rJoB5YS/D6X7ZNc6XQkuHNmyl4CYaMI1fJ/Gn27RGGw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "lodash.camelcase": "^4.3.0",
+        "long": "^5.0.0",
+        "protobufjs": "^7.2.5",
+        "yargs": "^17.7.2"
+      },
+      "bin": {
+        "proto-loader-gen-types": "build/bin/proto-loader-gen-types.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -241,6 +288,16 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@js-sdsl/ordered-map": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/@js-sdsl/ordered-map/-/ordered-map-4.4.2.tgz",
+      "integrity": "sha512-iUKgm52T8HOE/makSxjqoWhe95ZJA1/G1sYsGev2JDKUSS14KAgg1LHb+Ba+IPow0xflbnSkOsZcO08C7w1gYw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/js-sdsl"
+      }
+    },
     "node_modules/@next/env": {
       "version": "14.2.5",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.5.tgz",
@@ -425,6 +482,472 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@opentelemetry/api": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.9.0.tgz",
+      "integrity": "sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/@opentelemetry/api-logs": {
+      "version": "0.53.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/api-logs/-/api-logs-0.53.0.tgz",
+      "integrity": "sha512-8HArjKx+RaAI8uEIgcORbZIPklyh1YLjPSBus8hjRmvLi6DeFzgOcdZ7KwPabKj8mXF8dX0hyfAyGfycz0DbFw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/api": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@opentelemetry/context-async-hooks": {
+      "version": "1.26.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/context-async-hooks/-/context-async-hooks-1.26.0.tgz",
+      "integrity": "sha512-HedpXXYzzbaoutw6DFLWLDket2FwLkLpil4hGCZ1xYEIMTcivdfwEOISgdbLEWyG3HW52gTq2V9mOVJrONgiwg==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.0.0 <1.10.0"
+      }
+    },
+    "node_modules/@opentelemetry/core": {
+      "version": "1.26.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/core/-/core-1.26.0.tgz",
+      "integrity": "sha512-1iKxXXE8415Cdv0yjG3G6hQnB5eVEsJce3QaawX8SjDn0mAS0ZM8fAbZZJD4ajvhC15cePvosSCut404KrIIvQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/semantic-conventions": "1.27.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.0.0 <1.10.0"
+      }
+    },
+    "node_modules/@opentelemetry/exporter-jaeger": {
+      "version": "1.26.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/exporter-jaeger/-/exporter-jaeger-1.26.0.tgz",
+      "integrity": "sha512-l5NMFwFr5NWWRNcURUS8/RdkBmR3+dPGE33f51XfamKXsEfZUkRC8V1L2D7hzKhXxcFmYLcprg4/sYpeKtYoAQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/core": "1.26.0",
+        "@opentelemetry/sdk-trace-base": "1.26.0",
+        "@opentelemetry/semantic-conventions": "1.27.0",
+        "jaeger-client": "^3.15.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.0.0"
+      }
+    },
+    "node_modules/@opentelemetry/exporter-logs-otlp-grpc": {
+      "version": "0.53.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/exporter-logs-otlp-grpc/-/exporter-logs-otlp-grpc-0.53.0.tgz",
+      "integrity": "sha512-x5ygAQgWAQOI+UOhyV3z9eW7QU2dCfnfOuIBiyYmC2AWr74f6x/3JBnP27IAcEx6aihpqBYWKnpoUTztkVPAZw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@grpc/grpc-js": "^1.7.1",
+        "@opentelemetry/core": "1.26.0",
+        "@opentelemetry/otlp-grpc-exporter-base": "0.53.0",
+        "@opentelemetry/otlp-transformer": "0.53.0",
+        "@opentelemetry/sdk-logs": "0.53.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.0.0"
+      }
+    },
+    "node_modules/@opentelemetry/exporter-logs-otlp-http": {
+      "version": "0.53.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/exporter-logs-otlp-http/-/exporter-logs-otlp-http-0.53.0.tgz",
+      "integrity": "sha512-cSRKgD/n8rb+Yd+Cif6EnHEL/VZg1o8lEcEwFji1lwene6BdH51Zh3feAD9p2TyVoBKrl6Q9Zm2WltSp2k9gWQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/api-logs": "0.53.0",
+        "@opentelemetry/core": "1.26.0",
+        "@opentelemetry/otlp-exporter-base": "0.53.0",
+        "@opentelemetry/otlp-transformer": "0.53.0",
+        "@opentelemetry/sdk-logs": "0.53.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.0.0"
+      }
+    },
+    "node_modules/@opentelemetry/exporter-logs-otlp-proto": {
+      "version": "0.53.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/exporter-logs-otlp-proto/-/exporter-logs-otlp-proto-0.53.0.tgz",
+      "integrity": "sha512-jhEcVL1deeWNmTUP05UZMriZPSWUBcfg94ng7JuBb1q2NExgnADQFl1VQQ+xo62/JepK+MxQe4xAwlsDQFbISA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/api-logs": "0.53.0",
+        "@opentelemetry/core": "1.26.0",
+        "@opentelemetry/otlp-exporter-base": "0.53.0",
+        "@opentelemetry/otlp-transformer": "0.53.0",
+        "@opentelemetry/resources": "1.26.0",
+        "@opentelemetry/sdk-logs": "0.53.0",
+        "@opentelemetry/sdk-trace-base": "1.26.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.0.0"
+      }
+    },
+    "node_modules/@opentelemetry/exporter-trace-otlp-grpc": {
+      "version": "0.53.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/exporter-trace-otlp-grpc/-/exporter-trace-otlp-grpc-0.53.0.tgz",
+      "integrity": "sha512-m6KSh6OBDwfDjpzPVbuJbMgMbkoZfpxYH2r262KckgX9cMYvooWXEKzlJYsNDC6ADr28A1rtRoUVRwNfIN4tUg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@grpc/grpc-js": "^1.7.1",
+        "@opentelemetry/core": "1.26.0",
+        "@opentelemetry/otlp-grpc-exporter-base": "0.53.0",
+        "@opentelemetry/otlp-transformer": "0.53.0",
+        "@opentelemetry/resources": "1.26.0",
+        "@opentelemetry/sdk-trace-base": "1.26.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.0.0"
+      }
+    },
+    "node_modules/@opentelemetry/exporter-trace-otlp-http": {
+      "version": "0.53.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/exporter-trace-otlp-http/-/exporter-trace-otlp-http-0.53.0.tgz",
+      "integrity": "sha512-m7F5ZTq+V9mKGWYpX8EnZ7NjoqAU7VemQ1E2HAG+W/u0wpY1x0OmbxAXfGKFHCspdJk8UKlwPGrpcB8nay3P8A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/core": "1.26.0",
+        "@opentelemetry/otlp-exporter-base": "0.53.0",
+        "@opentelemetry/otlp-transformer": "0.53.0",
+        "@opentelemetry/resources": "1.26.0",
+        "@opentelemetry/sdk-trace-base": "1.26.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.0.0"
+      }
+    },
+    "node_modules/@opentelemetry/exporter-trace-otlp-proto": {
+      "version": "0.53.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/exporter-trace-otlp-proto/-/exporter-trace-otlp-proto-0.53.0.tgz",
+      "integrity": "sha512-T/bdXslwRKj23S96qbvGtaYOdfyew3TjPEKOk5mHjkCmkVl1O9C/YMdejwSsdLdOq2YW30KjR9kVi0YMxZushQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/core": "1.26.0",
+        "@opentelemetry/otlp-exporter-base": "0.53.0",
+        "@opentelemetry/otlp-transformer": "0.53.0",
+        "@opentelemetry/resources": "1.26.0",
+        "@opentelemetry/sdk-trace-base": "1.26.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.0.0"
+      }
+    },
+    "node_modules/@opentelemetry/exporter-zipkin": {
+      "version": "1.26.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/exporter-zipkin/-/exporter-zipkin-1.26.0.tgz",
+      "integrity": "sha512-PW5R34n3SJHO4t0UetyHKiXL6LixIqWN6lWncg3eRXhKuT30x+b7m5sDJS0kEWRfHeS+kG7uCw2vBzmB2lk3Dw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/core": "1.26.0",
+        "@opentelemetry/resources": "1.26.0",
+        "@opentelemetry/sdk-trace-base": "1.26.0",
+        "@opentelemetry/semantic-conventions": "1.27.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.0.0"
+      }
+    },
+    "node_modules/@opentelemetry/instrumentation": {
+      "version": "0.53.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation/-/instrumentation-0.53.0.tgz",
+      "integrity": "sha512-DMwg0hy4wzf7K73JJtl95m/e0boSoWhH07rfvHvYzQtBD3Bmv0Wc1x733vyZBqmFm8OjJD0/pfiUg1W3JjFX0A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/api-logs": "0.53.0",
+        "@types/shimmer": "^1.2.0",
+        "import-in-the-middle": "^1.8.1",
+        "require-in-the-middle": "^7.1.1",
+        "semver": "^7.5.2",
+        "shimmer": "^1.2.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.3.0"
+      }
+    },
+    "node_modules/@opentelemetry/instrumentation-fetch": {
+      "version": "0.53.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-fetch/-/instrumentation-fetch-0.53.0.tgz",
+      "integrity": "sha512-Sayp/Oypr0lyTgOKide/Dz4ovqDWPdmazapCMyfsVpXpV9zrH2kbdO2vAKUMx9vF98vxsqcxXucf4z54WXWZ8A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/core": "1.26.0",
+        "@opentelemetry/instrumentation": "0.53.0",
+        "@opentelemetry/sdk-trace-web": "1.26.0",
+        "@opentelemetry/semantic-conventions": "1.27.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.0.0"
+      }
+    },
+    "node_modules/@opentelemetry/otlp-exporter-base": {
+      "version": "0.53.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/otlp-exporter-base/-/otlp-exporter-base-0.53.0.tgz",
+      "integrity": "sha512-UCWPreGQEhD6FjBaeDuXhiMf6kkBODF0ZQzrk/tuQcaVDJ+dDQ/xhJp192H9yWnKxVpEjFrSSLnpqmX4VwX+eA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/core": "1.26.0",
+        "@opentelemetry/otlp-transformer": "0.53.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.0.0"
+      }
+    },
+    "node_modules/@opentelemetry/otlp-grpc-exporter-base": {
+      "version": "0.53.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/otlp-grpc-exporter-base/-/otlp-grpc-exporter-base-0.53.0.tgz",
+      "integrity": "sha512-F7RCN8VN+lzSa4fGjewit8Z5fEUpY/lmMVy5EWn2ZpbAabg3EE3sCLuTNfOiooNGnmvzimUPruoeqeko/5/TzQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@grpc/grpc-js": "^1.7.1",
+        "@opentelemetry/core": "1.26.0",
+        "@opentelemetry/otlp-exporter-base": "0.53.0",
+        "@opentelemetry/otlp-transformer": "0.53.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.0.0"
+      }
+    },
+    "node_modules/@opentelemetry/otlp-transformer": {
+      "version": "0.53.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/otlp-transformer/-/otlp-transformer-0.53.0.tgz",
+      "integrity": "sha512-rM0sDA9HD8dluwuBxLetUmoqGJKSAbWenwD65KY9iZhUxdBHRLrIdrABfNDP7aiTjcgK8XFyTn5fhDz7N+W6DA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/api-logs": "0.53.0",
+        "@opentelemetry/core": "1.26.0",
+        "@opentelemetry/resources": "1.26.0",
+        "@opentelemetry/sdk-logs": "0.53.0",
+        "@opentelemetry/sdk-metrics": "1.26.0",
+        "@opentelemetry/sdk-trace-base": "1.26.0",
+        "protobufjs": "^7.3.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.3.0"
+      }
+    },
+    "node_modules/@opentelemetry/propagator-b3": {
+      "version": "1.26.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/propagator-b3/-/propagator-b3-1.26.0.tgz",
+      "integrity": "sha512-vvVkQLQ/lGGyEy9GT8uFnI047pajSOVnZI2poJqVGD3nJ+B9sFGdlHNnQKophE3lHfnIH0pw2ubrCTjZCgIj+Q==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/core": "1.26.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.0.0 <1.10.0"
+      }
+    },
+    "node_modules/@opentelemetry/propagator-jaeger": {
+      "version": "1.26.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/propagator-jaeger/-/propagator-jaeger-1.26.0.tgz",
+      "integrity": "sha512-DelFGkCdaxA1C/QA0Xilszfr0t4YbGd3DjxiCDPh34lfnFr+VkkrjV9S8ZTJvAzfdKERXhfOxIKBoGPJwoSz7Q==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/core": "1.26.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.0.0 <1.10.0"
+      }
+    },
+    "node_modules/@opentelemetry/resources": {
+      "version": "1.26.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/resources/-/resources-1.26.0.tgz",
+      "integrity": "sha512-CPNYchBE7MBecCSVy0HKpUISEeJOniWqcHaAHpmasZ3j9o6V3AyBzhRc90jdmemq0HOxDr6ylhUbDhBqqPpeNw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/core": "1.26.0",
+        "@opentelemetry/semantic-conventions": "1.27.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.0.0 <1.10.0"
+      }
+    },
+    "node_modules/@opentelemetry/sdk-logs": {
+      "version": "0.53.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/sdk-logs/-/sdk-logs-0.53.0.tgz",
+      "integrity": "sha512-dhSisnEgIj/vJZXZV6f6KcTnyLDx/VuQ6l3ejuZpMpPlh9S1qMHiZU9NMmOkVkwwHkMy3G6mEBwdP23vUZVr4g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/api-logs": "0.53.0",
+        "@opentelemetry/core": "1.26.0",
+        "@opentelemetry/resources": "1.26.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.4.0 <1.10.0"
+      }
+    },
+    "node_modules/@opentelemetry/sdk-metrics": {
+      "version": "1.26.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/sdk-metrics/-/sdk-metrics-1.26.0.tgz",
+      "integrity": "sha512-0SvDXmou/JjzSDOjUmetAAvcKQW6ZrvosU0rkbDGpXvvZN+pQF6JbK/Kd4hNdK4q/22yeruqvukXEJyySTzyTQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/core": "1.26.0",
+        "@opentelemetry/resources": "1.26.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.3.0 <1.10.0"
+      }
+    },
+    "node_modules/@opentelemetry/sdk-node": {
+      "version": "0.53.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/sdk-node/-/sdk-node-0.53.0.tgz",
+      "integrity": "sha512-0hsxfq3BKy05xGktwG8YdGdxV978++x40EAKyKr1CaHZRh8uqVlXnclnl7OMi9xLMJEcXUw7lGhiRlArFcovyg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/api-logs": "0.53.0",
+        "@opentelemetry/core": "1.26.0",
+        "@opentelemetry/exporter-logs-otlp-grpc": "0.53.0",
+        "@opentelemetry/exporter-logs-otlp-http": "0.53.0",
+        "@opentelemetry/exporter-logs-otlp-proto": "0.53.0",
+        "@opentelemetry/exporter-trace-otlp-grpc": "0.53.0",
+        "@opentelemetry/exporter-trace-otlp-http": "0.53.0",
+        "@opentelemetry/exporter-trace-otlp-proto": "0.53.0",
+        "@opentelemetry/exporter-zipkin": "1.26.0",
+        "@opentelemetry/instrumentation": "0.53.0",
+        "@opentelemetry/resources": "1.26.0",
+        "@opentelemetry/sdk-logs": "0.53.0",
+        "@opentelemetry/sdk-metrics": "1.26.0",
+        "@opentelemetry/sdk-trace-base": "1.26.0",
+        "@opentelemetry/sdk-trace-node": "1.26.0",
+        "@opentelemetry/semantic-conventions": "1.27.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.3.0 <1.10.0"
+      }
+    },
+    "node_modules/@opentelemetry/sdk-trace-base": {
+      "version": "1.26.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/sdk-trace-base/-/sdk-trace-base-1.26.0.tgz",
+      "integrity": "sha512-olWQldtvbK4v22ymrKLbIcBi9L2SpMO84sCPY54IVsJhP9fRsxJT194C/AVaAuJzLE30EdhhM1VmvVYR7az+cw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/core": "1.26.0",
+        "@opentelemetry/resources": "1.26.0",
+        "@opentelemetry/semantic-conventions": "1.27.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.0.0 <1.10.0"
+      }
+    },
+    "node_modules/@opentelemetry/sdk-trace-node": {
+      "version": "1.26.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/sdk-trace-node/-/sdk-trace-node-1.26.0.tgz",
+      "integrity": "sha512-Fj5IVKrj0yeUwlewCRwzOVcr5avTuNnMHWf7GPc1t6WaT78J6CJyF3saZ/0RkZfdeNO8IcBl/bNcWMVZBMRW8Q==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/context-async-hooks": "1.26.0",
+        "@opentelemetry/core": "1.26.0",
+        "@opentelemetry/propagator-b3": "1.26.0",
+        "@opentelemetry/propagator-jaeger": "1.26.0",
+        "@opentelemetry/sdk-trace-base": "1.26.0",
+        "semver": "^7.5.2"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.0.0 <1.10.0"
+      }
+    },
+    "node_modules/@opentelemetry/sdk-trace-web": {
+      "version": "1.26.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/sdk-trace-web/-/sdk-trace-web-1.26.0.tgz",
+      "integrity": "sha512-sxeKPcG/gUyxZ8iB8X1MI8/grfSCGgo1n2kxOE73zjVaO9yW/7JuVC3gqUaWRjtZ6VD/V3lo2/ZSwMlm6n2mdg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/core": "1.26.0",
+        "@opentelemetry/sdk-trace-base": "1.26.0",
+        "@opentelemetry/semantic-conventions": "1.27.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.0.0 <1.10.0"
+      }
+    },
+    "node_modules/@opentelemetry/semantic-conventions": {
+      "version": "1.27.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/semantic-conventions/-/semantic-conventions-1.27.0.tgz",
+      "integrity": "sha512-sAay1RrB+ONOem0OZanAR1ZI/k7yDpnOQSQmTMuGImUQb2y8EbSaCJ94FQluM74xoU03vlb2d2U90hZluL6nQg==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -435,6 +958,70 @@
         "node": ">=14"
       }
     },
+    "node_modules/@protobufjs/aspromise": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
+      "integrity": "sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/base64": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/base64/-/base64-1.1.2.tgz",
+      "integrity": "sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/codegen": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@protobufjs/codegen/-/codegen-2.0.4.tgz",
+      "integrity": "sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/eventemitter": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/eventemitter/-/eventemitter-1.1.0.tgz",
+      "integrity": "sha512-j9ednRT81vYJ9OfVuXG6ERSTdEL1xVsNgqpkxMsbIabzSo3goCjDIveeGv5d03om39ML71RdmrGNjG5SReBP/Q==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/fetch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/fetch/-/fetch-1.1.0.tgz",
+      "integrity": "sha512-lljVXpqXebpsijW71PZaCYeIcE5on1w5DlQy5WH6GLbFryLUrBD4932W/E2BSpfRJWseIL4v/KPgBFxDOIdKpQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@protobufjs/aspromise": "^1.1.1",
+        "@protobufjs/inquire": "^1.1.0"
+      }
+    },
+    "node_modules/@protobufjs/float": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/float/-/float-1.0.2.tgz",
+      "integrity": "sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/inquire": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/inquire/-/inquire-1.1.0.tgz",
+      "integrity": "sha512-kdSefcPdruJiFMVSbn801t4vFK7KB/5gd2fYvrxhuJYg8ILrmn9SKSX2tZdV6V+ksulWqS7aXjBcRXl3wHoD9Q==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/path": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/path/-/path-1.1.2.tgz",
+      "integrity": "sha512-6JOcJ5Tm08dOHAbdR3GrvP+yUUfkjG5ePsHYczMFLq3ZmMkAD98cDgcT2iA1lJ9NVwFd4tH/iSSoe44YWkltEA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/pool": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/pool/-/pool-1.1.0.tgz",
+      "integrity": "sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/utf8": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
+      "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/@rushstack/eslint-patch": {
       "version": "1.10.4",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.10.4.tgz",
@@ -456,16 +1043,20 @@
       }
     },
     "node_modules/@types/json5": {
-      "version": "0.0.29",
-      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
-      "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
-      "dev": true
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-2.2.0.tgz",
+      "integrity": "sha512-NrVug5woqbvNZ0WX+Gv4R+L4TGddtmFek2u8RtccAgFZWtS9QXF2xCXY22/M4nzkaKF0q9Fc6M/5rxLDhfwc/A==",
+      "deprecated": "This is a stub types definition. json5 provides its own type definitions, so you do not need this installed.",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "json5": "*"
+      }
     },
     "node_modules/@types/node": {
       "version": "20.14.15",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.15.tgz",
       "integrity": "sha512-Fz1xDMCF/B00/tYSVMlmK7hVeLh7jE5f3B7X1/hmV0MJBwE27KlS7EvD/Yp+z1lm8mVhwV5w+n8jOZG8AfTlKw==",
-      "dev": true,
       "dependencies": {
         "undici-types": "~5.26.4"
       }
@@ -477,10 +1068,11 @@
       "dev": true
     },
     "node_modules/@types/react": {
-      "version": "18.3.3",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz",
-      "integrity": "sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==",
+      "version": "18.3.4",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.4.tgz",
+      "integrity": "sha512-J7W30FTdfCxDDjmfRM+/JqLHBIyl7xUIp9kwK637FGmY7+mkSFSe6L4jpZzhj5QMfLssSDP4/i75AKkrdC7/Jw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -491,10 +1083,17 @@
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
       "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@types/react": "*"
       }
     },
+    "node_modules/@types/shimmer": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@types/shimmer/-/shimmer-1.2.0.tgz",
+      "integrity": "sha512-UE7oxhQLLd9gub6JKIAhDq06T0F6FnztwMNRvYgjeQSBeMc1ZG/tA47EwfduvkuQS8apbkM/lpLpWsaCeYsXVg==",
+      "license": "MIT"
+    },
     "node_modules/@typescript-eslint/parser": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.2.0.tgz",
@@ -628,11 +1227,28 @@
       "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
       "dev": true
     },
+    "node_modules/@vercel/otel": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@vercel/otel/-/otel-1.10.0.tgz",
+      "integrity": "sha512-bv1FXbFZlFbB89vyA2P9/kr6eZ42bMtXgqBJpgi+8yOrZU8rkg9wMi0TL//AgAf/qKtaryDm1sbCnkLHgCI3PQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.7.0",
+        "@opentelemetry/api-logs": ">=0.46.0 && <1.0.0",
+        "@opentelemetry/instrumentation": ">=0.46.0 && <1.0.0",
+        "@opentelemetry/resources": "^1.19.0",
+        "@opentelemetry/sdk-logs": ">=0.46.0 && <1.0.0",
+        "@opentelemetry/sdk-metrics": "^1.19.0",
+        "@opentelemetry/sdk-trace-base": "^1.19.0"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.12.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
       "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==",
-      "dev": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -640,6 +1256,15 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/acorn-import-attributes": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz",
+      "integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^8"
+      }
+    },
     "node_modules/acorn-jsx": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
@@ -664,11 +1289,18 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/ansi-color": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-color/-/ansi-color-0.2.1.tgz",
+      "integrity": "sha512-bF6xLaZBLpOQzgYUtYEhJx090nPSZk1BQ/q2oyBK9aMMcJHzx9uXGCjI2Y+LebsN4Jwoykr0V9whbPiogdyHoQ==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -677,7 +1309,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -893,6 +1524,44 @@
       "integrity": "sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==",
       "dev": true
     },
+    "node_modules/autoprefixer": {
+      "version": "10.4.20",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
+      "integrity": "sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.23.3",
+        "caniuse-lite": "^1.0.30001646",
+        "fraction.js": "^4.3.7",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.0.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -966,6 +1635,53 @@
         "node": ">=8"
       }
     },
+    "node_modules/browserslist": {
+      "version": "4.23.3",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.3.tgz",
+      "integrity": "sha512-btwCFJVjI4YWDNfau8RhZ+B1Q/VLoUITrm3RlP6y1tYGWIOa+InuYiRGXUBXo8nA1qKmHMyLB/iVQg5TT4eFoA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "caniuse-lite": "^1.0.30001646",
+        "electron-to-chromium": "^1.5.4",
+        "node-releases": "^2.0.18",
+        "update-browserslist-db": "^1.1.0"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/bufrw": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/bufrw/-/bufrw-1.4.0.tgz",
+      "integrity": "sha512-sWm8iPbqvL9+5SiYxXH73UOkyEbGQg7kyHQmReF89WJHQJw2eV4P/yZ0E+b71cczJ4pPobVhXxgQcmfSTgGHxQ==",
+      "dependencies": {
+        "ansi-color": "^0.2.1",
+        "error": "^7.0.0",
+        "hexer": "^1.5.0",
+        "xtend": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 0.10.x"
+      }
+    },
     "node_modules/busboy": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
@@ -1064,37 +1780,93 @@
         "readdirp": "~3.6.0"
       },
       "engines": {
-        "node": ">= 8.10.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.2"
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/cjs-module-lexer": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.4.0.tgz",
+      "integrity": "sha512-N1NGmowPlGBLsOZLPvm48StN04V4YvQRL0i6b7ctrVY3epjP/ct7hFLOItz6pDIvRjwpfPxi52a2UWV2ziir8g==",
+      "license": "MIT"
+    },
+    "node_modules/client-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
+    },
+    "node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/cliui/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
+    "node_modules/cliui/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
       }
     },
-    "node_modules/chokidar/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
+    "node_modules/cliui/node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "license": "MIT",
       "dependencies": {
-        "is-glob": "^4.0.1"
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
       },
       "engines": {
-        "node": ">= 6"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
-    "node_modules/client-only": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
-      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
-    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -1105,8 +1877,7 @@
     "node_modules/color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
     "node_modules/commander": {
       "version": "4.1.1",
@@ -1216,7 +1987,6 @@
       "version": "4.3.6",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
       "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
-      "dev": true,
       "dependencies": {
         "ms": "2.1.2"
       },
@@ -1343,6 +2113,13 @@
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
       "dev": true
     },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.13",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.13.tgz",
+      "integrity": "sha512-lbBcvtIJ4J6sS4tb5TLp1b4LyfCdMkwStzXPyAgVgTRAsep4bvrAGaBOP7ZJtQMNJpSQ9SqG4brWOroNaQtm7Q==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@@ -1362,6 +2139,15 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/error": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/error/-/error-7.0.2.tgz",
+      "integrity": "sha512-UtVv4l5MhijsYUxPJo4390gzfZvAnTHreNnDjnTZaKIiZ/SemXxAhBkYSKtWa5RtBXbLP8tMgn/n0RUa/H7jXw==",
+      "dependencies": {
+        "string-template": "~0.2.1",
+        "xtend": "~4.0.0"
+      }
+    },
     "node_modules/es-abstract": {
       "version": "1.23.3",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.3.tgz",
@@ -1540,6 +2326,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -2130,6 +2925,20 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/fraction.js": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
+      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -2154,7 +2963,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -2186,6 +2994,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
     "node_modules/get-intrinsic": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
@@ -2439,7 +3256,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -2447,6 +3263,23 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hexer": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/hexer/-/hexer-1.5.0.tgz",
+      "integrity": "sha512-dyrPC8KzBzUJ19QTIo1gXNqIISRXQ0NwteW6OeQHRN4ZuZeHkdODfj0zHBdOlHbRY8GqbqK57C9oWSvQZizFsg==",
+      "dependencies": {
+        "ansi-color": "^0.2.1",
+        "minimist": "^1.1.0",
+        "process": "^0.10.0",
+        "xtend": "^4.0.0"
+      },
+      "bin": {
+        "hexer": "cli.js"
+      },
+      "engines": {
+        "node": ">= 0.10.x"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -2472,6 +3305,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/import-in-the-middle": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/import-in-the-middle/-/import-in-the-middle-1.11.0.tgz",
+      "integrity": "sha512-5DimNQGoe0pLUHbR9qK84iWaWjjbsxiqXnw6Qz64+azRgleqv9k2kTt5fw7QsOpmaGYtuxxursnPPsnTKEx10Q==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "acorn": "^8.8.2",
+        "acorn-import-attributes": "^1.9.5",
+        "cjs-module-lexer": "^1.2.2",
+        "module-details-from-path": "^1.0.3"
+      }
+    },
     "node_modules/imurmurhash": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
@@ -2615,7 +3460,6 @@
       "version": "2.15.0",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.0.tgz",
       "integrity": "sha512-Dd+Lb2/zvk9SKy1TGCt1wFJFo/MWBPMX5x7KcvLajWTGuomczdQX61PvY5yK6SVACwpoexWo81IfFyoKY2QnTA==",
-      "dev": true,
       "dependencies": {
         "hasown": "^2.0.2"
       },
@@ -2681,7 +3525,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -2941,6 +3784,22 @@
         "@pkgjs/parseargs": "^0.11.0"
       }
     },
+    "node_modules/jaeger-client": {
+      "version": "3.19.0",
+      "resolved": "https://registry.npmjs.org/jaeger-client/-/jaeger-client-3.19.0.tgz",
+      "integrity": "sha512-M0c7cKHmdyEUtjemnJyx/y9uX16XHocL46yQvyqDlPdvAcwPDbHrIbKjQdBqtiE4apQ/9dmr+ZLJYYPGnurgpw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "node-int64": "^0.4.0",
+        "opentracing": "^0.14.4",
+        "thriftrw": "^3.5.0",
+        "uuid": "^8.3.2",
+        "xorshift": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/jiti": {
       "version": "1.21.6",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz",
@@ -3081,12 +3940,24 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash.camelcase": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
+      "integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==",
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
+    "node_modules/long": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/long/-/long-5.2.3.tgz",
+      "integrity": "sha512-lcHwpNoggQTObv5apGNCTdJrO69eHOZMi4BNC+rTLER8iHAqGrUVeLh/irVIM7zTw2bOXA8T6uNPeujwOLg/2Q==",
+      "license": "Apache-2.0"
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -3142,7 +4013,6 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
       "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -3156,11 +4026,16 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/module-details-from-path": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/module-details-from-path/-/module-details-from-path-1.0.3.tgz",
+      "integrity": "sha512-ySViT69/76t8VhE1xXHK6Ch4NcDd26gx0MzKXLO+F7NOtnqH68d9zF94nT8ZWSxXh8ELOERsnJO/sWt1xZYw5A==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "node_modules/mz": {
       "version": "2.7.0",
@@ -3272,6 +4147,19 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/node-int64": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
+      "integrity": "sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==",
+      "license": "MIT"
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz",
+      "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -3281,6 +4169,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -3426,6 +4324,15 @@
         "wrappy": "1"
       }
     },
+    "node_modules/opentracing": {
+      "version": "0.14.7",
+      "resolved": "https://registry.npmjs.org/opentracing/-/opentracing-0.14.7.tgz",
+      "integrity": "sha512-vz9iS7MJ5+Bp1URw8Khvdyw1H/hGvzHWlKQ7eRrQojSCDL1/SrWfrY9QebLw97n2deyRtzHRC3MkQfVNUCo91Q==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -3515,8 +4422,7 @@
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
     "node_modules/path-scurry": {
       "version": "1.11.1",
@@ -3606,6 +4512,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "dependencies": {
         "nanoid": "^3.3.7",
         "picocolors": "^1.0.1",
@@ -3751,6 +4658,109 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
+      "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.6.6",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.6.tgz",
+      "integrity": "sha512-OPva5S7WAsPLEsOuOWXATi13QrCKACCiIonFgIR6V4lYv4QLp++UXVhZSzRbZxXGimkQtQT86CC6fQqTOybGng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.21.3"
+      },
+      "peerDependencies": {
+        "@ianvs/prettier-plugin-sort-imports": "*",
+        "@prettier/plugin-pug": "*",
+        "@shopify/prettier-plugin-liquid": "*",
+        "@trivago/prettier-plugin-sort-imports": "*",
+        "@zackad/prettier-plugin-twig-melody": "*",
+        "prettier": "^3.0",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-css-order": "*",
+        "prettier-plugin-import-sort": "*",
+        "prettier-plugin-jsdoc": "*",
+        "prettier-plugin-marko": "*",
+        "prettier-plugin-multiline-arrays": "*",
+        "prettier-plugin-organize-attributes": "*",
+        "prettier-plugin-organize-imports": "*",
+        "prettier-plugin-sort-imports": "*",
+        "prettier-plugin-style-order": "*",
+        "prettier-plugin-svelte": "*"
+      },
+      "peerDependenciesMeta": {
+        "@ianvs/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@prettier/plugin-pug": {
+          "optional": true
+        },
+        "@shopify/prettier-plugin-liquid": {
+          "optional": true
+        },
+        "@trivago/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@zackad/prettier-plugin-twig-melody": {
+          "optional": true
+        },
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-css-order": {
+          "optional": true
+        },
+        "prettier-plugin-import-sort": {
+          "optional": true
+        },
+        "prettier-plugin-jsdoc": {
+          "optional": true
+        },
+        "prettier-plugin-marko": {
+          "optional": true
+        },
+        "prettier-plugin-multiline-arrays": {
+          "optional": true
+        },
+        "prettier-plugin-organize-attributes": {
+          "optional": true
+        },
+        "prettier-plugin-organize-imports": {
+          "optional": true
+        },
+        "prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "prettier-plugin-style-order": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/process": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.10.1.tgz",
+      "integrity": "sha512-dyIett8dgGIZ/TXKUzeYExt7WA6ldDzys9vTDU/cCA9L17Ypme+KzS+NjQCjpn9xsvi/shbMC+yP/BcFMBz0NA==",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -3762,6 +4772,30 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/protobufjs": {
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.4.0.tgz",
+      "integrity": "sha512-mRUWCc3KUU4w1jU8sGxICXH/gNS94DvI1gxqDvBzhj1JpcsimQkYiOJfwsPUykUI5ZaspFbSgmBLER8IrQ3tqw==",
+      "hasInstallScript": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@protobufjs/aspromise": "^1.1.2",
+        "@protobufjs/base64": "^1.1.2",
+        "@protobufjs/codegen": "^2.0.4",
+        "@protobufjs/eventemitter": "^1.1.0",
+        "@protobufjs/fetch": "^1.1.0",
+        "@protobufjs/float": "^1.0.2",
+        "@protobufjs/inquire": "^1.1.0",
+        "@protobufjs/path": "^1.1.2",
+        "@protobufjs/pool": "^1.1.0",
+        "@protobufjs/utf8": "^1.1.0",
+        "@types/node": ">=13.7.0",
+        "long": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -3880,6 +4914,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/require-from-string": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
@@ -3888,11 +4931,24 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/require-in-the-middle": {
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/require-in-the-middle/-/require-in-the-middle-7.4.0.tgz",
+      "integrity": "sha512-X34iHADNbNDfr6OTStIAHWSAvvKQRYgLO6duASaVf7J2VA3lvmNYboAHOuLC2huav1IwgZJtyEcJCKVzFxOSMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.3.5",
+        "module-details-from-path": "^1.0.3",
+        "resolve": "^1.22.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
       "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
-      "dev": true,
       "dependencies": {
         "is-core-module": "^2.13.0",
         "path-parse": "^1.0.7",
@@ -4040,7 +5096,6 @@
       "version": "7.6.3",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
       "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
-      "dev": true,
       "bin": {
         "semver": "bin/semver.js"
       },
@@ -4101,6 +5156,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/shimmer": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/shimmer/-/shimmer-1.2.1.tgz",
+      "integrity": "sha512-sQTKC1Re/rM6XyFM6fIAGHRPVGvyXfgzIDvzoq608vM+jeyVD0Tu1E6Np0Kc2zAIFWIj963V2800iF/9LPieQw==",
+      "license": "BSD-2-Clause"
+    },
     "node_modules/side-channel": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
@@ -4168,6 +5229,11 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/string-template": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/string-template/-/string-template-0.2.1.tgz",
+      "integrity": "sha512-Yptehjogou2xm4UJbxJ4CxgZx12HBfeystp0y3x7s4Dj32ltVVG1Gg8YhKjHZkHicuKpZX/ffilA8505VbUbpw=="
+    },
     "node_modules/string-width": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
@@ -4332,7 +5398,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -4434,7 +5499,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -4447,6 +5511,7 @@
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.10.tgz",
       "integrity": "sha512-KWZkVPm7yJRhdu4SRSl9d4AK2wM3a50UsvgHZO7xY77NQr2V+fIrEuoDGQcbvswWvFGbS2f6e+jC/6WJm1Dl0w==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -4515,6 +5580,31 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/thriftrw": {
+      "version": "3.11.4",
+      "resolved": "https://registry.npmjs.org/thriftrw/-/thriftrw-3.11.4.tgz",
+      "integrity": "sha512-UcuBd3eanB3T10nXWRRMwfwoaC6VMk7qe3/5YIWP2Jtw+EbHqJ0p1/K3x8ixiR5dozKSSfcg1W+0e33G1Di3XA==",
+      "dependencies": {
+        "bufrw": "^1.2.1",
+        "error": "7.0.2",
+        "long": "^2.4.0"
+      },
+      "bin": {
+        "thrift2json": "thrift2json.js"
+      },
+      "engines": {
+        "node": ">= 0.10.x"
+      }
+    },
+    "node_modules/thriftrw/node_modules/long": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/long/-/long-2.4.0.tgz",
+      "integrity": "sha512-ijUtjmO/n2A5PaosNG9ZGDsQ3vxJg7ZW8vsY8Kp0f2yIZWhSJvjmegV7t+9RPQKxKrvj8yKGehhS+po14hPLGQ==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -4557,6 +5647,13 @@
         "strip-bom": "^3.0.0"
       }
     },
+    "node_modules/tsconfig-paths/node_modules/@types/json5": {
+      "version": "0.0.29",
+      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
+      "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/tslib": {
       "version": "2.6.3",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
@@ -4690,8 +5787,38 @@
     "node_modules/undici-types": {
       "version": "5.26.5",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
-      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
-      "dev": true
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz",
+      "integrity": "sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.1.2",
+        "picocolors": "^1.0.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
     },
     "node_modules/uri-js": {
       "version": "4.4.1",
@@ -4708,6 +5835,15 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "dev": true
     },
+    "node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -4911,6 +6047,30 @@
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
       "dev": true
     },
+    "node_modules/xorshift": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/xorshift/-/xorshift-1.2.0.tgz",
+      "integrity": "sha512-iYgNnGyeeJ4t6U11NpA/QiKy+PXn5Aa3Azg5qkwIFz1tBLllQrjjsk9yzD7IAK0naNU4JxdeDgqW9ov4u/hc4g==",
+      "license": "MIT"
+    },
+    "node_modules/xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4"
+      }
+    },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/yaml": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.5.0.tgz",
@@ -4923,6 +6083,53 @@
         "node": ">= 14"
       }
     },
+    "node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
+    "node_modules/yargs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/src/flagd-ui/package.json b/src/flagd-ui/package.json
index 77855a5194..263b4314b2 100644
--- a/src/flagd-ui/package.json
+++ b/src/flagd-ui/package.json
@@ -3,25 +3,41 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev -p 4000 -H 0.0.0.0",
     "build": "next build",
-    "start": "next start",
+    "start": "next start -p 4000 -H 0.0.0.0",
     "lint": "next lint"
   },
   "dependencies": {
+    "@opentelemetry/api": "^1.9.0",
+    "@opentelemetry/api-logs": "^0.53.0",
+    "@opentelemetry/exporter-jaeger": "^1.26.0",
+    "@opentelemetry/exporter-trace-otlp-http": "^0.53.0",
+    "@opentelemetry/instrumentation": "^0.53.0",
+    "@opentelemetry/instrumentation-fetch": "^0.53.0",
+    "@opentelemetry/resources": "^1.26.0",
+    "@opentelemetry/sdk-logs": "^0.53.0",
+    "@opentelemetry/sdk-node": "^0.53.0",
+    "@opentelemetry/sdk-trace-node": "^1.26.0",
+    "@opentelemetry/semantic-conventions": "^1.27.0",
+    "@vercel/otel": "^1.10.0",
     "ajv": "^8.17.1",
     "next": "14.2.5",
     "react": "^18",
     "react-dom": "^18"
   },
   "devDependencies": {
+    "@types/json5": "^2.2.0",
     "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/react": "^18.3.4",
+    "@types/react-dom": "^18.3.0",
+    "autoprefixer": "^10.4.20",
     "eslint": "^8",
     "eslint-config-next": "14.2.5",
-    "postcss": "^8",
-    "tailwindcss": "^3.4.1",
+    "postcss": "^8.4.41",
+    "prettier": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.6",
+    "tailwindcss": "^3.4.10",
     "typescript": "^5"
   }
 }
diff --git a/src/flagd-ui/pages/advanced.tsx b/src/flagd-ui/pages/advanced.tsx
deleted file mode 100644
index 9cccf571db..0000000000
--- a/src/flagd-ui/pages/advanced.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-"use client";
-import Link from "next/link";
-import { useEffect, useState } from "react";
-import FileEditor from "../src/app/components/FileEditor";
-
-export default function Home() {
-  const [flagData, setflagData] = useState(null);
-  const [reloadData, setreloadData] = useState(false);
-  useEffect(() => {
-    const readFile = (file_name: string) => {
-      const fileContent = fetch(`/api/read-file?${file_name}`, {
-        method: "GET",
-        headers: { "Content-Type": "application/json" },
-      })
-        .then((response) => response.json())
-        .then((data) => {
-          setflagData(data);
-          console.log(data);
-        })
-        .catch((error) => console.error(error));
-    };
-
-    // Initial read
-    readFile("");
-    if (reloadData) {
-      setreloadData(false);
-    }
-  }, [reloadData]);
-  return (
-    <div className="app">
-      <Link href="/" passHref>
-        <button
-          style={{ padding: "10px 20px", fontSize: "16px", cursor: "pointer" }}
-        >
-          Basic
-        </button>
-      </Link>
-      <FileEditor setreloadData={setreloadData} flagConfig={flagData} />
-    </div>
-  );
-}
diff --git a/src/flagd-ui/pages/api/read-file.ts b/src/flagd-ui/pages/api/read-file.ts
deleted file mode 100644
index 68504885d9..0000000000
--- a/src/flagd-ui/pages/api/read-file.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import fs from "fs";
-import path from "path";
-// import data_file from "../../../flagd/demo.flagd.json";
-import type { NextApiResponse, NextApiRequest } from "next";
-import { isUtf8 } from "buffer";
-
-export default function handler(
-  req: NextApiRequest,
-  res: NextApiResponse<any>
-) {
-  const file_name = req.query.file_name?.toString() || "output.json";
-  if (req.method === "GET") {
-    const data = JSON.parse(
-      fs.readFileSync(path.join(process.cwd(), "data", file_name), {
-        encoding: "utf8",
-        flag: "r",
-      })
-    );
-    res.status(200).json(data);
-  } else {
-    res.status(405).json({ message: "Method not allowed" });
-  }
-}
-export function readFileContents(file_name: string) {
-  fetch(`/api/read-file?${file_name}`, {
-    method: "GET",
-    headers: { "Content-Type": "application/json" },
-  })
-    .then((response) => response.json())
-    .then((data) => data);
-}
diff --git a/src/flagd-ui/pages/api/write-to-file.ts b/src/flagd-ui/pages/api/write-to-file.ts
deleted file mode 100644
index c872acb21b..0000000000
--- a/src/flagd-ui/pages/api/write-to-file.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import fs from "fs";
-import path from "path";
-import { isUtf8 } from "buffer";
-import type { NextApiResponse, NextApiRequest } from "next";
-
-export default function handler(
-  req: NextApiRequest,
-  res: NextApiResponse<any>
-) {
-  if (req.method === "POST") {
-    const { data } = req.body;
-    const filePath = path.join(process.cwd(), "data", "output.json");
-    fs.writeFile(filePath, JSON.stringify(data, null, 2), (err) => {
-      if (err) {
-        res.status(500).json({ message: "Error writing to file" });
-        return;
-      }
-      res.status(200).json({ message: "File written successfully" });
-    });
-  } else {
-    res.status(405).json({ message: "Method not allowed" });
-  }
-}
diff --git a/src/flagd-ui/public/next.svg b/src/flagd-ui/public/next.svg
deleted file mode 100644
index 5174b28c56..0000000000
--- a/src/flagd-ui/public/next.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
\ No newline at end of file
diff --git a/src/flagd-ui/public/vercel.svg b/src/flagd-ui/public/vercel.svg
deleted file mode 100644
index d2f8422273..0000000000
--- a/src/flagd-ui/public/vercel.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>
\ No newline at end of file
diff --git a/src/flagd-ui/src/app/advanced/page.tsx b/src/flagd-ui/src/app/advanced/page.tsx
new file mode 100644
index 0000000000..e302ff6ccb
--- /dev/null
+++ b/src/flagd-ui/src/app/advanced/page.tsx
@@ -0,0 +1,7 @@
+import AdvancedView from "@/components/advanced/AdvancedView";
+
+const Advanced = () => {
+  return <AdvancedView />;
+};
+
+export default Advanced;
diff --git a/src/flagd-ui/src/app/api/read-file/route.ts b/src/flagd-ui/src/app/api/read-file/route.ts
new file mode 100644
index 0000000000..e98c43e755
--- /dev/null
+++ b/src/flagd-ui/src/app/api/read-file/route.ts
@@ -0,0 +1,18 @@
+import { NextResponse } from "next/server";
+import fs from "fs";
+import path from "path";
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const file_name = searchParams.get("file_name") || "demo.flagd.json";
+
+  try {
+    const filePath = path.join(process.cwd(), "data", file_name);
+    const fileContents = fs.readFileSync(filePath, "utf8");
+    const data = JSON.parse(fileContents);
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error("Error reading file:", error);
+    return NextResponse.json({ error: "Failed to read file" }, { status: 500 });
+  }
+}
diff --git a/src/flagd-ui/src/app/api/write-to-file/route.ts b/src/flagd-ui/src/app/api/write-to-file/route.ts
new file mode 100644
index 0000000000..9b037aac8e
--- /dev/null
+++ b/src/flagd-ui/src/app/api/write-to-file/route.ts
@@ -0,0 +1,23 @@
+import { NextResponse } from "next/server";
+import fs from "fs/promises";
+import path from "path";
+
+export async function POST(request: Request) {
+  try {
+    const { data } = await request.json();
+    const filePath = path.join(process.cwd(), "data", "demo.flagd.json");
+
+    await fs.writeFile(filePath, JSON.stringify(data, null, 2), "utf8");
+
+    return NextResponse.json(
+      { message: "File written successfully" },
+      { status: 200 },
+    );
+  } catch (error) {
+    console.error("Error writing to file:", error);
+    return NextResponse.json(
+      { message: "Error writing to file" },
+      { status: 500 },
+    );
+  }
+}
diff --git a/src/flagd-ui/src/app/components/FeatureFlag.css b/src/flagd-ui/src/app/components/FeatureFlag.css
deleted file mode 100644
index 4a9eedf9e7..0000000000
--- a/src/flagd-ui/src/app/components/FeatureFlag.css
+++ /dev/null
@@ -1,43 +0,0 @@
-/* .feature-flag {
-  background-color: red;
-} */
-.feature-flag {
-  display: flex;
-  align-items: center; /* centers items vertically */
-  justify-content: space-between; /* spaces items horizontally */
-  padding: 20px;
-  /* margin: auto;
-  width: 400px;
-  height: 100px;
-  cursor: pointer; */
-  border: 2px solid #007bff; /* Blue border */
-}
-.send-button {
-  margin-left: auto;
-}
-.top-right-name {
-  position: relative;
-  top: 0;
-  right: 0;
-}
-.toggle-button {
-  /* padding: 2px; */
-  /* text-indent: 50px; */
-}
-.name-div {
-  width: 500px;
-}
-/* .right-center-toggle-box{
-  margin: auto;
-} */
-.input_not_matched_case {
-  border: 2px solid red;
-}
-/* .enable-disable-checkbox{
-  padding: 20px;
-} */
-.my-checkbox {
-  padding: 2px;
-  /* text-align-last: 50px; */
-  /* text-indent: 50px; */
-}
diff --git a/src/flagd-ui/src/app/components/FeatureFlag.tsx b/src/flagd-ui/src/app/components/FeatureFlag.tsx
deleted file mode 100644
index 43de6872dd..0000000000
--- a/src/flagd-ui/src/app/components/FeatureFlag.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-"use client";
-import "./FeatureFlag.css";
-import React, { useCallback } from "react";
-import { useState } from "react";
-
-type FeatureFlagsProps = {
-  flagId: string;
-  setreloadData: (param: boolean) => void;
-  flagConfig: FlagConfig;
-  configFile?: ConfigFile;
-};
-
-function FeatureFlag({
-  flagId,
-  setreloadData,
-  flagConfig,
-  configFile,
-}: FeatureFlagsProps) {
-  const [enableDisable, setEnableDisable] = useState(
-    flagConfig.state === "ENABLED"
-  );
-  const [toggleOn, setToggleOn] = useState(flagConfig.defaultVariant === "on"); // TODO adopt this
-  const enableDisableMapping = {
-    on: true,
-    off: false,
-  };
-
-  const handleEnableDisableChange = useCallback(
-    (e: {
-      target: { checked: boolean | ((prevState: boolean) => boolean) };
-    }) => {
-      setEnableDisable(e.target.checked);
-    },
-    []
-  );
-
-  const handleToggleOnClick = useCallback(() => {
-    setToggleOn(!toggleOn);
-  }, [toggleOn]);
-
-  function sendUpdate() {
-    configFile.flags[flagId].state = enableDisable ? "ENABLED" : "DISABLED";
-    configFile.flags[flagId].defaultVariant = toggleOn ? "on" : "off"; // TODO adopt this
-    fetch("/api/write-to-file", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ data: configFile }),
-    })
-      .then((response) => response.json())
-      .then((data) => console.log(data))
-      .then(() => setreloadData(true))
-      .catch((error) => console.error(error));
-    return;
-  }
-  const DynamicField = ({ flagConfig, flagId, setreloadData }) => {
-    // Object.values(flagConfig.variants).every(value => typeof value === 'boolean')
-    switch (JSON.stringify(flagConfig.variants)) {
-      case JSON.stringify(enableDisableMapping):
-        return (
-          <div className="right-center-toggle-box">
-            <button className="toggle-button" onClick={handleToggleOnClick}>
-              {toggleOn ? "ON" : "OFF"}
-            </button>
-          </div>
-        );
-      default:
-        return <div />;
-    }
-  };
-  return (
-    <div className="feature-flag">
-      <div className="name-div">
-        <div className="top-right-name">{flagId}</div>
-        <input
-          type="checkbox"
-          className="enable-disable-checkbox"
-          id="my-checkbox"
-          checked={enableDisable}
-          onChange={handleEnableDisableChange}
-        />
-        <label htmlFor="my-checkbox">Enable/Disable</label>
-      </div>
-      <DynamicField
-        flagId={flagId}
-        key={flagId}
-        setreloadData={setreloadData}
-        flagConfig={flagConfig}
-      />
-      <button className="send-button" onClick={sendUpdate}>
-        Send
-      </button>
-    </div>
-  );
-}
-
-export default FeatureFlag;
\ No newline at end of file
diff --git a/src/flagd-ui/src/app/components/FileEditor.tsx b/src/flagd-ui/src/app/components/FileEditor.tsx
deleted file mode 100644
index a21c70f9d6..0000000000
--- a/src/flagd-ui/src/app/components/FileEditor.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-"use client";
-import Ajv from "ajv";
-
-import React, { useCallback, useEffect, useRef } from "react";
-import { useState } from "react";
-
-async function makeRequest(url: string) {
-  try {
-    const response = await fetch(url);
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-    const data = await response.json();
-    return data;
-  } catch (error: any) {
-    console.error("There was an error:", error.message);
-    return null;
-  }
-}
-const ajv = new Ajv();
-let validate: any;
-
-// @ts-ignore
-function FileEditor({ setreloadData, flagConfig }) {
-  const [schema, setSchema] = useState<[any, any][]>([]);
-  useEffect(() => {
-    async function loadSchema() {
-      const schema1 = await makeRequest(
-        "https://flagd.dev/schema/v0/flags.json"
-      );
-      const schema2 = await makeRequest(
-        "https://flagd.dev/schema/v0/targeting.json"
-      ); // if there are more in the future
-      const schemas: [any, any][] = [schema1, schema2];
-      setSchema(schemas);
-      validate = ajv.addSchema(schemas[1]).compile(schemas[0]);
-    }
-    loadSchema();
-  }, []);
-  const textAreaRef = useRef(null);
-  function attemptUpdate() {
-    function parseJSON() {
-      try {
-        // @ts-ignore
-        const data = JSON.parse(textAreaRef.current.value);
-        return data;
-      } catch (objError) {
-        window.alert("Error parsing JSON");
-        if (objError instanceof SyntaxError) {
-          console.error(objError.name);
-        } else {
-          console.error(objError);
-        }
-        return null;
-      }
-    }
-    const data = parseJSON();
-    if (data === null) return;
-    validate(data) ? sendUpdate(data) : window.alert("Schema check failed");
-  }
-
-  function sendUpdate(data: any) {
-    fetch("/api/write-to-file", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ data }),
-    })
-      .then((response) => response.json())
-      .then((data) => console.log(data))
-      .then(() => setreloadData(true))
-      .catch((error) => console.error(error));
-    return;
-  }
-  // @ts-ignore
-  const DynamicField = ({ flagConfig }) => {
-    return (
-      <textarea
-        className="input_not_matched_case"
-        cols={200}
-        rows={40}
-        ref={textAreaRef}
-        defaultValue={JSON.stringify(flagConfig, null, 2)}
-      ></textarea>
-    );
-  };
-  return (
-    <div className="feature-flag">
-      <DynamicField flagConfig={flagConfig} />
-      <button className="send-button" onClick={attemptUpdate}>
-        Send
-      </button>
-    </div>
-  );
-}
-
-export default FileEditor;
diff --git a/src/flagd-ui/src/app/globals.css b/src/flagd-ui/src/app/globals.css
index 875c01e819..b5c61c9567 100644
--- a/src/flagd-ui/src/app/globals.css
+++ b/src/flagd-ui/src/app/globals.css
@@ -1,33 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-}
diff --git a/src/flagd-ui/src/app/layout.tsx b/src/flagd-ui/src/app/layout.tsx
index 5ff842ef07..1f8870b7a7 100644
--- a/src/flagd-ui/src/app/layout.tsx
+++ b/src/flagd-ui/src/app/layout.tsx
@@ -1,6 +1,10 @@
+import { Layout } from "@/components/Layout";
+import "./globals.css";
+
 export const metadata = {
-  title: "Next.js",
-  description: "Generated by Next.js",
+  title: "Flagd Configurator",
+  description:
+    "Built to provide an easier way to configure the Flagd configurations",
 };
 
 export default function RootLayout({
@@ -10,7 +14,9 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body>{children}</body>
+      <body>
+        <Layout>{children}</Layout>
+      </body>
     </html>
   );
 }
diff --git a/src/flagd-ui/src/app/page.tsx b/src/flagd-ui/src/app/page.tsx
index c9601d3874..cd4cf17e1b 100644
--- a/src/flagd-ui/src/app/page.tsx
+++ b/src/flagd-ui/src/app/page.tsx
@@ -1,52 +1,12 @@
 "use client";
-import { useEffect, useState } from "react";
-import FeatureFlag from "./components/FeatureFlag";
+import React from "react";
 import Link from "next/link";
+import BasicView from "../components/basic/BasicView";
 
 export default function Home() {
-  const [flagData, setflagData] = useState<any>(null);
-  const [reloadData, setreloadData] = useState(false);
-  useEffect(() => {
-    const readFile = () => {
-      const fileContent = fetch("/api/read-file", {
-        method: "GET",
-        headers: { "Content-Type": "application/json" },
-      })
-        .then((response) => response.json())
-        .then((data) => {
-          setflagData(data);
-          console.log(data);
-        })
-        .catch((error) => console.error(error));
-    };
-    readFile();
-    if (reloadData) {
-      setreloadData(false);
-    }
-  }, [reloadData]);
-
   return (
     <div className="app">
-      <Link href="/advanced" passHref>
-        <button
-          style={{ padding: "10px 20px", fontSize: "16px", cursor: "pointer" }}
-        >
-          Advanced
-        </button>
-      </Link>
-      {flagData &&
-        Object.keys(flagData.flags).map((flagId) => {
-          const flagConfig: FlagConfig = flagData.flags[flagId];
-          return (
-            <FeatureFlag
-              flagId={flagId}
-              key={flagId}
-              setreloadData={setreloadData}
-              flagConfig={flagConfig}
-              configFile={flagData}
-            />
-          );
-        })}
+      <BasicView />
     </div>
   );
 }
diff --git a/src/flagd-ui/src/components/Layout.tsx b/src/flagd-ui/src/components/Layout.tsx
new file mode 100644
index 0000000000..c0d4f80182
--- /dev/null
+++ b/src/flagd-ui/src/components/Layout.tsx
@@ -0,0 +1,35 @@
+"use client";
+import React, { useState, createContext, useContext } from "react";
+import NavBar from "./nav/NavBar";
+import Spinner from "./utils/Spinner";
+
+type LoadingContextType = {
+  isLoading: boolean;
+  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+const LoadingContext = createContext<LoadingContextType | undefined>(undefined);
+
+export const useLoading = () => {
+  const context = useContext(LoadingContext);
+  if (context === undefined) {
+    throw new Error("useLoading must be used within a LoadingProvider");
+  }
+  return context;
+};
+
+export const Layout: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  return (
+    <LoadingContext.Provider value={{ isLoading, setIsLoading }}>
+      <div className="relative min-h-screen">
+        <NavBar />
+        <main>{children}</main>
+        {isLoading && <Spinner />}
+      </div>
+    </LoadingContext.Provider>
+  );
+};
diff --git a/src/flagd-ui/src/components/advanced/AdvancedView.tsx b/src/flagd-ui/src/components/advanced/AdvancedView.tsx
new file mode 100644
index 0000000000..98baac7c07
--- /dev/null
+++ b/src/flagd-ui/src/components/advanced/AdvancedView.tsx
@@ -0,0 +1,158 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+import FileEditor from "./FileEditor";
+import Ajv, { AnySchema } from "ajv";
+import { useLoading } from "../Layout";
+
+const ajv = new Ajv();
+let validate: any;
+
+export default function AdvancedView() {
+  const [flagData, setflagData] = useState(null);
+  const [reloadData, setReloadData] = useState(false);
+  const [flagDataIsSynced, setFlagDataIsSynced] = useState(true);
+
+  const textAreaRef = useRef<HTMLTextAreaElement>(null);
+  const { setIsLoading } = useLoading();
+
+  useEffect(() => {
+    const readFile = async (file_name: string) => {
+      try {
+        const response = await fetch(`/feature/api/read-file?${file_name}`, {
+          method: "GET",
+          headers: { "Content-Type": "application/json" },
+        });
+        const data = await response.json();
+        setflagData(data);
+      } catch (err: unknown) {
+        window.alert(err);
+        console.error(err);
+      }
+    };
+    readFile("");
+    if (reloadData) {
+      setReloadData(false);
+    }
+  }, [reloadData]);
+
+  useEffect(() => {
+    async function loadSchema() {
+      try {
+        const schemas: [AnySchema | null, AnySchema | null] = await Promise.all(
+          [
+            requestSchemas("https://flagd.dev/schema/v0/flags.json"),
+            requestSchemas("https://flagd.dev/schema/v0/targeting.json"),
+          ],
+        );
+        if (schemas[0] && schemas[1]) {
+          validate = ajv.addSchema(schemas[1]).compile(schemas[0]);
+        }
+      } catch (error) {
+        console.error("Error loading schemas:", error);
+      }
+
+      return null;
+    }
+    loadSchema();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  async function requestSchemas(url: string): Promise<AnySchema | null> {
+    try {
+      setIsLoading(true);
+      const response = await fetch(url);
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const data = await response.json();
+      setIsLoading(false);
+      return data;
+    } catch (error: any) {
+      console.error("There was an error:", error.message);
+    }
+    return null;
+  }
+
+  function parseJSON(): string | null {
+    try {
+      if (textAreaRef.current) {
+        const data = JSON.parse(textAreaRef.current.value);
+        return data;
+      }
+    } catch (objError) {
+      window.alert("Error parsing JSON");
+      if (objError instanceof SyntaxError) {
+        console.error(objError.name);
+      } else {
+        console.error(objError);
+      }
+    }
+    return null;
+  }
+
+  async function saveUpdate(flagData: string): Promise<void> {
+    try {
+      setIsLoading(true);
+      const response = await fetch("/feature/api/write-to-file", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ data: flagData }),
+      });
+      await response.json();
+      setIsLoading(false);
+      setReloadData(true);
+      setFlagDataIsSynced(true);
+    } catch (err: unknown) {
+      setIsLoading(false);
+      window.alert(err);
+      console.error(err);
+    }
+  }
+
+  function update() {
+    const data = parseJSON();
+    if (data === null) return;
+    validate(data) ? saveUpdate(data) : window.alert("Schema check failed");
+  }
+
+  const handleTextAreaChange = () => {
+    try {
+      if (textAreaRef.current) {
+        const textAreaContent = JSON.parse(textAreaRef.current.value);
+        setFlagDataIsSynced(
+          JSON.stringify(textAreaContent) === JSON.stringify(flagData),
+        );
+      }
+    } catch (error) {
+      console.error("Invalid JSON in textarea", error);
+      setFlagDataIsSynced(false);
+    }
+  };
+
+  return (
+    <>
+      {flagData && (
+        <div>
+          <FileEditor
+            flagConfig={flagData}
+            textAreaRef={textAreaRef}
+            handleTextAreaChange={handleTextAreaChange}
+          />
+          <div className="p-2 pl-8 text-gray-300 shadow-md">
+            <div className="mb-8 flex flex-auto items-center gap-2">
+              <button
+                className="rounded bg-blue-500 px-8 py-4 font-medium text-white transition-colors duration-200 hover:bg-blue-600"
+                onClick={update}
+              >
+                save
+              </button>
+              {!flagDataIsSynced && (
+                <p className="text-red-600">Unsaved changes</p>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/src/flagd-ui/src/components/advanced/FileEditor.tsx b/src/flagd-ui/src/components/advanced/FileEditor.tsx
new file mode 100644
index 0000000000..cfd7fe7789
--- /dev/null
+++ b/src/flagd-ui/src/components/advanced/FileEditor.tsx
@@ -0,0 +1,27 @@
+"use client";
+import React, { RefObject } from "react";
+import { FlagConfig } from "@/utils/types";
+
+type FileEditorProps = {
+  flagConfig: FlagConfig;
+  textAreaRef: RefObject<HTMLTextAreaElement>;
+  handleTextAreaChange: () => void;
+};
+
+function FileEditor({
+  flagConfig,
+  textAreaRef,
+  handleTextAreaChange,
+}: FileEditorProps) {
+  return (
+    <textarea
+      className="mb-4 h-48 w-full bg-gray-700 p-3 text-sm text-gray-300 focus:border-blue-500 focus:outline-none sm:h-64 md:h-80 lg:h-96 xl:h-[32rem] 2xl:h-[48rem]"
+      cols={200}
+      ref={textAreaRef}
+      defaultValue={JSON.stringify(flagConfig, null, 2)}
+      onChange={handleTextAreaChange}
+    />
+  );
+}
+
+export default FileEditor;
diff --git a/src/flagd-ui/src/components/basic/BasicView.tsx b/src/flagd-ui/src/components/basic/BasicView.tsx
new file mode 100644
index 0000000000..97bf9aa3a7
--- /dev/null
+++ b/src/flagd-ui/src/components/basic/BasicView.tsx
@@ -0,0 +1,102 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import FeatureFlag from "./FeatureFlag";
+import { ConfigFile, FlagConfig } from "@/utils/types";
+import { useLoading } from "../Layout";
+
+const BasicView = () => {
+  const [flagData, setFlagData] = useState<ConfigFile | null>(null);
+  const [originalFlagData, setOriginalFlagData] = useState<ConfigFile | null>(
+    null,
+  );
+  const [reloadData, setReloadData] = useState(false);
+
+  const { setIsLoading } = useLoading();
+
+  useEffect(() => {
+    const readFile = async () => {
+      try {
+        const response = await fetch("/feature/api/read-file", {
+          method: "GET",
+          headers: { "Content-Type": "application/json" },
+        });
+        const data = await response.json();
+        setFlagData(data);
+        setOriginalFlagData(data);
+      } catch (err: unknown) {
+        window.alert(err);
+        console.error(err);
+      }
+    };
+    readFile();
+
+    if (reloadData) {
+      setReloadData(false);
+    }
+  }, [reloadData]);
+
+  const updateFlagData = (flagId: string, selectedVariant: string) => {
+    setFlagData((prevFlagData) => {
+      if (!prevFlagData) return prevFlagData;
+
+      return {
+        ...prevFlagData,
+        flags: {
+          ...prevFlagData.flags,
+          [flagId]: {
+            ...prevFlagData.flags[flagId],
+            defaultVariant: selectedVariant,
+          },
+        },
+      };
+    });
+  };
+
+  const save = async () => {
+    try {
+      setIsLoading(true);
+      await fetch("/feature/api/write-to-file", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ data: flagData }),
+      });
+      setIsLoading(false);
+      setReloadData(true);
+    } catch (err: unknown) {
+      window.alert(err);
+      console.error(err);
+    }
+  };
+
+  const flagDataIsSynced =
+    JSON.stringify(flagData) === JSON.stringify(originalFlagData);
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <div className="mb-8 flex flex-auto items-center gap-2">
+        <button
+          className="rounded bg-blue-500 px-8 py-4 font-medium text-white transition-colors duration-200 hover:bg-blue-600"
+          onClick={save}
+        >
+          save
+        </button>
+        {!flagDataIsSynced && <p className="text-red-600">Unsaved changes</p>}
+      </div>
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {flagData &&
+          Object.keys(flagData.flags).map((flagId) => {
+            const flagConfig: FlagConfig = flagData.flags[flagId];
+            return (
+              <FeatureFlag
+                flagId={flagId}
+                key={flagId}
+                flagConfig={flagConfig}
+                updateFlagData={updateFlagData}
+              />
+            );
+          })}
+      </div>
+    </div>
+  );
+};
+export default BasicView;
diff --git a/src/flagd-ui/src/components/basic/DefaultVariantSelect.tsx b/src/flagd-ui/src/components/basic/DefaultVariantSelect.tsx
new file mode 100644
index 0000000000..1b521157dd
--- /dev/null
+++ b/src/flagd-ui/src/components/basic/DefaultVariantSelect.tsx
@@ -0,0 +1,33 @@
+"use client";
+import { FlagConfig } from "@/utils/types";
+import React, { ChangeEvent } from "react";
+
+type FeatureFlagProps = {
+  flagConfig: FlagConfig;
+  selectedVariant: string;
+  handleVariantChange: (event: ChangeEvent<HTMLSelectElement>) => void;
+};
+
+const DefaultVariantSelect = ({
+  flagConfig,
+  selectedVariant,
+  handleVariantChange,
+}: FeatureFlagProps) => {
+  return (
+    <select
+      value={selectedVariant}
+      onChange={handleVariantChange}
+      className="rounded-md bg-gray-700 px-3 py-1 text-sm text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+    >
+      {Object.keys(flagConfig.variants).map((variant: string) => {
+        return (
+          <option value={variant} key={variant}>
+            {variant}
+          </option>
+        );
+      })}
+    </select>
+  );
+};
+
+export default DefaultVariantSelect;
diff --git a/src/flagd-ui/src/components/basic/FeatureFlag.tsx b/src/flagd-ui/src/components/basic/FeatureFlag.tsx
new file mode 100644
index 0000000000..bdefd7b9bc
--- /dev/null
+++ b/src/flagd-ui/src/components/basic/FeatureFlag.tsx
@@ -0,0 +1,47 @@
+"use client";
+import React, { ChangeEvent, useCallback, useEffect } from "react";
+import { useState } from "react";
+import DefaultVariantSelect from "./DefaultVariantSelect";
+import { FlagConfig } from "@/utils/types";
+
+type FeatureFlagProps = {
+  flagId: string;
+  flagConfig: FlagConfig;
+  updateFlagData: (fladId: string, selectedVariant: string) => void;
+};
+
+function FeatureFlag({ flagId, flagConfig, updateFlagData }: FeatureFlagProps) {
+  const [selectedVariant, setSelectedVariant] = useState<string>("");
+
+  useEffect(() => {
+    setSelectedVariant(flagConfig.defaultVariant);
+  }, [flagConfig.defaultVariant]);
+
+  const handleVariantChange = useCallback(
+    (event: ChangeEvent<HTMLSelectElement>) => {
+      setSelectedVariant(event.target.value);
+      updateFlagData(flagId, event.target.value);
+    },
+    [flagId, updateFlagData],
+  );
+
+  return (
+    <div className="mb-4 flex flex-auto flex-col justify-between rounded-md bg-gray-800 p-6 text-gray-300 shadow-md">
+      <div>
+        <div className="mb-4 text-lg font-semibold">{`${flagId}`}</div>
+        <p className="mb-4 text-sm">{`${flagConfig.description}`}</p>
+      </div>
+      <div>
+        <div className="flex items-center justify-between">
+          <DefaultVariantSelect
+            flagConfig={flagConfig}
+            selectedVariant={selectedVariant}
+            handleVariantChange={handleVariantChange}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default FeatureFlag;
diff --git a/src/flagd-ui/src/components/nav/NavBar.tsx b/src/flagd-ui/src/components/nav/NavBar.tsx
new file mode 100644
index 0000000000..16ec65f095
--- /dev/null
+++ b/src/flagd-ui/src/components/nav/NavBar.tsx
@@ -0,0 +1,45 @@
+"use client";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+const NavBar = () => {
+  const pathname = usePathname();
+
+  return (
+    <nav className="bg-gray-800 p-4 sm:p-6">
+      <div className="container mx-auto flex items-center justify-between">
+        <Link href="/" className="text-xl font-bold text-white">
+          Flagd Configurator
+        </Link>
+        <ul className="flex space-x-2 sm:space-x-4">
+          <li>
+            <Link
+              href="/"
+              className={`rounded-md px-3 py-2 text-sm font-medium ${
+                pathname === "/"
+                  ? "bg-blue-700 text-white underline underline-offset-4"
+                  : "text-gray-300 hover:bg-gray-700 hover:text-white"
+              } transition-all duration-200`}
+            >
+              Basic
+            </Link>
+          </li>
+          <li>
+            <Link
+              href="/advanced"
+              className={`rounded-md px-3 py-2 text-sm font-medium ${
+                pathname === "/advanced"
+                  ? "bg-blue-700 text-white underline underline-offset-4"
+                  : "text-gray-300 hover:bg-gray-700 hover:text-white"
+              } transition-all duration-200`}
+            >
+              Advanced
+            </Link>
+          </li>
+        </ul>
+      </div>
+    </nav>
+  );
+};
+
+export default NavBar;
diff --git a/src/flagd-ui/src/components/utils/Spinner.tsx b/src/flagd-ui/src/components/utils/Spinner.tsx
new file mode 100644
index 0000000000..550c3fc89e
--- /dev/null
+++ b/src/flagd-ui/src/components/utils/Spinner.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+const Spinner = () => {
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-900 bg-opacity-50">
+      <div className="h-16 w-16 animate-spin rounded-full border-b-2 border-t-2 border-blue-500"></div>
+    </div>
+  );
+};
+
+export default Spinner;
diff --git a/src/flagd-ui/src/instrumentation.ts b/src/flagd-ui/src/instrumentation.ts
new file mode 100644
index 0000000000..be2393644a
--- /dev/null
+++ b/src/flagd-ui/src/instrumentation.ts
@@ -0,0 +1,5 @@
+import { registerOTel } from "@vercel/otel";
+
+export function register() {
+  registerOTel({ serviceName: "flagd-ui" });
+}
diff --git a/src/flagd-ui/src/types.ts b/src/flagd-ui/src/types.ts
deleted file mode 100644
index 6327e6e7c4..0000000000
--- a/src/flagd-ui/src/types.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-interface FlagConfig {
-  description: string;
-  state: "ENABLED" | "DISABLED";
-  variants: {};
-  defaultVariant: "on" | "off";
-}
-
-type Flags = {
-  [key: string]: FlagConfig;
-};
-
-interface ConfigFile {
-  $schema: string;
-  flags: Flags;
-}
diff --git a/src/flagd-ui/src/utils/types.ts b/src/flagd-ui/src/utils/types.ts
new file mode 100644
index 0000000000..1249257084
--- /dev/null
+++ b/src/flagd-ui/src/utils/types.ts
@@ -0,0 +1,20 @@
+export interface FlagConfig {
+  description: string;
+  state: FlagState;
+  variants: {};
+  defaultVariant: string;
+}
+
+export type Flags = {
+  [key: string]: FlagConfig;
+};
+
+export type ConfigFile = {
+  $schema: string;
+  flags: Flags;
+};
+
+export enum FlagState {
+  ENABLED = "ENABLED",
+  DISABLED = "DISABLED",
+}
diff --git a/src/flagd-ui/tailwind.config.ts b/src/flagd-ui/tailwind.config.ts
index e9a0944e7b..35b6e01809 100644
--- a/src/flagd-ui/tailwind.config.ts
+++ b/src/flagd-ui/tailwind.config.ts
@@ -5,6 +5,7 @@ const config: Config = {
     "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     extend: {
diff --git a/src/frontendproxy/envoy.tmpl.yaml b/src/frontendproxy/envoy.tmpl.yaml
index 8fd57c81dc..dd19fc4bc8 100644
--- a/src/frontendproxy/envoy.tmpl.yaml
+++ b/src/frontendproxy/envoy.tmpl.yaml
@@ -49,6 +49,8 @@ static_resources:
                           route: { cluster: imageprovider, prefix_rewrite: "/" }
                         - match: { prefix: "/flagservice/" }
                           route: { cluster: flagservice, prefix_rewrite: "/", timeout: 0s }
+                        - match: { prefix: "/feature" }
+                          route: { cluster: flagd-ui }
                         - match: { prefix: "/" }
                           route: { cluster: frontend }
                 http_filters:
@@ -130,6 +132,18 @@ static_resources:
                     socket_address:
                       address: ${FLAGD_HOST}
                       port_value: ${FLAGD_PORT}
+    - name: flagd-ui
+      type: STRICT_DNS
+      lb_policy: ROUND_ROBIN
+      load_assignment:
+        cluster_name: flagd-ui
+        endpoints:
+          - lb_endpoints:
+              - endpoint:
+                  address:
+                    socket_address:
+                      address: ${FLAGD_UI_HOST}
+                      port_value: ${FLAGD_UI_PORT}
     - name: loadgen
       type: STRICT_DNS
       lb_policy: ROUND_ROBIN