diff --git a/apps/web/public/assets/hud-elements/ChatGPT Image 19. Aug. 2026, 21_29_37 (1).png b/apps/web/public/assets/hud-elements/ChatGPT Image 19. Aug. 2026, 21_29_37 (1).png
new file mode 100644
index 0000000..85b9d98
Binary files /dev/null and b/apps/web/public/assets/hud-elements/ChatGPT Image 19. Aug. 2026, 21_29_37 (1).png differ
diff --git a/apps/web/public/assets/hud-elements/ChatGPT Image 19. Aug. 2026, 21_29_37 (2).png b/apps/web/public/assets/hud-elements/ChatGPT Image 19. Aug. 2026, 21_29_37 (2).png
new file mode 100644
index 0000000..3d36fe5
Binary files /dev/null and b/apps/web/public/assets/hud-elements/ChatGPT Image 19. Aug. 2026, 21_29_37 (2).png differ
diff --git a/apps/web/public/assets/hud-elements/ChatGPT Image 19. Aug. 2026, 21_29_37 (3).png b/apps/web/public/assets/hud-elements/ChatGPT Image 19. Aug. 2026, 21_29_37 (3).png
new file mode 100644
index 0000000..92d0510
Binary files /dev/null and b/apps/web/public/assets/hud-elements/ChatGPT Image 19. Aug. 2026, 21_29_37 (3).png differ
diff --git a/apps/web/public/assets/hud-elements/ChatGPT Image 19. Aug. 2026, 21_29_37 (5).png b/apps/web/public/assets/hud-elements/ChatGPT Image 19. Aug. 2026, 21_29_37 (5).png
new file mode 100644
index 0000000..efe7d5e
Binary files /dev/null and b/apps/web/public/assets/hud-elements/ChatGPT Image 19. Aug. 2026, 21_29_37 (5).png differ
diff --git a/apps/web/public/assets/hud-elements/ChatGPT Image 19. Aug. 2026, 21_29_37 (6).png b/apps/web/public/assets/hud-elements/ChatGPT Image 19. Aug. 2026, 21_29_37 (6).png
new file mode 100644
index 0000000..c7f1735
Binary files /dev/null and b/apps/web/public/assets/hud-elements/ChatGPT Image 19. Aug. 2026, 21_29_37 (6).png differ
diff --git a/apps/web/public/assets/hud-elements/ChatGPT Image 19. Aug. 2026, 21_29_37 (8).png b/apps/web/public/assets/hud-elements/ChatGPT Image 19. Aug. 2026, 21_29_37 (8).png
new file mode 100644
index 0000000..3a5d3d2
Binary files /dev/null and b/apps/web/public/assets/hud-elements/ChatGPT Image 19. Aug. 2026, 21_29_37 (8).png differ
diff --git a/apps/web/public/assets/hud-elements/character-statusbar.png b/apps/web/public/assets/hud-elements/character-statusbar.png
new file mode 100644
index 0000000..83b5b43
Binary files /dev/null and b/apps/web/public/assets/hud-elements/character-statusbar.png differ
diff --git a/apps/web/public/assets/hud-elements/enemy-card.png b/apps/web/public/assets/hud-elements/enemy-card.png
new file mode 100644
index 0000000..137547d
Binary files /dev/null and b/apps/web/public/assets/hud-elements/enemy-card.png differ
diff --git a/apps/web/public/assets/hud-elements/fight-action-background.png b/apps/web/public/assets/hud-elements/fight-action-background.png
new file mode 100644
index 0000000..3762f25
Binary files /dev/null and b/apps/web/public/assets/hud-elements/fight-action-background.png differ
diff --git a/apps/web/public/assets/hud-elements/statusbar.png b/apps/web/public/assets/hud-elements/statusbar.png
new file mode 100644
index 0000000..c1f3c3b
Binary files /dev/null and b/apps/web/public/assets/hud-elements/statusbar.png differ
diff --git a/apps/web/src/app/layout/top-bar/top-bar.component.scss b/apps/web/src/app/layout/top-bar/top-bar.component.scss
index 1da7ca2..a979a7d 100644
--- a/apps/web/src/app/layout/top-bar/top-bar.component.scss
+++ b/apps/web/src/app/layout/top-bar/top-bar.component.scss
@@ -8,9 +8,13 @@
   align-items: center;
   min-block-size: 5.6rem;
   padding: var(--ar-space-2) var(--ar-space-5);
-  border-block: 1px solid var(--ar-border-highlight);
-  background: linear-gradient(180deg, rgb(255 255 255 / 0.035), transparent 62%), var(--ar-panel);
+  // border-block: 1px solid var(--ar-border-highlight);
+  //background: linear-gradient(180deg, rgb(255 255 255 / 0.035), transparent 62%), var(--ar-panel);
   box-shadow: var(--ar-shadow-raised);
+  background-image: url('../../../../public/assets/hud-elements/statusbar.png');
+  background-repeat: repeat-x;
+  background-size: 547px;
+  background-position: center;
 }
 
 .top-bar__character {
@@ -18,15 +22,22 @@
   align-items: center;
   gap: var(--ar-space-3);
   min-inline-size: 0;
+  background-image: url("../../../../public/assets/hud-elements/character-statusbar.png");
+  background-size: 458px;
+  background-position: left;
+  background-repeat: no-repeat;
 }
 
 .top-bar__portrait {
   inline-size: 4.25rem;
   block-size: 4.25rem;
   object-fit: cover;
-  border: 1px solid var(--ar-border-highlight);
+  // border: 1px solid var(--ar-border-highlight);
   border-radius: 50%;
-  background: #080909;
+  // background: #080909;
+      left: 7px;
+    position: relative;
+    top: -2px;
 }
 
 .top-bar__identity,