diff --git a/src/backend/api/dp_run.py b/src/backend/api/dp_run.py
index 892c84d..2f7c9ac 100644
--- a/src/backend/api/dp_run.py
+++ b/src/backend/api/dp_run.py
@@ -1,3 +1,5 @@
+import json
+
 from flask import request, jsonify, Blueprint
 
 from database.models.dp_run import DatapipelineRun
@@ -73,6 +75,12 @@ def input_endpoint():
 
     data = request.json
 
+    #TODO this is bad
+    data = data.replace("\'", "\"")
+
+    data = json.loads(data)
+
+
     error_flag = False
     if 'error' in data:
         error_flag = True
diff --git a/src/backend/api/file.py b/src/backend/api/file.py
index b3580fd..ea4dea7 100644
--- a/src/backend/api/file.py
+++ b/src/backend/api/file.py
@@ -3,7 +3,6 @@
 from database.mongo_repo import fileDetailsDB
 from services.auth_service import secure
 from services.file_storage import (
-    download_file,
     list_file,
     get_file_upload_url,
     delete_file,
@@ -15,7 +14,7 @@
 file = Blueprint("file", __name__, template_folder="templates")
 
 
-@file.route("/s3file", methods=['GET'])
+@file.route("/s3file", methods=["GET"])
 @secure
 def get_all_s3_files():
     # List objects in the bucket
@@ -30,45 +29,50 @@ def get_all_s3_files():
     except Exception as e:
         return jsonify({f"Error: {e}"})
 
-@file.route("/file", methods=['GET'])
+
+@file.route("/file", methods=["GET"])
 @secure
 def get_all_files():
     data = fileDetailsDB.find()
 
     allData = []
     for d in data:
-        allData.append({
-                        'uuid': d['uuid'],
-                        'name': d['name'],
-                        'mime_type': d['mime_type'],
-                        'size': d['size'],
-                        's3_uuid': d['s3_uuid'],
-                        'content_type': d['content_type'],
-                        'storage_class': d['storage_class'],
-                        'last_modified': d['last_modified'],
-                        'created_at': d['created_at']})
-
+        allData.append(
+            {
+                "uuid": d["uuid"],
+                "name": d["name"],
+                "mime_type": d["mime_type"],
+                "size": d["size"],
+                "s3_uuid": d["s3_uuid"],
+                "content_type": d["content_type"],
+                "storage_class": d["storage_class"],
+                "last_modified": d["last_modified"],
+                "created_at": d["created_at"],
+                "user": d["user"],
+            }
+        )
 
     return jsonify(allData), 201
 
-@file.route('/file/new', methods=['POST'])
+
+@file.route("/file/new", methods=["POST"])
 @secure
 def create_file():
     data = request.json
     # todo add s3_uuid check
-    if 'fileName' not in data:
-        return jsonify({'error': 'Missing fileName in request'}), 400
-    file_name = data['fileName']
-    s3_uuid = data['s3_uuid']
-    mime_type = data['mime_type']
+    if "fileName" not in data:
+        return jsonify({"error": "Missing fileName in request"}), 400
+    file_name = data["fileName"]
+    s3_uuid = data["s3_uuid"]
+    mime_type = data["mime_type"]
 
     insert_file_details(file_name, s3_uuid, mime_type)
 
     if file_name:
-        return jsonify({'message': 'Saved successfully'})
+        return jsonify({"message": "Saved successfully"})
 
 
-@file.route("/file/<id>", methods=['GET'])
+@file.route("/file/<id>", methods=["GET"])
 @secure
 def get_file(id):
     try:
@@ -84,9 +88,8 @@ def get_file(id):
 @secure
 def delete_file(id):
     try:
-
         file_details = fileDetailsDB.find_one({"uuid": id})
-        s3_uuid = file_details['s3_uuid']
+        s3_uuid = file_details["s3_uuid"]
 
         # delete s3 bucket file
         s3_delete_file(s3_uuid)
@@ -94,30 +97,32 @@ def delete_file(id):
         # delete file detail
         fileDetailsDB.delete_one({"uuid": id})
 
-        return jsonify('Sucessfull deleted')
+        return jsonify("Sucessfull deleted")
     except Exception as e:
         return jsonify(f"Error: {e}")
 
 
-@file.route('/file/upload', methods=['POST'])
+@file.route("/file/upload", methods=["POST"])
 @secure
 def upload_file_with_url():
     data = request.json
-    if 'fileName' not in data:
-        return jsonify({'error': 'Missing fileName in request'}), 400
+    if "fileName" not in data:
+        return jsonify({"error": "Missing fileName in request"}), 400
+    print(data["fileName"])
 
-    return jsonify(get_file_upload_url(data['fileName']))
+    return jsonify(get_file_upload_url(data["fileName"]))
 
 
-@file.route("/file/<id>/download", methods=['GET'])
+@file.route("/file/<id>/download", methods=["GET"])
 @secure
 def download_file(id):
     try:
         # Download the object from S3
         file_details = fileDetailsDB.find_one({"uuid": id})
-        s3_uuid = file_details['s3_uuid']
+        s3_uuid = file_details["s3_uuid"]
+        file_name = file_details["name"]
 
-        download_url = s3_get_download_url(s3_uuid)
+        download_url = s3_get_download_url(s3_uuid, file_name)
         return jsonify({"download_url": download_url})
 
         # Send the file for download
diff --git a/src/backend/database/models/file_details.py b/src/backend/database/models/file_details.py
index a23c8c4..6da6543 100644
--- a/src/backend/database/models/file_details.py
+++ b/src/backend/database/models/file_details.py
@@ -3,7 +3,17 @@
 
 
 class FileDetails:
-    def __init__(self, name, mime_type, size, s3_uuid, content_type, storage_class, last_modified):
+    def __init__(
+        self,
+        name,
+        mime_type,
+        size,
+        s3_uuid,
+        content_type,
+        storage_class,
+        last_modified,
+        user_name,
+    ):
         self.uuid = str(uuid.uuid4())
         self.name = name
         self.mime_type = mime_type
@@ -13,16 +23,18 @@ def __init__(self, name, mime_type, size, s3_uuid, content_type, storage_class,
         self.storage_class = storage_class
         self.last_modified = last_modified
         self.created_at = datetime.now()
+        self.user_name = user_name
 
     def to_json(self):
         return {
-            'uuid': self.uuid,
-            'name': self.name,
-            'mime_type': self.mime_type,
-            'size': self.size,
-            's3_uuid': self.s3_uuid,
-            'content_type': self.content_type,
-            'storage_class': self.storage_class,
-            'last_modified': self.last_modified,
-            'created_at': self.created_at,
+            "uuid": self.uuid,
+            "name": self.name,
+            "mime_type": self.mime_type,
+            "size": self.size,
+            "s3_uuid": self.s3_uuid,
+            "content_type": self.content_type,
+            "storage_class": self.storage_class,
+            "last_modified": self.last_modified,
+            "created_at": self.created_at,
+            "user": self.user_name,
         }
diff --git a/src/backend/services/file_storage.py b/src/backend/services/file_storage.py
index 0deae98..f70bc45 100644
--- a/src/backend/services/file_storage.py
+++ b/src/backend/services/file_storage.py
@@ -7,14 +7,24 @@
 from database.models.file_details import FileDetails
 import humanfriendly
 
-from services.s3_storage import s3_generate_presigned_url, s3_get_head_object, s3_get_download_url, s3_list_objects, \
-    s3_delete_file
+from services.s3_storage import (
+    s3_generate_presigned_url,
+    s3_get_head_object,
+    s3_get_download_url,
+    s3_list_objects,
+    s3_delete_file,
+)
 
 
 def generated_key_check(file_name):
     if file_name_check(file_name):
         get_name = file_name.split("_")
-        key = ''.join(random.choice(string.ascii_uppercase + string.ascii_lowercase + string.digits) for _ in range(10))
+        key = "".join(
+            random.choice(
+                string.ascii_uppercase + string.ascii_lowercase + string.digits
+            )
+            for _ in range(10)
+        )
         file_name = str(key) + "_" + get_name[1]
         generated_key_check(file_name)
         return file_name
@@ -26,7 +36,7 @@ def get_file_upload_url(file_name):
     try:
         s3_uuid = str(uuid.uuid4())
         url = s3_generate_presigned_url(s3_uuid)
-        response_data = {'presignedUrl': url, 'fileName': file_name, 's3_uuid': s3_uuid}
+        response_data = {"presignedUrl": url, "fileName": file_name, "s3_uuid": s3_uuid}
 
         return response_data
     except Exception as e:
@@ -38,7 +48,6 @@ def get_file_upload_url(file_name):
 def get_file_details(file_name, s3_uuid, mime_type):
     # Get details of a specific file
     try:
-
         response = s3_get_head_object(s3_uuid)
 
         new_file_details = FileDetails(
@@ -47,9 +56,10 @@ def get_file_details(file_name, s3_uuid, mime_type):
             mime_type=mime_type,
             s3_uuid=s3_uuid,
             last_modified=response["LastModified"],
-            size=response["ContentLength"],
+            size=humanfriendly.format_size(response["ContentLength"]),
             content_type=response["ContentType"],
-            storage_class="dummy storage class"
+            storage_class="dummy storage class",
+            user_name="user1",
         )
         return new_file_details.to_json()
 
@@ -105,6 +115,9 @@ def delete_file(file_name):
     except Exception as e:
         return [{f"Error: {e}"}]
 
+
 ALLOWED_EXTENSIONS = {"csv"}
+
+
 def allowed_file(filename):
-    return "." in filename and filename.rsplit(".", 1)[1].lower() in ALLOWED_EXTENSIONS
\ No newline at end of file
+    return "." in filename and filename.rsplit(".", 1)[1].lower() in ALLOWED_EXTENSIONS
diff --git a/src/backend/services/s3_storage.py b/src/backend/services/s3_storage.py
index d56bc0e..fd22f5d 100644
--- a/src/backend/services/s3_storage.py
+++ b/src/backend/services/s3_storage.py
@@ -13,43 +13,58 @@
 REGION = os.getenv("REGION")
 BUCKET_NAME = os.getenv("BUCKET_NAME")
 
+
 def get_s3_client():
-    s3 = boto3.client('s3', aws_access_key_id=AWS_ACCESS_KEY, aws_secret_access_key=AWS_SECRET_KEY,
-                      region_name=REGION)
+    s3 = boto3.client(
+        "s3",
+        aws_access_key_id=AWS_ACCESS_KEY,
+        aws_secret_access_key=AWS_SECRET_KEY,
+        region_name=REGION,
+    )
     return s3
 
+
 def s3_generate_presigned_url(file_name):
     s3 = get_s3_client()
-    url = s3.generate_presigned_url('put_object', Params={'Bucket': BUCKET_NAME, 'Key': file_name}, ExpiresIn=3600)
+    url = s3.generate_presigned_url(
+        "put_object", Params={"Bucket": BUCKET_NAME, "Key": file_name}, ExpiresIn=3600
+    )
     return url
 
+
 def s3_get_head_object(file_name):
     s3 = get_s3_client()
     response = s3.head_object(Bucket=BUCKET_NAME, Key=file_name)
     # TODO error handling
     return response
 
-def s3_get_download_url(file_name):
+
+def s3_get_download_url(file_name, file_name_original):
     s3 = get_s3_client()
 
     url = s3.generate_presigned_url(
         "get_object",
-        Params={"Bucket": BUCKET_NAME, "Key": file_name},
+        Params={
+            "Bucket": BUCKET_NAME,
+            "Key": file_name,
+            "ResponseContentDisposition": f"attachment; filename = {file_name_original}",
+        },
         ExpiresIn=3600,
     )
     return url
 
+
 def s3_list_objects():
     s3 = get_s3_client()
     response = s3.list_objects(Bucket=BUCKET_NAME)
     return response
 
+
 def s3_delete_file(file_name):
     s3 = get_s3_client()
     s3.delete_object(Bucket=BUCKET_NAME, Key=file_name)
 
 
-
 # Function to upload a file to AWS S3
 def upload_to_s3(path, s3_key):
     try:
@@ -61,12 +76,13 @@ def upload_to_s3(path, s3_key):
     except NoCredentialsError:
         return False
 
+
 # Route to dynamically search for files based on a partial keyword
 def search_files(key):
-    partial_keyword = request.args.get('partial_keyword', '')
+    partial_keyword = request.args.get("partial_keyword", "")
 
     # Search for files in MongoDB based on the partial keyword
-    results = ""#s3filename.find({"filename": {"$regex": partial_keyword, "$options": "i"}}).limit(10)
+    results = ""  # s3filename.find({"filename": {"$regex": partial_keyword, "$options": "i"}}).limit(10)
 
     # Convert MongoDB Cursor to list of dictionaries
     files = list(results)
diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index 6d4e525..e2b1cdd 100644
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@@ -80,15 +80,15 @@
       }
     },
     "node_modules/@angular-devkit/build-angular": {
-      "version": "16.2.10",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-16.2.10.tgz",
-      "integrity": "sha512-msB/qjIsAOySDxdU5DpcX2sWGUEJOFIO03O9+HbtLwf3NDfe74mFfejxuKlHJXIJdgpM2Zc948M6+618QKpUYA==",
+      "version": "16.2.11",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-16.2.11.tgz",
+      "integrity": "sha512-yNzUiAeg1WHMsFG9IBg4S/7dsMcEAMYQ1I360ib80c0T/IwRb8pHhOokrl5Mu8zfNqZ/dxH4ItKY1uIMDmuMGQ==",
       "dev": true,
       "dependencies": {
         "@ampproject/remapping": "2.2.1",
-        "@angular-devkit/architect": "0.1602.10",
-        "@angular-devkit/build-webpack": "0.1602.10",
-        "@angular-devkit/core": "16.2.10",
+        "@angular-devkit/architect": "0.1602.11",
+        "@angular-devkit/build-webpack": "0.1602.11",
+        "@angular-devkit/core": "16.2.11",
         "@babel/core": "7.22.9",
         "@babel/generator": "7.22.9",
         "@babel/helper-annotate-as-pure": "7.22.5",
@@ -100,7 +100,7 @@
         "@babel/runtime": "7.22.6",
         "@babel/template": "7.22.5",
         "@discoveryjs/json-ext": "0.5.7",
-        "@ngtools/webpack": "16.2.10",
+        "@ngtools/webpack": "16.2.11",
         "@vitejs/plugin-basic-ssl": "1.0.1",
         "ansi-colors": "4.1.3",
         "autoprefixer": "10.4.14",
@@ -143,7 +143,7 @@
         "text-table": "0.2.0",
         "tree-kill": "1.2.2",
         "tslib": "2.6.1",
-        "vite": "4.4.7",
+        "vite": "4.5.1",
         "webpack": "5.88.2",
         "webpack-dev-middleware": "6.1.1",
         "webpack-dev-server": "4.15.1",
@@ -201,6 +201,48 @@
         }
       }
     },
