diff --git a/README.md b/README.md
index d8d6388..20412bb 100644
--- a/README.md
+++ b/README.md
@@ -1,22 +1,97 @@
-# 📊 Project: Complex API 
-
-### Goal: Use data returned from one api to make a request to another api and display the data returned
-
-### How to submit your code for review:
-
-- Fork and clone this repo
-- Create a new branch called answer
-- Checkout answer branch
-- Push to your fork
-- Issue a pull request
-- Your pull request description should contain the following:
-  - (1 to 5 no 3) I completed the challenge
-  - (1 to 5 no 3) I feel good about my code
-  - Anything specific on which you want feedback!
-
-Example:
-```
-I completed the challenge: 5
-I feel good about my code: 4
-I'm not sure if my constructors are setup cleanly...
-```
+# 🕋 **Quranify**
+
+### ✨ *“Read. Reflect. Remember.”*
+
+Quranify is a minimalist web app that lets users **search, listen, and read** verses from the Qur’an — with both **Arabic recitation** and **English translation** displayed side by side.
+It’s designed to make connecting with the Qur’an intuitive, beautiful, and accessible on any device.
+
+---
+
+## 🎯 **Goal**
+
+To combine the power of **two APIs** — one for Arabic recitation and another for English translation — into a single seamless experience where users can:
+
+* Enter a **surah** and **verse number**
+* Instantly view the verse in Arabic
+* Hear the recitation
+* Read the English translation below
+
+---
+
+## ⚙️ **Features**
+
+* 📖 Retrieve any verse by chapter and verse number
+* 🔊 Play & pause audio recitations (`Mishary Alafasy`)
+* 🌍 View English translation (`Mustafa Khattab - The Clear Quran`)
+* ⚡ Fast API chaining between two Qur’an data sources
+* 🎨 Simple and clean UI optimized for reflection
+* 📱 Fully responsive layout (mobile-ready)
+
+---
+
+## 🧠 **How It Works**
+
+1. The app uses **AlQuran.cloud API** for Arabic text and audio:
+   `https://api.alquran.cloud/v1/ayah/{surah}:{ayah}/ar.alafasy`
+2. It then fetches the **translation** using Fawaz Ahmed’s GitHub-hosted Quran API:
+   `https://cdn.jsdelivr.net/gh/fawazahmed0/quran-api@1/editions/eng-mustafakhattaba/{surah}/{ayah}.min.json`
+3. The verse, translation, and recitation are displayed dynamically in the interface.
+
+---
+
+## 🧩 **Tech Stack**
+
+| Area           | Technology                                   |
+| -------------- | -------------------------------------------- |
+| **Frontend**   | HTML, CSS, JavaScript                        |
+| **APIs Used**  | Al-Qur’an Cloud API, Fawaz Ahmed’s Quran API |
+| **Icons**      | Font Awesome                                 |
+| **Deployment** | GitHub Pages                                 |
+
+---
+
+## 🚀 **How to Run Locally**
+
+1. **Clone this repository**
+
+   ```bash
+   git clone https://github.com/abdirxhmxn/quranify.git
+   ```
+2. **Open the project folder**
+
+   ```bash
+   cd quranify
+   ```
+3. **Run the app**
+   Open `index.html` directly in your browser — no server setup needed.
+
+---
+
+## 🌐 **Live Demo**
+
+> 🔗 [Quranify on GitHub Pages](https://abdirxhmxn.github.io/Quranify/)
+---
+
+## 🧭 **Future Enhancements**
+
+* 🔍 Search by keyword or theme (e.g., “mercy,” “patience”)
+* 🕰️ Recitation playlist with auto-play through surahs
+* 🧘‍♂️ Tafsīr integration for deeper study
+* 💾 Local storage for saving favorite verses
+* 🌙 Dark mode toggle
+
+---
+
+## 💬 **About the Creator**
+
+Created by **Abdirahman Mohamed (MC)** —
+a software engineer and educator passionate about building meaningful tools that blend **faith and technology**.
+
+> “Quranify isn’t just code — it’s a bridge between hearts and revelation.
+> Every verse should feel close, audible, and alive.”
+
+---
+
+## 🕊️ **License**
+
+This project is open source and distributed under the **MIT License**.
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..6f1f45f
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,356 @@
+* {
+    box-sizing: border-box;
+}
+
+    html {
+        font-size: 62.5%;
+    }
+
+    body {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        background-image: url('../img/back.jpeg');
+        background-repeat: no-repeat;
+        background-size: contain;
+        background-position: center;
+        margin: 0;
+        height: 100vh;
+        width: 100vw;
+        background-color: black;
+        color: white;
+    }
+
+    main {
+        height: 640px;
+        width: 19%;
+        margin-top: 11%;
+        margin-left: 1.5%;
+        text-align: center;
+        font-size: 2rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .top {
+        width: 100%;
+        height: 80%;
+        font-size: 2rem;
+
+    }
+
+    .top div {
+        padding-top: 3%;
+    }
+
+    h1 {
+        margin-bottom: 0%;
+        margin-top: 0%;
+        text-align: center;
+        font-size: 5rem;
+    }
+
+    input {
+        width: 190px;
+        height: 30px;
+        font-size: 1.5rem;
+        border-radius: 5px;
+        padding-left: 2%;
+        border: none;
+        margin-bottom: 1%;
+    }
+
+    .input {
+        width: 100%;
+    }
+
+    button {
+        width: 49px;
+        height: 48px;
+        font-size: 2rem;
+        border-radius: 15px;
+        margin-top: 3%;
+    }
+
+    #play,
+    #stop {
+        font-size: 4rem;
+        border-radius: 20px;
+        padding-left: 0.5%;
+    }
+
+    #stop {
+        font-size: 4rem;
+        padding-left: 1.3%;
+    }
+
+    h3,
+    p {
+        font-size: 2rem;
+    }
+
+    .sound {
+        width: 100%;
+
+    }
+
+    .search {
+        display: flex;
+        justify-content: center;
+    }
+
+    .search button {
+        width: 90px;
+        height: 30px;
+        border-radius: 5px;
+        border: none;
+        background-color: white;
+        padding-left: 2%;
+    }
+
+    .input #verse {
+        margin-left: 19px;
+    }
+
+    .quran {
+        border: 3px solid;
+        height: 70%;
+        width: 80%;
+        margin: 1% auto;
+        padding: 2%;
+        border-radius: 15px;
+        background-color: blanchedalmond;
+        color: black;
+        font-size: 1rem;
+    }
+
+
+@media (max-width: 1440px) {
+    html {
+        font-size: 58%;
+    }
+
+    main {
+        height: 500px;
+        width: 27%;
+        margin-top: 13.5%;
+    }
+
+    .quran {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        height: 70%;
+        width: 80%;
+        margin-bottom: 0%;
+
+    }
+
+    .quran h3 {
+        margin: 0%;
+        margin-bottom: 1%;
+        font-size: 1.9rem;
+    }
+
+    .quran p {
+        margin: 0%;
+        font-size: 1.9rem;
+    }
+
+    .top div {
+        padding-top: 0%;
+    }
+
+    .top {
+        height: 73%;
+    }
+
+    .sound {
+        margin-top: 0%;
+    }
+
+    .search button {
+        width: 60px;
+        height: 20px;
+        border-radius: 5px;
+        border: none;
+        background-color: white;
+        padding-left: 2%;
+        font-size: 1.5rem;
+        margin-top: 1%;
+    }
+
+    #play {
+        padding-left: 4px;
+    }
+}
+
+@media (max-width: 1024px) {
+    html {
+        font-size: 48%;
+    }
+
+    main {
+        width: 31%;
+        height: 430px;
+        margin-top: 17.5%;
+    }
+
+    .top {
+        font-size: 1.5rem;
+    }
+
+    input {
+        width: 140px;
+        height: 25px;
+        font-size: 1.6rem;
+        margin-bottom: 0%;
+    }
+
+    input::placeholder {
+        font-size: 1.3rem;
+    }
+
+    h1 {
+        font-size: 3.5rem;
+    }
+
+    #play,
+    #stop {
+        font-size: 3.5rem;
+    }
+
+    .quran {
+        width: 90%;
+        height: 65%;
+        font-size: 2rem;
+    }
+
+    .search button {
+        width: 60px;
+        height: 20px;
+        border-radius: 5px;
+        border: none;
+        background-color: white;
+        padding-left: 2%;
+        font-size: 1.5rem;
+        margin-top: 0%;
+    }
+
+}
+
+@media (max-width: 768px) {
+    html {
+        font-size: 48%;
+    }
+
+    main {
+        width: 41%;
+        height: 440px;
+        margin-top: 22.5%;
+    }
+
+    .top {
+        font-size: 1.5rem;
+    }
+
+    input {
+        width: 140px;
+        height: 25px;
+        font-size: 1.6rem;
+        margin-bottom: 0%;
+    }
+
+    input::placeholder {
+        font-size: 1.3rem;
+    }
+
+    h1 {
+        font-size: 3.5rem;
+    }
+
+    #play,
+    #stop {
+        font-size: 3.5rem;
+    }
+
+    .quran {
+        width: 90%;
+        height: 65%;
+        font-size: 2rem;
+    }
+
+    .search button {
+        width: 60px;
+        height: 20px;
+        border-radius: 5px;
+        border: none;
+        background-color: white;
+        padding-left: 2%;
+        font-size: 1.5rem;
+        margin-top: 0%;
+    }
+
+}
+
+@media (max-width: 480px) {
+    html {
+        font-size: 44%;
+    }
+
+    main {
+        width: 54%;
+        height: 360px;
+        margin-top: 45.5%;
+        margin-left: 4%;
+    }
+
+    .top {
+        font-size: 1.5rem;
+    }
+
+    input {
+        width: 140px;
+        height: 25px;
+        font-size: 1.6rem;
+        margin-bottom: 0%;
+    }
+
+    input::placeholder {
+        font-size: 1.3rem;
+    }
+
+    h1 {
+        font-size: 3.5rem;
+    }
+
+    #play,
+    #stop {
+        font-size: 2.5rem;
+        width: 25px;
+        height: 25px;
+    }
+
+    .quran {
+        width: 90%;
+        height: 73%;
+        font-size: 2rem;
+    }
+
+    .search button {
+        width: 60px;
+        height: 20px;
+        border-radius: 5px;
+        border: none;
+        background-color: white;
+        padding-left: 2%;
+        font-size: 1.5rem;
+        margin-top: 0%;
+    }
+
+    .sound {
+        margin-top: 4%;
+        height: 30px;
+    }
+}
diff --git a/img/back.jpeg b/img/back.jpeg
new file mode 100644
index 0000000..84954d9
Binary files /dev/null and b/img/back.jpeg differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..c34d1c4
--- /dev/null
+++ b/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="ar">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <title>Quran API</title>
+</head>
+
+<body>
+    <main>
+        <h1>Quranify</h1>
+        <div class="top">
+            <div>
+                <label for="surah">Chapter Number:</label>
+                <input type="text" id="surah" placeholder="Enter a Chapter Number">
+            </div>
+
+            <div class="input">
+                <label for="verse">Verse Number:</label>
+                <input type="text" id="verse" placeholder="Enter a Verse Number">
+            </div>
+            <div class="search">
+                <button>Search</button>
+            </div>
+
+            <div class="quran">
+                <h3></h3>
+                <h3 id="ayah"></h3>
+
+                <audio src=""></audio>
+                <p></p>
+            </div>
+        </div>
+
+
+        <div class="sound">
+            <button id="play"><i class="fa-solid fa-circle-play"></i> </button>
+            <button id="stop"><i class="fa-solid fa-pause"></i> </button>
+        </div>
+    </main>
+    <script type="text/javascript" src="js/main.js"></script>
+</body>
+
+</html>
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..d72be39
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,46 @@
+//api 1: http://api.alquran.cloud/v1/edition?format=audio&language=en&type=versebyverse
+//api 2: https://cdn.jsdelivr.net/gh/fawazahmed0/quran-api@1/editions/ben-muhiuddinkhan-la/5.min.json
+///                                                          editions/{editionName}/{ChapterNo}/{VerseNo}
+
+document.querySelector('button').addEventListener('click', searchVerse)
+document.querySelector('#play').addEventListener('click', play)
+document.querySelector('#stop').addEventListener('click', stop)
+const audio = document.querySelector('audio')
+
+function stop() {
+    audio.pause()
+}
+function play() {
+    audio.play()
+}
+function searchVerse() {
+    const surah = document.querySelector('h3')
+    const verse = document.querySelector('#ayah')
+    const translation = document.querySelector('p')
+
+    const inputSurah = document.querySelector('#surah').value
+    const inputVerse = document.querySelector('#verse').value
+    const url = `https://api.alquran.cloud/v1/ayah/${inputSurah}:${inputVerse}/ar.alafasy?format=audio&language=en&type=versebyverse`
+    const url2 = `https://cdn.jsdelivr.net/gh/fawazahmed0/quran-api@1/editions/eng-mustafakhattaba/${inputSurah}/${inputVerse}.min.json`
+    fetch(url)
+        .then(res => res.json())
+        .then(data => {
+            console.log(data)
+            surah.innerText = `${data.data.surah.name}`
+            verse.innerText = `${data.data.text}`
+            audio.src = data.data.audio
+            fetch(url2)
+                .then(res => res.json())
+                .then(stuff => {
+                    translation.innerText = `${stuff.text}`
+                })
+                .catch(err => {
+                    console.log(`err ${err}`)
+                })
+        })
+        .catch(err => {
+            console.log(`err ${err}`)
+        })
+}
+
+//
\ No newline at end of file