diff --git a/app/components/public/sponsor-item.hbs b/app/components/public/sponsor-item.hbs
new file mode 100644
index 00000000000..d50408661bf
--- /dev/null
+++ b/app/components/public/sponsor-item.hbs
@@ -0,0 +1,5 @@
+<div class="ui column">
+  <a href="{{@sponsor.url}}" target="_blank" rel="noopener nofollow">
+    <img src="{{@sponsor.logoUrl}}" height="250" width="250" class="ui image sponsor-image" alt="{{@sponsor.name}}">
+  </a>
+</div>
diff --git a/app/components/public/sponsor-item.js b/app/components/public/sponsor-item.js
deleted file mode 100644
index 91ac340652f..00000000000
--- a/app/components/public/sponsor-item.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import classic from 'ember-classic-decorator';
-import { classNames } from '@ember-decorators/component';
-import Component from '@ember/component';
-
-@classic
-@classNames('ui', 'column')
-export default class SponsorItem extends Component {}
diff --git a/app/components/public/sponsor-list.hbs b/app/components/public/sponsor-list.hbs
new file mode 100644
index 00000000000..434cbea3b82
--- /dev/null
+++ b/app/components/public/sponsor-list.hbs
@@ -0,0 +1,10 @@
+{{#each-in this.sponsorsGrouped as |key sponsorsGroup|}}
+  {{#if (not-eq key 'null')}}
+    <h4 class="ui header">{{key}}</h4>
+  {{/if}}
+  <div class="ui {{sponsorsGroup.columns}} column stackable grid">
+    {{#each sponsorsGroup.sponsors as |sponsor|}}
+      <Public::SponsorItem @sponsor={{sponsor}} />
+    {{/each}}
+  </div>
+{{/each-in}}
diff --git a/app/components/public/sponsor-list.js b/app/components/public/sponsor-list.js
deleted file mode 100644
index 2c24b910e41..00000000000
--- a/app/components/public/sponsor-list.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import classic from 'ember-classic-decorator';
-import { computed } from '@ember/object';
-import Component from '@ember/component';
-import { orderBy, groupBy } from 'lodash-es';
-
-@classic
-export default class SponsorList extends Component {
-  @computed('sponsors.[]')
-  get sponsorsGrouped() {
-    return groupBy(
-      orderBy(
-        this.sponsors.toArray(),
-        sponsor => sponsor.get('level')
-      ),
-      sponsor => sponsor.get('type')
-    );
-  }
-}
diff --git a/app/components/public/sponsor-list.ts b/app/components/public/sponsor-list.ts
new file mode 100644
index 00000000000..7bfeab319be
--- /dev/null
+++ b/app/components/public/sponsor-list.ts
@@ -0,0 +1,58 @@
+import { computed } from '@ember/object';
+import Component from '@glimmer/component';
+import { orderBy, groupBy } from 'lodash-es';
+
+interface Sponsor { level: number, type: string }
+
+interface Args {
+  sponsors: Sponsor[]
+}
+
+interface GroupedSponsors { [key: string]: { sponsors: Sponsor[], columns: string } }
+
+export default class SponsorList extends Component<Args> {
+
+  getDistinctLevels(sponsors: Sponsor[]): number[] {
+    const levels = new Set(sponsors.toArray().map(sponsor => sponsor.level).filter(level => level != null));
+    return [...levels].sort((a, b) => a - b);
+  }
+
+  @computed('sponsors.[]')
+  get distinctLevels(): number[] {
+    return this.getDistinctLevels(this.args.sponsors);
+  }
+
+  inferColumns(sponsors: Sponsor[]): string {
+    const levels = this.distinctLevels;
+    const groupLevels = this.getDistinctLevels(sponsors);
+
+    const groupLevel = groupLevels.pop();
+    if (groupLevel !== null && groupLevel !== undefined) {
+      const index = levels.indexOf(groupLevel);
+      const columns = ['three', 'four', 'five', 'six', 'seven'];
+      return columns[Math.min(index, columns.length - 1)];
+    }
+
+    return 'three';
+  }
+
+  @computed('sponsors.[]')
+  get sponsorsGrouped(): GroupedSponsors {
+    const grouped = groupBy(
+      orderBy(
+        this.args.sponsors.toArray(),
+        sponsor => sponsor.level
+      ),
+      sponsor => sponsor.type
+    );
+
+    const finalGrouped: GroupedSponsors = {};
+    for (const [key, sponsors] of Object.entries(grouped)) {
+      finalGrouped[key] = {
+        sponsors,
+        columns: this.inferColumns(sponsors)
+      };
+    }
+    return finalGrouped;
+  }
+}
diff --git a/app/controllers/register.js b/app/controllers/register.js
index 7a071a7b713..2bea5c8372f 100644
--- a/app/controllers/register.js
+++ b/app/controllers/register.js
@@ -22,7 +22,7 @@ export default class RegisterController extends Controller {
     this.model.save()
       .then(user => {
         this.set('session.newUser', user.get('email'));
-          this.send('loginExistingUser', user.get('email'), password, this.inviteToken, this.event);
+        this.send('loginExistingUser', user.get('email'), password, this.inviteToken, this.event);
       })
       .catch(reason => {
         if (reason && Object.prototype.hasOwnProperty.call(reason, 'errors') && reason.errors[0].status === 409) {
diff --git a/app/templates/components/public/sponsor-list.hbs b/app/templates/components/public/sponsor-list.hbs
deleted file mode 100644
index 7324a3aad58..00000000000
--- a/app/templates/components/public/sponsor-list.hbs
+++ /dev/null
@@ -1,10 +0,0 @@
-{{#each-in this.sponsorsGrouped as |key sponsors|}}
-  {{#if (not-eq key 'null')}}
-    <h4 class="ui header">{{key}}</h4>
-  {{/if}}
-  <div class="ui three column stackable grid">
-    {{#each sponsors as |sponsor|}}
-      <Public::SponsorItem @sponsor={{sponsor}} />
-    {{/each}}
-  </div>
-{{/each-in}}