# Staff and team sections on a FiveM loading screen

> Add a staff and team section to a FiveM loading screen: what to show, using Discord avatars correctly, ordering by role, keeping the list updated, and privacy considerations for your team.

Source: https://fam-tools.com/guides/fivem-loading-screen-staff-and-team · FAM Tools · published 2026-09-11 · updated 2026-09-11 · about 8 min

**Short answer.** Show a small grid of staff cards — avatar, display name and role — grouped from owners down to support staff, behind a tab if the team is large. Use Discord avatar URLs (`cdn.discordapp.com/avatars/<id>/<hash>.png`), which do not expire the way attachment links do, or host your own images. Update the list whenever the team changes.

## Key points

- Avatar + name + role is enough; skip long bios.
- Group and order by role, owners first.
- Discord avatar URLs work; attachment links expire.
- Ask staff before showing them — some prefer to stay anonymous.
- Outdated staff lists cause confusion; update with every change.

A staff section tells a new player that real people run the server and who to ask for help. Done well it builds trust in seconds; done badly it is a wall of outdated names with broken avatars. The pattern is simple: a few cards, grouped by role, with images that do not break.

## Layout

*A staff card*

```html
<div class="staff">
  <article class="card">
    <img src="https://cdn.discordapp.com/avatars/123456789012345678/abcdef1234567890.png?size=128" alt="">
    <strong>Mike</strong>
    <span class="role owner">Owner</span>
  </article>
  <!-- … -->
</div>
```

*style.css*

```css
.staff { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.card { display: grid; justify-items: center; gap: 6px; padding: 14px; border-radius: 14px; background: rgba(0,0,0,.45); }
.card img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.role.owner { color: #f5b454; }
```

## Images that do not break

Discord user avatars have stable URLs of the form `https://cdn.discordapp.com/avatars/<user id>/<avatar hash>.png?size=128`. They change only when the person changes their avatar. Attachment links (images uploaded into a channel) are different: since late 2023 they are signed and expire, so they eventually stop loading. For full control, host a small copy of each avatar yourself.

> **A fallback image** — Add an `onerror` handler that swaps a broken image for your logo, so an avatar change never leaves an empty circle.

## Privacy

Some staff prefer not to be named publicly — moderators on big servers can attract harassment. Ask before listing someone, and consider listing roles (“Support team: 6 members”) instead of every name.

## Connecting it to your staff structure

The roles on the loading screen should match your Discord roles and in-game permissions. How to structure a staff team is covered in [staff team structure](https://fam-tools.com/guides/fivem-staff-team-structure).

## Questions

### How do I show Discord avatars on my loading screen?

Use the avatar CDN URL, `https://cdn.discordapp.com/avatars/<user id>/<avatar hash>.png?size=128`, or host the images yourself.

### Why did my staff images stop loading?

They were Discord attachment links, which expire. Use avatar URLs or your own hosting.

### Should I list every staff member?

List leadership and main contacts; for large teams, group the rest by role or show a count.

## Related

- https://fam-tools.com/guides/fivem-staff-team-structure
- https://fam-tools.com/guides/fivem-loading-screen-rules-and-info
- https://fam-tools.com/guides/fivem-discord-server-branding-sizes
- https://fam-tools.com/guides/fivem-loading-screen-design-tips