diff --git a/.gitignore b/.gitignore
index 220a7a0..3d1a42b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,6 @@
 node_modules/
 .DS_Store
 **/yarn-error.log
-docs
\ No newline at end of file
+docs
+
+.claude
\ No newline at end of file
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..c18197d
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,78 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Package Manager
+
+**IMPORTANT: This project uses Yarn (v1.22.19) as its package manager. Always use `yarn` commands instead of `npm` for dependency management and script execution.**
+
+## Development Commands
+
+### Build
+```bash
+# Build all packages in the monorepo
+yarn build
+
+# Type check all packages
+yarn tsc
+```
+
+### Testing
+```bash
+# Run tests in core package
+cd packages/core && yarn test
+
+# Run tests in react package
+cd packages/react && yarn test
+
+# Run tests with coverage in react package
+cd packages/react && yarn coverage
+```
+
+### Linting
+```bash
+# Lint all files from root
+yarn lint
+```
+
+### Documentation
+```bash
+# Generate documentation with TypeDoc
+yarn docs
+```
+
+### Installing Dependencies
+```bash
+# Install all dependencies
+yarn install
+
+# Add a new dependency to a specific package
+cd packages/core && yarn add <package-name>
+cd packages/react && yarn add <package-name>
+```
+
+## Architecture
+
+This is a Lerna monorepo containing two main packages:
+
+1. **landingai** (`packages/core/`) - Core JavaScript library for LandingLens API integration
+   - Provides API client for inference endpoints
+   - Contains utility functions for annotations, colors, and math operations
+   - Exports TypeScript types for predictions and API responses
+
+2. **landingai-react** (`packages/react/`) - React components library
+   - Provides React components for image collection and inference visualization
+   - Uses React Context API for API configuration (`InferenceContext`)
+   - Main components: `PhotoCollector`, `InferenceResult`, and annotation visualizers
+
+### Key Dependencies
+- Build tools: esbuild for bundling, TypeScript for type checking
+- Testing: Jest for core package, Vitest for React package
+- Monorepo management: Lerna with Yarn workspaces
+- React versions supported: 16.8.0+ and 17.0.0
+
+### Code Conventions
+- ESLint configuration requires semicolons and single quotes
+- TypeScript strict mode is enabled
+- Component CSS uses CSS modules (`.module.css` files)
+- All public APIs are exported through package index files
\ No newline at end of file
diff --git a/package.json b/package.json
index ea23ce7..558c6a2 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
   "author": "Lan Tian <tian.lan@landing.ai>",
   "license": "MIT",
   "private": true,
+  "packageManager": "yarn@1.22.19",
   "scripts": {
     "build": "npx lerna run build",
     "tsc": "npx lerna run tsc",
diff --git a/packages/core/lib/utils/annotationUtils.ts b/packages/core/lib/utils/annotationUtils.ts
index f4568d3..878f94f 100644
--- a/packages/core/lib/utils/annotationUtils.ts
+++ b/packages/core/lib/utils/annotationUtils.ts
@@ -1,13 +1,16 @@
 import { Annotation, InferenceResult, ObjectDetectionPrediction, SegmentationPrediction } from '../types';
-import { hexToRgb, palette } from './colorUtils';
+import { hexToRgb, palette as defaultPalette } from './colorUtils';
 
 /**
  * Convert server format predictions into a list of {@link Annotation} for easy rendering
+ * @param inferenceResult - The inference result from the API
+ * @param customPalette - Optional custom color palette to use instead of the default
  */
-export function predictionsToAnnotations(inferenceResult?: InferenceResult | null) {
+export function predictionsToAnnotations(inferenceResult?: InferenceResult | null, customPalette?: string[]) {
   if (!inferenceResult) {
     return [];
   }
+  const palette = customPalette || defaultPalette;
   const { backbonepredictions, predictions } = inferenceResult;
   const predictionsMap = predictions.bitmaps ?? backbonepredictions?.bitmaps ?? backbonepredictions;
   return Object.entries(predictionsMap || []).map(([id, prediction]) => ({
diff --git a/packages/react/lib/components/InferenceResult.tsx b/packages/react/lib/components/InferenceResult.tsx
index 2532d77..a9bdbe8 100644
--- a/packages/react/lib/components/InferenceResult.tsx
+++ b/packages/react/lib/components/InferenceResult.tsx
@@ -15,6 +15,11 @@ export interface InferenceResultProps {
    * Show labels for predicted annotations. Default is false.
    */
   showLabels?: boolean;
+  /**
+   * Custom color palette for annotations. If not provided, uses the default palette.
+   * Should be an array of hex color strings (e.g. ['#FF0000', '#00FF00', '#0000FF']).
+   */
+  customPalette?: string[];
   /**
    * Called when there is predict error.
    */
@@ -29,7 +34,7 @@ export interface InferenceResultProps {
  * Also provides summaries of the results.
  */
 export const InferenceResult: React.FC<InferenceResultProps> = (props) => {
-  const { image, showLabels = false, onPredictError } = props;
+  const { image, showLabels = false, customPalette, onPredictError } = props;
   const apiInfo = useInferenceContext();
 
   const imageRef = useRef<HTMLImageElement>(null);
@@ -37,8 +42,8 @@ export const InferenceResult: React.FC<InferenceResultProps> = (props) => {
   // inference results
   const [inferenceResult, setInferenceResult] = useState<InferenceResultType>();
   const annotations = useMemo(() => {
-    return predictionsToAnnotations(inferenceResult);
-  }, [inferenceResult]);
+    return predictionsToAnnotations(inferenceResult, customPalette);
+  }, [inferenceResult, customPalette]);
   const className = useMemo(() => {
     return inferenceResult?.predictions?.labelName ?? '';
   }, [inferenceResult]);