diff --git a/app/docs-og/[...slug]/route.tsx b/app/docs-og/[...slug]/route.tsx
index 0bec07b..ebe0f7f 100644
--- a/app/docs-og/[...slug]/route.tsx
+++ b/app/docs-og/[...slug]/route.tsx
@@ -1,16 +1,146 @@
 import { metadataImage } from "@/lib/docs/metadata";
-import { generateOGImage } from "fumadocs-ui/og";
+import { ImageResponse } from "next/og";
+import React from "react";
+import fs from "node:fs";
+import path from "node:path";
 
 export const dynamic = "force-dynamic";
 
-export const GET = metadataImage.createAPI((page) => {
-  return generateOGImage({
-    title: page.data.title,
-    description: page.data.description,
-    site: "FixFX",
-    primaryColor: "#3b82f6",
-    primaryTextColor: "#f8fafc",
-  });
+export const GET = metadataImage.createAPI(async (page: any) => {
+  // Truncate description to prevent overflow
+  const maxDescLength = 150;
+  const description = page.data.description 
+    ? page.data.description.length > maxDescLength
+      ? page.data.description.substring(0, maxDescLength).trim() + "..."
+      : page.data.description
+    : "";
+
+  // Read the logo from the filesystem
+  const logoPath = path.join(process.cwd(), "public", "logo.png");
+  const logoBuffer = fs.readFileSync(logoPath);
+  const logoData = logoBuffer.buffer.slice(logoBuffer.byteOffset, logoBuffer.byteOffset + logoBuffer.byteLength);
+
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "flex-start",
+          justifyContent: "space-between",
+          background: "linear-gradient(to bottom right, #0a0a0f 0%, #0d0d14 50%, #0f0f18 100%)",
+          position: "relative",
+          overflow: "hidden",
+          padding: "60px 80px",
+        }}
+      >
+        {/* Background gradient orbs */}
+        <div
+          style={{
+            position: "absolute",
+            top: "-100px",
+            left: "200px",
+            width: "400px",
+            height: "400px",
+            background: "radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, transparent 70%)",
+            borderRadius: "50%",
+          }}
+        />
+        <div
+          style={{
+            position: "absolute",
+            bottom: "-50px",
+            right: "150px",
+            width: "350px",
+            height: "350px",
+            background: "radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, transparent 70%)",
+            borderRadius: "50%",
+          }}
+        />
+
+        {/* Header with logo and site name */}
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: "20px",
+            zIndex: 10,
+          }}
+        >
+          <img
+            // @ts-ignore
+            src={logoData as any}
+            alt="Logo"
+            width="64"
+            height="64"
+            style={{
+              borderRadius: "12px",
+            }}
+          />
+          <span
+            style={{
+              fontSize: "48px",
+              fontWeight: 800,
+              background: "linear-gradient(to right, #3b82f6, #06b6d4)",
+              backgroundClip: "text",
+              color: "transparent",
+              letterSpacing: "-0.02em",
+            }}
+          >
+            FixFX
+          </span>
+        </div>
+
+        {/* Main content */}
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            gap: "24px",
+            maxWidth: "1100px",
+            zIndex: 10,
+          }}
+        >
+          <h1
+            style={{
+              fontSize: "100px",
+              fontWeight: 900,
+              background: "linear-gradient(to bottom right, #ffffff 30%, #94a3b8 100%)",
+              backgroundClip: "text",
+              color: "transparent",
+              lineHeight: 1.0,
+              margin: 0,
+              letterSpacing: "-0.04em",
+            }}
+          >
+            {page.data.title}
+          </h1>
+          {description && (
+            <p
+              style={{
+                fontSize: "32px",
+                fontWeight: 400,
+                color: "#94a3b8",
+                lineHeight: 1.4,
+                margin: 0,
+                letterSpacing: "-0.01em",
+              }}
+            >
+              {description}
+            </p>
+          )}
+        </div>
+
+
+      </div>
+    ),
+    {
+      width: 1200,
+      height: 630,
+    }
+  );
 });
 
 export function generateStaticParams() {
diff --git a/app/hosting/opengraph-image.tsx b/app/hosting/opengraph-image.tsx
index 414f517..747afab 100644
--- a/app/hosting/opengraph-image.tsx
+++ b/app/hosting/opengraph-image.tsx
@@ -1,4 +1,7 @@
 import { ImageResponse } from "next/og";
+import React from "react";
+import fs from "node:fs";
+import path from "node:path";
 
 export const runtime = "nodejs";
 export const alt = "FixFX Hosting Partners - Trusted Game Server Hosting";
@@ -10,169 +13,168 @@ export const size = {
 export const contentType = "image/png";
 
 export default function Image() {
-  return new ImageResponse(
-    <div
-      style={{
-        width: "100%",
-        height: "100%",
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        background:
-          "linear-gradient(to bottom right, #0a0a0f 0%, #0d0d14 50%, #0f0f18 100%)",
-        position: "relative",
-        overflow: "hidden",
-      }}
-    >
-      {/* Background gradient orbs */}
-      <div
-        style={{
-          position: "absolute",
-          top: "-100px",
-          left: "200px",
-          width: "400px",
-          height: "400px",
-          background:
-            "radial-gradient(circle, rgba(34, 197, 94, 0.3) 0%, transparent 70%)",
-          borderRadius: "50%",
-        }}
-      />
-      <div
-        style={{
-          position: "absolute",
-          bottom: "-50px",
-          right: "150px",
-          width: "350px",
-          height: "350px",
-          background:
-            "radial-gradient(circle, rgba(59, 130, 246, 0.25) 0%, transparent 70%)",
-          borderRadius: "50%",
-        }}
-      />
-      <div
-        style={{
-          position: "absolute",
-          top: "50%",
-          left: "50%",
-          transform: "translate(-50%, -50%)",
-          width: "600px",
-          height: "600px",
-          background:
-            "radial-gradient(circle, rgba(139, 92, 246, 0.1) 0%, transparent 60%)",
-          borderRadius: "50%",
-        }}
-      />
-
-      {/* Badge */}
-      <div
-        style={{
-          display: "flex",
-          alignItems: "center",
-          gap: "8px",
-          padding: "8px 20px",
-          borderRadius: "9999px",
-          border: "1px solid rgba(34, 197, 94, 0.3)",
-          background: "rgba(34, 197, 94, 0.1)",
-          marginBottom: "24px",
-        }}
-      >
-        <div style={{ fontSize: "20px" }}>🤝</div>
-        <span style={{ color: "#22c55e", fontSize: "18px", fontWeight: "500" }}>
-          Official Partners
-        </span>
-      </div>
+  // Read the logo from the filesystem
+  const logoPath = path.join(process.cwd(), "public", "logo.png");
+  const logoBuffer = fs.readFileSync(logoPath);
+  const logoData = logoBuffer.buffer.slice(
+    logoBuffer.byteOffset,
+    logoBuffer.byteOffset + logoBuffer.byteLength
+  );
 
-      {/* Main title */}
+  return new ImageResponse(
+    (
       <div
         style={{
+          width: "100%",
+          height: "100%",
           display: "flex",
+          flexDirection: "column",
           alignItems: "center",
-          marginBottom: "20px",
+          justifyContent: "center",
+          background: "linear-gradient(to bottom right, #0a0a0f 0%, #0d0d14 50%, #0f0f18 100%)",
+          position: "relative",
+          overflow: "hidden",
         }}
       >
-        <span
+        {/* Background gradient orbs */}
+        <div
           style={{
-            fontSize: "80px",
-            fontWeight: "800",
-            background: "linear-gradient(to right, #22c55e, #3b82f6)",
-            backgroundClip: "text",
-            color: "transparent",
+            position: "absolute",
+            top: "-100px",
+            left: "200px",
+            width: "400px",
+            height: "400px",
+            background: "radial-gradient(circle, rgba(34, 197, 94, 0.25) 0%, transparent 70%)",
+            borderRadius: "50%",
+          }}
+        />
+        <div
+          style={{
+            position: "absolute",
+            bottom: "-50px",
+            right: "150px",
+            width: "350px",
+            height: "350px",
+            background: "radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, transparent 70%)",
+            borderRadius: "50%",
+          }}
+        />
+        <div
+          style={{
+            position: "absolute",
+            top: "10%",
+            left: "10%",
+            display: "flex",
+            alignItems: "center",
+            gap: "16px",
           }}
         >
-          Hosting Partners
-        </span>
-      </div>
-
-      {/* Subtitle */}
-      <p
-        style={{
-          fontSize: "28px",
-          color: "#94a3b8",
-          textAlign: "center",
-          maxWidth: "800px",
-          lineHeight: "1.4",
-          margin: "0",
-        }}
-      >
-        Trusted hosting providers for your{" "}
-        <span style={{ color: "#f8fafc", fontWeight: "500" }}>FiveM</span> and{" "}
-        <span style={{ color: "#f8fafc", fontWeight: "500" }}>RedM</span>{" "}
-        servers
-      </p>
-
-      {/* Bottom indicators */}
-      <div
-        style={{
-          display: "flex",
-          alignItems: "center",
-          gap: "40px",
-          marginTop: "48px",
-        }}
-      >
-        <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
-          <div
+          <img
+            // @ts-ignore
+            src={logoData as any}
+            alt="Logo"
+            width="48"
+            height="48"
             style={{
-              width: "10px",
-              height: "10px",
-              borderRadius: "50%",
-              background: "#22c55e",
+              borderRadius: "10px",
             }}
           />
-          <span style={{ color: "#64748b", fontSize: "16px" }}>
-            Exclusive Discounts
-          </span>
-        </div>
-        <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
-          <div
+          <span
             style={{
-              width: "10px",
-              height: "10px",
-              borderRadius: "50%",
-              background: "#3b82f6",
+              fontSize: "32px",
+              fontWeight: 800,
+              background: "linear-gradient(to right, #22c55e, #10b981)",
+              backgroundClip: "text",
+              color: "transparent",
             }}
-          />
-          <span style={{ color: "#64748b", fontSize: "16px" }}>
-            High Performance
+          >
+            FixFX
           </span>
         </div>
-        <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
-          <div
-            style={{
-              width: "10px",
-              height: "10px",
-              borderRadius: "50%",
-              background: "#a855f7",
-            }}
-          />
-          <span style={{ color: "#64748b", fontSize: "16px" }}>
-            24/7 Support
+
+        {/* Badge */}
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: "12px",
+            padding: "10px 24px",
+            borderRadius: "9999px",
+            border: "1px solid rgba(34, 197, 94, 0.4)",
+            background: "rgba(34, 197, 94, 0.1)",
+            marginBottom: "32px",
+          }}
+        >
+          <span style={{ fontSize: "24px" }}>🤝</span>
+          <span style={{ color: "#22c55e", fontSize: "20px", fontWeight: "600" }}>
+            Official Partners
           </span>
         </div>
+
+        {/* Main title */}
+        <h1
+          style={{
+            fontSize: "100px",
+            fontWeight: 900,
+            background: "linear-gradient(to right, #22c55e, #10b981, #3b82f6)",
+            backgroundClip: "text",
+            color: "transparent",
+            textAlign: "center",
+            margin: "0 0 24px 0",
+            lineHeight: 1.0,
+            letterSpacing: "-0.04em",
+          }}
+        >
+          Hosting Partners
+        </h1>
+
+        {/* Subtitle with fixed spacing */}
+        <p
+          style={{
+            fontSize: "34px",
+            color: "#94a3b8",
+            textAlign: "center",
+            maxWidth: "900px",
+            lineHeight: "1.4",
+            margin: "0",
+            display: "flex",
+            flexWrap: "wrap",
+            justifyContent: "center",
+          }}
+        >
+          <span>Trusted hosting providers for your</span>
+          <span style={{ color: "#f8fafc", fontWeight: "600", margin: "0 12px" }}>FiveM</span>
+          <span>and</span>
+          <span style={{ color: "#f8fafc", fontWeight: "600", margin: "0 12px" }}>RedM</span>
+          <span>servers</span>
+        </p>
+
+        {/* Bottom indicators */}
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: "48px",
+            marginTop: "60px",
+          }}
+        >
+          <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
+            <div style={{ width: "12px", height: "12px", borderRadius: "50%", background: "#22c55e" }} />
+            <span style={{ color: "#64748b", fontSize: "18px", fontWeight: 500 }}>Exclusive Discounts</span>
+          </div>
+          <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
+            <div style={{ width: "12px", height: "12px", borderRadius: "50%", background: "#3b82f6" }} />
+            <span style={{ color: "#64748b", fontSize: "18px", fontWeight: 500 }}>High Performance</span>
+          </div>
+          <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
+            <div style={{ width: "12px", height: "12px", borderRadius: "50%", background: "#a855f7" }} />
+            <span style={{ color: "#64748b", fontSize: "18px", fontWeight: 500 }}>24/7 Support</span>
+          </div>
+        </div>
       </div>
-    </div>,
+    ),
     {
       ...size,
-    },
+    }
   );
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index 8e81c35..6deeb70 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,4 +1,5 @@
 import { RootProvider } from "fumadocs-ui/provider";
