diff --git a/README.md b/README.md
index 2164a88b..b1c6a8ce 100644
--- a/README.md
+++ b/README.md
@@ -1,79 +1,353 @@
# @devmehq/react-qr-code
-Simple & Advanced React component to generate [QR codes](http://en.wikipedia.org/wiki/QR_code)
-
+๐ฏ Simple & Advanced React component to generate [QR codes](http://en.wikipedia.org/wiki/QR_code) with custom styling, multiple render formats, and image embedding support.
[](https://npm.im/@devmehq/react-qr-code)
[](https://github.com/devmehq/react-qr-code/actions)
[](https://www.npmjs.com/package/@devmehq/react-qr-code)
+[](https://bundlephobia.com/package/@devmehq/react-qr-code)
+[](https://github.com/devmehq/react-qr-code/blob/master/LICENSE.md)
[](https://unpkg.com/browse/@devmehq/react-qr-code@latest/)
[](https://codesandbox.io/s/react-qr-code-demo-ccho5l?fontsize=14&hidenavigation=1&theme=dark)
-## Installation
-```npm
+## โจ Features
+
+- ๐จ **Customizable**: Colors, sizes, margins, and styles
+- ๐ผ๏ธ **Multiple Formats**: Render as SVG or Canvas
+- ๐ฑ **Responsive**: Scales perfectly on all devices
+- ๐๏ธ **Image Embedding**: Add logos or images to QR codes
+- ๐ก๏ธ **Error Correction**: Four levels (L, M, Q, H)
+- ๐ฆ **Lightweight**: Zero dependencies, small bundle size
+- ๐ง **TypeScript**: Full TypeScript support
+- โก **Performance**: Optimized rendering with React hooks
+
+## ๐ฆ Installation
+
+```bash
+# Using npm
npm install @devmehq/react-qr-code
+
+# Using yarn
+yarn add @devmehq/react-qr-code
+
+# Using pnpm
+pnpm add @devmehq/react-qr-code
+```
+
+## ๐ Quick Start
+
+### Basic Usage
+
+```tsx
+import React from 'react'
+import { ReactQrCode } from '@devmehq/react-qr-code'
+
+function App() {
+ return
+}
+```
+
+### With Custom Styling
+
+```tsx
+import React from 'react'
+import { ReactQrCode } from '@devmehq/react-qr-code'
+
+function StyledQRCode() {
+ return (
+
+ )
+}
+```
+
+### Canvas Rendering
+
+```tsx
+import React from 'react'
+import { ReactQrCode } from '@devmehq/react-qr-code'
+
+function CanvasQRCode() {
+ return (
+
+ )
+}
+```
+
+### With Logo/Image
+
+```tsx
+import React from 'react'
+import { ReactQrCode } from '@devmehq/react-qr-code'
+
+function QRCodeWithLogo() {
+ return (
+
+ )
+}
+```
+
+## ๐ API Reference
+
+### ReactQrCode Props
+
+| Prop | Type | Default | Description |
+| ------------ | -------------------------- | ------------ | --------------------------------------- |
+| `value` | `string` | **Required** | The value to encode in the QR code |
+| `renderAs` | `'svg' \| 'canvas'` | `'svg'` | Render format (SVG or Canvas) |
+| `size` | `number` | `256` | Size of the QR code in pixels |
+| `bgColor` | `string` | `'#ffffff'` | Background color (CSS color value) |
+| `fgColor` | `string` | `'#000000'` | Foreground color (CSS color value) |
+| `level` | `'L' \| 'M' \| 'Q' \| 'H'` | `'L'` | Error correction level |
+| `marginSize` | `number` | `0` | Margin around the QR code in pixels |
+| `style` | `CSSProperties` | `undefined` | React style object |
+| `className` | `string` | `undefined` | CSS class name |
+| `title` | `string` | `undefined` | Title for SVG accessibility |
+| `id` | `string` | `undefined` | HTML id attribute |
+| `images` | `ReactQrCodeImageProps[]` | `undefined` | Array of images to embed in the QR code |
+
+### ReactQrCodeImageProps
+
+| Property | Type | Default | Description |
+| ---------- | --------- | -------------- | -------------------------------------------- |
+| `src` | `string` | **Required** | Image source URL |
+| `x` | `number` | Auto-centered | X position of the image |
+| `y` | `number` | Auto-centered | Y position of the image |
+| `height` | `number` | 10% of QR size | Height of the image |
+| `width` | `number` | 10% of QR size | Width of the image |
+| `excavate` | `boolean` | `false` | Whether to clear QR modules behind the image |
+
+### Error Correction Levels
+
+| Level | Error Correction | Data Capacity |
+| ----- | ---------------- | ------------- |
+| `L` | ~7% | High |
+| `M` | ~15% | Medium |
+| `Q` | ~25% | Medium-Low |
+| `H` | ~30% | Low |
+
+## ๐จ Styling & Customization
+
+### Responsive Design
+
+```tsx
+import React from 'react'
+import { ReactQrCode } from '@devmehq/react-qr-code'
+
+function ResponsiveQRCode() {
+ return (
+
+
+
+ )
+}
```
-```yarn
-yarn install @devmehq/react-qr-code
+### Dark Mode Support
+
+```tsx
+import React from 'react'
+import { ReactQrCode } from '@devmehq/react-qr-code'
+
+function DarkModeQRCode({ isDarkMode }) {
+ return (
+
+ )
+}
```
-## Usage
+### Custom CSS Classes
-```typescript
-import React from 'react';
-import { ReactQrCode } from '@devmehq/react-qr-code';
+```tsx
+import React from 'react'
+import { ReactQrCode } from '@devmehq/react-qr-code'
+import './styles.css'
+
+function CustomStyledQRCode() {
+ return (
+
+ )
+}
+```
-
+```css
+/* styles.css */
+.qr-code-custom {
+ border-radius: 16px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ padding: 16px;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
```
-```js
-var React = require('react');
-var { ReactQrCode } = require('@devmehq/react-qr-code');
+**Note:** When using `renderAs="canvas"` on high-density displays, the canvas is scaled for pixel-perfect rendering. Custom styles are merged with internal scaling styles.
-
+## ๐ก Use Cases
+
+### WiFi Password Sharing
+
+```tsx
+function WiFiQRCode({ ssid, password, security = 'WPA' }) {
+ const wifiString = `WIFI:T:${security};S:${ssid};P:${password};;`
+
+ return
+}
```
-## Available Props
+### Contact Information (vCard)
-| prop | type | default value |
-|--------------|------------------------------|---------------|
-| `value` | `string` | |
-| `renderAs` | `string` (`'canvas' 'svg'`) | `'canvas'` |
-| `size` | `number` | `128` |
-| `bgColor` | `string` (CSS color) | `"#FFFFFF"` |
-| `fgColor` | `string` (CSS color) | `"#000000"` |
-| `level` | `string` (`'L' 'M' 'Q' 'H'`) | `'L'` |
-| `marginSize` | `number` | `false` |
-| `images` | `array` (see below) | |
+```tsx
+function ContactQRCode({ name, phone, email }) {
+ const vCard = `BEGIN:VCARD
+VERSION:3.0
+FN:${name}
+TEL:${phone}
+EMAIL:${email}
+END:VCARD`
-### `imageSettings`
+ return
+}
+```
-| field | type | default value |
-|------------|-----------|-------------------|
-| `src` | `string` | |
-| `x` | `number` | none, will center |
-| `y` | `number` | none, will center |
-| `height` | `number` | 10% of `size` |
-| `width` | `number` | 10% of `size` |
-| `excavate` | `boolean` | `false` |
+### Two-Factor Authentication
-## Custom Styles
+```tsx
+function TwoFactorQRCode({ secret, issuer, accountName }) {
+ const otpauth = `otpauth://totp/${issuer}:${accountName}?secret=${secret}&issuer=${issuer}`
-`@devmehq/react-qr-code` will pass through any additional props to the underlying DOM node (`