diff --git a/next-tavla/app/(admin)/components/CreateBoard/components/StopPlaceList.tsx b/next-tavla/app/(admin)/components/CreateBoard/components/StopPlaceList.tsx
index 4e93a01db..3a72b76d0 100644
--- a/next-tavla/app/(admin)/components/CreateBoard/components/StopPlaceList.tsx
+++ b/next-tavla/app/(admin)/components/CreateBoard/components/StopPlaceList.tsx
@@ -11,8 +11,8 @@ function StopPlaceList({
 }) {
     if (!tiles || tiles.length === 0)
         return (
-            <Paragraph margin="none" className="mt-6">
-                Du har ikke lagt til noen stoppesteder enda.
+            <Paragraph className="!mt-6">
+                Du har ikke lagt til noen stoppesteder ennå.
             </Paragraph>
         )
     return (
diff --git a/next-tavla/app/(admin)/components/Footer/index.tsx b/next-tavla/app/(admin)/components/Footer/index.tsx
index 6dc6cfd6f..a6c300d23 100644
--- a/next-tavla/app/(admin)/components/Footer/index.tsx
+++ b/next-tavla/app/(admin)/components/Footer/index.tsx
@@ -51,6 +51,11 @@ function Footer() {
                     </div>
                     <div className="flex flex-col gap-4">
                         <Heading3>Informasjon</Heading3>
+                        <div>
+                            <EnturLink href="/demo" as={Link}>
+                                Prøv Tavla
+                            </EnturLink>
+                        </div>
                         <div className="flex flex-row gap-1 items-center">
                             <EnturLink
                                 as={Link}
diff --git a/next-tavla/app/(admin)/components/SideNavBar.tsx b/next-tavla/app/(admin)/components/SideNavBar.tsx
index a011469ac..53900c143 100644
--- a/next-tavla/app/(admin)/components/SideNavBar.tsx
+++ b/next-tavla/app/(admin)/components/SideNavBar.tsx
@@ -31,14 +31,14 @@ function SideNavBar({ loggedIn }: { loggedIn: boolean }) {
                 open={isOpen}
                 onDismiss={() => setIsOpen(false)}
                 size="medium"
-                className="h-full w-9/12 fixed top-0 left-0 py-10 !max-h-full !rounded-none !p-0 overflow-visible"
+                className="!h-full !w-9/12 !fixed !top-0 !left-0 py-10 !max-h-full !rounded-none !p-0 overflow-visible"
             >
-                <SideNavigation className="h-full pt-10">
+                <SideNavigation className="h-full !pt-10">
                     <div className="pl-10">
                         <Link href="/" aria-label="Tilbake til landingssiden">
                             <Image src={TavlaLogoBlue} height={22} alt="" />
                         </Link>
-                        <Heading2 className="mt-16 mb-4">Meny</Heading2>
+                        <Heading2 className="!mt-16 !mb-4">Meny</Heading2>
                     </div>
 
                     <div className="bg-secondary">
diff --git a/next-tavla/app/(admin)/components/TopNavigation.tsx b/next-tavla/app/(admin)/components/TopNavigation.tsx
index ef1204174..1466f8d5b 100644
--- a/next-tavla/app/(admin)/components/TopNavigation.tsx
+++ b/next-tavla/app/(admin)/components/TopNavigation.tsx
@@ -5,8 +5,11 @@ import TavlaLogoBlue from 'assets/logos/Tavla-blue.svg'
 import { SideNavBar } from './SideNavBar'
 import { HorizontalNavBar } from './HorizontalNavBar'
 import { Login } from './Login'
+import { TopNavigationItem } from '@entur/menu'
+import { usePathname } from 'next/navigation'
 
 function TopNavigation({ loggedIn }: { loggedIn: boolean }) {
+    const pathname = usePathname()
     return (
         <nav className="container mx-auto flex flex-row justify-between items-center py-8">
             <Link href="/" aria-label="Tilbake til landingssiden">
@@ -15,7 +18,18 @@ function TopNavigation({ loggedIn }: { loggedIn: boolean }) {
             <div className="flex flex-row items-center">
                 <SideNavBar loggedIn={loggedIn} />
                 <HorizontalNavBar loggedIn={loggedIn} />
-                <Login loggedIn={loggedIn} />
+                <div className="flex flex-row sm:gap-10">
+                    {!loggedIn && (
+                        <TopNavigationItem
+                            active={pathname?.includes('/demo')}
+                            as={Link}
+                            href="/demo"
+                        >
+                            Prøv Tavla
+                        </TopNavigationItem>
+                    )}
+                    <Login loggedIn={loggedIn} />
+                </div>
             </div>
         </nav>
     )
diff --git a/next-tavla/app/(admin)/edit/[id]/components/TileCard/index.tsx b/next-tavla/app/(admin)/edit/[id]/components/TileCard/index.tsx
index 2b4df22c7..82d798eed 100644
--- a/next-tavla/app/(admin)/edit/[id]/components/TileCard/index.tsx
+++ b/next-tavla/app/(admin)/edit/[id]/components/TileCard/index.tsx
@@ -20,9 +20,9 @@ import { TransportIcon } from 'components/TransportIcon'
 import { isArray, uniqBy } from 'lodash'
 import Image from 'next/image'
 import { usePostHog } from 'posthog-js/react'
-import { useState } from 'react'
+import { Dispatch, SetStateAction, useState } from 'react'
 import { Columns, TColumn } from 'types/column'
-import { TBoardID } from 'types/settings'
+import { TBoard, TBoardID } from 'types/settings'
 import { getBoard, getWalkingDistanceTile } from '../../actions'
 import { deleteTile, getOrganizationForBoard, saveTile } from './actions'
 import { useLines } from './useLines'
@@ -36,10 +36,14 @@ function TileCard({
     bid,
     tile,
     address,
+    demoBoard,
+    setDemoBoard,
 }: {
     bid: TBoardID
     tile: TTile
     address?: TLocation
+    demoBoard?: TBoard
+    setDemoBoard?: Dispatch<SetStateAction<TBoard>>
 }) {
     const posthog = usePostHog()
     const [isOpen, setIsOpen] = useState(false)
@@ -85,6 +89,24 @@ function TileCard({
         else posthog.capture('EDIT_COLUMN_CHANGE')
     }
 
+    const saveTileToDemoBoard = (newTile: TTile) => {
+        if (!demoBoard) return null
+        const oldTileIndex = demoBoard.tiles.findIndex(
+            (tile) => tile.uuid == newTile.uuid,
+        )
+        if (oldTileIndex === -1) return null
+        demoBoard.tiles[oldTileIndex] = newTile
+        setDemoBoard && setDemoBoard({ ...demoBoard })
+    }
+
+    const removeTileFromDemoBoard = (tile: TTile) => {
+        if (!demoBoard) return null
+        const remainingTiles = demoBoard.tiles.filter(
+            (t) => t.uuid !== tile.uuid,
+        )
+        setDemoBoard && setDemoBoard({ ...demoBoard, tiles: remainingTiles })
+    }
+
     return (
         <div>
             <div
@@ -103,7 +125,9 @@ function TileCard({
                 <div className="flex flex-row gap-4">
                     <SecondarySquareButton
                         onClick={async () => {
-                            await deleteTile(bid, tile)
+                            bid === 'demo'
+                                ? removeTileFromDemoBoard(tile)
+                                : await deleteTile(bid, tile)
                         }}
                         aria-label="Slett stoppested"
                     >
@@ -165,7 +189,10 @@ function TileCard({
                                     ),
                                 )
                             }
-                            saveTile(bid, newTile)
+
+                            bid === 'demo'
+                                ? saveTileToDemoBoard(newTile)
+                                : saveTile(bid, newTile)
                         }}
                         onSubmit={reset}
                         onInput={() => setChanged(true)}
@@ -178,8 +205,9 @@ function TileCard({
                         <div className="flex flex-col">
                             {!address?.name && (
                                 <Label className="!text-error">
-                                    Du må legge til en lokasjon for å kunne skru
-                                    på gåavstand
+                                    {demoBoard
+                                        ? 'Logg inn for å få tilgang til funksjonaliteten'
+                                        : 'Du må legge til en lokasjon for å kunne skru på gåavstand'}
                                 </Label>
                             )}
                             <Switch
diff --git a/next-tavla/app/(admin)/hooks/useLocalStorage.ts b/next-tavla/app/(admin)/hooks/useLocalStorage.ts
new file mode 100644
index 000000000..201f6049e
--- /dev/null
+++ b/next-tavla/app/(admin)/hooks/useLocalStorage.ts
@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react'
+
+export const useLocalStorage = <T>(key: string, defaultValue: T) => {
+    const [localStorageValue, setLocalStorageValue] = useState(() => {
+        try {
+            const value = localStorage.getItem(key)
+
+            if (value) {
+                return JSON.parse(value)
+            } else {
+                localStorage.setItem(key, JSON.stringify(defaultValue))
+                return defaultValue
+            }
+        } catch (error) {
+            localStorage.setItem(key, JSON.stringify(defaultValue))
+            return defaultValue
+        }
+    })
+
+    useEffect(() => {
+        localStorage.setItem(key, JSON.stringify(localStorageValue))
+    }, [key, localStorageValue])
+
+    return [localStorageValue, setLocalStorageValue]
+}
+
+export default useLocalStorage
diff --git a/next-tavla/app/(admin)/layout.tsx b/next-tavla/app/(admin)/layout.tsx
index 55223189d..cb185dafc 100644
--- a/next-tavla/app/(admin)/layout.tsx
+++ b/next-tavla/app/(admin)/layout.tsx
@@ -1,22 +1,12 @@
 import { Metadata } from 'next'
 import { ReactNode } from 'react'
-import { cookies } from 'next/headers'
-import { TopNavigation } from './components/TopNavigation'
-import { verifySession } from './utils/firebase'
 
 export const metadata: Metadata = {
     title: 'Mine organisasjoner | Entur Tavla',
 }
 
 async function AdminLayout({ children }: { children: ReactNode }) {
-    const session = cookies().get('session')?.value
-    const loggedIn = (await verifySession(session)) !== null
-    return (
-        <>
-            <TopNavigation loggedIn={loggedIn} />
-            <main className="container mx-auto pt-4 pb-20">{children}</main>
-        </>
-    )
+    return <main className="container mx-auto pt-4 pb-20">{children}</main>
 }
 
 export default AdminLayout
diff --git a/next-tavla/app/demo/components/CreateUserButton.tsx b/next-tavla/app/demo/components/CreateUserButton.tsx
new file mode 100644
index 000000000..fb0644bf6
--- /dev/null
+++ b/next-tavla/app/demo/components/CreateUserButton.tsx
@@ -0,0 +1,32 @@
+'use client'
+
+import { Button } from '@entur/button'
+import { Heading3, Paragraph } from '@entur/typography'
+import Link from 'next/link'
+import { usePostHog } from 'posthog-js/react'
+
+export const CreateUserButton = () => {
+    const posthog = usePostHog()
+
+    return (
+        <div>
+            <Heading3 margin="bottom">Opprett bruker</Heading3>
+            <Paragraph margin="none">
+                Det er helt gratis å bruke Tavla!
+            </Paragraph>
+            <Button
+                variant="success"
+                as={Link}
+                href="?login"
+                className="mt-2"
+                onClick={() => {
+                    posthog.capture('LOGIN_BTN_DEMO_PAGE')
+                }}
+            >
+                Opprett bruker / Logg inn
+            </Button>
+        </div>
+    )
+}
+
+export default CreateUserButton
diff --git a/next-tavla/app/demo/components/DemoBoard.tsx b/next-tavla/app/demo/components/DemoBoard.tsx
new file mode 100644
index 000000000..11b1978f6
--- /dev/null
+++ b/next-tavla/app/demo/components/DemoBoard.tsx
@@ -0,0 +1,52 @@
+'use client'
+import { Heading2 } from '@entur/typography'
+import { TileSelector } from 'app/(admin)/components/TileSelector'
+import { formDataToTile } from 'app/(admin)/components/TileSelector/utils'
+import { Preview } from 'app/(admin)/edit/[id]/components/Preview'
+import { TileCard } from 'app/(admin)/edit/[id]/components/TileCard'
+import useLocalStorage from '../../(admin)/hooks/useLocalStorage'
+import { TTile } from 'types/tile'
+import { usePostHog } from 'posthog-js/react'
+
+const emptyDemoBoard = {
+    id: 'demo',
+    meta: { title: 'Demo' },
+    tiles: [],
+}
+
+function DemoBoard() {
+    const [board, setBoard] = useLocalStorage('board', emptyDemoBoard)
+
+    const posthog = usePostHog()
+
+    return (
+        <>
+            <div className="flex flex-col gap-4">
+                <Heading2>Hvilke stoppesteder vil du vise i tavlen?</Heading2>
+                <TileSelector
+                    action={async (data: FormData) => {
+                        const tile = formDataToTile(data)
+                        setBoard({ ...board, tiles: [...board.tiles, tile] })
+                        posthog.capture('ADD_STOP_PLACE_DEMO_PAGE')
+                    }}
+                    col={false}
+                />
+                {board.tiles?.map((tile: TTile) => (
+                    <TileCard
+                        key={tile.uuid}
+                        tile={tile}
+                        bid={board.id ?? 'demo'}
+                        demoBoard={board}
+                        setDemoBoard={setBoard}
+                    />
+                ))}
+            </div>
+            <div className="flex flex-col gap-4">
+                <Heading2>Forhåndsvisning</Heading2>
+                <Preview board={board} />
+            </div>
+        </>
+    )
+}
+
+export { DemoBoard }
diff --git a/next-tavla/app/demo/page.tsx b/next-tavla/app/demo/page.tsx
new file mode 100644
index 000000000..da941773f
--- /dev/null
+++ b/next-tavla/app/demo/page.tsx
@@ -0,0 +1,62 @@
+import {
+    Heading1,
+    Heading2,
+    LeadParagraph,
+    ListItem,
+    Paragraph,
+    UnorderedList,
+} from '@entur/typography'
+import { verifySession } from 'app/(admin)/utils/firebase'
+import { cookies } from 'next/headers'
+import { DemoBoard } from './components/DemoBoard'
+import CreateUserButton from './components/CreateUserButton'
+
+async function Demo() {
+    const session = cookies().get('session')?.value
+    const loggedIn = (await verifySession(session)) !== null
+
+    return (
+        <main className="container mx-auto pt-8 pb-20 flex flex-col gap-10">
+            <div>
+                <Heading1>Prøv og lag din egen avgangstavle!</Heading1>
+                <LeadParagraph margin="none" className="lg:w-4/5">
+                    Dette er en demo-løsning hvor du kan prøve å opprette din
+                    egen tavle. Du må logge inn for å lagre tavlen og få tilgang
+                    til all funksjonalitet. Tavlen du lager her blir ikke
+                    lagret.
+                </LeadParagraph>
+            </div>
+            {!loggedIn && <CreateUserButton />}
+
+            <div className="flex flex-col gap-10">
+                <Heading1 margin="none">Lag en demo-tavle</Heading1>
+                <DemoBoard />
+            </div>
+            <div>
+                <Heading2>Innstillinger som krever innlogging</Heading2>
+                <Paragraph margin="none">Hvis du logger inn, kan du:</Paragraph>
+                <UnorderedList className="flex flex-col gap-1 pl-6">
+                    <ListItem>Endre tekststørrelse</ListItem>
+                    <ListItem>
+                        Legge til en info-melding nederst i tavlen
+                    </ListItem>
+                    <ListItem>Endre fargetema (lys eller mørk modus)</ListItem>
+                    <ListItem>
+                        Legge inn adressen som tavlen står på og vise gåavstand
+                        fra tavlen til stoppested(ene)
+                    </ListItem>
+                    <ListItem>
+                        Opprette så mange tavler du vil og samle disse i ulike
+                        organisasjoner (mapper)
+                    </ListItem>
+                    <ListItem>
+                        Gi andre tilgang til å administrere tavlen
+                    </ListItem>
+                </UnorderedList>
+            </div>
+            {!loggedIn && <CreateUserButton />}
+        </main>
+    )
+}
+
+export default Demo
diff --git a/next-tavla/app/layout.tsx b/next-tavla/app/layout.tsx
index df00c31ba..993194162 100644
--- a/next-tavla/app/layout.tsx
+++ b/next-tavla/app/layout.tsx
@@ -9,6 +9,9 @@ import dynamic from 'next/dynamic'
 import { EnturToastProvider, PHProvider } from './providers'
 import { Footer } from './(admin)/components/Footer'
 import { FloatingContact } from './components/FloatingContact'
+import { TopNavigation } from './(admin)/components/TopNavigation'
+import { cookies } from 'next/headers'
+import { verifySession } from './(admin)/utils/firebase'
 
 export const metadata: Metadata = {
     title: 'Entur Tavla',
@@ -38,12 +41,15 @@ const PostHogPageView = dynamic(() => import('./components/PostHogPageView'), {
     ssr: false,
 })
 
-function RootLayout({ children }: { children: ReactNode }) {
+async function RootLayout({ children }: { children: ReactNode }) {
+    const session = cookies().get('session')?.value
+    const loggedIn = (await verifySession(session)) !== null
     return (
         <html lang="nb">
             <PHProvider>
                 <EnturToastProvider>
                     <body>
+                        <TopNavigation loggedIn={loggedIn} />
                         <PostHogPageView />
                         {children}
                         <FloatingContact />
diff --git a/next-tavla/app/page.tsx b/next-tavla/app/page.tsx
index a3877d17d..5f1c6f134 100644
--- a/next-tavla/app/page.tsx
+++ b/next-tavla/app/page.tsx
@@ -1,8 +1,5 @@
-import { verifySession } from './(admin)/utils/firebase'
 import landingImage from 'assets/illustrations/Main_city_2.svg'
 import { Metadata } from 'next'
-import { cookies } from 'next/headers'
-import { TopNavigation } from './(admin)/components/TopNavigation'
 import Image from 'next/image'
 import {
     Heading1,
@@ -19,13 +16,9 @@ export const metadata: Metadata = {
     title: 'Forside | Entur Tavla',
 }
 
-async function Landing() {
-    const session = cookies().get('session')?.value
-    const loggedIn = (await verifySession(session)) !== null
-
+function Landing() {
     return (
         <>
-            <TopNavigation loggedIn={loggedIn} />
             <main>
                 <Welcome />
                 <div className="flex flex-col justify-center pb-10 pt-6">
diff --git a/next-tavla/app/privacy/page.tsx b/next-tavla/app/privacy/page.tsx
index 355c60f6f..3d28a1c99 100644
--- a/next-tavla/app/privacy/page.tsx
+++ b/next-tavla/app/privacy/page.tsx
@@ -4,22 +4,15 @@ import doves from 'assets/illustrations/Doves.png'
 import hedgehog from 'assets/illustrations/Hedgehog.png'
 import squirrel from 'assets/illustrations/Squirrel.png'
 import Image from 'next/image'
-import { TopNavigation } from 'app/(admin)/components/TopNavigation'
-import { cookies } from 'next/headers'
 import { ExpandableInfo } from './components/ExpandableInfo'
-import { verifySession } from 'app/(admin)/utils/firebase'
 
 export const metadata: Metadata = {
     title: 'Personvern | Entur Tavla',
 }
 
-async function Privacy() {
-    const session = cookies().get('session')?.value
-    const loggedIn = (await verifySession(session)) !== null
-
+function Privacy() {
     return (
         <>
-            <TopNavigation loggedIn={loggedIn} />
             <main className="container mx-auto pb-10">
                 <div className="flex flex-col justify-center mb-8">
                     <Heading1>Personvern</Heading1>
diff --git a/next-tavla/src/Board/scenarios/Board/index.tsx b/next-tavla/src/Board/scenarios/Board/index.tsx
index ef6317339..7f5f94251 100644
--- a/next-tavla/src/Board/scenarios/Board/index.tsx
+++ b/next-tavla/src/Board/scenarios/Board/index.tsx
@@ -19,7 +19,7 @@ function Board({ board, style }: { board: TBoard; style?: CSSProperties }) {
     if (!board.tiles || !board.tiles.length)
         return (
             <Tile className="flex items-center justify-center">
-                <p>Du har ikke lagt til noen stoppesteder enda.</p>
+                <p>Du har ikke lagt til noen stoppesteder ennå.</p>
             </Tile>
         )
 
diff --git a/next-tavla/src/Board/scenarios/Table/index.tsx b/next-tavla/src/Board/scenarios/Table/index.tsx
index 95d3a169f..ea064f2c8 100644
--- a/next-tavla/src/Board/scenarios/Table/index.tsx
+++ b/next-tavla/src/Board/scenarios/Table/index.tsx
@@ -29,7 +29,7 @@ function Table({
     if (!columns || !isArray(columns))
         return (
             <div className="flex shrink-0">
-                Du har ikke lagt til noen kolonner enda
+                Du har ikke lagt til noen kolonner ennå
             </div>
         )