diff --git a/.forgejo/workflows/build.yaml b/.forgejo/workflows/build.yaml
new file mode 100644
index 0000000..1b6ba8f
--- /dev/null
+++ b/.forgejo/workflows/build.yaml
@@ -0,0 +1,16 @@
+on:
+  workflow_dispatch:
+  push:
+
+jobs:
+  build:
+    runs-on: docker
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 'latest'
+          check-latest: true
+          cache: 'yarn'
+      - run: |
+          yarn build
diff --git a/astro.config.mjs b/astro.config.mjs
index f36ecd5..eceea68 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -59,8 +59,7 @@ export default defineConfig({
     '/studio/[slug]': { status: 307, destination: '/maintenance' },
     '/studio/list': { status: 307, destination: '/maintenance' },
     '/holy12': { status: 307, destination: '/maintenance' },
-    '/request': { status: 307, destination: '/maintenance' },
-    '/search': { status: 307, destination: '/maintenance' }
+    '/request': { status: 307, destination: '/maintenance' }
   },
   security: {
     checkOrigin: false
diff --git a/prisma/migrations/20250315025817_add_display_name/migration.sql b/prisma/migrations/20250315025817_add_display_name/migration.sql
new file mode 100644
index 0000000..d81b774
--- /dev/null
+++ b/prisma/migrations/20250315025817_add_display_name/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE `users` ADD COLUMN `displayUsername` VARCHAR(191) NOT NULL DEFAULT 'Default display name';
diff --git a/prisma/migrations/20250315153419_full_index_for_album_search/migration.sql b/prisma/migrations/20250315153419_full_index_for_album_search/migration.sql
new file mode 100644
index 0000000..0104251
--- /dev/null
+++ b/prisma/migrations/20250315153419_full_index_for_album_search/migration.sql
@@ -0,0 +1,2 @@
+-- CreateIndex
+CREATE FULLTEXT INDEX `albums_title_subTitle_idx` ON `albums`(`title`, `subTitle`);
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index eb3efd6..d6d1f7a 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -153,6 +153,8 @@ model albums {
   relatedAlbums   related_album[]        @relation("related_album_albumIdToalbums")
   relatedTo       related_album[]        @relation("related_album_relatedIdToalbums")
   stores          stores[]
+
+  @@fulltext([title, subTitle])
 }
 
 model animation {
@@ -402,14 +404,15 @@ model submissions {
 }
 
 model users {
-  id            String   @id @db.VarChar(255)
-  name          String   @db.VarChar(20)
-  username      String   @unique @db.VarChar(255)
-  email         String?  @unique @db.VarChar(255)
-  emailVerified Boolean
-  createdAt     DateTime @db.DateTime(0)
-  updatedAt     DateTime @db.DateTime(0)
-  image         String?  @db.VarChar(255)
+  id              String   @id @db.VarChar(255)
+  name            String   @db.VarChar(20)
+  username        String   @unique @db.VarChar(255)
+  displayUsername String   @default("Default display name")
+  email           String?  @unique @db.VarChar(255)
+  emailVerified   Boolean
+  createdAt       DateTime @db.DateTime(0)
+  updatedAt       DateTime @db.DateTime(0)
+  image           String?  @db.VarChar(255)
 
   roles       User_Role[]
   histories   albumHistories[]
diff --git a/src/components/Header.astro b/src/components/Header.astro
index f5bf8c5..af839bb 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -11,6 +11,8 @@ import Toggler from './header/Toggler.astro'
 import NavButton from './header/NavButton.astro'
 import LoginNav from './header/LoginNav.astro'
 import prismaClient from 'utils/prisma-client.js'
+import { Icon } from 'astro-icon/components'
+import SearchBar from './search/SearchBar.astro'
 
 const { value: bannerId } = (await prismaClient.config.findUnique({ where: { name: 'banner' } })) ?? {}
 const { value: bannerPosition } = (await prismaClient.config.findUnique({ where: { name: 'banner-position' } })) ?? {}
@@ -42,7 +44,7 @@ const { session } = Astro.locals
       <LoginNav />
     </div>
   </div>
-  <nav class='relative w-full md:h-[55px] bg-dark z-40'>
+  <div class='relative w-full md:h-[55px] bg-dark z-40'>
     <Toggler>
       <a href='/'><NavButton>{m.home()}</NavButton></a>
       <a href='/last-added'><NavButton>{m.lastaddednav()}</NavButton></a>
@@ -95,6 +97,8 @@ const { session } = Astro.locals
           </>
         ) : null
       }
+
+      <SearchBar />
     </Toggler>
-  </nav>
+  </div>
 </header>
diff --git a/src/components/header/NavButton.astro b/src/components/header/NavButton.astro
index ede444c..f1b2b95 100644
--- a/src/components/header/NavButton.astro
+++ b/src/components/header/NavButton.astro
@@ -1,8 +1,5 @@
 ---
-import Button from '../Button'
-import clsx from 'clsx'
-
-const { class: className } = Astro.props
+const { class: className, ...rest } = Astro.props
 ---
 
 <button
@@ -10,6 +7,7 @@ const { class: className } = Astro.props
     'w-full md:w-fit md:h-full bg-dark hover:bg-gray py-3.5 md:py-1 px-2 rounded-none text-left md:text-center',
     className
   ]}
