diff --git a/app.js b/backend/app.js
similarity index 100%
rename from app.js
rename to backend/app.js
diff --git a/style.css b/backend/styles.css
similarity index 100%
rename from style.css
rename to backend/styles.css
diff --git a/index.html b/frontend/index.html
similarity index 100%
rename from index.html
rename to frontend/index.html
diff --git a/shackles.png b/icons/shackles.png
similarity index 100%
rename from shackles.png
rename to icons/shackles.png
diff --git a/readme.md b/readme.md
new file mode 100644
index 0000000..e9b8cab
--- /dev/null
+++ b/readme.md
@@ -0,0 +1,87 @@
+#  My Dev.to June Celebration Challenge.
+
+This repository contains my submission for the **Dev.to June Celebration Challenge**. The goal of this project is to design and build a creative user interface using **CSS** and **JavaScript**. This project demonstrates advanced styling, interactivity, and responsiveness to celebrate the June festivities on dev.to!
+
+## Its Features
+
+- Responsive design with modern CSS
+- Interactive elements powered by JavaScript
+- Easy to run locally on any major Operating System
+
+## Getting Started
+
+You can run and edit this project easily using [Visual Studio Code (VS Code)](https://code.visualstudio.com/) on **Linux**, **macOS**, or **Windows**. or view on **[Vercel](https://june-celebrations.vercel.app/)**
+
+### Prerequisites
+
+- [Visual Studio Code](https://code.visualstudio.com/) installed
+- [Git](https://git-scm.com/) installed (optional, for cloning the repo)
+
+### 1. Clone the Repository
+
+Open your terminal (Linux/macOS) or Command Prompt/PowerShell (Windows):
+
+```bash
+git clone https://github.com/Contractor-x/dev.to-challenge.git
+cd dev.to-challenge
+```
+
+Alternatively, you can [download the ZIP](https://github.com/daluclemas/dev.to-challenge/archive/refs/heads/main.zip) and extract it.
+
+### 2. Open the Project in VS Code
+
+- Launch VS Code.
+- Click `File` > `Open Folder...` and select the `dev.to-challenge` directory.
+
+### 3. Run the Project
+
+This is a static project (HTML, CSS, JavaScript). You can open the main HTML file in your browser:
+
+#### Option 1: Open Directly
+
+- Find the main HTML file (e.g., `index.html`) in the repo.
+- Right-click and choose "Open with [your browser]".
+
+#### Option 2: Use VS Code Live Server Extension
+
+1. Install the [Live Server extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) in VS Code.
+2. Right-click `index.html` and select "Open with Live Server".
+3. Your default browser will open the project with live-reloading.
+
+---
+
+## Platform-Specific Notes
+
+### Linux
+
+- Use your preferred terminal to clone the repo and launch VS Code (`code .`).
+- Requires any modern web browser (e.g., Firefox, Chrome).
+
+### macOS
+
+- Use Terminal for git commands and `code .` to open VS Code.
+- Safari, Chrome, or Firefox are all supported.
+
+### Windows
+
+- Use Command Prompt or PowerShell for git commands.
+- Open the folder in VS Code and use Edge, Chrome, or Firefox.
+
+---
+
+## To Contribute
+
+Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change and i will respond in a jiffy.
+
+---
+
+## License
+
+[MIT License](LICENSE)
+
+---
+
+**Built with 🎉 by daluclemas**
+
+
+