diff --git a/frontend/src/app/download/download.component.html b/frontend/src/app/download/download.component.html
index 5cff559..6ba7fc4 100644
--- a/frontend/src/app/download/download.component.html
+++ b/frontend/src/app/download/download.component.html
@@ -1 +1,20 @@
-<p>download works!</p>
+<div class="container mx-auto p-4 mt-4">
+  <h1 class="text-4xl font-bold text-center text-gray-800 mb-2">Download File</h1>
+  <p class="text-md text-center text-gray-600 mb-6">Access your files quickly and securely</p>
+  <div class="bg-white shadow-lg rounded-lg p-6 flex flex-col items-center justify-center">
+    <img class="w-28 mt-6 mb-6" src="./assets/cloud-arrow-down-solid.svg">
+    <div class="w-full max-w-md mb-6 relative">
+      <input type="text" class="input input-bordered w-full pl-10" placeholder="Enter download code/link" />
+      <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+        <span class="text-gray-500 sm:text-sm">
+          <i class="fas fa-link"></i>
+        </span>
+      </div>
+    </div>
+    <button class="btn btn-primary w-full max-w-xs flex justify-center items-center mb-4">
+      <i class="fas fa-cloud-download-alt mr-2"></i>
+      Download
+    </button>
+    <p class="text-gray-600 text-center w-2/3">Files are available for a limited time. Ensure the code or link is correct.</p>
+  </div>
+</div>