Update to help pages

README.md

@@ -26,3 +26,20 @@ To run the application in development mode, you can use the following commands:
    pnpm install
    pnpm start
    ```
+
+
+## Using the Flow
+
+To use the Flow application correctly, a small amount of local configuration is required.
+
+## 1. Select or upload a project
+
+Use the folder browser to select your existing project on your machine.  
+Alternatively, you can clone a repository directly from GitHub to start working immediately.
+
+## 2. Ensure correct project structure
+
+Within the project you want to work on, all Frank!Framework configurations must be located in: `src/main/configurations`
+
+Flow only scans this directory for configurations. If your adapter configurations are stored elsewhere, they will not be detected or loaded by the application.
+Once these steps are completed, Flow will be able to locate your projects and display their adapters in the studio.

src/main/frontend/app/app.css

@@ -127,3 +127,17 @@ body {
   --focus-border: var(--color-brand);
   --separator-border: var(--color-border);
 }
+
+.key {
+  display: inline-block;
+  padding: 2px 6px;
+  margin: 0 2px;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  background: var(--color-backdrop);
+  font-size: 0.85em;
+  font-family: var(--font-inter);
+  line-height: 1.4;
+  white-space: nowrap;
+}
+