diff --git a/public/upload_file.html b/public/upload_file.html
index d9b7663..741b770 100644
--- a/public/upload_file.html
+++ b/public/upload_file.html
@@ -5,55 +5,59 @@
   <!-- Required meta tags -->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <link rel="stylesheet" href="css/uploadfile.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
   <title>Paper Upload</title>
+  <style>
+    .upload-section {
+      margin: 50px 0;
+      text-align: center;
+    }
+    .upload-icon {
+      font-size: 50px;
+      color: #007bff;
+    }
+    .status-message {
+      margin: 20px 0;
+      font-size: 18px;
+      color: rgb(242, 16, 16);
+    }
+    #uploadedFilesContainer {
+      margin-top: 40px;
+    }
+  </style>
 </head>
 
 <body>
-  <div style="position: absolute; bottom: 30px; left: 30px;" class="gtranslate_wrapper"></div>
-  <script>
-     window.gtranslateSettings = {
-       default_language: "en",
-       detect_browser_language: true,
-       wrapper_selector: ".gtranslate_wrapper",
-       font_size: 100,
-     };
-   </script>
-   <script
-   src="https://cdn.gtranslate.net/widgets/latest/popup.js"
-   defer
- ></script>
-  <section>
-    <h2>Upload Research files</h2>
-    <div class="first-div">
+  <div class="container">
+    <h2 class="mt-5 text-center">Upload Research Files</h2>
+
+    <div class="upload-section">
       <div class="form">
         <form enctype="multipart/form-data" id="uploadForm">
           <div class="form-group">
-            <p style="display: inline-block;">
+            <!--
+            <p>
               Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, repudiandae exercitationem inventore
               veniam vel illum rerum laudantium itaque vero beatae dolor, quam illo commodi omnis quibusdam repellendus
               expedita? Ab, mollitia!
-            </p>
-            <div id="status" style="display: none; margin: 0; padding: 0px; font-size: 21px;">
-              <b style="color: rgb(242, 16, 16);">File Uploaded successfully</b>
+            </p> -->
+            <div id="status" class="status-message" style="display: none;">
+              <b>File Uploaded successfully</b>
             </div>
-            <label for="exampleFormControlFile1">Upload Files:</label>
-            <input type="file" name="file" required>
-            <button type="button" onclick="uploadFile()">Upload</button>
+            <label for="fileInput" class="form-label">Upload Files:</label>
+            <input type="file" name="file" id="fileInput" class="form-control" required>
+            <button type="button" class="btn btn-primary mt-3" onclick="uploadFile()">Upload</button>
           </div>
         </form>
       </div>
-      <div class="img">
-        <i class="fa-solid fa-cloud-arrow-up"></i>
-      </div>
     </div>
-  </section>
 
-  <div id="uploadedFilesContainer">
-    <h2>Uploaded Research Files</h2>
-    <button id="viewButton" class="view" onclick="fetchUploadedFiles()">View</button>
-    <div id="uploadedFilesList" style="display: none;"></div> <!-- Container for uploaded files -->
+    <div id="uploadedFilesContainer">
+      <h2>Uploaded Research Files</h2>
+      <button id="viewButton" class="btn btn-secondary" onclick="fetchUploadedFiles()">View</button>
+      <div id="uploadedFilesList" style="display: none;" class="mt-3"></div> <!-- Container for uploaded files -->
+    </div>
   </div>
 
   <script>
@@ -61,10 +65,10 @@ <h2>Uploaded Research Files</h2>
     if (!token) {
         window.location.href = '/';
     }
+
     async function uploadFile() {
       const form = document.getElementById('uploadForm');
       const status = document.getElementById('status');
-      const token = localStorage.getItem('accessToken');
       const headers = new Headers();
       headers.append('Authorization', `Bearer ${token}`);
       const formData = new FormData(form);
@@ -80,12 +84,10 @@ <h2>Uploaded Research Files</h2>
           setTimeout(() => {
             status.style.display = 'none';
           }, 2000);
-        }
-        else if (response.status === 401) {
+        } else if (response.status === 401) {
           status.innerHTML = "You have already uploaded one Research Paper";
           status.style.display = 'block'; // Show error message
-        }
-        else {
+        } else {
           console.log("Failed to upload file");
         }
       } catch (error) {
@@ -95,7 +97,6 @@ <h2>Uploaded Research Files</h2>
     }
 
     async function fetchUploadedFiles() {
-      const token = localStorage.getItem('accessToken');
       const headers = new Headers();
       headers.append('Authorization', `Bearer ${token}`);
       try {
@@ -108,9 +109,10 @@ <h2>Uploaded Research Files</h2>
           const result = await response.json();
           const uploadedFilesList = document.getElementById('uploadedFilesList');
           const ul = document.createElement('ul');
+          ul.classList.add('list-group');
 
           // Clear previous list items
-          ul.innerHTML = ''; // Clear previous list items
+          ul.innerHTML = '';
 
           const files = result.filenames;
           const filepaths = result.filepaths;
@@ -118,6 +120,7 @@ <h2>Uploaded Research Files</h2>
           // Loop through the files and create list items
           files.forEach((file, index) => {
             const li = document.createElement('li');
+            li.classList.add('list-group-item');
             const link = document.createElement('a');
             link.href = filepaths[index];
             link.target = "_blank";
@@ -151,6 +154,8 @@ <h2>Uploaded Research Files</h2>
       viewButton.setAttribute('onclick', 'fetchUploadedFiles()'); // Reset the button's action
     }
   </script>
+
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
