diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 52af528ff..219cab2bf 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -2,7 +2,6 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule, NoPreloading } from '@angular/router';
 
 import { GeneDetailsComponent } from './gene-details/gene-details.component';
-import { GeneAlleleListComponent } from './gene-allele-list/gene-allele-list.component';
 import { GeneProteinFeaturesComponent } from './gene-protein-features/gene-protein-features.component';
 import { GenotypeDetailsComponent } from './genotype-details/genotype-details.component';
 import { AlleleDetailsComponent } from './allele-details/allele-details.component';
@@ -25,13 +24,14 @@ import { IdentifierMapperResultsComponent } from './identifier-mapper-results/id
 import { getAppConfig } from './config';
 import { RefGenesViewComponent } from './ref-genes-view/ref-genes-view.component';
 import { CurationStatsComponent } from './curation-stats/curation-stats.component';
+import { GeneAllelesPageComponent } from './gene-alleles-page/gene-alleles-page.component';
 
 const routes: Routes = [
   { path: 'gene/:uniquename', component: GeneDetailsComponent,
     data: {
     }
   },
-  { path: 'gene_alleles/:uniquename', component: GeneAlleleListComponent,
+  { path: 'gene_alleles/:uniquename', component: GeneAllelesPageComponent,
     data: {
     }
   },
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 8eca84f7a..ff45c7116 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -157,6 +157,7 @@ import { RefGenesViewComponent } from './ref-genes-view/ref-genes-view.component
 import { CurationStatsComponent } from './curation-stats/curation-stats.component';
 import { AnnotationTableWidgetsComponent } from './annotation-table-widgets/annotation-table-widgets.component';
 import { StatsSummaryComponent } from './stats-summary/stats-summary.component';
+import { GeneAllelesPageComponent } from './gene-alleles-page/gene-alleles-page.component';
 
 @Pipe({ name: 'safeUrl' })
 export class SafeUrlPipe implements PipeTransform {
@@ -280,6 +281,7 @@ export class SafeUrlPipe implements PipeTransform {
     CurationStatsComponent,
     AnnotationTableWidgetsComponent,
     StatsSummaryComponent,
+    GeneAllelesPageComponent,
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/gene-allele-list/gene-allele-list.component.css b/src/app/gene-allele-list/gene-allele-list.component.css
index cede4118e..637733b9d 100644
--- a/src/app/gene-allele-list/gene-allele-list.component.css
+++ b/src/app/gene-allele-list/gene-allele-list.component.css
@@ -34,3 +34,7 @@ td {
   padding-left: 0.5em;
   border-left: 2px solid black;
 }
+
+.view-genotype {
+  white-space: nowrap;
+}
diff --git a/src/app/gene-allele-list/gene-allele-list.component.html b/src/app/gene-allele-list/gene-allele-list.component.html
index 3ce6c38ed..d1a2c6b73 100644
--- a/src/app/gene-allele-list/gene-allele-list.component.html
+++ b/src/app/gene-allele-list/gene-allele-list.component.html
@@ -1,85 +1,47 @@
-<div *ngIf="geneDetails" class="gene-alleles-page">
-
-  <div class="details-page-name-and-id">
-    <div class="gene-alleles-name-id">
-      <span class="details-page-name-and-id-prefix">Alleles of:</span>
-      <a routerLink="/gene/{{geneDetails.uniquename}}">
-        <span *ngIf="geneDetails.name">{{geneDetails.name}} ({{geneDetails.uniquename}})</span>
-        <span *ngIf="!geneDetails.name">{{geneDetails.uniquename}}</span>
-      </a>
-    </div>
-  </div>
-
-  <div class="gene-alleles-controls">
-    Show genotypes:
-    <a (click)="showAllGenotypes()">All</a>
-    <a (click)="hideAllGenotypes()">None</a>
-  </div>
-
   <table class="gene-alleles-table">
     <thead>
       <tr>
         <th>
-          <a *ngIf="sortByColumnName != 'name'" (click)="sortBy('name')" title="Click to sort by name" >
+          <a *ngIf="sortByColumnName != 'name' && alleles.length > 1" (click)="sortBy('name')" title="Click to sort by name" >
             Name <img title="Click to sort by name" src="assets/sort_both.svg">
           </a>
-          <span *ngIf="sortByColumnName == 'name'" title="Sorted by name">
-            Name <img title="Sorted by name" src="assets/sort_up.svg">
+          <span *ngIf="sortByColumnName == 'name' || alleles.length == 1" title="Sorted by name">
+            Name <img *ngIf="alleles.length != 1" title="Sorted by name" src="assets/sort_up.svg">
           </span>
         </th>
         <th>
-          <a *ngIf="sortByColumnName != 'description'" (click)="sortBy('description')"title="Click to sort by description">
+          <a *ngIf="sortByColumnName != 'description' && alleles.length > 1" (click)="sortBy('description')"title="Click to sort by description">
             Description <img title="Click to sort by description" src="assets/sort_both.svg">
           </a>
-          <span *ngIf="sortByColumnName == 'description'" title="Sorted by description">
-            Description <img title="Sorted by description" src="assets/sort_up.svg">
+          <span *ngIf="sortByColumnName == 'description' || alleles.length == 1" title="Sorted by description">
+            Description <img *ngIf="alleles.length != 1" title="Sorted by description" src="assets/sort_up.svg">
           </span>
         </th>
 
         <th>
-          <a *ngIf="sortByColumnName != 'type'" (click)="sortBy('type')" title="Click to sort by type">
+          <a *ngIf="sortByColumnName != 'type' && alleles.length > 1" (click)="sortBy('type')" title="Click to sort by type">
             Type <img title="Click to sort by type" src="assets/sort_both.svg">
           </a>
-          <span *ngIf="sortByColumnName == 'type'" title="Sorted by type">
-            Type <img title="Sorted by type" src="assets/sort_up.svg">
+          <span *ngIf="sortByColumnName == 'type' || alleles.length == 1" title="Sorted by type">
+            Type <img *ngIf="alleles.length != 1" title="Sorted by type" src="assets/sort_up.svg">
           </span>
         </th>
-        <th *ngIf="anyVisibleGenotypes()">Expression</th>
-        <th *ngIf="anyVisibleGenotypes()">Genotype</th>
       </tr>
     </thead>
-    <ng-container *ngFor="let allele of alleleTable">
-      <ng-container *ngFor="let expressedAllele of allele.expressedAlleles; let expressedAlleleIndex = index">
-        <tr *ngFor="let genotype of expressedAllele.genotypes; let genotypeIndex = index">
-          <ng-container *ngIf="expressedAlleleIndex == 0 && genotypeIndex == 0">
-            <td *ngIf="expressedAlleleIndex == 0 && genotypeIndex == 0" [attr.rowspan]="alleleRowspan(allele)">
-              <a *ngIf="!deployConfigService.productionMode()" routerLink="/allele/{{allele.alleleUniquename}}">{{allele.alleleName}}</a>
-              <span *ngIf="deployConfigService.productionMode()">{{allele.alleleName}}</span>
-            </td>
-            <td *ngIf="expressedAlleleIndex == 0 && genotypeIndex == 0" [attr.rowspan]="alleleRowspan(allele)">
-              {{allele.alleleDescription}}
-            </td>
-            <td *ngIf="expressedAlleleIndex == 0 && genotypeIndex == 0" [attr.rowspan]="alleleRowspan(allele)">
-              {{allele.alleleType}}
-            </td>
-            <td *ngIf="!genotypesVisible(allele) && anyVisibleGenotypes()">
-
-            </td>
-            <td *ngIf="!genotypesVisible(allele)">
-              <a (click)="showGenotypes(allele)">Show genotypes..</a>
-            </td>
-          </ng-container>
-
-          <td *ngIf="genotypesVisible(allele) && genotypeIndex == 0" [attr.rowspan]="expressedAllele.genotypes.length"
-              class="expression-cell">
-            <div class="expression">{{expressedAllele.expression}}</div>
-          </td>
-          <td class="genotype" *ngIf="genotypesVisible(allele)">
-            <app-genotype-link [genotype]="genotype"></app-genotype-link>
-          </td>
-        </tr>
-      </ng-container>
-    </ng-container>
+    <tr *ngFor="let allele of displayAlleles">
+      <td>
+        <a [popover]="'View details of ' + allele.name" triggers="mouseenter:mouseleave" container="body"
+           routerLink="/allele/{{allele.uniquename}}"><span [innerHtml]="allele.displayName"></span></a>
+      </td>
+      <td>
+        <span [innerHtml]="allele.description"></span>
+      </td>
+      <td>
+        {{allele.alleleType}}
+      </td>
+      <td>
+        <a [popover]="'View details of ' + allele.name" triggers="mouseenter:mouseleave" container="body"
+           class="view-genotype" routerLink="/allele/{{allele.uniquename}}">View genotypes..</a>
+      </td>
+    </tr>
   </table>
-
-</div>
diff --git a/src/app/gene-allele-list/gene-allele-list.component.ts b/src/app/gene-allele-list/gene-allele-list.component.ts
index 689a15ef1..8cd4dc77c 100644
--- a/src/app/gene-allele-list/gene-allele-list.component.ts
+++ b/src/app/gene-allele-list/gene-allele-list.component.ts
@@ -1,153 +1,74 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
 
-import { ActivatedRoute, Params } from '@angular/router';
-import { GeneDetails, PombaseAPIService, GenotypeShort,
-         AlleleShort } from '../pombase-api.service';
-import { DeployConfigService } from '../deploy-config.service';
-import { Util } from '../shared/util';
+import { AlleleShort } from '../pombase-api.service';
 
-class AlleleSection {
-  public nameAndDescription: string;
-
-  constructor(public alleleUniquename: string,
-              public alleleName: string,
-              public alleleDescription: string,
-              public alleleType: string,
-              public expressedAlleles: Array<ExpressedAlleleSection>) {
-    this.alleleName = Util.tidyAlleleName(alleleName);
-
-    let description = this.alleleDescription;
-
-    if (!description) {
-      description = 'unknown';
-      this.alleleDescription = '';
-    }
-
-    this.nameAndDescription = name + '(' + description + ')';
-  }
-
-  expressedAlleleCount(): number {
-    return this.expressedAlleles.length;
-  }
-
-  genotypeCount(): number {
-    let count = 0;
-
-    for (const expressedAllele of this.expressedAlleles) {
-      count += expressedAllele.genotypes.length;
-    }
-
-    return count;
+class DisplayAllele {
+  displayName: string;
+  constructor(public uniquename: string,
+              public name: string,
+              public description: string,
+              public alleleType: string) {
+    this.displayName = this.name.replace(/,/g, ',&#8203;');
+    this.description = this.description.replace(/,/g, ',&#8203;');
   }
-}
-
-class ExpressedAlleleSection {
-  constructor(public expression: string, public genotypes: Array<GenotypeShort>) {
 
+  nameDescription(): string {
+    return (this.name || 'unknown') + '(' + (this.name || 'unknown') + ')';
   }
 }
 
-type ExpressedAlleleMap = { [expression: string]: Array<GenotypeShort> };
-type AlleleMap = { [alleleUniquename: string]: ExpressedAlleleMap };
-
-function genotypeSorter(g1: GenotypeShort, g2: GenotypeShort) {
-  if (g1.loci.length < g2.loci.length) {
-    return -1;
-  }
-  if (g1.loci.length > g2.loci.length) {
-    return 1;
-  }
-
-  if (g1.loci[0].expressed_alleles.length < g2.loci[0].expressed_alleles.length) {
-    return -1;
-  }
-  if (g1.loci[0].expressed_alleles.length > g2.loci[0].expressed_alleles.length) {
-    return 1;
-  }
-
-  return g1.displayNameLong.localeCompare(g2.displayNameLong);
-}
-
 @Component({
   selector: 'app-gene-allele-list',
   templateUrl: './gene-allele-list.component.html',
   styleUrls: ['./gene-allele-list.component.css']
 })
-export class GeneAlleleListComponent implements OnInit {
-  @Input() geneDetails: GeneDetails;
-
-  alleleTable: Array<AlleleSection>;
-  sortByColumnName: string = 'type';
-
-  genotypeVisible: { [key: string ]: boolean } = {};
-
-  constructor(private pombaseApiService: PombaseAPIService,
-              private route: ActivatedRoute,
-              public deployConfigService: DeployConfigService) { }
+export class GeneAlleleListComponent implements OnChanges {
+  @Input() alleles: Array<AlleleShort>;
 
-  genotypesVisible(allele: AlleleSection): boolean {
-    return !!this.genotypeVisible[allele.alleleUniquename];
-  }
-
-  anyVisibleGenotypes(): boolean {
-    return Object.keys(this.genotypeVisible).length > 0;
-  }
-
-  showGenotypes(allele: AlleleSection): void {
-    this.genotypeVisible[allele.alleleUniquename] = true;
-  }
-
-  showAllGenotypes(): void {
-    for (const allele of this.alleleTable) {
-      this.genotypeVisible[allele.alleleUniquename] = true;
-    }
-  }
+  displayAlleles: Array<DisplayAllele> = [];
 
-  hideAllGenotypes(): void {
-    this.genotypeVisible = {};
-  }
+  sortByColumnName: string = 'type';
 
-  alleleRowspan(allele: AlleleSection): number {
-    if (this.genotypesVisible(allele)) {
-      return allele.genotypeCount();
-    } else {
-      return 1;
-    }
-  }
+  constructor() { }
 
   sortBy(columnName: 'name'|'description'|'type'): void {
     this.sortByColumnName = columnName;
 
-    this.sortTable();
+    this.makeTable();
   }
 
-  sortTable(): void {
+  makeTable(): void {
+    this.displayAlleles =
+      this.alleles.map(a => {
+        return new DisplayAllele(a.uniquename, a.name, a.description, a.allele_type);
+      });
+
     if (this.sortByColumnName == 'type') {
-      this.alleleTable.sort((a, b) => {
+      this.displayAlleles.sort((a, b) => {
         if (a.alleleType === b.alleleType) {
-          return a.nameAndDescription.localeCompare(b.nameAndDescription);
+          return a.nameDescription().localeCompare(b.nameDescription());
         } else {
           return a.alleleType.localeCompare(b.alleleType);
         }
       });
     } else {
-      this.alleleTable.sort((a, b) => {
+      this.displayAlleles.sort((a, b) => {
         let result;
 
         if (this.sortByColumnName === 'name') {
-          result = a.alleleName.localeCompare(b.alleleName);
+          result = a.name.localeCompare(b.name);
         } else {
-          if (a.alleleDescription.length == 0 && b.alleleDescription.length == 0) {
+          if (a.description.length == 0 && b.description.length == 0) {
             result = 0;
           } else {
-            if (a.alleleDescription.length == 0) {
+            if (a.description.length == 0) {
               // missing / blank description sort last
               result = 1;
             } else {
-              if (b.alleleDescription.length == 0) {
+              if (b.description.length == 0) {
                 return -1
               } else {
-                result = a.alleleDescription.localeCompare(b.alleleDescription);
+                result = a.description.localeCompare(b.description);
               }
             }
           }
@@ -159,86 +80,10 @@ export class GeneAlleleListComponent implements OnInit {
 
         return result;
       })
-
     }
   }
 
-  makeAlleleTable(): void {
-    this.alleleTable = [];
-
-    const alleleExpressionGenotypeMap: AlleleMap = {};
-
-    const alleleMap: { [alleleUniquename: string]: AlleleShort } = {};
-
-  GENOTYPE:
-    for (const genotypeUniquename of Object.keys(this.geneDetails.genotypes_by_uniquename)) {
-      const genotypeShort = this.geneDetails.genotypes_by_uniquename[genotypeUniquename];
-
-      for (const locus of genotypeShort.loci) {
-        for (const expressedAllele of locus.expressed_alleles) {
-          const allele = expressedAllele.allele;
-
-          if (allele.gene_uniquename !== this.geneDetails.uniquename) {
-            continue;
-          }
-
-          if (!alleleMap[allele.uniquename]) {
-            alleleMap[allele.uniquename] = allele;
-          }
-
-          if (!alleleExpressionGenotypeMap[allele.uniquename]) {
-            alleleExpressionGenotypeMap[allele.uniquename] = {};
-          }
-
-          const expressedAlleleMap = alleleExpressionGenotypeMap[allele.uniquename];
-
-          if (!expressedAlleleMap[expressedAllele.expression]) {
-            expressedAlleleMap[expressedAllele.expression] = [];
-          }
-
-          expressedAlleleMap[expressedAllele.expression].push(genotypeShort);
-        }
-      }
-    }
-
-    for (const [alleleUniquename, expressedAlleleMap] of Object.entries(alleleExpressionGenotypeMap)) {
-      const expressedAlleleSections = [];
-      for (const [expression, genotypes] of Object.entries(expressedAlleleMap)) {
-        genotypes.sort(genotypeSorter);
-        expressedAlleleSections.push(new ExpressedAlleleSection(expression, genotypes));
-      }
-
-      expressedAlleleSections.sort((a, b) =>
-        a.expression.localeCompare(b.expression)
-      );
-
-      const alleleShort = alleleMap[alleleUniquename];
-
-      const alleleName = alleleShort.name;
-      const alleleDescription = alleleShort.description;
-      const alleleType = alleleShort.allele_type;
-
-      const alleleSection =
-        new AlleleSection(alleleUniquename, alleleName, alleleDescription, alleleType,
-                          expressedAlleleSections);
-      this.alleleTable.push(alleleSection);
-    }
-
-    this.sortTable();
-  }
-
-  ngOnInit(): void {
-    this.route.params.forEach((params: Params) => {
-      if (params['uniquename'] !== undefined) {
-          let uniquename = params['uniquename'];
-
-          this.pombaseApiService.getGene(uniquename)
-            .then(geneDetails => {
-              this.geneDetails = geneDetails;
-
-              this.makeAlleleTable();
-            });
-      }
-    })
+  ngOnChanges(changes: SimpleChanges): void {
+    this.makeTable();
   }
 }
diff --git a/src/app/gene-alleles-page/gene-alleles-page.component.css b/src/app/gene-alleles-page/gene-alleles-page.component.css
new file mode 100644
index 000000000..9ad876a35
--- /dev/null
+++ b/src/app/gene-alleles-page/gene-alleles-page.component.css
@@ -0,0 +1,7 @@
+.allele-section {
+  padding-bottom: 1em;
+}
+
+.deletion, .wild-type {
+  font-size: 150%;
+}
\ No newline at end of file
diff --git a/src/app/gene-alleles-page/gene-alleles-page.component.html b/src/app/gene-alleles-page/gene-alleles-page.component.html
new file mode 100644
index 000000000..c7989dc88
--- /dev/null
+++ b/src/app/gene-alleles-page/gene-alleles-page.component.html
@@ -0,0 +1,31 @@
+<div *ngIf="geneDetails" class="gene-alleles-page">
+</div>
+<div *ngIf="geneDetails" class="gene-alleles-page">
+
+  <div class="details-page-name-and-id">
+    <div class="gene-alleles-name-id">
+      <span class="details-page-name-and-id-prefix">Alleles of:</span>
+      <a routerLink="/gene/{{geneDetails.uniquename}}">
+        <span *ngIf="geneDetails.name">{{geneDetails.name}} ({{geneDetails.uniquename}})</span>
+        <span *ngIf="!geneDetails.name">{{geneDetails.uniquename}}</span>
+      </a>
+    </div>
+  </div>
+
+  <div class="allele-section deletion" *ngIf="deletionAlleles.length > 0">
+    Deletion allele: <a routerLink="/allele/{{deletionAlleles[0].uniquename}}">{{deletionAlleles[0].name}}</a>
+  </div>
+
+  <div class="allele-section wild-type" >
+    Wild type allele<span *ngIf="wildtypeAlleles.length > 1">s</span>:
+    <ul>
+      <li *ngFor="let allele of wildtypeAlleles"><a routerLink="/allele/{{allele.uniquename}}">{{allele.name}}</a></li>
+    </ul>
+  </div>
+  <div class="allele-section" *ngIf="otherAlleles.length > 0">
+    <h4 *ngIf="deletionAlleles.length > 0 || wildtypeAlleles.length > 0">
+      Other alleles:
+    </h4>
+    <app-gene-allele-list [alleles]="otherAlleles"></app-gene-allele-list>
+  </div>
+</div>
diff --git a/src/app/gene-alleles-page/gene-alleles-page.component.spec.ts b/src/app/gene-alleles-page/gene-alleles-page.component.spec.ts
new file mode 100644
index 000000000..c572c6e57
--- /dev/null
+++ b/src/app/gene-alleles-page/gene-alleles-page.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GeneAllelesPageComponent } from './gene-alleles-page.component';
+
+describe('GeneAllelesPageComponent', () => {
+  let component: GeneAllelesPageComponent;
+  let fixture: ComponentFixture<GeneAllelesPageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ GeneAllelesPageComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(GeneAllelesPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/gene-alleles-page/gene-alleles-page.component.ts b/src/app/gene-alleles-page/gene-alleles-page.component.ts
new file mode 100644
index 000000000..96e559ef0
--- /dev/null
+++ b/src/app/gene-alleles-page/gene-alleles-page.component.ts
@@ -0,0 +1,75 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+import { ActivatedRoute, Params } from '@angular/router';
+import { GeneDetails, PombaseAPIService, AlleleShort } from '../pombase-api.service';
+import { DeployConfigService } from '../deploy-config.service';
+
+@Component({
+  selector: 'app-gene-alleles-page',
+  templateUrl: './gene-alleles-page.component.html',
+  styleUrls: ['./gene-alleles-page.component.css']
+})
+export class GeneAllelesPageComponent implements OnInit {
+  @Input() geneDetails: GeneDetails;
+
+  deletionAlleles: Array<AlleleShort> = [];
+  wildtypeAlleles: Array<AlleleShort> = [];
+  otherAlleles: Array<AlleleShort> = [];
+
+  constructor(private pombaseApiService: PombaseAPIService,
+              private route: ActivatedRoute,
+              public deployConfigService: DeployConfigService) { }
+
+  makeAlleleTables(): void {
+    this.deletionAlleles = [];
+    this.wildtypeAlleles = [];
+    this.otherAlleles = [];
+
+    const seenAlleles: Set<string> = new Set();
+
+    for (const genotypeUniquename of Object.keys(this.geneDetails.genotypes_by_uniquename)) {
+      const genotypeShort = this.geneDetails.genotypes_by_uniquename[genotypeUniquename];
+
+      for (const locus of genotypeShort.loci) {
+        for (const expressedAllele of locus.expressed_alleles) {
+          const allele = expressedAllele.allele;
+
+          if (allele.gene_uniquename !== this.geneDetails.uniquename) {
+            continue;
+          }
+
+          if (seenAlleles.has(allele.uniquename)) {
+            continue;
+          }
+
+          seenAlleles.add(allele.uniquename);
+
+          if (allele.allele_type == 'deletion') {
+            this.deletionAlleles.push(allele);
+          } else {
+            if (allele.allele_type == 'wild_type') {
+              this.wildtypeAlleles.push(allele);
+            } else {
+              this.otherAlleles.push(allele);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  ngOnInit(): void {
+    this.route.params.forEach((params: Params) => {
+      if (params['uniquename'] !== undefined) {
+        let uniquename = params['uniquename'];
+
+        this.pombaseApiService.getGene(uniquename)
+          .then(geneDetails => {
+            this.geneDetails = geneDetails;
+
+            this.makeAlleleTables();
+          });
+      }
+    })
+  }
+}
diff --git a/src/styles.css b/src/styles.css
index 37a7d889b..a4cf83e79 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -202,7 +202,7 @@ html body hr {
 }
 
 ul {
-  padding-left: 25px;
+  padding-left: 1.5em;
 }
 
 .app-link {