diff --git a/src/app/issues/issues.html b/src/app/issues/issues.html
index 43ea1ed..5671232 100644
--- a/src/app/issues/issues.html
+++ b/src/app/issues/issues.html
@@ -27,7 +27,7 @@
             (keydown.enter)="openIssue(issue.id)"
           >
             <td>{{ issue.name }}</td>
-            <td><span class="badge text-bg-secondary">{{ issue.type }}</span></td>
+            <td><span [class]="'badge ' + typeBadgeClass(issue.type)">{{ issue.type }}</span></td>
             <td>{{ issue.priority }}</td>
             <td>{{ issue.status }}</td>
             <td>{{ issue.assignee }}</td>
diff --git a/src/app/issues/issues.ts b/src/app/issues/issues.ts
index 2a842ea..d57e3b7 100644
--- a/src/app/issues/issues.ts
+++ b/src/app/issues/issues.ts
@@ -1,6 +1,6 @@
 import { Component, inject } from '@angular/core';
 import { Router } from '@angular/router';
-import { IssuesStore } from './issues.store';
+import { IssueEntity, IssuesStore } from './issues.store';
 
 @Component({
   selector: 'app-issues',
@@ -24,4 +24,16 @@ export class Issues {
   protected openIssue(issueId: number): void {
     this.router.navigate(['/issues', issueId]);
   }
+
+  protected typeBadgeClass(type: IssueEntity['type']): string {
+    const map: Record<IssueEntity['type'], string> = {
+      Bug: 'text-bg-danger',
+      Study: 'text-bg-secondary',
+      Story: 'text-bg-success',
+      Task: 'text-bg-primary',
+      'Technical Story': 'text-bg-warning',
+      Epic: 'text-bg-info',
+    };
+    return map[type] ?? 'text-bg-secondary';
+  }
 }