diff --git a/index.html b/index.html
new file mode 100644
index 0000000..ae3ede3
--- /dev/null
+++ b/index.html
@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Exchange Rate Calculator</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="manifest" href="/manifest.json">
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      background-color: #f5f5f5;
+      padding: 20px;
+    }
+    h1 {
+      text-align: center;
+      margin-top: 20px;
+    }
+    form {
+      max-width: 400px;
+      margin: 0 auto;
+      background-color: #fff;
+      padding: 20px;
+      border-radius: 10px;
+      box-shadow: 0 0 10px rgba(0,0,0,0.2);
+    }
+    label {
+      display: block;
+      margin-bottom: 10px;
+      font-weight: bold;
+    }
+    input[type="number"] {
+      padding: 10px;
+      border-radius: 5px;
+      border: 1px solid #ccc;
+      width: 100%;
+      margin-bottom: 20px;
+    }
+    button[type="submit"] {
+      background-color: #4CAF50;
+      color: #fff;
+      border: none;
+      border-radius: 5px;
+      padding: 10px 20px;
+      font-size: 16px;
+      cursor: pointer;
+      width: 100%;
+    }
+    p.result {
+      font-size: 20px;
+      font-weight: bold;
+      margin-top: 20px;
+      text-align: center;
+    }
+    #recentCalculations {
+      margin-top: 40px;
+      border-top: 2px solid #ccc;
+      padding-top: 20px;
+    }
+    #calculationList {
+      list-style-type: none;
+      padding: 0;
+      text-align: center;
+    }
+    #calculationList li {
+      margin-bottom: 10px;
+    }
+    footer {
+      text-align: center;
+      margin-top: 40px;
+      padding-top: 20px;
+      border-top: 1px solid #ddd;
+      color: #666;
+      font-size: 12px;
+    }
+  </style>
+</head>
+<body>
+  <h1>Exchange Rate Calculator</h1>
+  <form>
+    <label>Enter amount in Euro:</label>
+    <input type="number" id="euro" placeholder="Enter amount in Euro">
+    <label>Enter amount in Algerian Dinar:</label>
+    <input type="number" id="dinar" placeholder="Enter amount in Algerian Dinar">
+    <button type="submit" onclick="convert(event)">Convert</button>
+  </form>
+  <p class="result" id="result"></p>
+
+  <div id="recentCalculations">
+    <h2>Recent Calculations</h2>
+    <ul id="calculationList"></ul>
+  </div>
+
+  <footer>
+    <hr>
+    <p>EUR-DZD Calculator Version 1.2 (C) by KABI Fancy Media and Communication</p>
+  </footer>
+
+  <script>
+    // Array to store recent calculations
+    let recentCalculations = [];
+
+    function convert(event) {
+      event.preventDefault();
+      const euro = document.getElementById("euro").value;
+      const dinar = document.getElementById("dinar").value;
+      const apiKey = "ab0076697b3401ea71d2c393";
+      const url = `https://v6.exchangerate-api.com/v6/${apiKey}/pair/EUR/DZD`;
+
+      fetch(url)
+        .then(response => response.json())
+        .then(data => {
+          const exchangeRate = data.conversion_rate;
+          if (euro) {
+            const result = (euro * exchangeRate).toFixed(2);
+            const calculation = `${euro} Euro = ${result} Algerian Dinar`;
+            document.getElementById("result").innerHTML = calculation;
+            // Add to recent calculations array
+            recentCalculations.unshift(calculation);
+          } else if (dinar) {
+            const result = (dinar / exchangeRate).toFixed(2);
+            const calculation = `${dinar} Algerian Dinar = ${result} Euro`;
+            document.getElementById("result").innerHTML = calculation;
+            // Add to recent calculations array
+            recentCalculations.unshift(calculation);
+          }
+          // Limit recent calculations to last 5 entries
+          recentCalculations = recentCalculations.slice(0, 5);
+          updateRecentCalculations();
+        })
+        .catch(error => {
+          console.log(error);
+          document.getElementById("result").innerHTML = "Oops, something went wrong! Please try again later.";
+        });
+    }
+
+    function updateRecentCalculations() {
+      const calculationList = document.getElementById("calculationList");
+      calculationList.innerHTML = ""; // Clear previous list
+
+      recentCalculations.forEach(calculation => {
+        const li = document.createElement("li");
+        li.textContent = calculation;
+        calculationList.appendChild(li);
+      });
+    }
+  </script>
+  <script>
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.register('/service-worker.js')
+        .then(function(registration) {
+          console.log('Service Worker registered with scope:', registration.scope);
+        })
+        .catch(function(error) {
+          console.error('Service Worker registration failed:', error);
+        });
+    }
+  </script>  
+</body>
+</html>
diff --git a/manifest.json b/manifest.json
new file mode 100644
index 0000000..42bc95a
--- /dev/null
+++ b/manifest.json
@@ -0,0 +1,16 @@
+{
+    "name": "EUR-DZD Calculator",
+    "short_name": "Exchange Calculator",
+    "icons": [
+      {
+        "src": "icon.png",
+        "sizes": "192x192",
+        "type": "image/png"
+      }
+    ],
+    "start_url": "/index.html",
+    "display": "standalone",
+    "background_color": "#f5f5f5",
+    "theme_color": "#4CAF50"
+  }
+  
\ No newline at end of file
diff --git a/service-worker.js b/service-worker.js
new file mode 100644
index 0000000..7fc11d4
--- /dev/null
+++ b/service-worker.js
@@ -0,0 +1,26 @@
+const CACHE_NAME = 'eur-dzd-calculator-v1';
+
+self.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open(CACHE_NAME)
+      .then(function(cache) {
+        return cache.addAll([
+          '/index.html',
+          '/manifest.json',
+          '/icon.png',
+        ]);
+      })
+  );
+});
+
+self.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request)
+      .then(function(response) {
+        if (response) {
+          return response;
+        }
+        return fetch(event.request);
+      })
+  );
+});
