diff --git a/Gemfile b/Gemfile
index dcde42124bb1..bf85bb88afd5 100644
--- a/Gemfile
+++ b/Gemfile
@@ -363,6 +363,6 @@ gemfiles.each do |file|
   send(:eval_gemfile, file) if File.readable?(file)
 end
 
-gem "openproject-primer_view_components", '~>0.10.0'
+gem "openproject-primer_view_components", '~>0.11.0'
 gem "openproject-octicons", '~>19.7.0'
 gem "openproject-octicons_helper", '~>19.7.0'
diff --git a/Gemfile.lock b/Gemfile.lock
index 2ada5a65da8a..f1c8590d9192 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -680,7 +680,7 @@ GEM
       actionview
       openproject-octicons (= 19.7.0)
       railties
-    openproject-primer_view_components (0.10.0)
+    openproject-primer_view_components (0.11.0)
       actionview (>= 5.0.0)
       activesupport (>= 5.0.0)
       openproject-octicons (>= 19.7.0)
@@ -1114,7 +1114,7 @@ DEPENDENCIES
   openproject-octicons (~> 19.7.0)
   openproject-octicons_helper (~> 19.7.0)
   openproject-openid_connect!
-  openproject-primer_view_components (~> 0.10.0)
+  openproject-primer_view_components (~> 0.11.0)
   openproject-recaptcha!
   openproject-reporting!
   openproject-storages!
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index fd0156aa4da4..2055d0314939 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -46,7 +46,7 @@
         "@ngneat/content-loader": "^7.0.0",
         "@ngx-formly/core": "^6.1.4",
         "@openproject/octicons-angular": "^19.7.0",
-        "@openproject/primer-view-components": "^0.10.0",
+        "@openproject/primer-view-components": "^0.11.0",
         "@openproject/reactivestates": "^3.0.1",
         "@primer/css": "^21.0.2",
         "@uirouter/angular": "^12.0.0",
