diff --git a/src/pinguino/devhub/src/app.css b/src/pinguino/devhub/src/app.css
index 8b5fcd0750de..d0684f45c531 100644
--- a/src/pinguino/devhub/src/app.css
+++ b/src/pinguino/devhub/src/app.css
@@ -1,3 +1,11 @@
+@font-face {
+  font-family: "Mozilla Headline";
+  font-style: normal;
+  font-weight: 200 700;
+  font-display: swap;
+  src: url("./fonts/MozillaHeadline[wdth,wght].woff2") format("woff2");
+}
+
 body {
   margin: 0;
   background-color: var(--background-color-canvas);
diff --git a/src/pinguino/devhub/src/components/addon-version/addon-version.ts b/src/pinguino/devhub/src/components/addon-version/addon-version.ts
new file mode 100644
index 000000000000..b09124a76dc6
--- /dev/null
+++ b/src/pinguino/devhub/src/components/addon-version/addon-version.ts
@@ -0,0 +1,292 @@
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { BASE } from '../../base';
+import {
+  ADDON_STATUS,
+  type Addon,
+  type AddonVisibility,
+  formatDate,
+  updateAddon,
+  type Version,
+  VISIBILITY,
+  versionsQuery,
+} from '../../data';
+import '../../foundations/badges';
+
+const LABELS = ['Version', 'Status', 'Distribution', 'Visibility', 'Date'];
+
+const VISIBILITY_DESCRIPTION: Record<AddonVisibility, string> = {
+  visible:
+    'Visible: Visible to everyone on https://addons.mozilla.org and included in search results and product pages.',
+  invisible:
+    "Won't be included in search results, and its product page will indicate you disabled it. New version submissions for product won't be accepted in this state.",
+};
+
+@customElement('addon-version')
+export class AddonVersion extends LitElement {
+  @property({ attribute: false }) addon!: Addon;
+
+  #versions = versionsQuery(this, () => this.addon?.slug ?? '');
+
+  static styles = css`
+    moz-page-header::part(heading) {
+      font-size: var(--font-size-heading-medium);
+    }
+    .main-content {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-xlarge);
+      padding: var(--space-small);
+    }
+    .version-section {
+      display: flex;
+      flex-direction: column;
+      padding: var(--space-xlarge);
+      gap: var(--space-large);
+      border-radius: var(--border-radius-large);
+      background-color: var(--background-color-canvas);
+    }
+    .version-section.current {
+      background-color: var(--color-violet-desaturated-10);
+    }
+    .section-title {
+      display: flex;
+      align-items: center;
+      gap: var(--space-small);
+      margin: 0;
+      font-size: var(--font-size-small);
+      font-weight: var(--font-weight-semibold);
+      text-transform: uppercase;
+    }
+    .version-list {
+      display: grid;
+      grid-template-columns: repeat(5, minmax(max-content, 1fr)) max-content;
+      column-gap: var(--space-medium);
+      overflow-x: auto;
+    }
+    .version-row {
+      grid-column: 1 / -1;
+      display: grid;
+      grid-template-columns: subgrid;
+      align-items: center;
+      padding: var(--space-xlarge) var(--space-medium);
+    }
+    .version-row:not(.labels) + .version-row {
+      border-top: 1px solid var(--color-gray-20);
+    }
+    .version-row.labels {
+      padding-block: 0 var(--space-small);
+      color: var(--color-black-alpha-70);
+      font-size: var(--font-size-small);
+    }
+    .current .version-row:not(.labels) {
+      padding-block: 0;
+    }
+    .version-row.next-listed-version {
+      position: relative;
+      isolation: isolate;
+    }
+    .version-row.next-listed-version::before {
+      content: '';
+      position: absolute;
+      z-index: -1;
+      inset: var(--space-small) 0;
+      border-radius: var(--border-radius-medium);
+      background-color: var(--background-color-warning);
+      opacity: 50%;
+    }
+    .version-number {
+      font-family: 'Mozilla Headline', var(--font-family);
+      font-size: var(--font-size-heading-xlarge);
+      font-weight: var(--font-weight-semibold);
+    }
+    moz-radio-group > moz-radio:first-of-type {
+      margin-block-start: var(--space-small);
+    }
+    .manage-button {
+      --button-text-color-ghost: var(--color-violet-50);
+    }
+  `;
+
+  async #setVisibility(event: Event) {
+    const visibility = (event.target as HTMLInputElement)
+      .value as AddonVisibility;
+    await updateAddon(this.addon.slug, {
+      is_disabled: visibility === 'invisible',
+    });
+  }
+
+  renderVisibility() {
+    const visibility = this.addon.visibility;
+    return html`
+      <visibility-badge visibility=${visibility} bordered>
+        <moz-radio-group
+          full-width
+          label="Listing visibility"
+          value=${visibility}
+          ?disabled=${this.addon.status === ADDON_STATUS.disabled}
+          @change=${this.#setVisibility}
+        >
+          ${(['visible', 'invisible'] as const).map(
+            (value) => html`<moz-radio
+              value=${value}
+              label=${VISIBILITY[value].label}
+              description=${VISIBILITY_DESCRIPTION[value]}
+            ></moz-radio>`,
+          )}
+        </moz-radio-group>
+      </visibility-badge>
+    `;
+  }
+
+  get #continueUrl() {
+    return `${BASE}/addon/${this.addon.slug}/submit/details`;
+  }
+
+  renderIncompleteMessage() {
+    return html`
+      <moz-message-bar
+        type="warning"
+        heading="Incomplete listing"
+        dismissable
+      >
+        This add-on is missing some required information before it can be submitted for publication.
+        <moz-button variant="muted" slot="actions" href=${this.#continueUrl}
+          >Continue uploading</moz-button
+        >
+      </moz-message-bar>
+    `;
+  }
+
+  renderVersion(
+    version: Version,
+    { nextListed = false, showVisibility = false } = {},
+  ) {
+    const incompleteVersion = this.addon.status === ADDON_STATUS.incomplete;
+    return html`
+      <div
+        class=${classMap({
+          'version-row': true,
+          'next-listed-version': nextListed,
+        })}
+      >
+        <div class="version-number">${version.version}</div>
+        <div>
+          <version-badge
+            status=${version.file.status}
+            ?user-disabled=${version.is_disabled}
+            .reviewed=${version.reviewed}
+          ></version-badge>
+        </div>
+        <div>
+          <distribution-badge
+            distribution=${version.channel ?? 'listed'}
+          ></distribution-badge>
+        </div>
+        <div>${showVisibility ? this.renderVisibility() : '—'}</div>
+        <div class="date">${formatDate(version.file.created)}</div>
+        <moz-button
+          class="manage-button"
+          variant="ghost"
+          href=${incompleteVersion ? this.#continueUrl : version.edit_url}
+          >${incompleteVersion ? 'Continue Uploading' : 'Manage version'}</moz-button
+        >
+      </div>
+    `;
+  }
+
+  renderSection(title: string, rows: unknown, { current = false } = {}) {
+    return html`
+      <div
+        gap="large"
+        class=${classMap({ 'version-section': true, current })}
+      >
+        <h3 class="section-title">${title}</h3>
+        <div class="version-list">
+          <div class="version-row labels">
+            ${LABELS.map((label) => html`<div>${label}</div>`)}
+          </div>
+          ${rows}
+        </div>
+      </div>
+    `;
+  }
+
+  getNextListed(currentVersion: Version, versions: Version[]) {
+    for (const version of versions) {
+      if (
+        version.channel === 'listed' &&
+        version.file.status === 'unreviewed' &&
+        version.id > currentVersion.id &&
+        !version.is_disabled
+      ) {
+        return version.id;
+      }
+    }
+  }
+
+  render() {
+    const versions = this.#versions().data;
+    if (!versions) return nothing;
+    const current = this.addon.currentVersion;
+    const otherVersions = versions.filter(
+      (version) => version.id !== current?.id,
+    );
+    let nextListedId: number | undefined;
+    if (current) {
+      nextListedId = this.getNextListed(current, otherVersions);
+    }
+    return html`
+      <moz-card>
+        <div gap="xlarge" class="main-content">
+          <moz-page-header
+            heading="Version"
+            description="See all your versions at once and easily manage them."
+          >
+            <moz-button
+              slot="actions"
+              variant="primary"
+              icon-start="add"
+              href="${BASE}/addon/${this.addon.slug}/versions/submit/distribution"
+              >Upload a new version</moz-button
+            >
+          </moz-page-header>
+
+          ${
+            this.addon.status === ADDON_STATUS.incomplete
+              ? this.renderIncompleteMessage()
+              : nothing
+          }
+          ${
+            current
+              ? this.renderSection(
+                  'Listed Version',
+                  this.renderVersion(current, { showVisibility: true }),
+                  { current: true },
+                )
+              : nothing
+          }
+          ${
+            otherVersions.length
+              ? this.renderSection(
+                  'Other versions',
+                  otherVersions.map((version) =>
+                    this.renderVersion(version, {
+                      nextListed: version.id === nextListedId,
+                    }),
+                  ),
+                )
+              : nothing
+          }
+        </div>
+      </moz-card>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'addon-version': AddonVersion;
+  }
+}
diff --git a/src/pinguino/devhub/src/data/api.ts b/src/pinguino/devhub/src/data/api.ts
index 7c332761f78e..c9a38fb41486 100644
--- a/src/pinguino/devhub/src/data/api.ts
+++ b/src/pinguino/devhub/src/data/api.ts
@@ -69,7 +69,7 @@ interface ApiAddon {
     thumbnail_url?: string;
     caption?: Localized | null;
   }[];
-  current_version?: { version?: string; license?: { name?: Localized } };
+  current_version?: Version;
   channels: AddonDistribution[];
 }
 
@@ -94,7 +94,7 @@ interface ApiProfile {
 }
 
 export function localized(
-  value: string | Record<string, string> | undefined,
+  value: string | Record<string, string> | null | undefined,
 ): string {
   if (!value) return '';
   if (typeof value === 'string') return value;
@@ -122,7 +122,7 @@ function decodeEntities(s: string): string {
   return el.value;
 }
 
-export function formatDate(iso: string | undefined): string {
+export function formatDate(iso: string | null | undefined): string {
   if (!iso) return '';
   const date = new Date(iso);
   if (Number.isNaN(date.getTime())) return '';
@@ -177,6 +177,7 @@ export function mapAddon(a: ApiAddon): Addon {
     },
     license: undefinedIfEmpty(localized(a.current_version?.license?.name)),
     uuid: a.guid,
+    currentVersion: a.current_version,
   };
 }
 
@@ -498,6 +499,20 @@ export async function patchVersion(
   });
 }
 
+export async function fetchVersions(
+  slug: string,
+  lang: string,
+): Promise<Version[]> {
+  const data = await apiFetch<Paginated<Version>>(
+    `${versionPath(slug)}?${new URLSearchParams({
+      filter: 'all_without_unlisted',
+      lang,
+      page_size: '50',
+    })}`,
+  );
+  return data.results ?? [];
+}
+
 // Ends the current session server-side.
 // Callers should then reload so all client state is rebuilt as signed-out.
 export async function deleteSession(): Promise<void> {
diff --git a/src/pinguino/devhub/src/data/index.ts b/src/pinguino/devhub/src/data/index.ts
index 2fdd525942ac..c26d619958e9 100644
--- a/src/pinguino/devhub/src/data/index.ts
+++ b/src/pinguino/devhub/src/data/index.ts
@@ -1,7 +1,7 @@
 // Public data API for the app. Components attach query controllers and read
 // their reactive results; the query layer handles caching, and dedup.
 
-export { fetchEulaPolicy } from './api';
+export { fetchEulaPolicy, formatDate, localized } from './api';
 export {
   acceptAgreement,
   addonQuery,
@@ -31,6 +31,7 @@ export {
   uploadVersionNotes,
   uploadVersionSource,
   versionQuery,
+  versionsQuery,
 } from './queries';
 export { queryClient } from './query-client';
 export {
diff --git a/src/pinguino/devhub/src/data/queries.ts b/src/pinguino/devhub/src/data/queries.ts
index 2b0cd1980973..4caf66533b53 100644
--- a/src/pinguino/devhub/src/data/queries.ts
+++ b/src/pinguino/devhub/src/data/queries.ts
@@ -21,6 +21,7 @@ import {
   fetchUpdates,
   fetchUpload,
   fetchVersion,
+  fetchVersions,
   patchAddon,
   patchAuthor,
   patchEulaPolicy,
@@ -54,6 +55,7 @@ export const queryKeys = {
   categories: ['categories'] as const,
   upload: (uuid: string) => ['upload', uuid] as const,
   version: (slug: string, id: number) => ['version', slug, id] as const,
+  versions: (slug: string) => ['versions', slug] as const,
 };
 
 // The static category list rarely changes, so keep it for the session.
@@ -310,9 +312,25 @@ export async function createVersion(
   const version = await postVersion(slug, uuid);
   queryClient.setQueryData(queryKeys.version(slug, version.id), version);
   await queryClient.invalidateQueries({ queryKey: queryKeys.upload(uuid) });
+  await queryClient.invalidateQueries({ queryKey: queryKeys.versions(slug) });
   return version;
 }
 
+export function versionsQuery(
+  host: ReactiveControllerHost,
+  getSlug: () => string,
+) {
+  return createQueryController(
+    host,
+    () => ({
+      queryKey: queryKeys.versions(getSlug()),
+      queryFn: () => fetchVersions(getSlug(), LOCALE ?? 'en-US'),
+      enabled: Boolean(getSlug()),
+    }),
+    queryClient,
+  );
+}
+
 async function _updateVersion(
   slug: string,
   id: number,
@@ -320,6 +338,7 @@ async function _updateVersion(
 ): Promise<Version> {
   const version = await patchVersion(slug, id, body);
   queryClient.setQueryData(queryKeys.version(slug, id), version);
+  await queryClient.invalidateQueries({ queryKey: queryKeys.versions(slug) });
   return version;
 }
 
diff --git a/src/pinguino/devhub/src/data/statuses.ts b/src/pinguino/devhub/src/data/statuses.ts
index 849e600e361f..3364cc4f8a75 100644
--- a/src/pinguino/devhub/src/data/statuses.ts
+++ b/src/pinguino/devhub/src/data/statuses.ts
@@ -71,7 +71,7 @@ export type AddonVisibility = 'visible' | 'invisible';
 
 export const VISIBILITY: Record<AddonVisibility, StatusInfo> = {
   visible: { label: 'Visible', badge: 'success' },
-  invisible: { label: 'Invisible', badge: 'ghost' },
+  invisible: { label: 'Hidden', badge: 'ghost' },
 };
 
 // `is_disabled` writes to the author's own setting but reads back true for
diff --git a/src/pinguino/devhub/src/data/types.ts b/src/pinguino/devhub/src/data/types.ts
index a750c70acc3d..83eb33562ee2 100644
--- a/src/pinguino/devhub/src/data/types.ts
+++ b/src/pinguino/devhub/src/data/types.ts
@@ -80,6 +80,32 @@ export interface Addon {
     hasEula?: boolean;
     hasPrivacyPolicy?: boolean;
   };
+  currentVersion?: Version;
+}
+
+export interface Version {
+  id: number;
+  version: string;
+  channel: AddonDistribution;
+  file: {
+    id: number;
+    url: string;
+    size: number;
+    status: FileStatus;
+    created?: string;
+  };
+  release_notes: Record<string, string> | string | null;
+  approval_notes: string;
+  source: string | null;
+  edit_url: string;
+  is_disabled: boolean;
+  license?: {
+    id: number;
+    is_custom: boolean;
+    name: Record<string, string> | string;
+    url: string | null;
+  } | null;
+  reviewed?: string | null;
 }
 
 // The subset of listing fields editable from the manage page's Listing Details
@@ -99,6 +125,7 @@ export interface AddonListingEdit {
   is_experimental?: boolean;
   requires_payment?: boolean;
   developer_comments?: string;
+  is_disabled?: boolean;
 }
 
 // A listing category (from /addons/categories/). `type` matches the API's
@@ -122,16 +149,6 @@ export interface EulaPolicyEdit {
   privacyPolicy?: string | null;
 }
 
-export interface Version {
-  id: number;
-  version: string;
-  channel: AddonDistribution;
-  file: { id: number; url: string; size: number; status: FileStatus };
-  release_notes: string | null;
-  approval_notes: string;
-  source: string | null;
-}
-
 export interface Update {
   id: string;
   title: string;
diff --git a/src/pinguino/devhub/src/fonts/MozillaHeadline[wdth,wght].woff2 b/src/pinguino/devhub/src/fonts/MozillaHeadline[wdth,wght].woff2
new file mode 100644
index 000000000000..d5d3117d3b35
Binary files /dev/null and b/src/pinguino/devhub/src/fonts/MozillaHeadline[wdth,wght].woff2 differ
diff --git a/src/pinguino/devhub/src/fonts/OFL.txt b/src/pinguino/devhub/src/fonts/OFL.txt
new file mode 100644
index 000000000000..317d3ab622c6
--- /dev/null
+++ b/src/pinguino/devhub/src/fonts/OFL.txt
@@ -0,0 +1,93 @@
+Copyright 2025 The Mozilla-Headline-Type.Git Project Authors (https://github.com/mozilla/mozilla-headline-type.git)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
\ No newline at end of file
diff --git a/src/pinguino/devhub/src/foundations/badges/index.ts b/src/pinguino/devhub/src/foundations/badges/index.ts
index 68d03b17f964..bfc5d6692770 100644
--- a/src/pinguino/devhub/src/foundations/badges/index.ts
+++ b/src/pinguino/devhub/src/foundations/badges/index.ts
@@ -1,2 +1,3 @@
 import './distribution-badge';
 import './visibility-badge';
+import './version-badge';
diff --git a/src/pinguino/devhub/src/foundations/badges/version-badge.ts b/src/pinguino/devhub/src/foundations/badges/version-badge.ts
new file mode 100644
index 000000000000..4f665a476e1f
--- /dev/null
+++ b/src/pinguino/devhub/src/foundations/badges/version-badge.ts
@@ -0,0 +1,30 @@
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { type FileStatus, resolveVersionStatus } from '../../data';
+
+@customElement('version-badge')
+export class VersionBadge extends LitElement {
+  @property() status: FileStatus = 'unreviewed';
+  @property({ type: Boolean, attribute: 'user-disabled' }) userDisabled = false;
+  @property() reviewed?: string | null;
+
+  static styles = css`
+    :host {
+      display: contents;
+    }
+  `;
+
+  render() {
+    const { label, badge } = resolveVersionStatus(this.status, {
+      isDisabled: this.userDisabled,
+      reviewed: this.reviewed,
+    });
+    return html`<moz-status-badge type=${badge}>${label}</moz-status-badge>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'version-badge': VersionBadge;
+  }
+}
diff --git a/src/pinguino/devhub/src/foundations/badges/visibility-badge.ts b/src/pinguino/devhub/src/foundations/badges/visibility-badge.ts
index ae11bd99261d..5aa2533af187 100644
--- a/src/pinguino/devhub/src/foundations/badges/visibility-badge.ts
+++ b/src/pinguino/devhub/src/foundations/badges/visibility-badge.ts
@@ -1,5 +1,5 @@
 import type { IconName } from 'acorn-web-components';
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { type AddonVisibility, VISIBILITY } from '../../data';
 