+import { QueryProvider } from "@/components/providers/query-provider";
 import { Analytics } from "@vercel/analytics/react";
 import Script from "next/script";
 import { inter, jetbrains } from "@/lib/fonts";
@@ -272,7 +273,9 @@ export default function Layout({
         <link rel="dns-prefetch" href="https://portal.cfx.re" />
       </head>
       <body className="dark:selection:text-fd-foreground antialiased [text-rendering:optimizeLegibility] selection:bg-neutral-800 selection:text-white dark:selection:bg-neutral-800">
-        <RootProvider theme="dark">{children}</RootProvider>
+        <QueryProvider>
+          <RootProvider theme="dark">{children}</RootProvider>
+        </QueryProvider>
         <Analytics />
         <Script
           async
diff --git a/components/providers/query-provider.tsx b/components/providers/query-provider.tsx
new file mode 100644
index 0000000..400b2b2
--- /dev/null
+++ b/components/providers/query-provider.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { useState, type ReactNode } from "react";
+
+export function QueryProvider({ children }: { children: ReactNode }) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            // With SSR, we usually want to set some default staleTime
+            // to avoid refetching immediately on the client
+            staleTime: 60 * 1000,
+          },
+        },
+      }),
+  );
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  );
+}
diff --git a/package.json b/package.json
index 09a02bb..df0753c 100644
--- a/package.json
+++ b/package.json
@@ -29,22 +29,23 @@
     "@ai-sdk/google": "^0.0.30",
     "@ai-sdk/openai": "^0.0.38",
     "@radix-ui/react-accordion": "^1.2.12",