@@ -5495,9 +5495,9 @@
       }
     },
     "node_modules/@openproject/primer-view-components": {
-      "version": "0.10.0",
-      "resolved": "https://registry.npmjs.org/@openproject/primer-view-components/-/primer-view-components-0.10.0.tgz",
-      "integrity": "sha512-NbUC2Mz07zLBwxbDVWUuQbIKC0NJxXOB1l7EkxzOs8VtVR/2npEAvkMCDi+kFPHEdQz1pp3WbNF6bRKHwFxYlg==",
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@openproject/primer-view-components/-/primer-view-components-0.11.0.tgz",
+      "integrity": "sha512-C99NGJNBvXM+3hB7mIb7z8LcCYJD66YuavWuyTXj7syN0w59AhxUo8L3wYQrOMCFJJqL4O8o3cttUAChVDKDFQ==",
       "dependencies": {
         "@github/auto-check-element": "^5.2.0",
         "@github/auto-complete-element": "^3.3.4",
@@ -5580,9 +5580,9 @@
     },
     "node_modules/@primer/view-components": {
       "name": "@openproject/primer-view-components",
-      "version": "0.10.0",
-      "resolved": "https://registry.npmjs.org/@openproject/primer-view-components/-/primer-view-components-0.10.0.tgz",
-      "integrity": "sha512-NbUC2Mz07zLBwxbDVWUuQbIKC0NJxXOB1l7EkxzOs8VtVR/2npEAvkMCDi+kFPHEdQz1pp3WbNF6bRKHwFxYlg==",
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@openproject/primer-view-components/-/primer-view-components-0.11.0.tgz",
+      "integrity": "sha512-C99NGJNBvXM+3hB7mIb7z8LcCYJD66YuavWuyTXj7syN0w59AhxUo8L3wYQrOMCFJJqL4O8o3cttUAChVDKDFQ==",
       "dependencies": {
         "@github/auto-check-element": "^5.2.0",
         "@github/auto-complete-element": "^3.3.4",
@@ -34774,9 +34774,9 @@
       }
     },
     "@openproject/primer-view-components": {
-      "version": "0.10.0",
-      "resolved": "https://registry.npmjs.org/@openproject/primer-view-components/-/primer-view-components-0.10.0.tgz",
-      "integrity": "sha512-NbUC2Mz07zLBwxbDVWUuQbIKC0NJxXOB1l7EkxzOs8VtVR/2npEAvkMCDi+kFPHEdQz1pp3WbNF6bRKHwFxYlg==",
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@openproject/primer-view-components/-/primer-view-components-0.11.0.tgz",
+      "integrity": "sha512-C99NGJNBvXM+3hB7mIb7z8LcCYJD66YuavWuyTXj7syN0w59AhxUo8L3wYQrOMCFJJqL4O8o3cttUAChVDKDFQ==",
       "requires": {
         "@github/auto-check-element": "^5.2.0",
         "@github/auto-complete-element": "^3.3.4",
@@ -34832,7 +34832,7 @@
       "integrity": "sha512-kk0TfLqtGwGYJ/qXGLMXDIL4d3qWPjlEB12Hvk08krulbsQRWEsnXjejBIvJG69GyOOuYxXNoHvP2NGenxQ8Jw==",
       "requires": {
         "@primer/primitives": "^7.12.0",
-        "@primer/view-components": "npm:@openproject/primer-view-components@^0.10.0"
+        "@primer/view-components": "npm:@openproject/primer-view-components@^0.11.0"
       }
     },
     "@primer/primitives": {
@@ -34841,9 +34841,9 @@
       "integrity": "sha512-QKNxfWm7Ik1Ulswyp3KeUL2xnQj8i0E7DdB6lOrh29o7LgyuutwcOHi4CGapBIOR1fYURu+yROSTHQ2C2aDK7A=="
     },
     "@primer/view-components": {
-      "version": "npm:@openproject/primer-view-components@0.10.0",
-      "resolved": "https://registry.npmjs.org/@openproject/primer-view-components/-/primer-view-components-0.10.0.tgz",
-      "integrity": "sha512-NbUC2Mz07zLBwxbDVWUuQbIKC0NJxXOB1l7EkxzOs8VtVR/2npEAvkMCDi+kFPHEdQz1pp3WbNF6bRKHwFxYlg==",
+      "version": "npm:@openproject/primer-view-components@0.11.0",
+      "resolved": "https://registry.npmjs.org/@openproject/primer-view-components/-/primer-view-components-0.11.0.tgz",
+      "integrity": "sha512-C99NGJNBvXM+3hB7mIb7z8LcCYJD66YuavWuyTXj7syN0w59AhxUo8L3wYQrOMCFJJqL4O8o3cttUAChVDKDFQ==",
       "requires": {
         "@github/auto-check-element": "^5.2.0",
         "@github/auto-complete-element": "^3.3.4",
diff --git a/frontend/package.json b/frontend/package.json
index ddcb89713af5..997234e4db80 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -118,7 +118,7 @@
     "@ngneat/content-loader": "^7.0.0",
     "@ngx-formly/core": "^6.1.4",
     "@openproject/octicons-angular": "^19.7.0",
-    "@openproject/primer-view-components": "^0.10.0",
+    "@openproject/primer-view-components": "^0.11.0",
     "@openproject/reactivestates": "^3.0.1",
     "@primer/css": "^21.0.2",
     "@uirouter/angular": "^12.0.0",
@@ -198,6 +198,6 @@
     "storybook:build": "ng run OpenProject:build-storybook"
   },
   "overrides": {
-    "@primer/view-components": "npm:@openproject/primer-view-components@^0.10.0"
+    "@primer/view-components": "npm:@openproject/primer-view-components@^0.11.0"
   }
 }
diff --git a/frontend/src/stimulus/controllers/dynamic/meeting-agenda-item-drag-and-drop.controller.ts b/frontend/src/stimulus/controllers/dynamic/meeting-agenda-item-drag-and-drop.controller.ts
index 3b65b41f7539..e3e1c0f1d32a 100644
--- a/frontend/src/stimulus/controllers/dynamic/meeting-agenda-item-drag-and-drop.controller.ts
+++ b/frontend/src/stimulus/controllers/dynamic/meeting-agenda-item-drag-and-drop.controller.ts
@@ -39,7 +39,7 @@ export default class extends Controller {
   connect() {
     this.drake = dragula(
       [this.containerTarget],
-      { moves: (_el, _source, handle, _sibling) => !!handle?.classList.contains('handle') },
+      { moves: (_el, _source, handle, _sibling) => !!handle?.classList.contains('octicon-grabber') },
     )
       // eslint-disable-next-line @typescript-eslint/no-misused-promises
       .on('drop', this.drop.bind(this));
diff --git a/modules/meeting/app/components/meeting_agenda_items/item_component/show_component.rb b/modules/meeting/app/components/meeting_agenda_items/item_component/show_component.rb
index b09a0f2a642f..b64bf7742b75 100644
--- a/modules/meeting/app/components/meeting_agenda_items/item_component/show_component.rb
+++ b/modules/meeting/app/components/meeting_agenda_items/item_component/show_component.rb
@@ -111,13 +111,7 @@ def right_column_partial
     end
 
     def drag_handler_partial
-      render(Primer::Beta::Octicon.new(
-               color: :subtle,
-               classes: "handle",
-               style: "cursor: move;",
-               size: :small,
-               icon: :grabber
-             ))
+      render(Primer::OpenProject::DragHandle.new(classes: 'handle'))
     end
 
     def work_package_title_partial
diff --git a/modules/meeting/app/components/meetings/sidebar_component.rb b/modules/meeting/app/components/meetings/sidebar_component.rb
index b4d1318ff7e0..921854c6186c 100644
--- a/modules/meeting/app/components/meetings/sidebar_component.rb
+++ b/modules/meeting/app/components/meetings/sidebar_component.rb
@@ -40,16 +40,10 @@ def initialize(meeting:)
 
     def call
       component_wrapper do
-        flex_layout(pl: 1) do |flex|
-          flex.with_row(border: :bottom, pb: 2) do
-            details_partial
-          end
-          flex.with_row(mt: 3, border: :bottom, pb: 2) do
-            state_partial
-          end
-          flex.with_row(mt: 3) do
-            participants_partial
-          end
+        render(Primer::OpenProject::BorderGrid.new) do |border_grid|
+          border_grid.with_row { details_partial }
+          border_grid.with_row { state_partial }
+          border_grid.with_row { participants_partial }
         end
       end
     end