diff --git a/pagefind/src/output/stubs/search.js b/pagefind/src/output/stubs/search.js
index a34775b8..174c5476 100644
--- a/pagefind/src/output/stubs/search.js
+++ b/pagefind/src/output/stubs/search.js
@@ -177,7 +177,7 @@ class Pagefind {
         let ptr = await this.getPtr();
         // Strip special characters to match the indexing operation
         let exact_search = /^\s*".+"\s*$/.test(term);
-        term = term.toLowerCase().trim().replace(/[^\w\s]/g, "").trim();
+        term = term.toLowerCase().trim().replace(/[^\w\s]/g, "").replace(/\s{2,}/g, " ").trim();
 
         let filter_list = [];
         for (let [filter, values] of Object.entries(options.filters)) {
diff --git a/pagefind_ui/dev_files/_pagefind/pagefind.js b/pagefind_ui/dev_files/_pagefind/pagefind.js
index 9b6fb6e7..f1c8d416 100644
--- a/pagefind_ui/dev_files/_pagefind/pagefind.js
+++ b/pagefind_ui/dev_files/_pagefind/pagefind.js
@@ -1,6 +1,68 @@
 // This is a Pagefind testing stub that needs to be updated if src/output/search.js is changed
 
 const stubbed_results = [
+    {
+        id: 123,
+        data: {
+            content: [
+                `Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.`,
+                `Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.`,
+                `Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.`
+            ].join('\n'),
+            url: "/cats/",
+            filters: {
+                color: ["Red"]
+            },
+            meta: {
+                title: `Post about TERM`,
+                image: "https://placekitten.com/800/400"
+            },
+            word_count: 12,
+            excerpt: `some excerpt that references TERM with a nice highlighted element.`
+        }
+    },
+    {
+        id: 1234,
+        data: {
+            content: [
+                `Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.`,
+                `Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.`,
+                `Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.`
+            ].join('\n'),
+            url: "/dogs/",
+            filters: {
+                color: ["Blue", "Gold"]
+            },
+            meta: {
+                title: `TERM and TERM-like things`,
+                image: "https://placekitten.com/1000/500"
+            },
+            word_count: 15,
+            excerpt: `I like TERM and also TERM...`
+        }
+    },
+    {
+        id: 12345,
+        data: {
+            content: [
+                `Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.`,
+                `Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.`,
+                `Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.`
+            ].join('\n'),
+            url: "/llamas/",
+            filters: {
+                color: ["White"],
+                smell: ["Sweet"]
+            },
+            meta: {
+                title: `TERM the llama`,
+                image: "https://placekitten.com/900/600",
+                name: "Steve"
+            },
+            word_count: 100,
+            excerpt: `Nullam id dolor id nibh ultricies TERM vehicula ut id elit.`
+        }
+    },
     {
         id: 123,
         data: {
diff --git a/pagefind_ui/svelte/filters.svelte b/pagefind_ui/svelte/filters.svelte
index 499f1fb7..c5c5f578 100644
--- a/pagefind_ui/svelte/filters.svelte
+++ b/pagefind_ui/svelte/filters.svelte
@@ -3,26 +3,29 @@
     export const selected_filters = {};
 </script>
 
-<fieldset class="pagefind-filter-block">
-    <legend>Filters</legend>
+<fieldset class="pagefind-ui__filter-panel">
+    <legend class="pagefind-ui__filter-panel-label">Filters</legend>
     {#if available_filters}
         {#each Object.entries(available_filters) as [filter, values]}
-            <details>
-                <summary
+            <details class="pagefind-ui__filter-block">
+                <summary class="pagefind-ui__filter-name"
                     >{filter.replace(/^(\w)/, (c) =>
                         c.toLocaleUpperCase()
                     )}</summary
                 >
-                <fieldset class="pagefind-filter">
-                    <legend>{filter}</legend>
+                <fieldset class="pagefind-ui__filter-group">
+                    <legend class="pagefind-ui__filter-group-label"
+                        >{filter}</legend
+                    >
                     {#each Object.entries(values) as [value, count]}
                         <div
-                            class="pagefind-filter-input"
-                            class:checked={selected_filters[
+                            class="pagefind-ui__filter-value"
+                            class:pagefind-ui__filter-value--checked={selected_filters[
                                 `${filter}:${value}`
                             ]}
                         >
                             <input
+                                class="pagefind-ui__filter-checkbox"
                                 type="checkbox"
                                 id="{filter}-{value}"
                                 name={filter}
@@ -31,8 +34,9 @@
                                 ]}
                                 {value}
                             />
-                            <label for="{filter}-{value}"
-                                >{value} ({count})</label
+                            <label
+                                class="pagefind-ui__filter-label"
+                                for="{filter}-{value}">{value} ({count})</label
                             >
                         </div>
                     {/each}
@@ -40,114 +44,118 @@
             </details>
         {/each}
     {:else}
-        <p class="loading">..........</p>
+        <p class="pagefind-ui__loading">..........</p>
     {/if}
 </fieldset>
 
 <style>
-    .pagefind-filter-block {
+    legend {
+        position: absolute;
+        clip: rect(0 0 0 0);
+    }
+    .pagefind-ui__filter-panel {
+        min-width: min(calc(260px * var(--pagefind-ui-scale)), 100%);
+        gap: calc(40px * var(--pagefind-ui-scale));
         flex: 1;
-        min-width: 250px;
+        display: flex;
+        flex-direction: column;
     }
-    fieldset {
+    .pagefind-ui__filter-group {
         border: 0;
         padding: 0;
     }
-    legend {
-        position: absolute;
-        clip: rect(0 0 0 0);
-    }
-    details {
+    .pagefind-ui__filter-block {
         padding: 0;
         display: block;
-        max-height: 300px;
-        border-top: 1px solid #cfcfcf;
-        border-bottom: 1px solid #cfcfcf;
-    }
-    details + details {
-        margin-top: -1px;
     }
-    summary {
+    .pagefind-ui__filter-name {
+        font-size: calc(16px * var(--pagefind-ui-scale));
         position: relative;
         display: flex;
         align-items: center;
-        height: 44px;
         list-style: none;
         font-weight: 700;
-        font-size: 16px;
         cursor: pointer;
     }
-    summary::after {
+    .pagefind-ui__filter-name::after {
         position: absolute;
         content: "";
-        right: 6px;
+        right: calc(6px * var(--pagefind-ui-scale));
         top: 50%;
-        width: 8px;
-        height: 8px;
-        border: solid 2px currentColor;
+        width: calc(8px * var(--pagefind-ui-scale));
+        height: calc(8px * var(--pagefind-ui-scale));
+        border: solid calc(2px * var(--pagefind-ui-scale)) currentColor;
         border-right: 0;
         border-top: 0;
         transform: translateY(-70%) rotateZ(-45deg);
     }
-
-    .pagefind-filter {
+    .pagefind-ui__filter-block[open] .pagefind-ui__filter-name::after {
+        transform: translateY(-70%) rotateZ(-225deg);
+    }
+    .pagefind-ui__filter-group {
         display: flex;
         flex-direction: column;
-        gap: 8px;
-        padding: 0 12px 20px;
+        gap: calc(20px * var(--pagefind-ui-scale));
+        padding: calc(30px * var(--pagefind-ui-scale)) 0
+            calc(20px * var(--pagefind-ui-scale));
     }
-    .pagefind-filter-input {
+    .pagefind-ui__filter-value {
         position: relative;
         display: flex;
         align-items: center;
-        gap: 8px;
+        gap: calc(8px * var(--pagefind-ui-scale));
     }
-    .pagefind-filter-input::before {
+    .pagefind-ui__filter-value::before {
         position: absolute;
         content: "";
         top: 50%;
-        left: 8px;
+        left: calc(8px * var(--pagefind-ui-scale));
         width: 0px;
         height: 0px;
         border: solid 1px #fff;
         opacity: 0;
-        transform: translate(-4.5px, 0.8px) skewX(-5deg) rotateZ(-45deg);
+        transform: translate(
+                calc(4.5px * var(--pagefind-ui-scale) * -1),
+                calc(0.8px * var(--pagefind-ui-scale))
+            )
+            skewX(-5deg) rotateZ(-45deg);
         transform-origin: top left;
         border-top: 0;
         border-right: 0;
         pointer-events: none;
     }
-    .pagefind-filter-input.checked::before {
+    .pagefind-ui__filter-value.pagefind-ui__filter-value--checked::before {
         opacity: 1;
-        width: 9px;
-        height: 4px;
+        width: calc(9px * var(--pagefind-ui-scale));
+        height: calc(4px * var(--pagefind-ui-scale));
         transition: width 0.1s ease-out 0.1s, height 0.1s ease-in;
     }
-    input[type="checkbox"] {
+    .pagefind-ui__filter-checkbox {
         margin: 0;
-        width: 16px;
-        height: 16px;
-        border: solid 1px #cfcfcf;
+        width: calc(16px * var(--pagefind-ui-scale));
+        height: calc(16px * var(--pagefind-ui-scale));
+        border: solid 1px var(--pagefind-ui-border);
         appearance: none;
         -webkit-appearance: none;
-        border-radius: 4px;
-        background-color: #fff;
+        border-radius: calc(var(--pagefind-ui-border-radius) / 2);
+        background-color: var(--pagefind-ui-background);
         cursor: pointer;
     }
-    input[type="checkbox"]:checked {
-        background-color: #034ad8;
-        border: solid 1px #034ad8;
+    .pagefind-ui__filter-checkbox:checked {
+        background-color: var(--pagefind-ui-primary);
+        border: solid 1px var(--pagefind-ui-primary);
     }
-    label {
+    .pagefind-ui__filter-label {
         cursor: pointer;
-        font-size: 16px;
+        font-size: calc(16px * var(--pagefind-ui-scale));
+        font-weight: 400;
     }
-
-    .loading {
-        height: 44px;
+    .pagefind-ui__loading {
+        height: calc(44px * var(--pagefind-ui-scale));
         margin: 0;
-        color: #efefef;
-        background-color: #efefef;
+        color: var(--pagefind-ui-text);
+        background-color: var(--pagefind-ui-text);
+        opacity: 0.1;
         pointer-events: none;
     }
 </style>
diff --git a/pagefind_ui/svelte/reset.svelte b/pagefind_ui/svelte/reset.svelte
index a145c177..9e13e202 100644
--- a/pagefind_ui/svelte/reset.svelte
+++ b/pagefind_ui/svelte/reset.svelte
@@ -10,7 +10,7 @@
     Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
     - The "symbol *" part is to solve Firefox SVG sprite bug
  */
-    :global(.pagefind-reset
+    :global(.pagefind-ui--reset
             *:where(:not(html, iframe, canvas, img, svg, video):not(svg
                     *, symbol *))) {
         all: unset;
@@ -18,62 +18,63 @@
     }
 
     /* Preferred box-sizing value */
-    :global(.pagefind-reset *, .pagefind-reset *::before, .pagefind-reset
-            *::after) {
+    :global(.pagefind-ui--reset *, .pagefind-ui--reset
+            *::before, .pagefind-ui--reset *::after) {
         box-sizing: border-box;
     }
 
     /* Reapply the pointer cursor for anchor tags */
-    :global(.pagefind-reset a, .pagefind-reset button) {
+    :global(.pagefind-ui--reset a, .pagefind-ui--reset button) {
         cursor: revert;
     }
 
     /* Remove list styles (bullets/numbers) */
-    :global(.pagefind-reset ol, .pagefind-reset ul, .pagefind-reset menu) {
+    :global(.pagefind-ui--reset ol, .pagefind-ui--reset ul, .pagefind-ui--reset
+            menu) {
         list-style: none;
     }
 
     /* For images to not be able to exceed their container */
-    :global(.pagefind-reset img) {
+    :global(.pagefind-ui--reset img) {
         max-width: 100%;
     }
 
     /* removes spacing between cells in tables */
-    :global(.pagefind-reset table) {
+    :global(.pagefind-ui--reset table) {
         border-collapse: collapse;
     }
 
     /* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
-    :global(.pagefind-reset input, .pagefind-reset textarea) {
+    :global(.pagefind-ui--reset input, .pagefind-ui--reset textarea) {
         -webkit-user-select: auto;
     }
 
     /* revert the 'white-space' property for textarea elements on Safari */
-    :global(.pagefind-reset textarea) {
+    :global(.pagefind-ui--reset textarea) {
         white-space: revert;
     }
 
     /* minimum style to allow to style meter element */
-    :global(.pagefind-reset meter) {
+    :global(.pagefind-ui--reset meter) {
         -webkit-appearance: revert;
         appearance: revert;
     }
 
     /* reset default text opacity of input placeholder */
-    :global(.pagefind-reset ::placeholder) {
+    :global(.pagefind-ui--reset ::placeholder) {
         color: unset;
     }
 
     /* fix the feature of 'hidden' attribute.
    display:revert; revert to element instead of attribute */
-    :global(.pagefind-reset :where([hidden])) {
+    :global(.pagefind-ui--reset :where([hidden])) {
         display: none;
     }
 
     /* revert for bug in Chromium browsers
    - fix for the content editable attribute will work properly.
    - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
-    :global(.pagefind-reset
+    :global(.pagefind-ui--reset
             :where([contenteditable]:not([contenteditable="false"]))) {
         -moz-user-modify: read-write;
         -webkit-user-modify: read-write;
@@ -83,7 +84,12 @@
     }
 
     /* apply back the draggable feature - exist only in Chromium and Safari */
-    :global(.pagefind-reset :where([draggable="true"])) {
+    :global(.pagefind-ui--reset :where([draggable="true"])) {
         -webkit-user-drag: element;
     }
+
+    /* Pagefind specific — use the default mark styling */
+    :global(.pagefind-ui--reset mark) {
+        all: revert;
+    }
 </style>
diff --git a/pagefind_ui/svelte/result.svelte b/pagefind_ui/svelte/result.svelte
index de5c4805..c470589d 100644
--- a/pagefind_ui/svelte/result.svelte
+++ b/pagefind_ui/svelte/result.svelte
@@ -18,20 +18,28 @@
     };
 </script>
 
-<li class="result">
+<li class="pagefind-ui__result">
     {#if data}
-        {#if data.meta.image}
-            <img class="thumb" src={data.meta?.image} alt={data.meta?.title} />
-        {:else}
-            <div class="thumb" />
-        {/if}
-        <div class="details">
-            <p class="title"><a href={data.url}>{data.meta?.title}</a></p>
-            <p class="excerpt">{@html data.excerpt}</p>
+        <div class="pagefind-ui__result-thumb">
+            {#if data.meta.image}
+                <img
+                    class="pagefind-ui__result-image"
+                    src={data.meta?.image}
+                    alt={data.meta?.title}
+                />
+            {/if}
+        </div>
+        <div class="pagefind-ui__result-inner">
+            <p class="pagefind-ui__result-title">
+                <a class="pagefind-ui__result-link" href={data.url}
+                    >{data.meta?.title}</a
+                >
+            </p>
+            <p class="pagefind-ui__result-excerpt">{@html data.excerpt}</p>
             {#if meta.length}
-                <ul>
+                <ul class="pagefind-ui__result-tags">
                     {#each meta as [metaTitle, metaValue]}
-                        <li class="meta">
+                        <li class="pagefind-ui__result-tag">
                             {metaTitle.replace(/^(\w)/, (c) =>
                                 c.toLocaleUpperCase()
                             )}: {metaValue}
@@ -41,83 +49,111 @@
             {/if}
         </div>
     {:else}
-        <div class="thumb" />
-        <div class="details">
-            <p class="title loading">{placeholder(30)}</p>
-            <p class="excerpt loading">{placeholder(40)}</p>
+        <div class="pagefind-ui__result-thumb" />
+        <div class="pagefind-ui__result-inner">
+            <p class="pagefind-ui__result-title pagefind-ui__loading">
+                {placeholder(30)}
+            </p>
+            <p class="pagefind-ui__result-excerpt pagefind-ui__loading">
+                {placeholder(40)}
+            </p>
         </div>
     {/if}
 </li>
 
 <style>
-    .result {
+    .pagefind-ui__result {
         list-style-type: none;
         display: flex;
         align-items: flex-start;
-        gap: min(40px, 3%);
-        padding: 30px 0 40px;
-        border-top: solid 2px #eee;
+        gap: min(calc(40px * var(--pagefind-ui-scale)), 3%);
+        padding: calc(30px * var(--pagefind-ui-scale)) 0
+            calc(40px * var(--pagefind-ui-scale));
+        border-top: solid var(--pagefind-ui-border-width)
+            var(--pagefind-ui-border);
+    }
+    .pagefind-ui__result:last-of-type {
+        border-bottom: solid var(--pagefind-ui-border-width)
+            var(--pagefind-ui-border);
     }
-    .result:last-of-type {
-        border-bottom: solid 2px #eee;
+    .pagefind-ui__result-thumb {
+        width: min(
+            30%,
+            calc((30% - (100px * var(--pagefind-ui-scale))) * 100000)
+        );
+        max-width: calc(120px * var(--pagefind-ui-scale));
+        margin-top: calc(10px * var(--pagefind-ui-scale));
+        aspect-ratio: var(--pagefind-ui-image-ratio);
+        position: relative;
+        border-radius: var(--pagefind-ui-border-radius);
+        overflow: hidden;
+    }
+    .pagefind-ui__result-thumb::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: var(--pagefind-ui-text);
+        opacity: 0.1;
     }
-    .thumb {
-        width: min(30%, calc((30% - 100px) * 100000));
-        max-width: 120px;
-        margin-top: 10px;
-        aspect-ratio: 3 / 2;
-        object-fit: cover;
-        background-color: #efefef;
+    .pagefind-ui__result-image {
+        display: block;
+        font-size: 0;
+        width: 100%;
+        height: 100%;
+        aspect-ratio: var(--pagefind-ui-image-ratio);
+        object-fit: var(--pagefind-ui-image-size);
     }
-    .details {
+    .pagefind-ui__result-inner {
         flex: 1;
         display: flex;
         flex-direction: column;
         align-items: flex-start;
-        margin-top: 10px;
+        margin-top: calc(10px * var(--pagefind-ui-scale));
     }
-    .title {
+    .pagefind-ui__result-title {
         display: inline-block;
         font-weight: 700;
-        font-size: 21px;
+        font-size: calc(21px * var(--pagefind-ui-scale));
         margin-top: 0;
         margin-bottom: 0;
     }
-    .title a {
-        color: #393939;
+    .pagefind-ui__result-title .pagefind-ui__result-link {
+        color: var(--pagefind-ui-text);
         text-decoration: none;
     }
-    .title a:hover {
+    .pagefind-ui__result-title .pagefind-ui__result-link:hover {
         text-decoration: underline;
     }
-    .excerpt {
+    .pagefind-ui__result-excerpt {
         display: inline-block;
         font-weight: 400;
-        font-size: 16px;
-        margin-top: 4px;
+        font-size: calc(16px * var(--pagefind-ui-scale));
+        margin-top: calc(4px * var(--pagefind-ui-scale));
         margin-bottom: 0;
-        min-width: 250px;
+        min-width: calc(250px * var(--pagefind-ui-scale));
     }
-    .loading {
-        color: #efefef;
-        background-color: #efefef;
+    .pagefind-ui__loading {
+        color: var(--pagefind-ui-text);
+        background-color: var(--pagefind-ui-text);
+        opacity: 0.1;
         pointer-events: none;
     }
-    ul {
+    .pagefind-ui__result-tags {
         list-style-type: none;
         padding: 0;
         display: flex;
-        gap: 20px;
+        gap: calc(20px * var(--pagefind-ui-scale));
         flex-wrap: wrap;
-        margin-top: 20px;
-    }
-    .meta {
-        padding: 4px 8px;
-        font-size: 14px;
-        border-radius: 8px;
-        background-color: #eeeeee;
+        margin-top: calc(20px * var(--pagefind-ui-scale));
     }
-    :global(.pagefind-ui mark) {
-        all: revert;
+    .pagefind-ui__result-tag {
+        padding: calc(4px * var(--pagefind-ui-scale))
+            calc(8px * var(--pagefind-ui-scale));
+        font-size: calc(14px * var(--pagefind-ui-scale));
+        border-radius: var(--pagefind-ui-border-radius);
+        background-color: var(--pagefind-ui-tag);
     }
 </style>
diff --git a/pagefind_ui/svelte/ui.svelte b/pagefind_ui/svelte/ui.svelte
index 00e871fe..7d90cd2c 100644
--- a/pagefind_ui/svelte/ui.svelte
+++ b/pagefind_ui/svelte/ui.svelte
@@ -4,6 +4,7 @@
     import Reset from "./reset.svelte";
 
     export let base_path = "/_pagefind/";
+    export let reset_styles = true;
     export let pagefind_options = {};
 
     let val = "";
@@ -84,143 +85,161 @@
     };
 </script>
 
-<div class="pagefind-ui pagefind-reset">
+<div class="pagefind-ui" class:pagefind-ui--reset={reset_styles}>
     <form
+        class="pagefind-ui__form"
         role="search"
         aria-label="Search this site"
         action="javascript:void(0);"
     >
         <input
+            class="pagefind-ui__search-input"
             on:focus={init}
             bind:value={val}
             type="text"
             placeholder="Search"
         />
 
-        <div class="pagefind-sub">
-            {#if initializing}
-                <Filters {available_filters} bind:selected_filters />
-            {/if}
+        <div class="pagefind-ui__drawer">
+            {#if searched}
+                {#if initializing}
+                    <Filters {available_filters} bind:selected_filters />
+                {/if}
 
-            <div class="results">
-                {#if searched}
+                <div class="pagefind-ui__results-area">
                     {#if loading}
                         {#if search_term}
-                            <p class="message">
-                                Searching for "{search_term}"...
+                            <p class="pagefind-ui__message">
+                                Searching for "{search_term.replace(
+                                    /^"+|"+$/g,
+                                    ""
+                                )}"...
                             </p>
                         {:else}
-                            <p class="message">Filtering...</p>
+                            <p class="pagefind-ui__message">Filtering...</p>
                         {/if}
                     {:else}
-                        <p class="message">
+                        <p class="pagefind-ui__message">
                             {searchResult.results.length} result{searchResult
                                 .results.length === 1
                                 ? ""
                                 : "s"}
-                            {search_term ? `for "${search_term}"` : ""}
+                            {search_term
+                                ? `for "${search_term.replace(/^"+|"+$/g, "")}"`
+                                : ""}
                         </p>
-                        <ol>
+                        <ol class="pagefind-ui__results">
                             {#each searchResult.results.slice(0, show) as result (result.id)}
                                 <Result {result} />
                             {/each}
                         </ol>
                         {#if searchResult.results.length > show}
-                            <button on:click={showMore}
-                                >Load more results</button
+                            <button
+                                class="pagefind-ui__button"
+                                on:click={showMore}>Load more results</button
                             >
                         {/if}
                     {/if}
-                {/if}
-            </div>
+                </div>
+            {/if}
         </div>
     </form>
 </div>
 
 <style>
+    :root {
+        --pagefind-ui-scale: 1;
+        --pagefind-ui-primary: #034ad8;
+        --pagefind-ui-text: #393939;
+        --pagefind-ui-background: #ffffff;
+        --pagefind-ui-border: #eeeeee;
+        --pagefind-ui-tag: #eeeeee;
+        --pagefind-ui-border-width: 2px;
+        --pagefind-ui-border-radius: 8px;
+        --pagefind-ui-image-size: cover;
+        --pagefind-ui-image-ratio: 3 / 2;
+        --pagefind-ui-font: system, -apple-system, ".SFNSText-Regular",
+            "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue",
+            "Lucida Grande", sans-serif;
+    }
     .pagefind-ui {
         width: 100%;
-        color: #393939;
-        font-family: system, -apple-system, ".SFNSText-Regular", "San Francisco",
-            "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
+        color: var(--pagefind-ui-text);
+        font-family: var(--pagefind-ui-font);
     }
-
-    form {
+    .pagefind-ui__form {
         position: relative;
     }
-
-    input {
+    .pagefind-ui__form::before {
+        background-color: var(--pagefind-ui-text);
+        width: calc(18px * var(--pagefind-ui-scale));
+        height: calc(18px * var(--pagefind-ui-scale));
+        top: calc(23px * var(--pagefind-ui-scale));
+        left: calc(20px * var(--pagefind-ui-scale));
+        content: "";
+        position: absolute;
+        display: block;
+        opacity: 0.7;
+        -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.7549 11.255H11.9649L11.6849 10.985C12.6649 9.845 13.2549 8.365 13.2549 6.755C13.2549 3.165 10.3449 0.255005 6.75488 0.255005C3.16488 0.255005 0.254883 3.165 0.254883 6.755C0.254883 10.345 3.16488 13.255 6.75488 13.255C8.36488 13.255 9.84488 12.665 10.9849 11.685L11.2549 11.965V12.755L16.2549 17.745L17.7449 16.255L12.7549 11.255ZM6.75488 11.255C4.26488 11.255 2.25488 9.245 2.25488 6.755C2.25488 4.26501 4.26488 2.255 6.75488 2.255C9.24488 2.255 11.2549 4.26501 11.2549 6.755C11.2549 9.245 9.24488 11.255 6.75488 11.255Z' fill='%23000000'/%3E%3C/svg%3E%0A");
+        mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.7549 11.255H11.9649L11.6849 10.985C12.6649 9.845 13.2549 8.365 13.2549 6.755C13.2549 3.165 10.3449 0.255005 6.75488 0.255005C3.16488 0.255005 0.254883 3.165 0.254883 6.755C0.254883 10.345 3.16488 13.255 6.75488 13.255C8.36488 13.255 9.84488 12.665 10.9849 11.685L11.2549 11.965V12.755L16.2549 17.745L17.7449 16.255L12.7549 11.255ZM6.75488 11.255C4.26488 11.255 2.25488 9.245 2.25488 6.755C2.25488 4.26501 4.26488 2.255 6.75488 2.255C9.24488 2.255 11.2549 4.26501 11.2549 6.755C11.2549 9.245 9.24488 11.255 6.75488 11.255Z' fill='%23000000'/%3E%3C/svg%3E%0A");
+        -webkit-mask-size: 100%;
+        mask-size: 100%;
+        z-index: 9;
+        pointer-events: none;
+    }
+    .pagefind-ui__search-input {
+        height: calc(64px * var(--pagefind-ui-scale));
+        padding: 0 0 0 calc(54px * var(--pagefind-ui-scale));
+        background-color: var(--pagefind-ui-background);
+        border: var(--pagefind-ui-border-width) solid var(--pagefind-ui-border);
+        border-radius: var(--pagefind-ui-border-radius);
+        font-size: calc(21px * var(--pagefind-ui-scale));
         position: relative;
         appearance: none;
         -webkit-appearance: none;
         display: flex;
         width: 100%;
-        height: 64px;
-        background-color: #fff;
-        padding: 0 0 0 54px;
-        border: 2px solid #eeeeee;
-        border-radius: 8px;
         box-sizing: border-box;
         font-weight: 700;
-        font-size: 21px;
     }
-
-    input::placeholder {
+    .pagefind-ui__search-input::placeholder {
         opacity: 0.2;
     }
-
-    form::before {
-        content: "";
-        position: absolute;
-        display: block;
-        background-color: #757575;
-        mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.7549 11.255H11.9649L11.6849 10.985C12.6649 9.845 13.2549 8.365 13.2549 6.755C13.2549 3.165 10.3449 0.255005 6.75488 0.255005C3.16488 0.255005 0.254883 3.165 0.254883 6.755C0.254883 10.345 3.16488 13.255 6.75488 13.255C8.36488 13.255 9.84488 12.665 10.9849 11.685L11.2549 11.965V12.755L16.2549 17.745L17.7449 16.255L12.7549 11.255ZM6.75488 11.255C4.26488 11.255 2.25488 9.245 2.25488 6.755C2.25488 4.26501 4.26488 2.255 6.75488 2.255C9.24488 2.255 11.2549 4.26501 11.2549 6.755C11.2549 9.245 9.24488 11.255 6.75488 11.255Z' fill='%23000000'/%3E%3C/svg%3E%0A");
-        width: 18px;
-        height: 18px;
-        top: 23px;
-        left: 20px;
-        z-index: 9;
-        pointer-events: none;
-    }
-
-    .pagefind-sub {
+    .pagefind-ui__drawer {
+        gap: calc(60px * var(--pagefind-ui-scale));
+        margin-top: calc(40px * var(--pagefind-ui-scale));
         display: flex;
         flex-direction: row;
-        gap: 15px;
         flex-wrap: wrap;
-        margin-top: 40px;
     }
-
-    .results {
-        flex: 2;
-        min-width: min(400px, 100%);
+    .pagefind-ui__results-area {
+        min-width: min(calc(400px * var(--pagefind-ui-scale)), 100%);
+        flex: 1000;
     }
-
-    ol {
+    .pagefind-ui__results {
         padding: 0;
     }
-
-    .message {
-        font-size: 16px;
+    .pagefind-ui__message {
+        font-size: calc(16px * var(--pagefind-ui-scale));
+        margin-bottom: calc(40px * var(--pagefind-ui-scale));
         font-weight: 700;
         margin-top: 0;
     }
-
-    button {
-        margin-top: 40px;
-        border: 2px solid #cfcfcf;
-        border-radius: 8px;
-        height: 48px;
-        padding: 0 12px;
-        color: #034ad8;
+    .pagefind-ui__button {
+        margin-top: calc(40px * var(--pagefind-ui-scale));
+        border: var(--pagefind-ui-border-width) solid var(--pagefind-ui-border);
+        border-radius: var(--pagefind-ui-border-radius);
+        height: calc(48px * var(--pagefind-ui-scale));
+        padding: 0 calc(12px * var(--pagefind-ui-scale));
+        font-size: calc(16px * var(--pagefind-ui-scale));
+        color: var(----pagefind-ui-primary);
+        background: var(--pagefind-ui-background);
         font-weight: 700;
-        font-size: 16px;
         cursor: pointer;
-        background: #fff;
     }
-
-    button:hover {
-        border-color: #034ad8;
-        background: #fff;
+    .pagefind-ui__button:hover {
+        border-color: var(--pagefind-ui-primary);
+        color: var(--pagefind-ui-primary);
+        background: var(--pagefind-ui-background);
     }
 </style>
diff --git a/pagefind_ui/ui.js b/pagefind_ui/ui.js
index af664a3a..6fe080a6 100644
--- a/pagefind_ui/ui.js
+++ b/pagefind_ui/ui.js
@@ -4,6 +4,7 @@ class PagefindUI {
     constructor(opts) {
         let selector = opts.element ?? "[data-pagefind-ui]";
         let bundlePath = opts.bundlePath;
+        let resetStyles = opts.resetStyles ?? true;
 
         if (!bundlePath) {
             try {
@@ -19,6 +20,7 @@ class PagefindUI {
         // Remove the UI-specific config before passing it along to the Pagefind backend
         delete opts["element"];
         delete opts["bundlePath"];
+        delete opts["resetStyles"];
 
         const dom = document.querySelector(selector);
         if (dom) {
@@ -26,6 +28,7 @@ class PagefindUI {
                 target: dom,
                 props: {
                     base_path: bundlePath,
+                    reset_styles: resetStyles,
                     pagefind_options: opts,
                 }
             })