diff --git a/Project-Structure.md b/Project-Structure.md
new file mode 100644
index 0000000..a30dc64
--- /dev/null
+++ b/Project-Structure.md
@@ -0,0 +1,104 @@
+# Project Structure Overview
+
+The project is organized into the following directories and files to maintain scalability and readability. Below is a detailed explanation to help contributors understand the structure and where to add new features or make modifications.
+
+## `kunafa-dashboard-vue/`
+├── css/ # Contains global CSS files
+├── images/ # Stores static images used in the project
+├── node_modules/ # Installed dependencies (generated by npm/yarn)
+├── public/ # Public assets served directly
+├── src/
+│ ├── App.vue # Root Vue component for the application
+│ ├── components/ # Reusable Vue components (e.g., buttons, modals, forms)
+│ ├── constants/ # Static constant values used throughout the app
+│ ├── dummy-data/ # Mock data for testing or prototyping
+│ ├── formatters/ # Utility functions for formatting data (e.g., dates, numbers)
+│ ├── layouts/ # Layout templates for pages (e.g., AdminLayout, AuthLayout)
+│ ├── libs/ # External libraries or custom helper modules
+│ ├── main.js # Entry point of the application
+│ ├── plugins/ # Vue plugins and third-party integrations
+│ ├── router/ # Vue Router configuration for app navigation
+│ ├── services/ # API service files for HTTP requests
+│ ├── utils/ # General utility functions and helpers
+│ └── views/ # Page-level Vue components (e.g., Dashboard, Login, Settings)
+├── .git/ # Git repository files (hidden)
+├── .gitignore # Specifies files and folders to ignore in Git
+├── CHANGELOG.md # A log of changes made in each version
+├── index.html # Main HTML entry file for the project
+├── package-lock.json # Locks dependency versions for consistency
+├── package.json # Defines project dependencies and scripts
+├── postcss.config.cjs # PostCSS configuration file for processing CSS
+├── README.md # Project documentation for users and contributors
+├── tailwind.config.js # Tailwind CSS configuration file
+├── vite.config.js # Vite configuration for project build and dev server
+└── vueform.config.js # Configuration for forms (if using VueForm)
+
+
+## Folder Details and How to Use
+
+### `components/`
+- **Purpose**: Houses reusable Vue components like buttons, modals, or forms.
+- **How to Use**: Add new components here and import them into views or layouts as needed.
+
+### `constants/`
+- **Purpose**: Stores application-wide static values (e.g., API endpoints, roles, or configuration settings).
+- **How to Use**: Add new constants as separate files or organize them into logical groups.
+
+### `dummy-data/`
+- **Purpose**: Contains mock or sample data for prototyping or testing during development.
+- **How to Use**: Update or replace with real data when connecting to live APIs.
+
+### `formatters/`
+- **Purpose**: Provides functions to format data such as dates, strings, or numbers.
+- **How to Use**: Add specific formatting utilities (e.g., `dateFormatter.js`) and import them where needed.
+
+### `layouts/`
+- **Purpose**: Defines reusable layout templates for wrapping views, such as Admin or Authentication layouts.
+- **How to Use**: Add new layouts here and configure them in `router/index.js`.
+
+### `libs/`
+- **Purpose**: Includes custom libraries or external helper modules that are not part of Vue's core.
+- **How to Use**: Add any third-party integrations or custom helper files here.
+
+### `main.js`
+- **Purpose**: Entry point of the application. It initializes the Vue instance, plugins, and root components.
+
+### `plugins/`
+- **Purpose**: Manages Vue plugins or third-party integrations.
+- **How to Use**: Add or configure plugins such as Vuex, Vue Router, or global event buses.
+
+### `router/`
+- **Purpose**: Configures navigation routes using Vue Router.
+- **How to Use**: Add new routes or modify existing ones in `router/index.js`.
+
+### `services/`
+- **Purpose**: Handles API calls and back-end communication.
+- **How to Use**: Add new service files for specific modules (e.g., `userService.js`) to manage API requests.
+
+### `utils/`
+- **Purpose**: Provides helper functions that are not tied to a specific component or service.
+- **How to Use**: Add general-purpose utility functions (e.g., debouncers, validators).
+
+### `views/`
+- **Purpose**: Stores page-level Vue components, representing screens like Dashboard, Login, or Settings.
+- **How to Use**: Create new pages as `.vue` files and register their routes in `router/index.js`.
+
+## How to Contribute
+
+### Custom Styles
+- Tailwind CSS is used for styling. To add global styles, configure `tailwind.config.js` or include SCSS files in `App.vue`.
+- Local component styles should be scoped to avoid global conflicts.
+
+### Adding a New Component
+1. Create a `.vue` file in the `components/` directory.
+2. Define the template, script, and styles as required.
+3. Import and use it in views or layouts.
+
+### Creating a New Page
+1. Add a `.vue` file to the `views/` directory.
+2. Register the new route in `router/index.js` with its path, name, and component.
+
+### Adding API Services
+1. Create a new service file in the `services/` directory.
+2. Define API calls using libraries like `axios` or `fetch`.
+3. Import the service into components or Vuex store for use.
diff --git a/README.md b/README.md
index 97e0e40..45dce99 100644
--- a/README.md
+++ b/README.md
@@ -201,6 +201,13 @@ Here are planned enhancements and fixes for the Kunafa Dashboard Vue project:
 
 ----
 
+## Project Structure Overview
+To view the project structure in detail, you can refer to the following file:
+
+[View Project Structure](./Project-Structure.md)
+
+----
+
 ## 🤝 Contributing
 We welcome contributions! Please follow these steps:
 1. Fork the project