diff --git a/front-end/public/Project-101128627.pdf b/front-end/public/Project-101128627.pdf
new file mode 100644
index 00000000..99e940e9
Binary files /dev/null and b/front-end/public/Project-101128627.pdf differ
diff --git a/front-end/src/App.jsx b/front-end/src/App.jsx
index db2f4fec..bb346435 100644
--- a/front-end/src/App.jsx
+++ b/front-end/src/App.jsx
@@ -7,6 +7,7 @@ import './components/Overview.css'
 import './components/Contact.css'
 import './components/Team.css'
 import './components/News.css'
+import './components/Download.css'
 
 
 import Login from './Pages/Login';
diff --git a/front-end/src/Pages/Downloads.jsx b/front-end/src/Pages/Downloads.jsx
index 4ef1b1ca..48126ff4 100644
--- a/front-end/src/Pages/Downloads.jsx
+++ b/front-end/src/Pages/Downloads.jsx
@@ -1,9 +1,64 @@
+import React, { useState } from "react";
+import fileDownload from '../assets/download.png';
+
 function Downloads() {
-  return(
+
+  // Downloading files
+  const handleDownload = async (fileName) => {
+    try {
+      const response = await fetch(`/pdf/${fileName}`);
+      const blob = await response.blob();
+
+      const url = window.URL.createObjectURL(new Blob([blob]));
+      const link = document.createElement('a');
+      link.href = url;
+      link.setAttribute('download', fileName);
+      document.body.appendChild(link);
+      link.click();
+      link.parentNode.removeChild(link);
+    } catch (error) {
+      console.error("There was an error downloading the file!", error);
+    }
+  };
+
+  return (
     <>
-    <h1>Downloads</h1>
-      </>
+      <div className="downloadTitle">
+        <h3>Downloads</h3>
+      </div>
+
+
+      <div className="downloadPage">
+
+        <div className="downloadButton">  
+          <h4>Project Card</h4>
+          <img src={fileDownload} alt="fileDownload"/>
+          <button className="downloadButton" onClick={() => handleDownload('Project-101128627.pdf')}>Download</button> 
+        </div>
+
+        <div className="downloadButton">
+          <h4>Application Form</h4>
+          <img src={fileDownload} alt="fileDownload"/>
+          <a className="openlink" href="http://www.pgis.pdn.ac.lk/downloads/students.php"><p>Open</p></a>
+        </div>
+
+        <div className="downloadButton">
+          <h4>Handbook</h4>
+          <img src={fileDownload} alt="fileDownload"/>
+          <button className="downloadButton" onClick={() => handleDownload('Handbook.pdf')}>Download</button>
+        </div>
+
+        <div className="downloadButton">
+          <nav>
+          <h4>For PGIS Staff</h4>
+          <img src={fileDownload} alt="fileDownload"/>
+          <a className="openlink" href="http://www.pgis.pdn.ac.lk/downloads/staff.php"><p>Open</p></a>
+          </nav>
+        </div>
+
+      </div>
+    </>
   );
 }
 
-export default Downloads;
\ No newline at end of file
+export default Downloads;
diff --git a/front-end/src/assets/download.png b/front-end/src/assets/download.png
new file mode 100644
index 00000000..9bca1b76
Binary files /dev/null and b/front-end/src/assets/download.png differ
diff --git a/front-end/src/components/Download.css b/front-end/src/components/Download.css
new file mode 100644
index 00000000..0c8e926e
--- /dev/null
+++ b/front-end/src/components/Download.css
@@ -0,0 +1,72 @@
+.downloadPage {
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 2%;
+  }
+  
+  .downloadTitle {
+    margin-top: 2%;
+    margin-left: 5%;
+    text-align: left;
+    margin-bottom: 3%;
+    font-size: 20px;
+  }
+
+  .downloadButton {
+    border: 1px solid hsl(222, 83%, 98%);
+    box-shadow: 2px 2px 5px rgba(63, 108, 148, 0.1), 
+                -2px -2px 5px rgba(255, 255, 255, 0.7), 
+                2px -2px 5px rgba(255, 255, 255, 0.7), 
+                -2px 2px 5px rgba(63, 108, 148, 0.1);
+    padding: 20px;
+    display: inline-block;
+    background-color: hsl(0, 0%, 100%);;
+    margin-left: 5%;
+    margin-right: 5%; 
+    margin-bottom: 5%;
+    text-align: center;
+  }
+
+  .downloadButton img {
+    height: 200px;
+    width: auto;
+  }
+
+  .downloadButton button {
+    width: 150px;
+    height: 55px;
+    background: hsl(211, 44%, 66%);
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 16px;
+    font: #ffffff;
+    color: #000000;
+    text-align: center;
+    margin-top: 10px;
+  }
+  
+  .downloadButton button:hover {
+    background: hsl(211, 40%, 69%);
+    color: #2a2929;
+  }
+
+  .openlink {
+    width: 50px;
+    color: #000000;
+    text-align: center;
+    font-size: 16px;
+  }
+
+  @media (max-width: 1500px) {
+    .downloadPage {
+      flex-direction: column;
+      margin-left: 0px;
+    }
+  
+  }
+  
+
+