diff --git a/components/reps/CharacterRep/index.module.scss b/components/reps/CharacterRep/index.module.scss
index 6ee999b2..64eb801b 100644
--- a/components/reps/CharacterRep/index.module.scss
+++ b/components/reps/CharacterRep/index.module.scss
@@ -75,5 +75,9 @@
       background: var(--dark-hover-bg);
       border-color: var(--dark-bg);
     }
+
+    &.empty {
+      background: var(--card-bg);
+    }
   }
 }
diff --git a/components/reps/CharacterRep/index.tsx b/components/reps/CharacterRep/index.tsx
index 14dcba66..1c72fac5 100644
--- a/components/reps/CharacterRep/index.tsx
+++ b/components/reps/CharacterRep/index.tsx
@@ -74,10 +74,11 @@ const CharacterRep = (props: Props) => {
       source = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/job-portraits/${slug}_${gender}.png`
     }
 
-    return props.job && props.job.id !== '-1' ? (
-      <img alt={props.job ? props.job?.name[locale] : ''} src={source} />
-    ) : (
-      ''
+    return (
+      props.job &&
+      props.job.id !== '-1' && (
+        <img alt={props.job ? props.job?.name[locale] : ''} src={source} />
+      )
     )
   }
 
@@ -117,6 +118,7 @@ const CharacterRep = (props: Props) => {
           className={classNames({
             [styles.protagonist]: true,
             [styles[`${numberToElement()}`]]: true,
+            [styles.empty]: !props.job || props.job.id === '-1',
           })}
         >
           {generateMCImage()}