diff --git a/src/components/CustomInput.tsx b/src/components/CustomInput.tsx
deleted file mode 100644
index a916f25..0000000
--- a/src/components/CustomInput.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from "react"
-import * as Form from "@radix-ui/react-form"
-import type { UseFormRegister } from "react-hook-form"
-import type { Inputs } from "./DownloadModal.tsx"
-
-export const CustomInput = React.forwardRef<
-  HTMLInputElement,
-  {
-    label: string
-    placeholder: string
-    errorMessage?: string
-    match?:
-      | "valueMissing"
-      | "badInput"
-      | "patternMismatch"
-      | "rangeOverflow"
-      | "rangeUnderflow"
-      | "stepMismatch"
-      | "tooLong"
-      | "tooShort"
-      | "typeMismatch"
-      | "valid"
-  } & ReturnType<UseFormRegister<Inputs>>
->(({ onChange, onBlur, name, label, placeholder, match, errorMessage }, ref) => (
-  <Form.Field name={name} className="flex flex-col gap-2">
-    <Form.Label>{label}</Form.Label>
-    <Form.Control asChild>
-      <input
-        name={name}
-        onChange={onChange}
-        onBlur={onBlur}
-        placeholder={placeholder}
-        ref={ref}
-        required
-      />
-    </Form.Control>
-    <Form.Message className="text-primary-300" match="valueMissing">
-      Please enter your {label}
-    </Form.Message>
-    {match !== undefined && (
-      <>
-        <Form.Message match={match}>{errorMessage}</Form.Message>
-      </>
-    )}
-  </Form.Field>
-))
diff --git a/src/components/CustomTextarea.tsx b/src/components/CustomTextarea.tsx
deleted file mode 100644
index a6570c3..0000000
--- a/src/components/CustomTextarea.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from "react"
-import * as Form from "@radix-ui/react-form"
-import type { UseFormRegister } from "react-hook-form"
-import type { Inputs } from "./DownloadModal.tsx"
-
-export const CustomTextarea = React.forwardRef<
-  HTMLTextAreaElement,
-  {
-    label: string
-    placeholder: string
-  } & ReturnType<UseFormRegister<Inputs>>
->(({ onChange, onBlur, name, label, placeholder }, ref) => (
-  <Form.Field name={name} className="flex flex-col gap-2">
-    <Form.Label>{label}</Form.Label>
-    <Form.Control asChild>
-      <textarea
-        rows={4}
-        name={name}
-        ref={ref}
-        onChange={onChange}
-        onBlur={onBlur}
-        className="text-gray-400 text-sm font-medium outline-none border-b-2 w-full"
-        placeholder={placeholder}
-        required
-      />
-    </Form.Control>
-    <Form.Message className="text-primary-300" match="valueMissing">
-      Please enter your {label}
-    </Form.Message>
-  </Form.Field>
-))
diff --git a/src/components/DownloadModal.tsx b/src/components/DownloadModal.tsx
index fab0602..7ee3cd8 100644
--- a/src/components/DownloadModal.tsx
+++ b/src/components/DownloadModal.tsx
@@ -3,9 +3,9 @@ import * as Dialog from "@radix-ui/react-dialog"
 import * as Form from "@radix-ui/react-form"
 import { Cross2Icon, DownloadIcon, PlusIcon } from "@radix-ui/react-icons"
 import { useForm, Controller, type SubmitHandler } from "react-hook-form"
-import { CustomInput } from "./CustomInput.tsx"
-import { CustomTextarea } from "./CustomTextarea.tsx"
+import { Textarea } from "./Textarea.tsx"
 import Button from "./Button.tsx"