-    "@radix-ui/react-select": "^2.1.4",
-    "@radix-ui/react-tabs": "^1.0.4",
-    "@radix-ui/react-scroll-area": "^1.2.3",
-    "@radix-ui/react-dropdown-menu": "^2.1.4",
     "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-dropdown-menu": "^2.1.4",
     "@radix-ui/react-label": "^2.1.1",
-    "@radix-ui/react-slot": "^1.1.1",
-    "@radix-ui/react-slider": "^1.2.2",
     "@radix-ui/react-progress": "^1.1.3",
     "@radix-ui/react-radio-group": "^1.2.3",
-    "@radix-ui/react-tooltip": "^1.1.7",
+    "@radix-ui/react-scroll-area": "^1.2.3",
+    "@radix-ui/react-select": "^2.1.4",
+    "@radix-ui/react-slider": "^1.2.2",
+    "@radix-ui/react-slot": "^1.1.1",
     "@radix-ui/react-switch": "^1.1.2",
+    "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-tooltip": "^1.1.7",
+    "@tanstack/react-query": "^5.90.20",
+    "@tanstack/react-query-devtools": "^5.91.2",
     "@vercel/analytics": "^1.3.2",
     "@vercel/functions": "^2.0.0",
     "ai": "^3.2.34",
-    "axios": "^1.7.9",
     "ajv": "^8.12.0",
     "ajv-formats": "^3.0.1",
     "cheerio": "^1.0.0",
