> ## Documentation Index
> Fetch the complete documentation index at: https://docs.megaport.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Megaport Portal Design Changes

> This help topic describes new Megaport Portal designs to provide timely update to customers.

export const Video = ({url, text, duration, description}) => {
  const errorPrefix = '\x1b[31;1;4mERROR\x1b[0m: Video -';
  if (typeof url !== 'string') {
    url = String(url);
  }
  if (typeof text !== 'string') {
    text = String(text);
  }
  if (!url || url === 'undefined') {
    console.error(`${errorPrefix} the \`url\` property is required — rendering an empty string instead`);
    return <></>;
  }
  if (!text || text === 'undefined') {
    console.error(`${errorPrefix} the \`text\` property is required — rendering an empty string instead`);
    return <></>;
  }
  const youtubeIconMask = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zM232 336V176l142.7 80z'/%3E%3C/svg%3E\")";
  return <div className="video-callout">
      <div className="callout my-4 flex gap-3 overflow-hidden rounded-2xl border px-5 py-4">
        <div className="mt-0.5 w-4 shrink-0" data-component-part="callout-icon">
          <svg aria-hidden="true" className="size-4 shrink-0" style={{
    WebkitMaskImage: youtubeIconMask,
    maskImage: youtubeIconMask,
    WebkitMaskRepeat: 'no-repeat',
    maskRepeat: 'no-repeat',
    WebkitMaskPosition: 'center',
    maskPosition: 'center',
    backgroundColor: '#0284c7'
  }} />
        </div>
        <div className="min-w-0 w-full text-sm" data-component-part="callout-content">
          <strong>
            Video:{' '}
            <a href={url} target="_blank" rel="noopener noreferrer">
              {text}
              <span className="sr-only"> (opens in a new tab)</span>
            </a>
          </strong>
          {}
          {duration && <> ({duration})</>}
          {}
          {description && <p className="mt-1 mb-0 text-xs text-gray-500 dark:text-gray-400">
              {description}
            </p>}
        </div>
      </div>
    </div>;
};

Megaport is rolling out a new layout for the Megaport Portal as part of our ongoing effort to make the Portal easier and more intuitive to use.

We have introduced a refined Services page layout, helping you find information more quickly, manage services more efficiently, and gain a clearer view of your network. For a summary of the changes, see the [Release Notes](/whatsnew) and the Portal ‘What’s New' announcement.

These design changes do not affect existing service functionality. Any new features or changes to existing functionality are documented separately in the [Megaport Documentation](/index).

Watch the following short videos to learn about the new Portal designs.

## Services page

### New Services page

You can switch between the new and old views by clicking the toggle button in the upper-right corner.

<Note>
  The old view will be deprecated in the near future. We recommend that all users switch to the new layout to familiarize themselves with the updated experience.
</Note>

<Video url="https://youtu.be/pg75maaAOyI" text="Services Page: New vs. Old UI Quick Tip" duration="0:28" description="This video shows the layout changes to the Services page in the Megaport Portal and how to switch between the classic and new views." />

### Navigation menu

<Video url="https://youtu.be/eXAdXdLztBQ" text="Navigation Menu: New UI Changes Quick Tip" duration="0:34" description="This video shows how to collapse and expand the left-hand navigation menu in the Megaport Portal to free up screen space." />

### Company settings

<Video url="https://youtu.be/BumddXfywps" text="Company Settings: New UI Changes Quick Tip" duration="0:14" description="This video shows how to use the Company Settings area of the Megaport Portal to manage a company profile, users, Marketplace profile, and security settings." />

### New Services page layout

<Video url="https://youtu.be/8II6dA1dH38" text="Services Page Layout Quick Tip" duration="0:28" description="This video shows the layout of the Services page in the Megaport Portal, including where key data and service details appear." />

### Filters, sort by, and global actions

<Video url="https://youtu.be/i_nGjKqkP5E" text="Filters Sort by and Global Actions" duration="0:33" description="This video shows how to use the filtering, sorting, and global action options in the Megaport Portal to organize and manage services at scale." />

### Actions

<Video url="https://youtu.be/4RpvYwwYmfc" text="Actions Menu: New UI Changes Quick Tip" duration="0:41" description="This video shows how to use the Actions menu in the Megaport Portal to manage, modify, and perform bulk operations on live services." />

### Connections

<Video url="https://youtu.be/TUrOH-DVIDs" text="Connections Page: New UI Changes Quick Tip" duration="0:50" description="This video shows how to use the Connections layout in the Megaport Portal to find active VXCs, monitor connection status, and manage a network layout." />

### Add services

<Video url="https://youtu.be/5v5zQ2ORMsg" text="Add Services Page: New UI Changes Quick Tip" duration="0:22" description="This video shows how to use the Add Services workflow in the Megaport Portal to configure, order, and provision Ports, MCRs, MVEs, and NAT Gateways." />

## Helpful references

* [July 2026 Release Notes](/whatsnew#july-2026/)
* [June 2026 Release Notes](/whatsnew#june-2026/)
* [Understanding the Services Page](/portal-admin/services-page)