diff --git a/docs/client-packages.md b/docs/client-packages.md
index a535cda..84235f4 100644
--- a/docs/client-packages.md
+++ b/docs/client-packages.md
@@ -10,24 +10,32 @@ The OER Aggregator provides two packages for integrating OER resources into your
 The `@edufeed-org/oer-finder-api-client` package provides a type-safe TypeScript client for interacting with the OER Aggregator API. It's automatically generated from the OpenAPI specification, ensuring type safety and up-to-date API compatibility.
 
 ### Installation
+You can add the plugin either by using the already built version from GitHub's package registry (recommended) or hard link the package from git:
 
 ```bash
-npm install github:edufeed-org/oer-finder-plugin#packages/oer-finder-api-client
-# or
-yarn add github:edufeed-org/oer-finder-plugin#packages/oer-finder-api-client
-# or
-pnpm add github:edufeed-org/oer-finder-plugin#packages/oer-finder-api-client
+@edufeed-org:registry=https://npm.pkg.github.com
+//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}
 ```
+Then, configure an env variable `GITHUB_TOKEN` and run:
+
+```pnpm add @edufeed-org/oer-finder-api-client```
 
 OR
 
 ```bash
-@edufeed-org:registry=https://npm.pkg.github.com
-//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}
+pnpm add "@edufeed-org/oer-finder-api-client": "github:edufeed-org/oer-finder-plugin#main&path:packages/oer-finder-api-client"
+```
+
+You might also need to add this to your pnpm config in package.json:
+
+```bash
+"pnpm": {
+  "onlyBuiltDependencies": [
+    "@edufeed-org/oer-finder-api-client"
+  ]
+}
 ```
-Then, configure an env variable `GITHUB_TOKEN` and run:
 
-```pnpm add @edufeed-org/oer-finder-plugin-api-client```
 
 ### Basic Usage
 
@@ -140,7 +148,7 @@ The `@edufeed-org/oer-finder-plugin` package provides web components for integra
 
 ### Installation
 
-Add a .npmrc file to your project with this content:
+You can add the plugin either by using the already built version from GitHub's package registry (recommended) or hard link the package from git:
 
 ```bash
 @edufeed-org:registry=https://npm.pkg.github.com
@@ -150,6 +158,27 @@ Then, configure an env variable `GITHUB_TOKEN` and run:
 
 ```pnpm add @edufeed-org/oer-finder-plugin```
 
+OR
+
+```bash
+pnpm add "@edufeed-org/oer-finder-plugin": "github:edufeed-org/oer-finder-plugin#main&path:packages/oer-finder-plugin",
+```
+
+And add an overwrite for the api client, otherwise the workspace reference will fail:
+
+
+```bash
+"pnpm": {
+  "overrides": {
+    "@edufeed-org/oer-finder-api-client": "github:edufeed-org/oer-finder-plugin#main&path:packages/oer-finder-api-client"
+  },
+  "onlyBuiltDependencies": [
+    "@edufeed-org/oer-finder-plugin",
+    "@edufeed-org/oer-finder-api-client"
+  ],
+}
+```
+
 
 ### Available Components
 
diff --git a/packages/oer-finder-api-client/package.json b/packages/oer-finder-api-client/package.json
index 45f92f6..ef92d85 100644
--- a/packages/oer-finder-api-client/package.json
+++ b/packages/oer-finder-api-client/package.json
@@ -30,7 +30,8 @@
     "build": "pnpm run generate:types && vite build && tsc --emitDeclarationOnly && pnpm run postbuild",
     "build:full": "pnpm run generate && vite build && tsc --emitDeclarationOnly && pnpm run postbuild",
     "postbuild": "cp dist/src/index.d.ts dist/index.d.ts && cp dist/src/index.d.ts.map dist/index.d.ts.map 2>/dev/null || true",
-    "type-check": "tsc --noEmit"
+    "type-check": "tsc --noEmit",
+    "prepare": "pnpm build"
   },
   "dependencies": {
     "openapi-fetch": "^0.13.3"
diff --git a/packages/oer-finder-plugin/README.md b/packages/oer-finder-plugin/README.md
index c370ea1..1b6dc0f 100644
--- a/packages/oer-finder-plugin/README.md
+++ b/packages/oer-finder-plugin/README.md
@@ -196,6 +196,7 @@ oer-list oer-card {
   /* Background colors */
   --background-card: #ffffff;
   --background-form: #f8f9fa;
+  --background-input: #ffffff;
 
   /* Text colors */
   --text-primary: #2d3748;
@@ -212,10 +213,22 @@ oer-list oer-card {
 | `--primary-hover-color` | Hover state for primary elements | `#5568d3` |
 | `--secondary-color` | Secondary accent color (gradients) | `#764ba2` |
 | `--background-card` | Card background color | `#ffffff` |
