diff --git a/src/app/globals.css b/src/app/globals.css
index 64db322e3..aa98b1d49 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -57,7 +57,7 @@
     --accent-foreground: oklch(0.985 0 0);
     --destructive: oklch(0.5382 0.1949 22.216);
     --destructive-foreground: oklch(0.985 0 0);
-    --border: oklch(1 0 0 / 18%);
+    --border: oklch(1 0 0 / 15%);
     --input: oklch(1 0 0 / 18%);
     --ring: oklch(0.646 0.222 41.116);
     --chart-1: oklch(0.488 0.243 264.376);
diff --git a/src/components/LocaleSwitcherSelect.tsx b/src/components/LocaleSwitcherSelect.tsx
index e647f7dd1..157b87472 100644
--- a/src/components/LocaleSwitcherSelect.tsx
+++ b/src/components/LocaleSwitcherSelect.tsx
@@ -53,7 +53,7 @@ export default function LocaleSwitcherSelect({
                     )}
                     aria-label={label}
                 >
-                    <Languages className="h-4 w-4" />
+                    <Languages className="text-muted-foreground h-4 w-4" />
                     <span className="text-left flex-1">
                         {selected?.label ?? label}
                     </span>
diff --git a/src/components/ViewDevicesDialog.tsx b/src/components/ViewDevicesDialog.tsx
index 9c29b219c..b29cdcc75 100644
--- a/src/components/ViewDevicesDialog.tsx
+++ b/src/components/ViewDevicesDialog.tsx
@@ -27,7 +27,7 @@ import {
     TableHeader,
     TableRow
 } from "@app/components/ui/table";
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "@app/components/ui/tabs";
+import { HorizontalTabs } from "@app/components/HorizontalTabs";
 import { Loader2, RefreshCw } from "lucide-react";
 import moment from "moment";
 import { useUserContext } from "@app/hooks/useUserContext";
@@ -58,7 +58,6 @@ export default function ViewDevicesDialog({
 
     const [devices, setDevices] = useState<Device[]>([]);
     const [loading, setLoading] = useState(false);
-    const [activeTab, setActiveTab] = useState<"available" | "archived">("available");
 
     const fetchDevices = async () => {
         setLoading(true);
@@ -177,34 +176,21 @@ export default function ViewDevicesDialog({
                                 <Loader2 className="h-6 w-6 animate-spin" />
                             </div>
                         ) : (
-                            <Tabs
-                                value={activeTab}
-                                onValueChange={(value) =>
-                                    setActiveTab(value as "available" | "archived")
-                                }
-                                className="w-full"
+                            <HorizontalTabs
+                                clientSide
+                                defaultTab={0}
+                                items={[
+                                    {
+                                        title: `${t("available") || "Available"} (${devices.filter((d) => !d.archived).length})`,
+                                        href: "#available"
+                                    },
+                                    {
+                                        title: `${t("archived") || "Archived"} (${devices.filter((d) => d.archived).length})`,
+                                        href: "#archived"
+                                    }
+                                ]}
                             >
-                                <TabsList className="grid w-full grid-cols-2">
-                                    <TabsTrigger value="available">
-                                        {t("available") || "Available"} (
-                                        {
-                                            devices.filter(
-                                                (d) => !d.archived
-                                            ).length
-                                        }
-                                        )
-                                    </TabsTrigger>
-                                    <TabsTrigger value="archived">
-                                        {t("archived") || "Archived"} (
-                                        {
-                                            devices.filter(
-                                                (d) => d.archived
-                                            ).length
-                                        }
-                                        )
-                                    </TabsTrigger>
-                                </TabsList>
-                                <TabsContent value="available" className="mt-4">
+                                <div>
                                     {devices.filter((d) => !d.archived)
                                         .length === 0 ? (
                             <div className="text-center py-8 text-muted-foreground">
@@ -271,8 +257,8 @@ export default function ViewDevicesDialog({
                                 </Table>
                             </div>
                                     )}
-                                </TabsContent>
-                                <TabsContent value="archived" className="mt-4">
+                                </div>
+                                <div>
                                     {devices.filter((d) => d.archived)
                                         .length === 0 ? (
                                         <div className="text-center py-8 text-muted-foreground">
@@ -336,8 +322,8 @@ export default function ViewDevicesDialog({
                                             </Table>
                                         </div>
                                     )}
-                                </TabsContent>
-                            </Tabs>
+                                </div>
+                            </HorizontalTabs>
                         )}
                     </CredenzaBody>
                     <CredenzaFooter>