diff --git a/images/icon-512.png b/images/icon-512.png
new file mode 100644
index 0000000..4f90024
Binary files /dev/null and b/images/icon-512.png differ
diff --git a/index.html b/index.html
index 29bdc79..b4ec75b 100644
--- a/index.html
+++ b/index.html
@@ -9,6 +9,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="manifest" href="/manifest.json">
     <style>
         body { font-family: 'Inter', sans-serif; }
         .hidden { display: none; }
@@ -289,5 +290,18 @@
         signOutBtn.addEventListener('click', () => handleSignOut());
         updateUI();
     </script>
+    <script>
+    if ('serviceWorker' in navigator) {
+        window.addEventListener('load', () => {
+            navigator.serviceWorker.register('/sw.js')
+                .then(registration => {
+                    console.log('Service Worker registered successfully:', registration);
+                })
+                .catch(error => {
+                    console.log('Service Worker registration failed:', error);
+                });
+        });
+    }
+</script>
 </body>
 </html>
diff --git a/manifest.json b/manifest.json
new file mode 100644
index 0000000..e57e4e7
--- /dev/null
+++ b/manifest.json
@@ -0,0 +1,17 @@
+{
+  "name": "TimeTracker",
+  "short_name": "TimeTrack",
+  "description": "A simple time tracking application for employees and admins.",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#2563EB",
+  "orientation": "portrait-primary",
+  "icons": [
+    {
+      "src": "/images/icon-512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/sw.js b/sw.js
new file mode 100644
index 0000000..1409549
--- /dev/null
+++ b/sw.js
@@ -0,0 +1,34 @@
+const CACHE_NAME = 'timetracker-v1';
+// Add the paths to the files you want to cache
+const urlsToCache = [
+  '/',
+  '/index.html' 
+  // If you had separate CSS or JS files, you would add them here too.
+  // e.g., '/style.css', '/app.js'
+];
+
+// Install the service worker and cache the app shell
+self.addEventListener('install', event => {
+  event.waitUntil(
+    caches.open(CACHE_NAME)
+      .then(cache => {
+        console.log('Opened cache');
+        return cache.addAll(urlsToCache);
+      })
+  );
+});
+
+// Intercept network requests and serve from cache if available
+self.addEventListener('fetch', event => {
+  event.respondWith(
+    caches.match(event.request)
+      .then(response => {
+        // Cache hit - return response
+        if (response) {
+          return response;
+        }
+        // Not in cache - fetch from network
+        return fetch(event.request);
+      })
+  );
+});
\ No newline at end of file