diff --git a/package.json b/package.json
index c81959de..434a4026 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
   ],
   "scripts": {
     "build:types": "tsc -b",
-    "build:lib": "vite build -c vite.lib.config.ts && cp src/styles/global.css lib/global.css",
+    "build:lib": "vite build -c vite.lib.config.ts && cp src/assets/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 62317ed3..dbeac28c 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -1,7 +1,7 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import App from './components/App.js'
-import './styles/global.css'
+import './assets/global.css'
+import App from './components/App/App.js'
 
 const root = document.getElementById('app')
 if (!root) throw new Error('missing root element')
diff --git a/src/styles/global.css b/src/assets/global.css
similarity index 100%
rename from src/styles/global.css
rename to src/assets/global.css
diff --git a/src/components/App.tsx b/src/components/App/App.tsx
similarity index 80%
rename from src/components/App.tsx
rename to src/components/App/App.tsx
index 6c83d572..2181cb6f 100644
--- a/src/components/App.tsx
+++ b/src/components/App/App.tsx
@@ -1,8 +1,8 @@
 import { useMemo } from 'react'
-import { Config, ConfigProvider } from '../hooks/useConfig.js'
-import { getHttpSource } from '../lib/sources/httpSource.js'
-import { getHyperparamSource } from '../lib/sources/hyperparamSource.js'
-import Page from './Page.js'
+import { Config, ConfigProvider } from '../../hooks/useConfig.js'
+import { getHttpSource } from '../../lib/sources/httpSource.js'
+import { getHyperparamSource } from '../../lib/sources/hyperparamSource.js'
+import Page from '../Page/Page.js'
 
 export default function App() {
   const search = new URLSearchParams(location.search)
diff --git a/src/components/viewers/AvroView.tsx b/src/components/AvroView/AvroView.tsx
similarity index 91%
rename from src/components/viewers/AvroView.tsx
rename to src/components/AvroView/AvroView.tsx
index 27530d33..6f229b66 100644
--- a/src/components/viewers/AvroView.tsx
+++ b/src/components/AvroView/AvroView.tsx
@@ -2,9 +2,9 @@ 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 ContentWrapper, { ContentSize } from './ContentWrapper.js'
+import ContentWrapper, { ContentSize } from '../ContentWrapper/ContentWrapper.js'
+import Json from '../Json/Json.js'
+import styles from '../Json/Json.module.css'
 
 interface ViewerProps {
   source: FileSource
diff --git a/src/styles/Breadcrumb.module.css b/src/components/Breadcrumb/Breadcrumb.module.css
similarity index 100%
rename from src/styles/Breadcrumb.module.css
rename to src/components/Breadcrumb/Breadcrumb.module.css
diff --git a/test/components/Breadcrumb.test.tsx b/src/components/Breadcrumb/Breadcrumb.test.tsx
similarity index 83%
rename from test/components/Breadcrumb.test.tsx
rename to src/components/Breadcrumb/Breadcrumb.test.tsx
index 60777c79..ecf6c7de 100644
--- a/test/components/Breadcrumb.test.tsx
+++ b/src/components/Breadcrumb/Breadcrumb.test.tsx
@@ -1,9 +1,9 @@
 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'
+import { Config, ConfigProvider } from '../../hooks/useConfig.js'
+import { getHyperparamSource } from '../../lib/sources/hyperparamSource.js'
+import Breadcrumb from './Breadcrumb.js'
 
 const endpoint = 'http://localhost:3000'
 
diff --git a/src/components/Breadcrumb.tsx b/src/components/Breadcrumb/Breadcrumb.tsx
similarity index 75%
rename from src/components/Breadcrumb.tsx
rename to src/components/Breadcrumb/Breadcrumb.tsx
index 55756ff4..90db82db 100644
--- a/src/components/Breadcrumb.tsx
+++ b/src/components/Breadcrumb/Breadcrumb.tsx
@@ -1,8 +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'
+import { useConfig } from '../../hooks/useConfig.js'
+import type { Source } from '../../lib/sources/types.js'
+import { cn } from '../../lib/utils.js'
+import styles from './Breadcrumb.module.css'
 
 interface BreadcrumbProps {
   source: Source,
diff --git a/src/components/Cell.tsx b/src/components/Cell/Cell.tsx
similarity index 91%
rename from src/components/Cell.tsx
rename to src/components/Cell/Cell.tsx
index bb2090ae..a2e0b963 100644
--- a/src/components/Cell.tsx
+++ b/src/components/Cell/Cell.tsx
@@ -1,10 +1,10 @@
 import { stringify } from 'hightable'
 import { asyncBufferFromUrl, parquetMetadataAsync } from 'hyparquet'
 import { useEffect, useState } from 'react'
-import type { FileSource } from '../lib/sources/types.js'
-import { parquetDataFrame } from '../lib/tableProvider.js'
-import Breadcrumb from './Breadcrumb.js'
-import Layout from './Layout.js'
+import type { FileSource } from '../../lib/sources/types.js'
+import { parquetDataFrame } from '../../lib/tableProvider.js'
+import Breadcrumb from '../Breadcrumb/Breadcrumb.js'
+import Layout from '../Layout/Layout.js'
 
 interface CellProps {
   source: FileSource;
diff --git a/src/components/viewers/CellPanel.tsx b/src/components/CellPanel/CellPanel.tsx
similarity index 92%
rename from src/components/viewers/CellPanel.tsx
rename to src/components/CellPanel/CellPanel.tsx
index 30534546..869658f6 100644
--- a/src/components/viewers/CellPanel.tsx
+++ b/src/components/CellPanel/CellPanel.tsx
@@ -1,7 +1,7 @@
 import { DataFrame, stringify } from 'hightable'
 import { useEffect, useState } from 'react'
-import SlideCloseButton from '../SlideCloseButton.js'
-import ContentWrapper from './ContentWrapper.js'
+import ContentWrapper from '../ContentWrapper/ContentWrapper.js'
+import SlideCloseButton from '../SlideCloseButton/SlideCloseButton.js'
 
 interface ViewerProps {
   df: DataFrame
diff --git a/src/styles/Center.module.css b/src/components/Center/Center.module.css
similarity index 100%
rename from src/styles/Center.module.css
rename to src/components/Center/Center.module.css
diff --git a/src/components/Center.tsx b/src/components/Center/Center.tsx
similarity index 62%
rename from src/components/Center.tsx
rename to src/components/Center/Center.tsx
index 779d3593..bf5d6cce 100644
--- a/src/components/Center.tsx
+++ b/src/components/Center/Center.tsx
@@ -1,7 +1,7 @@
 import { ReactNode } from 'react'
-import { useConfig } from '../hooks/useConfig.js'
-import { cn } from '../lib/utils.js'
-import styles from '../styles/Center.module.css'
+import { useConfig } from '../../hooks/useConfig.js'
+import { cn } from '../../lib/utils.js'
+import styles from './Center.module.css'
 
 export default function Center({ children }: {children?: ReactNode}) {
   const { customClass } = useConfig()
diff --git a/src/styles/viewers/ContentWrapper.module.css b/src/components/ContentWrapper/ContentWrapper.module.css
similarity index 100%
rename from src/styles/viewers/ContentWrapper.module.css
rename to src/components/ContentWrapper/ContentWrapper.module.css
diff --git a/src/components/viewers/ContentWrapper.tsx b/src/components/ContentWrapper/ContentWrapper.tsx
similarity index 86%
rename from src/components/viewers/ContentWrapper.tsx
rename to src/components/ContentWrapper/ContentWrapper.tsx
index 2d26b13a..4dd0ac61 100644
--- a/src/components/viewers/ContentWrapper.tsx
+++ b/src/components/ContentWrapper/ContentWrapper.tsx
@@ -1,9 +1,9 @@
 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'
+import Center from '../Center/Center.js'
+import Spinner from '../Spinner/Spinner.js'
+import styles from './ContentWrapper.module.css'
 
 export interface ContentSize {
   fileSize?: number
diff --git a/src/styles/ErrorBar.module.css b/src/components/ErrorBar/ErrorBar.module.css
similarity index 100%
rename from src/styles/ErrorBar.module.css
rename to src/components/ErrorBar/ErrorBar.module.css
diff --git a/src/components/ErrorBar.tsx b/src/components/ErrorBar/ErrorBar.tsx
similarity index 85%
rename from src/components/ErrorBar.tsx
rename to src/components/ErrorBar/ErrorBar.tsx
index 2b166c13..edcd162b 100644
--- a/src/components/ErrorBar.tsx
+++ b/src/components/ErrorBar/ErrorBar.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react'
-import { useConfig } from '../hooks/useConfig.js'
-import { cn } from '../lib/utils.js'
-import styles from '../styles/ErrorBar.module.css'
+import { useConfig } from '../../hooks/useConfig.js'
+import { cn } from '../../lib/utils.js'
+import styles from './ErrorBar.module.css'
 
 interface ErrorBarProps {
   error?: Error
diff --git a/test/components/File.test.tsx b/src/components/File/File.test.tsx
similarity index 74%
rename from test/components/File.test.tsx
rename to src/components/File/File.test.tsx
index 297a2c62..1c681494 100644
--- a/test/components/File.test.tsx
+++ b/src/components/File/File.test.tsx
@@ -1,9 +1,10 @@
 import { render } from '@testing-library/react'
 import { strict as assert } from 'assert'
-import React, { act } from 'react'
+import { act } from 'react'
 import { describe, expect, it, vi } from 'vitest'
-import { Config, ConfigProvider } from '../../src/hooks/useConfig.js'
-import { File, getHttpSource, getHyperparamSource } from '../../src/index.js'
+import { Config, ConfigProvider } from '../../hooks/useConfig.js'
+import { getHttpSource, getHyperparamSource } from '../../lib/sources/index.js'
+import File from './File.js'
 
 const endpoint = 'http://localhost:3000'
 
@@ -60,11 +61,11 @@ describe('File Component', () => {
     ))
 
     const links = getAllByRole('link')
-    expect(links[0].getAttribute('href')).toBe('/')
-    expect(links[1].getAttribute('href')).toBe('/files?key=')
-    expect(links[2].getAttribute('href')).toBe('/files?key=folder1/')
-    expect(links[3].getAttribute('href')).toBe('/files?key=folder1/folder2/')
-    expect(links[4].getAttribute('href')).toBe('/files?key=folder1/folder2/folder3/')
-    expect(links[5].getAttribute('href')).toBe('/files?key=folder1/folder2/folder3/test.txt')
+    expect(links[0]?.getAttribute('href')).toBe('/')
+    expect(links[1]?.getAttribute('href')).toBe('/files?key=')
+    expect(links[2]?.getAttribute('href')).toBe('/files?key=folder1/')
+    expect(links[3]?.getAttribute('href')).toBe('/files?key=folder1/folder2/')
+    expect(links[4]?.getAttribute('href')).toBe('/files?key=folder1/folder2/folder3/')
+    expect(links[5]?.getAttribute('href')).toBe('/files?key=folder1/folder2/folder3/test.txt')
   })
 })
diff --git a/src/components/File.tsx b/src/components/File/File.tsx
similarity index 70%
rename from src/components/File.tsx
rename to src/components/File/File.tsx
index 39f7039a..d8c10f03 100644
--- a/src/components/File.tsx
+++ b/src/components/File/File.tsx
@@ -1,8 +1,8 @@
 import { useState } from 'react'
-import type { FileSource } from '../lib/sources/types.js'
-import Breadcrumb from './Breadcrumb.js'
-import Layout from './Layout.js'
-import Viewer from './viewers/Viewer.js'
+import type { FileSource } from '../../lib/sources/types.js'
+import Breadcrumb from '../Breadcrumb/Breadcrumb.js'
+import Layout from '../Layout/Layout.js'
+import Viewer from '../Viewer/Viewer.js'
 
 interface FileProps {
   source: FileSource
diff --git a/src/styles/Folder.module.css b/src/components/Folder/Folder.module.css
similarity index 89%
rename from src/styles/Folder.module.css
rename to src/components/Folder/Folder.module.css
index 68d6a812..2ca7809b 100644
--- a/src/styles/Folder.module.css
+++ b/src/components/Folder/Folder.module.css
@@ -41,11 +41,11 @@
           padding-left: 22px;
 
           &[data-file-kind="directory"] {
-            background-image: url("../assets/folder.svg");
+            background-image: url("../../assets/folder.svg");
           }
 
           &[data-file-kind="file"] {
-            background-image: url("../assets/file.svg");
+            background-image: url("../../assets/file.svg");
           }
         }
 
@@ -68,7 +68,7 @@
 
 /* search */
 .search {
-  background: #fff url("../assets/search.svg") no-repeat center right 8px;
+  background: #fff url("../../assets/search.svg") no-repeat center right 8px;
   border: 1px solid transparent;
   border-radius: 8px;
   flex-shrink: 1;
diff --git a/test/components/Folder.test.tsx b/src/components/Folder/Folder.test.tsx
similarity index 96%
rename from test/components/Folder.test.tsx
rename to src/components/Folder/Folder.test.tsx
index d9cb23eb..5c1be5fb 100644
--- a/test/components/Folder.test.tsx
+++ b/src/components/Folder/Folder.test.tsx
@@ -1,9 +1,10 @@
 import { fireEvent, render, waitFor } from '@testing-library/react'
 import { strict as assert } from 'assert'
-import React, { act } from 'react'
+import { act } from 'react'
 import { describe, expect, it, test, vi } from 'vitest'
-import { Config, ConfigProvider } from '../../src/hooks/useConfig.js'
-import { DirSource, FileMetadata, Folder, HyperparamFileMetadata, getHyperparamSource } from '../../src/index.js'
+import { Config, ConfigProvider } from '../../hooks/useConfig.js'
+import { DirSource, FileMetadata, HyperparamFileMetadata, getHyperparamSource } from '../../lib/sources/index.js'
+import Folder from './Folder.js'
 
 const endpoint = 'http://localhost:3000'
 const mockFiles: HyperparamFileMetadata[] = [
diff --git a/src/components/Folder.tsx b/src/components/Folder/Folder.tsx
similarity index 91%
rename from src/components/Folder.tsx
rename to src/components/Folder/Folder.tsx
index 5dde3576..6874ec4b 100644
--- a/src/components/Folder.tsx
+++ b/src/components/Folder/Folder.tsx
@@ -1,12 +1,12 @@
 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 Center from './Center.js'
-import Layout from './Layout.js'
-import Spinner from './Spinner.js'
+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 Breadcrumb from '../Breadcrumb/Breadcrumb.js'
+import Center from '../Center/Center.js'
+import Layout from '../Layout/Layout.js'
+import Spinner from '../Spinner/Spinner.js'
+import styles from './Folder.module.css'
 
 interface FolderProps {
   source: DirSource
diff --git a/src/styles/viewers/ImageView.module.css b/src/components/ImageView/ImageView.module.css
similarity index 100%
rename from src/styles/viewers/ImageView.module.css
rename to src/components/ImageView/ImageView.module.css
diff --git a/test/components/viewers/ImageView.test.tsx b/src/components/ImageView/ImageView.test.tsx
similarity index 91%
rename from test/components/viewers/ImageView.test.tsx
rename to src/components/ImageView/ImageView.test.tsx
index e55b1ece..00f3d427 100644
--- a/test/components/viewers/ImageView.test.tsx
+++ b/src/components/ImageView/ImageView.test.tsx
@@ -1,8 +1,8 @@
 import { render } from '@testing-library/react'
 import { strict as assert } from 'assert'
-import React from 'react'
 import { describe, expect, it, vi } from 'vitest'
-import { ImageView, getHyperparamSource } from '../../../src/index.js'
+import { getHyperparamSource } from '../../lib/sources/index.js'
+import ImageView from './ImageView.js'
 
 globalThis.fetch = vi.fn()
 
diff --git a/src/components/viewers/ImageView.tsx b/src/components/ImageView/ImageView.tsx
similarity index 95%
rename from src/components/viewers/ImageView.tsx
rename to src/components/ImageView/ImageView.tsx
index 55672d70..0e81295a 100644
--- a/src/components/viewers/ImageView.tsx
+++ b/src/components/ImageView/ImageView.tsx
@@ -2,8 +2,8 @@ import { useEffect, useState } from 'react'
 import { useConfig } from '../../hooks/useConfig.js'
 import { FileSource } from '../../lib/sources/types.js'
 import { cn, contentTypes, parseFileSize } from '../../lib/utils.js'
-import styles from '../../styles/viewers/ImageView.module.css'
-import ContentWrapper from './ContentWrapper.js'
+import ContentWrapper from '../ContentWrapper/ContentWrapper.js'
+import styles from './ImageView.module.css'
 
 interface ViewerProps {
   source: FileSource
diff --git a/src/styles/Json.module.css b/src/components/Json/Json.module.css
similarity index 100%
rename from src/styles/Json.module.css
rename to src/components/Json/Json.module.css
diff --git a/test/components/Json.test.tsx b/src/components/Json/Json.test.tsx
similarity index 96%
rename from test/components/Json.test.tsx
rename to src/components/Json/Json.test.tsx
index ae0cb891..3b495eaa 100644
--- a/test/components/Json.test.tsx
+++ b/src/components/Json/Json.test.tsx
@@ -1,7 +1,6 @@
 import { fireEvent, render } from '@testing-library/react'
-import React from 'react'
 import { describe, expect, it } from 'vitest'
-import Json from '../../src/components/Json'
+import Json from './Json.js'
 
 describe('Json Component', () => {
   it('renders primitive types correctly', () => {
diff --git a/src/components/Json.tsx b/src/components/Json/Json.tsx
similarity index 98%
rename from src/components/Json.tsx
rename to src/components/Json/Json.tsx
index 6755ca31..27887808 100644
--- a/src/components/Json.tsx
+++ b/src/components/Json/Json.tsx
@@ -1,5 +1,5 @@
 import { ReactNode, useState } from 'react'
-import styles from '../styles/Json.module.css'
+import styles from './Json.module.css'
 
 interface JsonProps {
   json: unknown
diff --git a/test/components/viewers/JsonView.test.tsx b/src/components/JsonView/JsonView.test.tsx
similarity index 95%
rename from test/components/viewers/JsonView.test.tsx
rename to src/components/JsonView/JsonView.test.tsx
index 695cb811..15248510 100644
--- a/test/components/viewers/JsonView.test.tsx
+++ b/src/components/JsonView/JsonView.test.tsx
@@ -1,8 +1,7 @@
 import { render, waitFor } from '@testing-library/react'
-import React from 'react'
 import { describe, expect, it, vi } from 'vitest'
-import JsonView from '../../../src/components/viewers/JsonView'
-import { FileSource } from '../../../src/lib/sources/types.js'
+import { FileSource } from '../../lib/sources/types.js'
+import JsonView from './JsonView.js'
 
 vi.mock('../../../src/lib/utils.js', async () => {
   const actual = await vi.importActual('../../../src/lib/utils.js')
diff --git a/src/components/viewers/JsonView.tsx b/src/components/JsonView/JsonView.tsx
similarity index 91%
rename from src/components/viewers/JsonView.tsx
rename to src/components/JsonView/JsonView.tsx
index 024f1822..eed17d18 100644
--- a/src/components/viewers/JsonView.tsx
+++ b/src/components/JsonView/JsonView.tsx
@@ -1,10 +1,10 @@
 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 ContentWrapper, { TextContent } from './ContentWrapper.js'
+import Center from '../Center/Center.js'
+import ContentWrapper, { TextContent } from '../ContentWrapper/ContentWrapper.js'
+import Json from '../Json/Json.js'
+import styles from '../Json/Json.module.css'
 
 interface ViewerProps {
   source: FileSource
diff --git a/src/styles/Layout.module.css b/src/components/Layout/Layout.module.css
similarity index 100%
rename from src/styles/Layout.module.css
rename to src/components/Layout/Layout.module.css
diff --git a/test/components/Layout.test.tsx b/src/components/Layout/Layout.test.tsx
similarity index 92%
rename from test/components/Layout.test.tsx
rename to src/components/Layout/Layout.test.tsx
index 212bd86f..5d17ebfa 100644
--- a/test/components/Layout.test.tsx
+++ b/src/components/Layout/Layout.test.tsx
@@ -1,7 +1,6 @@
 import { render } from '@testing-library/react'
-import React from 'react'
 import { describe, expect, it } from 'vitest'
-import { Layout } from '../../src/index.js'
+import Layout from './Layout.js'
 
 describe('Layout Component', () => {
   it('renders children', () => {
diff --git a/src/components/Layout.tsx b/src/components/Layout/Layout.tsx
similarity index 81%
rename from src/components/Layout.tsx
rename to src/components/Layout/Layout.tsx
index 0047b442..df6beac1 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout/Layout.tsx
@@ -1,11 +1,11 @@
 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'
+import { useConfig } from '../../hooks/useConfig.js'
+import { cn } from '../../lib/utils.js'
+import ErrorBar from '../ErrorBar/ErrorBar.js'
+import ProgressBar from '../ProgressBar/ProgressBar.js'
+import SideBar from '../SideBar/SideBar.js'
+import Welcome from '../Welcome/Welcome.js'
+import styles from './Layout.module.css'
 
 interface LayoutProps {
   children: ReactNode
diff --git a/test/components/Markdown.test.tsx b/src/components/Markdown/Markdown.test.tsx
similarity index 95%
rename from test/components/Markdown.test.tsx
rename to src/components/Markdown/Markdown.test.tsx
index dade4f1b..12c28405 100644
--- a/test/components/Markdown.test.tsx
+++ b/src/components/Markdown/Markdown.test.tsx
@@ -1,7 +1,6 @@
 import { render } from '@testing-library/react'
-import React from 'react'
 import { describe, expect, it } from 'vitest'
-import { Markdown } from '../../src/index.js'
+import Markdown from './Markdown.js'
 
 describe('Markdown', () => {
   it('renders plain text as a paragraph', () => {
@@ -57,8 +56,8 @@ describe('Markdown', () => {
     expect(getByText('Hyp')).toBeDefined()
     expect(getByText('GitHub')).toBeDefined()
     const links = getAllByRole('link')
-    expect(links[0].getAttribute('href')).toBe('https://hyperparam.app')
-    expect(links[1].getAttribute('href')).toBe('https://github.com/hyparam')
+    expect(links[0]?.getAttribute('href')).toBe('https://hyperparam.app')
+    expect(links[1]?.getAttribute('href')).toBe('https://github.com/hyparam')
   })
 
   it('renders blockquote', () => {
@@ -247,15 +246,18 @@ describe('Markdown with nested elements', () => {
 
     const images = container.querySelectorAll('img')
     expect(images.length).toBe(2)
+    if (!(0 in images && 1 in images)) {
+      throw new Error('should not occur')
+    }
 
     // First link contains first image
-    expect(links[0].getAttribute('href')).toBe('https://opensource.org/licenses/MIT')
-    expect(links[0].contains(images[0])).toBe(true)
+    expect(links[0]?.getAttribute('href')).toBe('https://opensource.org/licenses/MIT')
+    expect(links[0]?.contains(images[0])).toBe(true)
     expect(images[0].getAttribute('alt')).toBe('license')
 
     // Second link contains second image
-    expect(links[1].getAttribute('href')).toBe('https://www.npmjs.com/package')
-    expect(links[1].contains(images[1])).toBe(true)
+    expect(links[1]?.getAttribute('href')).toBe('https://www.npmjs.com/package')
+    expect(links[1]?.contains(images[1])).toBe(true)
     expect(images[1].getAttribute('alt')).toBe('npm')
   })
 
diff --git a/src/components/Markdown.tsx b/src/components/Markdown/Markdown.tsx
similarity index 100%
rename from src/components/Markdown.tsx
rename to src/components/Markdown/Markdown.tsx
diff --git a/src/styles/viewers/MarkdownView.module.css b/src/components/MarkdownView/MarkdownView.module.css
similarity index 100%
rename from src/styles/viewers/MarkdownView.module.css
rename to src/components/MarkdownView/MarkdownView.module.css
diff --git a/test/components/viewers/MarkdownView.test.tsx b/src/components/MarkdownView/MarkdownView.test.tsx
similarity index 90%
rename from test/components/viewers/MarkdownView.test.tsx
rename to src/components/MarkdownView/MarkdownView.test.tsx
index 6d80a4dd..f965fdea 100644
--- a/test/components/viewers/MarkdownView.test.tsx
+++ b/src/components/MarkdownView/MarkdownView.test.tsx
@@ -1,8 +1,8 @@
 import { render } from '@testing-library/react'
 import { strict as assert } from 'assert'
-import React from 'react'
 import { describe, expect, it, vi } from 'vitest'
-import { MarkdownView, getHyperparamSource } from '../../../src/index.js'
+import { getHyperparamSource } from '../../lib/sources/index.js'
+import MarkdownView from './MarkdownView.js'
 
 globalThis.fetch = vi.fn()
 
diff --git a/src/components/viewers/MarkdownView.tsx b/src/components/MarkdownView/MarkdownView.tsx
similarity index 89%
rename from src/components/viewers/MarkdownView.tsx
rename to src/components/MarkdownView/MarkdownView.tsx
index 805260dd..83b388c9 100644
--- a/src/components/viewers/MarkdownView.tsx
+++ b/src/components/MarkdownView/MarkdownView.tsx
@@ -2,9 +2,9 @@ import { useEffect, useState } from 'react'
 import { useConfig } from '../../hooks/useConfig.js'
 import type { FileSource } from '../../lib/sources/types.js'
 import { cn, parseFileSize } from '../../lib/utils.js'
-import styles from '../../styles/viewers/MarkdownView.module.css'
-import Markdown from '../Markdown.js'
-import ContentWrapper, { TextContent } from './ContentWrapper.js'
+import ContentWrapper, { TextContent } from '../ContentWrapper/ContentWrapper.js'
+import Markdown from '../Markdown/Markdown.js'
+import styles from './MarkdownView.module.css'
 
 interface ViewerProps {
   source: FileSource
diff --git a/src/components/Page.tsx b/src/components/Page/Page.tsx
similarity index 75%
rename from src/components/Page.tsx
rename to src/components/Page/Page.tsx
index 13bc8cc8..2a8123e6 100644
--- a/src/components/Page.tsx
+++ b/src/components/Page/Page.tsx
@@ -1,7 +1,7 @@
-import { Source } from '../lib/sources/types.js'
-import Cell from './Cell.js'
-import File from './File.js'
-import Folder from './Folder.js'
+import { Source } from '../../lib/sources/types.js'
+import Cell from '../Cell/Cell.js'
+import File from '../File/File.js'
+import Folder from '../Folder/Folder.js'
 
 export interface Navigation {
   col?: number
diff --git a/src/styles/ParquetView.module.css b/src/components/ParquetView/ParquetView.module.css
similarity index 100%
rename from src/styles/ParquetView.module.css
rename to src/components/ParquetView/ParquetView.module.css
diff --git a/src/components/viewers/ParquetView.tsx b/src/components/ParquetView/ParquetView.tsx
similarity index 94%
rename from src/components/viewers/ParquetView.tsx
rename to src/components/ParquetView/ParquetView.tsx
index 592ef201..7caddfb1 100644
--- a/src/components/viewers/ParquetView.tsx
+++ b/src/components/ParquetView/ParquetView.tsx
@@ -7,10 +7,10 @@ import { appendSearchParams } from '../../lib/routes.js'
 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 CellPanel from './CellPanel.js'
-import ContentWrapper, { ContentSize } from './ContentWrapper.js'
-import SlidePanel from './SlidePanel.js'
+import CellPanel from '../CellPanel/CellPanel.js'
+import ContentWrapper, { ContentSize } from '../ContentWrapper/ContentWrapper.js'
+import SlidePanel from '../SlidePanel/SlidePanel.js'
+import styles from './ParquetView.module.css'
 
 interface ViewerProps {
   source: FileSource
diff --git a/src/styles/ProgressBar.module.css b/src/components/ProgressBar/ProgressBar.module.css
similarity index 100%
rename from src/styles/ProgressBar.module.css
rename to src/components/ProgressBar/ProgressBar.module.css
diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar/ProgressBar.tsx
similarity index 77%
rename from src/components/ProgressBar.tsx
rename to src/components/ProgressBar/ProgressBar.tsx
index b29da63a..362221c8 100644
--- a/src/components/ProgressBar.tsx
+++ b/src/components/ProgressBar/ProgressBar.tsx
@@ -1,7 +1,7 @@
-import { useConfig } from '../hooks/useConfig'
-import { cn } from '../lib/utils.js'
-import styles from '../styles/ProgressBar.module.css'
-import VisuallyHidden from './VisuallyHidden.js'
+import { useConfig } from '../../hooks/useConfig'
+import { cn } from '../../lib/utils.js'
+import VisuallyHidden from '../VisuallyHidden/VisuallyHidden.js'
+import styles from './ProgressBar.module.css'
 
 export default function ProgressBar({ value }: {value: number}) {
   const { customClass } = useConfig()
diff --git a/src/styles/SideBar.module.css b/src/components/SideBar/SideBar.module.css
similarity index 93%
rename from src/styles/SideBar.module.css
rename to src/components/SideBar/SideBar.module.css
index 31281fb1..29335090 100644
--- a/src/styles/SideBar.module.css
+++ b/src/components/SideBar/SideBar.module.css
@@ -37,7 +37,7 @@
 }
 .brand::before {
   content: "";
-  background: url("../assets/logo.svg") no-repeat 0 center;
+  background: url("../../assets/logo.svg") no-repeat 0 center;
   background-size: 26px;
   height: 26px;
   width: 26px;
diff --git a/src/components/SideBar.tsx b/src/components/SideBar/SideBar.tsx
similarity index 65%
rename from src/components/SideBar.tsx
rename to src/components/SideBar/SideBar.tsx
index 2d5f46e5..3aa0dc26 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar/SideBar.tsx
@@ -1,6 +1,6 @@
-import { useConfig } from '../hooks/useConfig.js'
-import { cn } from '../lib/utils.js'
-import styles from '../styles/SideBar.module.css'
+import { useConfig } from '../../hooks/useConfig.js'
+import { cn } from '../../lib/utils.js'
+import styles from './SideBar.module.css'
 
 export default function SideBar() {
   const { customClass } = useConfig()
diff --git a/src/styles/SlideCloseButton.module.css b/src/components/SlideCloseButton/SlideCloseButton.module.css
similarity index 100%
rename from src/styles/SlideCloseButton.module.css
rename to src/components/SlideCloseButton/SlideCloseButton.module.css
diff --git a/src/components/SlideCloseButton.tsx b/src/components/SlideCloseButton/SlideCloseButton.tsx
similarity index 69%
rename from src/components/SlideCloseButton.tsx
rename to src/components/SlideCloseButton/SlideCloseButton.tsx
index 4ad70a15..2de37280 100644
--- a/src/components/SlideCloseButton.tsx
+++ b/src/components/SlideCloseButton/SlideCloseButton.tsx
@@ -1,7 +1,7 @@
 import { MouseEventHandler } from 'react'
-import { useConfig } from '../hooks/useConfig.js'
-import { cn } from '../lib/utils.js'
-import styles from '../styles/SlideCloseButton.module.css'
+import { useConfig } from '../../hooks/useConfig.js'
+import { cn } from '../../lib/utils.js'
+import styles from './SlideCloseButton.module.css'
 
 export default function SlideCloseButton({ onClick }: { onClick: MouseEventHandler<HTMLButtonElement> | undefined }) {
   const { customClass } = useConfig()
diff --git a/src/styles/viewers/SlidePanel.module.css b/src/components/SlidePanel/SlidePanel.module.css
similarity index 100%
rename from src/styles/viewers/SlidePanel.module.css
rename to src/components/SlidePanel/SlidePanel.module.css
diff --git a/test/components/viewers/SlidePanel.test.tsx b/src/components/SlidePanel/SlidePanel.test.tsx
similarity index 97%
rename from test/components/viewers/SlidePanel.test.tsx
rename to src/components/SlidePanel/SlidePanel.test.tsx
index 9abaf8b4..31fd808c 100644
--- a/test/components/viewers/SlidePanel.test.tsx
+++ b/src/components/SlidePanel/SlidePanel.test.tsx
@@ -1,9 +1,8 @@
 
 import { act, fireEvent, render } from '@testing-library/react'
-import React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import SlidePanel from '../../../src/components/viewers/SlidePanel.js'
-import { ConfigProvider } from '../../../src/hooks/useConfig.js'
+import { ConfigProvider } from '../../hooks/useConfig.js'
+import SlidePanel from './SlidePanel.js'
 
 describe('SlidePanel', () => {
   // Minimal localStorage mock
diff --git a/src/components/viewers/SlidePanel.tsx b/src/components/SlidePanel/SlidePanel.tsx
similarity index 98%
rename from src/components/viewers/SlidePanel.tsx
rename to src/components/SlidePanel/SlidePanel.tsx
index 771b0302..d6c119f9 100644
--- a/src/components/viewers/SlidePanel.tsx
+++ b/src/components/SlidePanel/SlidePanel.tsx
@@ -1,7 +1,7 @@
 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'
+import styles from './SlidePanel.module.css'
 
 interface SlidePanelProps {
   mainContent: ReactNode
diff --git a/src/styles/Spinner.module.css b/src/components/Spinner/Spinner.module.css
similarity index 100%
rename from src/styles/Spinner.module.css
rename to src/components/Spinner/Spinner.module.css
diff --git a/test/components/Spinner.test.tsx b/src/components/Spinner/Spinner.test.tsx
similarity index 93%
rename from test/components/Spinner.test.tsx
rename to src/components/Spinner/Spinner.test.tsx
index c61b7244..bcb9ecdd 100644
--- a/test/components/Spinner.test.tsx
+++ b/src/components/Spinner/Spinner.test.tsx
@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react'
-import React from 'react'
 import { describe, expect, it } from 'vitest'
-import { ConfigProvider, Spinner } from '../../src/index.js'
+import { ConfigProvider } from '../../hooks/useConfig.js'
+import Spinner from './Spinner.js'
 
 describe('Spinner Component', () => {
   it('renders with base and additional class names', () => {
diff --git a/src/components/Spinner.tsx b/src/components/Spinner/Spinner.tsx
similarity index 61%
rename from src/components/Spinner.tsx
rename to src/components/Spinner/Spinner.tsx
index 9610bc17..d46412a7 100644
--- a/src/components/Spinner.tsx
+++ b/src/components/Spinner/Spinner.tsx
@@ -1,7 +1,7 @@
-import { useConfig } from '../hooks/useConfig.js'
-import { cn } from '../lib/utils.js'
-import styles from '../styles/Spinner.module.css'
-import VisuallyHidden from './VisuallyHidden.js'
+import { useConfig } from '../../hooks/useConfig.js'
+import { cn } from '../../lib/utils.js'
+import VisuallyHidden from '../VisuallyHidden/VisuallyHidden.js'
+import styles from './Spinner.module.css'
 
 export default function Spinner({ text }: {text?: string}) {
   const { customClass } = useConfig()
diff --git a/src/styles/viewers/TextView.module.css b/src/components/TextView/TextView.module.css
similarity index 100%
rename from src/styles/viewers/TextView.module.css
rename to src/components/TextView/TextView.module.css
diff --git a/src/components/viewers/TextView.tsx b/src/components/TextView/TextView.tsx
similarity index 93%
rename from src/components/viewers/TextView.tsx
rename to src/components/TextView/TextView.tsx
index d4663047..2dc9cea4 100644
--- a/src/components/viewers/TextView.tsx
+++ b/src/components/TextView/TextView.tsx
@@ -2,8 +2,8 @@ import { useEffect, useState } from 'react'
 import { useConfig } from '../../hooks/useConfig.js'
 import { FileSource } from '../../lib/sources/types.js'
 import { cn, parseFileSize } from '../../lib/utils.js'
-import styles from '../../styles/viewers/TextView.module.css'
-import ContentWrapper, { TextContent } from './ContentWrapper.js'
+import ContentWrapper, { TextContent } from '../ContentWrapper/ContentWrapper.js'
+import styles from './TextView.module.css'
 
 interface ViewerProps {
   source: FileSource
diff --git a/src/components/viewers/Viewer.tsx b/src/components/Viewer/Viewer.tsx
similarity index 78%
rename from src/components/viewers/Viewer.tsx
rename to src/components/Viewer/Viewer.tsx
index 20f6bb4d..74870d23 100644
--- a/src/components/viewers/Viewer.tsx
+++ b/src/components/Viewer/Viewer.tsx
@@ -1,11 +1,11 @@
 import { FileSource } from '../../lib/sources/types.js'
 import { imageTypes } from '../../lib/utils.js'
-import AvroView from './AvroView.js'
-import ImageView from './ImageView.js'
-import JsonView from './JsonView.js'
-import MarkdownView from './MarkdownView.js'
-import TableView from './ParquetView.js'
-import TextView from './TextView.js'
+import AvroView from '../AvroView/AvroView.js'
+import ImageView from '../ImageView/ImageView.js'
+import JsonView from '../JsonView/JsonView.js'
+import MarkdownView from '../MarkdownView/MarkdownView.js'
+import TableView from '../ParquetView/ParquetView.js'
+import TextView from '../TextView/TextView.js'
 
 interface ViewerProps {
   source: FileSource;
diff --git a/src/styles/VisuallyHidden.module.css b/src/components/VisuallyHidden/VisuallyHidden.module.css
similarity index 100%
rename from src/styles/VisuallyHidden.module.css
rename to src/components/VisuallyHidden/VisuallyHidden.module.css
diff --git a/src/components/VisuallyHidden.tsx b/src/components/VisuallyHidden/VisuallyHidden.tsx
similarity index 78%
rename from src/components/VisuallyHidden.tsx
rename to src/components/VisuallyHidden/VisuallyHidden.tsx
index 1063edc3..11f093ca 100644
--- a/src/components/VisuallyHidden.tsx
+++ b/src/components/VisuallyHidden/VisuallyHidden.tsx
@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react'
-import styles from '../styles/VisuallyHidden.module.css'
+import styles from './VisuallyHidden.module.css'
 
 export default function VisuallyHidden({ children, ...delegated }: HTMLAttributes<HTMLElement>) {
   return <div className={styles.wrapper} {...delegated}>{children}</div>
diff --git a/src/styles/Welcome.module.css b/src/components/Welcome/Welcome.module.css
similarity index 100%
rename from src/styles/Welcome.module.css
rename to src/components/Welcome/Welcome.module.css
diff --git a/test/components/Welcome.test.tsx b/src/components/Welcome/Welcome.test.tsx
similarity index 96%
rename from test/components/Welcome.test.tsx
rename to src/components/Welcome/Welcome.test.tsx
index bd5e147a..c6f223c1 100644
--- a/test/components/Welcome.test.tsx
+++ b/src/components/Welcome/Welcome.test.tsx
@@ -1,7 +1,6 @@
 import { fireEvent, render } from '@testing-library/react'
-import React from 'react'
 import { describe, expect, it, vi } from 'vitest'
-import Welcome from '../../src/components/Welcome.js'
+import Welcome from './Welcome.js'
 
 describe('Welcome Component', () => {
   it('renders welcome content', () => {
diff --git a/src/components/Welcome.tsx b/src/components/Welcome/Welcome.tsx
similarity index 91%
rename from src/components/Welcome.tsx
rename to src/components/Welcome/Welcome.tsx
index 154a05a3..b7db76e7 100644
--- a/src/components/Welcome.tsx
+++ b/src/components/Welcome/Welcome.tsx
@@ -1,7 +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'
+import { useConfig } from '../../hooks/useConfig.js'
+import { cn } from '../../lib/utils.js'
+import styles from './Welcome.module.css'
 
 interface WelcomePopupProps {
   onClose: () => void
diff --git a/src/components/index.ts b/src/components/index.ts
index f3e9a7e4..3e56888b 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,11 +1,17 @@
-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 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 }
+import Breadcrumb from './Breadcrumb/Breadcrumb.js'
+import Cell from './Cell/Cell.js'
+import ContentWrapper from './ContentWrapper/ContentWrapper.js'
+import ErrorBar from './ErrorBar/ErrorBar.js'
+import File from './File/File.js'
+import Folder from './Folder/Folder.js'
+import ImageView from './ImageView/ImageView.js'
+import Layout from './Layout/Layout.js'
+import Markdown from './Markdown/Markdown.js'
+import MarkdownView from './MarkdownView/MarkdownView.js'
+import Page from './Page/Page.js'
+import ParquetView from './ParquetView/ParquetView.js'
+import SlidePanel from './SlidePanel/SlidePanel.js'
+import Spinner from './Spinner/Spinner.js'
+import TextView from './TextView/TextView.js'
+import Viewer from './Viewer/Viewer.js'
+export { Breadcrumb, Cell, ContentWrapper, ErrorBar, File, Folder, ImageView, Layout, Markdown, MarkdownView, Page, ParquetView, SlidePanel, Spinner, TextView, Viewer }
diff --git a/src/components/viewers/index.ts b/src/components/viewers/index.ts
deleted file mode 100644
index 03cc3d5f..00000000
--- a/src/components/viewers/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-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 { ContentWrapper, ImageView, MarkdownView, ParquetView, SlidePanel, TextView, Viewer }