From 6b46600fff8cb0d64ff4ee9a19959d7c1ee1ae37 Mon Sep 17 00:00:00 2001
From: MOHAN <mohan326856@gmail.com>
Date: Wed, 10 Jun 2026 02:23:09 +0530
Subject: [PATCH] feat: complete UI/UX rework + live import dashboard
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- app.dashboard.jsx (new): live import progress dashboard modelled on
  Race-Nation — job selector, progress bar, 6-stat grid, stage board,
  current product banner, activity log, errors list, completion summary,
  3s polling, cancel button
- app.jsx: add nav links for Dashboard, Settings, Brands, Manage Brands, Help
- app._index.jsx: dark gradient hero header, subscription status bar,
  navcard grid, billing modal preserved
- app.settings.jsx: dark header, Turn14 connect card with live status,
  visual pricing type toggle (MAP vs percentage)
- app.brands.jsx: dark header, visual brand grid with checkbox state,
  sticky save toolbar
- app.managebrand.jsx: dark header, live import status bar with Dashboard
  link, collapsible brand rows, filter toggle pills, modern product cards
  with attribute badges
- app.help.jsx: dark header, animated FAQ accordion, styled contact card

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/routes/app._index.jsx      |  621 ++++---------
 app/routes/app.brands.jsx      |  704 ++++-----------
 app/routes/app.dashboard.jsx   |  488 +++++++++++
 app/routes/app.help.jsx        |  167 ++--
 app/routes/app.jsx             |    2 +-
 app/routes/app.managebrand.jsx | 1493 +++++++++-----------------------
 app/routes/app.settings.jsx    |  302 ++++---
 7 files changed, 1477 insertions(+), 2300 deletions(-)
 create mode 100644 app/routes/app.dashboard.jsx

diff --git a/app/routes/app._index.jsx b/app/routes/app._index.jsx
index 2d85509..46ca969 100644
--- a/app/routes/app._index.jsx
+++ b/app/routes/app._index.jsx
@@ -1,74 +1,47 @@
 import React, { useMemo, useState } from "react";
 import { json } from "@remix-run/node";
-import { useLoaderData, useActionData, useSubmit, Form } from "@remix-run/react";
+import { useLoaderData, useActionData, useSubmit, Form, useNavigate } from "@remix-run/react";
 import {
   Page,
-  Layout,
-  Card,
-  BlockStack,
-  Text,
-  InlineStack,
-  Image,
-  Divider,
-  Button,
   Modal,
   TextField,
-  Box,
-  Banner,
+  BlockStack,
+  InlineStack,
   ChoiceList,
-  Badge,
+  Banner,
+  Button,
+  Divider,
 } from "@shopify/polaris";
 import { TitleBar } from "@shopify/app-bridge-react";
-import data4autosLogo from "../assets/data4autos_logo.png";
-import turn14DistributorLogo from "../assets/turn14-logo.png";
 import { authenticate } from "../shopify.server";
 
-/* ===========================
-   PRICING (single source of truth)
-   =========================== */
+/* ─── pricing constants ────────────────────────────────────────────────────── */
 const PLAN_NAME = "Starter Sync";
-const MONTHLY_AMOUNT = 79; // USD
-const ANNUAL_AMOUNT = 790; // USD
+const MONTHLY_AMOUNT = 79;
+const ANNUAL_AMOUNT = 790;
 const TRIAL_DAYS = 14;
 const ALLOWED_STATUSES = ["ACTIVE", "TRIAL"];
 
-/* ===========================
-   HELPERS
-   =========================== */
+/* ─── helpers ──────────────────────────────────────────────────────────────── */
 function formatMoney(amount, currencyCode = "USD") {
   if (amount == null) return "N/A";
   return `${currencyCode} ${Number(amount).toFixed(2)}`;
 }
 
 function getIntervalLabel(interval) {
-  switch (interval) {
-    case "ANNUAL":
-      return "Every 12 months";
-    case "EVERY_30_DAYS":
-      return "Every 30 days";
-    default:
-      return interval || "N/A";
-  }
+  if (interval === "ANNUAL") return "Every 12 months";
+  if (interval === "EVERY_30_DAYS") return "Every 30 days";
+  return interval || "N/A";
 }
 
 function getStatusTone(status) {
-  switch (status) {
-    case "ACTIVE":
-      return "success";
-    case "TRIAL":
-      return "info";
-    case "CANCELLED":
-    case "EXPIRED":
-    case "DECLINED":
-      return "critical";
-    default:
-      return "attention";
-  }
+  if (status === "ACTIVE") return { bg: "#f0fdf4", border: "#bbf7d0", color: "#15803d" };
+  if (status === "TRIAL") return { bg: "#eff6ff", border: "#bfdbfe", color: "#1d4ed8" };
+  if (["CANCELLED", "EXPIRED", "DECLINED"].includes(status)) return { bg: "#fff1f2", border: "#fecdd3", color: "#dc2626" };
+  return { bg: "#fefce8", border: "#fde68a", color: "#d97706" };
 }
 