-| `--background-form` | Form/input background color | `#f8f9fa` |
+| `--background-form` | Form container background color | `#f8f9fa` |
+| `--background-input` | Input and select element background color | `#ffffff` |
+| `--background-muted` | Muted background (e.g., thumbnail placeholder) | `#f5f5f5` |
 | `--text-primary` | Main text color | `#2d3748` |
 | `--text-secondary` | Secondary text color | `#4a5568` |
 | `--text-muted` | Muted/disabled text color | `#718096` |
+| `--text-disabled` | Disabled element text color | `rgba(0, 0, 0, 0.3)` |
+| `--border-color` | Border color for containers and cards | `rgba(0, 0, 0, 0.1)` |
+| `--border-color-subtle` | Subtle border color for separators | `rgba(0, 0, 0, 0.05)` |
+| `--input-border-color` | Border color for input/select elements | `rgba(0, 0, 0, 0.15)` |
+| `--button-secondary-bg` | Background for secondary buttons | `rgba(0, 0, 0, 0.05)` |
+| `--button-secondary-hover-bg` | Hover background for secondary buttons | `rgba(0, 0, 0, 0.1)` |
+| `--shadow-color` | Box shadow color for cards | `rgba(0, 0, 0, 0.05)` |
+| `--shadow-color-hover` | Hover box shadow color for cards | `rgba(0, 0, 0, 0.15)` |
+| `--spinner-track-color` | Loading spinner track color | `#f3f3f3` |
+| `--error-color` | Error message text color | `#d32f2f` |
 
 ### Dark Theme Example
 
