diff --git a/client/src/app/[site]/components/Header/Header.tsx b/client/src/app/[site]/components/Header/Header.tsx
index cff2988..2f25be8 100644
--- a/client/src/app/[site]/components/Header/Header.tsx
+++ b/client/src/app/[site]/components/Header/Header.tsx
@@ -6,5 +6,13 @@ import { UsageBanners } from "./UsageBanners";
 export function Header() {
   const { user } = userStore();
 
-  return <div className="flex flex-col">{user && <UsageBanners />}</div>;
+  return (
+    <div className="flex flex-col">
+      {user && (
+        <div className="m-4 mb-0">
+          <UsageBanners />
+        </div>
+      )}
+    </div>
+  );
 }
diff --git a/client/src/app/[site]/components/Header/UsageBanners.tsx b/client/src/app/[site]/components/Header/UsageBanners.tsx
index ddc1278..f9cdda2 100644
--- a/client/src/app/[site]/components/Header/UsageBanners.tsx
+++ b/client/src/app/[site]/components/Header/UsageBanners.tsx
@@ -39,7 +39,7 @@ export function UsageBanners() {
     site.monthlyEventCount > site.eventLimit
   ) {
     return (
-      <Alert variant="destructive" className="p-4 m-4">
+      <Alert variant="destructive" className="p-4">
         <div className="flex items-start space-x-3">
           <AlertTriangle className="h-5 w-5 mt-0.5" />
           <div className="flex-1">
@@ -78,7 +78,7 @@ export function UsageBanners() {
   // If approaching limit (>90%), show warning banner
   if (isNearLimit) {
     return (
-      <Alert className="p-4 bg-amber-50 border-amber-200 dark:bg-amber-900/20 dark:border-amber-800  m-4">
+      <Alert className="p-4 bg-amber-50 border-amber-200 dark:bg-amber-900/20 dark:border-amber-800">
         <div className="flex items-start space-x-3">
           <AlertTriangle className="h-5 w-5 mt-0.5 text-amber-500" />
           <div className="flex-1">
diff --git a/client/src/app/[site]/main/components/MainSection/SparklinesChart.tsx b/client/src/app/[site]/main/components/MainSection/SparklinesChart.tsx
index 070a0a5..5d96fd6 100644
--- a/client/src/app/[site]/main/components/MainSection/SparklinesChart.tsx
+++ b/client/src/app/[site]/main/components/MainSection/SparklinesChart.tsx
@@ -62,7 +62,7 @@ export function SparklinesChart({
       useMesh={true}
       animate={false}
       enableSlices={"x"}
-      colors={[isHovering ? "hsl(var(--dataviz))" : "hsl(var(--dataviz))"]}
+      colors={[isHovering ? "hsl(var(--dataviz-2))" : "hsl(var(--dataviz))"]}
       enableArea={false}
       areaBaselineValue={0}
       areaOpacity={0.3}
diff --git a/client/src/app/globals.css b/client/src/app/globals.css
index 46d8090..c88b3d1 100644
--- a/client/src/app/globals.css
+++ b/client/src/app/globals.css
@@ -27,7 +27,8 @@ body {
     --ring: 240 5.9% 10%;
     --radius: 0.3rem;
 
-    --dataviz: 230 60% 85%;
+    --dataviz: 230 100% 85%;
+    --dataviz-2: 230 100% 92%;
     
     --accent-50: var(--emerald-50);
     --accent-100: var(--emerald-100);
diff --git a/client/tailwind.config.ts b/client/tailwind.config.ts
index 9cecd75..6c1a12e 100644
--- a/client/tailwind.config.ts
+++ b/client/tailwind.config.ts
@@ -55,6 +55,7 @@ module.exports = {
         },
         dataviz: {
           DEFAULT: "hsl(var(--dataviz))",
+          "2": "hsl(var(--dataviz-2))",
         },
         popover: {
           DEFAULT: "hsl(var(--popover))",