diff --git a/packages/web/src/routes/browse/components/SearchResults.svelte b/packages/web/src/routes/browse/components/SearchResults.svelte
index 5d481749..9d2d5840 100644
--- a/packages/web/src/routes/browse/components/SearchResults.svelte
+++ b/packages/web/src/routes/browse/components/SearchResults.svelte
@@ -125,7 +125,9 @@
               {/if}
           {:else if result.media_type === 'media_series'}
               <Icon data={icons.Copy} fill={icon_color} stroke="none" size={icon_size} />
-              <span>({result.media_reference.media_series_length})</span>
+              <a href="/series/{result.media_reference.id}" class="hover:text-green-500 hover:underline">
+                <span>({result.media_reference.media_series_length})</span>
+              </a>
           {:else if result.media_type === 'grouped'}
               <Icon data={icons.Copy} fill={icon_color} stroke="none" size={icon_size} />
               <SearchLink
diff --git a/packages/web/src/routes/series/[series_id]/+page.svelte b/packages/web/src/routes/series/[series_id]/+page.svelte
new file mode 100644
index 00000000..39f5697f
--- /dev/null
+++ b/packages/web/src/routes/series/[series_id]/+page.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+  import MediaDetails from './components/MediaDetails.svelte'
+  import SearchParams from './components/SearchParams.svelte'
+  import MediaList from './components/MediaList.svelte'
+  import MediaView from './components/MediaView.svelte'
+  import Footer from './components/Footer.svelte'
+  import Header from './components/Header.svelte'
+
+  import { SeriesController } from './controller.ts'
+
+	/** @type {import('./$types').PageProps} */
+  let props  = $props()
+
+  const controller = new SeriesController(props.data.config, props.data.series_id)
+  let { dimensions, focus, queryparams } = controller.runes
+  focus.stack({component: 'SeriesPage', focus: 'page'})
+</script>
+
+<div class="h-dvh">
+  <Header {controller} bind:height={dimensions.heights.header} />
+  <div class="grid grid-cols-[auto_1fr]">
+    <MediaDetails {controller} />
+    <div class="relative">
+      <MediaView {controller} />
+      <MediaList {controller} />
+    </div>
+  </div>
+  <Footer {controller} bind:height={dimensions.heights.footer} />
+</div>
+
+<svelte:window
+  on:keydown={controller.keybinds.handler}
+  bind:innerHeight={dimensions.heights.screen}
+/>
diff --git a/packages/web/src/routes/series/[series_id]/+page.ts b/packages/web/src/routes/series/[series_id]/+page.ts
new file mode 100644
index 00000000..4d34411a
--- /dev/null
+++ b/packages/web/src/routes/series/[series_id]/+page.ts
@@ -0,0 +1,5 @@
+export function load({ params }) {
+  return {
+    series_id: parseInt(params.series_id)
+  }
+}
diff --git a/packages/web/src/routes/series/[series_id]/components/Footer.svelte b/packages/web/src/routes/series/[series_id]/components/Footer.svelte
new file mode 100644
index 00000000..75c60412
--- /dev/null
+++ b/packages/web/src/routes/series/[series_id]/components/Footer.svelte
@@ -0,0 +1,91 @@
+<script lang="ts">
+  import * as theme from '$lib/theme.ts'
+  import type { SeriesController } from '../controller.ts'
+
+  let {controller, height = $bindable()}: {controller: SeriesController, height: number} = $props()
+  const runes = controller.runes
+
+
+  function human_readable_number(n: number) {
+    const number_string = n.toString()
+    const number_groups: string[] = []
+    let current_group: string = ''
+    for (const digit of Array.from(number_string).reverse()) {
+      current_group += digit
+      if (current_group.length >= 3) {
+        number_groups.push(current_group)
+        current_group = ''
+      }
+    }
+    if (current_group) {
+      number_groups.push(current_group)
+    }
+    return Array.from(number_groups.join(',')).reverse().join('')
+  }
+</script>
+
+<style>
+  .slider-handle::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+    background: var(--slider-thumb-color);
+  }
+  .slider-handle::-moz-range-thumb {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+    background: var(--slider-thumb-color);
+  }
+  .slider-handle::-moz-range-thumb:hover {
+    background: var(--slider-thumb-color-hover);
+  }
+</style>
+
+<footer
+  class="
+  bg-gray-700 items-center px-2 py-1
+  text-slate-900 border-t border-t-[2px] border-gray-800"
+  bind:clientHeight={height}
+>
+
+  <div class="grid grid-cols-[1fr_auto_auto] gap-4 justify-between">
+    <div class="w-full grid grid-cols-[auto_1fr_auto] gap-4 items-center" style="--slider-thumb-color: {theme.colors.green[300]}; --slider-thumb-color-hover: {theme.colors.green[500]}">
+      <label for="thumbnail-size">Thumbnail Size</label>
+      <input
+        class="appearance-none h-[7px] rounded-full bg-gray-800 slider-handle"
+        name="thumbnail-size"
+        type="range"
+        min={50}
+        max={500}
+        value={runes.settings.ui.media_list.thumbnail_size}
+        oninput={e => {
+          runes.settings.set('ui.media_list.thumbnail_size', e.target.value)
+        }}>
+      <span>{runes.settings.ui.media_list.thumbnail_size}px</span>
+    </div>
+
+    <div>
+      <button
+        title="Toggle thumbnail shape"
+        class="rounded-sm bg-gray-800 px-2 text-slate-400 hover:bg-gray-600"
+        onclick={e => {
+          const updated_shape = runes.settings.ui.media_list.thumbnail_shape === 'square'
+            ? 'original'
+            : 'square'
+          runes.settings.set('ui.media_list.thumbnail_shape', updated_shape)
+        }}
+      >{runes.settings.ui.media_list.thumbnail_shape}</button>
+    </div>
+
+    <span class="">
+      Total results {human_readable_number(runes.series_list.total)}
+    </span>
+  </div>
+</footer>
diff --git a/packages/web/src/routes/series/[series_id]/components/Header.svelte b/packages/web/src/routes/series/[series_id]/components/Header.svelte
new file mode 100644
index 00000000..0dd4e093
--- /dev/null
+++ b/packages/web/src/routes/series/[series_id]/components/Header.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import * as theme from '$lib/theme.ts'
+  import SearchParams from './SearchParams.svelte'
+  import type { SeriesController } from '../controller.ts'
+  import Icon from '$lib/components/Icon.svelte'
+  import { Filter, ChevronUp, ChevronDown } from '$lib/icons/mod.ts'
+  import TagAutoCompleteInput from "$lib/components/TagAutoCompleteInput.svelte";
+
+  let {controller, height = $bindable()}: {controller: SeriesController; height: number} = $props()
+  let { dimensions, queryparams } = controller.runes
+
+</script>
+
+<header class="drop-shadow-md bg-gray-700 flex justify-center border-b-slate-800 border-b-2 relative z-10" bind:clientHeight={height}>
+  <title>{queryparams.human_readable_summary || 'Forager'}</title>
+  <SearchParams {controller} />
+</header>
diff --git a/packages/web/src/routes/series/[series_id]/components/MediaDetailEntry.svelte b/packages/web/src/routes/series/[series_id]/components/MediaDetailEntry.svelte
new file mode 100644
index 00000000..7c78dd08
--- /dev/null
+++ b/packages/web/src/routes/series/[series_id]/components/MediaDetailEntry.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+  import * as datetime from '@std/datetime'
+  import type { Json } from '@andykais/ts-rpc/adapters/sveltekit.ts'
+
+  import { BrowseController } from '../controller.ts'
+  let {controller, ...props}: {
+    controller: BrowseController
+    label: string
+    content: string | number | Date | null | Json
+    type?: "text" | "datetime-local"
+    editable?: boolean
+    hide_if_null?: boolean
+  } = $props()
+
+  let value = $derived.by(() => {
+    if (props.content === null) return null
+
+    if (props.type === 'datetime-local') {
+      return datetime.format(new Date(props.content as string), 'yyyy-MM-ddTHH:mm')
+    }
+
+    return props.content
+  })
+
+  let display_inline = ['Views', 'Stars'].includes(props.label)
+</script>
+
+{#if !(props.hide_if_null && props.content === null)}
+  <div class={[
+    "py-1.5",
+    display_inline ? "grid grid-cols-[1fr_auto]" : ''
+  ]}>
+        <label class="text-green-50" for="{props.label}"><span>{props.label}</span></label>
+        <div>
+          {#if props.editable}
+            <input
+              class="bg-slate-400 w-full rounded-sm px-1 text-sm"
+              type={props.type ?? "text"}
+              value={value}
+              >
+          {:else}
+            <span
+              class="bg-slate-400 w-full inline rounded-sm px-1 text-sm text-nowrap select-all py-0.5"
+              >
+              {value}
+              </span>
+          {/if}
+        </div>
+  </div>
+{/if}
diff --git a/packages/web/src/routes/series/[series_id]/components/MediaDetails.svelte b/packages/web/src/routes/series/[series_id]/components/MediaDetails.svelte
new file mode 100644
index 00000000..e066086c
--- /dev/null
+++ b/packages/web/src/routes/series/[series_id]/components/MediaDetails.svelte
@@ -0,0 +1,174 @@
+<script lang="ts">
+  import * as path from '@std/path'
+  import type { Forager } from '@forager/core'
+  import Sidebar from '$lib/components/Sidebar.svelte'
+  import MediaDetailEntry from './MediaDetailEntry.svelte'
+  import TagAutoCompleteInput from '$lib/components/TagAutoCompleteInput.svelte'
+  import SearchLink from './SearchLink.svelte'
+  import Tag from '$lib/components/Tag.svelte'
+  import Icon from '$lib/components/Icon.svelte'
+  import {XCircle} from '$lib/icons/mod.ts'
+  import * as parsers from '$lib/parsers.ts'
+
+  import { SeriesController } from '../controller.ts'
+  let {controller}: {controller: SeriesController} = $props()
+  let {dimensions, media_selections, settings, queryparams} = controller.runes
+
+  let new_tag_str = $state<string>('')
+
+  type TagRecord = ReturnType<Forager['tag']['search']>['results'][0]
+  let sorted_tags: [string, TagRecord[]][] = $derived.by(() => {
+    const grouped_tags: Record<string, TagRecord[]> = {}
+    media_selections.current_selection.media_response?.tags.map(t => {
+      if (grouped_tags[t.group] === undefined) {
+        grouped_tags[t.group] = []
+      }
+
+      grouped_tags[t.group].push(t)
+    })
+
+    const entries =  Object.entries(grouped_tags).sort((a, b) => a[0].localeCompare(b[0]))
+
+    entries.sort((a, b) => {
+      const a_index = settings.ui.sidebar.tags.order.findIndex(match => {
+        return match.group === a[0]
+      })
+      const b_index = settings.ui.sidebar.tags.order.findIndex(match => {
+        return match.group === b[0]
+      })
+      if (a_index !== -1 && b_index !== -1) {
+        return a_index - b_index
+      } else if (a_index !== -1) {
+        return -1
+      } else if (b_index !== -1) {
+        return 1
+      }
+      return a[0].localeCompare(b[0])
+    })
+    return entries
+  })
+
+  controller.keybinds.component_listen({
+    ToggleSidebar: e => {
+      settings.set('ui.sidebar.hide', !settings.ui.sidebar.hide)
+    }
+  })
+</script>
+
+<Sidebar
+  height={dimensions.heights.media_list}
+  width={settings.ui.sidebar.size}
+  bind:hide={settings.ui.sidebar.hide}
+>
+  <form
+    class="pl-1 pr-3"
+    onsubmit={async e => {
+      e.preventDefault()
+      let media_info = undefined
+      let tags: {add: string[]} | undefined
+      if (new_tag_str) {
+        tags = {add: [new_tag_str]}
+      }
+      media_selections.current_selection.media_response!.update(media_info, tags)
+      new_tag_str = ''
+    }}
+    >
+    {#if media_selections.current_selection.media_response}
+      <MediaDetailEntry
+        {controller}
+        label="Views"
+        content={media_selections.current_selection.media_response.media_reference.view_count}/>
+
+      <MediaDetailEntry
+        {controller}
+        label="Stars"
+        content={media_selections.current_selection.media_response.media_reference.stars}/>
+
+      <label class="text-green-50" for="tags"><span>Tags</span></label>
+      {#each sorted_tags as tag_group_entry, tag_entry_index (tag_group_entry[0])}
+        {#each tag_group_entry[1] as tag, tag_index (tag.id)}
+          <div class="grid grid-cols-[1fr_auto] items-center gap-1 pb-1">
+            <SearchLink {controller} params={queryparams.merge({tags: parsers.Tag.encode(tag)})}>
+              <Tag show_group={false} {tag} />
+            </SearchLink>
+            <button
+              class="hover:cursor-pointer"
+              title="Remove"
+              type="button"
+              onclick={async e => {
+                await media_selections.current_selection.media_response.update(undefined, {remove: [`${tag.group}:${tag.name}`]})
+              }}>
+              <Icon class="fill-green-50 hover:fill-green-300" data={XCircle} size="18px" color="none" />
+            </button>
+          </div>
+        {/each}
+      {/each}
+      <TagAutoCompleteInput
+        {controller}
+        sort_by="updated_at"
+        bind:search_string={new_tag_str}
+        placeholder=""
+        kind="details"
+        input_classes="mt-2 bg-slate-400 w-full rounded-sm px-1 text-sm"
+      />
+      <input type="submit" class='hidden'>
+
+      <MediaDetailEntry
+        {controller}
+        editable
+        hide_if_null
+        label="Title"
+        content={media_selections.current_selection.media_response.media_reference.title}/>
+
+      <MediaDetailEntry
+        {controller}
+        editable
+        hide_if_null
+        label="Description"
+        content={media_selections.current_selection.media_response.media_reference.description}/>
+
+      <MediaDetailEntry
+        {controller}
+        editable
+        hide_if_null
+        label="Created"
+        type="datetime-local"
+        content={media_selections.current_selection.media_response.media_reference.source_created_at}/>
+
+      <!-- TODO we should support datetimes in @andykais/ts-rpc -->
+      <MediaDetailEntry
+        {controller}
+        editable
+        label="Added"
+        type="datetime-local"
+        content={media_selections.current_selection.media_response.media_reference.created_at}/>
+
+      <MediaDetailEntry
+        {controller}
+        hide_if_null
+        label="Source URL"
+        content={media_selections.current_selection.media_response.media_reference.source_url}/>
+
+      <MediaDetailEntry
+        {controller}
+        hide_if_null
+        label="Metadata"
+        content={media_selections.current_selection.media_response.media_reference.metadata}/>
+
+      {#if media_selections.current_selection.media_response.media_type === 'media_file'}
+        <MediaDetailEntry
+          {controller}
+          label="File"
+          content={media_selections.current_selection.media_response.media_file.filepath}/>
+
+        <MediaDetailEntry
+          {controller}
+          label="Filename"
+          content={path.basename(media_selections.current_selection.media_response.media_file.filepath)}/>
+      {/if}
+
+    {:else}
+      TODO: show tag summary
+    {/if}
+  </form>
+</Sidebar>
diff --git a/packages/web/src/routes/series/[series_id]/components/MediaList.svelte b/packages/web/src/routes/series/[series_id]/components/MediaList.svelte
new file mode 100644
index 00000000..3951bd50
--- /dev/null
+++ b/packages/web/src/routes/series/[series_id]/components/MediaList.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+  import Scroller from '$lib/components/Scroller.svelte'
+  import SearchResults from './SearchResults.svelte'
+  import type { SeriesController } from '../controller.ts'
+
+  let {controller}: {controller: SeriesController} = $props()
+  let media_list_element: HTMLElement
+
+  controller.keybinds.component_listen({
+    NextMedia: () => {
+      if (document.activeElement instanceof HTMLInputElement) {
+        if (media_list_element.contains(document.activeElement)) {}
+        else return
+      }
+      controller.runes.media_selections.next_media(controller.runes.series_list.results)
+    },
+    PrevMedia: () => {
+      if (document.activeElement instanceof HTMLInputElement) {
+        if (media_list_element.contains(document.activeElement)) {}
+        else return
+      }
+      controller.runes.media_selections.prev_media(controller.runes.series_list.results)
+    },
+
+    Star0: () => {
+      controller.runes.media_selections.current_selection.media_response?.star(0)
+    },
+    Star1: () => {
+      controller.runes.media_selections.current_selection.media_response?.star(1)
+    },
+    Star2: () => {
+      controller.runes.media_selections.current_selection.media_response?.star(2)
+    },
+    Star3: () => {
+      controller.runes.media_selections.current_selection.media_response?.star(3)
+    },
+    Star4: () => {
+      controller.runes.media_selections.current_selection.media_response?.star(4)
+    },
+    Star5: () => {
+      controller.runes.media_selections.current_selection.media_response?.star(5)
+    },
+  })
+</script>
+
+<div
+  bind:this={media_list_element}>
+  <Scroller
+    loading={controller.runes.series_list.loading}
+    more={() => controller.runes.series_list.paginate()}
+    class={[
+      "w-full focus:outline-none",
+       controller.runes.media_selections.current_selection.show ? "overflow-hidden" : "overflow-y-scroll",
+    ]}
+    style="height: {controller.runes.dimensions.heights.media_list}px"
+  >
+    <SearchResults {controller} />
+  </Scroller>
+</div>
diff --git a/packages/web/src/routes/series/[series_id]/components/MediaView.svelte b/packages/web/src/routes/series/[series_id]/components/MediaView.svelte
new file mode 100644
index 00000000..c5289601
--- /dev/null
+++ b/packages/web/src/routes/series/[series_id]/components/MediaView.svelte
@@ -0,0 +1,158 @@
+<script lang="ts">
+  import type { SeriesController } from '../controller.ts'
+
+  interface Props {
+    controller: SeriesController
+  }
+
+  // TODO wire this into settings
+  let show_controls = $state<boolean>(false);
+
+  controller.keybinds.component_listen({
+    Escape: e => {
+      dialog.close()
+      controller.runes.media_selections.close_media()
+    },
+    PlayPauseMedia: e => {
+      paused = !paused
+    },
+    OpenMedia: e => {
+      /*
+      // TODO we need to be aware of the focus when making this call. Currently this will take over hitting "Enter" on the search bar
+      media_selections.open_media()
+      */
+    },
+    ToggleMediaControls: async e => {
+      show_controls = !show_controls
+    },
+    CopyMedia: async e => {
+      if (media_selections.current_selection.media_response) {
+        if (media_selections.current_selection.media_response.media_type === 'media_file') {
+          await navigator.clipboard.writeText(media_selections.current_selection.media_response.media_file.filepath)
+        }
+      }
+    },
+  })
+
+  let {controller}: Props = $props()
+  const {media_selections} = controller.runes
+  let paused = $state(false)
+
+  let filmstrip_thumbnails
+  let filmstrip_height = 50
+
+  $effect(() => {
+    if (!dialog.open && media_selections.current_selection.show) {
+      dialog.show()
+    }
+  })
+
+  function video_loader(node: HTMLVideoElement) {
+    return {
+      update(video_source_url: string) {
+        animation_progress = 0
+        node.load()
+      }
+    }
+  }
+
+  let media_url = $derived.by(() => {
+    if (media_selections.current_selection.media_response?.media_type !== 'media_file') {
+      return
+    }
+    const escaped_path = media_selections.current_selection.media_response.media_file.filepath
+      // .replace(/$\//, '')
+      //.replaceAll('?', '%3F')
+    const escaped_url = `/files/media_file/${encodeURIComponent(escaped_path)}`
+    return escaped_url
+  })
+  $effect(() => {
+    if (media_url) {
+      animation_progress = 0
+    }
+  })
+
+
+  let dialog: HTMLDialogElement
+  let animation_width = $state(0)
+  let animation_progress = $state(0)
+</script>
+
+
+<dialog
+  class="absolute w-full z-10 outline-none"
+  style="height: {controller.runes.dimensions.heights.media_list}px;"
+  bind:this={dialog}
+  onclose={controller.runes.media_selections.close_media}>
+  <div class="flex items-center justify-center"
+  style="height: {controller.runes.dimensions.heights.media_list}px;"
+  >
+    {#if media_selections.current_selection.show && media_selections.current_selection.media_response}
+      {#if media_selections.current_selection.media_response.media_type === 'media_file'}
+        {#if media_selections.current_selection.media_response.media_file.media_type === 'IMAGE'}
+          <img
+            class="object-contain max-h-full"
+            src={media_url} alt="">
+        {:else if media_selections.current_selection.media_response.media_file.media_type === 'VIDEO'}
+          <video
+            bind:clientWidth={animation_width}
+            class="object-contain max-h-full outline-none"
+            autoplay
+            loop
+            bind:paused
+            bind:currentTime={animation_progress}
+            controls={show_controls}
+            use:video_loader={media_url}
+            >
+            <source src={media_url}>
+            <track kind="captions"/> <!-- this exists purely to quiet down an A11y rule -->
+          </video>
+          <progress
+            class="w-full h-1 absolute bottom-0"
+            style="width: {animation_width}px"
+            max={media_selections.current_selection.media_response.media_file.duration} value={animation_progress}></progress>
+          {#if controller.runes.settings.ui.media_view.filmstrip.enabled}
+            <div class="w-full flex flex-row justify-center gap-1 overflow-x-scroll" style="height: {controller.runes.settings.ui.media_view.filmstrip.thumbnail_size}px;">
+              {#each media_selections.current_selection.thumbnails.results as thumbnail}
+                <div class="h-full">
+                  <img class="h-full" src="/files/thumbnail{thumbnail.filepath}" alt=""></div>
+              {/each}
+            </div>
+          {/if}
+        {:else if media_selections.current_selection.media_response.media_file.media_type === 'AUDIO'}
+          <img
+            class="object-contain max-h-full"
+            src="/files/thumbnail{media_selections.current_selection.media_response.thumbnails.results[0].filepath}" alt="">
+          <audio
+            autoplay
+            loop
+          >
+            <source src={media_url}>
+          </audio>
+        {/if}
+      {:else}
+        unhandled media type {media_selections.current_selection.media_response.media_type}
+      {/if}
+    {/if}
+  </div>
+</dialog>
+
+<style>
+  dialog {
+    background-color: hsl(100 0% 0% / 45%);
+  }
+
+  progress {
+    background-color: initial;
+    -webkit-appearence:none;
+  }
+  progress::-webkit-progress-bar {
+    background-color: initial;
+  }
+  progress::-webkit-progress-value {
+    background-color: white;
+  }
+  progress::-moz-progress-bar {
+    background-color: white;
+  }
+</style>
diff --git a/packages/web/src/routes/series/[series_id]/components/SearchLink.svelte b/packages/web/src/routes/series/[series_id]/components/SearchLink.svelte
new file mode 100644
index 00000000..dd584447
--- /dev/null
+++ b/packages/web/src/routes/series/[series_id]/components/SearchLink.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import type {SeriesController} from '../controller.ts'
+
+  interface Props {
+    controller: SeriesController
+    params: SeriesController['runes']['queryparams']['DEFAULTS']
+    class: ClassValue
+  }
+  let {params, controller, children, ...props}: Props = $props()
+  const {queryparams} = controller.runes
+
+</script>
+
+<a
+  class={props.class}
+  href={queryparams.serialize(params)}
+  onclick={async e => {
+    if (e.ctrlKey || e.shiftKey) return
+    e.preventDefault()
+    await queryparams.goto(params)
+  }}
+>
+  {@render children?.()}
+</a>
diff --git a/packages/web/src/routes/series/[series_id]/components/SearchParams.svelte b/packages/web/src/routes/series/[series_id]/components/SearchParams.svelte
new file mode 100644
index 00000000..285b5748
--- /dev/null
+++ b/packages/web/src/routes/series/[series_id]/components/SearchParams.svelte
@@ -0,0 +1,170 @@
+<script lang="ts">
+  import SelectInput from '$lib/components/SelectInput.svelte'
+  import * as theme from '$lib/theme.ts'
+  import Icon from '$lib/components/Icon.svelte'
+  import { Filter, ChevronUp, ChevronDown, ArrowDown, ArrowUp } from '$lib/icons/mod.ts'
+  import TagAutoCompleteInput from "$lib/components/TagAutoCompleteInput.svelte";
+  import type { SeriesController } from "../controller.ts";
+  import StarInput from '$lib/components/StarInput.svelte'
+
+  let {controller}: {controller: SeriesController} = $props()
+
+  const {queryparams, media_selections, settings} = controller.runes
+
+  let params = $state<typeof queryparams.DEFAULTS>({...queryparams.DEFAULTS})
+  queryparams.popstate_listener(url_params => {
+    params = {...url_params}
+  })
+
+  async function update_search() {
+    await queryparams.submit(params)
+    media_selections.clear_current_selection()
+
+  }
+  const icon_color = theme.colors.gray[800]
+  const icon_size = "22px"
+</script>
+
+<form class="grid grid-rows-1 w-screen"
+  onsubmit={async e => {
+    e.preventDefault()
+    await update_search()
+  }}>
+  <div class="flex flex-col gap-y-2 p-3 justify-center items-center w-screen">
+    <div class="w-full grid grid-cols-[1fr_auto] gap-2">
+      <TagAutoCompleteInput
+        {controller}
+        bind:search_string={params.search_string}
+        contextual_query={/* TODO re-add queryparams.contextual_query */ null}
+        kind="search"
+        allow_multiple_tags />
+      <button
+        class="hover:cursor-pointer"
+        title="click to {settings.ui.search.advanced_filters.hide ? 'show' : 'hide'} advanced filters"
+        type="button"
+        onclick={e => {
+          settings.toggle('ui.search.advanced_filters.hide')
+        }}>
+        <Icon class="fill-gray-800 hover:fill-gray-600" data={Filter} size={icon_size} fill={icon_color} stroke={"none"} />
+      </button>
+    </div>
+
+    <div class="w-full grid grid-rows-2 justify-space-between items-center text-slate-950 gap-y-2"
+      style="display: {settings.ui.search.advanced_filters.hide ? 'none' : 'grid'}">
+      <div class="flex flex-row justify-between gap-8">
+        <div class="flex gap-1">
+          <select
+            id="sort_by"
+            name="sort_by"
+            bind:value={params.sort}
+            onchange={update_search}>
+            <option value="series_index">Series Index</option>
+            <option value="source_created_at">Created At</option>
+            <option value="created_at">Added On</option>
+            <option value="updated_at">Updated At</option>
+            <option value="view_count">View Count</option>
+            <option value="last_viewed_at">Last Viewed</option>
+          </select>
+          <button
+            class="hover:cursor-pointer"
+            title="order by ascending"
+            type="button"
+            onclick={e => {
+              if (params.order === 'asc') params.order = 'desc'
+              else params.order = 'asc'
+              update_search()
+            }}>
+            {#if params.order === 'asc'}
+              <Icon class="fill-gray-800 hover:fill-gray-600" data={ArrowUp} size={icon_size} fill={icon_color} stroke={"none"} />
+            {:else}
+              <Icon class="fill-gray-800 hover:fill-gray-600" data={ArrowDown} size={icon_size} fill={icon_color} stroke={"none"} />
+            {/if}
+          </button>
+        </div>
+
+        <SelectInput
+          options={[
+            {label: 'All', value: 'all'},
+            {label: 'Animated', value: 'animated'},
+            {label: 'Image',    value: 'image'},
+            {label: 'Video',    value: 'video'},
+            {label: 'Audio',    value: 'audio'},
+          ]}
+          bind:value={params.media_type}
+          onchange={update_search}
+        />
+
+        <button
+          class={[
+            'rounded-lg px-2 border border-2 border-gray-800 hover:border-gray-400',
+            params.unread_only
+              ? 'bg-gray-800 text-gray-400'
+              : ''
+          ]}
+          type="button"
+          onclick={e => {
+            params.unread_only = !params.unread_only
+            update_search()
+        }}
+          title="Show unread results only"
+        >
+          Unread
+        </button>
+
+        <div class="flex gap-2 text-gray-400">
+          <StarInput bind:value={params.stars} star={1} onclick={update_search} />
+          <StarInput bind:value={params.stars} star={2} onclick={update_search} />
+          <StarInput bind:value={params.stars} star={3} onclick={update_search} />
+          <StarInput bind:value={params.stars} star={4} onclick={update_search} />
+          <StarInput bind:value={params.stars} star={5} onclick={update_search} />
+          <button
+            type="button"
+            class="px-2 bg-gray-800 rounded-lg"
+            onclick={() => {
+              switch(params.stars_equality) {
+                /*
+                case 'lte': {
+                  params.stars_equality = 'eq'
+                  break
+                }
+                */
+                case '=': {
+                  params.stars_equality = '>='
+                  break
+                }
+                case '>=': {
+                  params.stars_equality = '='
+                  break
+                }
+                case undefined: {
+                  params.stars_equality = '='
+                  break
+                }
+                default: {
+                  throw new Error(`Unexpected params.stars_equality ${params.stars_equality}`)
+                }
+
+              }
+              update_search()
+            }}>
+            {params.stars_equality ?? '>='}
+          </button>
+        </div>
+
+      </div>
+
+      <div class="flex flex-row gap-8 justify-between">
+        <div class="flex gap-2">
+          <label class="" for="filepath">Filepath:</label>
+          <input
+            class="rounded-lg py-1 px-3 text-slate-100 bg-gray-800 text-sm"
+            name="filepath"
+            type="text"
+            placeholder="*.jpg..."
+            bind:value={params.filepath}>
+        </div>
+      </div>
+    </div>
+  </div>
+  <input type="submit" hidden />
+</form>
diff --git a/packages/web/src/routes/series/[series_id]/components/SearchResults.svelte b/packages/web/src/routes/series/[series_id]/components/SearchResults.svelte
new file mode 100644
index 00000000..773c14e5
--- /dev/null
+++ b/packages/web/src/routes/series/[series_id]/components/SearchResults.svelte
@@ -0,0 +1,143 @@
+<script lang="ts">
+  import type { SeriesController } from '../controller.ts'
+  import * as theme from '$lib/theme.ts'
+  import { focusable, scrollable } from '$lib/actions/mod.ts'
+  import Icon from '$lib/components/Icon.svelte'
+  import * as icons from '$lib/icons/mod.ts'
+
+  interface Props {
+    controller: SeriesController
+  }
+
+  let {controller}: Props = $props()
+  const {queryparams, settings, media_selections, series_list} = controller.runes
+
+  let tile_size = settings.ui.media_list.thumbnail_size
+  const icon_size = 14
+  const icon_color = theme.colors.green[200]
+
+  function human_readable_duration(seconds: number) {
+    if (seconds < 100) {
+      return `${seconds.toFixed(1)}s`
+    }
+    const minutes = seconds / 60
+    if (minutes < 60) {
+      return `${minutes.toFixed(1)}m`
+    }
+    const hours = minutes / 60
+    return `${hours.toFixed(2)}h`
+  }
+</script>
+
+<style>
+  .container-masonry {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(var(--thumbnail-size), 1fr));
+    justify-items: center;
+  }
+
+  .container-media-tile {
+    display: grid;
+    gap: 5px;
+    grid-template-rows: 1fr max-content max-content;
+    height: 100%;
+    width: 100%;
+    align-items: center;
+  }
+</style>
+
+
+
+<div class="container-masonry p-4" style="--thumbnail-size: {settings.ui.media_list.thumbnail_size}px">
+  {#each series_list.results as result, result_index}
+    <div>
+      <div
+        type="button"
+        class="inline-flex items-center justify-center p-1
+               outline-none"
+        use:scrollable={media_selections.current_selection.result_index === result_index}
+      >
+        <div
+          class="container-media-tile"
+          style="width:{settings.ui.media_list.thumbnail_size}px"
+        >
+          <div
+            class="flex justify-center items-center overflow-hidden focus:outline-none"
+            style="width:{settings.ui.media_list.thumbnail_size}px; height: {settings.ui.media_list.thumbnail_size}px"
+            onkeydown={e => {
+              if (e.key === 'Enter') {
+                media_selections.set_current_selection(result, result_index)
+              }
+            }}
+            role="button"
+            tabindex="0"
+            use:focusable={!media_selections.current_selection.show && media_selections.current_selection.result_index === result_index}
+            onclick={e => media_selections.set_current_selection(result, result_index)}
+          >
+            {#if settings.ui.media_list.thumbnail_shape === 'original'}
+              <img
+                class={[
+                  "shadow shadow-gray-700 rounded-md hover:shadow-slate-400 hover:border-slate-400 hover:border hover:border-2",
+                  result.img_fit_classes(),
+                  result_index !== media_selections.current_selection.result_index
+                    && "shadow-slate-900 shadow-green-300",
+                  result_index === media_selections.current_selection.result_index
+                    && "hover:border-slate-400 border-green-300 border border-2 hover:shadow-slate-400 shadow-green-300",
+                ]}
+                src="/files/thumbnail{result.preview_thumbnail.filepath}"
+                alt="/files/thumbnail{result.preview_thumbnail.filepath}"/>
+            {:else}
+              <img
+                class={[
+                  "w-full h-full object-cover shadow shadow-gray-700 rounded-md hover:shadow-slate-400 hover:border-slate-400 hover:border hover:border-2",
+                  result.img_fit_classes(),
+                  result_index !== media_selections.current_selection.result_index
+                    && "hover:shadow-slate-400 shadow-slate-900 shadow-green-300",
+                  result_index === media_selections.current_selection.result_index
+                    && "hover:border-slate-400 border-green-300 border border-2 hover:shadow-slate-400 shadow-green-300",
+                ]}
+                src="/files/thumbnail{result.preview_thumbnail.filepath}"
+                alt="/files/thumbnail{result.preview_thumbnail.filepath}"/>
+            {/if}
+          </div>
+
+          <!-- info chips -->
+          <div class="flex text-xs text-gray-400 justify-between  p-0.5">
+            {#if result.media_type === 'media_file'}
+              {#if result.media_file.media_type === 'VIDEO'}
+                <span class="flex">
+                  <Icon data={icons.PlayCircle} fill={icon_color} stroke="none" size={icon_size} />
+                  {#if result.media_file.audio}
+                    <Icon data={icons.Music} fill={icon_color} stroke="none" size={icon_size} />
+                  {/if}
+                </span>
+                <span>{human_readable_duration(result.media_file.duration)}</span>
+              {:else if result.media_file.media_type === 'IMAGE' && result.media_file.content_type === 'image/gif'}
+                <Icon data={icons.Gif} fill={icon_color} stroke="none" size={icon_size} />
+              {:else if result.media_file.media_type === 'IMAGE'}
+                <Icon data={icons.Photo} fill={icon_color} stroke="none" size={icon_size} />
+              {:else if result.media_file.media_type === 'AUDIO'}
+                <Icon data={icons.Music} fill={icon_color} stroke="none" size={icon_size} />
+              {:else}
+                unknown media type {result.media_file.media_type}
+              {/if}
+          {:else if result.media_type === 'media_series'}
+              <Icon data={icons.Copy} fill={icon_color} stroke="none" size={icon_size} />
+              <span>({result.media_reference.media_series_length})</span>
+          {:else}
+            UNEXPECTED MEDIA TYPE {result.media_type}
+          {/if}
+        </div>
+
+          <!-- series_index display -->
+          <div class="flex text-xs text-gray-300 justify-center p-0.5">
+            <span>#{result.series_index}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  {/each}
+</div>
+{#if series_list.loading}
+  Loading...
+{/if}
diff --git a/packages/web/src/routes/series/[series_id]/controller.ts b/packages/web/src/routes/series/[series_id]/controller.ts
new file mode 100644
index 00000000..1b7ca571
--- /dev/null
+++ b/packages/web/src/routes/series/[series_id]/controller.ts
@@ -0,0 +1,35 @@
+import type { Config } from '$lib/server/config.ts'
+import {BaseController} from '$lib/base_controller.ts'
+import {create_focuser, SettingsRune } from '$lib/runes/index.ts'
+import { create_dimensional_rune } from './runes/dimensions.svelte.ts'
+import { MediaSelectionsRune } from '../../browse/runes/media_selections.svelte.ts'
+import { SeriesQueryParamsRune } from './runes/queryparams.svelte.ts'
+import { SeriesListRune } from './runes/series_list.svelte.ts'
+
+
+class SeriesController extends BaseController {
+  runes: {
+    series_list: SeriesListRune
+    focus: ReturnType<typeof create_focuser>
+    dimensions: ReturnType<typeof create_dimensional_rune>
+    settings: SettingsRune
+    media_selections: MediaSelectionsRune
+    queryparams: SeriesQueryParamsRune
+  }
+
+  public constructor(config: Config, series_id: number) {
+    super(config)
+
+    const series_list_rune = new SeriesListRune(this.client, this.settings)
+    this.runes = {
+      series_list: series_list_rune,
+      focus: create_focuser(),
+      dimensions: create_dimensional_rune(),
+      settings: new SettingsRune(this.client, this.config),
+      media_selections: new MediaSelectionsRune(this.client, series_list_rune),
+      queryparams: new SeriesQueryParamsRune(this.client, series_list_rune, series_id),
+    }
+  }
+}
+
+export { SeriesController }
diff --git a/packages/web/src/routes/series/[series_id]/runes/dimensions.svelte.ts b/packages/web/src/routes/series/[series_id]/runes/dimensions.svelte.ts
new file mode 100644
index 00000000..e6d627da
--- /dev/null
+++ b/packages/web/src/routes/series/[series_id]/runes/dimensions.svelte.ts
@@ -0,0 +1,19 @@
+export function create_dimensional_rune() {
+  let heights = $state({
+    screen: 0,
+    header: 0,
+    media_list: 0,
+    footer: 0,
+  })
+
+  $effect(() => {
+    // 5 in here is just to fix an issue with heights being tool long causing a scrollbar to appear. It may have to do with borders or shadows
+    heights.media_list = heights.screen - heights.header - heights.footer - 5
+  })
+
+  return {
+    get heights() {
+      return heights
+    }
+  }
+}
diff --git a/packages/web/src/routes/series/[series_id]/runes/queryparams.svelte.ts b/packages/web/src/routes/series/[series_id]/runes/queryparams.svelte.ts
new file mode 100644
index 00000000..aecf0dae
--- /dev/null
+++ b/packages/web/src/routes/series/[series_id]/runes/queryparams.svelte.ts
@@ -0,0 +1,266 @@
+import type { inputs } from '@forager/core'
+import type { SeriesController } from '../controller.ts'
+import type { SeriesListRune } from './series_list.svelte.ts'
+import * as parsers from '$lib/parsers.ts'
+import {onMount} from 'svelte'
+import { pushState } from '$app/navigation';
+import {Rune} from '$lib/runes/rune.ts'
+
+interface State {
+  series_id: number
+  search_string: string
+  filepath: string | undefined
+  sort: inputs.SeriesSearch['sort_by']
+  unread_only: boolean
+  stars: number | undefined
+  stars_equality: 'lte' | 'gte' | 'eq' | undefined
+  order: 'desc' | 'asc'
+  media_type: string
+}
+
+const DEFAULTS: Omit<State, 'series_id'> = {
+  search_string: '',
+  filepath: undefined as string | undefined,
+  sort: 'series_index' as const,
+  order: 'asc' as const,
+  unread_only: false,
+  stars: undefined,
+  stars_equality: undefined,
+  media_type: 'all',
+}
+
+const NAME_MAP: Partial<Record<keyof State, string>> = {
+  search_string: 'tags',
+  unread_only: 'unread',
+  media_type: 'type',
+}
+const NAME_MAP_REVERSED = Object.fromEntries(Object.entries(NAME_MAP).map(([key, val]) => [val, key]))
+
+export class SeriesQueryParamsRune extends Rune {
+  public DEFAULTS = DEFAULTS
+  public current_url: State
+  public current_serialized: string = '?'
+
+  private search_rune: SeriesListRune
+  private popstate_listener_fn!: (params: State) => void
+  private series_id: number
+
+  public constructor(client: SeriesController['client'], search_rune: SeriesListRune, series_id: number) {
+    super(client)
+    this.search_rune = search_rune
+    this.series_id = series_id
+    this.current_url = $state({...DEFAULTS, series_id})
+
+    onMount(async () => {
+      const params = this.read(window.location)
+      this.popstate_listener_fn(params)
+      await this.submit_internal(params)
+
+      window.addEventListener('popstate', async e => {
+        const params = this.read(window.location)
+        this.popstate_listener_fn(params)
+        await this.submit_internal(params)
+      })
+    })
+  }
+
+  public read(url: URL) {
+    const params: State = {...DEFAULTS, series_id: this.series_id}
+
+    this.current_serialized = url.search
+    const queryparams = new URLSearchParams(url.search)
+    for (const [key, val] of queryparams.entries()) {
+      const params_key = NAME_MAP_REVERSED[key] ?? key
+      let deserialized_value = val
+      if (params_key === 'search_string') {
+        deserialized_value = val.replaceAll(',', ' ')
+      } else if (params_key === 'stars') {
+        deserialized_value = parseInt(val)
+      } else if (params_key === 'filepath') {
+        deserialized_value = decodeURIComponent(val)
+      }
+      params[params_key] = deserialized_value
+    }
+
+    this.current_url = {...params}
+    return params
+  }
+
+  public write_url(params: State) {
+    const serialized_params = this.serialize(params)
+
+    if (this.current_serialized !== serialized_params) {
+      this.current_serialized = serialized_params
+      this.current_url = {...params}
+      pushState(serialized_params, {})
+    }
+  }
+
+  public serialize(params: State) {
+    const queryparams = new Map()
+    for (const [key, value] of Object.entries(params)) {
+      if (key === 'series_id') continue // Don't put series_id in query params, it's in the URL path
+      if (value !== DEFAULTS[key]) {
+        const queryparam_key = NAME_MAP[key] ?? key
+        let serialized_value = value
+        if (key === 'search_string') {
+          serialized_value = encodeURIComponent(value.replaceAll(/\s/g, ','))
+            .replaceAll('%3A', ':')
+            .replaceAll('%2C', ',')
+        } else if (key === 'filepath') {
+          serialized_value = encodeURIComponent(value)
+        }
+        queryparams.set(queryparam_key, serialized_value)
+      }
+    }
+
+    const serialized_params = '?' + Array.from(queryparams.entries())
+      .map(([key, val]) => `${key}=${val}`)
+      .join('&')
+
+    return serialized_params
+  }
+
+  public async goto(params: State) {
+    this.popstate_listener_fn(params)
+    await this.submit(params)
+  }
+
+  public merge(partial_params: Partial<typeof NAME_MAP_REVERSED>) {
+    const params = {...this.current_url}
+    for (const [key, val] of Object.entries(partial_params)) {
+      const params_key: keyof State = NAME_MAP_REVERSED[key] ?? key
+
+      if (params_key === 'search_string') {
+        const search_strings = new Set(params['search_string'].split(/\s+/))
+        search_strings.add(val)
+        params.search_string = [...search_strings].join(' ').trim()
+      } else {
+        params[params_key] = val
+      }
+    }
+    return params
+  }
+
+  public extend(key: 'tag', value: string): State {
+    const params = {...this.current_url}
+
+    if (key === 'tag') {
+      const search_strings = new Set(params['search_string'].split(/\s+/))
+      search_strings.add(value)
+      params.search_string = [...search_strings].join(' ').trim()
+      return params
+    } else {
+      throw new Error('unimplemented')
+    }
+  }
+
+  public async submit(params: State) {
+    this.write_url(params)
+    await this.submit_internal(params)
+  }
+
+  private async submit_internal(params: State) {
+    const stars = params.stars
+    const stars_equality = params.stars_equality
+    const tags = params.search_string.split(' ').filter(t => t.length > 0)
+    const sort_by = params.sort
+    const order = params.order
+    const filepath = params.filepath
+
+    this.search_rune.clear()
+    const query: inputs.SeriesSearch['query'] = {
+      series_id: this.series_id,
+      tags,
+      filepath,
+    }
+
+    if (params.unread_only) {
+      if (params.unread_only === 'true' || params.unread_only === true) {
+        query.unread = true
+      }
+    }
+
+    if (stars !== undefined) {
+      query.stars = parseInt(stars)
+      query.stars_equality = stars_equality ?? 'gte'
+    }
+
+    switch(params.media_type) {
+      case 'all': {
+        // do nothing
+        break
+      }
+      case 'animated': {
+        query.animated = true
+        break
+      }
+      default: {
+        throw new Error(`Unimplemented media type ${params.media_type}`)
+      }
+    }
+
+    await this.search_rune.paginate({
+      type: 'series',
+      params: {
+        query: query,
+        sort_by,
+        order
+      }
+    })
+  }
+
+  public search_input(params: State) {
+    const tags = params.search_string.split(' ').filter(t => t.length > 0)
+    const sort_by = params.sort
+    const order = params.order
+    const filepath = params.filepath
+
+    const query: inputs.SeriesSearch['query'] = {
+      series_id: this.series_id,
+      tags,
+      filepath,
+      unread: params.unread_only,
+    }
+    switch(params.media_type) {
+      case 'all': {
+        // do nothing
+        break
+      }
+      case 'animated': {
+        query.animated = true
+        break
+      }
+      default: {
+        throw new Error(`Unimplemented media type ${params.media_type}`)
+      }
+    }
+
+    return {
+      type: 'series' as const,
+      params: {
+        query: query,
+        sort_by,
+        order
+      }
+    }
+  }
+
+  public get contextual_query() {
+    const params = this.search_input(this.current_url)
+    return params.params.query
+  }
+
+  public popstate_listener(fn: (params: State) => void) {
+    this.popstate_listener_fn = fn
+  }
+
+  public get human_readable_summary() {
+    let summary = ''
+    if (this.current_url.search_string) {
+      summary += this.current_url.search_string
+    }
+
+    return summary
+  }
+}
diff --git a/packages/web/src/routes/series/[series_id]/runes/series_list.svelte.ts b/packages/web/src/routes/series/[series_id]/runes/series_list.svelte.ts
new file mode 100644
index 00000000..ab54ad45
--- /dev/null
+++ b/packages/web/src/routes/series/[series_id]/runes/series_list.svelte.ts
@@ -0,0 +1,88 @@
+import {Rune} from '$lib/runes/rune.ts'
+import type { Forager } from '@forager/core'
+import { MediaViewRune } from '$lib/runes/index.ts'
+
+
+type Result = ReturnType<Forager['series']['search']>
+
+interface SeriesSearchInput {
+  type: 'series'
+  params: Parameters<Forager['series']['search']>[0]
+}
+
+export type Input = SeriesSearchInput
+
+interface SeriesListState {
+  loading: boolean
+  content: Result | null
+  results: MediaViewRune[]
+}
+
+export class SeriesListRune extends Rune {
+  #saved_params: {} | undefined
+  #prev_query_hash: string = ''
+  #fetch_count = 0
+  #has_more = true
+  #cursor: Result['cursor'] = undefined
+  #state = $state<SeriesListState>({
+    loading: true, // empty state acts like it is loading by default
+    content: null,
+    results: []
+  })
+
+  get loading() { return this.#state.loading }
+
+  get content(): Result | null { return this.#state.content }
+
+  get results(): Result['results'] { return this.#state.results }
+
+  get total() { return this.#state.content?.total ?? 0 }
+
+  clear() {
+    this.#has_more = true
+    this.#cursor = undefined
+    this.#fetch_count = 0
+    this.#saved_params = undefined
+    this.#state = {
+      loading: false,
+      results: [],
+      content: null
+    }
+  }
+
+  async paginate(params?: Input) {
+    this.#saved_params = {...this.#saved_params, ...params?.params}
+    if (this.#fetch_count > 0 && this.#state.loading) return
+
+    if (!this.#has_more) return
+
+    this.#fetch_count ++
+    this.#state.loading = true
+
+    let fetch_params: Input['params'] | undefined = this.#saved_params
+    if (this.#cursor !== undefined) {
+      fetch_params = {...fetch_params, cursor: this.#cursor} as any
+    }
+
+    const content: Result = await this.client.forager.series.search(fetch_params)
+
+    const results = content.results.map(result => {
+      return MediaViewRune.create(this.client, result, fetch_params)
+    })
+
+    this.#cursor = content.cursor
+    if (!this.#cursor) {
+      this.#has_more = false
+    }
+    this.#state = {
+      content: content,
+      results: this.#state.results.concat(results),
+      loading: false,
+    }
+
+    const query_hash = JSON.stringify(fetch_params.query)
+    if (this.#prev_query_hash !== query_hash) {
+      this.#prev_query_hash = query_hash
+    }
+  }
+}