+import { Input } from "./Input.tsx"
 
 export interface Inputs {
   name: string
@@ -65,17 +65,18 @@ const DownloadModal: React.FC<DownloadModalProps> = ({ filesToDownload }) => {
               name="name"
               control={control}
               render={() => (
-                <CustomInput label="Name" placeholder="Heather Yu" {...register("name")} />
+                <Input label="Name" placeholder="Heather Yu" {...register("name")} required />
               )}
             />
             <Controller
               name="institution"
               control={control}
               render={() => (
-                <CustomInput
+                <Input
                   label="Institution"
                   placeholder="Brown University"
                   {...register("institution")}
+                  required
                 />
               )}
             />
@@ -83,12 +84,13 @@ const DownloadModal: React.FC<DownloadModalProps> = ({ filesToDownload }) => {
               name="email"
               control={control}
               render={() => (
-                <CustomInput
+                <Input
                   label="Email"
                   placeholder="heather@example.com"
                   match="typeMismatch"
                   errorMessage="Please provide a valid email"
                   {...register("email")}
+                  required
                 />
               )}
             />
@@ -96,10 +98,11 @@ const DownloadModal: React.FC<DownloadModalProps> = ({ filesToDownload }) => {
               name="description"
               control={control}
               render={() => (
-                <CustomTextarea
+                <Textarea
                   label="Description"
                   placeholder="Why you need this file..."
                   {...register("description")}
+                  required
                 />
               )}
             />
diff --git a/src/components/Header.astro b/src/components/Header.astro
index ad940f6..299bf29 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,6 +1,6 @@
 ---
-import HeaderLink from "./HeaderLink.astro"
 import { SITE_TITLE, LINKS } from "../consts"
+import HeaderLink from "./HeaderLink.astro"
 
 const { isHidden = true } = Astro.props
 const pathname = Astro.url.pathname
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
new file mode 100644
index 0000000..dc14ca1
--- /dev/null
+++ b/src/components/Input.tsx
@@ -0,0 +1,34 @@
+import * as Form from "@radix-ui/react-form"
+import React, { type ReactNode } from "react"
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label: string
+  name: string
+  icon?: ReactNode
+  match?: Form.FormMessageProps["match"]
+  errorMessage?: string
+}
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ label, name, icon, match, errorMessage, ...delegated }: InputProps, ref) => {
+    return (
+      <Form.Field name={name} className="flex flex-col gap-2">
+        <Form.Label>{label}</Form.Label>
+        <Form.Control asChild>
+          <div className="flex items-center gap-2 bg-white rounded-full shadow-inner min-w-60 w-max py-3 px-5 focus-within:shadow-inner-focus">
+            <span className="text-neutral-300 w-5 h-5">{icon}</span>
+            <input {...delegated} ref={ref} />
+          </div>
+        </Form.Control>
+        <Form.Message className="text-primary-300" match="valueMissing">
+          Please enter your {label}
+        </Form.Message>
+        {match !== undefined && (
+          <>
+            <Form.Message match={match}>{errorMessage}</Form.Message>
+          </>
+        )}
+      </Form.Field>
+    )
+  }
+)
diff --git a/src/components/Publications.tsx b/src/components/Publications.tsx
index 97f9721..8ac5d13 100644
--- a/src/components/Publications.tsx
+++ b/src/components/Publications.tsx
@@ -1,8 +1,11 @@
 import React, { useState } from "react"
 import Select from "react-select"
 import type { InferEntrySchema } from "astro:content"
+import { Form } from "@radix-ui/react-form"
 import type { Classification } from "../content/config.ts"
 import PubPlaceholder from "./svg/PubPlaceholder.tsx"
+import { Input } from "./Input.tsx"
+import { MagnifyingGlassIcon } from "@radix-ui/react-icons"
 
 interface PubProps {
   publications: InferEntrySchema<"publications">[]
@@ -32,61 +35,71 @@ const PublicationSection: React.FC<PubProps> = ({ publications }) => {
       classificationFilter.map((item) => item.value).includes(pub.classification) &&
       pub.citation.toLowerCase().includes(searchInput.toLowerCase())
   )
+
   return (
     <>
-      <section className="flex flex-col lg:flex-row gap-4 py-14">
+      <Form className="flex flex-col lg:flex-row gap-4 justify-center mb-24">
         <div>
-          <label className="pl-1">Search for a Publication</label>
-          <input
-            type="text"
-            placeholder="🔍 Search here"
-            onChange={handleChange}
+          <Input
+            label="Search for a publication"
+            name="pubQuery"
+            icon={<MagnifyingGlassIcon className="h-full w-full" />}
+            placeholder="Durand, Jorge..."
             value={searchInput}
-            className="min-w-[460px]"
+            onChange={handleChange}
+            className="min-w-96"
           />
         </div>
-        <div>
-          <label className="pl-1">Show</label>
+        <div className="space-y-2">
+          <label className="pl-1" htmlFor="classification">
+            Show
+          </label>
           <Select
+            id="classification"
             options={classificationOptions}
             isMulti
             isSearchable={false}
             closeMenuOnSelect={false}
             defaultValue={classificationOptions}
+            unstyled
+            className="cursor-pointer"
+            classNames={{
+              container: () =>
+                "cursor-pointer bg-white rounded-full shadow-inner min-w-60 w-max py-3 px-5",
+              placeholder: () => "cursor-pointer text-neutral-300",
+              indicatorsContainer: () => "cursor-pointer text-neutral-300 hover:bg-neutral-200",
+              multiValueRemove: () => "hover:bg-neutral-100",
+              valueContainer: () => "gap-2 cursor-pointer",
+              multiValue: () =>
+                "cursor-pointer flex items-center gap-2 text-primary-500 bg-neutral-50 px-2 rounded-lg",
+              menu: () => "cursor-pointr rounded-lg bg-white p-2",
+              // See CSS file for other overrides
+              option: () => "rounded-sm p-1 hover:text-primary-500 hover:bg-neutral-50",
+            }}
             styles={{
-              control: (baseStyles) => ({
-                ...baseStyles,
-                minWidth: "526px",
-                borderRadius: "9999px",
-                background: "#FAFAFA",
-                boxShadow:
-                  "var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)",
-                paddingTop: ".75rem",
-                paddingBottom: ".75rem",
-                paddingLeft: "2rem",
-                paddingRight: "2rem",
-              }),
+              control: (baseStyles) => ({ ...baseStyles, minHeight: 0 }),
+              option: (baseStyles) => ({ ...baseStyles, cursor: "pointer" }),
             }}
             onChange={(option) => setClassificationFilter(option)}
           />
         </div>
-      </section>
+      </Form>
 
       {shownPubs && (
         <section className="flex flex-col gap-6">
           {classificationOptions.map((option) => {
             return (
               <article key={option.value}>
-                <h2 className="py-2">{option.label}</h2>
-                <div className="grid grid-cols-1 lg:grid-cols-2  gap-12">
+                <h2 className="mb-10">{option.label}</h2>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
                   {shownPubs.map((publication, i) => {
                     if (publication.classification === option.value) {
                       return (
-                        <div key={i} className="grid grid-cols-1 md:grid-cols-2 gap-2">
-                          <div className="hidden md:block drop-shadow-md">
+                        <div key={i} className="flex gap-8 content-start">
+                          <div className="flex-none hidden md:block shadow-book-shadow w-40 h-72">
                             {publication.image ? (
                               <img
-                                className="drop-shadow-md object-cover w-48 h-72"
+                                className="flex-none object-cover h-full w-full"
                                 src={publication.image}
                               />
                             ) : (
@@ -94,15 +107,15 @@ const PublicationSection: React.FC<PubProps> = ({ publications }) => {
                             )}
                           </div>
 
-                          <div className="flex flex-col gap-8 ">
-                            <p>{publication.citation}</p>
+                          <div className="flex flex-col gap-8">
+                            <p className="font-bold">{publication.citation}</p>
                             {publication.pdf && (
-                              <button
-                                className="bg-neutral-500 text-neutral-50 rounded-full py-3 px-7 w-2/3"
-                                onClick={() => window.open(`${publication.pdf}`, "_blank")}
+                              <a
+                                className="no-underline bg-neutral-500 text-neutral-50 rounded-full py-3 px-7 w-max"
+                                href={publication.pdf}
                               >
                                 View PDF
-                              </button>
+                              </a>
                             )}
                           </div>
                         </div>
diff --git a/src/components/Textarea.tsx b/src/components/Textarea.tsx
new file mode 100644
index 0000000..1b7dedd
--- /dev/null
+++ b/src/components/Textarea.tsx
@@ -0,0 +1,26 @@
+import React from "react"
+import * as Form from "@radix-ui/react-form"
+
+interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label: string
+  name: string
+}
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ name, label, ...delegated }, ref) => (
+    <Form.Field name={name} className="flex flex-col gap-2">
+      <Form.Label>{label}</Form.Label>
+      <Form.Control asChild>
+        <textarea
+          rows={4}
+          className="text-gray-400 text-sm font-medium outline-none border-b-2 w-full"
+          {...delegated}
+          ref={ref}
+        />
+      </Form.Control>
+      <Form.Message className="text-primary-300" match="valueMissing">
+        Please enter your {label}
+      </Form.Message>
+    </Form.Field>
+  )
+)
diff --git a/src/components/svg/PubPlaceholder.tsx b/src/components/svg/PubPlaceholder.tsx
index eedf572..8657c2b 100644
--- a/src/components/svg/PubPlaceholder.tsx
+++ b/src/components/svg/PubPlaceholder.tsx
@@ -4,75 +4,16 @@ const PubPlaceholder: React.FC = () => {
   return (
     <>
       <svg
-        width="232"
-        height="342"
-        viewBox="0 0 232 342"
+        width="160"
+        height="288"
+        viewBox="0 0 160 288"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <g filter="url(#filter0_dd_313_544)">
-          <rect width="200" height="310" transform="translate(12 12)" fill="#A7998B" />
-          <rect width="143" height="30" transform="translate(29 32)" fill="#D4CDC4" />
-          <rect width="143" height="12" transform="translate(29 72)" fill="#D4CDC4" />
-          <rect width="143" height="12" transform="translate(29 94)" fill="#D4CDC4" />
-        </g>
-        <defs>
-          <filter
-            id="filter0_dd_313_544"
-            x="0"
-            y="0"
-            width="232"
-            height="342"
-            filterUnits="userSpaceOnUse"
-            color-interpolation-filters="sRGB"
-          >
-            <feFlood flood-opacity="0" result="BackgroundImageFix" />
-            <feColorMatrix
-              in="SourceAlpha"
-              type="matrix"
-              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-              result="hardAlpha"
-            />
-            <feOffset dx="12" dy="12" />
-            <feGaussianBlur stdDeviation="2" />
-            <feComposite in2="hardAlpha" operator="out" />
-            <feColorMatrix
-              type="matrix"
-              values="0 0 0 0 0.654902 0 0 0 0 0.6 0 0 0 0 0.545098 0 0 0 0.35 0"
-            />
-            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_313_544" />
-            <feColorMatrix
-              in="SourceAlpha"
-              type="matrix"
-              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-              result="hardAlpha"
-            />
-            <feMorphology
-              radius="4"
-              operator="dilate"
-              in="SourceAlpha"
-              result="effect2_dropShadow_313_544"
-            />
-            <feOffset dx="4" dy="4" />
-            <feGaussianBlur stdDeviation="6" />
-            <feComposite in2="hardAlpha" operator="out" />
-            <feColorMatrix
-              type="matrix"
-              values="0 0 0 0 0.654902 0 0 0 0 0.6 0 0 0 0 0.545098 0 0 0 0.35 0"
-            />
-            <feBlend
-              mode="normal"
-              in2="effect1_dropShadow_313_544"
-              result="effect2_dropShadow_313_544"
-            />
-            <feBlend
-              mode="normal"
-              in="SourceGraphic"
-              in2="effect2_dropShadow_313_544"
-              result="shape"
-            />
-          </filter>
-        </defs>
+        <rect width="160" height="288" transform="translate(0 0)" fill="#A7998B" />
+        <rect width="140" height="20" transform="translate(10 20)" fill="#D4CDC4" />
+        <rect width="120" height="12" transform="translate(10 48)" fill="#D4CDC4" />
+        <rect width="120" height="12" transform="translate(10 68)" fill="#D4CDC4" />
       </svg>
     </>
   )
diff --git a/src/layouts/News.astro b/src/layouts/News.astro
index f74ac43..ecd71b4 100644
--- a/src/layouts/News.astro
+++ b/src/layouts/News.astro
@@ -1,7 +1,7 @@
 ---
 import type { CollectionEntry } from "astro:content"
-import Layout from "./Layout.astro"
 import FormattedDate from "../components/FormattedDate.astro"
+import Layout from "./Layout.astro"
 
 type Props = CollectionEntry<"news">["data"]
 
diff --git a/src/pages/data.astro b/src/pages/data.astro
index 96c0d75..87adf10 100644
--- a/src/pages/data.astro
+++ b/src/pages/data.astro
@@ -1,7 +1,7 @@
 ---
+import { getCollection } from "astro:content"
 import Layout from "../layouts/Layout.astro"
 import DataForm from "../components/DataForm"
-import { getCollection } from "astro:content"
 const files = await getCollection("data")
 ---
 
diff --git a/src/pages/index.astro b/src/pages/index.astro
index b9239bb..5c3468b 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,8 +1,8 @@
 ---
+import { GlobeIcon, Pencil1Icon, TargetIcon } from "@radix-ui/react-icons"
 import Home from "../layouts/Home.astro"
 import MiniMapSvg from "../components/svg/MiniMaps"
 import FootPrint from "../components/svg/FootPrint"
-import { GlobeIcon, Pencil1Icon, TargetIcon } from "@radix-ui/react-icons"
 import ProjectAim from "../components/ProjectAim.astro"
 ---
 
diff --git a/src/pages/people.astro b/src/pages/people.astro
index c153eb6..c9c03d7 100644
--- a/src/pages/people.astro
+++ b/src/pages/people.astro
@@ -1,7 +1,7 @@
 ---
+import { getCollection } from "astro:content"
 import Layout from "../layouts/Layout.astro"
 import CardContainer from "../components/CardContainer.astro"
-import { getCollection } from "astro:content"
 const people = await getCollection("people")
 const leadership = people.filter((person) => person.data.type === "Leadership")
 const advisors = people.filter((person) => person.data.type === "Advisors")
diff --git a/src/pages/publications.astro b/src/pages/publications.astro
index ac67623..c5d05de 100644
--- a/src/pages/publications.astro
+++ b/src/pages/publications.astro
@@ -1,7 +1,7 @@
 ---
+import { getCollection } from "astro:content"
 import Layout from "../layouts/Layout.astro"
 import PublicationSection from "../components/Publications"
-import { getCollection } from "astro:content"
 
 const pubs = (await getCollection("publications")).sort(
   (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
diff --git a/src/styles/global.css b/src/styles/global.css
index 7dc3f53..f106a42 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -67,12 +67,6 @@
   input,
   select {
     @apply bg-white;
-    @apply rounded-full;
-    @apply shadow-inner;
-    @apply min-w-60;
-    @apply w-max;
-    @apply py-3;
-    @apply px-5;
   }
 
   input::placeholder,
@@ -80,7 +74,10 @@
     @apply text-neutral-300;
   }
 
-  input:focus,
+  input:focus {
+    @apply outline-none;
+  }
+
   textarea:focus {
     @apply outline-none;
     @apply shadow-inner-focus;