+  {...rest}
 >
   <slot />
 </button>
diff --git a/src/components/header/Toggler.astro b/src/components/header/Toggler.astro
index 8c81a6a..fb5a1ce 100644
--- a/src/components/header/Toggler.astro
+++ b/src/components/header/Toggler.astro
@@ -2,17 +2,11 @@
 import { Icon } from 'astro-icon/components'
 ---
 
-<nav-toggler
-  class='flex flex-col md:flex-row max-[990px]:justify-center min-[990px]:ps-20 size-full'
->
+<nav-toggler class='flex flex-col md:flex-row max-[990px]:justify-center min-[990px]:px-12 size-full'>
   <div class='md:hidden h-[52px]'>
-    <Icon
-      id='nav-toggler'
-      class='py-3.5 px-3.5 h-full w-auto fill-white cursor-pointer'
-      name='hamburger'
-    />
+    <Icon id='nav-toggler' class='py-3.5 px-3.5 h-full w-auto fill-white cursor-pointer' name='hamburger' />
   </div>
-  <div class='nav-items hidden md:block'>
+  <div class='nav-items hidden md:flex w-full'>
     <slot />
   </div>
 </nav-toggler>
diff --git a/src/components/search/AlbumSearch.astro b/src/components/search/AlbumSearch.astro
new file mode 100644
index 0000000..6016d99
--- /dev/null
+++ b/src/components/search/AlbumSearch.astro
@@ -0,0 +1,72 @@
+---
+import type { Prisma } from '@prisma/client'
+import type { DefaultArgs } from '@prisma/client/runtime/library'
+import { Image } from 'astro:assets'
+
+import prismaClient from 'utils/prisma-client'
+
+interface Props {
+  query: string
+}
+
+const take = 20
+const { query } = Astro.props
+const findQuery: Prisma.albumsFindManyArgs = {
+  select: { title: true, releaseDate: true, id: true },
+  where: {
+    OR: [
+      {
+        title: {
+          search: query
+            .toLowerCase()
+            .split('_')
+            .map((w) => `+${w}`)
+            .join(' ')
+        }
+      },
+      {
+        subTitle: {
+          search: query
+            .toLowerCase()
+            .split('_')
+            .map((w) => `+${w}`)
+            .join(' ')
+        }
+      }
+    ]
+  },
+  orderBy: { publishedAt: 'desc' }
+}
+const countQuery: Prisma.albumsCountArgs<DefaultArgs> = {
+  where: findQuery.where
+}
+
+const [count, search] = await Promise.all([
+  prismaClient.albums.count(countQuery),
+  prismaClient.albums.findMany({ ...findQuery, take })
+])
+---
+
+<div class='text-xl'>Albums ({count}) {count > take ? `/ Showing first ${take} results` : null}</div>
+<div class='grid sm:grid-cols-1 md:grid-cols-3 mt-1.5 gap-4'>
+  {
+    search.map((album) => (
+      <a class='flex bg-gray h-40 group hover:no-underline' href={`/album/${album.id}`}>
+        <div class='h-full w-40 shrink-0'>
+          <Image
+            class='object-cover'
+            src={`https://cdn.sittingonclouds.net/album/${album.id}.png`}
+            alt={`${album.title} cover`}
+            quality='low'
+            height={160}
+            width={160}
+          />
+        </div>
+        <div class='flex flex-col p-2.5 justify-center text-left'>
+          <div class=' text-link group-hover:underline'>{album.title}</div>
+          <div class='mt-0.5'>{album.releaseDate?.toISOString().split('T')[0]}</div>
+        </div>
+      </a>
+    ))
+  }
+</div>
diff --git a/src/components/search/SearchBar.astro b/src/components/search/SearchBar.astro
new file mode 100644
index 0000000..19cf271
--- /dev/null
+++ b/src/components/search/SearchBar.astro
@@ -0,0 +1,52 @@
+---
+import { Icon } from 'astro-icon/components'
+import NavButton from 'components/header/NavButton.astro'
+import { getRandom } from 'utils/form'
+
+const placeholders = ['Tekken', 'Kingdom Hearts', 'The World Ends with You', 'Persona', 'Splatoon']
+const placeholder = getRandom(placeholders)
+---
+
+<NavButton id='search-open' class='px-3.5 ml-auto' style={{ width: '55px', height: '55px' }}>
+  <Icon name='search' class='size-full' />
+</NavButton>
+<div id='search-bar' class='absolute bg-gray-hover/90 left-0 w-full h-full hidden text-white px-12 text-xl'>
+  <form id='search-form' class='grow pe-4'>
+    <input class='h-full w-full' type='text' placeholder={placeholder} required name='query' />
+  </form>
+  <NavButton id='search-close' class='shrink-0' style={{ width: '55px', height: '55px', backgroundColor: 'unset' }}>
+    <Icon name='close' class='size-full stroke-white' />
+  </NavButton>
+</div>
+
+<script>
+  const openButton = document.getElementById('search-open')
+  const searchBar = document.getElementById('search-bar')
+  const searchForm = document.getElementById('search-form') as HTMLFormElement
+  const closeButton = document.getElementById('search-close')
+
+  openButton?.addEventListener('click', () => {
+    searchBar?.classList.add('flex')
+    searchBar?.classList.remove('hidden')
+
+    openButton?.classList.add('hidden')
+    openButton?.classList.remove('block')
+  })
+
+  closeButton?.addEventListener('click', () => {
+    searchBar?.classList.add('hidden')
+    searchBar?.classList.remove('flex')
+
+    openButton?.classList.add('block')
+    openButton?.classList.remove('hidden')
+  })
+
+  searchForm?.addEventListener('submit', (ev: Event) => {
+    ev.preventDefault()
+    const formData = new FormData(searchForm)
+    const url = new URL('/search', window.location.origin)
+    url.searchParams.append('q', formData.get('query') as string)
+
+    window.location.href = url.toString()
+  })
+</script>
diff --git a/src/img/icons/close.svg b/src/img/icons/close.svg
new file mode 100644
index 0000000..ee1290f
--- /dev/null
+++ b/src/img/icons/close.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_429_11083)">
+<path d="M7 7.00006L17 17.0001M7 17.0001L17 7.00006" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_429_11083">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
\ No newline at end of file
diff --git a/src/img/icons/search.svg b/src/img/icons/search.svg
new file mode 100644
index 0000000..a0a56c5
--- /dev/null
+++ b/src/img/icons/search.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 6C13.7614 6 16 8.23858 16 11M16.6588 16.6549L21 21M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/src/pages/api/album/create.ts b/src/pages/api/album/create.ts
index c43d5fe..5bce3e9 100644
--- a/src/pages/api/album/create.ts
+++ b/src/pages/api/album/create.ts
@@ -6,7 +6,7 @@ import { AlbumStatus } from '@prisma/client'
 import { Status, parseForm, slug } from 'utils/form'
 import { writeImg, getImgColor } from 'utils/img'
 import { handleComplete } from 'integrations/requestCat'