@@ -223,14 +236,39 @@ oer-list oer-card {
 oer-search,
 oer-list,
 oer-list oer-card {
+  /* Primary colors */
   --primary-color: #7c3aed;
   --primary-hover-color: #6d28d9;
   --secondary-color: #8b5cf6;
+
+  /* Background colors */
   --background-card: #2d3748;
   --background-form: #374151;
+  --background-input: #1f2937;
+  --background-muted: #4a5568;
+
+  /* Text colors */
   --text-primary: #f7fafc;
   --text-secondary: #e2e8f0;
   --text-muted: #a0aec0;
+  --text-disabled: rgba(255, 255, 255, 0.3);
+
+  /* Border colors (use light tints for dark backgrounds) */
+  --border-color: rgba(255, 255, 255, 0.1);
+  --border-color-subtle: rgba(255, 255, 255, 0.05);
+  --input-border-color: rgba(255, 255, 255, 0.15);
+
+  /* Button colors */
+  --button-secondary-bg: rgba(255, 255, 255, 0.1);
+  --button-secondary-hover-bg: rgba(255, 255, 255, 0.15);
+
+  /* Shadow colors (use darker shadows or light glows) */
+  --shadow-color: rgba(0, 0, 0, 0.3);
+  --shadow-color-hover: rgba(0, 0, 0, 0.5);
+
+  /* Utility colors */
+  --spinner-track-color: #4a5568;
+  --error-color: #fc8181;
 }
 ```
 
diff --git a/packages/oer-finder-plugin/package.json b/packages/oer-finder-plugin/package.json
index 8f1c932..2778cde 100644
--- a/packages/oer-finder-plugin/package.json
+++ b/packages/oer-finder-plugin/package.json
@@ -25,6 +25,7 @@
   ],
   "scripts": {
     "build": "vite build && tsc --emitDeclarationOnly",
+    "prepare": "pnpm build",
     "type-check": "tsc --noEmit",
     "test": "vitest run",
     "test:watch": "vitest",
diff --git a/packages/oer-finder-plugin/src/index.ts b/packages/oer-finder-plugin/src/index.ts
index f50cd08..8364e42 100644
--- a/packages/oer-finder-plugin/src/index.ts
+++ b/packages/oer-finder-plugin/src/index.ts
@@ -20,6 +20,7 @@
  *   --secondary-color: #764ba2;
  *   --background-card: #ffffff;
  *   --background-form: #f8f9fa;
+ *   --background-input: #ffffff;
  *   --text-primary: #2d3748;
  *   --text-secondary: #4a5568;
  *   --text-muted: #718096;
diff --git a/packages/oer-finder-plugin/src/oer-card/styles.ts b/packages/oer-finder-plugin/src/oer-card/styles.ts
index 516ec89..7433446 100644
--- a/packages/oer-finder-plugin/src/oer-card/styles.ts
+++ b/packages/oer-finder-plugin/src/oer-card/styles.ts
@@ -8,11 +8,11 @@ export const styles = css`
   }
 
   .card {
-    border: 1px solid rgba(0, 0, 0, 0.1);
+    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
     border-radius: 8px;
     overflow: hidden;
     background: var(--background-card);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    box-shadow: 0 2px 4px var(--shadow-color, rgba(0, 0, 0, 0.05));
     transition:
       box-shadow 0.3s ease,
       transform 0.3s ease;
@@ -22,7 +22,7 @@ export const styles = css`
   }
 
   .card:hover {
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 8px 16px var(--shadow-color-hover, rgba(0, 0, 0, 0.15));
     transform: translateY(-2px);
   }
 
@@ -30,7 +30,7 @@ export const styles = css`
     width: 100%;
     aspect-ratio: 16 / 9;
     overflow: hidden;
-    background: #f5f5f5;
+    background: var(--background-muted, #f5f5f5);
     position: relative;
     cursor: pointer;
   }
@@ -119,7 +119,7 @@ export const styles = css`
   }
 
   .keyword {
-    background: rgba(0, 0, 0, 0.05);
+    background: var(--button-secondary-bg, rgba(0, 0, 0, 0.05));
     padding: 4px 8px;
     border-radius: 4px;
     font-size: 11px;
@@ -132,7 +132,7 @@ export const styles = css`
     line-height: 1.4;
     margin-top: 4px;
     padding-top: 8px;
-    border-top: 1px solid rgba(0, 0, 0, 0.05);
+    border-top: 1px solid var(--border-color-subtle, rgba(0, 0, 0, 0.05));
   }
 
   .no-data {
diff --git a/packages/oer-finder-plugin/src/oer-list/styles.ts b/packages/oer-finder-plugin/src/oer-list/styles.ts
index d280a52..22d66cb 100644
--- a/packages/oer-finder-plugin/src/oer-list/styles.ts
+++ b/packages/oer-finder-plugin/src/oer-list/styles.ts
@@ -53,7 +53,7 @@ export const styles = css`
     display: inline-block;
     width: 40px;
     height: 40px;
-    border: 4px solid #f3f3f3;
+    border: 4px solid var(--spinner-track-color, #f3f3f3);
     border-top: 4px solid var(--primary-color);
     border-radius: 50%;
     animation: spin 1s linear infinite;
@@ -72,7 +72,7 @@ export const styles = css`
   .error {
     text-align: center;
     padding: 48px 24px;
-    color: #d32f2f;
+    color: var(--error-color, #d32f2f);
   }
 
   .error-icon {
diff --git a/packages/oer-finder-plugin/src/oer-search/styles.ts b/packages/oer-finder-plugin/src/oer-search/styles.ts
index bf6c4ca..4d0bbd2 100644
--- a/packages/oer-finder-plugin/src/oer-search/styles.ts
+++ b/packages/oer-finder-plugin/src/oer-search/styles.ts
@@ -24,7 +24,7 @@ export const styles = css`
 
   .search-container {
     background: var(--background-form);
-    border: 1px solid rgba(0, 0, 0, 0.1);
+    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
     border-radius: 8px;
     padding: 24px;
     margin-bottom: 24px;
@@ -65,13 +65,13 @@ export const styles = css`
   select {
     width: 100%;
     padding: 10px 12px;
-    border: 1px solid rgba(0, 0, 0, 0.15);
+    border: 1px solid var(--input-border-color, rgba(0, 0, 0, 0.15));
     border-radius: 6px;
     font-size: 14px;
     font-family: inherit;
     transition: border-color 0.2s ease;
     box-sizing: border-box;
-    background: white;
+    background: var(--background-input, white);
     color: var(--text-primary);
   }
 
@@ -114,13 +114,13 @@ export const styles = css`
   }
 
   .clear-button {
-    background: rgba(0, 0, 0, 0.05);
+    background: var(--button-secondary-bg, rgba(0, 0, 0, 0.05));
     color: var(--text-secondary);
     flex: 0 0 auto;
   }
 
   .clear-button:hover {
-    background: rgba(0, 0, 0, 0.1);
+    background: var(--button-secondary-hover-bg, rgba(0, 0, 0, 0.1));
   }
 
   .pagination {
@@ -129,7 +129,7 @@ export const styles = css`
     align-items: center;
     padding: 16px;
     background: var(--background-form);
-    border: 1px solid rgba(0, 0, 0, 0.1);
+    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
     border-radius: 8px;
     margin-top: 24px;
     gap: 12px;
@@ -155,19 +155,19 @@ export const styles = css`
 
   .page-button {
     padding: 8px 12px;
-    background: rgba(0, 0, 0, 0.05);
+    background: var(--button-secondary-bg, rgba(0, 0, 0, 0.05));
     color: var(--text-primary);
     min-width: 40px;
     flex-shrink: 0;
   }
 
   .page-button:hover:not(:disabled) {
-    background: rgba(0, 0, 0, 0.1);
+    background: var(--button-secondary-hover-bg, rgba(0, 0, 0, 0.1));
   }
 
   .page-button:disabled {
-    background: rgba(0, 0, 0, 0.05);
-    color: rgba(0, 0, 0, 0.3);
+    background: var(--button-secondary-bg, rgba(0, 0, 0, 0.05));
+    color: var(--text-disabled, rgba(0, 0, 0, 0.3));
     cursor: not-allowed;
   }
 
diff --git a/packages/oer-finder-plugin/src/pagination/styles.ts b/packages/oer-finder-plugin/src/pagination/styles.ts
index 70c323f..6155be2 100644
--- a/packages/oer-finder-plugin/src/pagination/styles.ts
+++ b/packages/oer-finder-plugin/src/pagination/styles.ts
@@ -12,7 +12,7 @@ export const styles = css`
     align-items: center;
     padding: 16px;
     background: var(--background-form);
-    border: 1px solid rgba(0, 0, 0, 0.1);
+    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
     border-radius: 8px;
     gap: 12px;
     flex-wrap: wrap;
@@ -37,7 +37,7 @@ export const styles = css`
 
   .page-button {
     padding: 8px 12px;
-    background: rgba(0, 0, 0, 0.05);
+    background: var(--button-secondary-bg, rgba(0, 0, 0, 0.05));
     color: var(--text-primary);
     min-width: 40px;
     flex-shrink: 0;
@@ -51,12 +51,12 @@ export const styles = css`
   }
 
   .page-button:hover:not(:disabled) {
-    background: rgba(0, 0, 0, 0.1);
+    background: var(--button-secondary-hover-bg, rgba(0, 0, 0, 0.1));
   }
 
   .page-button:disabled {
-    background: rgba(0, 0, 0, 0.05);
-    color: rgba(0, 0, 0, 0.3);
+    background: var(--button-secondary-bg, rgba(0, 0, 0, 0.05));
+    color: var(--text-disabled, rgba(0, 0, 0, 0.3));
     cursor: not-allowed;
   }