@@ -61,8 +62,8 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.4.0",
-    "react-syntax-highlighter": "^15.6.1",
     "react-markdown": "^10.1.0",
+    "react-syntax-highlighter": "^15.6.1",
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.0",
     "shiki": "^1.26.0",
diff --git a/packages/core/src/useFetch/index.ts b/packages/core/src/useFetch/index.ts
index eb9c9d8..b6db2fc 100644
--- a/packages/core/src/useFetch/index.ts
+++ b/packages/core/src/useFetch/index.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState, useRef } from "react";
+import { useQuery } from "@tanstack/react-query";
 
 type UseFetchResult<T, E> = {
   data: T | null;
@@ -9,93 +9,51 @@ type UseFetchResult<T, E> = {
   refetch: () => void;
 };
 
-const description = "Fetches data from a specified API endpoint.";
-
 /**
- * Fetches data from a specified API endpoint.
+ * Fetches data from a specified API endpoint using TanStack Query.
  *
  * @template T - Type of the data returned by the API.
- * @template E - Type of the error returned by the API (default is `string`).
+ * @template E - Type of the error returned by the API (default is `Error`).
  *
  * @param {string} url - The URL of the API endpoint.
- * @param {RequestInit} [reqOpt] - Optional configuration for the fetch request (e.g., method, headers).
+ * @param {RequestInit} [reqOpt] - Optional configuration for the fetch request.
  * @param {any[]} [deps] - Optional dependency array to trigger re-fetching when values change.
  *
- * @returns {UseFetchResult<T, E>} An object containing the following properties:
- * - `data`: The data returned by the API, or `null` if no data has been received yet.
- * - `error`: The error returned by the API, or `null` if no error has occurred.
- * - `isPending`: A boolean indicating whether the fetch request is currently in progress.
- * - `isSuccess`: A boolean indicating if the fetch request was successful.
- * - `isError`: A boolean indicating if the fetch request resulted in an error.
- * - `refetch`: A function to manually trigger the fetch request again.
+ * @returns {UseFetchResult<T, E>} An object containing the fetch result and status.
  */
-export function useFetch<T, E = string>(
+export function useFetch<T, E = Error>(
   url: string,
   reqOpt?: RequestInit,
-  deps?: any[],
+  deps: any[] = [],
 ): UseFetchResult<T, E> {
-  const [data, setData] = useState<T | null>(null);
-  const [error, setError] = useState<E | null>(null);
-  const [isPending, setisPending] = useState(false);
-  const [isSuccess, setIsSuccess] = useState(false);
-  const abortControllerRef = useRef<AbortController | null>(null);
-
-  /**
-   * Fetches data from the provided URL using the specified request options.
-   *
-   * This function uses `fetch` with an `AbortController` to allow for request cancellation if needed.
-   * Updates the state with the response data, error, or loading status based on the fetch result.
-   */
-  const fetchData = useCallback(async () => {
-    // Abort any existing request
-    if (abortControllerRef.current) {
-      abortControllerRef.current.abort();
-    }
-
-    setisPending(true);
-    setIsSuccess(false);
-
-    const controller = new AbortController();
-    abortControllerRef.current = controller;
-    const signal = controller.signal;
-
-    try {
+  const {
+    data,
+    error,
+    isPending,
+    isSuccess,
+    isError,
+    refetch,
+  } = useQuery({
+    queryKey: [url, ...deps],
+    queryFn: async ({ signal }) => {
       const res = await fetch(url, { ...reqOpt, signal });
-      const result = await res.json();
-
-      if (res.ok) {
-        setData(result);
-        setIsSuccess(true);
-        setError(null);
-      } else {
-        setError(result as E);
-      }
-    } catch (e) {
-      if (e instanceof Error && e.name !== "AbortError") {
-        setError(e as unknown as E);
-      }
-    } finally {
-      setisPending(false);
-    }
-  }, [url, reqOpt]);
-
-  // Re-fetch when URL changes or when deps change
-  useEffect(() => {
-    fetchData();
-
-    return () => {
-      if (abortControllerRef.current) {
-        abortControllerRef.current.abort();
+      
+      if (!res.ok) {
+        const result = await res.json().catch(() => ({}));
+        throw result || new Error(`Failed to fetch from ${url}`);
       }
-    };
-  }, [url, ...(deps || [])]);
+      
+      return res.json() as Promise<T>;
+    },
+    // Maintain behavior: refetch when url or deps change
+  });
 
   return {
-    data,
-    error,
+    data: data ?? null,
+    error: (error as E) ?? null,
     isPending,
     isSuccess,
-    isError: !isSuccess && !isPending,
-    refetch: fetchData,
+    isError,
+    refetch,
   };
 }
diff --git a/packages/ui/src/core/landing/tracer.tsx b/packages/ui/src/core/landing/tracer.tsx
index 6eb014c..8a093ee 100644
--- a/packages/ui/src/core/landing/tracer.tsx
+++ b/packages/ui/src/core/landing/tracer.tsx
@@ -42,20 +42,96 @@ export function Tracer() {
           />
         </div>
 
-        {/* Mobile vertical line */}
-        <div className="md:hidden absolute left-1/2 top-[80px] bottom-[80px] w-1 -translate-x-1/2 z-0">
-          <div className="h-full w-full rounded-full bg-gradient-to-b from-red-500 via-blue-500 to-green-500 opacity-30" />
-          <motion.div
-            className="absolute top-0 left-0 w-full rounded-full bg-gradient-to-b from-red-500 via-blue-500 to-green-500"
-            initial={{ height: "0%" }}
-            whileInView={{ height: "100%" }}
-            viewport={{ once: true }}
-            transition={{ duration: 1.5, delay: 0.3 }}
+        {/* Mobile vertical segments - replaces single absolute line for better text readability */}
+        <div className="md:hidden flex flex-col items-center gap-0 relative z-10 w-full">
+          <Step
+            icon={<CitizenFXLogo className="h-8 w-8 md:h-10 md:w-10" />}
+            badge={<AlertTriangle className="h-4 w-4 text-white" />}
+            badgeColor="bg-red-500"
+            title="Encounter Error"
+            description="Server crashes or resource errors in your FiveM/RedM setup"
+            delay={0.2}
+          />
+
+          {/* Line Segment 1 */}
+          <div className="h-16 w-1 relative my-2">
+            <div className="absolute inset-0 bg-gradient-to-b from-red-500 to-blue-500 rounded-full opacity-30" />
+            <motion.div
+              className="absolute inset-0 bg-gradient-to-b from-red-500 to-blue-500 rounded-full"
+              initial={{ height: "0%" }}
+              whileInView={{ height: "100%" }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.8, delay: 0.4 }}
+            />
+            <motion.div
+              className="absolute left-1/2 bottom-0 -translate-x-1/2 text-blue-500"
+              initial={{ opacity: 0 }}
+              whileInView={{ opacity: 1 }}
+              viewport={{ once: true }}
+              transition={{ delay: 1.0 }}
+            >
+              <ArrowRight className="h-4 w-4 rotate-90" />
+            </motion.div>
+          </div>
+
+          <Step
+            icon={
+              <FixFXIcon className="h-8 w-8 md:h-10 md:w-10" stroke="#3b82f6" />
+            }
+            badge={
+              <svg
+                className="h-4 w-4 text-white"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+              >
+                <path
+                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+            }
+            badgeColor="bg-blue-500"
+            title="Find Solutions"
+            description="Browse our comprehensive guides and troubleshooting docs"
+            delay={0.5}
+          />
+
+          {/* Line Segment 2 */}
+          <div className="h-16 w-1 relative my-2">
+            <div className="absolute inset-0 bg-gradient-to-b from-blue-500 to-green-500 rounded-full opacity-30" />
+            <motion.div
+              className="absolute inset-0 bg-gradient-to-b from-blue-500 to-green-500 rounded-full"
+              initial={{ height: "0%" }}
+              whileInView={{ height: "100%" }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.8, delay: 0.7 }}
+            />
+            <motion.div
+              className="absolute left-1/2 bottom-0 -translate-x-1/2 text-green-500"
+              initial={{ opacity: 0 }}
+              whileInView={{ opacity: 1 }}
+              viewport={{ once: true }}
+              transition={{ delay: 1.3 }}
+            >
+              <ArrowRight className="h-4 w-4 rotate-90" />
+            </motion.div>
+          </div>
+
+          <Step
+            icon={<span className="text-3xl md:text-4xl">🎮</span>}
+            badge={<CheckCircle className="h-4 w-4 text-white" />}
+            badgeColor="bg-green-500"
+            title="Problem Solved"
+            description="Get back to enjoying your CitizenFX experience"
+            delay={0.8}
           />
         </div>
 
-        {/* Steps container */}
-        <div className="relative z-10 flex flex-col md:flex-row items-center justify-between gap-8 md:gap-4">
+        {/* Desktop steps container */}
+        <div className="hidden md:flex relative z-10 flex-row items-center justify-between gap-4">
           <Step
             icon={<CitizenFXLogo className="h-8 w-8 md:h-10 md:w-10" />}
             badge={<AlertTriangle className="h-4 w-4 text-white" />}
@@ -65,17 +141,6 @@ export function Tracer() {
             delay={0.2}
           />
 
-          {/* Arrow for mobile */}
-          <motion.div
-            className="md:hidden text-fd-muted-foreground"
-            initial={{ opacity: 0 }}
-            whileInView={{ opacity: 1 }}
-            viewport={{ once: true }}
-            transition={{ delay: 0.5 }}
-          >
-            <ArrowRight className="h-5 w-5 rotate-90" />
-          </motion.div>
-
           <Step
             icon={
               <FixFXIcon className="h-8 w-8 md:h-10 md:w-10" stroke="#3b82f6" />
@@ -101,17 +166,6 @@ export function Tracer() {
             delay={0.5}
           />
 
-          {/* Arrow for mobile */}
-          <motion.div
-            className="md:hidden text-fd-muted-foreground"
-            initial={{ opacity: 0 }}
-            whileInView={{ opacity: 1 }}
-            viewport={{ once: true }}
-            transition={{ delay: 0.8 }}
-          >
-            <ArrowRight className="h-5 w-5 rotate-90" />
-          </motion.div>
-
           <Step
             icon={<span className="text-3xl md:text-4xl">🎮</span>}
             badge={<CheckCircle className="h-4 w-4 text-white" />}
diff --git a/packages/ui/src/core/layout/hero.tsx b/packages/ui/src/core/layout/hero.tsx
index 03729c5..25aefb0 100644
--- a/packages/ui/src/core/layout/hero.tsx
+++ b/packages/ui/src/core/layout/hero.tsx
@@ -69,28 +69,30 @@ export function Hero() {
 
       {/* CTA buttons */}
       <motion.div
-        className="flex flex-col gap-3 sm:flex-row sm:gap-4"
+        className="flex flex-col gap-3 sm:flex-row sm:gap-4 w-full sm:w-auto mt-4"
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ delay: 0.45, duration: 0.5 }}
       >
-        <Link href="/docs/core">
+        <Link href="/docs/core" className="w-full sm:w-auto">
           <Button
-            className="group relative overflow-hidden px-6 py-3 text-base font-medium"
+            className="group relative overflow-hidden w-full sm:w-auto"
             variant="default"
+            size="lg"
           >
-            <span className="relative z-10 flex items-center">
+            <span className="relative z-10 flex items-center justify-center">
               Get Started
               <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
             </span>
           </Button>
         </Link>
-        <Link href="/docs/cfx/common-errors">
+        <Link href="/docs/cfx/common-errors" className="w-full sm:w-auto">
           <Button
-            className="group px-6 py-3 text-base font-medium"
+            className="group w-full sm:w-auto"
             variant="outline"
+            size="lg"
           >
-            <span className="relative z-10 flex items-center">
+            <span className="relative z-10 flex items-center justify-center">
               Troubleshoot Issues
               <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
             </span>
diff --git a/packages/utils/src/functions/githubFetcher.ts b/packages/utils/src/functions/githubFetcher.ts
index 43ba0a9..a47e735 100644
--- a/packages/utils/src/functions/githubFetcher.ts
+++ b/packages/utils/src/functions/githubFetcher.ts
@@ -1,4 +1,9 @@
-import axios, { AxiosInstance, AxiosRequestConfig, AxiosError } from "axios";
+
+interface GitHubResponse<T> {
+  data: T;
+  headers: Record<string, string>;
+  status: number;
+}
 
 interface GitHubFetcherOptions {
   baseURL?: string;
@@ -7,14 +12,10 @@ interface GitHubFetcherOptions {
   authToken?: string;
 }
 
-interface GitHubResponse<T> {
-  data: T;
-  headers: Record<string, string>;
-  status: number;
-}
-
 class GitHubFetcher {
-  private client: AxiosInstance;
+  private baseURL: string;
+  private timeout: number;
+  private userAgent: string;
   private rateLimitRemaining: number = 60;
   private rateLimitReset: number = 0;
   private authToken: string | undefined;
@@ -27,38 +28,15 @@ class GitHubFetcher {
       authToken = process.env.GITHUB_TOKEN,
     } = options;
 
+    this.baseURL = baseURL;
+    this.timeout = timeout;
+    this.userAgent = userAgent;
     this.authToken = authToken;
-
-    this.client = axios.create({
-      baseURL,
-      timeout,
-      headers: {
-        Accept: "application/vnd.github.v3+json",
-        "User-Agent": userAgent,
-        ...(this.authToken
-          ? { Authorization: `Bearer ${this.authToken}` }
-          : {}),
-      },
-    });
-
-    // Add response interceptor to track rate limits
-    this.client.interceptors.response.use(
-      (response) => {
-        this.updateRateLimits(response.headers);
-        return response;
-      },
-      (error) => {
-        if (error.response) {
-          this.updateRateLimits(error.response.headers);
-        }
-        return Promise.reject(error);
-      },
-    );
   }
 
-  private updateRateLimits(headers: any) {
-    const remaining = headers["x-ratelimit-remaining"];
-    const reset = headers["x-ratelimit-reset"];
+  private updateRateLimits(headers: Headers) {
+    const remaining = headers.get("x-ratelimit-remaining");
+    const reset = headers.get("x-ratelimit-reset");
 
     if (remaining) {
       this.rateLimitRemaining = parseInt(remaining, 10);
@@ -79,48 +57,52 @@ class GitHubFetcher {
     };
   }
 
-  /**
-   * Make a GET request to the GitHub API
-   */
-  async get<T>(
+  private async request<T>(
     endpoint: string,
-    config?: AxiosRequestConfig,
+    options: RequestInit = {},
   ): Promise<GitHubResponse<T>> {
-    try {
-      if (!this.authToken) {
-        throw new Error(
-          "GitHub token not configured. Please set GITHUB_TOKEN environment variable.",
-        );
-      }
+    if (!this.authToken) {
+      throw new Error(
+        "GitHub token not configured. Please set GITHUB_TOKEN environment variable.",
+      );
+    }
+
+    const url = endpoint.startsWith("http")
+      ? endpoint
+      : `${this.baseURL}${endpoint.startsWith("/") ? endpoint : `/${endpoint}`}`;
+
+    const controller = new AbortController();
+    const id = setTimeout(() => controller.abort(), this.timeout);
 
-      const response = await this.client.get<T>(endpoint, {
-        ...config,
+    try {
+      const response = await fetch(url, {
+        ...options,
         headers: {
-          ...config?.headers,
+          Accept: "application/vnd.github.v3+json",
+          "User-Agent": this.userAgent,
           Authorization: `Bearer ${this.authToken}`,
+          ...options.headers,
         },
+        signal: controller.signal,
       });
 
-      return {
-        data: response.data,
-        headers: response.headers as Record<string, string>,
-        status: response.status,
-      };
-    } catch (error) {
-      if (axios.isAxiosError(error)) {
-        const axiosError = error as AxiosError<{ message: string }>;
-        const status = axiosError.response?.status;
-        const message =
-          axiosError.response?.data?.message || axiosError.message;
-
-        // Handle 304 Not Modified as a special case
-        if (status === 304) {
-          return {
-            data: null as unknown as T,
-            headers: axiosError.response?.headers as Record<string, string>,
-            status: 304,
-          };
-        }
+      clearTimeout(id);
+      this.updateRateLimits(response.headers);
+
+      const status = response.status;
+      
+      // Handle 304 Not Modified
+      if (status === 304) {
+        return {
+          data: null as unknown as T,
+          headers: Object.fromEntries(response.headers.entries()),
+          status: 304,
+        };
+      }
+
+      if (!response.ok) {
+        const data = await response.json().catch(() => ({}));
+        const message = data.message || response.statusText;
 
         switch (status) {
           case 401:
@@ -131,7 +113,7 @@ class GitHubFetcher {
           case 404:
             throw new Error(`GitHub API Resource Not Found: ${message}`);
           case 429:
-            const resetTime = axiosError.response?.headers["x-ratelimit-reset"];
+            const resetTime = response.headers.get("x-ratelimit-reset");
             const retryAfter = resetTime
               ? new Date(parseInt(resetTime) * 1000)
               : "unknown";
@@ -142,82 +124,61 @@ class GitHubFetcher {
             throw new Error(`GitHub API Error (${status}): ${message}`);
         }
       }
+
+      const data = await response.json();
+      return {
+        data,
+        headers: Object.fromEntries(response.headers.entries()),
+        status,
+      };
+    } catch (error) {
+      clearTimeout(id);
       throw error;
     }
   }
 
+  /**
+   * Make a GET request to the GitHub API
+   */
+  async get<T>(endpoint: string, options?: RequestInit): Promise<GitHubResponse<T>> {
+    return this.request<T>(endpoint, { ...options, method: "GET" });
+  }
+
   /**
    * Make a POST request to the GitHub API
    */
-  async post<T>(
-    endpoint: string,
-    data?: any,
-    config?: AxiosRequestConfig,
-  ): Promise<GitHubResponse<T>> {
-    try {
-      const response = await this.client.post<T>(endpoint, data, config);
-      return {
-        data: response.data,
-        headers: response.headers as Record<string, string>,
-        status: response.status,
-      };
-    } catch (error) {
-      if (axios.isAxiosError(error)) {
-        throw new Error(
-          `GitHub API Error: ${error.message} (${error.response?.status})`,
-        );
-      }
-      throw error;
-    }
+  async post<T>(endpoint: string, data?: any, options?: RequestInit): Promise<GitHubResponse<T>> {
+    return this.request<T>(endpoint, {
+      ...options,
+      method: "POST",
+      body: JSON.stringify(data),
+      headers: {
+        "Content-Type": "application/json",
+        ...options?.headers,
+      },
+    });
   }
 
   /**
    * Make a PUT request to the GitHub API
    */
-  async put<T>(
-    endpoint: string,
-    data?: any,
-    config?: AxiosRequestConfig,
-  ): Promise<GitHubResponse<T>> {
-    try {
-      const response = await this.client.put<T>(endpoint, data, config);
-      return {
-        data: response.data,
-        headers: response.headers as Record<string, string>,
-        status: response.status,
-      };
-    } catch (error) {
-      if (axios.isAxiosError(error)) {
-        throw new Error(
-          `GitHub API Error: ${error.message} (${error.response?.status})`,
-        );
-      }
-      throw error;
-    }
+  async put<T>(endpoint: string, data?: any, options?: RequestInit): Promise<GitHubResponse<T>> {
+    return this.request<T>(endpoint, {
+      ...options,
+      method: "PUT",
+      body: JSON.stringify(data),
+      headers: {
+        "Content-Type": "application/json",
+        ...options?.headers,
+      },
+    });
   }
 
   /**
    * Make a DELETE request to the GitHub API
    */
-  async delete<T>(
-    endpoint: string,
-    config?: AxiosRequestConfig,
-  ): Promise<GitHubResponse<T>> {
-    try {
-      const response = await this.client.delete<T>(endpoint, config);
-      return {
-        data: response.data,
-        headers: response.headers as Record<string, string>,
-        status: response.status,
-      };
-    } catch (error) {
-      if (axios.isAxiosError(error)) {
-        throw new Error(
-          `GitHub API Error: ${error.message} (${error.response?.status})`,
-        );
-      }
-      throw error;
-    }
+  async delete<T>(endpoint: string, options?: RequestInit): Promise<GitHubResponse<T>> {
+    return this.request<T>(endpoint, { ...options, method: "DELETE" });
   }
 }