diff --git a/app/components/_index.sass b/app/components/_index.sass
index d20f0a29e398..2864192e81fd 100644
--- a/app/components/_index.sass
+++ b/app/components/_index.sass
@@ -2,6 +2,7 @@
 @import "shares/invite_user_form_component"
 @import "work_packages/details/tab_component"
 @import "work_packages/progress/modal_body_component"
+@import "work_packages/hover_card_component"
 @import "work_packages/split_view_component"
 @import "open_project/common/attribute_component"
 @import "open_project/common/submenu_component"
diff --git a/app/components/work_packages/highlighted_type_component.rb b/app/components/work_packages/highlighted_type_component.rb
new file mode 100644
index 000000000000..7a5ba448281e
--- /dev/null
+++ b/app/components/work_packages/highlighted_type_component.rb
@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+class WorkPackages::HighlightedTypeComponent < ApplicationComponent
+  include OpPrimer::ComponentHelpers
+
+  def initialize(work_package:, **system_arguments)
+    super
+
+    @type = work_package.type
+    @system_arguments = system_arguments
+  end
+
+  def call
+    render(Primer::Beta::Text.new(classes: "__hl_inline_type_#{@type.id}"), **@system_arguments) { @type.name.upcase }
+  end
+end
diff --git a/app/components/work_packages/hover_card_component.html.erb b/app/components/work_packages/hover_card_component.html.erb
new file mode 100644
index 000000000000..18f87f8d9835
--- /dev/null
+++ b/app/components/work_packages/hover_card_component.html.erb
@@ -0,0 +1,36 @@
+<%= if @work_package.present?
+  grid_layout('op-wp-hover-card', tag: :div) do |grid|
+    grid.with_area(:status, tag: :div, color: :muted) do
+      render WorkPackages::StatusButtonComponent.new(work_package: @work_package, button_arguments: { size: :small })
+    end
+
+    grid.with_area(:id, tag: :div, color: :muted) do
+      render(Primer::Beta::Text.new(font_size: :small)) { "##{@work_package.id}" }
+    end
+
+    grid.with_area(:project, tag: :div, color: :muted) do
+      render(Primer::Beta::Text.new(font_size: :small)) { "- #{@work_package.project.name}" }
+    end
+
+    grid.with_area(:type, tag: :div) do
+      render(WorkPackages::HighlightedTypeComponent.new(work_package: @work_package))
+    end
+
+    grid.with_area(:subject, tag: :div) do
+      render(Primer::Beta::Text.new(font_weight: :semibold)) { @work_package.subject }
+    end
+
+    if @assignee.present?
+      grid.with_area(:assignee, tag: :div) do
+        render(Users::AvatarComponent.new(user: @assignee, show_name: false, size: :medium))
+      end
+    end
+  end
+ else
+
+    render Primer::Beta::Blankslate.new(border: false, narrow: true) do |component|
+      component.with_visual_icon(icon: "x-circle")
+      component.with_heading(tag: :h3).with_content(I18n.t("api_v3.errors.not_found.work_package"))
+    end
+
+end %>
diff --git a/app/components/work_packages/hover_card_component.rb b/app/components/work_packages/hover_card_component.rb
new file mode 100644
index 000000000000..02979da2eb9a
--- /dev/null
+++ b/app/components/work_packages/hover_card_component.rb
@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+class WorkPackages::HoverCardComponent < ApplicationComponent
+  include OpPrimer::ComponentHelpers
+
+  def initialize(id:)
+    super
+
+    @id = id
+    @work_package = WorkPackage.visible.find_by(id:)
+    @assignee = @work_package.present? ? @work_package.assigned_to : nil
+  end
+end
diff --git a/app/components/work_packages/hover_card_component.sass b/app/components/work_packages/hover_card_component.sass
new file mode 100644
index 000000000000..4f22ecb3daca
--- /dev/null
+++ b/app/components/work_packages/hover_card_component.sass
@@ -0,0 +1,13 @@
+.op-wp-hover-card
+  display: grid
+  align-items: center
+  grid-template-columns: max-content max-content max-content auto auto 1fr
+  grid-template-rows: max-content 1fr auto
+  grid-row-gap: 5px
+  grid-column-gap: 5px
+  grid-template-areas: "status status id project project project" "type subject subject subject subject subject" "assignee assignee . . . ."
+  overflow: hidden
+
+  &--type,
+  &--subject
+    align-self: flex-start
diff --git a/app/components/work_packages/status_button_component.html.erb b/app/components/work_packages/status_button_component.html.erb
new file mode 100644
index 000000000000..f64b7ff56a2f
--- /dev/null
+++ b/app/components/work_packages/status_button_component.html.erb
@@ -0,0 +1,11 @@
+<%=
+  render(Primer::Alpha::ActionMenu.new(**@menu_arguments)) do |menu|
+    menu.with_show_button(**@button_arguments) do |button|
+      button.with_trailing_action_icon(icon: "triangle-down")
+      'Placeholder Status'
+    end
+
+    menu.with_item { "OPTION 1"}
+    menu.with_item { "OPTION 2"}
+  end
+%>
diff --git a/app/components/work_packages/status_button_component.rb b/app/components/work_packages/status_button_component.rb
new file mode 100644
index 000000000000..9117548f80f6
--- /dev/null
+++ b/app/components/work_packages/status_button_component.rb
@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class WorkPackages::StatusButtonComponent < ApplicationComponent
+  include OpPrimer::ComponentHelpers
+
+  def initialize(work_package:, button_arguments: {}, menu_arguments: {})
+    super
+
+    @work_package = work_package
+    @status = work_package.status
+    @menu_arguments = menu_arguments
+
+    @button_arguments = button_arguments.merge({classes: "__hl_background_status_#{@status.id}"})
+  end
+end
diff --git a/app/views/work_packages/hover_card/show.html.erb b/app/views/work_packages/hover_card/show.html.erb
index 8385b69e31d3..d8bb3091633e 100644
--- a/app/views/work_packages/hover_card/show.html.erb
+++ b/app/views/work_packages/hover_card/show.html.erb
@@ -1,3 +1,3 @@
 <turbo-frame id="op-hover-card-body">
-  Hallo WELT
+  <%= render WorkPackages::HoverCardComponent.new(id: @id) %>
 </turbo-frame>
diff --git a/frontend/src/app/shared/components/modals/preview-modal/hover-card-modal/hover-card.modal.ts b/frontend/src/app/shared/components/modals/preview-modal/hover-card-modal/hover-card.modal.ts
index e29089da21b6..c6539e57940a 100644
--- a/frontend/src/app/shared/components/modals/preview-modal/hover-card-modal/hover-card.modal.ts
+++ b/frontend/src/app/shared/components/modals/preview-modal/hover-card-modal/hover-card.modal.ts
@@ -60,6 +60,7 @@ import {
   hostDirectives: [WorkPackageIsolatedQuerySpaceDirective],
 })
 export class HoverCardComponent extends OpModalComponent implements OnInit {
+  // TODO
   @Input() public turboFrameSrc:string = "/work_packages/50/hover_card";
 
   @Input() public alignment?:Placement = 'bottom-end';