-/* ===========================
-   LOADER: fetch real subscription details
-   =========================== */
+/* ─── loader ────────────────────────────────────────────────────────────────── */
 export const loader = async ({ request }) => {
   const { admin, session } = await authenticate.admin(request);
   const shop = session.shop;
@@ -77,13 +50,7 @@ export const loader = async ({ request }) => {
     query CurrentSubscriptionDetails {
       currentAppInstallation {
         activeSubscriptions {
-          id
-          name
-          status
-          test
-          createdAt
-          trialDays
-          currentPeriodEnd
+          id name status test createdAt trialDays currentPeriodEnd
           lineItems {
             id
             plan {
@@ -91,10 +58,7 @@ export const loader = async ({ request }) => {
                 __typename
                 ... on AppRecurringPricing {
                   interval
-                  price {
-                    amount
-                    currencyCode
-                  }
+                  price { amount currencyCode }
                 }
               }
             }
@@ -105,75 +69,33 @@ export const loader = async ({ request }) => {
   `);
 
   const result = await resp.json();
-
-  const subscriptions =
-    result?.data?.currentAppInstallation?.activeSubscriptions || [];
-
-  const subscription =
-    subscriptions.find((sub) => ALLOWED_STATUSES.includes(sub.status)) ||
-    subscriptions[0] ||
-    null;
-
-  const recurringPricing =
-    subscription?.lineItems?.find(
-      (item) =>
-        item?.plan?.pricingDetails?.__typename === "AppRecurringPricing"
-    )?.plan?.pricingDetails || null;
-
-  const isSubscribed =
-    !!subscription && ALLOWED_STATUSES.includes(subscription.status);
-
-  const subscriptionDetails = subscription
-    ? {
-        id: subscription.id,
-        name: subscription.name || PLAN_NAME,
-        status: subscription.status,
-        test: subscription.test ?? false,
-        createdAt: subscription.createdAt,
-        trialDays: subscription.trialDays ?? 0,
-        currentPeriodEnd: subscription.currentPeriodEnd,
-        interval: recurringPricing?.interval || null,
-        priceAmount: recurringPricing?.price?.amount || null,
-        currencyCode: recurringPricing?.price?.currencyCode || "USD",
-      }
-    : null;
-
-  console.log(
-    `Loader subscription details for ${shop}: ${JSON.stringify(subscriptionDetails)}`
-  );
+  const subscriptions = result?.data?.currentAppInstallation?.activeSubscriptions || [];
+  const subscription = subscriptions.find((sub) => ALLOWED_STATUSES.includes(sub.status)) || subscriptions[0] || null;
+  const recurringPricing = subscription?.lineItems?.find((item) => item?.plan?.pricingDetails?.__typename === "AppRecurringPricing")?.plan?.pricingDetails || null;
+  const isSubscribed = !!subscription && ALLOWED_STATUSES.includes(subscription.status);
+  const subscriptionDetails = subscription ? {
+    id: subscription.id, name: subscription.name || PLAN_NAME, status: subscription.status,
+    test: subscription.test ?? false, createdAt: subscription.createdAt,
+    trialDays: subscription.trialDays ?? 0, currentPeriodEnd: subscription.currentPeriodEnd,
+    interval: recurringPricing?.interval || null, priceAmount: recurringPricing?.price?.amount || null,
+    currencyCode: recurringPricing?.price?.currencyCode || "USD",
+  } : null;
 
   if (shop === "racewerksengg.myshopify.com") {
-    return json({
-      redirectToBilling: false,
-      shop,
-      isSubscribed: true,
-      subscription: subscriptionDetails,
-      allSubscriptions: subscriptions,
-    });
+    return json({ redirectToBilling: false, shop, isSubscribed: true, subscription: subscriptionDetails, allSubscriptions: subscriptions });
   }
 
-  return json({
-    redirectToBilling: !isSubscribed,
-    shop,
-    isSubscribed,
-    subscription: subscriptionDetails,
-    allSubscriptions: subscriptions,
-  });
+  return json({ redirectToBilling: !isSubscribed, shop, isSubscribed, subscription: subscriptionDetails, allSubscriptions: subscriptions });
 };
 
-/* ===========================
-   ACTION: create subscription
-   =========================== */
+/* ─── action ────────────────────────────────────────────────────────────────── */
 export const action = async ({ request }) => {
   const { admin, session } = await authenticate.admin(request);
   const form = await request.formData();
-
   const rawCadence = form.get("cadence");
   const cadence = rawCadence === "ANNUAL" ? "ANNUAL" : "MONTHLY";
-
   const interval = cadence === "ANNUAL" ? "ANNUAL" : "EVERY_30_DAYS";
   const amount = cadence === "ANNUAL" ? ANNUAL_AMOUNT : MONTHLY_AMOUNT;
-
   const shop = session.shop;
   const shopDomain = (shop || "").split(".")[0];
   const returnUrl = `https://admin.shopify.com/store/${shopDomain}/apps/d4a-turn14/app`;
@@ -183,64 +105,58 @@ export const action = async ({ request }) => {
       appSubscriptionCreate(
         name: "${PLAN_NAME} - ${cadence === "ANNUAL" ? "Annual" : "Monthly"}"
         returnUrl: "${returnUrl}"
-        lineItems: [
-          {
-            plan: {
-              appRecurringPricingDetails: {
-                price: { amount: ${amount}, currencyCode: USD }
-                interval: ${interval}
-              }
-            }
-          }
-        ]
+        lineItems: [{ plan: { appRecurringPricingDetails: { price: { amount: ${amount}, currencyCode: USD } interval: ${interval} } } }]
         trialDays: ${TRIAL_DAYS}
         replacementBehavior: STANDARD
         test: false
       ) {
         confirmationUrl
-        appSubscription {
-          id
-          name
-          status
-          trialDays
-        }
-        userErrors {
-          field
-          message
-        }
+        appSubscription { id name status trialDays }
+        userErrors { field message }
       }
     }
   `);
 
   const data = await createRes.json();
-
   const url = data?.data?.appSubscriptionCreate?.confirmationUrl || null;
   const userErrors = data?.data?.appSubscriptionCreate?.userErrors || [];
   const topLevelErrors = data?.errors || [];
 
   if (!url || userErrors.length || topLevelErrors.length) {
-    return json(
-      {
-        errors: [
-          "Failed to create subscription.",
-          ...userErrors.map((e) => e.message),
-          ...topLevelErrors.map((e) => e.message || String(e)),
-        ],
-      },
-      { status: 400 }
-    );
+    return json({ errors: ["Failed to create subscription.", ...userErrors.map((e) => e.message), ...topLevelErrors.map((e) => e.message || String(e))] }, { status: 400 });
   }
-
   return json({ confirmationUrl: url });
 };
 
-/* ===========================
-   PAGE
-   =========================== */
+/* ─── NavCard ────────────────────────────────────────────────────────────────── */
+function NavCard({ icon, title, desc, link, accent }) {
+  const colors = {
+    blue:   { bg: "#eff6ff", border: "#bfdbfe", icon: "#2563eb" },
+    green:  { bg: "#f0fdf4", border: "#bbf7d0", icon: "#16a34a" },
+    purple: { bg: "#faf5ff", border: "#e9d5ff", icon: "#7c3aed" },
+    amber:  { bg: "#fffbeb", border: "#fde68a", icon: "#b45309" },
+  };
+  const c = colors[accent] || colors.blue;
+  return (
+    <a href={link} style={{ textDecoration: "none", display: "block" }}>
+      <div style={{ background: c.bg, border: `1px solid ${c.border}`, borderRadius: 12, padding: "18px 20px", cursor: "pointer", transition: "transform 0.15s, box-shadow 0.15s", height: "100%", display: "flex", flexDirection: "column", gap: 10 }}
+        onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-2px)"; e.currentTarget.style.boxShadow = "0 8px 20px rgba(0,0,0,0.08)"; }}
+        onMouseLeave={(e) => { e.currentTarget.style.transform = ""; e.currentTarget.style.boxShadow = ""; }}
+      >
+        <div style={{ fontSize: 28 }}>{icon}</div>
+        <div style={{ fontWeight: 700, fontSize: 15, color: c.icon }}>{title}</div>
+        <div style={{ fontSize: 13, color: "#6b7280", lineHeight: 1.5 }}>{desc}</div>
+      </div>
+    </a>
+  );
+}
+
+/* ─── Page ───────────────────────────────────────────────────────────────────── */
 export default function Index() {
   const actionData = useActionData();
   const loaderData = useLoaderData();
   const submit = useSubmit();
+  const navigate = useNavigate();
   const [activeModal, setActiveModal] = useState(false);
   const [cadence, setCadence] = useState("MONTHLY");
 
@@ -250,275 +166,143 @@ export default function Index() {
 
   const hasConfirmationUrl = Boolean(actionData?.confirmationUrl);
   const errors = actionData?.errors || [];
-
   const shopDomain = (shop || "").split(".")[0];
 
-  const items = [
-    {
-      icon: "⚙️",
-      text: "Manage API settings",
-      link: `/d4a-turn14/app/settings`,
-    },
-    {
-      icon: "🏷️",
-      text: "Browse and import available brands",
-      link: `https://admin.shopify.com/store/${shopDomain}/apps/d4a-turn14/app/brands`,
-    },
-    {
-      icon: "📦",
-      text: "Sync brand collections to Shopify",
-      link: `https://admin.shopify.com/store/${shopDomain}/apps/d4a-turn14/app/managebrand`,
-    },
-    {
-      icon: "🔐",
-      text: "Handle secure Turn14 login credentials",
-      link: `https://admin.shopify.com/store/${shopDomain}/apps/d4a-turn14/app/help`,
-    },
-  ];
-
-  const openModal = () => setActiveModal(true);
-  const closeModal = () => setActiveModal(false);
-
-  const formatDate = (d) =>
-    d
-      ? new Date(d).toLocaleDateString(undefined, {
-          year: "numeric",
-          month: "short",
-          day: "numeric",
-        })
-      : "N/A";
+  const formatDate = (d) => d ? new Date(d).toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" }) : "N/A";
 
   const previewBase = subscription?.createdAt ? new Date(subscription.createdAt) : new Date();
   const previewTrialEnd = new Date(previewBase);
   previewTrialEnd.setDate(previewTrialEnd.getDate() + TRIAL_DAYS);
 
   const trialDaysLeft = useMemo(() => {
-    if (!subscription?.trialDays || !subscription?.createdAt) return null;
-    if (subscription.status !== "TRIAL") return null;
-
+    if (!subscription?.trialDays || !subscription?.createdAt || subscription.status !== "TRIAL") return null;
     const created = new Date(subscription.createdAt);
     const trialEnd = new Date(created);
     trialEnd.setDate(trialEnd.getDate() + subscription.trialDays);
-
-    const now = new Date();
-    const msLeft = trialEnd.getTime() - now.getTime();
-    const daysLeft = Math.ceil(msLeft / (1000 * 60 * 60 * 24));
-
-    return Math.max(0, daysLeft);
+    const msLeft = trialEnd.getTime() - Date.now();
+    return Math.max(0, Math.ceil(msLeft / (1000 * 60 * 60 * 24)));
   }, [subscription?.trialDays, subscription?.createdAt, subscription?.status]);
 
   const isPreviewMode = !isSubscribed;
 
-  const displayPlan = isPreviewMode
-    ? `${PLAN_NAME} — ${cadence === "ANNUAL" ? "Annual" : "Monthly"}`
-    : subscription?.name || PLAN_NAME;
+  const displayPlan = isPreviewMode ? `${PLAN_NAME} — ${cadence === "ANNUAL" ? "Annual" : "Monthly"}` : subscription?.name || PLAN_NAME;
+  const displayInterval = isPreviewMode ? (cadence === "ANNUAL" ? "Every 12 months" : "Every 30 days") : getIntervalLabel(subscription?.interval);
+  const displayPrice = isPreviewMode ? (cadence === "ANNUAL" ? `$${ANNUAL_AMOUNT}/yr` : `$${MONTHLY_AMOUNT}/mo`) : (subscription?.priceAmount ? `${formatMoney(subscription.priceAmount, subscription.currencyCode)}${subscription?.interval === "ANNUAL" ? "/yr" : "/mo"}` : "N/A");
+  const displayNextRenewal = isPreviewMode ? `${formatDate(previewTrialEnd)} (after ${TRIAL_DAYS}-day trial)` : formatDate(subscription?.currentPeriodEnd);
+  const displayStatus = isPreviewMode ? "Not active" : subscription?.status || "N/A";
 
-  const displayInterval = isPreviewMode
-    ? cadence === "ANNUAL"
-      ? "Every 12 months"
-      : "Every 30 days"
-    : getIntervalLabel(subscription?.interval);
+  const statusStyle = getStatusTone(subscription?.status || "PENDING");
 
-  const displayPrice = isPreviewMode
-    ? cadence === "ANNUAL"
-      ? `$${ANNUAL_AMOUNT}/yr`
-      : `$${MONTHLY_AMOUNT}/mo`
-    : subscription?.priceAmount
-      ? `${formatMoney(subscription.priceAmount, subscription.currencyCode)}${
-          subscription?.interval === "ANNUAL" ? "/yr" : "/mo"
-        }`
-      : "N/A";
-
-  const displayNextRenewal = isPreviewMode
-    ? `${formatDate(previewTrialEnd)} (after ${TRIAL_DAYS}-day trial)`
-    : formatDate(subscription?.currentPeriodEnd);
-
-  const displayStatus = isPreviewMode
-    ? "Not active — will be created at checkout"
-    : subscription?.status || "N/A";
+  const navItems = [
+    { icon: "⚙️", title: "Settings", desc: "Connect Turn14 API & configure pricing", link: `/app/settings`, accent: "purple" },
+    { icon: "🏷️", title: "Browse Brands", desc: "Select brands to sync from Turn14", link: `https://admin.shopify.com/store/${shopDomain}/apps/d4a-turn14/app/brands`, accent: "blue" },
+    { icon: "📦", title: "Manage Brands", desc: "Import products from selected brands", link: `https://admin.shopify.com/store/${shopDomain}/apps/d4a-turn14/app/managebrand`, accent: "green" },
+    { icon: "📊", title: "Dashboard", desc: "Track live import progress & stats", link: `/app/dashboard`, accent: "amber" },
+  ];
 
   return (
     <Page>
       <TitleBar title="Data4Autos Turn14 Integration" />
 
-      <Layout>
-        <Layout.Section>
-          <Card padding="500">
-            <BlockStack gap="400">
-              <BlockStack gap="400" align="center">
-                <Text variant="headingLg" as="h1" alignment="center">
-                  Welcome to your Turn14 Dashboard
-                </Text>
+      {/* Hero header */}
+      <div style={{ background: "linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #2563eb 100%)", borderRadius: 16, padding: "36px 40px", marginBottom: 28, color: "#fff", position: "relative", overflow: "hidden" }}>
+        <div style={{ position: "absolute", right: -40, top: -40, width: 220, height: 220, borderRadius: "50%", background: "rgba(255,255,255,0.04)" }} />
+        <div style={{ position: "absolute", right: 60, bottom: -60, width: 150, height: 150, borderRadius: "50%", background: "rgba(255,255,255,0.03)" }} />
+        <div style={{ position: "relative" }}>
+          <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: "0.1em", opacity: 0.6, textTransform: "uppercase", marginBottom: 8 }}>Data4Autos</div>
+          <div style={{ fontSize: 26, fontWeight: 900, marginBottom: 8, lineHeight: 1.2 }}>Turn14 Distribution Integration</div>
+          <div style={{ fontSize: 15, opacity: 0.75, maxWidth: 520, lineHeight: 1.6 }}>
+            Sync product brands, manage collections, and automate catalog setup directly from Turn14 into your Shopify store.
+          </div>
+          <div style={{ marginTop: 20, display: "flex", gap: 12, flexWrap: "wrap" }}>
+            <button
+              onClick={() => navigate("/app/dashboard")}
+              style={{ background: "rgba(255,255,255,0.15)", border: "1px solid rgba(255,255,255,0.3)", borderRadius: 8, color: "#fff", padding: "9px 20px", cursor: "pointer", fontWeight: 700, fontSize: 14 }}
+            >
+              📊 Open Dashboard
+            </button>
+            <button
+              onClick={() => setActiveModal(true)}
+              style={{ background: isSubscribed ? "rgba(34,197,94,0.2)" : "#2563eb", border: isSubscribed ? "1px solid rgba(34,197,94,0.4)" : "none", borderRadius: 8, color: "#fff", padding: "9px 20px", cursor: "pointer", fontWeight: 700, fontSize: 14 }}
+            >
+              {isSubscribed ? "✅ Subscription Active" : "🚀 Start Free Trial"}
+            </button>
+          </div>
+        </div>
+      </div>
 
-                <InlineStack gap="800" align="center" blockAlign="center">
-                  <Image source={data4autosLogo} alt="Data4Autos Logo" width={120} />
-                  <Image
-                    source={turn14DistributorLogo}
-                    alt="Turn14 Distributors Logo"
-                    width={200}
-                  />
-                </InlineStack>
-              </BlockStack>
+      {/* Subscription status bar */}
+      <div style={{ background: statusStyle.bg, border: `1px solid ${statusStyle.border}`, borderRadius: 12, padding: "14px 20px", marginBottom: 24, display: "flex", gap: 24, flexWrap: "wrap", alignItems: "center" }}>
+        <div>
+          <div style={{ fontSize: 11, fontWeight: 700, color: "#9ca3af", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 3 }}>Subscription Status</div>
+          <div style={{ fontSize: 15, fontWeight: 800, color: statusStyle.color }}>{isSubscribed ? subscription?.status : "NOT SUBSCRIBED"}</div>
+        </div>
+        <div style={{ width: 1, height: 36, background: "#e5e7eb" }} />
+        <div>
+          <div style={{ fontSize: 11, fontWeight: 700, color: "#9ca3af", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 3 }}>Plan</div>
+          <div style={{ fontSize: 14, fontWeight: 600, color: "#374151" }}>{displayPlan}</div>
+        </div>
+        <div style={{ width: 1, height: 36, background: "#e5e7eb" }} />
+        <div>
+          <div style={{ fontSize: 11, fontWeight: 700, color: "#9ca3af", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 3 }}>Price</div>
+          <div style={{ fontSize: 14, fontWeight: 600, color: "#374151" }}>{displayPrice}</div>
+        </div>
+        {trialDaysLeft != null && (
+          <>
+            <div style={{ width: 1, height: 36, background: "#e5e7eb" }} />
+            <div>
+              <div style={{ fontSize: 11, fontWeight: 700, color: "#9ca3af", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 3 }}>Trial Days Left</div>
+              <div style={{ fontSize: 14, fontWeight: 700, color: "#d97706" }}>{trialDaysLeft} days</div>
+            </div>
+          </>
+        )}
+        <div style={{ marginLeft: "auto" }}>
+          <button onClick={() => setActiveModal(true)} style={{ background: "#f3f4f6", border: "1px solid #e5e7eb", borderRadius: 8, color: "#374151", padding: "7px 16px", cursor: "pointer", fontWeight: 600, fontSize: 13 }}>
+            {isSubscribed ? "View Details" : "Manage Billing →"}
+          </button>
+        </div>
+      </div>
 
-              <Divider />
+      {/* Nav cards grid */}
+      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))", gap: 16, marginBottom: 28 }}>
+        {navItems.map((item) => (
+          <NavCard key={item.title} {...item} />
+        ))}
+      </div>
 
-              <BlockStack gap="500">
-                <InlineStack align="space-between" blockAlign="center">
-                  <Text variant="headingMd" as="h3">
-                    Subscription Overview
-                  </Text>
-                  <Badge tone={getStatusTone(subscription?.status || "PENDING")}>
-                    {isSubscribed ? subscription?.status : "NOT SUBSCRIBED"}
-                  </Badge>
-                </InlineStack>
-
-                <Box
-                  padding="400"
-                  background="bg-surface-secondary"
-                  borderWidth="025"
-                  borderRadius="200"
-                >
-                  <BlockStack gap="300">
-                    <Text as="p">
-                      <strong>Plan:</strong> {displayPlan}
-                    </Text>
-                    <Text as="p">
-                      <strong>Billing:</strong> {displayInterval}
-                    </Text>
-                    <Text as="p">
-                      <strong>Price:</strong> {displayPrice}
-                    </Text>
-                    <Text as="p">
-                      <strong>Next renewal / period end:</strong> {displayNextRenewal}
-                    </Text>
-                    <Text as="p">
-                      <strong>Trial:</strong>{" "}
-                      {isSubscribed
-                        ? `${subscription?.trialDays || 0} day(s)`
-                        : `${TRIAL_DAYS} day free trial`}
-                    </Text>
-                    <Text as="p">
-                      <strong>Trial days left:</strong>{" "}
-                      {trialDaysLeft != null ? `${trialDaysLeft} day(s)` : "N/A"}
-                    </Text>
-                  </BlockStack>
-                </Box>
-              </BlockStack>
-
-              <Divider />
-
-              <BlockStack gap="800">
-                <Text variant="headingMd" as="h3">
-                  🚀 Data4Autos Turn14 Integration gives you the power to sync
-                  product brands, manage collections, and automate catalog setup
-                  directly from Turn14 to your Shopify store.
-                </Text>
-
-                <InlineStack gap="400">
-                  <Text as="h3" variant="headingLg" fontWeight="medium">
-                    Use the left sidebar to:
-                  </Text>
-
-                  <Box
-                    paddingBlockStart="800"
-                    paddingBlockEnd="800"
-                    style={{
-                      display: "grid",
-                      gridTemplateColumns: "repeat(4, 1fr)",
-                      gap: "1rem",
-                    }}
-                  >
-                    {items.map((item, index) => (
-                      <Card key={index} padding="500" background="bg-surface-secondary">
-                        <BlockStack align="center" gap="200">
-                          <Text
-                            as="p"
-                            fontWeight="bold"
-                            alignment="center"
-                            tone="subdued"
-                            variant="bodyMd"
-                          >
-                            <span style={{ fontSize: "2rem" }}>{item.icon}</span>
-                          </Text>
-
-                          <a
-                            href={item.link}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            style={{ textDecoration: "none" }}
-                          >
-                            <Text
-                              as="h6"
-                              alignment="center"
-                              fontWeight="bold"
-                              variant="headingMd"
-                            >
-                              {item.text}
-                            </Text>
-                          </a>
-                        </BlockStack>
-                      </Card>
-                    ))}
-                  </Box>
-                </InlineStack>
-              </BlockStack>
-
-              <Divider />
-
-              <BlockStack gap="400">
-                <Text tone="subdued" alignment="center">
-                  Need help? Contact us at{" "}
-                  <a href="mailto:support@data4autos.com">support@data4autos.com</a>
-                </Text>
-
-                <Button size="large" variant="primary" onClick={openModal} fullWidth>
-                  {loaderData?.redirectToBilling
-                    ? "Proceed to Billing"
-                    : "View Subscription Details"}
-                </Button>
-              </BlockStack>
-            </BlockStack>
-          </Card>
-        </Layout.Section>
-      </Layout>
+      {/* Footer help */}
+      <div style={{ textAlign: "center", padding: "16px 0", fontSize: 13, color: "#9ca3af" }}>
+        Need help? Email <a href="mailto:support@data4autos.com" style={{ color: "#2563eb", fontWeight: 600 }}>support@data4autos.com</a> or visit the <a href="/app/help" style={{ color: "#2563eb", fontWeight: 600 }}>Help page</a>
+      </div>
 
+      {/* Billing modal */}
       <Modal
         open={activeModal}
-        onClose={closeModal}
+        onClose={() => setActiveModal(false)}
         title="Subscription Details"
         primaryAction={
-          hasConfirmationUrl
-            ? undefined
-            : isSubscribed
-              ? undefined
-              : {
-                  content:
-                    cadence === "ANNUAL"
-                      ? `Start ${TRIAL_DAYS}-day Trial — $${ANNUAL_AMOUNT}/yr`
-                      : `Start ${TRIAL_DAYS}-day Trial — $${MONTHLY_AMOUNT}/mo`,
-                  onAction: () => {
-                    const form = document.getElementById("billing-form");
-                    if (form) {
-                      const hidden = document.getElementById("cadence-field");
-                      if (hidden) hidden.value = cadence;
-                      submit(form, { method: "post" });
-                    }
-                  },
-                }
+          hasConfirmationUrl ? undefined : isSubscribed ? undefined : {
+            content: cadence === "ANNUAL" ? `Start ${TRIAL_DAYS}-day Trial — $${ANNUAL_AMOUNT}/yr` : `Start ${TRIAL_DAYS}-day Trial — $${MONTHLY_AMOUNT}/mo`,
+            onAction: () => {
+              const form = document.getElementById("billing-form");
+              if (form) {
+                const hidden = document.getElementById("cadence-field");
+                if (hidden) hidden.value = cadence;
+                submit(form, { method: "post" });
+              }
+            },
+          }
         }
-        secondaryActions={[{ content: "Close", onAction: closeModal }]}
+        secondaryActions={[{ content: "Close", onAction: () => setActiveModal(false) }]}
       >
         <Form id="billing-form" method="post">
           <input type="hidden" name="cadence" id="cadence-field" value={cadence} readOnly />
-
           <Modal.Section>
             <BlockStack gap="300">
               {errors.length > 0 && (
-                <Banner title="Couldn’t create subscription" tone="critical">
+                <Banner title="Couldn't create subscription" tone="critical">
                   <ul style={{ margin: 0, paddingLeft: "1rem" }}>
-                    {errors.map((e, i) => (
-                      <li key={i}>{e}</li>
-                    ))}
+                    {errors.map((e, i) => <li key={i}>{e}</li>)}
                   </ul>
                 </Banner>
               )}
@@ -529,63 +313,23 @@ export default function Index() {
                   <TextField label="Plan" value={displayPlan} readOnly />
                   <TextField label="Billing Interval" value={displayInterval} readOnly />
                   <TextField label="Price" value={displayPrice} readOnly />
-                  <TextField
-                    label="Trial"
-                    value={
-                      isSubscribed
-                        ? `${subscription?.trialDays || 0} day(s)`
-                        : `${TRIAL_DAYS}-day free trial`
-                    }
-                    readOnly
-                  />
-                  <TextField
-                    label="Trial Days Left"
-                    value={trialDaysLeft != null ? `${trialDaysLeft} days left` : "N/A"}
-                    readOnly
-                  />
-                  <TextField
-                    label="Next Renewal / Period End"
-                    value={displayNextRenewal}
-                    readOnly
-                  />
-
-                  {subscription?.createdAt && (
-                    <TextField
-                      label="Subscription Created"
-                      value={formatDate(subscription.createdAt)}
-                      readOnly
-                    />
-                  )}
-
+                  <TextField label="Trial" value={isSubscribed ? `${subscription?.trialDays || 0} day(s)` : `${TRIAL_DAYS}-day free trial`} readOnly />
+                  <TextField label="Trial Days Left" value={trialDaysLeft != null ? `${trialDaysLeft} days left` : "N/A"} readOnly />
+                  <TextField label="Next Renewal / Period End" value={displayNextRenewal} readOnly />
+                  {subscription?.createdAt && <TextField label="Subscription Created" value={formatDate(subscription.createdAt)} readOnly />}
                   <Divider />
-
                   {!isSubscribed && (
                     <>
-                      <Text as="h3" variant="headingMd">
-                        Choose your billing plan
-                      </Text>
-
+                      <div style={{ fontWeight: 700, fontSize: 15, marginBottom: 4 }}>Choose your billing plan</div>
                       <ChoiceList
-                        title="Choose your billing cadence"
+                        title="Billing cadence"
                         choices={[
-                          {
-                            label: `Monthly — $${MONTHLY_AMOUNT}/mo`,
-                            value: "MONTHLY",
-                            helpText:
-                              "Flexible monthly billing. Cancel anytime during or after the trial.",
-                          },
-                          {
-                            label: `Annual — $${ANNUAL_AMOUNT}/yr (save ~17%)`,
-                            value: "ANNUAL",
-                            helpText: "Best value. Billed annually after your free trial ends.",
-                          },
+                          { label: `Monthly — $${MONTHLY_AMOUNT}/mo`, value: "MONTHLY", helpText: "Flexible monthly billing. Cancel anytime during or after the trial." },
+                          { label: `Annual — $${ANNUAL_AMOUNT}/yr (save ~17%)`, value: "ANNUAL", helpText: "Best value. Billed annually after your free trial ends." },
                         ]}
                         selected={[cadence]}
                         onChange={(selected) => {
-                          const next =
-                            Array.isArray(selected) && selected[0]
-                              ? selected[0]
-                              : "MONTHLY";
+                          const next = Array.isArray(selected) && selected[0] ? selected[0] : "MONTHLY";
                           setCadence(next);
                           const hidden = document.getElementById("cadence-field");
                           if (hidden) hidden.value = next;
@@ -600,27 +344,12 @@ export default function Index() {
               {hasConfirmationUrl && (
                 <BlockStack gap="300">
                   <Banner title="Almost there!" tone="success">
-                    Click the button below to open Shopify’s billing confirmation in a
-                    new tab.
+                    Click the button below to open Shopify's billing confirmation in a new tab.
                   </Banner>
-
-                  <Button
-                    url={actionData.confirmationUrl}
-                    target="_blank"
-                    external
-                    onClick={() => setActiveModal(false)}
-                    variant="primary"
-                    size="large"
-                  >
+                  <Button url={actionData.confirmationUrl} target="_blank" external onClick={() => setActiveModal(false)} variant="primary" size="large">
                     Open Billing Confirmation
                   </Button>
-
-                  <a
-                    href={actionData.confirmationUrl}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    style={{ wordBreak: "break-all" }}
-                  >
+                  <a href={actionData.confirmationUrl} target="_blank" rel="noopener noreferrer" style={{ wordBreak: "break-all", fontSize: 12, color: "#6b7280" }}>
                     {actionData.confirmationUrl}
                   </a>
                 </BlockStack>
@@ -631,4 +360,4 @@ export default function Index() {
       </Modal>
     </Page>
   );
-}
\ No newline at end of file
+}
diff --git a/app/routes/app.brands.jsx b/app/routes/app.brands.jsx
index 17da40c..caf1e21 100644
--- a/app/routes/app.brands.jsx
+++ b/app/routes/app.brands.jsx
@@ -7,7 +7,6 @@ import {
   TextField,
   Checkbox,
   Button,
-  Thumbnail,
   Spinner,
   Toast,
   Frame,
@@ -25,9 +24,7 @@ const ALLOWED_STATUSES = ["ACTIVE", "TRIAL"];
 
 async function checkShopExists(shop) {
   try {
-    const resp = await fetch(
-      `https://backend.data4autos.com/checkisshopdataexists/${shop}`
-    );
+    const resp = await fetch(`https://backend.data4autos.com/checkisshopdataexists/${shop}`);
     const data = await resp.json();
     return data.status === 1;
   } catch (err) {
@@ -37,14 +34,9 @@ async function checkShopExists(shop) {
 }
 
 function getIntervalLabel(interval) {
-  switch (interval) {
-    case "ANNUAL":
-      return "Every 12 months";
-    case "EVERY_30_DAYS":
-      return "Every 30 days";
-    default:
-      return interval || "N/A";
-  }
+  if (interval === "ANNUAL") return "Every 12 months";
+  if (interval === "EVERY_30_DAYS") return "Every 30 days";
+  return interval || "N/A";
 }
 
 function formatMoney(amount, currencyCode = "USD") {
@@ -54,28 +46,17 @@ function formatMoney(amount, currencyCode = "USD") {
 
 function formatDate(date) {
   if (!date) return "N/A";
-  return new Date(date).toLocaleDateString(undefined, {
-    year: "numeric",
-    month: "short",
-    day: "numeric",
-  });
+  return new Date(date).toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" });
 }
 
 async function getSubscriptionDetails(request) {
   const { admin, session } = await authenticate.admin(request);
   const shop = session.shop;
-
   const resp = await admin.graphql(`
     query CurrentSubscriptionDetails {
       currentAppInstallation {
         activeSubscriptions {
-          id
-          name
-          status
-          test
-          createdAt
-          trialDays
-          currentPeriodEnd
+          id name status test createdAt trialDays currentPeriodEnd
           lineItems {
             id
             plan {
@@ -83,10 +64,7 @@ async function getSubscriptionDetails(request) {
                 __typename
                 ... on AppRecurringPricing {
                   interval
-                  price {
-                    amount
-                    currencyCode
-                  }
+                  price { amount currencyCode }
                 }
               }
             }
@@ -95,216 +73,87 @@ async function getSubscriptionDetails(request) {
       }
     }
   `);
-
   const result = await resp.json();
-
-  const subscriptions =
-    result?.data?.currentAppInstallation?.activeSubscriptions || [];
-
-  const subscription =
-    subscriptions.find((sub) => ALLOWED_STATUSES.includes(sub.status)) ||
-    subscriptions[0] ||
-    null;
-
-  const recurringPricing =
-    subscription?.lineItems?.find(
-      (item) =>
-        item?.plan?.pricingDetails?.__typename === "AppRecurringPricing"
-    )?.plan?.pricingDetails || null;
-
-  const isSubscribed =
-    !!subscription && ALLOWED_STATUSES.includes(subscription.status);
-
+  const subscriptions = result?.data?.currentAppInstallation?.activeSubscriptions || [];
+  const subscription = subscriptions.find((sub) => ALLOWED_STATUSES.includes(sub.status)) || subscriptions[0] || null;
+  const recurringPricing = subscription?.lineItems?.find((item) => item?.plan?.pricingDetails?.__typename === "AppRecurringPricing")?.plan?.pricingDetails || null;
+  const isSubscribed = !!subscription && ALLOWED_STATUSES.includes(subscription.status);
   return {
     shop,
     isSubscribed,
-    subscription: subscription
-      ? {
-          id: subscription.id,
-          name: subscription.name || PLAN_NAME,
-          status: subscription.status,
-          test: subscription.test ?? false,
-          createdAt: subscription.createdAt,
-          trialDays: subscription.trialDays ?? 0,
-          currentPeriodEnd: subscription.currentPeriodEnd,
-          interval: recurringPricing?.interval || null,
-          priceAmount: recurringPricing?.price?.amount || null,
-          currencyCode: recurringPricing?.price?.currencyCode || "USD",
-        }
-      : null,
+    subscription: subscription ? {
+      id: subscription.id, name: subscription.name || PLAN_NAME, status: subscription.status,
+      test: subscription.test ?? false, createdAt: subscription.createdAt,
+      trialDays: subscription.trialDays ?? 0, currentPeriodEnd: subscription.currentPeriodEnd,
+      interval: recurringPricing?.interval || null, priceAmount: recurringPricing?.price?.amount || null,
+      currencyCode: recurringPricing?.price?.currencyCode || "USD",
+    } : null,
   };
 }
 
 export const loader = async ({ request }) => {
   console.log("🚀 Loader started");
-
   let admin, session, shop;
-
   try {
     const authResult = await authenticate.admin(request);
     admin = authResult.admin;
     session = authResult.session;
     shop = session?.shop;
-
-    console.log("✅ Shopify auth success");
-    console.log("🏪 Shop:", shop);
   } catch (err) {
-    console.error("❌ Shopify authentication failed:", err);
-    return json({
-      brands: [],
-      collections: [],
-      selectedBrandsFromShopify: [],
-      shop: "",
-      error: "Shopify authentication failed",
-      isSubscribed: false,
-      subscription: null,
-    });
+    return json({ brands: [], collections: [], selectedBrandsFromShopify: [], shop: "", error: "Shopify authentication failed", isSubscribed: false, subscription: null });
   }
 
   const { isSubscribed, subscription } = await getSubscriptionDetails(request);
-
   let accessToken = "";
-
   try {
-    console.log("🔑 Fetching Turn14 access token from metafield...");
     accessToken = await getTurn14AccessTokenFromMetafield(request);
-    console.log("✅ Turn14 access token received:", accessToken ? "YES" : "EMPTY");
   } catch (err) {
-    console.error("❌ Error getting Turn14 access token:", err);
-    return json({
-      brands: [],
-      collections: [],
-      selectedBrandsFromShopify: [],
-      shop,
-      error: "Failed to fetch Turn14 access token",
-      isSubscribed,
-      subscription,
-    });
+    return json({ brands: [], collections: [], selectedBrandsFromShopify: [], shop, error: "Failed to fetch Turn14 access token", isSubscribed, subscription });
   }
 
   let brandJson;
   try {
-    const brandRes = await fetch("https://turn14.data4autos.com/v1/brands", {
-      headers: {
-        Authorization: `Bearer ${accessToken}`,
-        "Content-Type": "application/json",
-      },
-    });
-
+    const brandRes = await fetch("https://turn14.data4autos.com/v1/brands", { headers: { Authorization: `Bearer ${accessToken}`, "Content-Type": "application/json" } });
     brandJson = await brandRes.json();
-
-    if (!brandRes.ok) {
-      return json({
-        brands: [],
-        collections: [],
-        selectedBrandsFromShopify: [],
-        shop,
-        error: brandJson?.error || "Failed to fetch brands",
-        isSubscribed,
-        subscription,
-      });
-    }
+    if (!brandRes.ok) return json({ brands: [], collections: [], selectedBrandsFromShopify: [], shop, error: brandJson?.error || "Failed to fetch brands", isSubscribed, subscription });
   } catch (err) {
-    console.error("❌ Exception while fetching Turn14 brands:", err);
-    return json({
-      brands: [],
-      collections: [],
-      selectedBrandsFromShopify: [],
-      shop,
-      error: "Turn14 brands fetch crashed",
-      isSubscribed,
-      subscription,
-    });
+    return json({ brands: [], collections: [], selectedBrandsFromShopify: [], shop, error: "Turn14 brands fetch crashed", isSubscribed, subscription });
   }
 
   let collections = [];
   try {
-    const gqlRaw = await admin.graphql(`
-      {
-        collections(first: 100) {
-          edges {
-            node {
-              id
-              title
-            }
-          }
-        }
-      }
-    `);
-
+    const gqlRaw = await admin.graphql(`{ collections(first: 100) { edges { node { id title } } } }`);
     const gql = await gqlRaw.json();
     collections = gql?.data?.collections?.edges?.map((e) => e.node) || [];
-  } catch (err) {
-    console.error("❌ Error fetching Shopify collections:", err);
-  }
+  } catch (err) {}
 
   let selectedBrands = [];
-
   try {
-    const res = await admin.graphql(`
-      {
-        shop {
-          metafield(namespace: "turn14", key: "selected_brands") {
-            value
-          }
-        }
-      }
-    `);
-
+    const res = await admin.graphql(`{ shop { metafield(namespace: "turn14", key: "selected_brands") { value } } }`);
     const data = await res.json();
     const rawValue = data?.data?.shop?.metafield?.value;
+    if (rawValue) selectedBrands = JSON.parse(rawValue);
+  } catch (err) {}
 
-    if (rawValue) {
-      selectedBrands = JSON.parse(rawValue);
-    }
-  } catch (err) {
-    console.error("❌ Failed parsing selected_brands metafield:", err);
-  }
-
-  return json({
-    brands: brandJson?.data || [],
-    collections,
-    selectedBrandsFromShopify: selectedBrands,
-    shop,
-    isSubscribed,
-    subscription,
-  });
+  return json({ brands: brandJson?.data || [], collections, selectedBrandsFromShopify: selectedBrands, shop, isSubscribed, subscription });
 };
 
 export const action = async ({ request }) => {
   const { isSubscribed } = await getSubscriptionDetails(request);
-
-  if (!isSubscribed) {
-    return json(
-      {
-        error:
-          "An active subscription or free trial is required to save brand collections.",
-      },
-      { status: 403 }
-    );
-  }
+  if (!isSubscribed) return json({ error: "An active subscription or free trial is required to save brand collections." }, { status: 403 });
 
   const formData = await request.formData();
   const selectedBrands = JSON.parse(formData.get("selectedBrands") || "[]");
   const selectedOldBrands = JSON.parse(formData.get("selectedOldBrands") || "[]");
-
   const { session } = await authenticate.admin(request);
   const shop = session.shop;
 
-  selectedBrands.forEach((brand) => {
-    delete brand.pricegroups;
-  });
-
-  selectedOldBrands.forEach((brand) => {
-    delete brand.pricegroups;
-  });
+  selectedBrands.forEach((brand) => { delete brand.pricegroups; });
+  selectedOldBrands.forEach((brand) => { delete brand.pricegroups; });
 
   const resp = await fetch("https://backend.data4autos.com/managebrands", {
     method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      "shop-domain": shop,
-    },
+    headers: { "Content-Type": "application/json", "shop-domain": shop },
     body: JSON.stringify({ shop, selectedBrands, selectedOldBrands }),
   });
 
@@ -312,47 +161,31 @@ export const action = async ({ request }) => {
     const err = await resp.text();
     return json({ error: err }, { status: resp.status });
   }
-
   const { processId, status } = await resp.json();
   return json({ processId, status });
 };
 
 export default function BrandsPage() {
   const navigate = useNavigate();
-  const {
-    brands = [],
-    selectedBrandsFromShopify = [],
-    shop = "",
-    error,
-    isSubscribed = false,
-    subscription = null,
-  } = useLoaderData() || {};
-
+  const { brands = [], selectedBrandsFromShopify = [], shop = "", error, isSubscribed = false, subscription = null } = useLoaderData() || {};
   const actionData = useActionData() || {};
 
   const [selectedIdsold, setSelectedIdsold] = useState([]);
-  const [selectedIds, setSelectedIds] = useState(() =>
-    (selectedBrandsFromShopify ?? []).map((b) => b.id)
-  );
+  const [selectedIds, setSelectedIds] = useState(() => (selectedBrandsFromShopify ?? []).map((b) => b.id));
   const [search, setSearch] = useState("");
   const [filteredBrands, setFilteredBrands] = useState(brands);
   const [toastActive, setToastActive] = useState(false);
   const [polling, setPolling] = useState(false);
   const [status, setStatus] = useState(actionData.status || "");
   const [Turn14Enabled, setTurn14Enabled] = useState(null);
+  const [saving, setSaving] = useState(false);
 
   useEffect(() => {
     if (!shop) return;
-
-    (async () => {
-      const result = await checkShopExists(shop);
-      setTurn14Enabled(result);
-    })();
+    (async () => { const result = await checkShopExists(shop); setTurn14Enabled(result); })();
   }, [shop]);
 
-  useEffect(() => {
-    setSelectedIdsold(selectedIds);
-  }, [toastActive]);
+  useEffect(() => { setSelectedIdsold(selectedIds); }, [toastActive]);
 
   useEffect(() => {
     const term = search.toLowerCase();
@@ -360,157 +193,64 @@ export default function BrandsPage() {
   }, [search, brands]);
 
   useEffect(() => {
-    if (actionData.status) {
-      setStatus(actionData.status);
-      setToastActive(true);
-    }
-  }, [actionData.status]);
+    if (actionData.status) { setStatus(actionData.status); setToastActive(true); setSaving(false); }
+    if (actionData.error) setSaving(false);
+  }, [actionData.status, actionData.error]);
 
   const checkStatus = async () => {
     if (!actionData.processId) return;
     setPolling(true);
-    const resp = await fetch(
-      `https://backend.data4autos.com/managebrands/status/${actionData.processId}`,
-      { headers: { "shop-domain": window.shopify.shop || "" } }
-    );
+    const resp = await fetch(`https://backend.data4autos.com/managebrands/status/${actionData.processId}`, { headers: { "shop-domain": window.shopify?.shop || "" } });
     const jsonBody = await resp.json();
-    setStatus(
-      jsonBody.status + (jsonBody.detail ? ` (${jsonBody.detail})` : "")
-    );
+    setStatus(jsonBody.status + (jsonBody.detail ? ` (${jsonBody.detail})` : ""));
     setPolling(false);
   };
 
   const toggleSelect = (id) => {
     if (!isSubscribed) return;
-
-    setSelectedIds((prev) =>
-      prev.includes(id) ? prev.filter((i) => i !== id) : [...prev, id]
-    );
+    setSelectedIds((prev) => prev.includes(id) ? prev.filter((i) => i !== id) : [...prev, id]);
   };
 
-  const allFilteredSelected =
-    filteredBrands.length > 0 &&
-    filteredBrands.every((b) => selectedIds.includes(b.id));
-
+  const allFilteredSelected = filteredBrands.length > 0 && filteredBrands.every((b) => selectedIds.includes(b.id));
   const toggleSelectAll = () => {
     if (!isSubscribed) return;
-
     const ids = filteredBrands.map((b) => b.id);
-    if (allFilteredSelected) {
-      setSelectedIds((prev) => prev.filter((id) => !ids.includes(id)));
-    } else {
-      setSelectedIds((prev) => Array.from(new Set([...prev, ...ids])));
-    }
+    if (allFilteredSelected) setSelectedIds((prev) => prev.filter((id) => !ids.includes(id)));
+    else setSelectedIds((prev) => Array.from(new Set([...prev, ...ids])));
   };
 
-  let isSubmitting = false;
-  if (actionData.status) {
-    isSubmitting = !actionData.status && !actionData.error && !actionData.processId;
-  }
-
-  const toastMarkup = toastActive ? (
-    <Toast
-      content="Collections updated successfully!"
-      onDismiss={() => setToastActive(false)}
-    />
-  ) : null;
-
-  const selectedBrands = brands.filter((b) => selectedIds.includes(b.id));
-  const selectedOldBrands = brands.filter((b) => selectedIdsold.includes(b.id));
-
-  const shopDomain = (shop || "").split(".")[0];
-
-  const items = [
-    {
-      icon: "⚙️",
-      text: "Manage API settings",
-      link: `https://admin.shopify.com/store/${shopDomain}/apps/d4a-turn14/app/settings`,
-    },
-    {
-      icon: "🏷️",
-      text: "Browse and import available brands",
-      link: `https://admin.shopify.com/store/${shopDomain}/apps/d4a-turn14/app/brands`,
-    },
-    {
-      icon: "📦",
-      text: "Sync brand collections to Shopify",
-      link: `https://admin.shopify.com/store/${shopDomain}/apps/d4a-turn14/app/managebrand`,
-    },
-    {
-      icon: "🔐",
-      text: "Handle secure Turn14 login credentials",
-      link: `https://admin.shopify.com/store/${shopDomain}/apps/d4a-turn14/app/help`,
-    },
-  ];
-
   const trialDaysLeft = useMemo(() => {
-    if (!subscription?.trialDays || !subscription?.createdAt) return null;
-    if (subscription.status !== "TRIAL") return null;
-
+    if (!subscription?.trialDays || !subscription?.createdAt || subscription.status !== "TRIAL") return null;
     const created = new Date(subscription.createdAt);
     const trialEnd = new Date(created);
     trialEnd.setDate(trialEnd.getDate() + subscription.trialDays);
-
-    const now = new Date();
-    const msLeft = trialEnd.getTime() - now.getTime();
-    const daysLeft = Math.ceil(msLeft / (1000 * 60 * 60 * 24));
-
-    return Math.max(0, daysLeft);
+    return Math.max(0, Math.ceil((trialEnd.getTime() - Date.now()) / (1000 * 60 * 60 * 24)));
   }, [subscription]);
 
+  const selectedBrands = brands.filter((b) => selectedIds.includes(b.id));
+  const selectedOldBrands = brands.filter((b) => selectedIdsold.includes(b.id));
+  const shopDomain = (shop || "").split(".")[0];
+
   if (Turn14Enabled === false) {
     return (
       <Frame>
         <Page fullWidth>
-          <TitleBar title="Data4Autos Turn14 Integration" background="critical" />
-          <Layout>
-            <Layout.Section>
-              <Card>
-                <div style={{ padding: 24, textAlign: "center" }}>
-                  <Text as="h1" variant="headingLg">
-                    Turn14 isn’t connected yet
-                  </Text>
-                  <div style={{ marginTop: 8 }}>
-                    <Text as="p" variant="bodyMd">
-                      This shop hasn’t been configured with Turn14 / Data4Autos. To get started, open Settings and complete the connection.
-                    </Text>
-                  </div>
-
-                  <div style={{ marginTop: 24, display: "flex", gap: 16, justifyContent: "center", flexWrap: "wrap" }}>
-                    <a href={items[0].link} target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none" }}>
-                      <Text as="h6" variant="headingMd" fontWeight="bold">
-                        {items[0].icon} {items[0].text}
-                      </Text>
-                    </a>
-                    <a href={items[3].link} target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none" }}>
-                      <Text as="h6" variant="headingMd" fontWeight="bold">
-                        {items[3].icon} {items[3].text}
-                      </Text>
-                    </a>
-                  </div>
-
-                  <div style={{ marginTop: 28 }}>
-                    <Text as="p" variant="bodySm" tone="subdued">
-                      Once connected, you’ll be able to browse brands and sync collections.
-                    </Text>
-                  </div>
-
-                  <div style={{ marginTop: 20, display: "flex", gap: 16, justifyContent: "center", flexWrap: "wrap" }}>
-                    <a href={items[1].link} target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none" }}>
-                      <Text as="p" variant="bodyMd">
-                        {items[1].icon} {items[1].text}
-                      </Text>
-                    </a>
-                    <a href={items[2].link} target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none" }}>
-                      <Text as="p" variant="bodyMd">
-                        {items[2].icon} {items[2].text}
-                      </Text>
-                    </a>
-                  </div>
-                </div>
-              </Card>
-            </Layout.Section>
-          </Layout>
+          <TitleBar title="Data4Autos Turn14 Integration" />
+          <div style={{ background: "linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%)", borderRadius: 16, padding: "28px 32px", marginBottom: 24, color: "#fff" }}>
+            <div style={{ fontSize: 22, fontWeight: 800 }}>🏷️ Brand Selection</div>
+            <div style={{ fontSize: 14, opacity: 0.8, marginTop: 4 }}>{shop}</div>
+          </div>
+          <Card>
+            <div style={{ padding: 48, textAlign: "center" }}>
+              <div style={{ fontSize: 48, marginBottom: 12 }}>🔌</div>
+              <Text as="h1" variant="headingLg">Turn14 not connected yet</Text>
+              <div style={{ marginTop: 8, color: "#6b7280", marginBottom: 24 }}>Complete the connection in Settings before browsing brands.</div>
+              <div style={{ display: "flex", gap: 12, justifyContent: "center" }}>
+                <Button variant="primary" onClick={() => navigate("/app/settings")}>Go to Settings</Button>
+                <Button onClick={() => navigate("/app/help")}>View Help</Button>
+              </div>
+            </div>
+          </Card>
         </Page>
       </Frame>
     );
@@ -519,211 +259,131 @@ export default function BrandsPage() {
   return (
     <Frame>
       <Page fullWidth>
-        <TitleBar title="Data4Autos Turn14 Integration" background="primary" />
+        <TitleBar title="Data4Autos Turn14 Integration" />
 
-        <div style={{ marginBottom: 16 }}>
-          <Text as="h1" variant="headingLg">
-            Data4Autos Turn14 Brands List
-          </Text>
+        {/* Header */}
+        <div style={{ background: "linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%)", borderRadius: 16, padding: "28px 32px", marginBottom: 24, color: "#fff", display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 12 }}>
+          <div>
+            <div style={{ fontSize: 22, fontWeight: 800 }}>🏷️ Brand Selection</div>
+            <div style={{ fontSize: 14, opacity: 0.8, marginTop: 4 }}>{filteredBrands.length} brands available · {selectedIds.length} selected</div>
+          </div>
+          {!isSubscribed && (
+            <div style={{ background: "rgba(251,191,36,0.2)", border: "1px solid rgba(251,191,36,0.4)", borderRadius: 8, padding: "8px 14px", fontSize: 13, color: "#fbbf24", fontWeight: 700 }}>
+              ⚠️ Subscription required
+            </div>
+          )}
         </div>
 
-        <Layout>
-          {!isSubscribed && (
-            <Layout.Section>
-              <Banner title="Subscription required" tone="warning">
-                <p>
-                  This feature is available only for merchants with an active
-                  subscription or during the free trial period.
-                </p>
-                <div style={{ marginTop: 12 }}>
-                  <p>
-                    <strong>Current status:</strong>{" "}
-                    {subscription?.status || "Not subscribed"}
-                  </p>
-                  <p>
-                    <strong>Plan:</strong> {subscription?.name || PLAN_NAME}
-                  </p>
-                  <p>
-                    <strong>Billing:</strong> {getIntervalLabel(subscription?.interval)}
-                  </p>
-                  <p>
-                    <strong>Price:</strong>{" "}
-                    {formatMoney(
-                      subscription?.priceAmount,
-                      subscription?.currencyCode
-                    )}
-                  </p>
-                  <p>
-                    <strong>Next renewal / period end:</strong>{" "}
-                    {formatDate(subscription?.currentPeriodEnd)}
-                  </p>
-                  <p>
-                    <strong>Trial days left:</strong>{" "}
-                    {trialDaysLeft != null ? `${trialDaysLeft} day(s)` : "N/A"}
-                  </p>
-                </div>
-                <div style={{ marginTop: 16 }}>
-                  <InlineStack gap="300">
-                    <Button variant="primary" onClick={() => navigate("/app")}>
-                      Go to Home Page
-                    </Button>
-                  </InlineStack>
-                </div>
-              </Banner>
-            </Layout.Section>
-          )}
+        {/* Subscription warning */}
+        {!isSubscribed && (
+          <div style={{ background: "#fffbeb", border: "1px solid #fde68a", borderRadius: 12, padding: "16px 20px", marginBottom: 20 }}>
+            <div style={{ fontWeight: 700, color: "#b45309", marginBottom: 6 }}>⚠️ Active subscription required</div>
+            <div style={{ fontSize: 13, color: "#92400e", marginBottom: 12 }}>Brand selection is only available with an active subscription or free trial.</div>
+            <Button variant="primary" onClick={() => navigate("/app")}>Manage Subscription</Button>
+          </div>
+        )}
 
-          {error && (
-            <Layout.Section>
-              <Banner title="Error" tone="critical">
-                <p>{error}</p>
-              </Banner>
-            </Layout.Section>
-          )}
+        {error && (
+          <div style={{ background: "#fff1f2", border: "1px solid #fecdd3", borderRadius: 12, padding: "14px 18px", marginBottom: 20, color: "#dc2626" }}>
+            ⛔ {error}
+          </div>
+        )}
 
-          {actionData?.error && (
-            <Layout.Section>
-              <Banner title="Action blocked" tone="critical">
-                <p>{actionData.error}</p>
-              </Banner>
-            </Layout.Section>
-          )}
+        {actionData?.error && (
+          <div style={{ background: "#fff1f2", border: "1px solid #fecdd3", borderRadius: 12, padding: "14px 18px", marginBottom: 20, color: "#dc2626" }}>
+            ⛔ {actionData.error}
+          </div>
+        )}
 
-          <Layout.Section>
-            <div
-              style={{
-                position: "sticky",
-                top: 0,
-                zIndex: 10,
-                background: "#ffffff",
-                padding: "12px 16px",
-                borderRadius: 12,
-                boxShadow: "0 1px 6px rgba(0,0,0,0.08)",
-                marginBottom: 20,
-              }}
-            >
-              <div
-                style={{
-                  display: "flex",
-                  justifyContent: "space-between",
-                  alignItems: "center",
-                  gap: 16,
-                  flexWrap: "wrap",
-                }}
-              >
-                <div style={{ display: "flex", gap: 16, alignItems: "center", flexWrap: "wrap" }}>
-                  {(actionData?.processId || false) && (
-                    <div>
-                      <p>
-                        <strong>Process ID:</strong> {actionData.processId}
-                      </p>
-                      <p>
-                        <strong>Status:</strong> {status || "—"}
-                      </p>
-                      <Button onClick={checkStatus} loading={polling}>
-                        Check Status
-                      </Button>
-                    </div>
-                  )}
-
-                  <div style={{ minWidth: 260 }}>
-                    <TextField
-                      labelHidden
-                      label="Search brands"
-                      value={search}
-                      onChange={setSearch}
-                      placeholder="Type brand name…"
-                      autoComplete="off"
-                      disabled={!isSubscribed}
-                    />
-                  </div>
-
-                  <Checkbox
-                    label="Select All"
-                    checked={allFilteredSelected}
-                    onChange={toggleSelectAll}
-                    disabled={!isSubscribed}
-                  />
-                </div>
-
-                <Form
-                  method="post"
-                  style={{ display: "flex", alignItems: "center", gap: 8 }}
-                >
-                  <input
-                    type="hidden"
-                    name="selectedBrands"
-                    value={JSON.stringify(selectedBrands)}
-                  />
-                  <input
-                    type="hidden"
-                    name="selectedOldBrands"
-                    value={JSON.stringify(selectedOldBrands)}
-                  />
-                  <Button
-                    primary
-                    submit
-                    disabled={isSubmitting || !isSubscribed}
-                    size="large"
-                    variant="primary"
-                  >
-                    {isSubmitting ? <Spinner size="small" /> : "Save Collections"}
-                  </Button>
-                </Form>
+        {/* Sticky toolbar */}
+        <div style={{ position: "sticky", top: 0, zIndex: 10, background: "#fff", borderRadius: 12, boxShadow: "0 2px 12px rgba(0,0,0,0.08)", padding: "14px 20px", marginBottom: 20, display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
+          <div style={{ display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
+            <div style={{ minWidth: 280 }}>
+              <TextField
+                labelHidden
+                label="Search brands"
+                value={search}
+                onChange={setSearch}
+                placeholder="🔍 Search brands…"
+                autoComplete="off"
+                disabled={!isSubscribed}
+              />
+            </div>
+            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+              <Checkbox label="" checked={allFilteredSelected} onChange={toggleSelectAll} disabled={!isSubscribed} />
+              <span style={{ fontSize: 13, fontWeight: 600, color: "#374151", cursor: "pointer" }} onClick={toggleSelectAll}>Select All</span>
+            </div>
+            <div style={{ fontSize: 13, color: "#6b7280" }}>
+              <span style={{ fontWeight: 700, color: "#1d4ed8" }}>{selectedIds.length}</span> selected
+            </div>
+            {(actionData?.processId) && (
+              <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
+                <div style={{ fontSize: 13, color: "#374151" }}><strong>Status:</strong> {status || "—"}</div>
+                <Button onClick={checkStatus} loading={polling} size="slim">Refresh</Button>
               </div>
-            </div>
-          </Layout.Section>
+            )}
+          </div>
 
-          <Layout.Section>
-            <div
-              style={{
-                display: "grid",
-                gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))",
-                gap: 16,
-              }}
+          <Form method="post" onSubmit={() => setSaving(true)}>
+            <input type="hidden" name="selectedBrands" value={JSON.stringify(selectedBrands)} />
+            <input type="hidden" name="selectedOldBrands" value={JSON.stringify(selectedOldBrands)} />
+            <button
+              type="submit"
+              disabled={saving || !isSubscribed}
+              style={{ background: saving || !isSubscribed ? "#9ca3af" : "linear-gradient(135deg, #1d4ed8, #2563eb)", border: "none", borderRadius: 8, color: "#fff", padding: "10px 22px", cursor: saving || !isSubscribed ? "not-allowed" : "pointer", fontWeight: 700, fontSize: 14, display: "flex", alignItems: "center", gap: 8 }}
             >
-              {filteredBrands.map((brand) => (
-                <Card key={brand.id} sectioned>
-                  <div style={{ position: "relative", textAlign: "center" }}>
-                    <div style={{ position: "absolute", top: 0, right: 0 }}>
-                      <Checkbox
-                        label=""
-                        checked={selectedIds.includes(brand.id)}
-                        onChange={() => toggleSelect(brand.id)}
-                        disabled={!isSubscribed}
-                      />
-                    </div>
+              {saving && <Spinner size="small" />}
+              {saving ? "Saving…" : `Save ${selectedIds.length} Collections`}
+            </button>
+          </Form>
+        </div>
 
-                    <div style={{ display: "flex", justifyContent: "center" }}>
-                      <Thumbnail
-                        source={
-                          brand.logo ||
-                          "https://cdn.shopify.com/s/files/1/0757/9955/files/no-image_280x@2x.png"
-                        }
-                        alt={brand.name}
-                        size="large"
-                      />
-                    </div>
-
-                    <div
-                      style={{
-                        marginTop: "15px",
-                        fontWeight: "600",
-                        fontSize: "16px",
-                        lineHeight: "26px",
-                      }}
-                    >
-                      {brand.name}
-                    </div>
+        {/* Brand grid */}
+        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: 14 }}>
+          {filteredBrands.map((brand) => {
+            const isSelected = selectedIds.includes(brand.id);
+            return (
+              <div
+                key={brand.id}
+                onClick={() => toggleSelect(brand.id)}
+                style={{ background: isSelected ? "#eff6ff" : "#fff", border: `2px solid ${isSelected ? "#2563eb" : "#e5e7eb"}`, borderRadius: 12, padding: "16px 14px", cursor: isSubscribed ? "pointer" : "default", position: "relative", transition: "all 0.15s", boxShadow: isSelected ? "0 0 0 3px rgba(37,99,235,0.12)" : "none" }}
+              >
+                {/* Checkbox badge */}
+                <div style={{ position: "absolute", top: 10, right: 10 }}>
+                  <div style={{ width: 20, height: 20, borderRadius: "50%", background: isSelected ? "#2563eb" : "#e5e7eb", border: `2px solid ${isSelected ? "#2563eb" : "#d1d5db"}`, display: "flex", alignItems: "center", justifyContent: "center" }}>
+                    {isSelected && <span style={{ color: "#fff", fontSize: 11 }}>✓</span>}
                   </div>
-                </Card>
-              ))}
-            </div>
-          </Layout.Section>
-        </Layout>
+                </div>
 
-        {toastMarkup}
+                <div style={{ display: "flex", justifyContent: "center", marginBottom: 12 }}>
+                  <img
+                    src={brand.logo || "https://cdn.shopify.com/s/files/1/0757/9955/files/no-image_280x@2x.png"}
+                    alt={brand.name}
+                    style={{ width: 72, height: 72, objectFit: "contain", borderRadius: 8 }}
+                  />
+                </div>
+
+                <div style={{ textAlign: "center", fontWeight: 700, fontSize: 14, color: isSelected ? "#1d4ed8" : "#374151", lineHeight: 1.3 }}>
+                  {brand.name}
+                </div>
+                <div style={{ textAlign: "center", fontSize: 11, color: "#9ca3af", marginTop: 4 }}>ID: {brand.id}</div>
+              </div>
+            );
+          })}
+        </div>
+
+        {filteredBrands.length === 0 && (
+          <div style={{ textAlign: "center", padding: 48, color: "#9ca3af" }}>
+            <div style={{ fontSize: 36, marginBottom: 12 }}>🔍</div>
+            <div style={{ fontSize: 16, fontWeight: 600 }}>No brands found</div>
+            <div style={{ fontSize: 13, marginTop: 6 }}>Try a different search term</div>
+          </div>
+        )}
+
+        {toastActive && (
+          <Toast content="Collections saved successfully!" onDismiss={() => setToastActive(false)} />
+        )}
       </Page>
     </Frame>
   );
-}
\ No newline at end of file
+}
diff --git a/app/routes/app.dashboard.jsx b/app/routes/app.dashboard.jsx
new file mode 100644
index 0000000..b669fa8
--- /dev/null
+++ b/app/routes/app.dashboard.jsx
@@ -0,0 +1,488 @@
+// app/routes/app.dashboard.jsx — Live import progress dashboard
+import { useEffect, useState, useRef, useCallback } from "react";
+import { json } from "@remix-run/node";
+import { useLoaderData, useNavigate } from "@remix-run/react";
+import { Page, Layout, Card, Text, BlockStack, InlineStack, Badge, ProgressBar, Button, Spinner, Box, Divider } from "@shopify/polaris";
+import { TitleBar } from "@shopify/app-bridge-react";
+import { authenticate } from "../shopify.server";
+
+const BACKEND = "https://backend.data4autos.com";
+const POLL_INTERVAL = 3000;
+
+export const loader = async ({ request }) => {
+  const { session } = await authenticate.admin(request);
+  return json({ shop: session.shop });
+};
+
+// ─── helpers ────────────────────────────────────────────────────────────────
+
+function elapsed(startedAt) {
+  if (!startedAt) return "—";
+  const secs = Math.floor((Date.now() - new Date(startedAt).getTime()) / 1000);
+  if (secs < 60) return `${secs}s`;
+  const m = Math.floor(secs / 60), s = secs % 60;
+  if (m < 60) return `${m}m ${s}s`;
+  const h = Math.floor(m / 60), mm = m % 60;
+  return `${h}h ${mm}m`;
+}
+
+function fmt(d) {
+  if (!d) return "—";
+  return new Date(d).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" });
+}
+
+function statusTone(status) {
+  if (!status) return "subdued";
+  if (status === "done") return "success";
+  if (status === "error") return "critical";
+  if (status === "cancelled") return "warning";
+  if (status === "importing" || status === "fetching_products") return "info";
+  return "subdued";
+}
+
+function statusLabel(status) {
+  const map = {
+    started: "Starting",
+    fetching_products: "Fetching Products",
+    importing: "Importing",
+    done: "Completed",
+    error: "Error",
+    cancelled: "Cancelled",
+    cancelling: "Cancelling…",
+  };
+  return map[status] || (status || "Unknown");
+}
+
+function stepLabel(step) {
+  const map = {
+    started: "Initialising",
+    fetching_products: "Fetching products from Turn14",
+    importing: "Creating / updating products in Shopify",
+    completed: "Import complete",
+    error: "Import stopped — error",
+    cancelled: "Import cancelled",
+  };
+  return map[step] || step || "—";
+}
+
+function parseLogTone(line) {
+  if (!line) return "subdued";
+  if (line.includes("[PRODUCT-OK]") || line.includes("[IMPORT-DONE]") || line.includes("[FETCH-OK]")) return "success";
+  if (line.includes("[PRODUCT-FAIL]") || line.includes("[ERROR]") || line.includes("[FETCH-FAIL]")) return "critical";
+  if (line.includes("[SKIP]")) return "warning";
+  if (line.includes("[PRODUCT]") || line.includes("[STATS]")) return "info";
+  return "subdued";
+}
+
+function parseLogTitle(line) {
+  if (!line) return "Log";
+  if (line.includes("[PRODUCT-OK]")) return "Product created";
+  if (line.includes("[PRODUCT-FAIL]")) return "Product failed";
+  if (line.includes("[SKIP]")) return "Skipped duplicate";
+  if (line.includes("[IMPORT-DONE]")) return "Import complete";
+  if (line.includes("[IMPORT-START]")) return "Import started";
+  if (line.includes("[FETCH-OK]")) return "Turn14 fetch success";
+  if (line.includes("[FETCH-FAIL]")) return "Turn14 fetch failed";
+  if (line.includes("[FETCH]")) return "Fetching from Turn14";
+  if (line.includes("[STATS]")) return "Progress update";
+  if (line.includes("[PRODUCT]")) return "Processing product";
+  if (line.includes("[ERROR]")) return "Error";
+  if (line.includes("[CANCEL]")) return "Cancelled";
+  return "Activity";
+}
+
+const toneColors = {
+  success: { bg: "#f0fdf4", border: "#bbf7d0", dot: "#16a34a", text: "#166534" },
+  critical: { bg: "#fff1f2", border: "#fecdd3", dot: "#dc2626", text: "#991b1b" },
+  warning:  { bg: "#fffbeb", border: "#fde68a", dot: "#d97706", text: "#92400e" },
+  info:     { bg: "#eff6ff", border: "#bfdbfe", dot: "#2563eb", text: "#1e40af" },
+  subdued:  { bg: "#f9fafb", border: "#e5e7eb", dot: "#9ca3af", text: "#6b7280" },
+};
+
+// ─── StatCard ────────────────────────────────────────────────────────────────
+function StatCard({ label, value, sub, accent }) {
+  const accents = {
+    blue:   { bg: "#eff6ff", border: "#bfdbfe", val: "#1d4ed8" },
+    green:  { bg: "#f0fdf4", border: "#bbf7d0", val: "#15803d" },
+    red:    { bg: "#fff1f2", border: "#fecdd3", val: "#dc2626" },
+    amber:  { bg: "#fffbeb", border: "#fde68a", val: "#b45309" },
+    purple: { bg: "#faf5ff", border: "#e9d5ff", val: "#7c3aed" },
+    slate:  { bg: "#f8fafc", border: "#e2e8f0", val: "#475569" },
+  };
+  const c = accents[accent] || accents.slate;
+  return (
+    <div style={{ background: c.bg, border: `1px solid ${c.border}`, borderRadius: 12, padding: "18px 20px", minWidth: 0 }}>
+      <div style={{ fontSize: 12, fontWeight: 600, color: "#6b7280", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 6 }}>{label}</div>
+      <div style={{ fontSize: 28, fontWeight: 800, color: c.val, lineHeight: 1 }}>{value ?? "—"}</div>
+      {sub && <div style={{ fontSize: 12, color: "#9ca3af", marginTop: 5 }}>{sub}</div>}
+    </div>
+  );
+}
+
+// ─── StageRow ─────────────────────────────────────────────────────────────────
+function StageRow({ label, status, value, meta }) {
+  const dotColor = status === "done" ? "#16a34a" : status === "active" ? "#2563eb" : status === "error" ? "#dc2626" : "#d1d5db";
+  const textColor = status === "active" ? "#1d4ed8" : status === "done" ? "#166534" : "#6b7280";
+  return (
+    <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "10px 0", borderBottom: "1px solid #f3f4f6" }}>
+      <div style={{ width: 10, height: 10, borderRadius: "50%", background: dotColor, flexShrink: 0, boxShadow: status === "active" ? `0 0 0 3px ${dotColor}33` : "none" }} />
+      <div style={{ flex: 1, fontSize: 14, fontWeight: status === "active" ? 700 : 500, color: textColor }}>{label}</div>
+      {meta && <div style={{ fontSize: 12, color: "#9ca3af" }}>{meta}</div>}
+      {value && (
+        <div style={{ background: status === "done" ? "#f0fdf4" : status === "active" ? "#eff6ff" : "#f3f4f6", border: `1px solid ${status === "done" ? "#bbf7d0" : status === "active" ? "#bfdbfe" : "#e5e7eb"}`, borderRadius: 20, padding: "2px 10px", fontSize: 13, fontWeight: 700, color: status === "done" ? "#15803d" : status === "active" ? "#1d4ed8" : "#6b7280" }}>
+          {value}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── LogEntry ────────────────────────────────────────────────────────────────
+function LogEntry({ entry }) {
+  const tone = parseLogTone(entry.line);
+  const title = parseLogTitle(entry.line);
+  const c = toneColors[tone];
+  const cleanLine = entry.line.replace(/^\[[\w-]+\]\s*/, "");
+  return (
+    <div style={{ display: "flex", gap: 10, padding: "8px 0", borderBottom: "1px solid #f9fafb", alignItems: "flex-start" }}>
+      <div style={{ width: 8, height: 8, borderRadius: "50%", background: c.dot, marginTop: 5, flexShrink: 0 }} />
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <div style={{ fontSize: 12, fontWeight: 700, color: c.text }}>{title}</div>
+        <div style={{ fontSize: 12, color: "#6b7280", wordBreak: "break-word", marginTop: 1 }}>{cleanLine}</div>
+      </div>
+      <div style={{ fontSize: 11, color: "#9ca3af", flexShrink: 0, paddingTop: 1 }}>{fmt(entry.at)}</div>
+    </div>
+  );
+}
+
+// ─── Main component ──────────────────────────────────────────────────────────
+export default function Dashboard() {
+  const { shop } = useLoaderData();
+  const navigate = useNavigate();
+
+  const [jobs, setJobs] = useState([]);
+  const [selectedJobId, setSelectedJobId] = useState(null);
+  const [job, setJob] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [tick, setTick] = useState(0);
+  const [now, setNow] = useState(Date.now());
+  const pollRef = useRef(null);
+
+  // Fetch job list
+  const fetchJobs = useCallback(async () => {
+    try {
+      const resp = await fetch(`${BACKEND}/jobs?shop=${encodeURIComponent(shop)}`);
+      const data = await resp.json();
+      const list = data.jobs || [];
+      setJobs(list);
+      if (!selectedJobId && list.length > 0) setSelectedJobId(list[0].id);
+    } catch {}
+  }, [shop, selectedJobId]);
+
+  // Fetch selected job detail
+  const fetchJob = useCallback(async (id) => {
+    if (!id) return;
+    try {
+      const resp = await fetch(`${BACKEND}/jobs/${id}`);
+      if (!resp.ok) return;
+      const j = await resp.json();
+      setJob(j);
+    } catch {}
+  }, []);
+
+  // Initial load
+  useEffect(() => {
+    (async () => {
+      setLoading(true);
+      await fetchJobs();
+      setLoading(false);
+    })();
+  }, []);
+
+  // Select job when list arrives
+  useEffect(() => {
+    if (!selectedJobId && jobs.length > 0) setSelectedJobId(jobs[0].id);
+  }, [jobs]);
+
+  // Poll selected job
+  useEffect(() => {
+    if (!selectedJobId) return;
+    fetchJob(selectedJobId);
+    pollRef.current = setInterval(async () => {
+      await fetchJob(selectedJobId);
+      setTick(t => t + 1);
+    }, POLL_INTERVAL);
+    return () => clearInterval(pollRef.current);
+  }, [selectedJobId]);
+
+  // Elapsed timer
+  useEffect(() => {
+    const t = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(t);
+  }, []);
+
+  const handleCancel = async () => {
+    if (!selectedJobId) return;
+    await fetch(`${BACKEND}/jobs/${selectedJobId}/cancel`, { method: "POST" });
+    fetchJob(selectedJobId);
+  };
+
+  const isRunning = job && (job.status === "importing" || job.status === "fetching_products" || job.status === "started");
+
+  const s = job?.liveStats || { total: 0, processed: 0, created: 0, skipped: 0, failed: 0, remaining: 0, successRate: 0 };
+  const progress = s.total > 0 ? Math.round((s.processed / s.total) * 100) : 0;
+  const elapsedStr = job?.startedAt ? elapsed(job.startedAt) : "—";
+
+  // Stage states
+  const stageStatus = (stageName) => {
+    if (!job) return "pending";
+    if (job.status === "error" && job.step === stageName) return "error";
+    if (job.step === stageName || job.status === stageName) return "active";
+    const order = ["started", "fetching_products", "importing", "completed"];
+    const jobIdx = order.indexOf(job.step || job.status);
+    const stageIdx = order.indexOf(stageName);
+    if (jobIdx > stageIdx) return "done";
+    return "pending";
+  };
+
+  const recentLogs = [...(job?.logs || [])].reverse().slice(0, 10);
+
+  return (
+    <Page>
+      <TitleBar title="Import Dashboard" />
+
+      {/* ── Header ── */}
+      <div style={{ background: "linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%)", borderRadius: 16, padding: "28px 32px", marginBottom: 24, color: "#fff", display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 16 }}>
+        <div>
+          <div style={{ fontSize: 22, fontWeight: 800, marginBottom: 4 }}>📊 Import Dashboard</div>
+          <div style={{ fontSize: 14, opacity: 0.8 }}>{shop}</div>
+        </div>
+        <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
+          <button
+            onClick={() => navigate("/app/managebrand")}
+            style={{ background: "rgba(255,255,255,0.15)", border: "1px solid rgba(255,255,255,0.3)", borderRadius: 8, color: "#fff", padding: "8px 18px", cursor: "pointer", fontWeight: 600, fontSize: 14 }}
+          >
+            + New Import
+          </button>
+          {isRunning && (
+            <button
+              onClick={handleCancel}
+              style={{ background: "#dc2626", border: "none", borderRadius: 8, color: "#fff", padding: "8px 18px", cursor: "pointer", fontWeight: 600, fontSize: 14 }}
+            >
+              Cancel Import
+            </button>
+          )}
+        </div>
+      </div>
+
+      {loading ? (
+        <Card><div style={{ padding: 48, textAlign: "center" }}><Spinner /><div style={{ marginTop: 12, color: "#6b7280" }}>Loading jobs…</div></div></Card>
+      ) : jobs.length === 0 ? (
+        <Card>
+          <div style={{ padding: 64, textAlign: "center" }}>
+            <div style={{ fontSize: 48, marginBottom: 12 }}>📦</div>
+            <Text variant="headingMd" as="h2">No import jobs yet</Text>
+            <div style={{ marginTop: 8, color: "#6b7280", marginBottom: 24 }}>Start an import from the Manage Brands page to see live progress here.</div>
+            <Button variant="primary" onClick={() => navigate("/app/managebrand")}>Go to Manage Brands</Button>
+          </div>
+        </Card>
+      ) : (
+        <Layout>
+          {/* ── Job selector sidebar ── */}
+          {jobs.length > 1 && (
+            <Layout.Section variant="oneThird">
+              <Card>
+                <div style={{ padding: "12px 16px 8px", borderBottom: "1px solid #f3f4f6" }}>
+                  <Text variant="headingSm" as="h3" tone="subdued">RECENT IMPORTS</Text>
+                </div>
+                <div>
+                  {jobs.slice(0, 10).map(j => (
+                    <div
+                      key={j.id}
+                      onClick={() => setSelectedJobId(j.id)}
+                      style={{ padding: "12px 16px", cursor: "pointer", borderBottom: "1px solid #f9fafb", background: j.id === selectedJobId ? "#eff6ff" : "transparent", borderLeft: j.id === selectedJobId ? "3px solid #2563eb" : "3px solid transparent" }}
+                    >
+                      <div style={{ fontWeight: 700, fontSize: 13, color: "#1f2937", marginBottom: 3 }}>{j.brandName || `Brand ${j.brandId}`}</div>
+                      <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
+                        <span style={{ fontSize: 11, color: toneColors[statusTone(j.status)].dot, fontWeight: 600 }}>● {statusLabel(j.status)}</span>
+                        <span style={{ fontSize: 11, color: "#9ca3af" }}>{fmt(j.startedAt)}</span>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </Card>
+            </Layout.Section>
+          )}
+
+          {/* ── Main job detail ── */}
+          <Layout.Section>
+            {job && (
+              <BlockStack gap="400">
+
+                {/* Status + Brand header */}
+                <Card>
+                  <BlockStack gap="300">
+                    <InlineStack align="space-between" blockAlign="center" wrap={false}>
+                      <BlockStack gap="100">
+                        <Text variant="headingLg" as="h2">{job.brandName || `Brand ${job.brandId}`}</Text>
+                        <Text tone="subdued" variant="bodySm">Job ID: {job.id}</Text>
+                      </BlockStack>
+                      <InlineStack gap="200" blockAlign="center">
+                        {isRunning && <Spinner size="small" />}
+                        <Badge tone={statusTone(job.status)}>{statusLabel(job.status)}</Badge>
+                      </InlineStack>
+                    </InlineStack>
+
+                    <Divider />
+
+                    {/* Progress bar */}
+                    <BlockStack gap="100">
+                      <InlineStack align="space-between">
+                        <Text variant="bodySm" tone="subdued">{stepLabel(job.step)}</Text>
+                        <Text variant="bodyMd" fontWeight="bold">{progress}%</Text>
+                      </InlineStack>
+                      <ProgressBar
+                        progress={progress}
+                        tone={job.status === "error" ? "critical" : job.status === "done" ? "success" : "highlight"}
+                        size="medium"
+                      />
+                    </BlockStack>
+
+                    {/* Timing row */}
+                    <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12 }}>
+                      <div style={{ textAlign: "center", padding: "10px 8px", background: "#f9fafb", borderRadius: 8 }}>
+                        <div style={{ fontSize: 11, color: "#9ca3af", fontWeight: 600, textTransform: "uppercase" }}>Started</div>
+                        <div style={{ fontSize: 14, fontWeight: 700, color: "#374151", marginTop: 3 }}>{fmt(job.startedAt)}</div>
+                      </div>
+                      <div style={{ textAlign: "center", padding: "10px 8px", background: "#eff6ff", borderRadius: 8 }}>
+                        <div style={{ fontSize: 11, color: "#9ca3af", fontWeight: 600, textTransform: "uppercase" }}>Elapsed</div>
+                        <div style={{ fontSize: 14, fontWeight: 700, color: "#1d4ed8", marginTop: 3 }}>{isRunning ? elapsed(job.startedAt) : (job.durationSeconds ? `${job.durationSeconds}s` : elapsedStr)}</div>
+                      </div>
+                      <div style={{ textAlign: "center", padding: "10px 8px", background: "#f9fafb", borderRadius: 8 }}>
+                        <div style={{ fontSize: 11, color: "#9ca3af", fontWeight: 600, textTransform: "uppercase" }}>Finished</div>
+                        <div style={{ fontSize: 14, fontWeight: 700, color: "#374151", marginTop: 3 }}>{fmt(job.finishedAt)}</div>
+                      </div>
+                    </div>
+                  </BlockStack>
+                </Card>
+
+                {/* Current product banner */}
+                {job.currentProduct && (
+                  <div style={{ background: "linear-gradient(135deg, #0f172a, #1e3a5f)", borderRadius: 12, padding: "16px 20px", color: "#fff", display: "flex", alignItems: "center", gap: 16 }}>
+                    <Spinner size="small" />
+                    <div>
+                      <div style={{ fontSize: 11, opacity: 0.6, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.06em" }}>Currently importing</div>
+                      <div style={{ fontSize: 16, fontWeight: 800, marginTop: 2 }}>{job.currentProduct.name}</div>
+                      {job.currentProduct.partNumber && (
+                        <div style={{ fontSize: 12, opacity: 0.7, marginTop: 1 }}>Part: {job.currentProduct.partNumber}</div>
+                      )}
+                      <div style={{ fontSize: 12, opacity: 0.6, marginTop: 1 }}>
+                        Product {job.currentProduct.number} of {job.currentProduct.total}
+                      </div>
+                    </div>
+                    <div style={{ marginLeft: "auto", textAlign: "right" }}>
+                      <div style={{ fontSize: 32, fontWeight: 900, color: "#60a5fa" }}>{job.currentProduct.number}</div>
+                      <div style={{ fontSize: 12, opacity: 0.5 }}>/ {job.currentProduct.total}</div>
+                    </div>
+                  </div>
+                )}
+
+                {/* Stats grid */}
+                <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))", gap: 12 }}>
+                  <StatCard label="Total Selected"  value={s.total}       accent="blue" />
+                  <StatCard label="Processed"       value={s.processed}   accent="purple" sub={`${s.remaining} remaining`} />
+                  <StatCard label="Created"         value={s.created}     accent="green" />
+                  <StatCard label="Skipped"         value={s.skipped}     accent="amber" sub="already in store" />
+                  <StatCard label="Failed"          value={s.failed}      accent="red" />
+                  <StatCard label="Success Rate"    value={`${s.successRate}%`} accent={s.successRate >= 90 ? "green" : s.successRate >= 70 ? "amber" : "red"} />
+                </div>
+
+                {/* Stage progress board */}
+                <Card>
+                  <div style={{ padding: "4px 0" }}>
+                    <div style={{ marginBottom: 12 }}>
+                      <Text variant="headingSm" as="h3">Import Stages</Text>
+                    </div>
+                    <StageRow label="Fetch products from Turn14" status={stageStatus("fetching_products")} value={s.total > 0 ? `${s.total} found` : null} />
+                    <StageRow label="Create / update products in Shopify" status={stageStatus("importing")} value={s.total > 0 ? s.label : null} meta={s.failed > 0 ? `${s.failed} failed` : null} />
+                    <StageRow label="Import complete" status={stageStatus("completed")} value={job.status === "done" ? "Done" : null} />
+                  </div>
+                </Card>
+
+                {/* Detail text */}
+                {job.detail && (
+                  <div style={{ background: "#f0f9ff", border: "1px solid #bae6fd", borderRadius: 10, padding: "12px 16px", fontSize: 14, color: "#0369a1", fontWeight: 500 }}>
+                    ℹ️ {job.detail}
+                  </div>
+                )}
+
+                {/* Error details */}
+                {job.status === "error" && (
+                  <div style={{ background: "#fff1f2", border: "1px solid #fecdd3", borderRadius: 10, padding: "16px" }}>
+                    <div style={{ fontWeight: 700, color: "#dc2626", marginBottom: 6 }}>⛔ Import Error</div>
+                    <div style={{ fontSize: 13, color: "#991b1b" }}>{job.detail}</div>
+                  </div>
+                )}
+
+                {/* Per-product errors */}
+                {job.errors?.length > 0 && (
+                  <Card>
+                    <div style={{ marginBottom: 10 }}>
+                      <Text variant="headingSm" as="h3" tone="critical">Failed Products ({job.errors.length})</Text>
+                    </div>
+                    <div style={{ maxHeight: 220, overflowY: "auto" }}>
+                      {job.errors.map((e, i) => (
+                        <div key={i} style={{ padding: "8px 0", borderBottom: "1px solid #fef2f2", display: "flex", gap: 12 }}>
+                          <div style={{ width: 6, height: 6, borderRadius: "50%", background: "#dc2626", marginTop: 6, flexShrink: 0 }} />
+                          <div>
+                            <div style={{ fontSize: 13, fontWeight: 600, color: "#374151" }}>#{e.index} {e.product}</div>
+                            <div style={{ fontSize: 12, color: "#dc2626", marginTop: 2 }}>{e.error}</div>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </Card>
+                )}
+
+                {/* Completion summary */}
+                {job.status === "done" && (
+                  <div style={{ background: "linear-gradient(135deg, #f0fdf4, #dcfce7)", border: "1px solid #bbf7d0", borderRadius: 12, padding: "20px 24px" }}>
+                    <div style={{ fontSize: 18, fontWeight: 800, color: "#15803d", marginBottom: 12 }}>✅ Import Completed</div>
+                    <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(140px, 1fr))", gap: 10 }}>
+                      {[
+                        { l: "Total products", v: s.total },
+                        { l: "Created", v: s.created },
+                        { l: "Skipped", v: s.skipped },
+                        { l: "Failed", v: s.failed },
+                        { l: "Success rate", v: `${s.successRate}%` },
+                        { l: "Duration", v: job.durationSeconds ? `${job.durationSeconds}s` : "—" },
+                      ].map(({ l, v }) => (
+                        <div key={l} style={{ background: "#fff", borderRadius: 8, padding: "10px 12px", border: "1px solid #bbf7d0" }}>
+                          <div style={{ fontSize: 11, color: "#6b7280", fontWeight: 600, textTransform: "uppercase" }}>{l}</div>
+                          <div style={{ fontSize: 20, fontWeight: 800, color: "#15803d", marginTop: 2 }}>{v}</div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                {/* Recent activity log */}
+                <Card>
+                  <div style={{ marginBottom: 10 }}>
+                    <Text variant="headingSm" as="h3">Recent Activity</Text>
+                  </div>
+                  {recentLogs.length === 0 ? (
+                    <div style={{ color: "#9ca3af", fontSize: 13, padding: "12px 0" }}>No activity yet — waiting for import to start…</div>
+                  ) : (
+                    recentLogs.map((entry, i) => <LogEntry key={i} entry={entry} />)
+                  )}
+                </Card>
+
+              </BlockStack>
+            )}
+          </Layout.Section>
+        </Layout>
+      )}
+    </Page>
+  );
+}
diff --git a/app/routes/app.help.jsx b/app/routes/app.help.jsx
index 25369bd..a2cf11e 100644
--- a/app/routes/app.help.jsx
+++ b/app/routes/app.help.jsx
@@ -1,13 +1,4 @@
-import {
-  Page,
-  Layout,
-  Card,
-  Text,
-  BlockStack,
-  Link,
-  Button,
-  Collapsible,
-} from "@shopify/polaris";
+import { Page, Layout, Card, Text, BlockStack, Link } from "@shopify/polaris";
 import { TitleBar } from "@shopify/app-bridge-react";
 import { useState, useCallback } from "react";
 import { authenticate } from "../shopify.server";
@@ -17,107 +8,119 @@ export const loader = async ({ request }) => {
   return null;
 };
 
+const faqs = [
+  {
+    title: "How do I connect my Turn14 account?",
+    icon: "🔌",
+    content: "Go to the Settings page, enter your Turn14 Client ID and Secret, then click 'Connect Turn14'. A green success indicator will confirm the connection. Your credentials are stored securely in Shopify's encrypted metafields.",
+  },
+  {
+    title: "Where can I import brands from?",
+    icon: "🏷️",
+    content: "Use the 'Brands' tab in the left sidebar to browse all available Turn14 brands. Check the brands you want to sync, then click 'Save Collections' to create Shopify collections for each selected brand.",
+  },
+  {
+    title: "How do I sync brand collections and products?",
+    icon: "🔄",
+    content: "In the 'Manage Brands' section, select a brand and click 'Show Products' to load its catalog. Apply fitment filters (Make, stock type, LTL, etc.) then click 'Add Products to Store' to start an import. Watch live progress on the Dashboard page.",
+  },
+  {
+    title: "Is my Turn14 API key secure?",
+    icon: "🔐",
+    content: "Yes. Credentials are stored using Shopify's encrypted metafield storage, not in plain text or local files. Only your store's Shopify admin can access them.",
+  },
+  {
+    title: "How do I monitor import progress?",
+    icon: "📊",
+    content: "After starting an import from Manage Brands, head to the Dashboard page in the sidebar. It shows real-time progress: products created, skipped, failed, elapsed time, current product being processed, and a live activity log.",
+  },
+  {
+    title: "What do the product filters do?",
+    icon: "🔎",
+    content: "Fitment filters let you narrow products by vehicle Make. Additional toggles control Zero Stock (include/exclude), LTL Freight Required, Clearance items, Air Freight Prohibited items, and products with no images — giving you precise control over what gets imported.",
+  },
+];
+
 export default function HelpPage() {
   const [openIndex, setOpenIndex] = useState(null);
-
-  const toggle = useCallback((index) => {
-    setOpenIndex((prev) => (prev === index ? null : index));
-  }, []);
-
-  const faqs = [
-    {
-      title: "📌 How do I connect my Turn14 account?",
-      content:
-        "Go to the Settings page, enter your Turn14 Client ID and Secret, then click 'Save & Connect'. A green badge will confirm successful connection.",
-    },
-    {
-      title: "📦 Where can I import brands from?",
-      content:
-        "Use the 'Brands' tab in the left menu to view and import available brands from Turn14 into your Shopify store.",
-    },
-    {
-      title: "🔄 How do I sync brand collections?",
-      content:
-        "In the 'Manage Brands' section, select the brands and hit 'Sync to Shopify'. A manual collection will be created or updated.",
-    },
-    {
-      title: "🔐 Is my Turn14 API key secure?",
-      content:
-        "Yes. The credentials are stored using Shopify’s encrypted storage (metafields), ensuring they are safe and secure.",
-    },
-  ];
+  const toggle = useCallback((i) => setOpenIndex((p) => (p === i ? null : i)), []);
 
   return (
     <Page>
       <TitleBar title="Help & Documentation" />
+
+      {/* Dark header */}
+      <div style={{ background: "linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%)", borderRadius: 16, padding: "28px 32px", marginBottom: 28, color: "#fff" }}>
+        <div style={{ fontSize: 22, fontWeight: 800, marginBottom: 6 }}>❓ Help & Documentation</div>
+        <div style={{ fontSize: 14, opacity: 0.8 }}>Everything you need to get up and running with Data4Autos × Turn14</div>
+      </div>
+
       <Layout>
         <Layout.Section>
-          <Card>
-            <BlockStack gap="400">
-              <Text variant="headingLg" as="h1">
-                Need Help? You’re in the Right Place!
-              </Text>
-              <Text>
-                This section covers frequently asked questions about the Data4Autos
-                Turn14 integration app.
-              </Text>
+          <BlockStack gap="300">
 
-              {faqs.map((faq, index) => (
+            {/* FAQ cards */}
+            {faqs.map((faq, index) => {
+              const isOpen = openIndex === index;
+              return (
                 <div
                   key={index}
                   style={{
-                    border: "1px solid #E1E3E5",
-                    borderRadius: "8px",
-                    marginBottom: "0px",
+                    border: `1px solid ${isOpen ? "#bfdbfe" : "#e5e7eb"}`,
+                    borderRadius: 12,
                     overflow: "hidden",
-                    boxShadow: "0 1px 3px rgba(0,0,0,0.05)",
+                    boxShadow: isOpen ? "0 4px 12px rgba(37,99,235,0.08)" : "0 1px 3px rgba(0,0,0,0.04)",
+                    transition: "box-shadow 0.2s, border-color 0.2s",
                   }}
                 >
-                  {/* Header */}
                   <div
+                    onClick={() => toggle(index)}
                     style={{
-                      background: "#F6F6F7",
-                      padding: "0.75rem 1rem",
+                      background: isOpen ? "#eff6ff" : "#ffffff",
+                      padding: "16px 20px",
                       cursor: "pointer",
                       display: "flex",
                       justifyContent: "space-between",
                       alignItems: "center",
+                      transition: "background 0.2s",
                     }}
-                    onClick={() => toggle(index)}
                   >
-                    <Text variant="bodyLg" fontWeight="bold">
-                      {faq.title}
-                    </Text>
-                    <span style={{ transform: openIndex === index ? "rotate(90deg)" : "rotate(0deg)", transition: "0.2s" }}>
-                      ▶
-                    </span>
+                    <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+                      <div style={{ width: 36, height: 36, background: isOpen ? "#2563eb" : "#f1f5f9", borderRadius: 8, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 18, flexShrink: 0 }}>
+                        {faq.icon}
+                      </div>
+                      <span style={{ fontWeight: 700, fontSize: 15, color: isOpen ? "#1d4ed8" : "#111827" }}>{faq.title}</span>
+                    </div>
+                    <div style={{ width: 24, height: 24, background: isOpen ? "#2563eb" : "#e5e7eb", borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center", transition: "all 0.2s", flexShrink: 0 }}>
+                      <span style={{ color: isOpen ? "#fff" : "#6b7280", fontSize: 12, transform: isOpen ? "rotate(180deg)" : "rotate(0deg)", display: "block", transition: "transform 0.2s" }}>▼</span>
+                    </div>
                   </div>
 
-                  {/* Collapsible Body */}
-                  <Collapsible open={openIndex === index}>
-                    <div
-                      style={{
-                        padding: "1rem",
-                        background: "#FFFFFF",
-                      }}
-                    >
-                      <Text as="p" tone="subdued">
-                        {faq.content}
-                      </Text>
+                  {isOpen && (
+                    <div style={{ padding: "16px 20px 20px", background: "#fafcff", borderTop: "1px solid #dbeafe" }}>
+                      <div style={{ fontSize: 14, color: "#374151", lineHeight: 1.7 }}>{faq.content}</div>
                     </div>
-                  </Collapsible>
+                  )}
                 </div>
-              ))}
+              );
+            })}
 
+          </BlockStack>
+        </Layout.Section>
 
-              <Text tone="subdued">
-                Still have questions? Email us at{" "}
-                <Link url="mailto:support@data4autos.com">
-                  support@data4autos.com
-                </Link>
-              </Text>
-            </BlockStack>
-          </Card>
+        {/* Contact card */}
+        <Layout.Section>
+          <div style={{ background: "linear-gradient(135deg, #f0f9ff, #e0f2fe)", border: "1px solid #bae6fd", borderRadius: 12, padding: "24px 28px", textAlign: "center" }}>
+            <div style={{ fontSize: 32, marginBottom: 10 }}>📬</div>
+            <div style={{ fontSize: 17, fontWeight: 700, color: "#0c4a6e", marginBottom: 6 }}>Still need help?</div>
+            <div style={{ fontSize: 14, color: "#0369a1", marginBottom: 14 }}>Our support team is ready to assist you with any questions about your integration.</div>
+            <a
+              href="mailto:support@data4autos.com"
+              style={{ display: "inline-block", background: "#2563eb", color: "#fff", borderRadius: 8, padding: "10px 24px", fontWeight: 700, fontSize: 14, textDecoration: "none" }}
+            >
+              support@data4autos.com
+            </a>
+          </div>
         </Layout.Section>
       </Layout>
     </Page>
diff --git a/app/routes/app.jsx b/app/routes/app.jsx
index 47d2ab9..26e72b4 100644
--- a/app/routes/app.jsx
+++ b/app/routes/app.jsx
@@ -59,11 +59,11 @@ export default function App() {
     <AppProvider isEmbeddedApp apiKey={apiKey}>
       <NavMenu>
         <Link to="/app" rel="home">🏠 Home</Link>
+        <Link to="/app/dashboard">📊 Dashboard</Link>
         <Link to="/app/settings">⚙️ Settings</Link>
         <Link to="/app/brands">🏷️ Brands</Link>
         <Link to="/app/managebrand">📦 Manage Brands</Link>
         <Link to="/app/help">🆘 Help</Link>
-        {/* <Link to="/app/testing">🆘 Testing</Link> */}
       </NavMenu>
       <Outlet />
     </AppProvider>
diff --git a/app/routes/app.managebrand.jsx b/app/routes/app.managebrand.jsx
index 261a965..3c64fc9 100644
--- a/app/routes/app.managebrand.jsx
+++ b/app/routes/app.managebrand.jsx
@@ -4,10 +4,7 @@ import { useLoaderData, Form, useActionData, useNavigate } from "@remix-run/reac
 import {
   Page,
   Layout,
-  IndexTable,
   Card,
-  Thumbnail,
-  TextContainer,
   Spinner,
   Button,
   TextField,
@@ -16,7 +13,6 @@ import {
   Frame,
   Select,
   ProgressBar,
-  Checkbox,
   Text,
   Popover,
   OptionList,
@@ -28,28 +24,9 @@ import { TitleBar } from "@shopify/app-bridge-react";
 const PLAN_NAME = "Starter Sync";
 const ALLOWED_STATUSES = ["ACTIVE", "TRIAL"];
 
-const styles = {
-  gridContainer: {
-    display: "grid",
-    gridTemplateColumns: "1fr 1fr",
-    gap: "10px",
-  },
-  gridItem: {
-    display: "flex",
-    flexDirection: "column",
-  },
-  gridFullWidthItem: {
-    gridColumn: "span 2",
-    display: "flex",
-    flexDirection: "column",
-  },
-};
-
 async function checkShopExists(shop) {
   try {
-    const resp = await fetch(
-      `https://backend.data4autos.com/checkisshopdataexists/${shop}`
-    );
+    const resp = await fetch(`https://backend.data4autos.com/checkisshopdataexists/${shop}`);
     const data = await resp.json();
     return data.status === 1;
   } catch (err) {
@@ -59,14 +36,9 @@ async function checkShopExists(shop) {
 }
 
 function getIntervalLabel(interval) {
-  switch (interval) {
-    case "ANNUAL":
-      return "Every 12 months";
-    case "EVERY_30_DAYS":
-      return "Every 30 days";
-    default:
-      return interval || "N/A";
-  }
+  if (interval === "ANNUAL") return "Every 12 months";
+  if (interval === "EVERY_30_DAYS") return "Every 30 days";
+  return interval || "N/A";
 }
 
 function formatMoney(amount, currencyCode = "USD") {
@@ -76,28 +48,17 @@ function formatMoney(amount, currencyCode = "USD") {
 
 function formatDate(date) {
   if (!date) return "N/A";
-  return new Date(date).toLocaleDateString(undefined, {
-    year: "numeric",
-    month: "short",
-    day: "numeric",
-  });
+  return new Date(date).toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" });
 }
 
 async function getSubscriptionDetails(request) {
   const { admin, session } = await authenticate.admin(request);
   const shop = session.shop;
-
   const resp = await admin.graphql(`
     query CurrentSubscriptionDetails {
       currentAppInstallation {
         activeSubscriptions {
-          id
-          name
-          status
-          test
-          createdAt
-          trialDays
-          currentPeriodEnd
+          id name status test createdAt trialDays currentPeriodEnd
           lineItems {
             id
             plan {
@@ -105,10 +66,7 @@ async function getSubscriptionDetails(request) {
                 __typename
                 ... on AppRecurringPricing {
                   interval
-                  price {
-                    amount
-                    currencyCode
-                  }
+                  price { amount currencyCode }
                 }
               }
             }
@@ -117,55 +75,29 @@ async function getSubscriptionDetails(request) {
       }
     }
   `);
-
   const result = await resp.json();
-
-  const subscriptions =
-    result?.data?.currentAppInstallation?.activeSubscriptions || [];
-
-  const subscription =
-    subscriptions.find((sub) => ALLOWED_STATUSES.includes(sub.status)) ||
-    subscriptions[0] ||
-    null;
-
-  const recurringPricing =
-    subscription?.lineItems?.find(
-      (item) =>
-        item?.plan?.pricingDetails?.__typename === "AppRecurringPricing"
-    )?.plan?.pricingDetails || null;
-
-  const isSubscribed =
-    !!subscription && ALLOWED_STATUSES.includes(subscription.status);
-
+  const subscriptions = result?.data?.currentAppInstallation?.activeSubscriptions || [];
+  const subscription = subscriptions.find((sub) => ALLOWED_STATUSES.includes(sub.status)) || subscriptions[0] || null;
+  const recurringPricing = subscription?.lineItems?.find((item) => item?.plan?.pricingDetails?.__typename === "AppRecurringPricing")?.plan?.pricingDetails || null;
+  const isSubscribed = !!subscription && ALLOWED_STATUSES.includes(subscription.status);
   return {
     shop,
     isSubscribed,
-    subscription: subscription
-      ? {
-          id: subscription.id,
-          name: subscription.name || PLAN_NAME,
-          status: subscription.status,
-          test: subscription.test ?? false,
-          createdAt: subscription.createdAt,
-          trialDays: subscription.trialDays ?? 0,
-          currentPeriodEnd: subscription.currentPeriodEnd,
-          interval: recurringPricing?.interval || null,
-          priceAmount: recurringPricing?.price?.amount || null,
-          currencyCode: recurringPricing?.price?.currencyCode || "USD",
-        }
-      : null,
+    subscription: subscription ? {
+      id: subscription.id, name: subscription.name || PLAN_NAME, status: subscription.status,
+      test: subscription.test ?? false, createdAt: subscription.createdAt,
+      trialDays: subscription.trialDays ?? 0, currentPeriodEnd: subscription.currentPeriodEnd,
+      interval: recurringPricing?.interval || null, priceAmount: recurringPricing?.price?.amount || null,
+      currencyCode: recurringPricing?.price?.currencyCode || "USD",
+    } : null,
   };
 }
 
 export const loader = async ({ request }) => {
-  const { getTurn14AccessTokenFromMetafield } = await import(
-    "../utils/turn14Token.server"
-  );
-
+  const { getTurn14AccessTokenFromMetafield } = await import("../utils/turn14Token.server");
   const { admin } = await authenticate.admin(request);
   const { session } = await authenticate.admin(request);
   const shop = session.shop;
-
   const { isSubscribed, subscription } = await getSubscriptionDetails(request);
 
   let accessToken = "";
@@ -173,234 +105,65 @@ export const loader = async ({ request }) => {
     accessToken = await getTurn14AccessTokenFromMetafield(request);
   } catch (err) {
     console.error("Error getting Turn14 access token:", err);
-    return json({
-      brands: [],
-      accessToken: "",
-      shop,
-      isSubscribed,
-      subscription,
-    });
+    return json({ brands: [], accessToken: "", shop, isSubscribed, subscription });
   }
 
-  const res = await admin.graphql(`{
-    shop {
-      metafield(namespace: "turn14", key: "selected_brands") {
-        value
-      }
-    }
-  }`);
+  const res = await admin.graphql(`{ shop { metafield(namespace: "turn14", key: "selected_brands") { value } } }`);
   const data = await res.json();
   const rawValue = data?.data?.shop?.metafield?.value;
 
   let brands = [];
-  try {
-    brands = JSON.parse(rawValue || "[]");
-  } catch (err) {
-    console.error("❌ Failed to parse metafield value:", err);
-  }
+  try { brands = JSON.parse(rawValue || "[]"); } catch (err) {}
 
-  return json({
-    brands,
-    accessToken,
-    shop,
-    isSubscribed,
-    subscription,
-  });
+  return json({ brands, accessToken, shop, isSubscribed, subscription });
 };
 
 const makes_list_raw = [
-  "Alfa Romeo",
-  "Ferrari",
-  "Dodge",
-  "Subaru",
-  "Toyota",
-  "Volkswagen",
-  "Volvo",
-  "Audi",
-  "BMW",
-  "Buick",
-  "Cadillac",
-  "Chevrolet",
-  "Chrysler",
-  "CX Automotive",
-  "Nissan",
-  "Ford",
-  "Hyundai",
-  "Infiniti",
-  "Lexus",
-  "Mercury",
-  "Mazda",
-  "Oldsmobile",
-  "Plymouth",
-  "Pontiac",
-  "Rolls-Royce",
-  "Eagle",
-  "Lincoln",
-  "Mercedes-Benz",
-  "GMC",
-  "Saab",
-  "Honda",
-  "Saturn",
-  "Mitsubishi",
-  "Isuzu",
-  "Jeep",
-  "AM General",
-  "Geo",
-  "Suzuki",
-  "E. P. Dutton, Inc.",
-  "Land Rover",
-  "PAS, Inc",
-  "Acura",
-  "Jaguar",
-  "Lotus",
-  "Grumman Olson",
-  "Porsche",
-  "American Motors Corporation",
-  "Kia",
-  "Lamborghini",
-  "Panoz Auto-Development",
-  "Maserati",
-  "Saleen",
-  "Aston Martin",
-  "Dabryan Coach Builders Inc",
-  "Federal Coach",
-  "Vector",
-  "Bentley",
-  "Daewoo",
-  "Qvale",
-  "Roush Performance",
-  "Autokraft Limited",
-  "Bertone",
-  "Panther Car Company Limited",
-  "Texas Coach Company",
-  "TVR Engineering Ltd",
-  "Morgan",
-  "MINI",
-  "Yugo",
-  "BMW Alpina",
-  "Renault",
-  "Bitter Gmbh and Co. Kg",
-  "Scion",
-  "Maybach",
-  "Lambda Control Systems",
-  "Merkur",
-  "Peugeot",
-  "Spyker",
-  "London Coach Co Inc",
-  "Hummer",
-  "Bugatti",
-  "Pininfarina",
-  "Shelby",
-  "Saleen Performance",
-  "smart",
-  "Tecstar, LP",
-  "Kenyon Corporation Of America",
-  "Avanti Motor Corporation",
-  "Bill Dovell Motor Car Company",
-  "Import Foreign Auto Sales Inc",
-  "S and S Coach Company  E.p. Dutton",
-  "Superior Coaches Div E.p. Dutton",
-  "Vixen Motor Company",
-  "Volga Associated Automobile",
-  "Wallace Environmental",
-  "Import Trade Services",
-  "J.K. Motors",
-  "Panos",
-  "Quantum Technologies",
-  "London Taxi",
-  "Red Shift Ltd.",
-  "Ruf Automobile Gmbh",
-  "Excalibur Autos",
-  "Mahindra",
-  "VPG",
-  "Fiat",
-  "Sterling",
-  "Azure Dynamics",
-  "McLaren Automotive",
-  "Ram",
-  "CODA Automotive",
-  "Fisker",
-  "Tesla",
-  "Mcevoy Motors",
-  "BYD",
-  "ASC Incorporated",
-  "SRT",
-  "CCC Engineering",
-  "Mobility Ventures LLC",
-  "Pagani",
-  "Genesis",
-  "Karma",
-  "Koenigsegg",
-  "Aurora Cars Ltd",
-  "RUF Automobile",
-  "Dacia",
-  "STI",
-  "Daihatsu",
-  "Polestar",
-  "Kandi",
-  "Rivian",
-  "Lucid",
-  "JBA Motorcars, Inc.",
-  "Lordstown",
-  "Vinfast",
-  "INEOS Automotive",
-  "Bugatti Rimac",
-  "Grumman Allied Industries",
-  "Environmental Rsch and Devp Corp",
-  "Evans Automobiles",
-  "Laforza Automobile Inc",
-  "General Motors",
-  "Consulier Industries Inc",
-  "Goldacre",
-  "Isis Imports Ltd",
-  "PAS Inc - GMC",
+  "Alfa Romeo","Ferrari","Dodge","Subaru","Toyota","Volkswagen","Volvo","Audi","BMW","Buick",
+  "Cadillac","Chevrolet","Chrysler","CX Automotive","Nissan","Ford","Hyundai","Infiniti","Lexus",
+  "Mercury","Mazda","Oldsmobile","Plymouth","Pontiac","Rolls-Royce","Eagle","Lincoln","Mercedes-Benz",
+  "GMC","Saab","Honda","Saturn","Mitsubishi","Isuzu","Jeep","AM General","Geo","Suzuki",
+  "E. P. Dutton, Inc.","Land Rover","PAS, Inc","Acura","Jaguar","Lotus","Grumman Olson","Porsche",
+  "American Motors Corporation","Kia","Lamborghini","Panoz Auto-Development","Maserati","Saleen",
+  "Aston Martin","Dabryan Coach Builders Inc","Federal Coach","Vector","Bentley","Daewoo","Qvale",
+  "Roush Performance","Autokraft Limited","Bertone","Panther Car Company Limited","Texas Coach Company",
+  "TVR Engineering Ltd","Morgan","MINI","Yugo","BMW Alpina","Renault","Bitter Gmbh and Co. Kg","Scion",
+  "Maybach","Lambda Control Systems","Merkur","Peugeot","Spyker","London Coach Co Inc","Hummer","Bugatti",
+  "Pininfarina","Shelby","Saleen Performance","smart","Tecstar, LP","Kenyon Corporation Of America",
+  "Avanti Motor Corporation","Bill Dovell Motor Car Company","Import Foreign Auto Sales Inc",
+  "S and S Coach Company  E.p. Dutton","Superior Coaches Div E.p. Dutton","Vixen Motor Company",
+  "Volga Associated Automobile","Wallace Environmental","Import Trade Services","J.K. Motors","Panos",
+  "Quantum Technologies","London Taxi","Red Shift Ltd.","Ruf Automobile Gmbh","Excalibur Autos",
+  "Mahindra","VPG","Fiat","Sterling","Azure Dynamics","McLaren Automotive","Ram","CODA Automotive",
+  "Fisker","Tesla","Mcevoy Motors","BYD","ASC Incorporated","SRT","CCC Engineering",
+  "Mobility Ventures LLC","Pagani","Genesis","Karma","Koenigsegg","Aurora Cars Ltd","RUF Automobile",
+  "Dacia","STI","Daihatsu","Polestar","Kandi","Rivian","Lucid","JBA Motorcars, Inc.","Lordstown",
+  "Vinfast","INEOS Automotive","Bugatti Rimac","Grumman Allied Industries",
+  "Environmental Rsch and Devp Corp","Evans Automobiles","Laforza Automobile Inc","General Motors",
+  "Consulier Industries Inc","Goldacre","Isis Imports Ltd","PAS Inc - GMC",
 ];
-
 const makes_list = makes_list_raw.sort();
 
 export const action = async ({ request }) => {
   const { isSubscribed } = await getSubscriptionDetails(request);
-
-  if (!isSubscribed) {
-    return json(
-      {
-        error:
-          "An active subscription or free trial is required to add products.",
-      },
-      { status: 403 }
-    );
-  }
+  if (!isSubscribed) return json({ error: "An active subscription or free trial is required to add products." }, { status: 403 });
 
   const { admin } = await authenticate.admin(request);
   const formData = await request.formData();
   const brandId = formData.get("brandId");
   const rawCount = formData.get("productCount");
-  const selectedProductIds = JSON.parse(
-    formData.get("selectedProductIds") || "[]"
-  );
+  const selectedProductIds = JSON.parse(formData.get("selectedProductIds") || "[]");
   const productCount = parseInt(rawCount, 10) || 10;
 
-  const { getTurn14AccessTokenFromMetafield } = await import(
-    "../utils/turn14Token.server"
-  );
+  const { getTurn14AccessTokenFromMetafield } = await import("../utils/turn14Token.server");
   const accessToken = await getTurn14AccessTokenFromMetafield(request);
-
   const { session } = await authenticate.admin(request);
   const shop = session.shop;
 
   const resp = await fetch("https://backend.data4autos.com/manageProducts", {
     method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      "shop-domain": shop,
-    },
-    body: JSON.stringify({
-      shop,
-      brandID: brandId,
-      turn14accessToken: accessToken,
-      productCount,
-      selectedProductIds,
-    }),
+    headers: { "Content-Type": "application/json", "shop-domain": shop },
+    body: JSON.stringify({ shop, brandID: brandId, turn14accessToken: accessToken, productCount, selectedProductIds }),
   });
 
   console.log("Response from manageProducts:", resp.status, resp.statusText);
@@ -412,15 +175,90 @@ export const action = async ({ request }) => {
 
   const { processId, status } = await resp.json();
   console.log("Process ID:", processId, "Status:", status);
-
   return json({ success: true, processId, status });
 };
 
+// ─── Toggle filter pill ───────────────────────────────────────────────────────
+function FilterPill({ label, checked, onChange, disabled }) {
+  return (
+    <div
+      onClick={() => !disabled && onChange(!checked)}
+      style={{
+        display: "inline-flex", alignItems: "center", gap: 6,
+        padding: "6px 14px", borderRadius: 20, cursor: disabled ? "default" : "pointer",
+        border: `1px solid ${checked ? "#2563eb" : "#e5e7eb"}`,
+        background: checked ? "#eff6ff" : "#fafafa",
+        fontSize: 13, fontWeight: checked ? 700 : 500,
+        color: checked ? "#1d4ed8" : "#374151",
+        transition: "all 0.15s",
+        userSelect: "none",
+      }}
+    >
+      <div style={{ width: 16, height: 16, borderRadius: "50%", background: checked ? "#2563eb" : "#e5e7eb", border: `2px solid ${checked ? "#2563eb" : "#d1d5db"}`, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
+        {checked && <span style={{ color: "#fff", fontSize: 9, fontWeight: 900 }}>✓</span>}
+      </div>
+      {label}
+    </div>
+  );
+}
+
+// ─── Product card ─────────────────────────────────────────────────────────────
+function ProductCard({ item }) {
+  const attrs = item?.attributes || {};
+  const qty = item?.inventoryQuantity || 0;
+  const inStock = qty > 0;
+  return (
+    <div style={{ background: "#fff", border: "1px solid #e5e7eb", borderRadius: 12, overflow: "hidden", boxShadow: "0 1px 4px rgba(0,0,0,0.04)" }}>
+      <div style={{ background: "#f8fafc", padding: "12px 14px", display: "flex", alignItems: "center", gap: 12 }}>
+        <img
+          src={attrs.thumbnail || "https://cdn.shopify.com/s/files/1/0757/9955/files/no-image_280x@2x.png"}
+          alt={attrs.product_name || "Product"}
+          style={{ width: 56, height: 56, objectFit: "contain", borderRadius: 8, background: "#fff", border: "1px solid #e5e7eb" }}
+        />
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <div style={{ fontWeight: 700, fontSize: 13, color: "#111827", lineHeight: 1.3, overflow: "hidden", display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical" }}>
+            {attrs.product_name || "Untitled Product"}
+          </div>
+          <div style={{ fontSize: 12, color: "#9ca3af", marginTop: 2 }}>{attrs.part_number || "—"}</div>
+        </div>
+      </div>
+      <div style={{ padding: "12px 14px" }}>
+        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "6px 12px", fontSize: 12 }}>
+          <div><span style={{ color: "#9ca3af" }}>Category: </span><span style={{ fontWeight: 600, color: "#374151" }}>{attrs.category || "—"}</span></div>
+          <div><span style={{ color: "#9ca3af" }}>Subcategory: </span><span style={{ fontWeight: 600, color: "#374151" }}>{attrs.subcategory || "—"}</span></div>
+          <div>
+            <span style={{ color: "#9ca3af" }}>Price: </span>
+            <span style={{ fontWeight: 700, color: "#15803d" }}>${attrs.price || "0.00"}</span>
+          </div>
+          <div>
+            <span style={{ color: "#9ca3af" }}>Stock: </span>
+            <span style={{ fontWeight: 700, color: inStock ? "#15803d" : "#dc2626" }}>{qty} {inStock ? "✓" : "✗"}</span>
+          </div>
+          <div style={{ gridColumn: "span 2" }}>
+            <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginTop: 4 }}>
+              {attrs.regular_stock && <span style={{ background: "#f0fdf4", border: "1px solid #bbf7d0", color: "#15803d", borderRadius: 4, padding: "2px 6px", fontSize: 11, fontWeight: 600 }}>Regular</span>}
+              {attrs.ltl_freight_required && <span style={{ background: "#fffbeb", border: "1px solid #fde68a", color: "#d97706", borderRadius: 4, padding: "2px 6px", fontSize: 11, fontWeight: 600 }}>LTL</span>}
+              {attrs.clearance_item && <span style={{ background: "#faf5ff", border: "1px solid #e9d5ff", color: "#7c3aed", borderRadius: 4, padding: "2px 6px", fontSize: 11, fontWeight: 600 }}>Clearance</span>}
+              {attrs.air_freight_prohibited && <span style={{ background: "#fff1f2", border: "1px solid #fecdd3", color: "#dc2626", borderRadius: 4, padding: "2px 6px", fontSize: 11, fontWeight: 600 }}>No Air</span>}
+              {attrs.files?.length > 0 && <span style={{ background: "#f0f9ff", border: "1px solid #bae6fd", color: "#0369a1", borderRadius: 4, padding: "2px 6px", fontSize: 11, fontWeight: 600 }}>{attrs.files.length} imgs</span>}
+            </div>
+          </div>
+          {attrs.part_description && (
+            <div style={{ gridColumn: "span 2", color: "#6b7280", fontSize: 12, lineHeight: 1.4, marginTop: 2, overflow: "hidden", display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical" }}>
+              {attrs.part_description}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── Main component ───────────────────────────────────────────────────────────
 export default function ManageBrandProducts() {
   const actionData = useActionData();
   const navigate = useNavigate();
-  const { shop, brands, accessToken, isSubscribed, subscription } =
-    useLoaderData();
+  const { shop, brands, accessToken, isSubscribed, subscription } = useLoaderData();
 
   const [expandedBrand, setExpandedBrand] = useState(null);
   const [itemsMap, setItemsMap] = useState({});
@@ -438,36 +276,19 @@ export default function ManageBrandProducts() {
   const [results, setResults] = useState([]);
   const [detail, setDetail] = useState("");
   const [Turn14Enabled, setTurn14Enabled] = useState("12345");
+  const [importing, setImporting] = useState(false);
 
-  const [filters, setFilters] = useState({
-    make: "",
-    model: "",
-    year: "",
-    drive: "",
-    baseModel: "",
-  });
+  const [filters, setFilters] = useState({ make: "", model: "", year: "", drive: "", baseModel: "" });
   const [filterregulatstock, setfilterregulatstock] = useState(false);
-  const [isFilter_EnableZeroStock, set_isFilter_EnableZeroStock] =
-    useState(true);
-  const [isFilter_IncludeLtlFreightRequired, setisFilter_IncludeLtlFreightRequired] =
-    useState(true);
-  const [isFilter_Excludeclearance_item, setisFilter_Excludeclearance_item] =
-    useState(false);
-  const [
-    isFilter_Excludeair_freight_prohibited,
-    setisFilter_Excludeair_freight_prohibited,
-  ] = useState(false);
-  const [isFilter_IncludeProductWithNoImages, setisFilter_IncludeProductWithNoImages] =
-    useState(true);
-
+  const [isFilter_EnableZeroStock, set_isFilter_EnableZeroStock] = useState(true);
+  const [isFilter_IncludeLtlFreightRequired, setisFilter_IncludeLtlFreightRequired] = useState(true);
+  const [isFilter_Excludeclearance_item, setisFilter_Excludeclearance_item] = useState(false);
+  const [isFilter_Excludeair_freight_prohibited, setisFilter_Excludeair_freight_prohibited] = useState(false);
+  const [isFilter_IncludeProductWithNoImages, setisFilter_IncludeProductWithNoImages] = useState(true);
   const [popoverActive, setPopoverActive] = useState(false);
 
   useEffect(() => {
-    if (!shop) {
-      console.log("⚠️ shop is undefined or empty");
-      return;
-    }
-
+    if (!shop) return;
     (async () => {
       const result = await checkShopExists(shop);
       console.log("✅ API status result:", result, "| shop:", shop);
@@ -480,30 +301,24 @@ export default function ManageBrandProducts() {
       setProcessId(actionData.processId);
       setStatus(actionData.status || "processing");
       setToastActive(true);
+      setImporting(false);
     }
+    if (actionData?.error) setImporting(false);
   }, [actionData]);
 
   const checkStatus = async () => {
     if (!processId) return;
-
     setPolling(true);
     try {
-      const response = await fetch(
-        `https://backend.data4autos.com/manageProducts/status/${processId}`
-      );
+      const response = await fetch(`https://backend.data4autos.com/manageProducts/status/${processId}`);
       const data = await response.json();
-
       setStatus(data.status);
       setDetail(data.detail);
       setProgress(data.progress);
       setTotalProducts(data.stats?.total || 0);
       setProcessedProducts(data.stats?.processed || 0);
       setCurrentProduct(data.current);
-
-      if (data.results) {
-        setResults(data.results);
-      }
-
+      if (data.results) setResults(data.results);
       if (data.status !== "done" && data.status !== "error") {
         setTimeout(checkStatus, 2000);
       } else {
@@ -513,7 +328,6 @@ export default function ManageBrandProducts() {
       setPolling(false);
       setStatus("error");
       setDetail("Failed to check status");
-      console.error("Error checking status:", error);
     }
   };
 
@@ -526,9 +340,7 @@ export default function ManageBrandProducts() {
   }, [status, processId]);
 
   const toggleAllBrands = async () => {
-    for (const brand of brands) {
-      await toggleBrandItems(brand.id);
-    }
+    for (const brand of brands) { await toggleBrandItems(brand.id); }
   };
 
   useEffect(() => {
@@ -540,7 +352,6 @@ export default function ManageBrandProducts() {
 
   const toggleBrandItems = async (brandId) => {
     if (!isSubscribed) return;
-
     const isExpanded = expandedBrand === brandId;
     if (isExpanded) {
       setExpandedBrand(null);
@@ -549,20 +360,12 @@ export default function ManageBrandProducts() {
       if (!itemsMap[brandId]) {
         setLoadingMap((prev) => ({ ...prev, [brandId]: true }));
         try {
-          const res = await fetch(
-            `https://turn14.data4autos.com/v1/items/brandallitemswithfitment/${brandId}`,
-            {
-              headers: {
-                Authorization: `Bearer ${accessToken}`,
-                "Content-Type": "application/json",
-              },
-            }
-          );
+          const res = await fetch(`https://turn14.data4autos.com/v1/items/brandallitemswithfitment/${brandId}`, {
+            headers: { Authorization: `Bearer ${accessToken}`, "Content-Type": "application/json" },
+          });
           const data = await res.json();
           const dataitems = data.items;
-          const validItems = Array.isArray(dataitems)
-            ? dataitems.filter((item) => item && item.id && item.attributes)
-            : [];
+          const validItems = Array.isArray(dataitems) ? dataitems.filter((item) => item && item.id && item.attributes) : [];
           setItemsMap((prev) => ({ ...prev, [brandId]: validItems }));
         } catch (err) {
           console.error("Error fetching items:", err);
@@ -573,20 +376,7 @@ export default function ManageBrandProducts() {
     }
   };
 
-  const toastMarkup = toastActive ? (
-    <Toast
-      content={
-        status.includes("completed")
-          ? "Products imported successfully!"
-          : `Status: ${status}`
-      }
-      onDismiss={() => setToastActive(false)}
-    />
-  ) : null;
-
-  const handleFilterChange = (field) => (value) => {
-    setFilters((prev) => ({ ...prev, [field]: value }));
-  };
+  const handleFilterChange = (field) => (value) => setFilters((prev) => ({ ...prev, [field]: value }));
 
   const applyFitmentFilters = (items) => {
     return items.filter((item) => {
@@ -595,225 +385,54 @@ export default function ManageBrandProducts() {
       const brand = item?.attributes?.brand || "";
       const descriptions = item?.attributes?.descriptions || [];
 
-      const makeMatch =
-        !filters.make ||
-        tags.make?.includes(filters.make) ||
-        productName.includes(filters.make) ||
-        brand.includes(filters.make) ||
-        descriptions.some((desc) => desc.description.includes(filters.make));
-
-      const modelMatch =
-        !filters.model ||
-        tags.model?.includes(filters.model) ||
-        productName.includes(filters.model) ||
-        brand.includes(filters.model) ||
-        descriptions.some((desc) => desc.description.includes(filters.model));
-
-      const yearMatch =
-        !filters.year ||
-        tags.year?.includes(filters.year) ||
-        productName.includes(filters.year) ||
-        brand.includes(filters.year) ||
-        descriptions.some((desc) => desc.description.includes(filters.year));
-
-      const driveMatch =
-        !filters.drive ||
-        tags.drive?.includes(filters.drive) ||
-        productName.includes(filters.drive) ||
-        brand.includes(filters.drive) ||
-        descriptions.some((desc) => desc.description.includes(filters.drive));
-
-      const baseModelMatch =
-        !filters.baseModel ||
-        tags.baseModel?.includes(filters.baseModel) ||
-        productName.includes(filters.baseModel) ||
-        brand.includes(filters.baseModel) ||
-        descriptions.some((desc) =>
-          desc.description.includes(filters.baseModel)
-        );
-
-      let isMatch =
-        makeMatch && modelMatch && yearMatch && driveMatch && baseModelMatch;
-
-      if (filterregulatstock) {
-        isMatch = isMatch && item?.attributes?.regular_stock;
-      }
-
-      if (!isFilter_EnableZeroStock) {
-        isMatch = isMatch && item?.inventoryQuantity > 0;
-      }
-      if (!isFilter_IncludeLtlFreightRequired) {
-        isMatch = isMatch && item?.attributes?.ltl_freight_required !== true;
-      }
-      if (isFilter_Excludeclearance_item) {
-        isMatch = isMatch && item?.attributes?.clearance_item !== true;
-      }
-      if (isFilter_Excludeair_freight_prohibited) {
-        isMatch =
-          isMatch && item?.attributes?.air_freight_prohibited !== true;
-      }
-      if (!isFilter_IncludeProductWithNoImages) {
-        isMatch =
-          isMatch &&
-          item?.attributes?.files &&
-          item?.attributes?.files.length > 0;
-      }
+      const makeMatch = !filters.make || tags.make?.includes(filters.make) || productName.includes(filters.make) || brand.includes(filters.make) || descriptions.some((desc) => desc.description.includes(filters.make));
+      const modelMatch = !filters.model || tags.model?.includes(filters.model) || productName.includes(filters.model) || brand.includes(filters.model) || descriptions.some((desc) => desc.description.includes(filters.model));
+      const yearMatch = !filters.year || tags.year?.includes(filters.year) || productName.includes(filters.year) || brand.includes(filters.year) || descriptions.some((desc) => desc.description.includes(filters.year));
+      const driveMatch = !filters.drive || tags.drive?.includes(filters.drive) || productName.includes(filters.drive) || brand.includes(filters.drive) || descriptions.some((desc) => desc.description.includes(filters.drive));
+      const baseModelMatch = !filters.baseModel || tags.baseModel?.includes(filters.baseModel) || productName.includes(filters.baseModel) || brand.includes(filters.baseModel) || descriptions.some((desc) => desc.description.includes(filters.baseModel));
 
+      let isMatch = makeMatch && modelMatch && yearMatch && driveMatch && baseModelMatch;
+      if (filterregulatstock) isMatch = isMatch && item?.attributes?.regular_stock;
+      if (!isFilter_EnableZeroStock) isMatch = isMatch && item?.inventoryQuantity > 0;
+      if (!isFilter_IncludeLtlFreightRequired) isMatch = isMatch && item?.attributes?.ltl_freight_required !== true;
+      if (isFilter_Excludeclearance_item) isMatch = isMatch && item?.attributes?.clearance_item !== true;
+      if (isFilter_Excludeair_freight_prohibited) isMatch = isMatch && item?.attributes?.air_freight_prohibited !== true;
+      if (!isFilter_IncludeProductWithNoImages) isMatch = isMatch && item?.attributes?.files && item?.attributes?.files.length > 0;
       return isMatch;
     });
   };
 
   const shopDomain = (shop || "").split(".")[0];
 
-  const items = [
-    {
-      icon: "⚙️",
-      text: "Manage API settings",
-      link: `https://admin.shopify.com/store/${shopDomain}/apps/d4a-turn14/app/settings`,
-    },
-    {
-      icon: "🏷️",
-      text: "Browse and import available brands",
-      link: `https://admin.shopify.com/store/${shopDomain}/apps/d4a-turn14/app/brands`,
-    },
-    {
-      icon: "📦",
-      text: "Sync brand collections to Shopify",
-      link: `https://admin.shopify.com/store/${shopDomain}/apps/d4a-turn14/app/managebrand`,
-    },
-    {
-      icon: "🔐",
-      text: "Handle secure Turn14 login credentials",
-      link: `https://admin.shopify.com/store/${shopDomain}/apps/d4a-turn14/app/help`,
-    },
-  ];
-
-  const togglePopover = () => setPopoverActive((active) => !active);
-
-  const activator = (
-    <Button onClick={togglePopover} disclosure disabled={!isSubscribed}>
-      {Array.isArray(filters.make) && filters.make.length > 0
-        ? `Selected (${filters.make.length})`
-        : "Select Makes"}
-    </Button>
-  );
-
   const trialDaysLeft = useMemo(() => {
-    if (!subscription?.trialDays || !subscription?.createdAt) return null;
-    if (subscription.status !== "TRIAL") return null;
-
+    if (!subscription?.trialDays || !subscription?.createdAt || subscription.status !== "TRIAL") return null;
     const created = new Date(subscription.createdAt);
     const trialEnd = new Date(created);
     trialEnd.setDate(trialEnd.getDate() + subscription.trialDays);
-
-    const now = new Date();
-    const msLeft = trialEnd.getTime() - now.getTime();
-    const daysLeft = Math.ceil(msLeft / (1000 * 60 * 60 * 24));
-
-    return Math.max(0, daysLeft);
+    return Math.max(0, Math.ceil((trialEnd.getTime() - Date.now()) / (1000 * 60 * 60 * 24)));
   }, [subscription]);
 
-  if (Turn14Enabled === false) {
-    const safeItems =
-      Array.isArray(items) && items.length >= 4
-        ? items
-        : [
-            { link: "#", icon: "🔗", text: "Connect Turn14" },
-            { link: "#", icon: "⚙️", text: "Settings" },
-            { link: "#", icon: "❓", text: "Help" },
-            { link: "#", icon: "📄", text: "Documentation" },
-          ];
+  const activeMakeLabel = Array.isArray(filters.make) && filters.make.length > 0 ? `Makes (${filters.make.length})` : "Select Makes";
 
+  if (Turn14Enabled === false) {
     return (
       <Frame>
         <Page fullWidth>
           <TitleBar title="Data4Autos Turn14 Integration" />
-          <Layout>
-            <Layout.Section>
-              <Card>
-                <div style={{ padding: 24, textAlign: "center" }}>
-                  <Text as="h1" variant="headingLg">
-                    Turn14 isn’t connected yet
-                  </Text>
-                  <div style={{ marginTop: 8 }}>
-                    <Text as="p" variant="bodyMd">
-                      This shop hasn’t been configured with Turn14 / Data4Autos.
-                      To get started, open Settings and complete the connection.
-                    </Text>
-                  </div>
-
-                  <div
-                    style={{
-                      marginTop: 24,
-                      display: "flex",
-                      gap: 16,
-                      justifyContent: "center",
-                      flexWrap: "wrap",
-                    }}
-                  >
-                    <a
-                      href={items[0].link}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      style={{ textDecoration: "none" }}
-                    >
-                      <Text as="h6" variant="headingMd" fontWeight="bold">
-                        {items[0].icon} {items[0].text}
-                      </Text>
-                    </a>
-                    <a
-                      href={items[3].link}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      style={{ textDecoration: "none" }}
-                    >
-                      <Text as="h6" variant="headingMd" fontWeight="bold">
-                        {items[3].icon} {items[3].text}
-                      </Text>
-                    </a>
-                  </div>
-
-                  <div style={{ marginTop: 28 }}>
-                    <Text as="p" variant="bodySm" tone="subdued">
-                      Once connected, you’ll be able to browse brands and sync
-                      collections.
-                    </Text>
-                  </div>
-
-                  <div
-                    style={{
-                      marginTop: 20,
-                      display: "flex",
-                      gap: 16,
-                      justifyContent: "center",
-                      flexWrap: "wrap",
-                    }}
-                  >
-                    <a
-                      href={safeItems[1].link}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      style={{ textDecoration: "none" }}
-                    >
-                      <Text as="p" variant="bodyMd">
-                        {safeItems[1].icon} {safeItems[1].text}
-                      </Text>
-                    </a>
-                    <a
-                      href={safeItems[2].link}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      style={{ textDecoration: "none" }}
-                    >
-                      <Text as="p" variant="bodyMd">
-                        {safeItems[2].icon} {safeItems[2].text}
-                      </Text>
-                    </a>
-                  </div>
-                </div>
-              </Card>
-            </Layout.Section>
-          </Layout>
+          <div style={{ background: "linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%)", borderRadius: 16, padding: "28px 32px", marginBottom: 24, color: "#fff" }}>
+            <div style={{ fontSize: 22, fontWeight: 800 }}>📦 Manage Brand Products</div>
+          </div>
+          <Card>
+            <div style={{ padding: 48, textAlign: "center" }}>
+              <div style={{ fontSize: 48, marginBottom: 12 }}>🔌</div>
+              <Text as="h1" variant="headingLg">Turn14 not connected yet</Text>
+              <div style={{ marginTop: 8, color: "#6b7280", marginBottom: 24 }}>Complete the Turn14 connection in Settings to start managing products.</div>
+              <div style={{ display: "flex", gap: 12, justifyContent: "center" }}>
+                <Button variant="primary" onClick={() => navigate("/app/settings")}>Go to Settings</Button>
+                <Button onClick={() => navigate("/app/help")}>View Help</Button>
+              </div>
+            </div>
+          </Card>
         </Page>
       </Frame>
     );
@@ -823,565 +442,225 @@ export default function ManageBrandProducts() {
     <Frame>
       <Page title="Data4Autos Turn14 Manage Brand Products" fullWidth>
         <TitleBar title="Data4Autos Turn14 Integration" />
-        <Layout>
-          {!isSubscribed && (
-            <Layout.Section>
-              <Banner title="Subscription required" tone="warning">
-                <p>
-                  This feature is available only for merchants with an active
-                  subscription or during the free trial period.
-                </p>
-                <div style={{ marginTop: 12 }}>
-                  <p>
-                    <strong>Current status:</strong>{" "}
-                    {subscription?.status || "Not subscribed"}
-                  </p>
-                  <p>
-                    <strong>Plan:</strong> {subscription?.name || PLAN_NAME}
-                  </p>
-                  <p>
-                    <strong>Billing:</strong>{" "}
-                    {getIntervalLabel(subscription?.interval)}
-                  </p>
-                  <p>
-                    <strong>Price:</strong>{" "}
-                    {formatMoney(
-                      subscription?.priceAmount,
-                      subscription?.currencyCode
-                    )}
-                  </p>
-                  <p>
-                    <strong>Next renewal / period end:</strong>{" "}
-                    {formatDate(subscription?.currentPeriodEnd)}
-                  </p>
-                  <p>
-                    <strong>Trial days left:</strong>{" "}
-                    {trialDaysLeft != null ? `${trialDaysLeft} day(s)` : "N/A"}
-                  </p>
+
+        {/* Header */}
+        <div style={{ background: "linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%)", borderRadius: 16, padding: "28px 32px", marginBottom: 24, color: "#fff", display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 12 }}>
+          <div>
+            <div style={{ fontSize: 22, fontWeight: 800 }}>📦 Manage Brand Products</div>
+            <div style={{ fontSize: 14, opacity: 0.8, marginTop: 4 }}>{brands.length} brand{brands.length !== 1 ? "s" : ""} selected · {shop}</div>
+          </div>
+          <div style={{ display: "flex", gap: 10 }}>
+            <button onClick={() => navigate("/app/dashboard")} style={{ background: "rgba(255,255,255,0.15)", border: "1px solid rgba(255,255,255,0.3)", borderRadius: 8, color: "#fff", padding: "8px 16px", cursor: "pointer", fontWeight: 600, fontSize: 13 }}>
+              📊 Live Dashboard
+            </button>
+            <button onClick={() => navigate("/app/brands")} style={{ background: "rgba(255,255,255,0.1)", border: "1px solid rgba(255,255,255,0.2)", borderRadius: 8, color: "#fff", padding: "8px 16px", cursor: "pointer", fontWeight: 600, fontSize: 13 }}>
+              + Add Brands
+            </button>
+          </div>
+        </div>
+
+        {/* Subscription warning */}
+        {!isSubscribed && (
+          <div style={{ background: "#fffbeb", border: "1px solid #fde68a", borderRadius: 12, padding: "16px 20px", marginBottom: 20 }}>
+            <div style={{ fontWeight: 700, color: "#b45309", marginBottom: 6 }}>⚠️ Active subscription required</div>
+            <div style={{ fontSize: 13, color: "#92400e", marginBottom: 12 }}>Import is only available with an active subscription or free trial.</div>
+            <Button variant="primary" onClick={() => navigate("/app")}>Manage Subscription</Button>
+          </div>
+        )}
+
+        {actionData?.error && (
+          <div style={{ background: "#fff1f2", border: "1px solid #fecdd3", borderRadius: 12, padding: "14px 18px", marginBottom: 20, color: "#dc2626" }}>
+            ⛔ {actionData.error}
+          </div>
+        )}
+
+        {/* Live import status bar */}
+        {processId && (
+          <div style={{ background: status === "error" ? "#fff1f2" : status === "done" ? "#f0fdf4" : "linear-gradient(135deg, #0f172a, #1e3a5f)", border: `1px solid ${status === "error" ? "#fecdd3" : status === "done" ? "#bbf7d0" : "transparent"}`, borderRadius: 12, padding: "16px 20px", marginBottom: 20, color: status === "error" || status === "done" ? undefined : "#fff" }}>
+            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 12, marginBottom: progress > 0 ? 12 : 0 }}>
+              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+                {polling && <Spinner size="small" />}
+                <div>
+                  <div style={{ fontWeight: 700, fontSize: 15 }}>
+                    {status === "done" ? "✅ Import Complete" : status === "error" ? "⛔ Import Error" : "⚙️ Import in progress…"}
+                  </div>
+                  {detail && <div style={{ fontSize: 13, opacity: 0.75, marginTop: 2 }}>{detail}</div>}
+                  {currentProduct && (
+                    <div style={{ fontSize: 13, opacity: 0.75, marginTop: 2 }}>
+                      Processing: {currentProduct.name} ({currentProduct.number}/{currentProduct.total})
+                    </div>
+                  )}
                 </div>
-                <div style={{ marginTop: 16 }}>
-                  <InlineStack gap="300">
-                    <Button variant="primary" onClick={() => navigate("/app")}>
-                      Go to Home Page
-                    </Button>
-                  </InlineStack>
-                </div>
-              </Banner>
-            </Layout.Section>
-          )}
+              </div>
+              <div style={{ display: "flex", gap: 8 }}>
+                <button onClick={() => navigate("/app/dashboard")} style={{ background: "rgba(255,255,255,0.15)", border: "1px solid rgba(255,255,255,0.3)", borderRadius: 8, color: "inherit", padding: "7px 14px", cursor: "pointer", fontWeight: 600, fontSize: 13 }}>
+                  View Dashboard
+                </button>
+                <button onClick={checkStatus} style={{ background: "rgba(255,255,255,0.1)", border: "1px solid rgba(255,255,255,0.2)", borderRadius: 8, color: "inherit", padding: "7px 14px", cursor: "pointer", fontWeight: 600, fontSize: 13 }}>
+                  Refresh
+                </button>
+              </div>
+            </div>
+            {progress > 0 && (
+              <div>
+                <ProgressBar progress={progress} tone={status === "error" ? "critical" : status === "done" ? "success" : "highlight"} />
+                <div style={{ fontSize: 12, opacity: 0.7, marginTop: 6 }}>{processedProducts} of {totalProducts} products processed</div>
+              </div>
+            )}
+          </div>
+        )}
 
-          {actionData?.error && (
-            <Layout.Section>
-              <Banner title="Action blocked" tone="critical">
-                <p>{actionData.error}</p>
-              </Banner>
-            </Layout.Section>
-          )}
-
-          {brands.length === 0 ? (
-            <Layout.Section>
-              <Card sectioned>
-                <p>No brands selected yet.</p>
-              </Card>
-            </Layout.Section>
-          ) : (
-            <Layout.Section>
-              <Card>
-                <IndexTable
-                  resourceName={{ singular: "brand", plural: "brands" }}
-                  itemCount={brands.length}
-                  headings={[
-                    {
-                      title: (
-                        <div
-                          style={{
-                            fontWeight: 600,
-                            fontSize: "16px",
-                            background: "#f4f6f8",
-                            padding: "15px 8px",
-                            borderRadius: "4px",
-                          }}
-                        >
-                          Brand ID
-                        </div>
-                      ),
-                    },
-                    {
-                      title: (
-                        <div
-                          style={{
-                            fontWeight: 600,
-                            fontSize: "16px",
-                            background: "#f4f6f8",
-                            padding: "15px 8px",
-                            borderRadius: "4px",
-                          }}
-                        >
-                          Brand Name
-                        </div>
-                      ),
-                    },
-                    {
-                      title: (
-                        <div
-                          style={{
-                            fontWeight: 600,
-                            fontSize: "16px",
-                            background: "#f4f6f8",
-                            padding: "15px 8px",
-                            borderRadius: "4px",
-                          }}
-                        >
-                          Brand Logo
-                        </div>
-                      ),
-                    },
-                    {
-                      title: (
-                        <div
-                          style={{
-                            fontWeight: 600,
-                            fontSize: "16px",
-                            background: "#f4f6f8",
-                            padding: "15px 8px",
-                            borderRadius: "4px",
-                          }}
-                        >
-                          Action
-                        </div>
-                      ),
-                    },
-                    {
-                      title: (
-                        <div
-                          style={{
-                            fontWeight: 600,
-                            fontSize: "16px",
-                            background: "#f4f6f8",
-                            padding: "15px 8px",
-                            borderRadius: "4px",
-                          }}
-                        >
-                          Products Count
-                        </div>
-                      ),
-                    },
-                  ]}
-                  selectable={false}
-                >
-                  {brands.map((brand, index) => (
-                    <IndexTable.Row
-                      id={brand.id.toString()}
-                      key={brand.id}
-                      position={index}
-                    >
-                      <IndexTable.Cell>{brand.id}</IndexTable.Cell>
-                      <IndexTable.Cell>{brand.name}</IndexTable.Cell>
-                      <IndexTable.Cell>
-                        <Thumbnail
-                          source={
-                            brand.logo ||
-                            "https://cdn.shopify.com/s/files/1/0757/9955/files/no-image_280x@2x.png"
-                          }
-                          alt={brand.name}
-                          size="medium"
-                        />
-                      </IndexTable.Cell>
-                      <IndexTable.Cell>
-                        <Button
-                          onClick={() => toggleBrandItems(brand.id)}
-                          variant="primary"
-                          disabled={!isSubscribed}
-                        >
-                          {expandedBrand === brand.id
-                            ? "Hide Products"
-                            : "Show Products"}
-                        </Button>
-                      </IndexTable.Cell>
-                      <IndexTable.Cell>
-                        <span
-                          style={{
-                            display: "inline-block",
-                            background: "#00d1ff29",
-                            color: "#00d1ff",
-                            padding: "4px 8px",
-                            borderRadius: "12px",
-                            fontWeight: "600",
-                            fontSize: "14px",
-                            minWidth: "28px",
-                            textAlign: "center",
-                          }}
-                        >
-                          {itemsMap[brand.id]?.length || 0}
-                        </span>
-                      </IndexTable.Cell>
-                    </IndexTable.Row>
-                  ))}
-                </IndexTable>
-              </Card>
-            </Layout.Section>
-          )}
-
-          {isSubscribed &&
-            brands.map((brand) => {
-              const filteredItems = applyFitmentFilters(itemsMap[brand.id] || []);
+        {/* Brands list */}
+        {brands.length === 0 ? (
+          <Card>
+            <div style={{ padding: 48, textAlign: "center" }}>
+              <div style={{ fontSize: 48, marginBottom: 12 }}>🏷️</div>
+              <Text as="h2" variant="headingMd">No brands selected yet</Text>
+              <div style={{ marginTop: 8, color: "#6b7280", marginBottom: 20 }}>Go to the Brands page to select which brands you want to manage.</div>
+              <Button variant="primary" onClick={() => navigate("/app/brands")}>Select Brands</Button>
+            </div>
+          </Card>
+        ) : (
+          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+            {brands.map((brand) => {
+              const isExpanded = expandedBrand === brand.id;
+              const isLoading = loadingMap[brand.id];
+              const rawItems = itemsMap[brand.id] || [];
+              const filteredItems = isExpanded ? applyFitmentFilters(rawItems) : [];
 
               return (
-                expandedBrand === brand.id && (
-                  <Layout.Section fullWidth key={brand.id + "-expanded"}>
-                    {processId && (
-                      <Card sectioned>
-                        <div
-                          style={{
-                            marginBottom: "1rem",
-                            padding: "1rem",
-                            border: "1px solid #e1e1e1",
-                            borderRadius: "4px",
-                          }}
-                        >
-                          <p>
-                            <strong>Process ID:</strong> {processId}
-                          </p>
-
-                          <div style={{ margin: "1rem 0" }}>
-                            <p>
-                              <strong>Status:</strong> {status || "—"}
-                            </p>
-
-                            {progress > 0 && (
-                              <div style={{ marginTop: "0.5rem" }}>
-                                <ProgressBar
-                                  progress={progress}
-                                  color={
-                                    status === "error"
-                                      ? "critical"
-                                      : status === "done"
-                                      ? "success"
-                                      : "highlight"
-                                  }
-                                />
-                                <p
-                                  style={{
-                                    marginTop: "0.25rem",
-                                    fontSize: "0.85rem",
-                                  }}
-                                >
-                                  {processedProducts} of {totalProducts} products
-                                  processed
-                                  {currentProduct &&
-                                    ` - Current: ${currentProduct.name} (${currentProduct.number}/${currentProduct.total})`}
-                                </p>
-                              </div>
-                            )}
-                          </div>
-
-                          {status === "done" && results.length > 0 && (
-                            <div style={{ marginTop: "1rem" }}>
-                              <p>
-                                <strong>Results:</strong> {results.length} products
-                                processed successfully
-                              </p>
-                            </div>
-                          )}
-
-                          {status === "error" && (
-                            <div style={{ marginTop: "1rem", color: "#ff4d4f" }}>
-                              <strong>Error:</strong> {detail}
-                            </div>
-                          )}
-
-                          <Button
-                            onClick={checkStatus}
-                            loading={polling}
-                            variant="primary"
-                            size="large"
-                          >
-                            {status === "done" ? "View Results" : "Check Status"}
-                          </Button>
-                        </div>
-                      </Card>
-                    )}
-
-                    <Card title={`Items from ${brand.name}`} sectioned>
-                      {loadingMap[brand.id] ? (
-                        <Spinner accessibilityLabel="Loading items" size="small" />
-                      ) : (
-                        <div style={{ paddingTop: "1rem" }}>
-                          <Form method="post">
-                            <input
-                              type="hidden"
-                              name="selectedProductIds"
-                              value={JSON.stringify(
-                                filteredItems.map((item) => item.id)
-                              )}
-                            />
-                            <input type="hidden" name="brandId" value={brand.id} />
-
-                            <div
-                              style={{
-                                display: "flex",
-                                gap: "1rem",
-                                alignItems: "end",
-                                flexWrap: "wrap",
-                              }}
-                            >
-                              <TextField
-                                label="Number of products in Selected Filter Make"
-                                type="number"
-                                name="productCount"
-                                value={String(filteredItems.length)}
-                                onChange={(value) => setProductCount(value)}
-                                autoComplete="off"
-                              />
-
-                              <Checkbox
-                                label="Enable Zero Stock"
-                                checked={isFilter_EnableZeroStock}
-                                onChange={() =>
-                                  set_isFilter_EnableZeroStock(
-                                    !isFilter_EnableZeroStock
-                                  )
-                                }
-                              />
-
-                              <Checkbox
-                                label="Filter Only the Regular Stock"
-                                checked={filterregulatstock}
-                                onChange={() =>
-                                  setfilterregulatstock(!filterregulatstock)
-                                }
-                              />
-
-                              <Checkbox
-                                label="Include LTL Freight Required"
-                                checked={isFilter_IncludeLtlFreightRequired}
-                                onChange={() =>
-                                  setisFilter_IncludeLtlFreightRequired(
-                                    !isFilter_IncludeLtlFreightRequired
-                                  )
-                                }
-                              />
-
-                              <Checkbox
-                                label="Exclude Clearance Item"
-                                checked={isFilter_Excludeclearance_item}
-                                onChange={() =>
-                                  setisFilter_Excludeclearance_item(
-                                    !isFilter_Excludeclearance_item
-                                  )
-                                }
-                              />
-
-                              <Checkbox
-                                label="Exclude Air Freight Prohibited"
-                                checked={isFilter_Excludeair_freight_prohibited}
-                                onChange={() =>
-                                  setisFilter_Excludeair_freight_prohibited(
-                                    !isFilter_Excludeair_freight_prohibited
-                                  )
-                                }
-                              />
-
-                              <Checkbox
-                                label="Include Products With No Images"
-                                checked={isFilter_IncludeProductWithNoImages}
-                                onChange={() =>
-                                  setisFilter_IncludeProductWithNoImages(
-                                    !isFilter_IncludeProductWithNoImages
-                                  )
-                                }
-                              />
-
-                              <Button
-                                submit
-                                variant="primary"
-                                size="large"
-                                loading={status?.includes("processing")}
-                                disabled={!isSubscribed}
-                              >
-                                Add First {filteredItems.length} Products from{" "}
-                                {Array.isArray(filters.make)
-                                  ? filters.make.join(", ")
-                                  : filters.make}{" "}
-                                to Store
-                              </Button>
-                            </div>
-                          </Form>
-
-                          <div style={{ padding: "20px 0px" }}>
-                            <Card title="Filter Products by Fitment Tags" sectioned>
-                              <Layout>
-                                <Layout.Section oneThird>
-                                  <Select
-                                    label="Make"
-                                    options={[
-                                      { label: "All", value: "" },
-                                      ...Array.from(makes_list).map((m) => ({
-                                        label: m,
-                                        value: m,
-                                      })),
-                                    ]}
-                                    onChange={handleFilterChange("make")}
-                                    value={Array.isArray(filters.make) ? "" : filters.make}
-                                    disabled={!isSubscribed}
-                                  />
-                                </Layout.Section>
-                              </Layout>
-                            </Card>
-
-                            <Card title="Filter Products by Fitment Tags" sectioned>
-                              <Layout>
-                                <Layout.Section oneThird>
-                                  <Popover
-                                    active={popoverActive}
-                                    activator={activator}
-                                    onClose={togglePopover}
-                                  >
-                                    <OptionList
-                                      title="Make"
-                                      onChange={(selected) =>
-                                        setFilters((prev) => ({
-                                          ...prev,
-                                          make: selected,
-                                        }))
-                                      }
-                                      options={[
-                                        { label: "All", value: "ALL" },
-                                        ...Array.from(makes_list).map((m) => ({
-                                          label: m,
-                                          value: m,
-                                        })),
-                                      ]}
-                                      selected={
-                                        Array.isArray(filters.make)
-                                          ? filters.make
-                                          : filters.make
-                                          ? [filters.make]
-                                          : []
-                                      }
-                                      allowMultiple
-                                    />
-                                  </Popover>
-                                </Layout.Section>
-                              </Layout>
-                            </Card>
-                          </div>
-
-                          <div
-                            style={{
-                              display: "grid",
-                              gridTemplateColumns:
-                                "repeat(auto-fill, minmax(300px, 1fr))",
-                              gap: 16,
-                            }}
-                          >
-                            {filteredItems.map((item) => (
-                              <Card
-                                key={item.id}
-                                title={
-                                  item?.attributes?.product_name ||
-                                  "Untitled Product"
-                                }
-                                sectioned
-                              >
-                                <Layout>
-                                  <Layout.Section oneThird>
-                                    <Thumbnail
-                                      source={
-                                        item?.attributes?.thumbnail ||
-                                        "https://cdn.shopify.com/s/files/1/0757/9955/files/no-image_280x@2x.png"
-                                      }
-                                      alt={
-                                        item?.attributes?.product_name ||
-                                        "Product image"
-                                      }
-                                      size="large"
-                                    />
-                                  </Layout.Section>
-
-                                  <Layout.Section>
-                                    <TextContainer spacing="tight">
-                                      <div style={styles.gridContainer}>
-                                        <div style={styles.gridItem}>
-                                          <strong>Part Number:</strong>{" "}
-                                          {item?.attributes?.part_number || "N/A"}
-                                        </div>
-
-                                        <div style={styles.gridItem}>
-                                          <strong>Category:</strong>{" "}
-                                          {item?.attributes?.category || "N/A"} &gt;{" "}
-                                          {item?.attributes?.subcategory || "N/A"}
-                                        </div>
-
-                                        <div style={styles.gridItem}>
-                                          <strong>Price:</strong> $
-                                          {item?.attributes?.price || "0.00"}
-                                        </div>
-
-                                        <div style={styles.gridFullWidthItem}>
-                                          <strong>Description:</strong>{" "}
-                                          {item?.attributes?.part_description ||
-                                            "No description available"}
-                                        </div>
-
-                                        <div style={styles.gridItem}>
-                                          <strong>Inventory Quantity:</strong>{" "}
-                                          {item?.inventoryQuantity || "N/A"}
-                                        </div>
-
-                                        <div style={styles.gridItem}>
-                                          <strong>Regular Stock:</strong>{" "}
-                                          {item?.attributes?.regular_stock === true
-                                            ? "YES"
-                                            : "NO"}
-                                        </div>
-
-                                        <div style={styles.gridItem}>
-                                          <strong>LTL Freight Required:</strong>{" "}
-                                          {item?.attributes?.ltl_freight_required ===
-                                          true
-                                            ? "YES"
-                                            : "NO"}
-                                        </div>
-
-                                        <div style={styles.gridItem}>
-                                          <strong>Is Clearance Item:</strong>{" "}
-                                          {item?.attributes?.is_clearance_item ===
-                                          true
-                                            ? "YES"
-                                            : "NO"}
-                                        </div>
-
-                                        <div style={styles.gridItem}>
-                                          <strong>Is Air Freight Prohibited:</strong>{" "}
-                                          {item?.attributes
-                                            ?.is_air_freight_prohibited === true
-                                            ? "YES"
-                                            : "NO"}
-                                        </div>
-
-                                        <div style={styles.gridItem}>
-                                          <strong>No. Of Images:</strong>{" "}
-                                          {item?.attributes?.files?.length || "N/A"}
-                                        </div>
-                                      </div>
-                                    </TextContainer>
-                                  </Layout.Section>
-                                </Layout>
-                              </Card>
-                            ))}
-                          </div>
+                <div key={brand.id} style={{ background: "#fff", border: `2px solid ${isExpanded ? "#2563eb" : "#e5e7eb"}`, borderRadius: 14, overflow: "hidden", boxShadow: isExpanded ? "0 4px 16px rgba(37,99,235,0.10)" : "0 1px 4px rgba(0,0,0,0.04)" }}>
+                  {/* Brand row */}
+                  <div style={{ display: "flex", alignItems: "center", padding: "14px 20px", gap: 16, cursor: isSubscribed ? "pointer" : "default", background: isExpanded ? "#f0f7ff" : "#fff" }} onClick={() => toggleBrandItems(brand.id)}>
+                    <img
+                      src={brand.logo || "https://cdn.shopify.com/s/files/1/0757/9955/files/no-image_280x@2x.png"}
+                      alt={brand.name}
+                      style={{ width: 48, height: 48, objectFit: "contain", borderRadius: 8, border: "1px solid #e5e7eb", background: "#f8fafc" }}
+                    />
+                    <div style={{ flex: 1 }}>
+                      <div style={{ fontWeight: 800, fontSize: 16, color: isExpanded ? "#1d4ed8" : "#111827" }}>{brand.name}</div>
+                      <div style={{ fontSize: 12, color: "#9ca3af" }}>ID: {brand.id}</div>
+                    </div>
+                    <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+                      {rawItems.length > 0 && (
+                        <div style={{ background: "#eff6ff", border: "1px solid #bfdbfe", borderRadius: 20, padding: "4px 12px", fontSize: 13, fontWeight: 700, color: "#1d4ed8" }}>
+                          {rawItems.length} products
                         </div>
                       )}
-                    </Card>
-                  </Layout.Section>
-                )
+                      {isLoading && <Spinner size="small" />}
+                      <div style={{ width: 28, height: 28, background: isExpanded ? "#2563eb" : "#f3f4f6", borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center", transition: "all 0.2s" }}>
+                        <span style={{ color: isExpanded ? "#fff" : "#6b7280", fontSize: 12, transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)", display: "block", transition: "transform 0.2s" }}>▼</span>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Expanded section */}
+                  {isExpanded && (
+                    <div style={{ borderTop: "2px solid #dbeafe", background: "#fafcff" }}>
+                      {isLoading ? (
+                        <div style={{ padding: 32, textAlign: "center" }}>
+                          <Spinner />
+                          <div style={{ marginTop: 10, color: "#6b7280", fontSize: 13 }}>Loading products from Turn14…</div>
+                        </div>
+                      ) : (
+                        <div style={{ padding: "20px 20px 28px" }}>
+
+                          {/* Filter panel */}
+                          <div style={{ background: "#fff", border: "1px solid #e5e7eb", borderRadius: 12, padding: "16px 20px", marginBottom: 20 }}>
+                            <div style={{ fontWeight: 700, fontSize: 14, color: "#374151", marginBottom: 14 }}>🔎 Fitment Filters</div>
+
+                            {/* Make selector row */}
+                            <div style={{ display: "flex", gap: 12, alignItems: "flex-end", flexWrap: "wrap", marginBottom: 14 }}>
+                              <div style={{ minWidth: 240 }}>
+                                <Select
+                                  label="Vehicle Make"
+                                  options={[{ label: "All Makes", value: "" }, ...makes_list.map((m) => ({ label: m, value: m }))]}
+                                  onChange={handleFilterChange("make")}
+                                  value={Array.isArray(filters.make) ? "" : filters.make}
+                                  disabled={!isSubscribed}
+                                />
+                              </div>
+                              <Popover
+                                active={popoverActive}
+                                activator={
+                                  <Button onClick={() => setPopoverActive((a) => !a)} disclosure disabled={!isSubscribed}>
+                                    {activeMakeLabel}
+                                  </Button>
+                                }
+                                onClose={() => setPopoverActive(false)}
+                              >
+                                <OptionList
+                                  title="Makes (multi-select)"
+                                  onChange={(selected) => setFilters((prev) => ({ ...prev, make: selected }))}
+                                  options={[{ label: "All", value: "ALL" }, ...makes_list.map((m) => ({ label: m, value: m }))]}
+                                  selected={Array.isArray(filters.make) ? filters.make : filters.make ? [filters.make] : []}
+                                  allowMultiple
+                                />
+                              </Popover>
+                            </div>
+
+                            {/* Toggle pills */}
+                            <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
+                              <FilterPill label="Include Zero Stock" checked={isFilter_EnableZeroStock} onChange={set_isFilter_EnableZeroStock} disabled={!isSubscribed} />
+                              <FilterPill label="Regular Stock Only" checked={filterregulatstock} onChange={setfilterregulatstock} disabled={!isSubscribed} />
+                              <FilterPill label="Include LTL Freight" checked={isFilter_IncludeLtlFreightRequired} onChange={setisFilter_IncludeLtlFreightRequired} disabled={!isSubscribed} />
+                              <FilterPill label="Exclude Clearance" checked={isFilter_Excludeclearance_item} onChange={setisFilter_Excludeclearance_item} disabled={!isSubscribed} />
+                              <FilterPill label="Exclude No-Air Freight" checked={isFilter_Excludeair_freight_prohibited} onChange={setisFilter_Excludeair_freight_prohibited} disabled={!isSubscribed} />
+                              <FilterPill label="Has Images" checked={!isFilter_IncludeProductWithNoImages} onChange={(v) => setisFilter_IncludeProductWithNoImages(!v)} disabled={!isSubscribed} />
+                            </div>
+
+                            {/* Results count */}
+                            <div style={{ marginTop: 12, fontSize: 13, color: "#6b7280" }}>
+                              Showing <strong style={{ color: "#1d4ed8" }}>{filteredItems.length}</strong> of <strong>{rawItems.length}</strong> products
+                            </div>
+                          </div>
+
+                          {/* Import form */}
+                          <Form method="post" onSubmit={() => setImporting(true)}>
+                            <input type="hidden" name="selectedProductIds" value={JSON.stringify(filteredItems.map((item) => item.id))} />
+                            <input type="hidden" name="brandId" value={brand.id} />
+                            <input type="hidden" name="productCount" value={String(filteredItems.length)} />
+                            <button
+                              type="submit"
+                              disabled={importing || !isSubscribed || filteredItems.length === 0}
+                              style={{ background: importing || !isSubscribed || filteredItems.length === 0 ? "#9ca3af" : "linear-gradient(135deg, #1d4ed8, #2563eb)", border: "none", borderRadius: 10, color: "#fff", padding: "13px 24px", cursor: importing || !isSubscribed || filteredItems.length === 0 ? "not-allowed" : "pointer", fontWeight: 700, fontSize: 15, display: "inline-flex", alignItems: "center", gap: 8, marginBottom: 20, width: "100%" }}
+                            >
+                              {importing && <Spinner size="small" />}
+                              {importing
+                                ? "Starting import…"
+                                : `🚀 Import ${filteredItems.length} Products from ${brand.name} to Shopify`}
+                            </button>
+                          </Form>
+
+                          {/* Product grid */}
+                          {filteredItems.length === 0 ? (
+                            <div style={{ textAlign: "center", padding: 32, color: "#9ca3af" }}>
+                              <div style={{ fontSize: 32, marginBottom: 8 }}>🔍</div>
+                              <div style={{ fontSize: 14, fontWeight: 600 }}>No products match current filters</div>
+                              <div style={{ fontSize: 12, marginTop: 4 }}>Try adjusting the fitment or stock filters above</div>
+                            </div>
+                          ) : (
+                            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: 14 }}>
+                              {filteredItems.map((item) => <ProductCard key={item.id} item={item} />)}
+                            </div>
+                          )}
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
               );
             })}
-        </Layout>
+          </div>
+        )}
 
-        {toastMarkup}
+        {toastActive && (
+          <Toast
+            content={status?.includes("completed") ? "Products imported successfully!" : `Import started: ${status}`}
+            onDismiss={() => setToastActive(false)}
+          />
+        )}
       </Page>
     </Frame>
   );
-}
\ No newline at end of file
+}
diff --git a/app/routes/app.settings.jsx b/app/routes/app.settings.jsx
index 4b93ab9..f24e89c 100644
--- a/app/routes/app.settings.jsx
+++ b/app/routes/app.settings.jsx
@@ -9,14 +9,14 @@ import {
   Card,
   TextField,
   Button,
-  TextContainer,
   InlineError,
   Text,
   BlockStack,
-  Box,
   Select,
   Banner,
   InlineStack,
+  Badge,
+  Spinner,
 } from "@shopify/polaris";
 import { TitleBar } from "@shopify/app-bridge-react";
 import { authenticate } from "../shopify.server";
@@ -55,7 +55,6 @@ export const loader = async ({ request }) => {
   if (data.shop.metafield?.value) {
     try { creds = JSON.parse(data.shop.metafield.value); } catch { }
   }
- // creds = {};
   let savedPricing = { priceType: "map", percentage: 0 };
   if (data.shop.pricing?.value) {
     try {
@@ -80,7 +79,6 @@ export const action = async ({ request }) => {
   const intent = formData.get("intent"); // "connect_turn14" | "save_pricing"
   const { admin } = await authenticate.admin(request);
 
-  // we need shop id either way
   const shopResp = await admin.graphql(`{ shop { id name myshopifyDomain } }`);
   const shopJson = await shopResp.json();
   const shopId = shopJson.data.shop.id;
@@ -88,13 +86,10 @@ export const action = async ({ request }) => {
   const shopDomain = shopJson.data.shop.myshopifyDomain;
 
   if (intent === "save_pricing") {
-    // --- save pricing_config metafield directly ---
     const priceTypeRaw = (formData.get("price_type") || "map").toString().toLowerCase();
     const percentageRaw = Number(formData.get("percentage") || 0);
-
     const priceType = ["map", "percentage"].includes(priceTypeRaw) ? priceTypeRaw : "map";
     const percentage = Number.isFinite(percentageRaw) ? percentageRaw : 0;
-
     const cfg = { priceType, percentage };
     const mutation = `
       mutation {
@@ -118,28 +113,19 @@ export const action = async ({ request }) => {
     return json({ success: true, pricingSaved: true, savedPricing: cfg });
   }
 
-  // default / legacy: connect Turn14 flow
+  // connect Turn14 flow
   const clientId = formData.get("client_id");
   const clientSecret = formData.get("client_secret");
 
-  // const clientId = formData.get("demo_client_id");
-  // const clientSecret = formData.get("demo_client_secret");
-
   let tokenData;
   try {
     const tokenRes = await fetch("https://turn14.data4autos.com/v1/auth/token", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({
-        grant_type: "client_credentials",
-        client_id: clientId,
-        client_secret: clientSecret,
-      }),
+      body: JSON.stringify({ grant_type: "client_credentials", client_id: clientId, client_secret: clientSecret }),
     });
     tokenData = await tokenRes.json();
-    if (!tokenRes.ok) {
-      throw new Error(tokenData.error || "Failed to fetch Turn14 token");
-    }
+    if (!tokenRes.ok) throw new Error(tokenData.error || "Failed to fetch Turn14 token");
   } catch (err) {
     return json({ success: false, error: err.message });
   }
@@ -166,9 +152,7 @@ export const action = async ({ request }) => {
   const saveRes = await admin.graphql(mutation);
   const saveJson = await saveRes.json();
   const errs = saveJson.data.metafieldsSet.userErrors;
-  if (errs.length) {
-    return json({ success: false, error: errs[0].message });
-  }
+  if (errs.length) return json({ success: false, error: errs[0].message });
 
   const stateNonce = Math.random().toString(36).slice(2);
   const installUrl =
@@ -178,30 +162,26 @@ export const action = async ({ request }) => {
     `&redirect_uri=${encodeURIComponent(REDIRECT_URI)}` +
     `&state=${stateNonce}`;
 
-  return json({
-    success: true,
-    confirmationUrl: installUrl,
-    creds,
-  });
+  return json({ success: true, confirmationUrl: installUrl, creds });
 };
 
 // ===== COMPONENT =====
 export default function StoreCredentials() {
   const { shopName, savedCreds, savedPricing, shopDomain } = useLoaderData();
   const actionData = useActionData();
+  const [connecting, setConnecting] = useState(false);
 
-  // open Shopify install after Connect Turn14
   useEffect(() => {
     if (actionData?.confirmationUrl) {
       window.open(actionData.confirmationUrl, "_blank", "noopener,noreferrer");
     }
+    setConnecting(false);
   }, [actionData?.confirmationUrl]);
 
   const [clientId, setClientId] = useState(actionData?.creds?.clientId || savedCreds.clientId || "");
   const [clientSecret, setClientSecret] = useState(actionData?.creds?.clientSecret || savedCreds.clientSecret || "");
   const connected = actionData?.success || Boolean(savedCreds.accessToken);
 
-  // Pricing UI state (seed from loader or last action)
   const initialPriceType = useMemo(
     () => (actionData?.savedPricing?.priceType || savedPricing?.priceType || "map"),
     [actionData?.savedPricing?.priceType, savedPricing?.priceType]
@@ -216,135 +196,173 @@ export default function StoreCredentials() {
 
   const pricingSavedOk = actionData?.pricingSaved && actionData?.success && !actionData?.error;
   const pricingError = actionData?.pricingSaved === false ? actionData?.error : null;
+  const connectError = !actionData?.pricingSaved && actionData?.error ? actionData.error : null;
 
   return (
     <Page>
       <TitleBar title="Turn14 & Shopify Connect" />
-      <div style={{ display: "flex", justifyContent: "center", textAlign: "center", paddingBottom: "20px" }}>
-        <Text as="h1" variant="headingLg">Data4Autos Turn14 Integration</Text>
+
+      {/* Dark header */}
+      <div style={{ background: "linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%)", borderRadius: 16, padding: "28px 32px", marginBottom: 28, color: "#fff", display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 12 }}>
+        <div>
+          <div style={{ fontSize: 22, fontWeight: 800, marginBottom: 4 }}>⚙️ Settings</div>
+          <div style={{ fontSize: 14, opacity: 0.8 }}>{shopName}</div>
+        </div>
+        <div style={{ background: connected ? "rgba(34,197,94,0.2)" : "rgba(239,68,68,0.2)", border: `1px solid ${connected ? "rgba(34,197,94,0.4)" : "rgba(239,68,68,0.4)"}`, borderRadius: 20, padding: "6px 16px", fontSize: 13, fontWeight: 700, color: connected ? "#86efac" : "#fca5a5" }}>
+          {connected ? "✅ Turn14 Connected" : "⚠️ Not Connected"}
+        </div>
       </div>
 
       <Layout>
         <Layout.Section>
-          <div style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
-            <Box maxWidth="520px" width="100%" marginInline="auto">
-              <Card sectioned padding="600">
+          <BlockStack gap="500">
+
+            {/* Turn14 Connect Card */}
+            <Card>
+              <BlockStack gap="400">
+                <div style={{ display: "flex", alignItems: "center", gap: 12, paddingBottom: 4 }}>
+                  <div style={{ width: 40, height: 40, background: "#eff6ff", borderRadius: 10, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 20 }}>🔌</div>
+                  <div>
+                    <Text variant="headingMd" as="h2">Turn14 API Credentials</Text>
+                    <Text tone="subdued" variant="bodySm">Connect your Turn14 account to start importing products</Text>
+                  </div>
+                </div>
+
+                <div style={{ height: 1, background: "#f3f4f6" }} />
+
+                {connected && (
+                  <div style={{ background: "#f0fdf4", border: "1px solid #bbf7d0", borderRadius: 10, padding: "12px 16px", display: "flex", alignItems: "center", gap: 10 }}>
+                    <span style={{ fontSize: 18 }}>✅</span>
+                    <div>
+                      <div style={{ fontWeight: 700, color: "#15803d", fontSize: 14 }}>Turn14 connected successfully</div>
+                      <div style={{ fontSize: 12, color: "#6b7280" }}>You can update credentials below at any time</div>
+                    </div>
+                  </div>
+                )}
+
+                <Form method="post" onSubmit={() => setConnecting(true)}>
+                  <input type="hidden" name="intent" value="connect_turn14" />
+                  <BlockStack gap="300">
+                    <TextField
+                      label="Turn14 Client ID"
+                      name="client_id"
+                      value={clientId}
+                      onChange={setClientId}
+                      autoComplete="off"
+                    />
+                    <TextField
+                      label="Turn14 Client Secret"
+                      name="client_secret"
+                      value={clientSecret}
+                      onChange={setClientSecret}
+                      autoComplete="off"
+                    />
+
+                    {connectError && <InlineError message={connectError} fieldID="client_id" />}
+
+                    <div style={{ paddingTop: 4 }}>
+                      <button
+                        type="submit"
+                        disabled={connecting}
+                        style={{ background: "linear-gradient(135deg, #1d4ed8, #2563eb)", border: "none", borderRadius: 8, color: "#fff", padding: "12px 28px", cursor: connecting ? "not-allowed" : "pointer", fontWeight: 700, fontSize: 15, display: "flex", alignItems: "center", gap: 8, opacity: connecting ? 0.7 : 1 }}
+                      >
+                        {connecting && <Spinner size="small" />}
+                        {connecting ? "Connecting…" : connected ? "Reconnect Turn14" : "Connect Turn14"}
+                      </button>
+                    </div>
+                  </BlockStack>
+                </Form>
+              </BlockStack>
+            </Card>
+
+            {/* Pricing Card — only shown when connected */}
+            {connected && (
+              <Card>
                 <BlockStack gap="400">
-                  <TextContainer spacing="tight">
-                    <Text variant="headingLg" align="center" fontWeight="medium">Shop: {shopName}</Text>
-                  </TextContainer>
+                  <div style={{ display: "flex", alignItems: "center", gap: 12, paddingBottom: 4 }}>
+                    <div style={{ width: 40, height: 40, background: "#f0fdf4", borderRadius: 10, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 20 }}>💰</div>
+                    <div>
+                      <Text variant="headingMd" as="h2">Pricing Configuration</Text>
+                      <Text tone="subdued" variant="bodySm">Control how product prices are calculated at import</Text>
+                    </div>
+                  </div>
+
+                  <div style={{ height: 1, background: "#f3f4f6" }} />
+
+                  {/* Pricing type selector */}
+                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
+                    {[
+                      { value: "map", label: "MAP Pricing", desc: "Use manufacturer's MAP price as-is", icon: "🏷️" },
+                      { value: "percentage", label: "MAP + Margin", desc: "Add a % markup on top of MAP", icon: "📈" },
+                    ].map(opt => (
+                      <div
+                        key={opt.value}
+                        onClick={() => setPriceType(opt.value)}
+                        style={{ border: `2px solid ${priceType === opt.value ? "#2563eb" : "#e5e7eb"}`, borderRadius: 10, padding: "14px 16px", cursor: "pointer", background: priceType === opt.value ? "#eff6ff" : "#fafafa", transition: "all 0.15s" }}
+                      >
+                        <div style={{ fontSize: 22, marginBottom: 6 }}>{opt.icon}</div>
+                        <div style={{ fontWeight: 700, fontSize: 14, color: priceType === opt.value ? "#1d4ed8" : "#374151" }}>{opt.label}</div>
+                        <div style={{ fontSize: 12, color: "#6b7280", marginTop: 3 }}>{opt.desc}</div>
+                      </div>
+                    ))}
+                  </div>
 
-                  {/* —— TURN14 FORM —— */}
                   <Form method="post">
-                    <input type="hidden" name="intent" value="connect_turn14" />
-                    {/*  <input type="hidden" name="demo_client_id" value="671f15b6973625885ee392122113d9ed54103ddd" />
-                    <input type="hidden" name="demo_client_secret" value="98907c3b3d92235c99338bd0ce307144b2f66874" />
-                    */}
-                    <BlockStack gap="400">
-                      <BlockStack gap="200">
-                        <TextField
-                          label="Turn14 Client ID"
-                          name="client_id"
-                          value={clientId}
-                          //value={"********************************************************"}
-                          onChange={setClientId}
-                          autoComplete="off"
-                          //   requiredIndicator
-                          padding="200"
-                        />
-                      </BlockStack>
-                      <BlockStack gap="200">
-                        <TextField
-                          label="Turn14 Client Secret"
-                          name="client_secret"
-                          value={clientSecret}
-                          //value={"********************************************************"}
-                          onChange={setClientSecret}
-                          autoComplete="off"
-                          //   requiredIndicator
-                          padding="200"
-                        />
-                      </BlockStack>
-                      {/* <BlockStack gap="200">
-                        <Button submit primary size="large" variant="primary">
-                          Connect Turn14 With Demo Credentials
-                        </Button>
-                      </BlockStack> */}
+                    <input type="hidden" name="intent" value="save_pricing" />
+                    <input type="hidden" name="price_type" value={priceType} />
 
-                      <BlockStack gap="200">
-                        <Button submit primary size="large" variant="primary">
-                          Connect Turn14
-                        </Button>
-                      </BlockStack>
+                    <BlockStack gap="300">
+                      {priceType === "percentage" && (
+                        <TextField
+                          type="number"
+                          label="Markup Percentage"
+                          helpText="Add this percentage on top of the MAP price."
+                          value={String(percentage)}
+                          onChange={(val) => setPercentage(val)}
+                          autoComplete="off"
+                          suffix="%"
+                          min={0}
+                          name="percentage"
+                        />
+                      )}
+
+                      {priceType === "map" && (
+                        <input type="hidden" name="percentage" value="0" />
+                      )}
+
+                      {pricingSavedOk && (
+                        <div style={{ background: "#f0fdf4", border: "1px solid #bbf7d0", borderRadius: 8, padding: "10px 14px", fontSize: 14, color: "#15803d", fontWeight: 600 }}>
+                          ✅ Pricing configuration saved
+                        </div>
+                      )}
+                      {pricingError && (
+                        <div style={{ background: "#fff1f2", border: "1px solid #fecdd3", borderRadius: 8, padding: "10px 14px", fontSize: 14, color: "#dc2626" }}>
+                          ⛔ {pricingError}
+                        </div>
+                      )}
+
+                      <div style={{ paddingTop: 4 }}>
+                        <button
+                          type="submit"
+                          style={{ background: "linear-gradient(135deg, #15803d, #16a34a)", border: "none", borderRadius: 8, color: "#fff", padding: "11px 24px", cursor: "pointer", fontWeight: 700, fontSize: 14 }}
+                        >
+                          Save Pricing
+                        </button>
+                      </div>
                     </BlockStack>
                   </Form>
-
-                  {actionData?.error && !actionData?.pricingSaved && (
-                    <TextContainer spacing="tight" style={{ marginTop: "1rem" }}>
-                      <InlineError message={actionData.error} fieldID="client_id" />
-                    </TextContainer>
-                  )}
-
-                  {(actionData?.success || Boolean(savedCreds.accessToken)) && (
-                    <TextContainer spacing="tight" style={{ marginTop: "1.5rem" }}>
-                      <p style={{ color: "green", paddingTop: "5px" }}>✅ Turn14 connected successfully!</p>
-                    </TextContainer>
-                  )}
-
-                  {/* —— PRICING CONFIG (direct save via this route) —— */}
-                  {(actionData?.success || Boolean(savedCreds.accessToken)) && (
-                    <Card title="Pricing configuration" sectioned>
-                      <BlockStack gap="400">
-                        <Form method="post">
-                          <input type="hidden" name="intent" value="save_pricing" />
-
-                          <Select
-                            label="Price type"
-                            options={[
-                              { label: "MAP (no change)", value: "map" },
-                              { label: "MAP + % profit", value: "percentage" },
-                            ]}
-                            value={priceType}
-                            onChange={(val) => setPriceType(val)}
-                            name="price_type"
-                          />
-
-                          {priceType === "percentage" && (
-                            <TextField
-                              type="number"
-                              label="Percentage"
-                              helpText="Add this percentage on top of MAP."
-                              value={String(percentage)}
-                              onChange={(val) => setPercentage(val)}
-                              autoComplete="off"
-                              suffix="%"
-                              min={0}
-                              name="percentage"
-                            />
-                          )}
-
-                          <div style={{ paddingTop: "15px", textAlign: "end" }}>
-                            <Button submit primary variant="primary" size="large" >Save pricing</Button>
-                          </div>
-                        </Form>
-
-                        {pricingSavedOk && (
-                          <Banner tone="success">
-                            <p>Pricing configuration saved.</p>
-                          </Banner>
-                        )}
-                        {pricingError && (
-                          <Banner tone="critical">
-                            <p>{pricingError}</p>
-                          </Banner>
-                        )}
-                      </BlockStack>
-                    </Card>
-                  )}
                 </BlockStack>
               </Card>
-            </Box>
-          </div>
+            )}
+
+            {/* Info card */}
+            <div style={{ background: "#f8fafc", border: "1px solid #e2e8f0", borderRadius: 12, padding: "16px 20px" }}>
+              <div style={{ fontSize: 13, color: "#64748b", lineHeight: 1.6 }}>
+                <strong style={{ color: "#334155" }}>Need help?</strong> Visit the <a href="/app/help" style={{ color: "#2563eb", fontWeight: 600 }}>Help page</a> for step-by-step setup instructions, or email <a href="mailto:support@data4autos.com" style={{ color: "#2563eb", fontWeight: 600 }}>support@data4autos.com</a>.
+              </div>
+            </div>
+
+          </BlockStack>
         </Layout.Section>
       </Layout>
     </Page>