diff --git a/apps/clients/src/components/ClientLayout.test.tsx b/apps/clients/src/components/ClientLayout.test.tsx
index 709a0c0..4578431 100644
--- a/apps/clients/src/components/ClientLayout.test.tsx
+++ b/apps/clients/src/components/ClientLayout.test.tsx
@@ -5,7 +5,7 @@ import { renderWithProviders } from "../test/testHelpers";
 import { ClientLayout } from "./ClientLayout";
 
 describe("ClientLayout", () => {
-  it("uses the main app style header shell and centered content container", () => {
+  it("uses the main app style header shell and scrolling main viewport", () => {
     const { container } = renderWithProviders(<ClientLayout />);
 
     const header = container.querySelector("header");
@@ -18,9 +18,17 @@ describe("ClientLayout", () => {
     expect(headerInner).toHaveClass("mx-auto");
 
     const main = container.querySelector("main");
-    expect(main).toHaveClass("w-full");
-    expect(main).toHaveClass("max-w-7xl");
-    expect(main).toHaveClass("mx-auto");
+    expect(main).toHaveClass("flex-1");
+    expect(main).toHaveClass("overflow-auto");
+    expect(main).not.toHaveClass("max-w-7xl");
+    expect(main).not.toHaveClass("mx-auto");
+
+    const contentWrapper = main?.firstElementChild;
+    expect(contentWrapper).toHaveClass("mx-auto");
+    expect(contentWrapper).toHaveClass("w-full");
+    expect(contentWrapper).toHaveClass("max-w-7xl");
+    expect(contentWrapper).toHaveClass("px-4");
+    expect(contentWrapper).toHaveClass("sm:px-6");
   });
 
   it("redirects unauthenticated client routes to the login page", async () => {
diff --git a/apps/clients/src/components/ClientLayout.tsx b/apps/clients/src/components/ClientLayout.tsx
index 5ef32f4..a2079db 100644
--- a/apps/clients/src/components/ClientLayout.tsx
+++ b/apps/clients/src/components/ClientLayout.tsx
@@ -24,7 +24,7 @@ export function ClientLayout() {
   };
 
   return (
-    <div className="flex min-h-screen flex-col bg-background">
+    <div className="flex h-screen flex-col overflow-hidden bg-background">
       <header className="h-[75px] shrink-0 border-b border-[#EAECF0] bg-navbar-background dark:border-gray-700">
         <div className="mx-auto flex h-full w-full max-w-7xl items-center justify-between gap-4 px-4 sm:px-6">
           <span className="text-lg font-semibold text-foreground">Xtablo</span>
@@ -42,8 +42,10 @@ export function ClientLayout() {
         </div>
       </header>
 
-      <main className="mx-auto w-full max-w-7xl flex-1 px-4 py-6 sm:px-6">
-        <Outlet />
+      <main className="flex-1 overflow-auto">
+        <div className="mx-auto w-full max-w-7xl px-4 sm:px-6">
+          <Outlet />
+        </div>
       </main>
     </div>
   );
diff --git a/apps/clients/src/main.css b/apps/clients/src/main.css
index 2782768..104b0b7 100644
--- a/apps/clients/src/main.css
+++ b/apps/clients/src/main.css
@@ -2,6 +2,8 @@
 @import "tw-animate-css";
 
 @source "../../../packages/chat-ui/src/**/*.{ts,tsx}";
+@source "../../../packages/tablo-views/src/**/*.{ts,tsx}";
+@source "../../../packages/auth-ui/src/**/*.{ts,tsx}";
 
 @custom-variant dark (&:is(.dark *));
 
diff --git a/apps/clients/src/mainCss.test.ts b/apps/clients/src/mainCss.test.ts
index c150cce..a7f2a5c 100644
--- a/apps/clients/src/mainCss.test.ts
+++ b/apps/clients/src/mainCss.test.ts
@@ -5,8 +5,10 @@ import { describe, expect, it } from "vitest";
 const mainCss = readFileSync(resolve(process.cwd(), "src/main.css"), "utf8");
 
 describe("clients main.css", () => {
-  it("keeps the chat source and theme tokens aligned with the main app", () => {
+  it("keeps shared package sources and theme tokens aligned with the main app", () => {
     expect(mainCss).toContain('@source "../../../packages/chat-ui/src/**/*.{ts,tsx}";');
+    expect(mainCss).toContain('@source "../../../packages/tablo-views/src/**/*.{ts,tsx}";');
+    expect(mainCss).toContain('@source "../../../packages/auth-ui/src/**/*.{ts,tsx}";');
     expect(mainCss).toContain("--navbar-background: rgb(249, 250, 251);");
     expect(mainCss).toContain("--color-navbar-background: var(--navbar-background);");
     expect(mainCss).toContain("--str-chat__own-message-bubble-color: #804eec;");