diff --git a/src/app/features/genes/components/gene-hero/gene-hero.component.html b/src/app/features/genes/components/gene-hero/gene-hero.component.html
index 78fef743..81728ab3 100644
--- a/src/app/features/genes/components/gene-hero/gene-hero.component.html
+++ b/src/app/features/genes/components/gene-hero/gene-hero.component.html
@@ -22,6 +22,10 @@ <h4 class="gene-hero-biodomains-heading">Biological Domains</h4>
             {{ getBiodomains() }}
           </p>
         </div>
+        <div *ngIf="gene.druggability[0].pharos_class" class="gene-hero-pharos">
+          <h4 class="gene-hero-pharos-heading">Pharos Class</h4>
+          <p>{{ gene.druggability[0].pharos_class }}</p>
+        </div>
         <div class="gene-hero-aliases">
           <h4 class="gene-hero-aliases-heading">Also known as</h4>
           <ng-container *ngIf="getEnsemblUrl() !== ''">
diff --git a/src/app/features/genes/components/gene-hero/gene-hero.component.scss b/src/app/features/genes/components/gene-hero/gene-hero.component.scss
index f2c8c354..332c004f 100644
--- a/src/app/features/genes/components/gene-hero/gene-hero.component.scss
+++ b/src/app/features/genes/components/gene-hero/gene-hero.component.scss
@@ -38,7 +38,17 @@ hr {
 }
 
 .gene-hero-biodomains {
-  margin-bottom: 30px;
+  margin-bottom: 15px;
+  
+  p {
+    margin-left: 10px;
+  }
+}
+
+.gene-hero-pharos {
+  p {
+    margin-left: 10px;
+  }
 }
 
 .gene-hero-summary {
@@ -49,7 +59,7 @@ hr {
   font-style: italic;
 }
 
-.gene-hero-aliases-heading, .gene-hero-biodomains-heading {
+.gene-hero-aliases-heading, .gene-hero-biodomains-heading, .gene-hero-pharos-heading {
   text-transform: uppercase;
   margin-bottom: 15px;
 }