> For the complete documentation index, see [llms.txt](https://docs.notionapps.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.notionapps.com/guides/polish-your-published-app-look-and-layout.md).

# Polish Your Published App Look and Layout

Make published NotionApps feel like finished products — not utility admin forms. This guide covers the **published-app visual system**: login polish, layout density presets, form spacing and sticky Submit, desktop master–detail, details action rails, and cleaner app names (no more “Copy of …”).

{% hint style="info" %}
**Who this is for**\
Makers who publish Create Forms, Lists, and Details to end users (desktop browsers and phones). Builder-only Phase A changes (nav rail, inspector tabs) are covered in separate Guides.
{% endhint %}

***

### What you get

| Feature                                           | Where you configure it                    | What end users see                                                          |
| ------------------------------------------------- | ----------------------------------------- | --------------------------------------------------------------------------- |
| Login hero + wrapping title                       | Automatic from app color / icon / name    | Brand-colored header, rounded inputs, full title (no hard 27-character cut) |
| Layout presets (Compact / Comfortable / Showcase) | Settings → **General** → Layout presets   | Spacing, type scale, radii, and denser/airier forms & lists                 |
| Color presets                                     | Same General preview (or Appearance)      | Accent / theme color                                                        |
| Sticky desktop Submit                             | Create/Update Form Behaviour (or default) | Submit stays pinned while scrolling on desktop                              |
| Heading section rhythm                            | Add **Heading** comps on forms            | Clear visual groups between field sections                                  |
| Desktop master–detail                             | Automatic on wide desktop List screens    | List left · details/forms right                                             |
| Details sticky actions                            | Automatic on desktop Details              | Edit / Delete stay visible at the bottom                                    |
| Page Content TOC (new comps)                      | Show Page Content settings                | Side TOC defaults **on** for new comps when enough headings exist           |
| “Copy of” cleanup                                 | Publish + login display                   | Clone prefixes stripped for end users                                       |

***

### Before you start

You need:

* An application in the NotionApps builder with at least one **List**, one **Details** (or Update Form), and one **Create Form**
* Permission to **Publish**
* A desktop browser window wide enough to preview desktop layouts (about **1100px+** for master–detail)

{% hint style="warning" %}
**Existing apps**\
Layout presets default to **Comfortable**. Apps without a saved preset keep today’s spacing until you pick Compact / Comfortable / Showcase. Page Content TOC stays **off** for older comps that never stored TOC prefs — only **new** Show Page Content comps default TOC on.
{% endhint %}

***

### Part A — Layout presets (Compact / Comfortable / Showcase)

Layout presets change **spacing, type, radii, and density** — not only the accent color.

#### Step A1 — Open General settings

1. Open your app in the builder.
2. Click **Settings** in the left rail.
3. Stay on **General** (name, URL, workspace).
4. Look at the right-hand **Appearance preview** card.

![Builder Settings → General with Appearance preview and Layout presets](https://iili.io/Cwf1QwP.png)

#### Step A2 — Choose a layout preset

1. Find **Layout presets**.
2. Click one of:
   * **Compact** — tighter rows/padding, smaller type (dense ops UIs)
   * **Comfortable** — default; taller fields, softer radii (everyday work)
   * **Showcase** — larger type, airier spacing, fewer chrome lines (portals / catalogues)
3. Watch the mini phone preview update live.

![Compact layout preset selected with live appearance preview](https://iili.io/Cwf1DoF.png)

![Comfortable layout preset selected](https://iili.io/Cwf1mPa.png)

![Showcase layout preset selected](https://iili.io/CwfE9cv.png)

#### Step A3 — Pair with a color preset

1. Under Layout presets, use **Color presets** (swatches) to set the accent.
2. For fonts / Custom CSS, open **Appearance**.

{% hint style="success" %}
**Maker tip**\
Layout presets change spacing and type. Color presets set the accent. Fine-tune fonts and CSS in **Appearance**.
{% endhint %}

#### When to use which preset

| Goal                                       | Preset      |
| ------------------------------------------ | ----------- |
| Field / ops tools with long lists          | Compact     |
| Most internal tools (recommended start)    | Comfortable |
| Client portals, catalogues, editorial feel | Showcase    |

***

### Part B — Login chrome (published app)

End users see a brand hero, a wrapping app title, and rounded login controls.

#### Step B1 — Set branding inputs

1. **Settings → General**: App name (avoid leaving “Copy of …” in names you care about for users — see Part F).
2. **Settings → Appearance** (or General color swatches): theme color.
3. Upload / select an **App icon**.

![Settings Appearance theme color and app icon](https://iili.io/Cwf1LAB.png)

#### Step B2 — Preview the published login

1. **Publish** (or open the end-user URL for the app).
2. Confirm:
   * Title can wrap across 2–3 lines (not truncated mid-word at 27 characters)
   * Top band uses your theme color with the app icon
   * Email / code inputs and primary CTA use larger corner radii (\~12px)
   * Google / Okta / Auth0 buttons still appear when enabled

![Published login with brand hero header and wrapping app title](https://iili.io/CwfEolf.png)

![Login on a narrow / phone-sized viewport](https://iili.io/CwfExS4.png)

{% hint style="info" %}
Desktop phone-preview **Share App** in the builder stays as-is. Full-width desktop login keeps the tinted page wash beside the card.
{% endhint %}

***

### Part C — Form runtime (spacing + sticky Submit)

#### Step C1 — Open a Create or Update Form

1. Go to **Screens**.
2. Open a Create Form (for example **Submit Service Request**).
3. Switch the preview to **Desktop**.

![Create Form open in the builder](https://iili.io/Cwf1UMu.png)

#### Step C2 — Use Headings to group sections

1. In **Add to screen** / Logic, add **Heading** components between groups of fields.
2. Headings get extra vertical space so forms read as sections (without a new “section” component type).

![Form preview showing heading-driven section spacing](https://iili.io/CwfEd9p.png)

#### Step C3 — Desktop sticky Submit

On desktop, Create/Update forms default to a **sticky page footer** Submit when you have not overridden placement.

1. Open the form’s submit / **Behaviour** controls.
2. Review **Desktop position**:
   * Leave unset / use sticky footer for long intake forms
   * Or set Floating / End of form / Match mobile as needed\
     See also: [Control Desktop Form Submit Placement](https://docs.notionapps.com/guides/control-desktop-form-submit-placement).
3. Scroll the desktop preview — Submit should stay visible at the bottom when sticky.

![Desktop form preview with sticky Submit placement controls](https://iili.io/CwfEd9p.png)

![Desktop form sticky Submit preview](https://iili.io/CwfEd9p.png)

#### Step C4 — Confirm phone is unchanged

1. Switch preview to **Phone**.
2. Confirm Submit still follows **Mobile position** only.

![Phone form preview still using mobile Submit rules](https://iili.io/CwfEd9p.png)

{% hint style="info" %}
Secondary destinations stay in the Phase A **More** overflow for bottom navigation. This release does **not** add a new form FAB.
{% endhint %}

***

### Part D — Desktop master–detail (List | Details / Form)

On **desktop** with a wide enough preview/window (**≥ \~1100px**), List screens open records in a **right pane** instead of pushing a full-screen Details/Form.

#### Step D1 — Open a List on Desktop

1. **Screens** → select a List (for example **Service Requests**).
2. Switch preview to **Desktop**.
3. Optionally click **Hide configuration** so the preview is wide enough.
4. Until a row is selected, the right pane shows **Select a row**.

![List screen ready for desktop master–detail](https://iili.io/CwfE3NI.png)

#### Step D2 — Select a row

1. Click a list row.
2. Details (or Update Form) open in the **right pane**.
3. Use **Close** on the pane toolbar to clear the selection (empty “Select a row” state).

![List with a record selected in the right detail pane](https://iili.io/CwfEFtt.png)

#### Step D3 — Create from the list FAB

1. Click the list **+** / create action on desktop.
2. The Create Form opens in the **right pane** (same workspace), not a second phone column.

#### Step D4 — Phone / narrow desktop still stack

1. Switch to **Phone** preview (or shrink below the breakpoint).
2. Row tap still **pushes** Details/Form on the stack — mobile navigation is unchanged.

![Phone list preview still using stack navigation](https://iili.io/CwfEqVn.png)

{% hint style="warning" %}
**Master–detail does not appear if**\
Preview is Phone, or the desktop preview/container is narrower than \~1100px. Widen the window / hide configuration, then click a row again.
{% endhint %}

***

### Part E — Details sticky action rail + Page Content TOC

#### Details sticky actions (desktop)

On desktop Details, primary actions (**Edit** / **Delete**) sit in a sticky footer rail — similar to sticky Submit on forms — so users do not scroll to find them.

![Details panel with sticky Edit / Delete action rail](https://iili.io/CwfEFtt.png)

#### Page Content table of contents (new comps)

1. On a Details (or Form) screen, add **Show Page Content**.
2. Open the component settings — **Table of contents** defaults to **enabled** for newly created comps.
3. TOC still only appears when the page has at least the minimum heading count (default **2**).
4. Existing comps without stored TOC prefs stay **off** (no forced migration).

![Page Content TOC settings in the builder](https://iili.io/CwfEBPs.png)

{% hint style="info" %}
Deep dive: [Add a Table of Contents to Page Content](https://docs.notionapps.com/guides/add-a-table-of-contents-to-page-content).
{% endhint %}

***

### Part F — Cleaner app names (“Copy of …”)

Cloning an app still creates draft names like **Copy of …**. End users should not see that prefix.

| Surface              | Behavior                                                           |
| -------------------- | ------------------------------------------------------------------ |
| Login / OTP titles   | Leading `Copy of` is stripped (including nested copies)            |
| Publish              | Published app name is sanitized so clones stop shipping the prefix |
| Draft / builder name | Can still show `Copy of …` until you rename                        |

**Maker tip:** After cloning, rename the app under **Settings → General** before you publish to customers.

***

### End-to-end example (makers)

**Goal:** Ship a Service Request app that looks intentional on desktop and phone.

1. **Settings → General** → Layout preset **Comfortable** + your brand color.
2. Confirm login on the published URL (hero color, wrapping title, rounded fields).
3. Open **Submit Service Request** → Desktop preview → sticky Submit + Heading sections.
4. Open **Service Requests** List → Desktop + wide preview → click a row → details in the right pane with sticky Edit/Delete.
5. Switch to Phone → confirm stack navigation and mobile Submit.
6. **Publish** and retest the live app.

![Builder home for the sample Service Request app](https://iili.io/Cwf1UMu.png)

***

### Checklist

* [ ] Layout preset chosen (Compact / Comfortable / Showcase)
* [ ] Color / icon set for login hero
* [ ] Published login title wraps; no hard truncate
* [ ] Forms use Headings for section grouping
* [ ] Desktop Submit sticky (or intentional override)
* [ ] Phone Submit still follows Mobile position
* [ ] Desktop List shows master–detail at wide width
* [ ] Phone List still stack-pushes Details/Form
* [ ] Details sticky Edit/Delete on desktop
* [ ] New Page Content comps: TOC enabled when headings qualify
* [ ] App renamed / publish sanitized (no customer-facing “Copy of …”)
* [ ] App **Published**

***

### Troubleshooting

| Symptom                                 | Likely cause                                      | What to do                                                       |
| --------------------------------------- | ------------------------------------------------- | ---------------------------------------------------------------- |
| Layout presets do nothing in preview    | Looking at Appearance only / not saved            | Use **General** → Layout presets; wait for save; refresh preview |
| Login title still truncated             | Old published build                               | Publish again; hard-refresh end-user                             |
| No master–detail pane                   | Phone preview or narrow desktop                   | Desktop view + widen ≥ \~1100px; Hide configuration              |
| Row still full-screen pushes on desktop | Below breakpoint                                  | Widen preview; confirm Desktop toggle                            |
| Sticky Submit missing                   | Desktop position = Match mobile / overridden      | Set Sticky page footer (or clear override)                       |
| TOC missing on old Page Content         | Existing comps default off                        | Enable TOC in component settings                                 |
| “Copy of” still on login                | Name does not start with prefix, or not published | Rename in General; publish                                       |

***

### Related Guides

* [Control Desktop Form Submit Placement](https://docs.notionapps.com/guides/control-desktop-form-submit-placement)
* [Add a Table of Contents to Page Content](https://docs.notionapps.com/guides/add-a-table-of-contents-to-page-content)
* [Find Your Way Around the Builder Nav Rail](https://docs.notionapps.com/guides/find-your-way-around-the-builder-nav-rail)
* [Custom CSS Guide](https://docs.notionapps.com/guides/custom-css-guide)
* [Custom Font Guide](https://docs.notionapps.com/guides/custom-font-guide)

***