diff --git a/src/components/Header.svelte b/src/components/Header.svelte
index 7200e85..ff10e48 100644
--- a/src/components/Header.svelte
+++ b/src/components/Header.svelte
@@ -1,10 +1,10 @@
 <script>
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
   import Icons from '$components/Icons.svelte';
   import { cartQuantity } from '../store';
   import SearchBar from '$components/SearchBar.svelte';
 
-  let currentRoute = $derived($page.url.pathname);
+  let currentRoute = $derived(page.url.pathname);
 
   let showMenu = $state(false);
 
diff --git a/src/components/SearchBar.svelte b/src/components/SearchBar.svelte
index adaf7e7..d8e8285 100644
--- a/src/components/SearchBar.svelte
+++ b/src/components/SearchBar.svelte
@@ -1,9 +1,9 @@
 <script>
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
   import { goto } from '$app/navigation';
   import Icons from './Icons.svelte';
 
-  let value = $page.url.searchParams.get('q') || '';
+  let value = page.url.searchParams.get('q') || '';
 
   async function submit(e) {
     e.preventDefault();
diff --git a/src/routes/product/+error.svelte b/src/routes/product/+error.svelte
index c136c87..4065d40 100644
--- a/src/routes/product/+error.svelte
+++ b/src/routes/product/+error.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
 </script>
 
-<h1>{$page.status} : {$page.error.message}</h1>
\ No newline at end of file
+<h1>{page.status} : {page.error.message}</h1>
\ No newline at end of file
diff --git a/src/routes/search/+layout.svelte b/src/routes/search/+layout.svelte
index 43c5d5a..3e11999 100644
--- a/src/routes/search/+layout.svelte
+++ b/src/routes/search/+layout.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
 
   /** @type {import('svelte').Snippet} */
   const { children } = $props();
@@ -15,7 +15,7 @@
           data-testid="category-link"
           class="whitespace-nowrap hover:underline focus:underline"
           href="/search"
-          aria-current={$page.url.pathname === '/search' ? 'page' : undefined}
+          aria-current={page.url.pathname === '/search' ? 'page' : undefined}
         >All</a
         >
       </li>
@@ -25,7 +25,7 @@
           data-testid="category-link"
           class="whitespace-nowrap hover:underline focus:underline"
           href="/search/featured"
-          aria-current={$page.url.pathname === '/search/featured' ? 'page' : undefined}
+          aria-current={page.url.pathname === '/search/featured' ? 'page' : undefined}
         >Featured</a
         >
       </li>
@@ -35,7 +35,7 @@
           data-testid="category-link"
           class="whitespace-nowrap hover:underline focus:underline"
           href="/search/clothes"
-          aria-current={$page.url.pathname === '/search/clothes' ? 'page' : undefined}
+          aria-current={page.url.pathname === '/search/clothes' ? 'page' : undefined}
         >Apparel</a
         >
       </li>
diff --git a/src/routes/search/+page.svelte b/src/routes/search/+page.svelte
index 580eee9..12466ff 100644
--- a/src/routes/search/+page.svelte
+++ b/src/routes/search/+page.svelte
@@ -1,11 +1,11 @@
 <script>
   import GridTile from '$components/GridTile.svelte';
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
 
   
   /** @type {{data: import('./$types').PageData}} */
   let { data } = $props();
-  let search = $derived($page.url.searchParams.get('q'));
+  let search = $derived(page.url.searchParams.get('q'));
 
   let displayedProducts = $derived(search
     ? data.body.allProducts.edges.filter((item) => {
diff --git a/src/routes/search/[collection]/+page.svelte b/src/routes/search/[collection]/+page.svelte
index d95fea4..9d0f0dd 100644
--- a/src/routes/search/[collection]/+page.svelte
+++ b/src/routes/search/[collection]/+page.svelte
@@ -1,12 +1,12 @@
 <script>
   import GridTile from '$components/GridTile.svelte';
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
 
   /** @type {{data: import('./$types').PageData}} */
   let { data } = $props();
   let collection = $derived.by(() => {
     for (const d of data.body.collections) {
-      if (d.node.handle === $page?.params?.collection) {
+      if (d.node.handle === page?.params?.collection) {
         return d.node;
       }
     }