diff --git a/css/tab.css b/css/tab.css
index 28e9bb2d1..300d85795 100644
--- a/css/tab.css
+++ b/css/tab.css
@@ -9,4 +9,5 @@ span.icon-openproject {
 
 #tab-open-project {
 	height: 100%;
+	padding: 0;
 }
diff --git a/src/components/tab/SearchInput.vue b/src/components/tab/SearchInput.vue
index 132834a79..4a0b73766 100644
--- a/src/components/tab/SearchInput.vue
+++ b/src/components/tab/SearchInput.vue
@@ -178,6 +178,10 @@ export default {
 }
 </script>
 <style scoped lang="scss">
+#searchBar {
+	padding: 10px;
+}
+
 .searchInput {
 	width: 100%;
 }
diff --git a/src/components/tab/WorkPackage.vue b/src/components/tab/WorkPackage.vue
index 39759449d..17e1263f1 100644
--- a/src/components/tab/WorkPackage.vue
+++ b/src/components/tab/WorkPackage.vue
@@ -56,7 +56,7 @@ export default {
 <style scoped lang="scss">
 .workpackage {
 	width: 100%;
-	padding: 10px 6px 0 6px;
+	padding: 15px 6px 0 10px;
 
 	.row {
 		display: flex;
@@ -76,10 +76,10 @@ export default {
 			margin-right: 4px;
 
 			&__title {
-				mix-blend-mode: multiply;
 				font-size: 0.75rem;
 				line-height: 14px;
 				text-align: center;
+				filter: contrast(0) brightness(0);
 			}
 		}
 
@@ -123,4 +123,8 @@ export default {
 		}
 	}
 }
+
+.workpackage div {
+	cursor: pointer;
+}
 </style>
diff --git a/src/views/ProjectsTab.vue b/src/views/ProjectsTab.vue
index e48f55b54..039e8322f 100644
--- a/src/views/ProjectsTab.vue
+++ b/src/views/ProjectsTab.vue
@@ -31,10 +31,15 @@
 			<div class="existing-relations">
 				{{ t('integration_openproject', 'Existing relations:') }}
 			</div>
-			<WorkPackage v-for="(workpackage, index) in workpackages"
+			<div v-for="(workpackage, index) in workpackages"
 				:key="workpackage.id"
-				:workpackage="workpackage"
-				:class="{ 'workpackage-seperator': index !== workpackages.length-1 }" />
+				class="linked-workpackages">
+				<div class="linked-workpackages--workpackage">
+					<WorkPackage :workpackage="workpackage" />
+					<div class="linked-workpackages--workpackage--unlink icon-noConnection" />
+				</div>
+				<div :class="{ 'workpackage-seperator': index !== workpackages.length-1 }" />
+			</div>
 		</div>
 		<EmptyContent v-else
 			id="openproject-empty-content"
@@ -70,6 +75,9 @@ export default {
 		isLoading() {
 			return this.state === 'loading'
 		},
+		unlinkSvg() {
+			return require('../../img/noConnection.svg')
+		},
 	},
 	methods: {
 		/**
@@ -159,8 +167,39 @@ export default {
 		top: 140%;
 	}
 
-	.workpackage-seperator{
+	.linked-workpackages--workpackage{
+		display: flex;
+		position: relative;
+		width: 100%;
+		&--unlink{
+			position: absolute;
+			top: 12px;
+			right: 14px;
+			height: 15px;
+			width: 18px;
+			align-items: center;
+			filter: contrast(0) brightness(0);
+			visibility: hidden;
+		}
+	}
+
+	.linked-workpackages:hover {
+		background-color: var(--color-background-dark);
+	}
+
+	.linked-workpackages:hover .linked-workpackages--workpackage--unlink {
+		visibility: visible;
+		cursor: pointer;
+	}
+
+	.workpackage-seperator {
+		height: 0;
+		margin: 0px 10px;
 		border-bottom: 1px solid rgb(237 237 237);
 	}
 }
+
+body.theme--dark .linked-workpackages--workpackage--unlink{
+	filter: invert(100%);
+}
 </style>
diff --git a/tests/jest/views/__snapshots__/ProjectsTab.spec.js.snap b/tests/jest/views/__snapshots__/ProjectsTab.spec.js.snap
index f5afca962..de4a4da64 100644
--- a/tests/jest/views/__snapshots__/ProjectsTab.spec.js.snap
+++ b/tests/jest/views/__snapshots__/ProjectsTab.spec.js.snap
@@ -5,63 +5,75 @@ exports[`ProjectsTab.vue Test fetchWorkpackages shows the linked workpackages 1`
   <div class="existing-relations">
     integration_openproject
   </div>
-  <div class="workpackage workpackage-seperator">
-    <div class="row">
-      <div class="row__status" style="background-color: rgb(165, 216, 255);">
-        <div class="row__status__title">
-          open
+  <div class="linked-workpackages">
+    <div class="linked-workpackages--workpackage">
+      <div class="workpackage">
+        <div class="row">
+          <div class="row__status" style="background-color: rgb(165, 216, 255);">
+            <div class="row__status__title">
+              open
+            </div>
+          </div>
+          <div class="row__workpackage">
+            #123 - a big project
+          </div>
         </div>
-      </div>
-      <div class="row__workpackage">
-        #123 - a big project
-      </div>
-    </div>
-    <div class="row">
-      <div class="row__subject"><span class="row__subject__type" style="color: rgb(0, 176, 240);">
+        <div class="row">
+          <div class="row__subject"><span class="row__subject__type" style="color: rgb(0, 176, 240);">
 				Task
 			</span>
-        my task
-      </div>
-    </div>
-    <div class="row">
-      <div class="row__assignee">
-        <div class="row__assignee__avatar">
-          <avatar-stub size="23" url="http://localhost/apps/integration_openproject/avatar?userId=1&amp;userName=Bal Bahadur Pun" user="Bal Bahadur Pun" display-name="Bal Bahadur Pun" class="item-avatar"></avatar-stub>
+            my task
+          </div>
         </div>
-        <div class="row__assignee__assignee">
-          Bal Bahadur Pun
+        <div class="row">
+          <div class="row__assignee">
+            <div class="row__assignee__avatar">
+              <avatar-stub size="23" url="http://localhost/apps/integration_openproject/avatar?userId=1&amp;userName=Bal Bahadur Pun" user="Bal Bahadur Pun" display-name="Bal Bahadur Pun" class="item-avatar"></avatar-stub>
+            </div>
+            <div class="row__assignee__assignee">
+              Bal Bahadur Pun
+            </div>
+          </div>
         </div>
       </div>
+      <div class="linked-workpackages--workpackage--unlink icon-noConnection"></div>
     </div>
+    <div class="workpackage-seperator"></div>
   </div>
-  <div class="workpackage">
-    <div class="row">
-      <div class="row__status">
-        <div class="row__status__title">
-          प्रगति हुदैछ
+  <div class="linked-workpackages">
+    <div class="linked-workpackages--workpackage">
+      <div class="workpackage">
+        <div class="row">
+          <div class="row__status">
+            <div class="row__status__title">
+              प्रगति हुदैछ
+            </div>
+          </div>
+          <div class="row__workpackage">
+            #589 - नेपालको विकास गर्ने
+          </div>
         </div>
-      </div>
-      <div class="row__workpackage">
-        #589 - नेपालको विकास गर्ने
-      </div>
-    </div>
-    <div class="row">
-      <div class="row__subject"><span class="row__subject__type">
+        <div class="row">
+          <div class="row__subject"><span class="row__subject__type">
 				Epic
 			</span>
-        नेपालमा IT उद्योग बनाउने
-      </div>
-    </div>
-    <div class="row">
-      <div class="row__assignee">
-        <div class="row__assignee__avatar">
-          <avatar-stub size="23" url="http://localhost/apps/integration_openproject/avatar?userId=13&amp;userName=कुमारी नेपाली" user="कुमारी नेपाली" display-name="कुमारी नेपाली" class="item-avatar"></avatar-stub>
+            नेपालमा IT उद्योग बनाउने
+          </div>
         </div>
-        <div class="row__assignee__assignee">
-          कुमारी नेपाली
+        <div class="row">
+          <div class="row__assignee">
+            <div class="row__assignee__avatar">
+              <avatar-stub size="23" url="http://localhost/apps/integration_openproject/avatar?userId=13&amp;userName=कुमारी नेपाली" user="कुमारी नेपाली" display-name="कुमारी नेपाली" class="item-avatar"></avatar-stub>
+            </div>
+            <div class="row__assignee__assignee">
+              कुमारी नेपाली
+            </div>
+          </div>
         </div>
       </div>
+      <div class="linked-workpackages--workpackage--unlink icon-noConnection"></div>
     </div>
+    <div class=""></div>
   </div>
 </div>
 `;
@@ -71,63 +83,75 @@ exports[`ProjectsTab.vue Test fetchWorkpackages shows the linked workpackages 2`
   <div class="existing-relations">
     integration_openproject
   </div>
-  <div class="workpackage workpackage-seperator">
-    <div class="row">
-      <div class="row__status">
-        <div class="row__status__title">
-          open
+  <div class="linked-workpackages">
+    <div class="linked-workpackages--workpackage">
+      <div class="workpackage">
+        <div class="row">
+          <div class="row__status">
+            <div class="row__status__title">
+              open
+            </div>
+          </div>
+          <div class="row__workpackage">
+            #123 - a big project
+          </div>
         </div>
-      </div>
-      <div class="row__workpackage">
-        #123 - a big project
-      </div>
-    </div>
-    <div class="row">
-      <div class="row__subject"><span class="row__subject__type">
+        <div class="row">
+          <div class="row__subject"><span class="row__subject__type">
 				Task
 			</span>
-        my task
-      </div>
-    </div>
-    <div class="row">
-      <div class="row__assignee">
-        <div class="row__assignee__avatar">
-          <avatar-stub size="23" url="http://localhost/apps/integration_openproject/avatar?userId=1&amp;userName=Bal Bahadur Pun" user="Bal Bahadur Pun" display-name="Bal Bahadur Pun" class="item-avatar"></avatar-stub>
+            my task
+          </div>
         </div>
-        <div class="row__assignee__assignee">
-          Bal Bahadur Pun
+        <div class="row">
+          <div class="row__assignee">
+            <div class="row__assignee__avatar">
+              <avatar-stub size="23" url="http://localhost/apps/integration_openproject/avatar?userId=1&amp;userName=Bal Bahadur Pun" user="Bal Bahadur Pun" display-name="Bal Bahadur Pun" class="item-avatar"></avatar-stub>
+            </div>
+            <div class="row__assignee__assignee">
+              Bal Bahadur Pun
+            </div>
+          </div>
         </div>
       </div>
+      <div class="linked-workpackages--workpackage--unlink icon-noConnection"></div>
     </div>
+    <div class="workpackage-seperator"></div>
   </div>
-  <div class="workpackage">
-    <div class="row">
-      <div class="row__status">
-        <div class="row__status__title">
-          प्रगति हुदैछ
+  <div class="linked-workpackages">
+    <div class="linked-workpackages--workpackage">
+      <div class="workpackage">
+        <div class="row">
+          <div class="row__status">
+            <div class="row__status__title">
+              प्रगति हुदैछ
+            </div>
+          </div>
+          <div class="row__workpackage">
+            #589 - नेपालको विकास गर्ने
+          </div>
         </div>
-      </div>
-      <div class="row__workpackage">
-        #589 - नेपालको विकास गर्ने
-      </div>
-    </div>
-    <div class="row">
-      <div class="row__subject"><span class="row__subject__type">
+        <div class="row">
+          <div class="row__subject"><span class="row__subject__type">
 				Epic
 			</span>
-        नेपालमा IT उद्योग बनाउने
-      </div>
-    </div>
-    <div class="row">
-      <div class="row__assignee">
-        <div class="row__assignee__avatar">
-          <avatar-stub size="23" url="http://localhost/apps/integration_openproject/avatar?userId=13&amp;userName=कुमारी नेपाली" user="कुमारी नेपाली" display-name="कुमारी नेपाली" class="item-avatar"></avatar-stub>
+            नेपालमा IT उद्योग बनाउने
+          </div>
         </div>
-        <div class="row__assignee__assignee">
-          कुमारी नेपाली
+        <div class="row">
+          <div class="row__assignee">
+            <div class="row__assignee__avatar">
+              <avatar-stub size="23" url="http://localhost/apps/integration_openproject/avatar?userId=13&amp;userName=कुमारी नेपाली" user="कुमारी नेपाली" display-name="कुमारी नेपाली" class="item-avatar"></avatar-stub>
+            </div>
+            <div class="row__assignee__assignee">
+              कुमारी नेपाली
+            </div>
+          </div>
         </div>
       </div>
+      <div class="linked-workpackages--workpackage--unlink icon-noConnection"></div>
     </div>
+    <div class=""></div>
   </div>
 </div>
 `;
@@ -137,34 +161,40 @@ exports[`ProjectsTab.vue Test onSave shows the just linked workpackage 1`] = `
   <div class="existing-relations">
     integration_openproject
   </div>
-  <div class="workpackage">
-    <div class="row">
-      <div class="row__status" style="background-color: blue;">
-        <div class="row__status__title">
-          in-progress
+  <div class="linked-workpackages">
+    <div class="linked-workpackages--workpackage">
+      <div class="workpackage">
+        <div class="row">
+          <div class="row__status" style="background-color: blue;">
+            <div class="row__status__title">
+              in-progress
+            </div>
+          </div>
+          <div class="row__workpackage">
+            #1 - test
+          </div>
         </div>
-      </div>
-      <div class="row__workpackage">
-        #1 - test
-      </div>
-    </div>
-    <div class="row">
-      <div class="row__subject"><span class="row__subject__type" style="color: red;">
+        <div class="row">
+          <div class="row__subject"><span class="row__subject__type" style="color: red;">
 				task
 			</span>
-        Organize work-packages
-      </div>
-    </div>
-    <div class="row">
-      <div class="row__assignee">
-        <div class="row__assignee__avatar">
-          <avatar-stub size="23" url="/server/index.php/apps/integration_openproject/avatar?userId=1&amp;userName=System" user="test" display-name="test" class="item-avatar"></avatar-stub>
+            Organize work-packages
+          </div>
         </div>
-        <div class="row__assignee__assignee">
-          test
+        <div class="row">
+          <div class="row__assignee">
+            <div class="row__assignee__avatar">
+              <avatar-stub size="23" url="/server/index.php/apps/integration_openproject/avatar?userId=1&amp;userName=System" user="test" display-name="test" class="item-avatar"></avatar-stub>
+            </div>
+            <div class="row__assignee__assignee">
+              test
+            </div>
+          </div>
         </div>
       </div>
+      <div class="linked-workpackages--workpackage--unlink icon-noConnection"></div>
     </div>
+    <div class=""></div>
   </div>
 </div>
 `;