Update readme.MD

readme.MD

@@ -1,66 +1,150 @@
-# React Blur Admin
-All credit for the theme goes to [akveo](http://akveo.com/blur-admin/), this is just a React implementation.
+# 🚀 React Blur Admin
 
-Note: This is currently partial implementation of Blur Admin. This repo includes styles from Blur Admin that are required for pages and components to load correctly and the components themselves.
+A **React-based implementation** of the popular [Blur Admin](http://akveo.com/blur-admin/) dashboard theme by **Akveo**.  
+This project brings the sleek UI and reusable components of Blur Admin to React, with modular structure and modern tooling.
 
-Individual pages/demos/layouts can be found in the [React Webpack Skeleton repo](https://github.com/knledg/react-webpack-skeleton).
+> ⚡ Note: This is a **partial implementation** of Blur Admin. It includes the required styles and essential components to get started.
 
-### Build Status
+---
 
-[![CircleCI](https://circleci.com/gh/knledg/react-blur-admin/tree/master.svg?style=svg)](https://circleci.com/gh/knledg/react-blur-admin/tree/master)
+## 📦 Overview
 
-### Currently Implemented
+React Blur Admin provides reusable UI components and layouts inspired by Blur Admin.  
+You can use them to build modern, responsive admin dashboards quickly.
 
-- Text Inputs
-- Buttons
-- Editable Fields
-- Loading Spinner
-- Tables (not including smart tables)
-- Tabs
-- Switches
-- Select Dropdowns
-- Progress Bars
-- Panels
-- Pages
-- Textareas
-- Pagination (diverged from Blur's implementation slightly for additional flexibility)
-- Notifications
-- Alerts
+### ✅ Currently Implemented
 
-### Needs Implementation
+- Text Inputs  
+- Buttons  
+- Editable Fields  
+- Loading Spinner  
+- Tables (basic)  
+- Tabs  
+- Switches  
+- Select Dropdowns  
+- Progress Bars  
+- Panels  
+- Pages  
+- Textareas  
+- Pagination *(slightly customized for flexibility)*  
+- Notifications  
+- Alerts  
 
-- Accordions
-- Sliders
-- Searchable table columns
-- Tags Inputs
+### 🧩 Coming Soon
 
-## Semver
+- Accordions  
+- Sliders  
+- Searchable Table Columns  
+- Tag Inputs  
 
-Before the v1.0.0 release, a minor update will represent breaking changes and a patch will represent feature enhancements or bug fixes.
+---
 
-## Contributing
+## 🧠 How to Use
 
-This is an active project and we'd love your help! Please submit small pull requests. You can make sure tests and lint passes by running `npm run lint && npm run test` before committing.
+### 1️⃣ Clone the Repository
+```bash
+git clone https://github.com/knledg/react-blur-admin.git
+cd react-blur-admin
+```
 
-You can also add the `.git/hooks/pre-push` with the following:
+### 2️⃣ Install Dependencies
+Make sure you have Node.js (v16+) installed.
 
+```bash
+npm install
 ```
-#!/usr/bin/env bash
 
+### 3️⃣ Run the Project
+```bash
+npm start
+```
+This will start the development server.  
+Visit [http://localhost:3000](http://localhost:3000) to view it in your browser.
+
+---
+
+## 🧱 Example Usage
+
+We provide a demo layout using these components in the  
+👉 [React Webpack Skeleton Repo](https://github.com/knledg/react-webpack-skeleton)
+
+You can explore component usage there or check the source code in the `/src/components` directory.
+
+---
+
+## 🧰 Dependencies
+
+This project depends on:
+
+- **Bootstrap CSS**  
+- **Bootstrap-Select CSS**  
+- **Bootstrap-Switch CSS**  
+- **Blur Admin CSS**
+- **EventEmitter** (in `lib/event-bus` for global notifications)
+- **Flexbox Layouts** (for responsive grids)
+
+---
+
+## 🔁 Versioning (SemVer)
+
+Before reaching `v1.0.0`:
+
+- **Minor Updates** → may include breaking changes  
+- **Patch Updates** → bug fixes or small improvements  
+
+---
+
+## 🤝 Contributing
+
+We welcome contributions from the community! 🎉  
+
+### Steps:
+1. Fork this repo  
+2. Create a new branch:  
+   ```bash
+   git checkout -b feature/your-feature-name
+   ```
+3. Make your changes  
+4. Run lint and tests before committing:  
+   ```bash
+   npm run lint && npm run test
+   ```
+5. Submit a Pull Request  
+
+### Optional: Pre-push Hook
+
+You can add a **Git pre-push hook** to ensure linting and tests pass automatically:
+
+Create `.git/hooks/pre-push` file:
+```bash
+#!/usr/bin/env bash
 npm run lint && npm run test
 ```
+Make it executable:
+```bash
+chmod ugo+x .git/hooks/pre-push
+```
+
+---
+
+## 🧱 Build Status
+
+[![CircleCI](https://circleci.com/gh/knledg/react-blur-admin/tree/master.svg?style=svg)](https://circleci.com/gh/knledg/react-blur-admin/tree/master)
+
+---
+
+## 📚 Resources
 
-And making it executable with `chmod ugo+x .git/hooks/pre-push`
+- [Blur Admin Theme (Akveo)](http://akveo.com/blur-admin/)
+- [React Webpack Skeleton](https://github.com/knledg/react-webpack-skeleton)
 
-## Example Usage
+---
 
-A React Webpack Skeleton implementing the layout for React Blur Admin and using it's components will be uploaded and linked shortly. You can see how each component is implemented by looking at the source code for each of the demo pages.
+## 💡 Summary
 
-## Dependencies
-- Bootstrap CSS
-- Bootstrap-Select CSS
-- Bootstrap-Switch CSS
-- Blur CSS
-- EventEmitter implemented in lib/event-bus so that notifications can listen for a new notification from anywhere without any specific implementation of flux
-- Utilizes Flexbox for columns/rows
+React Blur Admin gives you:
+- Modern admin UI components
+- Simple integration with React apps
+- Active development and open contribution
 
+> Perfect for building dashboards, analytics panels, or admin interfaces in React!