diff --git a/README.md b/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..3e2f4a9e5e8056444e4de9b2ef9c535263b344f1
--- /dev/null
+++ b/README.md
@@ -0,0 +1,71 @@
+
+
+# Code Frame Generator
+
+A web-based tool for generating beautifully framed code snippets with customizable themes, backgrounds, and export options.
+
+![Screenshot](.github/screenshot.png)
+
+## Features
+
+- Live code editing with Markdown and HTML preview
+- Customizable color themes and window styles
+- Social media icon integration
+- Export to PNG with high quality
+- Preset management for quick reuse
+- Particle background effects
+
+## Technologies Used
+
+- Vue 3 with Nuxt 3
+- Tailwind CSS
+- Shiki - for syntax highlighting
+- Drizzle ORM for data handling
+- TypeScript for type safety
+
+## Installation & Setup
+
+```bash
+# Clone the repository
+git clone <your-repo-url>
+cd <repo-directory>
+
+# Install dependencies
+pnpm install
+
+# Start development server
+pnpm dev
+
+# Build for production
+pnpm build
+```
+
+> Ensure you have [Node.js](https://nodejs.org) and [pnpm](https://pnpm.io) installed before proceeding.
+
+## Usage
+
+1. Open the app in your browser
+2. Paste or write your code in the editor
+3. Choose a theme, background, and customize window settings
+4. Adjust text and color settings as desired
+5. Click "Export to PNG" to download your framed code image
+
+## Contributing
+
+Contributions are welcome! To contribute:
+
+1. Fork the repository
+2. Create a new branch (`git checkout -b feature/new-feature`)
+3. Commit your changes (`git commit -m 'Add new feature'`)
+4. Push to the branch (`git push origin feature/new-feature`)
+5. Open a Pull Request
+
+## License
+
+This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
+
+## Credits
+
+- Icons powered by [Iconify](https://icon-sets.iconify.design/)
+- Font: Geist Mono & JetBrains Mono
+- Powered by Vercel & Nuxt 3
\ No newline at end of file