Screenly · nicomiguelino · Jul 28, 2026 · Aug 4, 2026
diff --git a/bun.lock b/bun.lock
diff --git a/index.html b/index.html
@@ -6,40 +6,85 @@
     <title>Airtable - Screenly Edge App</title>
     <script src="screenly.js?version=1"></script>
   </head>
-  <body>
+  <body
+    class="text-[#f2f2f3] bg-[url('/static/images/bg.webp')] bg-no-repeat bg-center bg-cover bg-[#08080d] before:content-[''] before:fixed before:inset-0 before:z-[var(--z-index-backdrop)] before:pointer-events-none before:bg-black/45 before:backdrop-blur-[7px]"
+  >
     <auto-scaler
       reference-width="1920"
       reference-height="1080"
       orientation="auto"
+      class="relative z-[var(--z-index-content)]"
     >
-      <div id="app">
-        <app-header class="header" show-date></app-header>
-        <main class="content">
-          <div id="table-wrapper">
-            <h2 id="table-title" hidden></h2>
-            <div class="table-card" id="grid-container" style="display: none">
-              <table id="data-table">
+      <div id="app" class="w-full h-full flex flex-col">
+        <app-header
+          class="header flex-shrink-0 bg-white/[0.08] border border-white/[0.12] shadow-[0_1.25rem_3rem_rgba(0,0,0,0.4),0_0.5rem_1rem_rgba(0,0,0,0.2)]"
+          show-date
+        ></app-header>
+        <main
+          class="content flex-1 flex justify-center items-start px-12 py-8 min-h-0 overflow-hidden portrait:px-8 portrait:py-6"
+        >
+          <div
+            id="table-wrapper"
+            class="w-full max-w-[100rem] max-h-full flex flex-col gap-12 min-h-0 portrait:max-w-full"
+          >
+            <h2
+              id="table-title"
+              hidden
+              class="text-[2rem] font-semibold text-[#f2f2f3] m-0 tracking-[-0.03em] text-shadow-[0_0.125rem_0.5rem_rgba(0,0,0,0.4)] flex-shrink-0 portrait:text-[1.75rem]"
+            ></h2>
+            <div
+              id="grid-container"
+              style="display: none"
+              class="bg-white/[0.08] border border-white/[0.12] rounded-3xl overflow-hidden backdrop-blur-[20px] shadow-[0_1.25rem_3rem_rgba(0,0,0,0.4),0_0.5rem_1rem_rgba(0,0,0,0.2)]"
+            >
+              <table id="data-table" class="w-full border-collapse">
                 <thead id="table-head"></thead>
                 <tbody id="table-body"></tbody>
               </table>
             </div>
-            <div id="kanban-container" style="display: none">
-              <div id="kanban-board"></div>
+            <div
+              id="kanban-container"
+              style="display: none"
+              class="flex-1 min-h-0 overflow-hidden"
+            >
+              <div
+                id="kanban-board"
+                class="flex gap-5 h-full overflow-x-auto overflow-y-hidden items-start pb-2 [&::-webkit-scrollbar]:h-[0.375rem] [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-white/20 [&::-webkit-scrollbar-thumb]:rounded-2xl"
+              ></div>
             </div>
           </div>
 
-          <div id="error-screen" style="display: none">
-            <div class="error-card">
-              <div class="error-card-left">
-                <h2>Something went wrong</h2>
-                <p>
+          <div
+            id="error-screen"
+            style="display: none"
+            class="w-full self-stretch flex items-center justify-center"
+          >
+            <div
+              class="bg-white/5 border-[0.0625rem] border-[rgba(255,80,80,0.2)] rounded-3xl flex flex-row overflow-hidden max-w-[60rem] w-full backdrop-blur-[20px] shadow-[0_1.25rem_3rem_rgba(0,0,0,0.4),0_0.5rem_1rem_rgba(0,0,0,0.2)] portrait:flex-col portrait:max-w-full"
+            >
+              <div
+                class="bg-[rgba(255,80,80,0.08)] border-r-[0.0625rem] border-[rgba(255,80,80,0.2)] py-10 px-8 flex flex-col justify-start gap-4 flex-[0_0_20rem] portrait:flex-none portrait:border-r-0 portrait:border-b-[0.0625rem]"
+              >
+                <h2
+                  class="text-[2rem] font-bold leading-[1.2] tracking-[-0.03em] text-[#ff6b6b] m-0"
+                >
+                  Something went wrong
+                </h2>
+                <p class="text-base text-[#dadadb] leading-[1.6] m-0">
                   The Airtable data could not be loaded. Please check your
                   configuration or contact your administrator.
                 </p>
               </div>
-              <div class="error-card-right">
-                <div class="error-detail-label">Error details</div>
-                <p id="error-message" class="error-detail-message"></p>
+              <div class="flex-1 py-10 px-8 flex flex-col justify-start gap-3">
+                <div
+                  class="text-xs font-semibold text-[#9d9d9f] uppercase tracking-[0.08em]"
+                >
+                  Error details
+                </div>
+                <p
+                  id="error-message"
+                  class="text-base text-[#dadadb] leading-[1.6] break-words m-0"
+                ></p>
               </div>
             </div>
           </div>

diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
   "prettier": "./.prettierrc.json",
   "devDependencies": {
     "@playwright/test": "^1.59.1",
-    "@screenly/edge-apps": "^1.2.1",
+    "@screenly/edge-apps": "^1.4.0",
     "@types/bun": "^1.3.9",
     "@types/jsdom": "^28.0.1",
     "bun-types": "^1.3.9",

diff --git a/screenshots/grid-1080x1920.webp b/screenshots/grid-1080x1920.webp
diff --git a/screenshots/grid-1280x720.webp b/screenshots/grid-1280x720.webp
diff --git a/screenshots/grid-1920x1080.webp b/screenshots/grid-1920x1080.webp
diff --git a/screenshots/grid-2160x3840.webp b/screenshots/grid-2160x3840.webp
diff --git a/screenshots/grid-2160x4096.webp b/screenshots/grid-2160x4096.webp
diff --git a/screenshots/grid-3840x2160.webp b/screenshots/grid-3840x2160.webp
diff --git a/screenshots/grid-4096x2160.webp b/screenshots/grid-4096x2160.webp
diff --git a/screenshots/grid-480x800.webp b/screenshots/grid-480x800.webp
diff --git a/screenshots/grid-720x1280.webp b/screenshots/grid-720x1280.webp
diff --git a/screenshots/grid-800x480.webp b/screenshots/grid-800x480.webp
diff --git a/screenshots/kanban-1080x1920.webp b/screenshots/kanban-1080x1920.webp
diff --git a/screenshots/kanban-1280x720.webp b/screenshots/kanban-1280x720.webp
diff --git a/screenshots/kanban-1920x1080.webp b/screenshots/kanban-1920x1080.webp
diff --git a/screenshots/kanban-2160x3840.webp b/screenshots/kanban-2160x3840.webp
diff --git a/screenshots/kanban-2160x4096.webp b/screenshots/kanban-2160x4096.webp
diff --git a/screenshots/kanban-3840x2160.webp b/screenshots/kanban-3840x2160.webp
diff --git a/screenshots/kanban-4096x2160.webp b/screenshots/kanban-4096x2160.webp
diff --git a/screenshots/kanban-480x800.webp b/screenshots/kanban-480x800.webp
diff --git a/screenshots/kanban-720x1280.webp b/screenshots/kanban-720x1280.webp
diff --git a/screenshots/kanban-800x480.webp b/screenshots/kanban-800x480.webp
diff --git a/src/app.ts b/src/app.ts
@@ -73,10 +73,11 @@ export function createErrorReporter(displayErrors: boolean): ErrorReporter {
 
 export function createPillsContainer(pills: Pill[]): HTMLDivElement {
   const container = document.createElement('div')
-  container.className = 'cell-pills'
+  container.className = 'cell-pills flex flex-nowrap gap-1 items-center'
   pills.forEach((pill) => {
     const span = document.createElement('span')
-    span.className = 'pill'
+    span.className =
+      'pill inline-flex items-center px-[0.6rem] py-[0.2rem] rounded-2xl text-xs font-medium whitespace-nowrap'
     span.textContent = pill.label
     const colors = (pill.color && AIRTABLE_COLORS[pill.color]) || PILL_FALLBACK
     span.style.backgroundColor = colors.bg
@@ -101,17 +102,25 @@ export function renderTable(headers: string[], rows: CellValue[][]): void {
   }
 
   const headerRow = document.createElement('tr')
+  headerRow.className =
+    'bg-[linear-gradient(rgba(255,255,255,0.15),rgba(255,255,255,0.15))] bg-[length:calc(100%-4rem)_1px] bg-center bg-no-repeat'
   headers.forEach((header) => {
     const th = document.createElement('th')
+    th.className =
+      'text-left py-5 px-8 text-xs font-semibold tracking-[0.08em] uppercase text-[#9d9d9f] whitespace-nowrap portrait:py-4 portrait:px-5 portrait:text-[0.7rem]'
     th.textContent = header
     headerRow.appendChild(th)
   })
   thead.appendChild(headerRow)
 
   rows.forEach((row) => {
     const tr = document.createElement('tr')
+    tr.className =
+      '[&:not(:last-child)]:bg-[linear-gradient(rgba(255,255,255,0.15),rgba(255,255,255,0.15))] [&:not(:last-child)]:bg-[length:calc(100%-4rem)_1px] [&:not(:last-child)]:bg-center [&:not(:last-child)]:bg-no-repeat'
     row.forEach((cell) => {
       const td = document.createElement('td')
+      td.className =
+        'py-[1.125rem] px-8 text-lg font-normal text-[#dadadb] whitespace-nowrap align-middle portrait:py-[0.875rem] portrait:px-5 portrait:text-base'
       if (typeof cell === 'string') {
         td.textContent = cell
       } else {

diff --git a/src/css/grid.css b/src/css/grid.css
diff --git a/src/css/kanban.css b/src/css/kanban.css