+    "node_modules/@angular-devkit/build-angular/node_modules/@angular-devkit/architect": {
+      "version": "0.1602.11",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.1602.11.tgz",
+      "integrity": "sha512-qC1tPL/82gxqCS1z9pTpLn5NQH6uqbV6UNjbkFEQpTwEyWEK6VLChAJsybHHfbpssPS2HWf31VoUzX7RqDjoQQ==",
+      "dev": true,
+      "dependencies": {
+        "@angular-devkit/core": "16.2.11",
+        "rxjs": "7.8.1"
+      },
+      "engines": {
+        "node": "^16.14.0 || >=18.10.0",
+        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
+        "yarn": ">= 1.13.0"
+      }
+    },
+    "node_modules/@angular-devkit/build-angular/node_modules/@angular-devkit/core": {
+      "version": "16.2.11",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-16.2.11.tgz",
+      "integrity": "sha512-u3cEQHqhSMWyAFIaPdRukCJwEUJt7Fy3C02gTlTeCB4F/OnftVFIm2e5vmCqMo9rgbfdvjWj9V+7wWiCpMrzAQ==",
+      "dev": true,
+      "dependencies": {
+        "ajv": "8.12.0",
+        "ajv-formats": "2.1.1",
+        "jsonc-parser": "3.2.0",
+        "picomatch": "2.3.1",
+        "rxjs": "7.8.1",
+        "source-map": "0.7.4"
+      },
+      "engines": {
+        "node": "^16.14.0 || >=18.10.0",
+        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
+        "yarn": ">= 1.13.0"
+      },
+      "peerDependencies": {
+        "chokidar": "^3.5.2"
+      },
+      "peerDependenciesMeta": {
+        "chokidar": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@angular-devkit/build-angular/node_modules/tslib": {
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.1.tgz",
@@ -208,12 +250,12 @@
       "dev": true
     },
     "node_modules/@angular-devkit/build-webpack": {
-      "version": "0.1602.10",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/build-webpack/-/build-webpack-0.1602.10.tgz",
-      "integrity": "sha512-H7HiFKbZl/xVxpr1RH05SGawTpA1417wvr2nFGRu2OiePd0lPr6pIhcq8F8gt7JcA8yZKKaqjn2gU+6um2MFLg==",
+      "version": "0.1602.11",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/build-webpack/-/build-webpack-0.1602.11.tgz",
+      "integrity": "sha512-2Au6xRMxNugFkXP0LS1TwNE5gAfGW4g6yxC9P5j5p3kdGDnAVaZRTOKB9dg73i3uXtJHUMciYOThV0b78XRxwA==",
       "dev": true,
       "dependencies": {
-        "@angular-devkit/architect": "0.1602.10",
+        "@angular-devkit/architect": "0.1602.11",
         "rxjs": "7.8.1"
       },
       "engines": {
@@ -226,6 +268,48 @@
         "webpack-dev-server": "^4.0.0"
       }
     },
+    "node_modules/@angular-devkit/build-webpack/node_modules/@angular-devkit/architect": {
+      "version": "0.1602.11",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.1602.11.tgz",
+      "integrity": "sha512-qC1tPL/82gxqCS1z9pTpLn5NQH6uqbV6UNjbkFEQpTwEyWEK6VLChAJsybHHfbpssPS2HWf31VoUzX7RqDjoQQ==",
+      "dev": true,
+      "dependencies": {
+        "@angular-devkit/core": "16.2.11",
+        "rxjs": "7.8.1"
+      },
+      "engines": {
+        "node": "^16.14.0 || >=18.10.0",
+        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
+        "yarn": ">= 1.13.0"
+      }
+    },
+    "node_modules/@angular-devkit/build-webpack/node_modules/@angular-devkit/core": {
+      "version": "16.2.11",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-16.2.11.tgz",
+      "integrity": "sha512-u3cEQHqhSMWyAFIaPdRukCJwEUJt7Fy3C02gTlTeCB4F/OnftVFIm2e5vmCqMo9rgbfdvjWj9V+7wWiCpMrzAQ==",
+      "dev": true,
+      "dependencies": {
+        "ajv": "8.12.0",
+        "ajv-formats": "2.1.1",
+        "jsonc-parser": "3.2.0",
+        "picomatch": "2.3.1",
+        "rxjs": "7.8.1",
+        "source-map": "0.7.4"
+      },
+      "engines": {
+        "node": "^16.14.0 || >=18.10.0",
+        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
+        "yarn": ">= 1.13.0"
+      },
+      "peerDependencies": {
+        "chokidar": "^3.5.2"
+      },
+      "peerDependenciesMeta": {
+        "chokidar": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@angular-devkit/core": {
       "version": "16.2.10",
       "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-16.2.10.tgz",
@@ -4548,9 +4632,9 @@
       }
     },
     "node_modules/@ngtools/webpack": {
-      "version": "16.2.10",
-      "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-16.2.10.tgz",
-      "integrity": "sha512-XAVn59zP3ztuKDtw92Xc9+64RK4u4c9g8y5GgtjIWeOwgNXl8bYhAo3uTZzrSrOu96DFZGjsmghFab/7/C2pDg==",
+      "version": "16.2.11",
+      "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-16.2.11.tgz",
+      "integrity": "sha512-4ndXJ4s94ZsryVGSDk/waIDrUqXqdGWftoOEn81Zu+nkL9ncI/G1fNUlSJ5OqeKmMLxMFouoy+BuJfvT+gEgnQ==",
       "dev": true,
       "engines": {
         "node": "^16.14.0 || >=18.10.0",
@@ -5906,18 +5990,18 @@
       }
     },
     "node_modules/@types/node-forge": {
-      "version": "1.3.10",
-      "resolved": "https://registry.npmjs.org/@types/node-forge/-/node-forge-1.3.10.tgz",
-      "integrity": "sha512-y6PJDYN4xYBxwd22l+OVH35N+1fCYWiuC3aiP2SlXVE6Lo7SS+rSx9r89hLxrP4pn6n1lBGhHJ12pj3F3Mpttw==",
+      "version": "1.3.11",
+      "resolved": "https://registry.npmjs.org/@types/node-forge/-/node-forge-1.3.11.tgz",
+      "integrity": "sha512-FQx220y22OKNTqaByeBGqHWYz4cl94tpcxeFdvBo3wjG6XPBuZ0BNgNZRV5J5TFmmcsJ4IzsLkmGRiQbnYsBEQ==",
       "dev": true,
       "dependencies": {
         "@types/node": "*"
       }
     },
     "node_modules/@types/qs": {
-      "version": "6.9.10",
-      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.10.tgz",
-      "integrity": "sha512-3Gnx08Ns1sEoCrWssEgTSJs/rsT2vhGP+Ja9cnnk9k4ALxinORlQneLXFeFKOTJMOeZUFD1s7w+w2AphTpvzZw==",
+      "version": "6.9.11",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.11.tgz",
+      "integrity": "sha512-oGk0gmhnEJK4Yyk+oI7EfXsLayXatCWPHary1MtcmbAifkobT9cM9yutG/hZKIseOU0MqbIwQ/u2nn/Gb+ltuQ==",
       "dev": true
     },
     "node_modules/@types/range-parser": {
@@ -6587,9 +6671,9 @@
       }
     },
     "node_modules/array-flatten": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz",
