diff --git a/src/app/_components/CompanyAutocompleteInput.tsx b/src/app/_components/CompanyAutocompleteInput.tsx
index 9d07af5..c104bed 100644
--- a/src/app/_components/CompanyAutocompleteInput.tsx
+++ b/src/app/_components/CompanyAutocompleteInput.tsx
@@ -4,6 +4,7 @@
 import type { JSX, ChangeEvent, KeyboardEvent } from "react";
 import { useId, useRef, useState } from "react";
 import { Input } from "@/components/Input";
+import { cn } from "@/components/ui/utils";
 
 type CompanySuggestion = {
   id: string;
@@ -231,7 +232,7 @@ export function CompanyAutocompleteInput(props: CompanyAutocompleteInputProps):
   }
 
   return (
-    <div className="relative">
+    <div className={cn("relative")}>
       <Input
         label={label}
         name={name}
@@ -252,10 +253,10 @@ export function CompanyAutocompleteInput(props: CompanyAutocompleteInputProps):
       />
 
       {isOpen === true && hasSuggestions === true ? (
-        <div className="absolute z-20 mt-1 max-h-60 w-full overflow-auto rounded-lg border border-primary bg-surface shadow-md">
-          <ul id={listboxId} role="listbox" className="divide-y divide-[var(--border-secondary)]">
+        <div className={cn("absolute z-20 mt-1 max-h-60 w-full overflow-auto rounded-lg border border-primary bg-surface shadow-md")}>
+          <ul id={listboxId} role="listbox" className={cn("divide-y divide-[var(--border-secondary)]")}>
             {isLoading === true ? (
-              <li className="px-3 py-2 text-xs text-secondary">Loading suggestions…</li>
+               <li className={cn("px-3 py-2 text-xs text-secondary")}>Loading suggestions…</li>
             ) : null}
 
             {isLoading === false
@@ -269,15 +270,15 @@ export function CompanyAutocompleteInput(props: CompanyAutocompleteInputProps):
                       id={optionId}
                       role="option"
                       aria-selected={isHighlighted === true}
-                      className="combobox-option flex items-center justify-between px-3 py-2 text-sm"
+                      className={cn("combobox-option flex items-center justify-between px-3 py-2 text-sm")}
                       // onMouseDown: blur'dan önce çalışsın ve input değeri güncellensin
                       onMouseDown={(event) => {
                         event.preventDefault();
                         handleSuggestionSelect(company);
                       }}
                     >
-                      <span className="truncate font-medium">{company.name}</span>
-                      <span className="ml-2 shrink-0 text-xs text-tertiary">{company.country}</span>
+                       <span className={cn("truncate font-medium")}>{company.name}</span>
+                       <span className={cn("ml-2 shrink-0 text-xs text-tertiary")}>{company.country}</span>
                     </li>
                   );
                 })
diff --git a/src/app/_components/HomeHero.tsx b/src/app/_components/HomeHero.tsx
index 1c1167c..1d3785f 100644
--- a/src/app/_components/HomeHero.tsx
+++ b/src/app/_components/HomeHero.tsx
@@ -3,6 +3,7 @@
 import type { JSX } from "react";
 import { useRouter } from "next/navigation";
 import { Button } from "@/components/Button";
+import { cn } from "@/components/ui/utils";
 
 /**
  * Home page hero section: heading, copy and primary CTAs.
@@ -19,20 +20,20 @@ export function HomeHero(): JSX.Element {
   }
 
   return (
-    <div className="space-y-8">
-      <header className="space-y-4">
-        <h1 id="home-hero-heading" className="text-4xl tracking-tight text-primary md:text-5xl">
+    <div className={cn("space-y-8")}>
+      <header className={cn("space-y-4")}>
+        <h1 id="home-hero-heading" className={cn("text-4xl tracking-tight text-primary md:text-5xl")}>
           Track ghosting.
           <br />
           Share your experience.
         </h1>
-        <p className="text-lg leading-relaxed text-secondary md:text-xl">
+        <p className={cn("text-lg leading-relaxed text-secondary md:text-xl")}>
           Submit anonymous reports about companies that ghost job applicants. Help others know what
           to expect and hold companies accountable.
         </p>
       </header>
 
-      <div className="flex flex-wrap gap-4">
+      <div className={cn("flex flex-wrap gap-4")}>
         <Button
           variant="primary"
           size="lg"
@@ -55,7 +56,7 @@ export function HomeHero(): JSX.Element {
         </Button>
       </div>
 
-      <p className="text-xs text-tertiary">
+      <p className={cn("text-xs text-tertiary")}>
         Reports are anonymous. We store only minimal, non-identifiable metadata and use salted
         hashes of IP addresses for rate limiting instead of storing raw IP data.
       </p>
diff --git a/src/app/_components/HomeStatsPanel.tsx b/src/app/_components/HomeStatsPanel.tsx
index 619f3a8..c58cd8d 100644
--- a/src/app/_components/HomeStatsPanel.tsx
+++ b/src/app/_components/HomeStatsPanel.tsx
@@ -7,6 +7,7 @@ import { TrendingUp } from "lucide-react";
 import { Card } from "@/components/Card";
 import { StatsCard } from "@/components/StatsCard";
 import { useReportsStats } from "@/app/_hooks/useReportsStats";
+import { cn } from "@/components/ui/utils";
 
 /**
  * Home page stats panel.
@@ -47,9 +48,9 @@ export function HomeStatsPanel(): JSX.Element {
         : "Most reported this week";
 
   return (
-    <aside className="space-y-4" aria-label="Platform statistics" aria-busy={status === "loading"}>
-      <div className="flex items-center justify-between gap-3">
-        <div className="text-xs text-tertiary" aria-live="polite">
+    <aside className={cn("space-y-4")} aria-label="Platform statistics" aria-busy={status === "loading"}>
+      <div className={cn("flex items-center justify-between gap-3")}>
+        <div className={cn("text-xs text-tertiary")} aria-live="polite">
           {isRefreshing === true ? "Updating…" : "Auto-updates after you submit"}
           {liveError === true ? " · Refresh failed" : null}
         </div>
@@ -57,17 +58,17 @@ export function HomeStatsPanel(): JSX.Element {
 
       <StatsCard label="Total reports" value={totalReportsLabel} />
 
-      <Card className="!p-6">
-        <div className="flex items-start gap-3">
-          <div className="rounded-lg bg-indigo-100 p-2 dark:bg-indigo-900/30" aria-hidden="true">
-            <TrendingUp className="h-5 w-5 text-indigo-600 dark:text-indigo-400" />
+      <Card className={cn("!p-6")}>
+        <div className={cn("flex items-start gap-3")}>
+          <div className={cn("rounded-lg bg-indigo-100 p-2 dark:bg-indigo-900/30")} aria-hidden="true">
+            <TrendingUp className={cn("h-5 w-5 text-indigo-600 dark:text-indigo-400")} />
           </div>
           <div className="flex-1">
-            <div className="mb-1 text-sm text-secondary">{subtitle}</div>
-            <div className="mb-1 text-xl text-primary" aria-live="polite">
+            <div className={cn("mb-1 text-sm text-secondary")}>{subtitle}</div>
+            <div className={cn("mb-1 text-xl text-primary")} aria-live="polite">
               {mostCompanyName}
             </div>
-            <div className="text-sm text-tertiary">{mostCompanyCountLabel}</div>
+            <div className={cn("text-sm text-tertiary")}>{mostCompanyCountLabel}</div>
           </div>
         </div>
       </Card>