-import { CreateAlbum } from 'schemas/album'
+import { AlbumSchema } from 'schemas/album'
 
 export const POST: APIRoute = async ({ request, locals }) => {
   const { session, permissions, user } = locals
diff --git a/src/pages/search.astro b/src/pages/search.astro
new file mode 100644
index 0000000..f90c507
--- /dev/null
+++ b/src/pages/search.astro
@@ -0,0 +1,18 @@
+---
+import AlbumSearch from 'components/search/AlbumSearch.astro'
+import BaseLayout from 'layouts/base.astro'
+
+const query = Astro.url.searchParams.get('q')
+if (!query) return Astro.redirect(404)
+---
+
+<BaseLayout>
+  <div class='w-full bg-dark'>
+    <div class='flex max-w-[1200px] mx-auto justify-center px-8 py-3 flex-col'>
+      <div class='py-4 px-4 bg-gray text-3xl text- w-full font-normal mt-2'>Search results for: {query}</div>
+      <div class='mt-5'>
+        <AlbumSearch query={query} />
+      </div>
+    </div>
+  </div>
+</BaseLayout>
diff --git a/src/schemas/album.ts b/src/schemas/album.ts
index 7102683..f9ef39b 100644
--- a/src/schemas/album.ts
+++ b/src/schemas/album.ts
@@ -15,7 +15,7 @@ export const DownloadInput = s.object({
   links: s.defaulted(s.array(LinkInput), [])
 })
 
-export const CreateAlbum = s.object({
+export const AlbumSchema = s.object({
   cover: s.instance(File),
   title: s.optional(s.string()),
   subTitle: s.optional(s.string()),
diff --git a/src/utils/form.ts b/src/utils/form.ts
index bf8042f..2ae18b4 100644
--- a/src/utils/form.ts
+++ b/src/utils/form.ts
@@ -21,3 +21,8 @@ export async function parseForm(request: Request) {
   const data = JSON.parse(dataInput)
   return { ...data, ...rest }
 }
+
+export function getRandom<T>(array: T[]): T {
+  const randomIndex = Math.floor(Math.random() * array.length)
+  return array[randomIndex]
+}