-      "integrity": "sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+      "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
       "dev": true
     },
     "node_modules/asynckit": {
@@ -7029,13 +7113,11 @@
       "dev": true
     },
     "node_modules/bonjour-service": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/bonjour-service/-/bonjour-service-1.1.1.tgz",
-      "integrity": "sha512-Z/5lQRMOG9k7W+FkeGTNjh7htqn/2LMnfOvBZ8pynNZCM9MwkQkI3zeI4oz09uWdcgmgHugVvBqxGg4VQJ5PCg==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/bonjour-service/-/bonjour-service-1.2.1.tgz",
+      "integrity": "sha512-oSzCS2zV14bh2kji6vNe7vrpJYCHGvcZnlffFQ1MEoX/WOeQ/teD8SYWKR942OI3INjq8OMNJlbPK5LLLUxFDw==",
       "dev": true,
       "dependencies": {
-        "array-flatten": "^2.1.2",
-        "dns-equal": "^1.0.0",
         "fast-deep-equal": "^3.1.3",
         "multicast-dns": "^7.2.5"
       }
@@ -8330,12 +8412,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/dns-equal": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
-      "integrity": "sha512-z+paD6YUQsk+AbGCEM4PrOXSss5gd66QfcVBFTKR/HpFL9jCqikS94HYwKww6fQyO7IxrIIyUu+g0Ka9tUS2Cg==",
-      "dev": true
-    },
     "node_modules/dns-packet": {
       "version": "5.6.1",
       "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-5.6.1.tgz",
@@ -8929,12 +9005,6 @@
         "node": ">= 0.10.0"
       }
     },
