diff --git a/README.md b/README.md
index 80469f1..4131fbc 100644
--- a/README.md
+++ b/README.md
@@ -19,109 +19,59 @@ Zalando has a fantastic description [on their website](https://opensource.zaland
It serves and scales well for teams and companies of all sizes that want to have alignment across dozens of technologies and visualize it in a simple way.
+## Packages
+
+This is a monorepo containing three packages:
+
+| Package | Description |
+|---------|-------------|
+| [`tech-radar-editor`](./packages/tech-radar-editor) | The core web component (``) |
+| [`tech-radar-editor-backend`](./packages/tech-radar-editor-backend) | Backstage backend plugin for Azure DevOps integration |
+| [`tech-radar-editor-backstage`](./packages/tech-radar-editor-backstage) | Backstage frontend wrapper component |
+
## Include the Component in Spotify Backstage
-### Install
+### Quick Start
-For either simple or advanced installations, you'll need to add the dependency using Yarn:
-
-From your Backstage root directory:
+1. Install packages:
```bash
-yarn --cwd packages/app add tech-radar-editor
+# From your Backstage root directory
+yarn --cwd packages/app add tech-radar-editor-backstage
+yarn --cwd packages/backend add tech-radar-editor-backend
```
-### Configuration
-
-Modify your app routes to include the Router component exported from the tech radar, for example:
-
-```tsx
-// In packages/app/src/App.tsx
-import 'tech-radar-editor';
-
-const routes = (
-
- {/* ...other routes */}
- }
- />
-```
-
-#### How to Use This Component in Backstage with a Config-Based URL
-
-##### Configure the URL in app-config.yaml
-
-In your Backstage `app-config.yaml`, add a config key for the editor’s JSON URL. For example:
+2. Add config to `app-config.yaml`:
```yaml
-techRadar:
- url: "https://example.org/path/to/tech-radar.json"
+techRadarEditor:
+ organization: my-org
+ project: my-project
+ repository: my-repo
+ filePath: /tech-radar.json # optional, defaults to /tech-radar.json
+ targetBranch: main # optional, defaults to main
```
-Adjust the key and value to suit your environment.
+3. Register the backend plugin in `packages/backend/src/index.ts`:
-##### Set up the type for the config value
-
-In your `package.json`, add:
-
-```json
-{
- // ...
- "files": [
- // ...
- "config.d.ts"
- ],
- "configSchema": "config.d.ts"
-}
+```ts
+backend.add(import('tech-radar-editor-backend'));
```
-You'll need to create a type definition for the config value in your Backstage app. In your `config.d.ts` file, add:
-
-````ts
-export interface Config {
- techRadar: {
- /**
- * Frontend URL
- * @visibility frontend
- */
- url: string;
- };
-}
-```
-
-##### Create a small React wrapper in your Backstage app
-
-Somewhere in your Backstage app (for example, in `App.tsx` or in a separate `TechRadarEditorWrapper.tsx` file), create a tiny wrapper component to read the config and pass that URL to the `` web component as an attribute:
+4. Add the route in your `packages/app/src/App.tsx`:
```tsx
-import React from "react";
-import { useApi, configApiRef } from "@backstage/core-plugin-api";
+import { TechRadarEditorPage } from 'tech-radar-editor-backstage';
-// Import the custom element so that React recognizes
-import "tech-radar-editor";
-
-export const TechRadarEditorWrapper = () => {
- const configApi = useApi(configApiRef);
- const dataUrl = configApi.getOptionalString("techRadar.url") ?? "";
-
- return ;
-};
-````
-
-##### Add a route for your Tech Radar Editor
-
-In your Backstage `App.tsx` (or wherever you define your routes), import that wrapper and point a route to it:
-
-```tsx
-} />
+// In your routes:
+} />
```
-Now when you visit `/tech-radar-editor`, the `` component will automatically fetch the JSON from your configured URL.
+That's it! The editor will fetch data from your Azure DevOps repository and allow users to submit changes as pull requests.
-## Consume the Component in Plain JavaScript
+## Use the Web Component Standalone
-Include the component in an HTML file:
+### In Plain HTML
```html
@@ -137,64 +87,76 @@ Include the component in an HTML file: