diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx
index f6c4451..0c43dfa 100644
--- a/src/app/settings/page.tsx
+++ b/src/app/settings/page.tsx
@@ -18,23 +18,20 @@ import Link from "next/link";
 export default function Settings(): ReactNode {
     const isMobile = useIsMobile();
 
-    const SearchContainer = isMobile ? "div" : SidebarTriggerAdjustable;
     const cardWidth = isMobile ? "w-full" : "w-2xl";
 
     return (
         <div className="p-5 w-full h-full">
-            <div className="flex flex-col gap-2">
-                <div className="flex flex-row items-center gap-2">
-                    <StaticSidebarTrigger />
-                    <ScrollFadingTitle>
-                        <h2 className="font-bold break-keep text-xl sm:text-2xl md:text-3xl lg:text-4xl leading-none">Settings</h2>
-                    </ScrollFadingTitle>
-                </div>
-                <div className="flex flex-col sticky top-safe bg-background gap-2 mt-2 pb-2 pt-2 p-5 w-[100% + 5 * var(--spacing)] z-10 -mx-5">
-                    <SearchContainer className={cn("flex justify-center",)}>
-                        <Search placeholder="Search Settings" className={cardWidth} />
-                    </SearchContainer>
-                </div>
+            <div className="flex flex-row items-center gap-2">
+                <StaticSidebarTrigger />
+                <ScrollFadingTitle>
+                    <h2 className="font-bold break-keep text-xl sm:text-2xl md:text-3xl lg:text-4xl leading-none">Settings</h2>
+                </ScrollFadingTitle>
+            </div>
+            <div className="flex flex-col sticky top-safe bg-background gap-2 mt-2 pb-2 pt-2 p-5 w-[100% + 5 * var(--spacing)] z-10 -mx-5">
+                <SidebarTriggerAdjustable className={cn("flex justify-center",)}>
+                    <Search placeholder="Search Settings" className={cardWidth} />
+                </SidebarTriggerAdjustable>
             </div>
             <div className="flex flex-col justify-center items-center w-full gap-1 md:lg:gap-2 mt-2">
                 <Link href="/settings/storage" className="w-full flex items-center justify-center">
diff --git a/src/app/settings/storage/page.tsx b/src/app/settings/storage/page.tsx
index f2bbff0..f410919 100644
--- a/src/app/settings/storage/page.tsx
+++ b/src/app/settings/storage/page.tsx
@@ -33,28 +33,25 @@ export default function Storage() {
         setStatus(localStorage.getItem("persistence-status"));
     }, []);
 
-    const SearchContainer = isMobile ? "div" : SidebarTriggerAdjustable;
     const cardWidth = isMobile ? "w-full" : "w-2xl";
 
     return (
-        <div className="p-5 w-full h-screen">
-            <div className="flex flex-col gap-2">
-                <div className="flex flex-row items-center gap-2">
-                    <StaticSidebarTrigger>
-                        <Button className="fixed size-7 ml-10 z-40 transition-colors" variant="ghost" size="icon" onClick={() => router.back()}>
-                            <ArrowLeftIcon/>
-                        </Button>
-                    </StaticSidebarTrigger>
-                    <ScrollFadingTitle className="flex flex-row items-center">
-                        <div className="ml-10"/>
-                        <h2 className="font-bold break-keep text-xl sm:text-2xl md:text-3xl lg:text-4xl leading-none">Storage</h2>
-                    </ScrollFadingTitle>
-                </div>
-                <div className="flex flex-col sticky top-safe bg-background gap-2 mt-2 pb-2 pt-2 p-5 w-[100% + 5 * var(--spacing)] z-10 -mx-5">
-                    <SearchContainer className={cn("flex justify-center", cardWidth)}>
-                        <Search placeholder="Search Settings" className={cardWidth} />
-                    </SearchContainer>
-                </div>
+        <div className="p-5 w-full">
+            <div className="flex flex-row items-center gap-2">
+                <StaticSidebarTrigger>
+                    <Button className="fixed size-7 ml-10 z-40 transition-colors" variant="ghost" size="icon" onClick={() => router.back()}>
+                        <ArrowLeftIcon />
+                    </Button>
+                </StaticSidebarTrigger>
+                <ScrollFadingTitle className="flex flex-row items-center">
+                    <div className="ml-10" />
+                    <h2 className="font-bold break-keep text-xl sm:text-2xl md:text-3xl lg:text-4xl leading-none">Storage</h2>
+                </ScrollFadingTitle>
+            </div>
+            <div className="flex flex-col sticky top-safe bg-background gap-2 mt-2 pb-2 pt-2 p-5 w-[100% + 5 * var(--spacing)] z-10 -mx-5">
+                <SidebarTriggerAdjustable adjustWidth="20" className={cn("flex justify-center", cardWidth)}>
+                    <Search placeholder="Search Settings" className={cardWidth} />
+                </SidebarTriggerAdjustable>
             </div>
             <div className="flex flex-row justify-between items-center w-full max-w-96">
                 <div className="flex flex-row gap-2 items-center">
diff --git a/src/components/sidebar-trigger-adjustable/SidebarTriggerAdjustable.tsx b/src/components/sidebar-trigger-adjustable/SidebarTriggerAdjustable.tsx
index 1c53662..64d8168 100644
--- a/src/components/sidebar-trigger-adjustable/SidebarTriggerAdjustable.tsx
+++ b/src/components/sidebar-trigger-adjustable/SidebarTriggerAdjustable.tsx
@@ -16,7 +16,10 @@ const cssLerp = (a: string, b: string, t: string) => (
 );
 
 
-export const SidebarTriggerAdjustable = (props: ComponentProps<"div">) => {
+export const SidebarTriggerAdjustable = (props: ComponentProps<"div"> & {
+    adjustWidth?: number | `${number}`;
+}) => {
+    const adjustWidth = props.adjustWidth ? +props.adjustWidth : 12;
     const isMobile = useIsMobile();
 
     useEffect(() => {
@@ -31,9 +34,9 @@ export const SidebarTriggerAdjustable = (props: ComponentProps<"div">) => {
             const slideAmount = easeSlide(
                 Math.max(0, Math.min(1, window.scrollY / (window.innerHeight / 20)))
             );
-            triggerDiv.style.transform = `translateX(calc(var(--spacing) * ${12 * slideAmount}))`;
+            triggerDiv.style.transform = `translateX(calc(var(--spacing) * ${adjustWidth * slideAmount}))`;
             triggerDiv.style.paddingTop = `calc(var(--spacing) * ${(isMobile ? 1 : 3) * slideAmount})`;
-            triggerDiv.style.width = `calc(100% - var(--spacing) * ${lerp(0, 12, 1 - slideAmount)})`;
+            triggerDiv.style.width = `calc(100% - var(--spacing) * ${lerp(0, adjustWidth, 1 - slideAmount)})`;
         };
 
         handleScroll();
@@ -44,5 +47,5 @@ export const SidebarTriggerAdjustable = (props: ComponentProps<"div">) => {
         };
     }, [isMobile]);
 
-    return <div data-sidebar-trigger="true" {...props} className={props.className}></div>;
+    return <div data-sidebar-trigger="true" className={props.className}>{props.children}</div>;
 }
\ No newline at end of file