-    "node_modules/express/node_modules/array-flatten": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
-      "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
-      "dev": true
-    },
     "node_modules/express/node_modules/body-parser": {
       "version": "1.20.1",
       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
@@ -9230,9 +9300,9 @@
       "dev": true
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.3",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz",
-      "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==",
+      "version": "1.15.4",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.4.tgz",
+      "integrity": "sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==",
       "dev": true,
       "funding": [
         {
@@ -17524,14 +17594,14 @@
       }
     },
     "node_modules/vite": {
-      "version": "4.4.7",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.7.tgz",
-      "integrity": "sha512-6pYf9QJ1mHylfVh39HpuSfMPojPSKVxZvnclX1K1FyZ1PXDOcLBibdq5t1qxJSnL63ca8Wf4zts6mD8u8oc9Fw==",
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.1.tgz",
+      "integrity": "sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.18.10",
-        "postcss": "^8.4.26",
-        "rollup": "^3.25.2"
+        "postcss": "^8.4.27",
+        "rollup": "^3.27.1"
       },
       "bin": {
         "vite": "bin/vite.js"
@@ -17816,9 +17886,9 @@
       }
     },
     "node_modules/webpack-dev-server/node_modules/ws": {
-      "version": "8.14.2",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.14.2.tgz",
-      "integrity": "sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz",
+      "integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==",
       "dev": true,
       "engines": {
         "node": ">=10.0.0"
diff --git a/src/frontend/src/app/core/services/file/file.service.ts b/src/frontend/src/app/core/services/file/file.service.ts
index cb5dcaf..132c2cd 100644
--- a/src/frontend/src/app/core/services/file/file.service.ts
+++ b/src/frontend/src/app/core/services/file/file.service.ts
@@ -18,7 +18,7 @@ export class FileService {
   }
 
   downloadById(id: string) {
-    return this.http.get(environment.SERVER_URL + this.baseUrl + "/" + id + "/download");
+    return this.http.get(environment.SERVER_URL + this.baseUrl+"/"+ id + "/download");
   }
 
   getById(id: string): Observable<Object> {
diff --git a/src/frontend/src/app/pages/s3-upload-files/s3-upload-files.component.html b/src/frontend/src/app/pages/s3-upload-files/s3-upload-files.component.html
index 1682cd8..e857b27 100644
--- a/src/frontend/src/app/pages/s3-upload-files/s3-upload-files.component.html
+++ b/src/frontend/src/app/pages/s3-upload-files/s3-upload-files.component.html
@@ -1,10 +1,12 @@
 <div class="d-flex justify-content-center">
   <div class="col-6">
 
-    <p>Selected File: {{ this.selectedFile?.name }}</p>
-
-    <input type="file" class="form-control" #fileInput (change)="selectFile()"/>
+    <p>Selected File:
+      <span class = "file_name_display">{{ selectedFileName }}</span>
+    </p>
 
+    <input type="file" class="form-control" hidden #fileInput (change)="selectFile()"/>
+    
     <button type="button" class="btn btn-primary" (click)="selectFile()">SELECT</button>
     <button type="button" class="btn btn-primary" (click)="uploadFileWithUrl()">UPLOAD_WITH_URL</button>
 
diff --git a/src/frontend/src/app/pages/s3-upload-files/s3-upload-files.component.scss b/src/frontend/src/app/pages/s3-upload-files/s3-upload-files.component.scss
index 63ea511..25552f2 100644
--- a/src/frontend/src/app/pages/s3-upload-files/s3-upload-files.component.scss
+++ b/src/frontend/src/app/pages/s3-upload-files/s3-upload-files.component.scss
@@ -7,6 +7,18 @@
     border: 5px solid #ccc; 
     padding: 20px; 
   }
+  .file_name_display{
+    
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #ccc; 
+    padding-left: 50px; 
+    padding-right: 50px; 
+    padding-top: 5px;
+    padding-bottom:5px;
+    margin-left: 10px;
+    border-radius: 6px
+  }
 
   .btn {
     margin: 5px;
diff --git a/src/frontend/src/app/pages/s3-upload-files/s3-upload-files.component.ts b/src/frontend/src/app/pages/s3-upload-files/s3-upload-files.component.ts
index 0ca9576..08a6828 100644
--- a/src/frontend/src/app/pages/s3-upload-files/s3-upload-files.component.ts
+++ b/src/frontend/src/app/pages/s3-upload-files/s3-upload-files.component.ts
@@ -10,6 +10,7 @@ export class S3UploadFilesComponent {
     public selectedFile!: File;
     public successMessage!: string;
     public errorMessage!: string;
+    selectedFileName: string = 'File Name';
 
     constructor(private fileUploadService: S3FileUploadService) { }
 
@@ -19,15 +20,17 @@ export class S3UploadFilesComponent {
       if (fileInput !== null) {
         fileInput.click();
 
-        fileInput.addEventListener('change', (event) => {
+        fileInput.addEventListener('change', () => {
           const selectedFile: File | undefined = fileInput.files?.[0];
 
           if (selectedFile !== undefined) {
             this.selectedFile = selectedFile;
+            this.selectedFileName = selectedFile.name;
           }
         });
       }
-    }
+  }
+
 
   uploadFileWithUrl() {
     if (!this.selectedFile) {
diff --git a/src/frontend/src/app/pages/s3bucketfiles/list-s3bucketfiles/list-s3bucketfiles.component.html b/src/frontend/src/app/pages/s3bucketfiles/list-s3bucketfiles/list-s3bucketfiles.component.html
index f3949b7..e2207a2 100644
--- a/src/frontend/src/app/pages/s3bucketfiles/list-s3bucketfiles/list-s3bucketfiles.component.html
+++ b/src/frontend/src/app/pages/s3bucketfiles/list-s3bucketfiles/list-s3bucketfiles.component.html
@@ -8,6 +8,7 @@
     <th scope="col">File Size</th>
     <th scope="col">StorageClass</th>
     <th scope="col">S3 Uuid</th>
+    <th scope="col">User</th>
     <th scope="col">Action</th>
   </tr>
   </thead>
@@ -22,11 +23,11 @@
       <td>{{ file.size}}</td>
       <td>{{ file.storage_class}}</td>
       <td>{{ file.s3_uuid}}</td>
-
+      <td>{{ file.user}}</td>
       <td>
         <form action="">
           <button type="button" class="btn btn-primary" (click)="handleDownload(file.uuid)" >Download</button>
-          <button class="btn btn-danger" (click)="handleDelete(file.uuid)" >Delete</button>
+          <button  class="btn btn-danger" (click)="handleDelete(file.uuid)" >Delete</button>
         </form>
       </td>
     </tr>
diff --git a/src/frontend/src/app/pages/s3bucketfiles/list-s3bucketfiles/list-s3bucketfiles.component.ts b/src/frontend/src/app/pages/s3bucketfiles/list-s3bucketfiles/list-s3bucketfiles.component.ts
index 5d5170f..f1e068c 100644
--- a/src/frontend/src/app/pages/s3bucketfiles/list-s3bucketfiles/list-s3bucketfiles.component.ts
+++ b/src/frontend/src/app/pages/s3bucketfiles/list-s3bucketfiles/list-s3bucketfiles.component.ts
@@ -2,7 +2,8 @@ import { Component, OnInit, OnDestroy} from '@angular/core';
 import { RestApiService } from 'src/app/core/services/restApi/rest-api.service';
 import {FileService} from "../../../core/services/file/file.service";
 import {Subject, Observable, Subscription} from "rxjs";
-import {s3PresignedUploadInfo} from "../../../entity/s3";
+import { s3PresignedUploadInfo } from "../../../entity/s3";
+
 
 
 @Component({
@@ -30,6 +31,7 @@ export class ListS3bucketfilesComponent implements OnInit,OnDestroy {
     this.filesSubscription = this.fileService.getAll().subscribe(res => {
       this.fileDownload = res;
       this.dtTrigger.next(null);
+      console.log(this.fileDownload)
     })
   }
   ngOnInit(): void {
@@ -76,9 +78,10 @@ export class ListS3bucketfilesComponent implements OnInit,OnDestroy {
 
   handleDelete(id: string) {
     this.fileService.deleteById(id).subscribe((value: any) =>
-    {});
+    { window.location.reload();});
   }
 
+
   // TODO
   // upload_file_to_url(file: any) {
   //   if (this.upload_url_info) {