diff --git a/components/JobDropdown/index.tsx b/components/JobDropdown/index.tsx
index d9c9d891..71fc6eee 100644
--- a/components/JobDropdown/index.tsx
+++ b/components/JobDropdown/index.tsx
@@ -91,7 +91,12 @@ const JobDropdown = React.forwardRef<HTMLSelectElement, Props>(
           .sort((a, b) => a.order - b.order)
           .map((item, i) => {
             return (
-              <SelectItem key={i} value={item.id}>
+              <SelectItem
+                key={i}
+                value={item.id}
+                altText={item.name[locale]}
+                iconSrc={`/images/job-icons/${item.granblue_id}.png`}
+              >
                 {item.name[locale]}
               </SelectItem>
             )
@@ -109,6 +114,10 @@ const JobDropdown = React.forwardRef<HTMLSelectElement, Props>(
     return (
       <Select
         value={currentJob ? currentJob.id : 'no-job'}
+        altText={currentJob ? currentJob.name[locale] : ''}
+        iconSrc={
+          currentJob ? `/images/job-icons/${currentJob.granblue_id}.png` : ''
+        }
         open={open}
         onClick={openJobSelect}
         onOpenChange={() => setOpen(!open)}
diff --git a/components/Select/index.scss b/components/Select/index.scss
index e93026b7..032d9ea5 100644
--- a/components/Select/index.scss
+++ b/components/Select/index.scss
@@ -4,6 +4,7 @@
   border-radius: $input-corner;
   border: none;
   display: flex;
+  gap: $unit;
   padding: $unit-2x $unit-2x;
 
   &.modal {
@@ -56,6 +57,11 @@
     min-width: $unit * 30;
   }
 
+  img {
+    width: $unit-4x;
+    height: auto;
+  }
+
   .SelectIcon {
     display: flex;
     align-items: center;
diff --git a/components/Select/index.tsx b/components/Select/index.tsx
index ca0e0cf9..484ac4ab 100644
--- a/components/Select/index.tsx
+++ b/components/Select/index.tsx
@@ -14,6 +14,8 @@ interface Props
     React.SelectHTMLAttributes<HTMLSelectElement>,
     HTMLSelectElement
   > {
+  altText?: string
+  iconSrc?: string
   open: boolean
   trigger?: React.ReactNode
   children?: React.ReactNode
@@ -79,6 +81,7 @@ const Select = React.forwardRef<HTMLButtonElement, Props>(function Select(
         placeholder={props.placeholder}
         ref={forwardedRef}
       >
+        {props.iconSrc ? <img alt={props.altText} src={props.iconSrc} /> : ''}
         <RadixSelect.Value placeholder={props.placeholder} />
         {!props.disabled ? (
           <RadixSelect.Icon className="SelectIcon">
diff --git a/components/SelectItem/index.scss b/components/SelectItem/index.scss
index 11cface5..a07644d3 100644
--- a/components/SelectItem/index.scss
+++ b/components/SelectItem/index.scss
@@ -2,6 +2,8 @@
   border-radius: $item-corner;
   border: 2px solid transparent;
   color: var(--text-tertiary);
+  display: flex;
+  gap: $unit;
   font-size: $font-regular;
   padding: ($unit * 1.5) $unit-2x;
 
@@ -24,4 +26,9 @@
   &:last-child {
     margin-bottom: $unit;
   }
+
+  img {
+    width: $unit-4x;
+    height: auto;
+  }
 }
diff --git a/components/SelectItem/index.tsx b/components/SelectItem/index.tsx
index 5d3eb7c7..12ee6cff 100644
--- a/components/SelectItem/index.tsx
+++ b/components/SelectItem/index.tsx
@@ -6,6 +6,8 @@ import classNames from 'classnames'
 
 interface Props extends ComponentProps<'div'> {
   value: string | number
+  iconSrc?: string
+  altText?: string
 }
 
 const SelectItem = React.forwardRef<HTMLDivElement, Props>(function selectItem(
@@ -19,6 +21,7 @@ const SelectItem = React.forwardRef<HTMLDivElement, Props>(function selectItem(
       ref={forwardedRef}
       value={`${props.value}`}
     >
+      {props.iconSrc ? <img alt={props.altText} src={props.iconSrc} /> : ''}
       <Select.ItemText>{children}</Select.ItemText>
     </Select.Item>
   )