@@ -11,20 +11,58 @@ export const VISIBILITY_ICON: Record<AddonVisibility, IconName> = {
 @customElement('visibility-badge')
 export class VisibilityBadge extends LitElement {
   @property() visibility: AddonVisibility = 'visible';
+  @property({ type: Boolean, reflect: true }) bordered = false;
 
   // Transparent host, so the badge itself is the flex item in the parent row.
   static styles = css`
     :host {
       display: contents;
     }
+    .toggle {
+      display: inline-flex;
+      background: none;
+      border: none;
+      cursor: pointer;
+    }
+    moz-status-badge::part(badge) {
+      padding-inline: var(--space-small);
+      background-color: var(--color-white-alpha-70);
+    }
+    .chevron {
+      --icon-size: var(--icon-size-xsmall);
+    }
+    .popover {
+      position-area: bottom span-right;
+      border: 1px solid var(--color-violet-desaturated-10);
+      border-radius: var(--border-radius-xlarge);
+      margin: var(--space-small) 0;
+      padding: var(--space-xlarge);
+      inline-size: 60%;
+    }
   `;
 
   render() {
-    return html`
+    const hasPopover = this.childElementCount > 0;
+    const badge = html`
       <moz-status-badge type="ghost" icon-start=${VISIBILITY_ICON[this.visibility]}>
         ${VISIBILITY[this.visibility].label}
+        ${
+          hasPopover
+            ? html`<moz-icon class="chevron" name="chevron-down-small"></moz-icon>`
+            : nothing
+        }
       </moz-status-badge>
     `;
+    return html`
+      ${
+        hasPopover
+          ? html`<button class="toggle" popovertarget="popover">${badge}</button>`
+          : badge
+      }
+      <div id="popover" class="popover" popover>
+        <slot @slotchange=${() => this.requestUpdate()}></slot>
+      </div>
+    `;
   }
 }
 
diff --git a/src/pinguino/devhub/src/pages/addon/main.ts b/src/pinguino/devhub/src/pages/addon/main.ts
index 96811f856209..7c01ab665a87 100644
--- a/src/pinguino/devhub/src/pages/addon/main.ts
+++ b/src/pinguino/devhub/src/pages/addon/main.ts
@@ -20,11 +20,6 @@ class AddonRoutes extends LitElement {
       render: ({ slug }) =>
         html`<version-routes .slug=${slug ?? ''}></version-routes>`,
     },
-    {
-      path: `:slug/:tab`,
-      render: ({ slug, tab }) =>
-        html`<devhub-addon .slug=${slug ?? ''} .tab=${tab ?? ''}></devhub-addon>`,
-    },
     {
       path: `:slug/:tab/:section`,
       render: ({ slug, tab, section }) =>
@@ -34,6 +29,11 @@ class AddonRoutes extends LitElement {
           .section=${section ?? ''}
         ></devhub-addon>`,
     },
+    {
+      path: `:slug/:tab`,
+      render: ({ slug, tab }) =>
+        html`<devhub-addon .slug=${slug ?? ''} .tab=${tab ?? ''}></devhub-addon>`,
+    },
   ]);
   render() {
     return this._routes.outlet();
diff --git a/src/pinguino/devhub/src/pages/addon/templates/devhub-addon.ts b/src/pinguino/devhub/src/pages/addon/templates/devhub-addon.ts
index 10249fac5317..de586cddab96 100644
--- a/src/pinguino/devhub/src/pages/addon/templates/devhub-addon.ts
+++ b/src/pinguino/devhub/src/pages/addon/templates/devhub-addon.ts
@@ -3,6 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { BASE } from '../../../base';
 import '../../../components/addon-listing';
 import '../../../components/addon-manage-header';
+import '../../../components/addon-version/addon-version';
 import { type Addon, addonQuery } from '../../../data';
 
 // Each tab is its own URL under <base>/addon/:slug/<tab>, so a tab is linkable
@@ -64,6 +65,11 @@ export class DevhubAddon extends LitElement {
           .addon=${addon}
           .section=${this.section || undefined}
         ></addon-listing>`;
+      case 'versions':
+        return html`<addon-version
+          .addon=${addon}
+          .section=${this.section || undefined}
+        ></addon-version>`;
       default: {
         const label = TABS.find((t) => t.value === this.#activeTab)?.label;
         return html`<div class="stub">
diff --git a/src/pinguino/devhub/tests/components/addon-version.test.ts b/src/pinguino/devhub/tests/components/addon-version.test.ts
new file mode 100644
index 000000000000..94313e4e32ed
--- /dev/null
+++ b/src/pinguino/devhub/tests/components/addon-version.test.ts
@@ -0,0 +1,119 @@
+import { describe, expect, it } from 'vitest';
+import type { AddonVersion } from '../../src/components/addon-version/addon-version';
+import '../../src/components/addon-version/addon-version';
+import type { Addon, Version } from '../../src/data';
+import { ADDON_STATUS, queryClient, queryKeys } from '../../src/data';
+import { DEFAULT_VERSION, mount, settle } from '../helpers/fixture';
+
+const addon: Addon = {
+  slug: 'ad-blocker',
+  name: 'Ad Blocker',
+  kind: 'extension',
+  icon: 'extension',
+  status: ADDON_STATUS.public,
+  version: '3.2.1',
+  lastUpdated: 'Aug 18 2025',
+  visibility: 'visible',
+  channels: ['listed'],
+};
+
+async function mountVersions(props: Partial<Addon>, versions: Version[]) {
+  queryClient.setQueryData(queryKeys.versions('ad-blocker'), versions);
+  const el = await mount<AddonVersion>('addon-version', {
+    addon: { ...addon, ...props },
+  });
+  await settle(el);
+  return el.shadowRoot as ShadowRoot;
+}
+
+function versionNumbers(section: Element | null | undefined): string[] {
+  return [...(section?.querySelectorAll('.version-number') ?? [])].map(
+    (n) => n.textContent?.trim() ?? '',
+  );
+}
+
+describe('addon-version', () => {
+  it('splits the current version from the other versions', async () => {
+    const versions: Version[] = [
+      { ...DEFAULT_VERSION, id: 1, version: '1.0', channel: 'listed' },
+      { ...DEFAULT_VERSION, id: 2, version: '2.0', channel: 'unlisted' },
+      { ...DEFAULT_VERSION, id: 3, version: '3.0', channel: 'enterprise' },
+    ];
+    const root = await mountVersions({ currentVersion: versions[0] }, versions);
+
+    // The current_version is shown in the listed version section.
+    const current = root.querySelector('.version-section.current');
+    expect(current?.querySelector('.section-title')?.textContent).toContain(
+      'Listed Version',
+    );
+    expect(versionNumbers(current)).toEqual(['1.0']);
+
+    // And not in the 'other versions' section.
+    const remaining = root.querySelector('.version-section:not(.current)');
+    expect(versionNumbers(remaining)).toEqual(['2.0', '3.0']);
+
+    // Only the listed version offers the add-on's visibility setting.
+    expect(
+      current?.querySelector('visibility-badge moz-radio-group'),
+    ).not.toBeNull();
+    expect(remaining?.querySelector('visibility-badge')).toBeNull();
+  });
+
+  it('highlights the pending listed version that would replace the current one', async () => {
+    const unreviewed = {
+      id: 1,
+      url: '',
+      size: 0,
+      status: 'unreviewed',
+    } as const;
+    const versions: Version[] = [
+      {
+        ...DEFAULT_VERSION,
+        id: 1,
+        version: '1.0',
+        channel: 'unlisted',
+        file: unreviewed,
+      },
+      { ...DEFAULT_VERSION, id: 2, version: '2.0', file: unreviewed },
+      { ...DEFAULT_VERSION, id: 3, version: '3.0', file: unreviewed },
+      { ...DEFAULT_VERSION, id: 4, version: '4.0' },
+      { ...DEFAULT_VERSION, id: 5, version: '5.0', file: unreviewed },
+    ];
+    const root = await mountVersions({ currentVersion: versions[3] }, versions);
+
+    // Only the most recent is highlighted.
+    const highlighted = [...root.querySelectorAll('.next-listed-version')];
+    expect(highlighted.map((row) => versionNumbers(row))).toEqual([['5.0']]);
+  });
+
+  it('points an incomplete listing back to the submission flow', async () => {
+    const root = await mountVersions({ status: ADDON_STATUS.incomplete }, [
+      DEFAULT_VERSION,
+    ]);
+    const continueUrl = '/addon/ad-blocker/submit/details';
+
+    // Popup is shown.
+    const bar = root.querySelector('moz-message-bar');
+    expect(bar?.getAttribute('heading')).toBe('Incomplete listing');
+    expect(bar?.querySelector('moz-button')?.getAttribute('href')).toContain(
+      continueUrl,
+    );
+
+    // Link changes.
+    const versionButton = root.querySelector(
+      '.version-row:not(.labels) .manage-button',
+    );
+    expect(versionButton?.textContent?.trim()).toBe('Continue Uploading');
+    expect(versionButton?.getAttribute('href')).toContain(continueUrl);
+  });
+
+  it('does not show the incomplete listing message for other statuses', async () => {
+    const root = await mountVersions({}, [DEFAULT_VERSION]);
+
+    expect(root.querySelector('moz-message-bar')).toBeNull();
+    const versionButton = root.querySelector(
+      '.version-row:not(.labels) .manage-button',
+    );
+    expect(versionButton?.textContent?.trim()).toBe('Manage version');
+  });
+});
diff --git a/src/pinguino/devhub/tests/data/api.test.ts b/src/pinguino/devhub/tests/data/api.test.ts
index c7c66a7b2b29..1dd2950316a9 100644
--- a/src/pinguino/devhub/tests/data/api.test.ts
+++ b/src/pinguino/devhub/tests/data/api.test.ts
@@ -19,6 +19,7 @@ import {
   postVersion,
 } from '../../src/data/api';
 import { ADDON_STATUS, VERSION_STATUS } from '../../src/data/statuses';
+import { DEFAULT_VERSION } from '../helpers/fixture';
 
 function mockJson(payload: unknown) {
   vi.stubGlobal(
@@ -39,7 +40,7 @@ describe('mapAddon', () => {
       type: 'statictheme',
       status: 'public',
       last_updated: '2025-05-14T10:00:00Z',
-      current_version: { version: '3.2.1' },
+      current_version: { ...DEFAULT_VERSION, version: '3.2.1' },
       previews: [{ image_url: 'https://cdn/preview.png' }],
       channels: ['listed'],
     });
@@ -110,8 +111,14 @@ describe('mapAddon', () => {
       has_eula: true,
       is_experimental: false,
       current_version: {
+        ...DEFAULT_VERSION,
         version: '1.0',
-        license: { name: { 'en-US': 'MPL 2.0' } },
+        license: {
+          id: 1,
+          is_custom: false,
+          name: { 'en-US': 'MPL 2.0' },
+          url: null,
+        },
       },
       channels: ['listed'],
     });
diff --git a/src/pinguino/devhub/tests/data/statuses.test.ts b/src/pinguino/devhub/tests/data/statuses.test.ts
index b56800a0322a..f9f3ae5dba61 100644
--- a/src/pinguino/devhub/tests/data/statuses.test.ts
+++ b/src/pinguino/devhub/tests/data/statuses.test.ts
@@ -62,7 +62,7 @@ describe('visibility', () => {
     expect(resolveVisibility(false)).toBe('visible');
     expect(resolveVisibility(true)).toBe('invisible');
     expect(VISIBILITY.visible.label).toBe('Visible');
-    expect(VISIBILITY.invisible.label).toBe('Invisible');
+    expect(VISIBILITY.invisible.label).toBe('Hidden');
   });
 
   it('locks the control once Mozilla disabled or deleted the add-on', () => {
diff --git a/src/pinguino/devhub/tests/foundations/badges/badges.test.ts b/src/pinguino/devhub/tests/foundations/badges/badges.test.ts
index edd4e1e5d72c..a4d3465fa967 100644
--- a/src/pinguino/devhub/tests/foundations/badges/badges.test.ts
+++ b/src/pinguino/devhub/tests/foundations/badges/badges.test.ts
@@ -19,7 +19,7 @@ describe('visibility-badge', () => {
     const visibleRoot = visible.shadowRoot as ShadowRoot;
     const invisibleRoot = invisible.shadowRoot as ShadowRoot;
     expect(label(visibleRoot)).toBe('Visible');
-    expect(label(invisibleRoot)).toBe('Invisible');
+    expect(label(invisibleRoot)).toBe('Hidden');
     expect(
       visibleRoot.querySelector('moz-status-badge')?.getAttribute('icon-start'),
     ).not.toBe(
@@ -27,6 +27,20 @@ describe('visibility-badge', () => {
         .querySelector('moz-status-badge')
         ?.getAttribute('icon-start'),
     );
+    expect(visibleRoot.querySelector('button')).toBeNull();
+  });
+
+  it('becomes a popover toggle when given slotted content', async () => {
+    const el = document.createElement('visibility-badge') as VisibilityBadge;
+    el.append(document.createElement('moz-radio-group'));
+    document.body.append(el);
+    await el.updateComplete;
+    const root = el.shadowRoot as ShadowRoot;
+    expect(root.querySelector('.chevron')).not.toBeNull();
+    expect(label(root)).toBe('Visible');
+    expect(root.querySelector('button')?.getAttribute('popovertarget')).toBe(
+      root.querySelector('[popover] slot')?.parentElement?.id,
+    );
   });
 });
 
diff --git a/src/pinguino/devhub/tests/helpers/fixture.ts b/src/pinguino/devhub/tests/helpers/fixture.ts
index 2844e1e501c5..6dcad131a8a8 100644
--- a/src/pinguino/devhub/tests/helpers/fixture.ts
+++ b/src/pinguino/devhub/tests/helpers/fixture.ts
@@ -1,4 +1,5 @@
 import type { LitElement } from 'lit';
+import type { Version } from '../../src/data/types';
 
 // Mount a Lit element, apply props, and wait for its first render. Returns the
 // element so tests can read `el.shadowRoot`. Props are applied before connection
@@ -20,3 +21,21 @@ export async function settle(el: LitElement): Promise<void> {
   await Promise.resolve();
   await el.updateComplete;
 }
+
+export const DEFAULT_VERSION: Version = {
+  id: 1,
+  version: '1.0.0',
+  channel: 'listed',
+  file: {
+    id: 1,
+    url: '',
+    size: 0,
+    status: 'public',
+    created: '2025-08-18',
+  },
+  release_notes: null,
+  approval_notes: '',
+  source: null,
+  edit_url: '/developers/addon/ad-blocker/versions/1',
+  is_disabled: false,
+};
diff --git a/src/pinguino/devhub/tests/pages/addon/submit/submission-flow.test.ts b/src/pinguino/devhub/tests/pages/addon/submit/submission-flow.test.ts
index 4bdcba24fe69..62ff8087e854 100644
--- a/src/pinguino/devhub/tests/pages/addon/submit/submission-flow.test.ts
+++ b/src/pinguino/devhub/tests/pages/addon/submit/submission-flow.test.ts
@@ -8,7 +8,7 @@ import { queryClient, queryKeys } from '../../../../src/data';
 import * as api from '../../../../src/data/api';
 import type { FileUpload, Version } from '../../../../src/data/types';
 import '../../../../src/pages/addon/versions/submit/main';
-import { mount, settle } from '../../../helpers/fixture';
+import { DEFAULT_VERSION, mount, settle } from '../../../helpers/fixture';
 
 vi.mock('../../../../src/data/api');
 
@@ -27,18 +27,14 @@ class TestRouter extends LitElement {
 }
 
 const VERSION: Version = {
+  ...DEFAULT_VERSION,
   id: 20,
-  version: '1.0.0',
-  channel: 'listed',
   file: {
-    id: 1,
+    id: 20,
     url: 'https://example.com/files/addon.xpi',
-    size: 1,
+    size: 0,
     status: 'public',
   },
-  release_notes: null,
-  approval_notes: '',
-  source: null,
 };
 
 const makeUpload = (args: Partial<FileUpload> = {}): FileUpload => ({
diff --git a/src/pinguino/devhub/tests/pages/devhub-addon.test.ts b/src/pinguino/devhub/tests/pages/devhub-addon.test.ts
index 64e864fd66eb..5cbc235db750 100644
--- a/src/pinguino/devhub/tests/pages/devhub-addon.test.ts
+++ b/src/pinguino/devhub/tests/pages/devhub-addon.test.ts
@@ -3,7 +3,7 @@ import type { DevhubAddon } from '../../src/pages/addon/templates/devhub-addon';
 import '../../src/pages/addon/templates/devhub-addon';
 import type { Addon } from '../../src/data';
 import { ADDON_STATUS, queryClient, queryKeys } from '../../src/data';
-import { mount, settle } from '../helpers/fixture';
+import { DEFAULT_VERSION, mount, settle } from '../helpers/fixture';
 
 const addon: Addon = {
   slug: 'ad-blocker',
@@ -39,20 +39,37 @@ describe('devhub-addon', () => {
     expect(root.querySelector('addon-listing')).not.toBeNull();
   });
 
-  it('renders a stub (not the listing) for a non-edit tab', async () => {
+  it('renders a stub (not the listing) for an unfinished tab', async () => {
     queryClient.setQueryData(queryKeys.addons, [addon]);
     const el = await mount<DevhubAddon>('devhub-addon', {
       slug: 'ad-blocker',
-      tab: 'versions',
+      tab: 'statistics',
     });
     await settle(el);
     const root = el.shadowRoot as ShadowRoot;
 
     expect(
       root.querySelector('moz-segmented-control')?.getAttribute('value'),
-    ).toBe('versions');
+    ).toBe('statistics');
+    expect(root.querySelector('addon-listing')).toBeNull();
+    expect(root.querySelector('.stub')?.textContent).toContain('Statistics');
+  });
+
+  it('renders the versions panel for the add-on on the versions tab', async () => {
+    queryClient.setQueryData(queryKeys.addons, [addon]);
+    queryClient.setQueryData(queryKeys.versions('ad-blocker'), [
+      DEFAULT_VERSION,
+    ]);
+    const el = await mount<DevhubAddon>('devhub-addon', {
+      slug: 'ad-blocker',
+      tab: 'versions',
+    });
+    await settle(el);
+    const root = el.shadowRoot as ShadowRoot;
+
+    const panel = root.querySelector('addon-version');
+    expect(panel?.addon.slug).toBe('ad-blocker');
     expect(root.querySelector('addon-listing')).toBeNull();
-    expect(root.querySelector('.stub')?.textContent).toContain('Versions');
   });
 
   it('selecting a tab navigates to its sub-URL', async () => {