diff --git a/README.md b/README.md
index a36934d..5179883 100644
--- a/README.md
+++ b/README.md
@@ -1,16 +1,151 @@
-# React + Vite
+# Profen Engineering — React SPA
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+A React single-page application that recreates [profeneng.com](https://profeneng.com) (WordPress + Elementor + Rakar theme) as a fast, portable frontend.
-Currently, two official plugins are available:
+## Architecture
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+```
+src/
+├── main.jsx Entry point — imports all CSS, mounts React
+├── App.jsx Router setup (BrowserRouter, Routes, lazy pages)
+├── components/
+│ ├── Layout.jsx Shared layout wrapper (Header + Footer + Outlet)
+│ ├── Header.jsx Injects raw Elementor header HTML
+│ ├── Footer.jsx Injects raw Elementor footer HTML
+│ └── WhatsAppButton.jsx Custom floating WhatsApp widget (replaces broken plugin)
+├── pages/
+│ ├── Home.jsx Page: /
+│ ├── About.jsx Page: /about
+│ ├── Services.jsx Page: /service
+│ ├── ServiceDetail.jsx Page: /service/:slug
+│ ├── Project.jsx Page: /project
+│ └── Contact.jsx Page: /contact
+├── hooks/
+│ ├── useLayoutInit.js Re-initializes theme JS on route change
+│ └── useNavFix.js Intercepts links for proper SPA routing
+├── data/ Raw Elementor HTML content (fetched from WP)
+│ ├── home-content.html
+│ ├── about-content.html
+│ ├── service-content.html
+│ ├── project-content.html
+│ ├── contact-content.html
+│ ├── layout-header.html
+│ ├── layout-footer.html
+│ └── servicePages.js Maps slugs to service detail page HTML
+├── css/ Page-specific Elementor CSS (extracted from WP)
+│ ├── kit.css Elementor kit CSS (global styles)
+│ ├── theme.css Rakar theme overrides
+│ ├── layout.css Header (elementor-945) + Footer (elementor-128) CSS
+│ ├── pages.css Combined CSS for all 5 main pages
+│ ├── services.css Combined CSS for all 9 service detail pages
+│ └── pages/ Individual page CSS files (development reference)
+│ ├── page-23.css Home page
+│ ├── page-31.css About page
+│ ├── page-32.css Services listing
+│ ├── page-36.css Project page
+│ ├── page-48.css Contact page
+│ └── service-*.css Individual service detail pages
+```
-## React Compiler
+## Strategy: WordPress-in-React
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+This app uses a "render what WordPress built" approach:
-## Expanding the ESLint configuration
+1. **Page content** is raw Elementor HTML from WordPress (`src/data/*.html`)
+2. **Injected via** `dangerouslySetInnerHTML` in page components
+3. **Styling** arrives from two places:
+ - Build-time CSS imports (`src/css/*.css`) — Elementor's page-specific CSS
+ - Runtime `` tags (`index.html`) — Theme stylesheets from `public/wp-content/themes/rakar/`
+4. **Behavior** comes from the original Rakar theme JS loaded via `