diff --git a/ember/app/components/project-detailed/component.js b/ember/app/components/project-detailed/component.js
new file mode 100644
index 00000000..43b4b370
--- /dev/null
+++ b/ember/app/components/project-detailed/component.js
@@ -0,0 +1,31 @@
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+import { dropTask } from 'ember-concurrency';
+
+export default class ProjectDetailedComponent extends Component {
+  @service notification;
+  @service store;
+  @service fetch;
+
+  syncProject = dropTask(async () => {
+    try {
+      // post request to the api endpoint to sync the project
+      const request = await this.fetch.fetch(
+        `/api/projects/${this.args.project.id}/sync`,
+        {
+          method: 'POST',
+        }
+      );
+      if (request.ok) {
+        this.notification.success('Project synced successfully');
+      } else if (request.status === 404) {
+        this.notification.danger('Project not found');
+      } else if (request.status === 500) {
+        this.notification.danger('An error occurred while syncing the project');
+      }
+    } catch (e) {
+      this.notification.danger(e);
+    }
+    this.store.findRecord('project', this.args.project.id);
+  });
+}
diff --git a/ember/app/components/project-detailed/template.hbs b/ember/app/components/project-detailed/template.hbs
index a999e0f8..dec018b9 100644
--- a/ember/app/components/project-detailed/template.hbs
+++ b/ember/app/components/project-detailed/template.hbs
@@ -14,4 +14,9 @@
 
   <hr class='seperator' />
   <DependencyTable @versionedDependencies={{@project.versionedDependencies}} />
+  <UkButton
+    @label='Sync'
+    @loading={{this.syncProject.isRunning}}
+    @onClick={{perform this.syncProject}}
+  />
 </div>
\ No newline at end of file