diff --git a/assets/static/js/project-upload.js b/assets/static/js/project-upload.js
new file mode 100644
index 0000000..3d7828a
--- /dev/null
+++ b/assets/static/js/project-upload.js
@@ -0,0 +1,9 @@
+document
+  .getElementById('project-upload')
+  .addEventListener('submit', function (event) {
+    const fileInput = document.getElementById('files');
+
+    if (fileInput.files.length === 0) {
+      fileInput.removeAttribute('name');
+    }
+  });
diff --git a/assets/views/website/create-project.html b/assets/views/website/create-project.html
index f5637d4..0fbdb2d 100644
--- a/assets/views/website/create-project.html
+++ b/assets/views/website/create-project.html
@@ -37,4 +37,5 @@
 
     <button type="submit" class="p-2 text-gray-900 bg-yellow-500 rounded-sm shadow hover:bg-yellow-600">Submit</button>
 </form>
+<script src="/static/js/project-upload.js" defer></script>
 {% endblock content%}
\ No newline at end of file
diff --git a/src/services/projects.rs b/src/services/projects.rs
index 1ff35a5..c0e90f3 100644
--- a/src/services/projects.rs
+++ b/src/services/projects.rs
@@ -122,10 +122,30 @@ pub async fn get_project_dto(ctx: &AppContext, id: i32) -> Result<ProjectDto> {
         .all(&ctx.db)
         .await?;
 
+    let thumbnails_ids = thumbnails
+        .iter()
+        .map(|thumbnail| thumbnail.data_id)
+        .collect::<Vec<i32>>();
+
+    let thumbnails_data  = data::Entity::find()
+        .filter(model::query::condition().is_in(data::Column::Id, thumbnails_ids).build())
+        .all(&ctx.db)
+        .await?;
+
+    let thumbnails_map = thumbnails_data
+        .into_iter()
+        .map(|thumbnail| (thumbnail.id, thumbnail))
+        .collect::<std::collections::HashMap<i32, data::Model>>();
+
     let thumbnails = thumbnails
         .into_iter()
-        .map(|thumbnail| thumbnail.data_id.to_string())
+        .map(|thumbnail| {
+            let thumbnail_data = thumbnails_map.get(&thumbnail.data_id).unwrap();
+            let url = format!("/api/data/{}", thumbnail_data.file_name);
+            url
+        })
         .collect();
+
     let project_dto = ProjectDto {
         id: project.id,
         name: project.name,
@@ -144,15 +164,36 @@ pub async fn get_project_dto(ctx: &AppContext, id: i32) -> Result<ProjectDto> {
 
 pub async fn get_project_dto_by_name(ctx: &AppContext, name: &str) -> Result<ProjectDto> {
     let project = get_project_by_name(ctx, name).await?;
+    
     let thumbnails = project
         .find_related(project_thumbnails::Entity)
         .all(&ctx.db)
         .await?;
 
+    let thumbnails_ids = thumbnails
+        .iter()
+        .map(|thumbnail| thumbnail.data_id)
+        .collect::<Vec<i32>>();
+
+    let thumbnails_data  = data::Entity::find()
+        .filter(model::query::condition().is_in(data::Column::Id, thumbnails_ids).build())
+        .all(&ctx.db)
+        .await?;
+
+    let thumbnails_map = thumbnails_data
+        .into_iter()
+        .map(|thumbnail| (thumbnail.id, thumbnail))
+        .collect::<std::collections::HashMap<i32, data::Model>>();
+
     let thumbnails = thumbnails
         .into_iter()
-        .map(|thumbnail| thumbnail.data_id.to_string())
+        .map(|thumbnail| {
+            let thumbnail_data = thumbnails_map.get(&thumbnail.data_id).unwrap();
+            let url = format!("/api/data/{}", thumbnail_data.file_name);
+            url
+        })
         .collect();
+
     let project_dto = ProjectDto {
         id: project.id,
         name: project.name,