diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 2969275..ac83e51 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -48,7 +48,7 @@ export default async function RootLayout({
                 <ThemeProvider>
                     <SidebarProvider>
                         <Dashboard/>
-                        <main className="relative mt-safe">
+                        <main className="relative mt-safe h-screen">
                             <PersistenceProvider>
                                 {children}
                             </PersistenceProvider>
diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx
index d64387f..f6c4451 100644
--- a/src/app/settings/page.tsx
+++ b/src/app/settings/page.tsx
@@ -3,57 +3,51 @@ import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import { SidebarTrigger } from "@/components/ui/sidebar";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import { InfoIcon } from "lucide-react";
+import { ChartPieIcon, InfoIcon } from "lucide-react";
 import { ReactNode, useEffect, useState } from "react";
 import { usePersistenceContext } from "../persistence-provider";
 import StaticSidebarTrigger from "@/components/static-sidebar-trigger";
 import ScrollFadingTitle from "@/components/scroll-fading-title";
-
-function PersistentStorageControl({
-    status
-}: {
-    status: string | null
-}): ReactNode {
-    const { persist } = usePersistenceContext();
-    if (status == null) return <Label className="text-muted-foreground">No information</Label>;
-    if (status == "never") return <Label className="text-red-500">Unavailable</Label>;
-    if (status == "prompt") return <Button onClick={persist}>Enable</Button>;
-    return <Label className="text-green-400">Enabled</Label>;
-};
+import SidebarTriggerAdjustable from "@/components/sidebar-trigger-adjustable";
+import Search from "@/components/search";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { cn } from "@/lib/utils";
+import AscendingCard from "@/components/ascending-card";
+import Link from "next/link";
 
 export default function Settings(): ReactNode {
-    const [status, setStatus] = useState<string | null>(null);
+    const isMobile = useIsMobile();
 
-    useEffect(() => {
-        setStatus(localStorage.getItem("persistence-status"));
-    }, []);
+    const SearchContainer = isMobile ? "div" : SidebarTriggerAdjustable;
+    const cardWidth = isMobile ? "w-full" : "w-2xl";
 
     return (
-        <div className="p-5 w-full">
-            <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 gap-1 md:lg:gap-2 mt-2 md:mt-4 lg:mt-5">
-                <h3 className="font-semibold break-keep text-lg sm:text-xl md:text-2xl lg:text-3xl leading-none">Storage</h3>
-                <div className="">
-                    <div className="flex flex-row justify-between items-center w-full max-w-96">
-                        <div className="flex flex-row gap-2 items-center">
-                            <Label>Persistent Storage</Label>
-                            <Tooltip>
-                                <TooltipTrigger>
-                                    <InfoIcon size="15" className="opacity-60 hover:opacity-80"/>
-                                </TooltipTrigger>
-                                <TooltipContent>
-                                    Persistent storage prevents browser from deleting your local data to free up space for other websites.
-                                </TooltipContent>
-                            </Tooltip>
-                        </div>
-                        <PersistentStorageControl status={status}/>
-                    </div>
+        <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>
+            <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">
+                    <AscendingCard className={`flex flex-row gap-3 p-3 ${cardWidth}`}>
+                        <div className="flex items-center justify-center">
+                            <ChartPieIcon />
+                        </div>
+                        <div className="flex flex-col items-start">
+                            <h3 className="font-semibold break-keep text-lg sm:text-xl">Storage</h3>
+                            <p className="text-sm text-secondary-foreground">Memory usage, media, cache etc.</p>
+                        </div>
+                    </AscendingCard>
+                </Link>
             </div>
         </div>
     );
diff --git a/src/app/settings/storage/page.tsx b/src/app/settings/storage/page.tsx
new file mode 100644
index 0000000..f2bbff0
--- /dev/null
+++ b/src/app/settings/storage/page.tsx
@@ -0,0 +1,67 @@
+"use client";
+import { usePersistenceContext } from "@/app/persistence-provider";
+import ScrollFadingTitle from "@/components/scroll-fading-title";
+import Search from "@/components/search";
+import SidebarTriggerAdjustable from "@/components/sidebar-trigger-adjustable";
+import StaticSidebarTrigger from "@/components/static-sidebar-trigger";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { cn } from "@/lib/utils";
+import { ArrowLeftIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { ReactNode, useEffect, useState } from "react";
+
+function PersistentStorageControl({
+    status
+}: {
+    status: string | null
+}): ReactNode {
+    const { persist } = usePersistenceContext();
+    if (status == null) return <Label className="text-muted-foreground">No information</Label>;
+    if (status == "never") return <Label className="text-red-500">Unavailable</Label>;
+    if (status == "prompt") return <Button onClick={persist}>Enable</Button>;
+    return <Label className="text-green-400">Enabled</Label>;
+};
+
+export default function Storage() {
+    const [status, setStatus] = useState<string | null>(null);
+    const router = useRouter();
+    const isMobile = useIsMobile();
+
+    useEffect(() => {
+        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>
+            <div className="flex flex-row justify-between items-center w-full max-w-96">
+                <div className="flex flex-row gap-2 items-center">
+                    <Label>Persistent Storage</Label>
+                </div>
+                <PersistentStorageControl status={status} />
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/components/ascending-card/AscendingCard.tsx b/src/components/ascending-card/AscendingCard.tsx
new file mode 100644
index 0000000..f536ead
--- /dev/null
+++ b/src/components/ascending-card/AscendingCard.tsx
@@ -0,0 +1,7 @@
+import { ComponentProps } from "react";
+import { Card } from "../ui/card";
+import { cn } from "@/lib/utils";
+
+export const AscendingCard = (props: ComponentProps<typeof Card>) => (
+    <Card {...props} className={cn("shadow-md hover:scale-[101%] hover:drop-shadow-xl duration-100", props.className)}/>
+);
\ No newline at end of file
diff --git a/src/components/ascending-card/index.ts b/src/components/ascending-card/index.ts
new file mode 100644
index 0000000..342f272
--- /dev/null
+++ b/src/components/ascending-card/index.ts
@@ -0,0 +1,3 @@
+import { AscendingCard } from "./AscendingCard";
+
+export default AscendingCard;
\ No newline at end of file
diff --git a/src/components/static-sidebar-trigger/StaticSidebarTrigger.tsx b/src/components/static-sidebar-trigger/StaticSidebarTrigger.tsx
index caff4b3..6babc2a 100644
--- a/src/components/static-sidebar-trigger/StaticSidebarTrigger.tsx
+++ b/src/components/static-sidebar-trigger/StaticSidebarTrigger.tsx
@@ -1,12 +1,18 @@
 "use client";
+import { ReactNode } from "react";
 import { SidebarTrigger } from "../ui/sidebar";
 
-export const StaticSidebarTrigger = () => {
+export const StaticSidebarTrigger = ({
+    children
+}: {
+    children?: ReactNode
+}) => {
     return (
         <>
             <div className="ml-10"/>
             <div className="absolute top-0 left-0 pl-6 pt-4 md:p-6 overscroll-auto">
                 <SidebarTrigger className={`fixed mr-2 z-40 transition-colors`} size="lg" tabIndex={0}/>
+                {children}
             </div>   
         </>     
     );