diff --git a/apps/portal/src/components/questions/QuestionTypeBadge.tsx b/apps/portal/src/components/questions/QuestionTypeBadge.tsx
index fe62351e..2f40467d 100644
--- a/apps/portal/src/components/questions/QuestionTypeBadge.tsx
+++ b/apps/portal/src/components/questions/QuestionTypeBadge.tsx
@@ -1,4 +1,12 @@
+import type { ComponentProps } from 'react';
+import {
+  BookOpenIcon,
+  ChatBubbleLeftRightIcon,
+  CodeBracketIcon,
+  WrenchIcon,
+} from '@heroicons/react/20/solid';
 import type { QuestionsQuestionType } from '@prisma/client';
+import type { BadgeVariant } from '@tih/ui';
 import { Badge } from '@tih/ui';
 
 import { QUESTION_TYPES } from '~/utils/questions/constants';
@@ -7,11 +15,29 @@ export type QuestionTypeBadgeProps = {
   type: QuestionsQuestionType;
 };
 
+type BadgeProps = ComponentProps<typeof Badge>;
+
+const variantMap: Record<QuestionsQuestionType, BadgeVariant> = {
+  BEHAVIORAL: 'danger',
+  CODING: 'info',
+  SYSTEM_DESIGN: 'warning',
+  THEORY: 'success',
+};
+
+const iconMap: Record<QuestionsQuestionType, Required<BadgeProps>['endAddOn']> =
+  {
+    BEHAVIORAL: ChatBubbleLeftRightIcon,
+    CODING: CodeBracketIcon,
+    SYSTEM_DESIGN: WrenchIcon,
+    THEORY: BookOpenIcon,
+  };
+
 export default function QuestionTypeBadge({ type }: QuestionTypeBadgeProps) {
   return (
     <Badge
       label={QUESTION_TYPES.find(({ value }) => value === type)!.label}
-      variant="info"
+      startAddOn={iconMap[type]}
+      variant={variantMap[type]}
     />
   );
 }