diff --git a/src/app/[orgId]/settings/logs/access/page.tsx b/src/app/[orgId]/settings/logs/access/page.tsx
index a6cb87fc8..fc0660ebb 100644
--- a/src/app/[orgId]/settings/logs/access/page.tsx
+++ b/src/app/[orgId]/settings/logs/access/page.tsx
@@ -11,7 +11,7 @@ import { ColumnDef } from "@tanstack/react-table";
 import { DateTimeValue } from "@app/components/DateTimePicker";
 import { ArrowUpRight, Key, User } from "lucide-react";
 import Link from "next/link";
-import { ColumnFilter } from "@app/components/ColumnFilter";
+import { ColumnFilterButton } from "@app/components/ColumnFilterButton";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import { build } from "@server/build";
 import { getSevenDaysAgo } from "@app/lib/getSevenDaysAgo";
@@ -233,7 +233,7 @@ export default function GeneralPage() {
         {
             accessorKey: "timestamp",
             header: () => {
-                return t("timestamp");
+                return <span className="px-2">{t("timestamp")}</span>;
             },
             cell: ({ row }) => {
                 return (
@@ -249,19 +249,19 @@ export default function GeneralPage() {
             accessorKey: "action",
             header: () => {
                 return (
-                    <div className="flex items-center gap-2">
-                        <span>{t("action")}</span>
-                        <ColumnFilter
+                    <div className="flex items-center gap-2 px-2">
+                        <ColumnFilterButton
                             options={[
                                 { value: "true", label: "Allowed" },
                                 { value: "false", label: "Denied" }
                             ]}
+                            label={t("action")}
                             selectedValue={filters.action}
                             onValueChange={(value) =>
                                 handleFilterChange("action", value)
                             }
-                            searchPlaceholder="Search..."
-                            emptyMessage="None found"
+                            searchPlaceholder={t("searchPlaceholder")}
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -276,27 +276,27 @@ export default function GeneralPage() {
         },
         {
             accessorKey: "ip",
-            header: () => t("ip")
+            header: () => <span className="px-2">{t("ip")}</span>
         },
         {
             accessorKey: "location",
             header: () => {
                 return (
-                    <div className="flex items-center gap-2">
-                        <span>{t("location")}</span>
-                        <ColumnFilter
+                    <div className="flex items-center gap-2 px-2">
+                        <ColumnFilterButton
                             options={filterAttributes.locations.map(
                                 (location) => ({
                                     value: location,
                                     label: location
                                 })
                             )}
+                            label={t("location")}
                             selectedValue={filters.location}
                             onValueChange={(value) =>
                                 handleFilterChange("location", value)
                             }
-                            searchPlaceholder="Search..."
-                            emptyMessage="None found"
+                            searchPlaceholder={t("searchPlaceholder")}
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -321,19 +321,19 @@ export default function GeneralPage() {
             accessorKey: "resourceName",
             header: () => {
                 return (
-                    <div className="flex items-center gap-2">
-                        <span>{t("resource")}</span>
-                        <ColumnFilter
+                    <div className="flex items-center gap-2 px-2">
+                        <ColumnFilterButton
                             options={filterAttributes.resources.map((res) => ({
                                 value: res.id.toString(),
                                 label: res.name || "Unnamed Resource"
                             }))}
+                            label={t("resource")}
                             selectedValue={filters.resourceId}
                             onValueChange={(value) =>
                                 handleFilterChange("resourceId", value)
                             }
-                            searchPlaceholder="Search..."
-                            emptyMessage="None found"
+                            searchPlaceholder={t("searchPlaceholder")}
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -359,9 +359,8 @@ export default function GeneralPage() {
             accessorKey: "type",
             header: () => {
                 return (
-                    <div className="flex items-center gap-2">
-                        <span>{t("type")}</span>
-                        <ColumnFilter
+                    <div className="flex items-center gap-2 px-2">
+                        <ColumnFilterButton
                             options={[
                                 { value: "password", label: "Password" },
                                 { value: "pincode", label: "Pincode" },
@@ -372,12 +371,13 @@ export default function GeneralPage() {
                                 },
                                 { value: "ssh", label: "SSH" }
                             ]}
+                            label={t("type")}
                             selectedValue={filters.type}
                             onValueChange={(value) =>
                                 handleFilterChange("type", value)
                             }
-                            searchPlaceholder="Search..."
-                            emptyMessage="None found"
+                            searchPlaceholder={t("searchPlaceholder")}
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -395,19 +395,19 @@ export default function GeneralPage() {
             accessorKey: "actor",
             header: () => {
                 return (
-                    <div className="flex items-center gap-2">
-                        <span>{t("actor")}</span>
-                        <ColumnFilter
+                    <div className="flex items-center gap-2 px-2">
+                        <ColumnFilterButton
                             options={filterAttributes.actors.map((actor) => ({
                                 value: actor,
                                 label: actor
                             }))}
+                            label={t("actor")}
                             selectedValue={filters.actor}
                             onValueChange={(value) =>
                                 handleFilterChange("actor", value)
                             }
-                            searchPlaceholder="Search..."
-                            emptyMessage="None found"
+                            searchPlaceholder={t("searchPlaceholder")}
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -433,7 +433,7 @@ export default function GeneralPage() {
         },
         {
             accessorKey: "actorId",
-            header: () => t("actorId"),
+            header: () => <span className="px-2">{t("actorId")}</span>,
             cell: ({ row }) => (
                 <span className="flex items-center gap-1">
                     {row.original.actorId || "-"}
diff --git a/src/app/[orgId]/settings/logs/action/page.tsx b/src/app/[orgId]/settings/logs/action/page.tsx
index 7ccce8877..3418030f5 100644
--- a/src/app/[orgId]/settings/logs/action/page.tsx
+++ b/src/app/[orgId]/settings/logs/action/page.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { ColumnFilter } from "@app/components/ColumnFilter";
+import { ColumnFilterButton } from "@app/components/ColumnFilterButton";
 import { DateTimeValue } from "@app/components/DateTimePicker";
 import { LogDataTable } from "@app/components/LogDataTable";
 import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
@@ -219,9 +219,7 @@ export default function GeneralPage() {
     const columns: ColumnDef<any>[] = [
         {
             accessorKey: "timestamp",
-            header: () => {
-                return t("timestamp");
-            },
+            header: () => <span className="px-2">{t("timestamp")}</span>,
             cell: ({ row }) => {
                 return (
                     <div className="whitespace-nowrap">
@@ -236,16 +234,16 @@ export default function GeneralPage() {
             accessorKey: "action",
             header: () => {
                 return (
-                    <div className="flex items-center gap-2">
-                        <span>{t("action")}</span>
-                        <ColumnFilter
+                    <div className="flex items-center gap-2 px-2">
+                        <ColumnFilterButton
                             options={[]}
+                            label={t("action")}
                             selectedValue={filters.action}
                             onValueChange={(value) =>
                                 handleFilterChange("action", value)
                             }
-                            searchPlaceholder="Search..."
-                            emptyMessage="None found"
+                            searchPlaceholder={t("searchPlaceholder")}
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -263,19 +261,19 @@ export default function GeneralPage() {
             accessorKey: "actor",
             header: () => {
                 return (
-                    <div className="flex items-center gap-2">
-                        <span>{t("actor")}</span>
-                        <ColumnFilter
+                    <div className="flex items-center gap-2 px-2">
+                        <ColumnFilterButton
                             options={filterAttributes.actors.map((actor) => ({
                                 value: actor,
                                 label: actor
                             }))}
+                            label={t("actor")}
                             selectedValue={filters.actor}
                             onValueChange={(value) =>
                                 handleFilterChange("actor", value)
                             }
-                            searchPlaceholder="Search..."
-                            emptyMessage="None found"
+                            searchPlaceholder={t("searchPlaceholder")}
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -295,9 +293,7 @@ export default function GeneralPage() {
         },
         {
             accessorKey: "actorId",
-            header: () => {
-                return t("actorId");
-            },
+            header: () => <span className="px-2">{t("actorId")}</span>,
             cell: ({ row }) => {
                 return (
                     <span className="flex items-center gap-1">
diff --git a/src/app/[orgId]/settings/logs/connection/page.tsx b/src/app/[orgId]/settings/logs/connection/page.tsx
index be408edb1..528ba9a37 100644
--- a/src/app/[orgId]/settings/logs/connection/page.tsx
+++ b/src/app/[orgId]/settings/logs/connection/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 import { Button } from "@app/components/ui/button";
-import { ColumnFilter } from "@app/components/ColumnFilter";
+import { ColumnFilterButton } from "@app/components/ColumnFilterButton";
 import { DateTimeValue } from "@app/components/DateTimePicker";
 import { LogDataTable } from "@app/components/LogDataTable";
 import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
@@ -256,9 +256,7 @@ export default function ConnectionLogsPage() {
     const columns: ColumnDef<any>[] = [
         {
             accessorKey: "startedAt",
-            header: () => {
-                return t("timestamp");
-            },
+            header: () => <span className="px-2">{t("timestamp")}</span>,
             cell: ({ row }) => {
                 return (
                     <div className="whitespace-nowrap">
@@ -273,21 +271,21 @@ export default function ConnectionLogsPage() {
             accessorKey: "protocol",
             header: () => {
                 return (
-                    <div className="flex items-center gap-2">
-                        <span>{t("protocol")}</span>
-                        <ColumnFilter
+                    <div className="flex items-center gap-2 px-2">
+                        <ColumnFilterButton
                             options={filterAttributes.protocols.map(
                                 (protocol) => ({
                                     label: protocol.toUpperCase(),
                                     value: protocol
                                 })
                             )}
+                            label={t("protocol")}
                             selectedValue={filters.protocol}
                             onValueChange={(value) =>
                                 handleFilterChange("protocol", value)
                             }
-                            searchPlaceholder="Search..."
-                            emptyMessage="None found"
+                            searchPlaceholder={t("searchPlaceholder")}
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -304,19 +302,19 @@ export default function ConnectionLogsPage() {
             accessorKey: "resourceName",
             header: () => {
                 return (
-                    <div className="flex items-center gap-2">
-                        <span>{t("resource")}</span>
-                        <ColumnFilter
+                    <div className="flex items-center gap-2 px-2">
+                        <ColumnFilterButton
                             options={filterAttributes.resources.map((res) => ({
                                 value: res.id.toString(),
                                 label: res.name || "Unnamed Resource"
                             }))}
+                            label={t("resource")}
                             selectedValue={filters.siteResourceId}
                             onValueChange={(value) =>
                                 handleFilterChange("siteResourceId", value)
                             }
-                            searchPlaceholder="Search..."
-                            emptyMessage="None found"
+                            searchPlaceholder={t("searchPlaceholder")}
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -345,19 +343,19 @@ export default function ConnectionLogsPage() {
             accessorKey: "clientName",
             header: () => {
                 return (
-                    <div className="flex items-center gap-2">
-                        <span>{t("client")}</span>
-                        <ColumnFilter
+                    <div className="flex items-center gap-2 px-2">
+                        <ColumnFilterButton
                             options={filterAttributes.clients.map((c) => ({
                                 value: c.id.toString(),
                                 label: c.name
                             }))}
+                            label={t("client")}
                             selectedValue={filters.clientId}
                             onValueChange={(value) =>
                                 handleFilterChange("clientId", value)
                             }
-                            searchPlaceholder="Search..."
-                            emptyMessage="None found"
+                            searchPlaceholder={t("searchPlaceholder")}
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -388,19 +386,19 @@ export default function ConnectionLogsPage() {
             accessorKey: "userEmail",
             header: () => {
                 return (
-                    <div className="flex items-center gap-2">
-                        <span>{t("user")}</span>
-                        <ColumnFilter
+                    <div className="flex items-center gap-2 px-2">
+                        <ColumnFilterButton
                             options={filterAttributes.users.map((u) => ({
                                 value: u.id,
                                 label: u.email || u.id
                             }))}
+                            label={t("user")}
                             selectedValue={filters.userId}
                             onValueChange={(value) =>
                                 handleFilterChange("userId", value)
                             }
-                            searchPlaceholder="Search..."
-                            emptyMessage="None found"
+                            searchPlaceholder={t("searchPlaceholder")}
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -419,9 +417,7 @@ export default function ConnectionLogsPage() {
         },
         {
             accessorKey: "sourceAddr",
-            header: () => {
-                return t("sourceAddress");
-            },
+            header: () => <span className="px-2">{t("sourceAddress")}</span>,
             cell: ({ row }) => {
                 return (
                     <span className="whitespace-nowrap font-mono text-xs">
@@ -434,19 +430,19 @@ export default function ConnectionLogsPage() {
             accessorKey: "destAddr",
             header: () => {
                 return (
-                    <div className="flex items-center gap-2">
-                        <span>{t("destinationAddress")}</span>
-                        <ColumnFilter
+                    <div className="flex items-center gap-2 px-2">
+                        <ColumnFilterButton
                             options={filterAttributes.destAddrs.map((addr) => ({
                                 value: addr,
                                 label: addr
                             }))}
+                            label={t("destinationAddress")}
                             selectedValue={filters.destAddr}
                             onValueChange={(value) =>
                                 handleFilterChange("destAddr", value)
                             }
-                            searchPlaceholder="Search..."
-                            emptyMessage="None found"
+                            searchPlaceholder={t("searchPlaceholder")}
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -461,9 +457,7 @@ export default function ConnectionLogsPage() {
         },
         {
             accessorKey: "duration",
-            header: () => {
-                return t("duration");
-            },
+            header: () => <span className="px-2">{t("duration")}</span>,
             cell: ({ row }) => {
                 return (
                     <span className="whitespace-nowrap">