diff --git a/public/satelliet.png b/public/satelliet.png
new file mode 100644
index 0000000..11cb309
Binary files /dev/null and b/public/satelliet.png differ
diff --git a/src/app/(customer)/location/error/page.tsx b/src/app/(customer)/location/error/page.tsx
index 9478550..5346038 100644
--- a/src/app/(customer)/location/error/page.tsx
+++ b/src/app/(customer)/location/error/page.tsx
@@ -37,16 +37,15 @@ function LocationErrorPageInner() {
 
   return (
     <main className="flex min-h-full flex-1 flex-col items-center gap-8 bg-surface px-6 py-10 text-center">
-      <span className="flex h-28 w-28 items-center justify-center rounded-full bg-error/10 text-error">
-        <MapPinOff className="h-14 w-14" />
-      </span>
 
-      <div className="flex flex-col gap-2">
+      <img src="/satelliet.png" alt="" className="w-auto h-full my-4" width={390} height={296}/>
+
+      <div className="flex flex-col gap-6 my-4">
         <h1 className="text-headline-medium font-extrabold text-foreground">موقعیت مکانی شناسایی نشد</h1>
-        <p className="text-body-large text-gray-700">مشکلی در دریافت موقعیت شما پیش آمد. لطفاً محله خود را دستی انتخاب کنید.</p>
+        <p className="text-body-large text-gray-700 leading-6">مشکلی در دریافت موقعیت شما پیش آمد. لطفاً محله خود را دستی انتخاب کنید.</p>
       </div>
 
-      <div className="mt-auto flex w-full flex-col gap-4">
+      <div className="mt-[50%] flex w-full flex-col gap-8">
         <Button
           size="lg"
           className="w-full bg-primary-action hover:bg-primary-action/90 text-primary-foreground"
@@ -57,7 +56,7 @@ function LocationErrorPageInner() {
         <button type="button" onClick={retry} disabled={retrying} className="text-body-medium font-semibold text-primary-action">
           {retrying ? "در حال تلاش..." : "تلاش مجدد"}
         </button>
-        <span className="text-body-medium text-gray-500">پشتیبانی</span>
+        <span className="text-body-medium text-primary-action mt-8">پشتیبانی</span>
       </div>
     </main>
   );
diff --git a/src/app/(customer)/location/permission/page.tsx b/src/app/(customer)/location/permission/page.tsx
index 7ac9986..fd5e47e 100644
--- a/src/app/(customer)/location/permission/page.tsx
+++ b/src/app/(customer)/location/permission/page.tsx
@@ -12,8 +12,7 @@ const BENEFITS = [
   { icon: Store, text: "کشف بازارچه‌های اطراف" },
 ];
 
-// L01 — winofyfrontenddoc (1).md §4.1. No illustration asset was provided;
-// approximated with a simple icon badge rather than the isometric map graphic.
+// L01 — winofyfrontenddoc (1).md §4.1.
 export default function LocationPermissionPage() {
   return (
     <Suspense fallback={null}>
@@ -32,7 +31,11 @@ function LocationPermissionPageInner() {
     setLoading(true);
     navigator.geolocation.getCurrentPosition(
       (position) => {
-        setLocation({ mode: "geo", lat: position.coords.latitude, lng: position.coords.longitude });
+        setLocation({
+          mode: "geo",
+          lat: position.coords.latitude,
+          lng: position.coords.longitude,
+        });
         router.push(next);
         router.refresh();
       },
@@ -45,42 +48,52 @@ function LocationPermissionPageInner() {
   }
 
   return (
-    <main className="flex min-h-full flex-1 flex-col items-center gap-8 bg-surface px-6 py-10 text-center">
-      <span className="flex h-28 w-28 items-center justify-center rounded-full bg-primary-action/10 text-primary-action">
-        <MapPin className="h-14 w-14" />
-      </span>
+    <main className="flex min-h-full flex-1 flex-col bg-surface">
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img src="/Rectangle.png" alt="" className="h-auto w-full" width={390} height={296} />
 
-      <div className="flex flex-col gap-2">
-        <h1 className="text-headline-medium font-extrabold text-foreground">بازارچه محلی شما</h1>
-        <p className="text-body-large text-gray-700">برای نمایش فروشگاه‌های نزدیک، به موقعیت مکانی شما نیاز داریم</p>
-      </div>
+      <div className="flex flex-1 flex-col items-center gap-8 px-6 py-10 text-start">
+        <div className="flex flex-col gap-8">
+          <h1 className="text-headline-medium font-extrabold text-foreground">
+            بازارچه محلی شما
+          </h1>
+          <p className="text-body-large text-gray-700 leading-6">
+            برای نمایش فروشگاه‌های نزدیک، به موقعیت مکانی شما نیاز داریم
+          </p>
+        </div>
 
-      <div className="flex w-full flex-col gap-3 text-right">
-        {BENEFITS.map(({ icon: Icon, text }) => (
-          <div key={text} className="flex items-center gap-3 rounded-xl border border-gray-300 bg-white p-3">
-            <Icon className="h-5 w-5 shrink-0 text-primary-action" />
-            <span className="text-body-medium text-foreground">{text}</span>
-          </div>
-        ))}
-      </div>
+        <div className="flex w-full flex-col gap-3 text-right">
+          {BENEFITS.map(({ icon: Icon, text }) => (
+            <div
+              key={text}
+              className="flex items-center gap-3 mb-3 mr-2"
+            >
+              <Icon className="h-5 w-5 shrink-0 text-primary-action" />
+              <span className="text-body-medium text-foreground">{text}</span>
+            </div>
+          ))}
+        </div>
 
-      <div className="mt-auto flex w-full flex-col gap-4">
-        <Button
-          size="lg"
-          className="w-full bg-primary-action hover:bg-primary-action/90 text-primary-foreground"
-          disabled={loading}
-          onClick={allowLocation}
-        >
-          {loading ? "در حال دریافت موقعیت..." : "اجازه دسترسی به موقعیت مکانی"}
-        </Button>
-        <button
-          type="button"
-          onClick={() => router.push(`/location/search?next=${encodeURIComponent(next)}`)}
-          className="text-body-medium font-semibold text-primary-action"
-        >
-          انتخاب دستی محله
-        </button>
-        <span className="text-body-medium text-gray-500">پشتیبانی</span>
+        <div className="flex w-full flex-col gap-6">
+          <Button
+            size="lg"
+            className="w-full bg-primary-action hover:bg-primary-action/90 text-primary-foreground"
+            disabled={loading}
+            onClick={allowLocation}
+          >
+            {loading ? "در حال دریافت موقعیت..." : "اجازه دسترسی به موقعیت مکانی"}
+          </Button>
+          <button
+            type="button"
+            onClick={() =>
+              router.push(`/location/search?next=${encodeURIComponent(next)}`)
+            }
+            className="text-body-medium font-semibold text-primary-action"
+          >
+            انتخاب دستی محله
+          </button>
+          <span className="text-body-medium text-primary-action text-center mt-6">پشتیبانی</span>
+        </div>
       </div>
     </main>
   );
diff --git a/src/components/location/neighborhood-search.tsx b/src/components/location/neighborhood-search.tsx
index 9e293d3..dbf5623 100644
--- a/src/components/location/neighborhood-search.tsx
+++ b/src/components/location/neighborhood-search.tsx
@@ -55,9 +55,9 @@ export function NeighborhoodSearch({
       <button
         type="button"
         onClick={() => selectNeighborhood(n)}
-        className="flex w-full items-center gap-3 border-b border-gray-300 py-4 text-right"
+        className="flex max-w-full items-center gap-3 border-t border-gray-300 py-4 text-right mx-4"
       >
-        <MapPin className={isSelected ? "h-5 w-5 shrink-0 text-primary-action" : "h-5 w-5 shrink-0 text-gray-500"} />
+        <MapPin className={isSelected ? "h-5 w-5 shrink-0 text-primary-action" : "h-5 w-5 shrink-0 text-gray-700"} />
         <span className={isSelected ? "flex-1 text-body-large font-semibold text-primary-action" : "flex-1 text-body-large text-foreground"}>
           {n.city.name}، {n.name}
         </span>
@@ -67,12 +67,12 @@ export function NeighborhoodSearch({
   }
 
   return (
-    <main className="flex min-h-full flex-1 flex-col bg-surface px-4 py-4">
-      <div className="mb-4 flex items-center gap-3">
+    <main className="flex min-h-full flex-1 flex-col bg-surface px-4 py-12">
+      <div className="mb-8 flex items-center gap-3">
         <button type="button" onClick={() => router.back()} aria-label="بازگشت">
           <ArrowRight className="h-5 w-5 text-foreground" />
         </button>
-        <h1 className="text-title-large font-extrabold text-foreground">انتخاب محله</h1>
+        <h1 className="text-title-large font-extrabold text-foreground mr-24">انتخاب محله</h1>
       </div>
 
       <div
@@ -82,15 +82,15 @@ export function NeighborhoodSearch({
             : "flex h-12 items-center gap-2 rounded-3xl border border-gray-300 bg-white px-4"
         }
       >
-        <Search className="h-5 w-5 shrink-0 text-gray-500" />
+        <Search className="h-5 w-5 shrink-0 text-primary-action" />
         <input
           type="search"
           value={query}
           onChange={(e) => setQuery(e.target.value)}
           onFocus={() => setFocused(true)}
           onBlur={() => setFocused(false)}
-          placeholder="با نام محله خود را جستجو کنید"
-          className="h-full flex-1 bg-transparent text-body-medium text-foreground placeholder:text-gray-500 focus:outline-none"
+          placeholder="شهر یا محله خود را جستجو کنید"
+          className="h-full flex-1 bg-transparent text-body-medium text-foreground placeholder:text-gray-600 focus:outline-none"
           autoFocus
         />
       </div>
@@ -125,7 +125,7 @@ export function NeighborhoodSearch({
 
       {(state === "idle" || state === "empty") && (
         <div className="mt-4 flex flex-col">
-          <h2 className="pb-2 text-label text-gray-600">محله‌های پیشنهادی</h2>
+          <h2 className="text-label min-w-fit font-bold size-3.5 text-gray-700 mx-4 py-6 flex items-center">محله‌های پیشنهادی</h2>
           {suggestions.map((n) => (
             <NeighborhoodRow key={n.uuid} n={n} />
           ))}