diff --git a/package.json b/package.json
index e8fc0d58..b839e0f9 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
       "import": "./lib/index.es.min.js",
       "require": "./lib/index.umd.min.js"
     },
+    "./global.css": "./lib/global.css",
     "./hyperparam.css": "./lib/hyperparam.css"
   },
   "bin": {
@@ -29,7 +30,7 @@
   ],
   "scripts": {
     "build:types": "tsc -b",
-    "build:lib": "vite build -c vite.lib.config.ts",
+    "build:lib": "vite build -c vite.lib.config.ts && cp src/styles/global.css lib/global.css",
     "build:app": "vite build",
     "build": "run-s build:lib build:types build:app",
     "coverage": "vitest run --coverage --coverage.include=src --coverage.include=bin",
diff --git a/src/app.tsx b/src/app.tsx
index 40aba716..62317ed3 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -1,8 +1,7 @@
-import 'hightable/src/HighTable.css'
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import App from './components/App.js'
-import './styles/app.css'
+import './styles/global.css'
 
 const root = document.getElementById('app')
 if (!root) throw new Error('missing root element')
diff --git a/src/components/Breadcrumb.tsx b/src/components/Breadcrumb.tsx
index 9f264788..55756ff4 100644
--- a/src/components/Breadcrumb.tsx
+++ b/src/components/Breadcrumb.tsx
@@ -1,6 +1,8 @@
 import type { ReactNode } from 'react'
 import { useConfig } from '../hooks/useConfig.js'
 import type { Source } from '../lib/sources/types.js'
+import { cn } from '../lib/utils.js'
+import styles from '../styles/Breadcrumb.module.css'
 
 interface BreadcrumbProps {
   source: Source,
@@ -11,10 +13,10 @@ interface BreadcrumbProps {
  * Breadcrumb navigation
  */
 export default function Breadcrumb({ source, children }: BreadcrumbProps) {
-  const { routes } = useConfig()
+  const { routes, customClass } = useConfig()
 
-  return <nav className='top-header top-header-divided'>
-    <div className='path'>
+  return <nav className={cn(styles.breadcrumb, customClass?.breadcrumb)}>
+    <div className={cn(styles.path, customClass?.path)}>
       {source.sourceParts.map((part, depth) =>
         <a href={routes?.getSourceRouteUrl?.({ sourceId: part.sourceId }) ?? ''} key={depth}>{part.text}</a>
       )}
diff --git a/src/components/Center.tsx b/src/components/Center.tsx
new file mode 100644
index 00000000..779d3593
--- /dev/null
+++ b/src/components/Center.tsx
@@ -0,0 +1,9 @@
+import { ReactNode } from 'react'
+import { useConfig } from '../hooks/useConfig.js'
+import { cn } from '../lib/utils.js'
+import styles from '../styles/Center.module.css'
+
+export default function Center({ children }: {children?: ReactNode}) {
+  const { customClass } = useConfig()
+  return <div className={cn(styles.center, customClass?.center)}>{children}</div>
+}
diff --git a/src/components/ErrorBar.tsx b/src/components/ErrorBar.tsx
new file mode 100644
index 00000000..2b166c13
--- /dev/null
+++ b/src/components/ErrorBar.tsx
@@ -0,0 +1,35 @@
+import { useState } from 'react'
+import { useConfig } from '../hooks/useConfig.js'
+import { cn } from '../lib/utils.js'
+import styles from '../styles/ErrorBar.module.css'
+
+interface ErrorBarProps {
+  error?: Error
+}
+
+export default function ErrorBar({ error }: ErrorBarProps) {
+  const [showError, setShowError] = useState(error !== undefined)
+  const [prevError, setPrevError] = useState(error)
+  const { customClass } = useConfig()
+
+  if (error) console.error(error)
+  /// Reset error visibility when error prop changes
+  if (error !== prevError) {
+    setPrevError(error)
+    setShowError(error !== undefined)
+  }
+
+  return <div
+    className={cn(styles.errorBar, customClass?.errorBar)}
+    data-visible={showError}
+  >
+    <div>
+      <span>{error?.toString()}</span>
+      <button
+        aria-label='Close error message'
+        onClick={() => { setShowError(false) }}>
+        &times;
+      </button>
+    </div>
+  </div>
+}
diff --git a/src/components/Folder.tsx b/src/components/Folder.tsx
index 2955dac2..5dde3576 100644
--- a/src/components/Folder.tsx
+++ b/src/components/Folder.tsx
@@ -1,9 +1,12 @@
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { useConfig } from '../hooks/useConfig.js'
 import type { DirSource, FileMetadata } from '../lib/sources/types.js'
 import { cn, formatFileSize, getFileDate, getFileDateShort } from '../lib/utils.js'
+import styles from '../styles/Folder.module.css'
 import Breadcrumb from './Breadcrumb.js'
-import Layout, { Spinner } from './Layout.js'
+import Center from './Center.js'
+import Layout from './Layout.js'
+import Spinner from './Spinner.js'
 
 interface FolderProps {
   source: DirSource
@@ -19,8 +22,7 @@ export default function Folder({ source }: FolderProps) {
   const [searchQuery, setSearchQuery] = useState('')
   const searchRef = useRef<HTMLInputElement>(null)
   const listRef = useRef<HTMLUListElement>(null)
-
-  const { routes } = useConfig()
+  const { routes, customClass } = useConfig()
 
   // Fetch files on component mount
   useEffect(() => {
@@ -33,7 +35,10 @@ export default function Folder({ source }: FolderProps) {
   }, [source])
 
   // File search
-  const filtered = files?.filter(file => file.name.toLowerCase().includes(searchQuery.toLowerCase()))
+  const filtered = useMemo(() => {
+    return files?.filter(file => file.name.toLowerCase().includes(searchQuery.toLowerCase()))
+  }, [files, searchQuery])
+
   useEffect(() => {
     const searchElement = searchRef.current
     function handleKeyup(e: KeyboardEvent) {
@@ -84,32 +89,33 @@ export default function Folder({ source }: FolderProps) {
 
   return <Layout error={error} title={source.prefix}>
     <Breadcrumb source={source}>
-      <div className='top-actions'>
-        <input autoFocus className='search' placeholder='Search...' ref={searchRef} />
-      </div>
+      <input autoFocus className={cn(styles.search, customClass?.search)} placeholder='Search...' ref={searchRef} />
     </Breadcrumb>
 
-    {files && files.length > 0 && <ul className='file-list' ref={listRef}>
-      {filtered?.map((file, index) =>
-        <li key={index}>
-          <a href={routes?.getSourceRouteUrl?.({ sourceId: file.sourceId }) ?? location.href}>
-            <span className={cn('file-name', 'file', file.kind === 'directory' && 'folder')}>
-              {file.name}
-            </span>
-            {file.kind === 'file' && <>
-              {file.size !== undefined && <span className='file-size' title={file.size.toLocaleString() + ' bytes'}>
-                {formatFileSize(file.size)}
-              </span>}
-              <span className='file-date' title={getFileDate(file)}>
-                {getFileDateShort(file)}
-              </span>
-            </>}
-          </a>
-        </li>
-      )}
-    </ul>}
-    {files?.length === 0 && <div className='center'>No files</div>}
-    {files === undefined && <div className='center'><Spinner /></div>}
+    {filtered === undefined ?
+      <Center><Spinner /></Center> :
+      filtered.length === 0 ?
+        <Center>No files</Center> :
+        <ul className={cn(styles.fileList, customClass?.fileList)} ref={listRef}>
+          {filtered.map((file, index) =>
+            <li key={index}>
+              <a href={routes?.getSourceRouteUrl?.({ sourceId: file.sourceId }) ?? location.href}>
+                <span data-file-kind={file.kind}>
+                  {file.name}
+                </span>
+                {file.kind === 'file' && <>
+                  {file.size !== undefined && <span data-file-size title={file.size.toLocaleString() + ' bytes'}>
+                    {formatFileSize(file.size)}
+                  </span>}
+                  <span data-file-date title={getFileDate(file)}>
+                    {getFileDateShort(file)}
+                  </span>
+                </>}
+              </a>
+            </li>
+          )}
+        </ul>
+    }
   </Layout>
 }
 
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index a5d93d9b..0047b442 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,10 +1,14 @@
 import { ReactNode, useEffect, useState } from 'react'
+import { useConfig } from '../hooks/useConfig.js'
 import { cn } from '../lib/utils.js'
+import styles from '../styles/Layout.module.css'
+import ErrorBar from './ErrorBar.js'
+import ProgressBar from './ProgressBar.js'
+import SideBar from './SideBar.js'
 import Welcome from './Welcome.js'
 
 interface LayoutProps {
   children: ReactNode
-  className?: string
   progress?: number
   error?: Error
   title?: string
@@ -16,13 +20,13 @@ interface LayoutProps {
  *
  * @param props
  * @param props.children - content to display inside the layout
- * @param props.className - additional class names to apply to the content container
  * @param props.progress - progress bar value
  * @param props.error - error message to display
  * @param props.title - page title
  */
-export default function Layout({ children, className, progress, error, title }: LayoutProps) {
+export default function Layout({ children, progress, error, title }: LayoutProps) {
   const [showWelcome, setShowWelcome] = useState(false)
+  const { customClass } = useConfig()
 
   // Check localStorage on mount to see if the user has seen the welcome popup
   useEffect(() => {
@@ -41,55 +45,15 @@ export default function Layout({ children, className, progress, error, title }:
     document.title = title ? `${title} - hyperparam` : 'hyperparam'
   }, [title])
 
-  return <main className='main'>
-    <Sidebar />
-    <div className='content-container'>
-      <div className={cn('content', className)}>
+  return <div className={cn(styles.layout, customClass?.layout)}>
+    <SideBar />
+    <main>
+      <div>
         {children}
       </div>
       <ErrorBar error={error}></ErrorBar>
-    </div>
-    {progress !== undefined && progress < 1 &&
-      <div className={'progress-bar'} role='progressbar'>
-        <div style={{ width: `${100 * progress}%` }} />
-      </div>
-    }
+    </main>
+    {progress !== undefined && progress < 1 && <ProgressBar value={progress} />}
     {showWelcome && <Welcome onClose={handleCloseWelcome} />}
-  </main>
-}
-
-function Sidebar() {
-  return <nav className='nav'>
-    <div>
-      <a className="brand" href='/'>hyperparam</a>
-    </div>
-  </nav>
-}
-
-export function Spinner({ className }: { className?: string }) {
-  return <div className={cn('spinner', className)}></div>
-}
-
-export function ErrorBar({ error }: { error?: Error }) {
-  const [showError, setShowError] = useState(error !== undefined)
-  const [prevError, setPrevError] = useState(error)
-
-  if (error) console.error(error)
-  /// Reset error visibility when error prop changes
-  if (error !== prevError) {
-    setPrevError(error)
-    setShowError(error !== undefined)
-  }
-
-  return <div className={cn('error-bar', showError && 'show-error')}>
-    <div className='error-content'>
-      <span>{error?.toString()}</span>
-      <button
-        aria-label='Close error message'
-        className='close-button'
-        onClick={() => { setShowError(false) }}>
-      &times;
-      </button>
-    </div>
   </div>
 }
diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.tsx
new file mode 100644
index 00000000..b29da63a
--- /dev/null
+++ b/src/components/ProgressBar.tsx
@@ -0,0 +1,25 @@
+import { useConfig } from '../hooks/useConfig'
+import { cn } from '../lib/utils.js'
+import styles from '../styles/ProgressBar.module.css'
+import VisuallyHidden from './VisuallyHidden.js'
+
+export default function ProgressBar({ value }: {value: number}) {
+  const { customClass } = useConfig()
+  if (value < 0 || value > 1) {
+    throw new Error('ProgressBar value must be between 0 and 1')
+  }
+  const roundedValue = Math.round(value * 100) / 100
+  const percentage = roundedValue.toLocaleString('en-US', { style: 'percent' })
+  return (
+    <div
+      className={cn(styles.progressBar, customClass?.progressBar)}
+      role='progressbar'
+      aria-valuenow={roundedValue}
+      aria-valuemin={0}
+      aria-valuemax={1}
+    >
+      <VisuallyHidden>{percentage}</VisuallyHidden>
+      <div style={{ width: percentage }} role="presentation" />
+    </div>
+  )
+}
diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
new file mode 100644
index 00000000..2d5f46e5
--- /dev/null
+++ b/src/components/SideBar.tsx
@@ -0,0 +1,12 @@
+import { useConfig } from '../hooks/useConfig.js'
+import { cn } from '../lib/utils.js'
+import styles from '../styles/SideBar.module.css'
+
+export default function SideBar() {
+  const { customClass } = useConfig()
+  return <nav className={cn(styles.sideBar, customClass?.sideBar)}>
+    <div>
+      <a className={cn(styles.brand, customClass?.brand)} href='/'>hyperparam</a>
+    </div>
+  </nav>
+}
diff --git a/src/components/SlideCloseButton.tsx b/src/components/SlideCloseButton.tsx
new file mode 100644
index 00000000..4ad70a15
--- /dev/null
+++ b/src/components/SlideCloseButton.tsx
@@ -0,0 +1,11 @@
+import { MouseEventHandler } from 'react'
+import { useConfig } from '../hooks/useConfig.js'
+import { cn } from '../lib/utils.js'
+import styles from '../styles/SlideCloseButton.module.css'
+
+export default function SlideCloseButton({ onClick }: { onClick: MouseEventHandler<HTMLButtonElement> | undefined }) {
+  const { customClass } = useConfig()
+  return (
+    <button className={ cn( styles.slideClose, customClass?.slideCloseButton ) } onClick={onClick}>&nbsp;</button>
+  )
+}
diff --git a/src/components/Spinner.tsx b/src/components/Spinner.tsx
new file mode 100644
index 00000000..9610bc17
--- /dev/null
+++ b/src/components/Spinner.tsx
@@ -0,0 +1,14 @@
+import { useConfig } from '../hooks/useConfig.js'
+import { cn } from '../lib/utils.js'
+import styles from '../styles/Spinner.module.css'
+import VisuallyHidden from './VisuallyHidden.js'
+
+export default function Spinner({ text }: {text?: string}) {
+  const { customClass } = useConfig()
+  const spinnerText = text ?? 'Loading...'
+  return <div
+    className={cn(styles.spinner, customClass?.spinner)}
+    role='status'
+    aria-live='polite'
+  ><VisuallyHidden>{spinnerText}</VisuallyHidden></div>
+}
diff --git a/src/components/VisuallyHidden.tsx b/src/components/VisuallyHidden.tsx
new file mode 100644
index 00000000..1063edc3
--- /dev/null
+++ b/src/components/VisuallyHidden.tsx
@@ -0,0 +1,6 @@
+import { HTMLAttributes } from 'react'
+import styles from '../styles/VisuallyHidden.module.css'
+
+export default function VisuallyHidden({ children, ...delegated }: HTMLAttributes<HTMLElement>) {
+  return <div className={styles.wrapper} {...delegated}>{children}</div>
+};
diff --git a/src/components/Welcome.tsx b/src/components/Welcome.tsx
index 178ce0a8..154a05a3 100644
--- a/src/components/Welcome.tsx
+++ b/src/components/Welcome.tsx
@@ -1,4 +1,7 @@
 import { MouseEvent, useEffect } from 'react'
+import { useConfig } from '../hooks/useConfig.js'
+import { cn } from '../lib/utils.js'
+import styles from '../styles/Welcome.module.css'
 
 interface WelcomePopupProps {
   onClose: () => void
@@ -9,6 +12,7 @@ interface WelcomePopupProps {
  * Clicking outside the popup or pressing Escape will dismiss it.
  */
 export default function Welcome({ onClose }: WelcomePopupProps) {
+  const { customClass } = useConfig()
   // Close popup when clicking outside
   function handleBackdropClick(e: MouseEvent) {
     if (e.target === e.currentTarget) {
@@ -29,7 +33,7 @@ export default function Welcome({ onClose }: WelcomePopupProps) {
   }, [onClose])
 
   return (
-    <div className="welcome" onClick={handleBackdropClick}>
+    <div className={cn(styles.welcome, customClass?.welcome)} onClick={handleBackdropClick}>
       <div>
         <h2>npx hyperparam</h2>
         <p>
diff --git a/src/components/index.ts b/src/components/index.ts
index df244843..f3e9a7e4 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,9 +1,11 @@
 import Breadcrumb from './Breadcrumb.js'
 import Cell from './Cell.js'
+import ErrorBar from './ErrorBar.js'
 import File from './File.js'
 import Folder from './Folder.js'
-import Layout, { ErrorBar, Spinner } from './Layout.js'
+import Layout from './Layout.js'
 import Markdown from './Markdown.js'
 import Page from './Page.js'
+import Spinner from './Spinner.js'
 export * from './viewers/index.js'
 export { Breadcrumb, Cell, ErrorBar, File, Folder, Layout, Markdown, Page, Spinner }
diff --git a/src/components/viewers/AvroView.tsx b/src/components/viewers/AvroView.tsx
index 2d1f66ba..27530d33 100644
--- a/src/components/viewers/AvroView.tsx
+++ b/src/components/viewers/AvroView.tsx
@@ -1,11 +1,10 @@
+import { avroData, avroMetadata } from 'icebird'
 import { useEffect, useState } from 'react'
 import type { FileSource } from '../../lib/sources/types.js'
 import { parseFileSize } from '../../lib/utils.js'
 import styles from '../../styles/Json.module.css'
 import Json from '../Json.js'
-import { Spinner } from '../Layout.js'
-import ContentHeader, { ContentSize } from './ContentHeader.js'
-import { avroData, avroMetadata } from 'icebird'
+import ContentWrapper, { ContentSize } from './ContentWrapper.js'
 
 interface ViewerProps {
   source: FileSource
@@ -54,11 +53,9 @@ export default function AvroView({ source, setError }: ViewerProps) {
 
   const headers = content === undefined && <span>Loading...</span>
 
-  return <ContentHeader content={content} headers={headers}>
+  return <ContentWrapper content={content} headers={headers} isLoading={isLoading}>
     <code className={styles.jsonView}>
       <Json json={json} />
     </code>
-
-    {isLoading && <div className='center'><Spinner /></div>}
-  </ContentHeader>
+  </ContentWrapper>
 }
diff --git a/src/components/viewers/CellPanel.tsx b/src/components/viewers/CellPanel.tsx
index 10b3f0b6..30534546 100644
--- a/src/components/viewers/CellPanel.tsx
+++ b/src/components/viewers/CellPanel.tsx
@@ -1,6 +1,7 @@
 import { DataFrame, stringify } from 'hightable'
 import { useEffect, useState } from 'react'
-import ContentHeader from './ContentHeader.js'
+import SlideCloseButton from '../SlideCloseButton.js'
+import ContentWrapper from './ContentWrapper.js'
 
 interface ViewerProps {
   df: DataFrame
@@ -49,12 +50,12 @@ export default function CellPanel({ df, row, col, setProgress, setError, onClose
   }, [df, col, row, setProgress, setError])
 
   const headers = <>
-    <button className="slideClose" onClick={onClose}>&nbsp;</button>
+    <SlideCloseButton onClick={onClose} />
     <span>column `{df.header[col]}`</span>
     <span>row {row + 1}</span>
   </>
 
-  return <ContentHeader headers={headers}>
+  return <ContentWrapper headers={headers}>
     <code className="text">{text}</code>
-  </ContentHeader>
+  </ContentWrapper>
 }
diff --git a/src/components/viewers/ContentHeader.tsx b/src/components/viewers/ContentHeader.tsx
deleted file mode 100644
index 75d70e65..00000000
--- a/src/components/viewers/ContentHeader.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { ReactNode } from 'react'
-import { formatFileSize } from '../../lib/utils.js'
-
-export interface ContentSize {
-  fileSize?: number
-}
-
-export interface TextContent extends ContentSize {
-  text: string
-}
-
-interface ContentHeaderProps {
-  content?: ContentSize
-  headers?: ReactNode
-  children?: ReactNode
-}
-
-export default function ContentHeader({ content, headers, children }: ContentHeaderProps) {
-  return <div className='viewer'>
-    <div className='view-header'>
-      {content?.fileSize && <span title={content.fileSize.toLocaleString('en-US') + ' bytes'}>
-        {formatFileSize(content.fileSize)}
-      </span>}
-      {headers}
-    </div>
-    {children}
-  </div>
-}
diff --git a/src/components/viewers/ContentWrapper.tsx b/src/components/viewers/ContentWrapper.tsx
new file mode 100644
index 00000000..2d26b13a
--- /dev/null
+++ b/src/components/viewers/ContentWrapper.tsx
@@ -0,0 +1,34 @@
+import { ReactNode } from 'react'
+import { useConfig } from '../../hooks/useConfig.js'
+import { cn, formatFileSize } from '../../lib/utils.js'
+import styles from '../../styles/viewers/ContentWrapper.module.css'
+import Center from '../Center.js'
+import Spinner from '../Spinner.js'
+
+export interface ContentSize {
+  fileSize?: number
+}
+
+export interface TextContent extends ContentSize {
+  text: string
+}
+
+interface ContentWrapperProps {
+  content?: ContentSize
+  headers?: ReactNode
+  isLoading?: boolean
+  children?: ReactNode
+}
+
+export default function ContentWrapper({ content, headers, isLoading, children }: ContentWrapperProps) {
+  const { customClass } = useConfig()
+  return <div className={cn(styles.contentWrapper, customClass?.contentWrapper)}>
+    <header>
+      {content?.fileSize && <span title={content.fileSize.toLocaleString('en-US') + ' bytes'}>
+        {formatFileSize(content.fileSize)}
+      </span>}
+      {headers}
+    </header>
+    {isLoading ? <Center><Spinner /></Center> : children }
+  </div>
+}
diff --git a/src/components/viewers/ImageView.tsx b/src/components/viewers/ImageView.tsx
index 734bcf66..55672d70 100644
--- a/src/components/viewers/ImageView.tsx
+++ b/src/components/viewers/ImageView.tsx
@@ -1,8 +1,9 @@
 import { useEffect, useState } from 'react'
+import { useConfig } from '../../hooks/useConfig.js'
 import { FileSource } from '../../lib/sources/types.js'
-import { contentTypes, parseFileSize } from '../../lib/utils.js'
-import { Spinner } from '../Layout.js'
-import ContentHeader from './ContentHeader.js'
+import { cn, contentTypes, parseFileSize } from '../../lib/utils.js'
+import styles from '../../styles/viewers/ImageView.module.css'
+import ContentWrapper from './ContentWrapper.js'
 
 interface ViewerProps {
   source: FileSource
@@ -20,6 +21,7 @@ interface Content {
 export default function ImageView({ source, setError }: ViewerProps) {
   const [content, setContent] = useState<Content>()
   const [isLoading, setIsLoading] = useState(true)
+  const { customClass } = useConfig()
 
   const { fileName, resolveUrl, requestInit } = source
 
@@ -51,14 +53,12 @@ export default function ImageView({ source, setError }: ViewerProps) {
     void loadContent()
   }, [fileName, resolveUrl, requestInit, setError])
 
-  return <ContentHeader content={content}>
+  return <ContentWrapper content={content} isLoading={isLoading}>
     {content?.dataUri && <img
       alt={source.sourceId}
-      className='image'
+      className={cn(styles.image, customClass?.imageView)}
       src={content.dataUri} />}
-
-    {isLoading && <div className='center'><Spinner /></div>}
-  </ContentHeader>
+  </ContentWrapper>
 }
 
 /**
diff --git a/src/components/viewers/JsonView.tsx b/src/components/viewers/JsonView.tsx
index 2dfc6902..024f1822 100644
--- a/src/components/viewers/JsonView.tsx
+++ b/src/components/viewers/JsonView.tsx
@@ -2,9 +2,9 @@ import { useEffect, useState } from 'react'
 import type { FileSource } from '../../lib/sources/types.js'
 import { parseFileSize } from '../../lib/utils.js'
 import styles from '../../styles/Json.module.css'
+import Center from '../Center.js'
 import Json from '../Json.js'
-import { Spinner } from '../Layout.js'
-import ContentHeader, { TextContent } from './ContentHeader.js'
+import ContentWrapper, { TextContent } from './ContentWrapper.js'
 
 interface ViewerProps {
   source: FileSource
@@ -63,19 +63,18 @@ export default function JsonView({ source, setError }: ViewerProps) {
   // If json failed to parse, show the text instead
   const showFallbackText = content?.text !== undefined && json === undefined
 
-  return <ContentHeader content={content} headers={headers}>
-    {!isLarge && <>
-      {!showFallbackText && <code className={styles.jsonView}>
-        <Json json={json} />
-      </code>}
-      {showFallbackText && <code className={styles.text}>
-        {content.text}
-      </code>}
-    </>}
-    {isLarge && <div className='center'>
-      File is too large to display
-    </div>}
-
-    {isLoading && <div className='center'><Spinner /></div>}
-  </ContentHeader>
+  return <ContentWrapper content={content} headers={headers} isLoading={isLoading}>
+    {isLarge ?
+      <Center>File is too large to display</Center>
+      :
+      <>
+        {!showFallbackText && <code className={styles.jsonView}>
+          <Json json={json} />
+        </code>}
+        {showFallbackText && <code className={styles.text}>
+          {content.text}
+        </code>}
+      </>
+    }
+  </ContentWrapper>
 }
diff --git a/src/components/viewers/MarkdownView.tsx b/src/components/viewers/MarkdownView.tsx
index 37d73995..805260dd 100644
--- a/src/components/viewers/MarkdownView.tsx
+++ b/src/components/viewers/MarkdownView.tsx
@@ -1,9 +1,10 @@
 import { useEffect, useState } from 'react'
+import { useConfig } from '../../hooks/useConfig.js'
 import type { FileSource } from '../../lib/sources/types.js'
-import { parseFileSize } from '../../lib/utils.js'
-import { Spinner } from '../Layout.js'
+import { cn, parseFileSize } from '../../lib/utils.js'
+import styles from '../../styles/viewers/MarkdownView.module.css'
 import Markdown from '../Markdown.js'
-import ContentHeader, { TextContent } from './ContentHeader.js'
+import ContentWrapper, { TextContent } from './ContentWrapper.js'
 
 interface ViewerProps {
   source: FileSource
@@ -16,6 +17,7 @@ interface ViewerProps {
 export default function MarkdownView({ source, setError }: ViewerProps) {
   const [content, setContent] = useState<TextContent>()
   const [isLoading, setIsLoading] = useState(true)
+  const { customClass } = useConfig()
 
   const { resolveUrl, requestInit } = source
 
@@ -44,9 +46,7 @@ export default function MarkdownView({ source, setError }: ViewerProps) {
     void loadContent()
   }, [resolveUrl, requestInit, setError])
 
-  return <ContentHeader content={content}>
-    <Markdown className='markdown' text={content?.text ?? ''} />
-
-    { isLoading && <div className='center'><Spinner /></div> }
-  </ContentHeader>
+  return <ContentWrapper content={content} isLoading={isLoading}>
+    <Markdown className={cn(styles.markdownView, customClass?.markdownView)} text={content?.text ?? ''} />
+  </ContentWrapper>
 }
diff --git a/src/components/viewers/ParquetView.tsx b/src/components/viewers/ParquetView.tsx
index 16ba46b9..592ef201 100644
--- a/src/components/viewers/ParquetView.tsx
+++ b/src/components/viewers/ParquetView.tsx
@@ -1,4 +1,5 @@
 import HighTable, { DataFrame, rowCache } from 'hightable'
+import 'hightable/src/HighTable.css'
 import { asyncBufferFromUrl, parquetMetadataAsync } from 'hyparquet'
 import React, { useCallback, useEffect, useState } from 'react'
 import { useConfig } from '../../hooks/useConfig.js'
@@ -7,9 +8,8 @@ import { FileSource } from '../../lib/sources/types.js'
 import { parquetDataFrame } from '../../lib/tableProvider.js'
 import { cn } from '../../lib/utils.js'
 import styles from '../../styles/ParquetView.module.css'
-import { Spinner } from '../Layout.js'
 import CellPanel from './CellPanel.js'
-import ContentHeader, { ContentSize } from './ContentHeader.js'
+import ContentWrapper, { ContentSize } from './ContentWrapper.js'
 import SlidePanel from './SlidePanel.js'
 
 interface ViewerProps {
@@ -29,7 +29,7 @@ export default function ParquetView({ source, setProgress, setError }: ViewerPro
   const [isLoading, setIsLoading] = useState<boolean>(true)
   const [content, setContent] = useState<Content>()
   const [cell, setCell] = useState<{ row: number, col: number } | undefined>()
-  const { highTable, routes } = useConfig()
+  const { customClass, routes } = useConfig()
 
   useEffect(() => {
     async function loadParquetDataFrame() {
@@ -95,18 +95,16 @@ export default function ParquetView({ source, setProgress, setError }: ViewerPro
 
   const headers = <span>{content?.dataframe.numRows.toLocaleString() ?? '...'} rows</span>
 
-  const mainContent = <ContentHeader content={content} headers={headers}>
+  const mainContent = <ContentWrapper content={content} headers={headers} isLoading={isLoading}>
     {content?.dataframe && <HighTable
       cacheKey={source.resolveUrl}
       data={content.dataframe}
       onDoubleClickCell={onDoubleClickCell}
       onMouseDownCell={onMouseDownCell}
       onError={setError}
-      className={cn(styles.hightable, highTable?.className)}
+      className={cn(styles.hightable, customClass?.highTable)}
     />}
-
-    {isLoading && <div className='center'><Spinner /></div>}
-  </ContentHeader>
+  </ContentWrapper>
 
   let panelContent
   if (content?.dataframe && cell) {
diff --git a/src/components/viewers/SlidePanel.tsx b/src/components/viewers/SlidePanel.tsx
index ee5140f8..771b0302 100644
--- a/src/components/viewers/SlidePanel.tsx
+++ b/src/components/viewers/SlidePanel.tsx
@@ -1,5 +1,7 @@
-import React, { ReactNode, useCallback, useEffect, useState } from 'react'
+import React, { ReactNode, useCallback, useEffect, useMemo, useState } from 'react'
 import { useConfig } from '../../hooks/useConfig.js'
+import { cn } from '../../lib/utils.js'
+import styles from '../../styles/viewers/SlidePanel.module.css'
 
 interface SlidePanelProps {
   mainContent: ReactNode
@@ -16,7 +18,7 @@ const WIDTH = {
  * Slide out panel component with resizing.
  */
 export default function SlidePanel({ mainContent, panelContent, isPanelOpen }: SlidePanelProps) {
-  const { slidePanel } = useConfig()
+  const { slidePanel, customClass } = useConfig()
   const minWidth = slidePanel?.minWidth && slidePanel.minWidth > 0 ? slidePanel.minWidth : WIDTH.MIN
   function validWidth(width?: number): number | undefined {
     if (width && minWidth <= width) {
@@ -74,24 +76,29 @@ export default function SlidePanel({ mainContent, panelContent, isPanelOpen }: S
     }
   }, [panelRef, panelWidth])
 
+  const panelWidthStyle = useMemo(() => {
+    return isPanelOpen ? { width: `${panelWidth}px` } : undefined
+  }, [panelWidth, isPanelOpen])
+
   return (
-    <div className="slideContainer">
-      <div className="slideMain">
+    <div className={cn(styles.slidePanel, customClass?.slidePanel)}>
+      <article>
         {mainContent}
-      </div>
+      </article>
       {isPanelOpen &&
         <div
-          className="resizer"
+          role="separator"
+          aria-orientation="vertical"
           onMouseDown={handleMouseDown}
         />
       }
-      <div
-        className={resizingClientX === -1 ? 'slidePanel' : 'slidePanel slideDragging'}
+      <aside
         ref={panelRef}
-        style={isPanelOpen ? { width: panelWidth } : undefined}
+        data-resizing={resizingClientX !== -1}
+        style={panelWidthStyle}
       >
         {panelContent}
-      </div>
+      </aside>
     </div>
   )
 }
diff --git a/src/components/viewers/TextView.tsx b/src/components/viewers/TextView.tsx
index 04c9d20c..d4663047 100644
--- a/src/components/viewers/TextView.tsx
+++ b/src/components/viewers/TextView.tsx
@@ -1,8 +1,9 @@
 import { useEffect, useState } from 'react'
+import { useConfig } from '../../hooks/useConfig.js'
 import { FileSource } from '../../lib/sources/types.js'
-import { parseFileSize } from '../../lib/utils.js'
-import { Spinner } from '../Layout.js'
-import ContentHeader, { TextContent } from './ContentHeader.js'
+import { cn, parseFileSize } from '../../lib/utils.js'
+import styles from '../../styles/viewers/TextView.module.css'
+import ContentWrapper, { TextContent } from './ContentWrapper.js'
 
 interface ViewerProps {
   source: FileSource
@@ -15,6 +16,7 @@ interface ViewerProps {
 export default function TextView({ source, setError }: ViewerProps) {
   const [content, setContent] = useState<TextContent>()
   const [isLoading, setIsLoading] = useState(true)
+  const { customClass } = useConfig()
 
   const { resolveUrl, requestInit } = source
 
@@ -48,13 +50,11 @@ export default function TextView({ source, setError }: ViewerProps) {
   </>
 
   // Simple text viewer
-  return <ContentHeader content={content} headers={headers}>
-    {content && <code className='text'>
+  return <ContentWrapper content={content} headers={headers} isLoading={isLoading}>
+    {content && <code className={cn(styles.text, customClass?.textView)}>
       {content.text}
     </code>}
-
-    {isLoading && <div className='center'><Spinner /></div>}
-  </ContentHeader>
+  </ContentWrapper>
 }
 
 function newlines(str: string): string {
diff --git a/src/components/viewers/index.ts b/src/components/viewers/index.ts
index f3fcd2dc..03cc3d5f 100644
--- a/src/components/viewers/index.ts
+++ b/src/components/viewers/index.ts
@@ -1,8 +1,8 @@
-import ContentHeader from './ContentHeader.js'
+import ContentWrapper from './ContentWrapper.js'
 import ImageView from './ImageView.js'
 import MarkdownView from './MarkdownView.js'
 import ParquetView from './ParquetView.js'
 import SlidePanel from './SlidePanel.js'
 import TextView from './TextView.js'
 import Viewer from './Viewer.js'
-export { ContentHeader, ImageView, MarkdownView, ParquetView, SlidePanel, TextView, Viewer }
+export { ContentWrapper, ImageView, MarkdownView, ParquetView, SlidePanel, TextView, Viewer }
diff --git a/src/hooks/useConfig.ts b/src/hooks/useConfig.ts
index 1d31559a..bca51bc2 100644
--- a/src/hooks/useConfig.ts
+++ b/src/hooks/useConfig.ts
@@ -8,13 +8,31 @@ import { createContext, useContext } from 'react'
  * It gives a way to pass additional values to the components, for example custom CSS classes.
  */
 export interface Config {
-  highTable?: {
-    className?: string;
+  customClass?: {
+    brand?: string
+    breadcrumb?: string
+    center?: string
+    contentWrapper?: string
+    errorBar?: string
+    fileList?: string
+    highTable?: string
+    imageView?: string
+    layout?: string
+    markdownView?: string
+    path?: string
+    progressBar?: string
+    search?: string
+    sideBar?: string
+    slideCloseButton?: string
+    slidePanel?: string
+    spinner?: string
+    textView?: string
+    welcome?: string
   }
   routes?: {
     getSourceRouteUrl?: (params: { sourceId: string }) => string
     getCellRouteUrl?: (params: { sourceId: string, col: number, row: number }) => string
-  },
+  }
   slidePanel?: {
     minWidth?: number
     defaultWidth?: number
diff --git a/src/lib/sources/hyperparamSource.ts b/src/lib/sources/hyperparamSource.ts
index b2b1d145..bb742661 100644
--- a/src/lib/sources/hyperparamSource.ts
+++ b/src/lib/sources/hyperparamSource.ts
@@ -16,7 +16,7 @@ function canParse(sourceId: string): boolean {
 
 function getSourceParts(sourceId: string): SourcePart[] {
   const parts = sourceId.split('/')
-  return [
+  const sourceParts = [
     { 'text': '/', 'sourceId': '' },
     ...parts.map((part, depth) => {
       const slashSuffix = depth === parts.length - 1 ? '' : '/'
@@ -26,6 +26,10 @@ function getSourceParts(sourceId: string): SourcePart[] {
       }
     }),
   ]
+  if (sourceParts[sourceParts.length - 1]?.text === '') {
+    sourceParts.pop()
+  }
+  return sourceParts
 }
 
 function getKind(sourceId: string): FileKind {
diff --git a/src/styles/Breadcrumb.module.css b/src/styles/Breadcrumb.module.css
new file mode 100644
index 00000000..614500f8
--- /dev/null
+++ b/src/styles/Breadcrumb.module.css
@@ -0,0 +1,48 @@
+.breadcrumb {
+  /* top navbar */
+  align-items: center;
+  display: flex;
+  font-size: 18px;
+  height: 32px;
+  justify-content: space-between;
+  min-height: 32px;
+  padding-left: 20px;
+  padding-right: 10px;
+  border-bottom: 1px solid #ddd;
+  background: #eee;
+  /* TODO(SL): forbid overflow? */
+
+  h1 {
+    font-size: 18px;
+    margin: 4px 0 0 0; /* top */
+    user-select: none;
+  }
+}
+
+/* file path */
+.path {
+  margin: 0 2px;
+  margin-right: 4px;
+  min-width: 0;
+  overflow: auto;
+  /* TODO(SL): forbid wrap + use an ellipsis instead? */
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  a {
+    color: #222622;
+    font-family: "Courier New", Courier, monospace;
+    font-weight: 600;
+    font-size: 18px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-decoration-thickness: 1px;
+  }
+  /* hide all but the last path link on small screens */
+  @media (max-width: 360px) {
+    & a:not(:last-child) {
+      display: none;
+    }
+  }
+}
diff --git a/src/styles/Center.module.css b/src/styles/Center.module.css
new file mode 100644
index 00000000..476f3229
--- /dev/null
+++ b/src/styles/Center.module.css
@@ -0,0 +1,6 @@
+.center {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/src/styles/ErrorBar.module.css b/src/styles/ErrorBar.module.css
new file mode 100644
index 00000000..df0c0377
--- /dev/null
+++ b/src/styles/ErrorBar.module.css
@@ -0,0 +1,52 @@
+.errorBar {
+  display: none;
+  max-height: 30%;
+  padding: 0;
+  background-color: #dd111199;
+  overflow: hidden;
+  transition: max-height 0.3s;
+  white-space: pre-wrap;
+  font-family: monospace;
+
+  &[data-visible="true"] {
+    display: block;
+  }
+
+  & > div {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-height: 100%;
+    overflow-y: auto;
+    padding: 10px 10px 10px 20px;
+  }
+
+  /* close button */
+  button,
+  button:active,
+  button:focus,
+  button:focus-visible,
+  button:hover {
+    background: none;
+    border: none;
+    border-radius: 4px;
+    padding: 0 8px;
+    cursor: pointer;
+    color: #333;
+    font-size: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.2s;
+  }
+  button:active {
+    background-color: rgba(0, 0, 0, 0.2);
+  }
+  button:focus {
+    background-color: rgba(0, 0, 0, 0.1);
+    outline: 2px solid #a44;
+  }
+  button:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+}
diff --git a/src/styles/Folder.module.css b/src/styles/Folder.module.css
new file mode 100644
index 00000000..68d6a812
--- /dev/null
+++ b/src/styles/Folder.module.css
@@ -0,0 +1,91 @@
+.fileList {
+  /* file list */
+  flex: 1;
+  list-style: none;
+  overflow-y: auto;
+  padding-left: 0;
+  /* browsers like to cover the bottom row */
+  padding-bottom: 24px;
+
+  & > li {
+    margin: 0;
+
+    &:first-child > a {
+      border-top: none;
+    }
+
+    & > a {
+      border-top: 1px solid #ddd;
+      color: #444;
+      display: flex;
+      padding: 8px 16px 8px 20px;
+      text-decoration: none;
+
+      &:hover {
+        background-color: #e2e2ee;
+      }
+
+      & > span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        &[data-file-kind] {
+          /* file name + icon */
+          flex: 1;
+          min-width: 80px;
+
+          background-position: left center;
+          background-repeat: no-repeat;
+          background-size: 12px;
+          padding-left: 22px;
+
+          &[data-file-kind="directory"] {
+            background-image: url("../assets/folder.svg");
+          }
+
+          &[data-file-kind="file"] {
+            background-image: url("../assets/file.svg");
+          }
+        }
+
+        &[data-file-size] {
+          /* file size */
+          color: #666;
+          margin: 0 16px;
+          text-align: right;
+        }
+
+        &[data-file-date] {
+          /* file date */
+          min-width: 90px;
+          text-align: right;
+        }
+      }
+    }
+  }
+}
+
+/* search */
+.search {
+  background: #fff url("../assets/search.svg") no-repeat center right 8px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  flex-shrink: 1;
+  font-size: 12px;
+  height: 24px;
+  min-width: 0;
+  outline: none;
+  padding: 4px 20px 2px 8px;
+  width: 100px;
+  transition-duration: 0.3s;
+  transition-property: border, width;
+
+  &:focus {
+    border-color: #778;
+    box-shadow: 0 0 1px #556;
+    color: #444;
+    padding-left: 8px;
+    width: 180px;
+  }
+}
diff --git a/src/styles/Layout.module.css b/src/styles/Layout.module.css
new file mode 100644
index 00000000..d264726a
--- /dev/null
+++ b/src/styles/Layout.module.css
@@ -0,0 +1,25 @@
+.layout {
+  /* layout */
+  display: flex;
+  height: 100vh;
+  max-width: 100vw;
+
+  /* content area */
+  main {
+    min-width: 0;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+
+    & > div:first-child {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      height: 100vh;
+      padding: 0;
+      /* no outer scrollbars */
+      overflow: hidden;
+    }
+  }
+}
diff --git a/src/styles/ProgressBar.module.css b/src/styles/ProgressBar.module.css
new file mode 100644
index 00000000..27bfb98f
--- /dev/null
+++ b/src/styles/ProgressBar.module.css
@@ -0,0 +1,29 @@
+/* progress bar */
+.progressBar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  z-index: 1000;
+  transition: width 0.3s;
+
+  /* Shimmer effect overlay */
+  background-image: linear-gradient(to right, #ddd 0%, #cbb 50%, #ddd 100%);
+  background-size: 1000px;
+  animation: shimmer 4s infinite linear;
+
+  @keyframes shimmer {
+    0% {
+      background-position: -1000px;
+    }
+    100% {
+      background-position: 1000px;
+    }
+  }
+
+  & > [role="presentation"] {
+    height: 100%;
+    background-color: #3a4;
+  }
+}
diff --git a/src/styles/SideBar.module.css b/src/styles/SideBar.module.css
new file mode 100644
index 00000000..31281fb1
--- /dev/null
+++ b/src/styles/SideBar.module.css
@@ -0,0 +1,45 @@
+/* sidebar */
+.sideBar {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  width: 48px;
+  height: 100vh;
+}
+.sideBar > div {
+  background-image: linear-gradient(to bottom, #f2f2f2, #e4e4e4);
+  box-shadow: 0 0 6px rgba(10, 10, 10, 0.4);
+  height: 100vh;
+  position: absolute;
+  width: 48px;
+  z-index: 30;
+}
+
+/* brand logo */
+.brand {
+  align-items: center;
+  color: #222;
+  display: flex;
+  filter: drop-shadow(0 0 2px #bbb);
+  font-family: "Century Gothic", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 1.1em;
+  font-weight: bold;
+  text-orientation: mixed;
+  letter-spacing: 0.3px;
+  padding: 10px 12px;
+  user-select: none;
+  writing-mode: vertical-rl;
+}
+.brand:hover {
+  color: #222;
+  filter: drop-shadow(0 0 2px #afa6b9);
+  text-decoration: none;
+}
+.brand::before {
+  content: "";
+  background: url("../assets/logo.svg") no-repeat 0 center;
+  background-size: 26px;
+  height: 26px;
+  width: 26px;
+  margin-bottom: 10px;
+}
diff --git a/src/styles/SlideCloseButton.module.css b/src/styles/SlideCloseButton.module.css
new file mode 100644
index 00000000..517b7eaa
--- /dev/null
+++ b/src/styles/SlideCloseButton.module.css
@@ -0,0 +1,21 @@
+/* slide panel close button */
+.slideClose,
+.slideClose:active,
+.slideClose:focus,
+.slideClose:hover {
+  background: none;
+  border: none;
+  color: #888;
+  font-size: 16px;
+  height: 24px;
+  margin-right: auto;
+  outline: none;
+  padding: 0;
+  transition: color 0.3s;
+}
+.slideClose::before {
+  content: "\27E9\27E9";
+}
+.slideClose:hover {
+  color: #000;
+}
diff --git a/src/styles/Spinner.module.css b/src/styles/Spinner.module.css
new file mode 100644
index 00000000..82974038
--- /dev/null
+++ b/src/styles/Spinner.module.css
@@ -0,0 +1,24 @@
+.spinner {
+  border: 6px solid #e8e8e8;
+  border-top: 6px solid #68a;
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  animation: spin 1s linear infinite, fadeIn 3s, ease-in-out forwards;
+}
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
diff --git a/src/styles/VisuallyHidden.module.css b/src/styles/VisuallyHidden.module.css
new file mode 100644
index 00000000..d05b4378
--- /dev/null
+++ b/src/styles/VisuallyHidden.module.css
@@ -0,0 +1,10 @@
+.wrapper {
+  position: absolute;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+}
diff --git a/src/styles/Welcome.module.css b/src/styles/Welcome.module.css
new file mode 100644
index 00000000..670040e0
--- /dev/null
+++ b/src/styles/Welcome.module.css
@@ -0,0 +1,40 @@
+/* Welcome popup */
+.welcome {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  animation: fadeIn 0.3s ease-in;
+}
+
+.welcome > div {
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  display: flex;
+  flex-direction: column;
+  padding: 30px;
+  width: 450px;
+  max-width: 90%;
+}
+
+.welcome h2 {
+  color: #342267;
+  margin-bottom: 16px;
+  font-size: 24px;
+}
+
+.welcome p {
+  color: #444;
+  line-height: 1.5;
+  margin-bottom: 24px;
+}
+
+.welcome button {
+  margin-left: auto;
+}
diff --git a/src/styles/app.css b/src/styles/app.css
deleted file mode 100644
index 18348e26..00000000
--- a/src/styles/app.css
+++ /dev/null
@@ -1,574 +0,0 @@
-* {
-  box-sizing: border-box;
-  font-family: 'Mulish', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  margin: 0;
-  padding: 0;
-}
-
-button {
-  background-color: #111;
-  color: #fff;
-  border: none;
-  border-radius: 8px;
-  padding: 8px 16px;
-  cursor: pointer;
-  outline: none;
-  transition: background-color 0.2s;
-}
-button:active,
-button:focus,
-button:hover {
-  background-color: #333;
-}
-
-/* inline code block */
-code {
-  font-family: monospace;
-}
-
-h1 {
-  font-size: 32px;
-  font-weight: 500;
-  margin-bottom: 8px;
-}
-h2 {
-  font-weight: 500;
-  margin-bottom: 8px;
-  margin-top: 16px;
-}
-h3 {
-  margin-bottom: 8px;
-  margin-top: 16px;
-}
-
-ol,
-ul {
-  margin: 10px 0;
-  padding: 0 0 0 20px;
-}
-li {
-  margin: 4px 0;
-}
-
-#app {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-}
-
-/* brand logo */
-.brand {
-  align-items: center;
-  color: #222;
-  display: flex;
-  filter: drop-shadow(0 0 2px #bbb);
-  font-family: 'Century Gothic', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-size: 1.1em;
-  font-weight: bold;
-  text-orientation: mixed;
-  letter-spacing: 0.3px;
-  padding: 10px 12px;
-  user-select: none;
-  writing-mode: vertical-rl;
-}
-.brand:hover {
-  color: #222;
-  filter: drop-shadow(0 0 2px #afa6b9);
-  text-decoration: none;
-}
-.brand::before {
-  content: '';
-  background: url("../assets/logo.svg") no-repeat 0 center;
-  background-size: 26px;
-  height: 26px;
-  width: 26px;
-  margin-bottom: 10px;
-}
-
-a {
-  color: #342267;
-  cursor: pointer;
-  text-decoration: none;
-}
-a:hover {
-  color: #000;
-  text-decoration: underline;
-}
-button {
-  cursor: pointer;
-}
-
-/* layout */
-main {
-  display: flex;
-  height: 100vh;
-  max-width: 100vw;
-}
-
-.spinner {
-  border: 6px solid #e8e8e8;
-  border-top: 6px solid #68a;
-  border-radius: 50%;
-  width: 32px;
-  height: 32px;
-  animation: spin 1s linear infinite, fadeIn 3s, ease-in-out forwards;
-}
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-@keyframes fadeIn {
-  0% { opacity: 0; }
-  100% { opacity: 1; }
-}
-.center {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* sidebar */
-.nav {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  width: 48px;
-  height: 100vh;
-}
-.nav > div {
-  background-image: linear-gradient(to bottom, #f2f2f2, #e4e4e4);
-  box-shadow: 0 0 6px rgba(10, 10, 10, 0.4);
-  height: 100vh;
-  position: absolute;
-  width: 48px;
-  z-index: 30;
-}
-
-/* content area */
-.content-container {
-  min-width: 0;
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
-.content {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  height: 100vh;
-  padding: 0;
-  /* no outer scrollbars */
-  overflow: hidden;
-}
-
-/* top navbar */
-.top-header {
-  align-items: center;
-  display: flex;
-  font-size: 18px;
-  height: 32px;
-  justify-content: space-between;
-  min-height: 32px;
-  padding-left: 20px;
-  padding-right: 10px;
-}
-.top-header h1 {
-  font-size: 18px;
-  margin: 4px 0 0 0; /* top */
-  user-select: none;
-}
-
-.top-header-divided {
-  border-bottom: 1px solid #ddd;
-  background: #eee;
-}
-
-.top-actions {
-  left: auto;
-}
-/* search */
-input.search {
-  background: #fff url("../assets/search.svg") no-repeat center right 8px;
-  border: 1px solid transparent;
-  border-radius: 8px;
-  flex-shrink: 1;
-  font-size: 12px;
-  height: 24px;
-  min-width: 0;
-  outline: none;
-  padding: 4px 20px 2px 8px;
-  width: 100px;
-  transition-duration: 0.3s;
-  transition-property: border, width;
-}
-input.search:focus {
-  border-color: #778;
-  box-shadow: 0 0 1px #556;
-  color: #444;
-  padding-left: 8px;
-  width: 180px;
-}
-
-/* file path */
-.path {
-  margin: 0 2px;
-  margin-right: 4px;
-  min-width: 0;
-  overflow: auto;
-}
-.path::-webkit-scrollbar {
-  display: none;
-}
-.path a {
-  color: #222622;
-  font-family: 'Courier New', Courier, monospace;
-  font-weight: 600;
-  font-size: 18px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  text-decoration-thickness: 1px;
-}
-/* hide all but the last path link on small screens */
-@media (max-width: 360px) {
-  .path a:not(:last-child) {
-    display: none;
-  }
-}
-
-/* progress bar */
-.progress-bar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 2px;
-  z-index: 1000;
-  transition: width 0.3s;
-
-  /* Shimmer effect overlay */
-  background-image: linear-gradient(
-    to right,
-    #ddd 0%,
-    #cbb 50%,
-    #ddd 100%
-  );
-  background-size: 1000px;
-  animation: shimmer 4s infinite linear;
-}
-@keyframes shimmer {
-  0% {
-    background-position: -1000px;
-  }
-  100% {
-    background-position: 1000px;
-  }
-}
-.progress-bar > div {
-  height: 100%;
-  background-color: #3a4;
-}
-
-/* error bar */
-.error-bar {
-  max-height: 0;
-  padding: 0;
-  background-color: #dd111199;
-  overflow: hidden;
-  transition: max-height 0.3s;
-  white-space: pre-wrap;
-}
-.error-bar * {
-  font-family: monospace;
-}
-.show-error {
-  max-height: 30%;
-}
-.error-content {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 100%;
-  overflow-y: auto;
-  padding: 10px 10px 10px 20px;
-}
-
-/* error bar close button */
-.close-button,
-.close-button:active,
-.close-button:focus,
-.close-button:focus-visible,
-.close-button:hover {
-  background: none;
-  border: none;
-  border-radius: 4px;
-  padding: 0 8px;
-  cursor: pointer;
-  color: #333;
-  font-size: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: background-color 0.2s;
-}
-button.close-button:active {
-  background-color: rgba(0, 0, 0, 0.2);
-}
-button.close-button:focus {
-  background-color: rgba(0, 0, 0, 0.1);
-  outline: 2px solid #a44;
-}
-button.close-button:hover {
-  background-color: rgba(0, 0, 0, 0.1);
-}
-
-/* file list */
-.file-list {
-  flex: 1;
-  list-style: none;
-  overflow-y: auto;
-  padding-left: 0;
-  /* browsers like to cover the bottom row */
-  padding-bottom: 24px;
-}
-.file-list li {
-  margin: 0;
-}
-.file-list li:first-child a {
-  border-top: none;
-}
-.file-list a {
-  border-top: 1px solid #ddd;
-  color: #444;
-  display: flex;
-  padding: 8px 16px 8px 20px;
-  text-decoration: none;
-}
-.file-list a:hover {
-  background-color: #e2e2ee;
-}
-
-.file-list a > span {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.file-name {
-  flex: 1;
-  min-width: 80px;
-}
-.file-size {
-  color: #666;
-  margin: 0 16px;
-  text-align: right;
-}
-.file-date {
-  min-width: 90px;
-  text-align: right;
-}
-
-/* file icons */
-.file {
-  background-image: url("../assets/file.svg");
-  background-position: left center;
-  background-repeat: no-repeat;
-  background-size: 12px;
-  padding-left: 22px;
-}
-.folder {
-  background-image: url("../assets/folder.svg");
-}
-
-/* viewer */
-.viewer {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  white-space: pre-wrap;
-  overflow-y: auto;
-}
-.view-header {
-  align-items: center;
-  background-color: #f2f2f2;
-  color: #444;
-  display: flex;
-  gap: 16px;
-  height: 24px;
-  overflow: hidden;
-  padding: 0 16px;
-  /* all one line */
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-/* viewers */
-.text {
-  background-color: #22222b;
-  color: #d6d6d6;
-  display: block;
-  flex: 1;
-  font-family: monospace;
-  padding: 8px;
-  width: 100%;
-  overflow-x: auto;
-  white-space: pre-wrap;
-}
-/* images */
-.image {
-  display: block;
-  flex: 1;
-  min-width: 0;
-  object-fit: scale-down;
-  background-image:
-    linear-gradient(45deg, #ddd 25%, transparent 25%),
-    linear-gradient(135deg, #ddd 25%, transparent 25%),
-    linear-gradient(45deg, transparent 75%, #ddd 75%),
-    linear-gradient(135deg, transparent 75%, #ddd 75%);
-  background-size: 32px 32px;
-  background-position:0 0, 16px 0, 16px -16px, 0px 16px;
-}
-/* markdown */
-.markdown {
-  background-color: #222226;
-  color: #ddd;
-  flex: 1;
-  padding: 8px 20px;
-  white-space: pre-wrap;
-  overflow-y: auto;
-}
-.markdown a {
-  color: #cdf;
-}
-.markdown p {
-  margin-block: 1em;
-}
-.markdown pre {
-  background-color: #34343a;
-  border-left: #446 solid 5px;
-  margin: 0;
-  padding: 12px 14px;
-  white-space: pre-wrap;
-}
-.markdown h1 {
-  font-size: 32px;
-  font-weight: 500;
-  margin-bottom: 8px;
-}
-.markdown h2 {
-  font-weight: 500;
-  margin-bottom: 8px;
-  margin-top: 16px;
-}
-
-.slideContainer {
-  display: flex;
-  flex: 1;
-  min-height: 0;
-}
-
-.slideMain {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  min-width: 100px;
-  overflow: auto;
-}
-
-.slidePanel {
-  display: flex;
-  flex-direction: column;
-  width: 0;
-  transition: width 0.2s;
-}
-
-.slideDragging {
-  transition: none;
-}
-
-.resizer {
-  width: 5px;
-  cursor: col-resize;
-  background-color: #bfbbbb;
-  transition: background-color 0.2s;
-  user-select: none;
-}
-
-.resizer:hover {
-  background-color: #9f9999;
-}
-
-/* slide panel close button */
-.slideClose,
-.slideClose:active,
-.slideClose:focus,
-.slideClose:hover {
-  background: none;
-  border: none;
-  color: #888;
-  font-size: 16px;
-  height: 24px;
-  margin-right: auto;
-  outline: none;
-  padding: 0;
-  transition: color 0.3s;
-}
-.slideClose::before {
-  content: "\27E9\27E9";
-}
-.slideClose:hover {
-  color: #000;
-}
-
-/* viewers */
-.text {
-  background-color: #22222b;
-  color: #d6d6d6;
-  display: block;
-  flex: 1;
-  padding: 8px;
-  width: 100%;
-  overflow-x: auto;
-  white-space: pre-wrap;
-}
-
-/* Welcome popup */
-.welcome {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  animation: fadeIn 0.3s ease-in;
-}
-
-.welcome > div {
-  background-color: white;
-  border-radius: 8px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  display: flex;
-  flex-direction: column;
-  padding: 30px;
-  width: 450px;
-  max-width: 90%;
-}
-
-.welcome h2 {
-  color: #342267;
-  margin-bottom: 16px;
-  font-size: 24px;
-}
-
-.welcome p {
-  color: #444;
-  line-height: 1.5;
-  margin-bottom: 24px;
-}
-
-.welcome button {
-  margin-left: auto;
-}
diff --git a/src/styles/global.css b/src/styles/global.css
new file mode 100644
index 00000000..32539555
--- /dev/null
+++ b/src/styles/global.css
@@ -0,0 +1,67 @@
+* {
+  box-sizing: border-box;
+  font-family: 'Mulish', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+button {
+  background-color: #111;
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  padding: 8px 16px;
+  cursor: pointer;
+  outline: none;
+  transition: background-color 0.2s;
+}
+button:active,
+button:focus,
+button:hover {
+  background-color: #333;
+}
+
+/* inline code block */
+code {
+  font-family: monospace;
+}
+
+h1 {
+  font-size: 32px;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+h2 {
+  font-weight: 500;
+  margin-bottom: 8px;
+  margin-top: 16px;
+}
+h3 {
+  margin-bottom: 8px;
+  margin-top: 16px;
+}
+
+ol,
+ul {
+  margin: 10px 0;
+  padding: 0 0 0 20px;
+}
+li {
+  margin: 4px 0;
+}
+
+#app {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+a {
+  color: #342267;
+  cursor: pointer;
+  text-decoration: none;
+}
+a:hover {
+  color: #000;
+  text-decoration: underline;
+}
diff --git a/src/styles/viewers/ContentWrapper.module.css b/src/styles/viewers/ContentWrapper.module.css
new file mode 100644
index 00000000..0a287614
--- /dev/null
+++ b/src/styles/viewers/ContentWrapper.module.css
@@ -0,0 +1,21 @@
+.contentWrapper {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  white-space: pre-wrap;
+  overflow-y: auto;
+
+  & > header:first-child {
+    align-items: center;
+    background-color: #f2f2f2;
+    color: #444;
+    display: flex;
+    gap: 16px;
+    height: 24px;
+    overflow: hidden;
+    padding: 0 16px;
+    /* all one line */
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
diff --git a/src/styles/viewers/ImageView.module.css b/src/styles/viewers/ImageView.module.css
new file mode 100644
index 00000000..27eea2aa
--- /dev/null
+++ b/src/styles/viewers/ImageView.module.css
@@ -0,0 +1,12 @@
+.imageView {
+  display: block;
+  flex: 1;
+  min-width: 0;
+  object-fit: scale-down;
+  background-image: linear-gradient(45deg, #ddd 25%, transparent 25%),
+    linear-gradient(135deg, #ddd 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #ddd 75%),
+    linear-gradient(135deg, transparent 75%, #ddd 75%);
+  background-size: 32px 32px;
+  background-position: 0 0, 16px 0, 16px -16px, 0px 16px;
+}
diff --git a/src/styles/viewers/MarkdownView.module.css b/src/styles/viewers/MarkdownView.module.css
new file mode 100644
index 00000000..c2cc1553
--- /dev/null
+++ b/src/styles/viewers/MarkdownView.module.css
@@ -0,0 +1,32 @@
+/* markdownView */
+.markdownView {
+  background-color: #222226;
+  color: #ddd;
+  flex: 1;
+  padding: 8px 20px;
+  white-space: pre-wrap;
+  overflow-y: auto;
+}
+.markdownView a {
+  color: #cdf;
+}
+.markdownView p {
+  margin-block: 1em;
+}
+.markdownView pre {
+  background-color: #34343a;
+  border-left: #446 solid 5px;
+  margin: 0;
+  padding: 12px 14px;
+  white-space: pre-wrap;
+}
+.markdownView h1 {
+  font-size: 32px;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+.markdownView h2 {
+  font-weight: 500;
+  margin-bottom: 8px;
+  margin-top: 16px;
+}
diff --git a/src/styles/viewers/SlidePanel.module.css b/src/styles/viewers/SlidePanel.module.css
new file mode 100644
index 00000000..6fa71be7
--- /dev/null
+++ b/src/styles/viewers/SlidePanel.module.css
@@ -0,0 +1,39 @@
+.slidePanel {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+
+  & > article {
+    /* main content */
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+  }
+
+  /* resizer separator */
+  & > [role="separator"] {
+    width: 5px;
+    cursor: col-resize;
+    background-color: #bfbbbb;
+    transition: background-color 0.2s;
+    user-select: none;
+
+    &:hover {
+      background-color: #9f9999;
+    }
+  }
+
+  /* panel content */
+  & > aside {
+    display: flex;
+    flex-direction: column;
+    width: 0;
+    transition: width 0.2s;
+
+    &[data-resizing="true"] {
+      transition: none;
+    }
+  }
+}
diff --git a/src/styles/viewers/TextView.module.css b/src/styles/viewers/TextView.module.css
new file mode 100644
index 00000000..f6db8fcd
--- /dev/null
+++ b/src/styles/viewers/TextView.module.css
@@ -0,0 +1,11 @@
+.textView {
+  background-color: #22222b;
+  color: #d6d6d6;
+  display: block;
+  flex: 1;
+  font-family: monospace;
+  padding: 8px;
+  width: 100%;
+  overflow-x: auto;
+  white-space: pre-wrap;
+}
diff --git a/test/components/Breadcrumb.test.tsx b/test/components/Breadcrumb.test.tsx
new file mode 100644
index 00000000..60777c79
--- /dev/null
+++ b/test/components/Breadcrumb.test.tsx
@@ -0,0 +1,30 @@
+import { render } from '@testing-library/react'
+import { strict as assert } from 'assert'
+import React from 'react'
+import { describe, expect, it } from 'vitest'
+import { Config, ConfigProvider } from '../../src/hooks/useConfig.js'
+import { Breadcrumb, getHyperparamSource } from '../../src/index.js'
+
+const endpoint = 'http://localhost:3000'
+
+describe('Breadcrumb Component', () => {
+  it('renders breadcrumbs correctly', () => {
+    const source = getHyperparamSource('subdir1/subdir2/', { endpoint })
+    assert(source !== undefined)
+
+    const config: Config = {
+      routes: {
+        getSourceRouteUrl: ({ sourceId }) => `/files?key=${sourceId}`,
+      },
+    }
+    const { getByText } = render(<ConfigProvider value={config}>
+      <Breadcrumb source={source} />
+    </ConfigProvider>)
+
+    const subdir1Link = getByText('subdir1/')
+    expect(subdir1Link.closest('a')?.getAttribute('href')).toBe('/files?key=subdir1/')
+
+    const subdir2Link = getByText('subdir2/')
+    expect(subdir2Link.closest('a')?.getAttribute('href')).toBe('/files?key=subdir1/subdir2/')
+  })
+})
diff --git a/test/components/Folder.test.tsx b/test/components/Folder.test.tsx
index b7ab9ab7..d9cb23eb 100644
--- a/test/components/Folder.test.tsx
+++ b/test/components/Folder.test.tsx
@@ -58,8 +58,9 @@ describe('Folder Component', () => {
     const source = getHyperparamSource('', { endpoint })
     assert(source?.kind === 'directory')
 
-    const { container } = await act(() => render(<Folder source={source} />))
-    expect(container.querySelector('.spinner')).toBeTruthy()
+    const { getByText } = await act(() => render(<Folder source={source} />))
+    const spinner = getByText('Loading...')
+    expect(spinner).toBeDefined()
   })
 
   it('handles file listing errors', async () => {
@@ -81,27 +82,6 @@ describe('Folder Component', () => {
     expect(queryByText('folder1/')).toBeNull()
   })
 
-  it('renders breadcrumbs correctly', async () => {
-    vi.mocked(fetch).mockResolvedValueOnce({
-      json: () => Promise.resolve(mockFiles),
-      ok: true,
-    } as Response)
-
-    const source = getHyperparamSource('subdir1/subdir2/', { endpoint })
-    assert(source?.kind === 'directory')
-
-    const { findByText, getByText } = render(<ConfigProvider value={config}>
-      <Folder source={source} />
-    </ConfigProvider>)
-    await waitFor(() => { expect(fetch).toHaveBeenCalled() })
-
-    const subdir1Link = await findByText('subdir1/')
-    expect(subdir1Link.closest('a')?.getAttribute('href')).toBe('/files?key=subdir1/')
-
-    const subdir2Link = getByText('subdir2/')
-    expect(subdir2Link.closest('a')?.getAttribute('href')).toBe('/files?key=subdir1/subdir2/')
-  })
-
   it('filters files based on search query', async () => {
     const mockFiles: FileMetadata[] = [
       { sourceId: 'folder1', name: 'folder1/', kind: 'directory', lastModified: '2023-01-01T00:00:00Z' },
diff --git a/test/components/Layout.test.tsx b/test/components/Layout.test.tsx
index 96efb2d6..212bd86f 100644
--- a/test/components/Layout.test.tsx
+++ b/test/components/Layout.test.tsx
@@ -1,10 +1,7 @@
 import { render } from '@testing-library/react'
 import React from 'react'
-import { describe, expect, it, vi } from 'vitest'
-import { Layout, Spinner, cn } from '../../src/index.js'
-
-vi.mock('next-auth/react', () => ({ signOut: vi.fn(), useSession: vi.fn() }))
-vi.mock('next/link', () => ({ default: vi.fn() }))
+import { describe, expect, it } from 'vitest'
+import { Layout } from '../../src/index.js'
 
 describe('Layout Component', () => {
   it('renders children', () => {
@@ -29,29 +26,3 @@ describe('Layout Component', () => {
     expect(getByText('Error: Test Error')).toBeDefined()
   })
 })
-
-describe('Classname function', () => {
-  it('joins class names correctly', () => {
-    expect(cn('class1', 'class2')).toBe('class1 class2')
-  })
-
-  it('ignores undefined and false values', () => {
-    expect(cn('class1', undefined, 'class2', false)).toBe('class1 class2')
-  })
-
-  it('returns empty string if no valid class names', () => {
-    expect(cn(undefined, false)).toBe('')
-  })
-
-  it('handles single class name', () => {
-    expect(cn('class1')).toBe('class1')
-  })
-})
-
-describe('Spinner Component', () => {
-  it('renders with base and additional class names', () => {
-    const { container } = render(<Spinner className="extra" />)
-    expect(container.firstElementChild?.classList).toContain('spinner')
-    expect(container.firstElementChild?.classList).toContain('extra')
-  })
-})
diff --git a/test/components/Spinner.test.tsx b/test/components/Spinner.test.tsx
new file mode 100644
index 00000000..c61b7244
--- /dev/null
+++ b/test/components/Spinner.test.tsx
@@ -0,0 +1,32 @@
+import { render } from '@testing-library/react'
+import React from 'react'
+import { describe, expect, it } from 'vitest'
+import { ConfigProvider, Spinner } from '../../src/index.js'
+
+describe('Spinner Component', () => {
+  it('renders with base and additional class names', () => {
+    const { container } = render(
+      <ConfigProvider value={{ customClass: { spinner: 'extra' } }}>
+        <Spinner/>
+      </ConfigProvider>
+    )
+    const classNames = [...container.firstElementChild?.classList.values() ?? []]
+    // Vite generates class names for CSS modules that look like _spinner_c053a8
+    expect(classNames.some(className => className.startsWith('_spinner_'))).toBe(true)
+    expect(classNames).toContain('extra')
+  })
+  it('is accessible as a role=status element', () => {
+    const { container } = render( <Spinner/> )
+    expect(container.firstElementChild?.getAttribute('role')).toBe('status')
+    expect(container.firstElementChild?.getAttribute('aria-live')).toBe('polite')
+  })
+  it('contains an accessible text for screen readers', () => {
+    const { getByText } = render( <Spinner/> )
+    expect(getByText('Loading...')).toBeDefined()
+  })
+  it('let pass a custom accessible text for screen readers', () => {
+    const text = 'Fetching data'
+    const { getByText } = render( <Spinner text={text}/> )
+    expect(getByText(text)).toBeDefined()
+  })
+})
diff --git a/test/components/viewers/SlidePanel.test.tsx b/test/components/viewers/SlidePanel.test.tsx
index cbe9717a..9abaf8b4 100644
--- a/test/components/viewers/SlidePanel.test.tsx
+++ b/test/components/viewers/SlidePanel.test.tsx
@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/non-nullable-type-assertion-style */
+
 import { act, fireEvent, render } from '@testing-library/react'
 import React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -36,58 +36,59 @@ describe('SlidePanel', () => {
   })
 
   it('does not render the resizer if panel is closed', () => {
-    const { container } = render(
+    const { queryByRole } = render(
       <SlidePanel
         mainContent={<div>Main</div>}
         panelContent={<div>Panel</div>}
         isPanelOpen={false}
       />
     )
-    const resizer = container.querySelector('.resizer')
-    expect(resizer).toBeNull()
+    expect(queryByRole('separator')).toBeNull()
   })
 
   it('uses default width of 400 when localStorage is empty', () => {
-    const { container } = render(
+    const { getByRole } = render(
       <SlidePanel
         mainContent={<div>Main</div>}
         panelContent={<div>Panel</div>}
         isPanelOpen
       />
     )
-    const panel = container.querySelector('.slidePanel') as HTMLElement
+    // Panel is an <aside> element, and has the implicit role 'complementary'
+    const panel = getByRole('complementary')
+    expect(panel.textContent).toBe('Panel')
     expect(panel.style.width).toBe('400px')
   })
 
   it('loads width from localStorage if present', () => {
     localStorage.setItem('panelWidth', '250')
-    const { container } = render(
+    const { getByRole } = render(
       <SlidePanel
         mainContent={<div>Main</div>}
         panelContent={<div>Panel</div>}
         isPanelOpen
       />
     )
-    const panel = container.querySelector('.slidePanel') as HTMLElement
+    const panel = getByRole('complementary')
     expect(panel.style.width).toBe('250px')
   })
 
   it('falls back to default width if localStorage width is invalid', () => {
     localStorage.setItem('panelWidth', 'not-a-number')
-    const { container } = render(
+    const { getByRole } = render(
       <SlidePanel
         mainContent={<div>Main</div>}
         panelContent={<div>Panel</div>}
         isPanelOpen
       />
     )
-    const panel = container.querySelector('.slidePanel') as HTMLElement
+    const panel = getByRole('complementary')
     // parseInt of 'not-a-number' yields NaN so default width of 400 is expected
     expect(panel.style.width).toBe('400px')
   })
 
   it('respects minWidth from config', () => {
-    const { container } = render(
+    const { getByRole } = render(
       <ConfigProvider value={{ slidePanel: { minWidth: 300 } }}>
         <SlidePanel
           mainContent={<div>Main</div>}
@@ -96,8 +97,8 @@ describe('SlidePanel', () => {
         />
       </ConfigProvider>
     )
-    const resizer = container.querySelector('.resizer') as HTMLElement
-    const panel = container.querySelector('.slidePanel') as HTMLElement
+    const resizer = getByRole('separator')
+    const panel = getByRole('complementary')
     expect(panel.style.width).toBe('400px')
 
     // Simulate mousedown on resizer with clientX 800
@@ -116,15 +117,15 @@ describe('SlidePanel', () => {
   })
 
   it('handles dragging to resize', () => {
-    const { container } = render(
+    const { getByRole } = render(
       <SlidePanel
         mainContent={<div>Main</div>}
         panelContent={<div>Panel</div>}
         isPanelOpen
       />
     )
-    const resizer = container.querySelector('.resizer') as HTMLElement
-    const panel = container.querySelector('.slidePanel') as HTMLElement
+    const resizer = getByRole('separator')
+    const panel = getByRole('complementary')
     expect(panel.style.width).toBe('400px')
 
     // Mock panel's offsetWidth to be 400px
@@ -151,7 +152,7 @@ describe('SlidePanel', () => {
   })
 
   it('uses config defaultWidth if valid', () => {
-    const { container } = render(
+    const { getByRole } = render(
       <ConfigProvider value={{ slidePanel: { defaultWidth: 500 } }}>
         <SlidePanel
           mainContent={<div>Main</div>}
@@ -160,12 +161,12 @@ describe('SlidePanel', () => {
         />
       </ConfigProvider>
     )
-    const panel = container.querySelector('.slidePanel') as HTMLElement
+    const panel = getByRole('complementary')
     expect(panel.style.width).toBe('500px')
   })
 
   it('ignores negative config.defaultWidth and uses 400 instead', () => {
-    const { container } = render(
+    const { getByRole } = render(
       <ConfigProvider value={{ slidePanel: { defaultWidth: -10 } }}>
         <SlidePanel
           mainContent={<div>Main</div>}
@@ -174,7 +175,7 @@ describe('SlidePanel', () => {
         />
       </ConfigProvider>
     )
-    const panel = container.querySelector('.slidePanel') as HTMLElement
+    const panel = getByRole('complementary')
     expect(panel.style.width).toBe('400px')
   })
 })
diff --git a/test/lib/utils.test.ts b/test/lib/utils.test.ts
new file mode 100644
index 00000000..041f90db
--- /dev/null
+++ b/test/lib/utils.test.ts
@@ -0,0 +1,20 @@
+import { describe, expect, it } from 'vitest'
+import { cn } from '../../src/index.js'
+
+describe('Classname function', () => {
+  it('joins class names correctly', () => {
+    expect(cn('class1', 'class2')).toBe('class1 class2')
+  })
+
+  it('ignores undefined and false values', () => {
+    expect(cn('class1', undefined, 'class2', false)).toBe('class1 class2')
+  })
+
+  it('returns empty string if no valid class names', () => {
+    expect(cn(undefined, false)).toBe('')
+  })
+
+  it('handles single class name', () => {
+    expect(cn('class1')).toBe('class1')
+  })
+})