diff --git a/package.json b/package.json
index 188d543..78b8ec7 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,6 @@
     "date-fns": "^4.1.0",
     "geist": "^1.3.0",
     "input-otp": "^1.4.2",
-    "lucide-react": "^0.525.0",
     "next": "^15.5.18",
     "next-themes": "^0.4.4",
     "postgres": "^3.4.4",
@@ -40,6 +39,7 @@
     "react-dom": "^18.3.1",
     "react-error-boundary": "^6.1.0",
     "react-hook-form": "^7.55.0",
+    "react-icons": "^5.7.0",
     "server-only": "^0.0.1",
     "shadcn": "^4.2.0",
     "sonner": "^2.0.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b2a7d41..11dc93d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -59,9 +59,6 @@ importers:
       input-otp:
         specifier: ^1.4.2
         version: 1.4.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      lucide-react:
-        specifier: ^0.525.0
-        version: 0.525.0(react@18.3.1)
       next:
         specifier: ^15.5.18
         version: 15.5.18(@babel/core@7.29.0)(babel-plugin-react-compiler@1.0.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -89,6 +86,9 @@ importers:
       react-hook-form:
         specifier: ^7.55.0
         version: 7.55.0(react@18.3.1)
+      react-icons:
+        specifier: ^5.7.0
+        version: 5.7.0(react@18.3.1)
       server-only:
         specifier: ^0.0.1
         version: 0.0.1
@@ -2638,11 +2638,6 @@ packages:
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
-  lucide-react@0.525.0:
-    resolution: {integrity: sha512-Tm1txJ2OkymCGkvwoHt33Y2JpN5xucVq1slHcgE6Lk0WjDfjgKWor5CdVER8U6DvcfMwh4M8XxmpTiyzfmfDYQ==}
-    peerDependencies:
-      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
-
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
@@ -2993,6 +2988,11 @@ packages:
     peerDependencies:
       react: ^16.8.0 || ^17 || ^18 || ^19
 
+  react-icons@5.7.0:
+    resolution: {integrity: sha512-LBLy340Rzqy6+/yVhZKT3B/QpP1BZaesGqasf09HPOBzRarcDIFH0WwXlXQfE7q7ipxK4MSiC5DIBWURCny6fw==}
+    peerDependencies:
+      react: '*'
+
   react-remove-scroll-bar@2.3.8:
     resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
     engines: {node: '>=10'}
@@ -5826,10 +5826,6 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
-  lucide-react@0.525.0(react@18.3.1):
-    dependencies:
-      react: 18.3.1
-
   math-intrinsics@1.1.0: {}
 
   media-typer@1.1.0: {}
@@ -6192,6 +6188,10 @@ snapshots:
     dependencies:
       react: 18.3.1
 
+  react-icons@5.7.0(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
   react-remove-scroll-bar@2.3.8(@types/react@18.3.18)(react@18.3.1):
     dependencies:
       react: 18.3.1
diff --git a/src/app/(auth)/login/can-i-access.tsx b/src/app/(auth)/login/can-i-access.tsx
index c95bc4c..00fd427 100644
--- a/src/app/(auth)/login/can-i-access.tsx
+++ b/src/app/(auth)/login/can-i-access.tsx
@@ -1,5 +1,5 @@
-import { Award, Building, Gem, Lock, ShieldUser, Star } from "lucide-react"
 import Image from "next/image"
+import { FiAward, FiBriefcase, FiHexagon, FiLock, FiShield, FiStar } from "react-icons/fi"
 import loginSvg1 from "@/assets/svg/login-1.svg"
 import loginSvg2 from "@/assets/svg/login-2.svg"
 import loginSvg3 from "@/assets/svg/login-3.svg"
@@ -10,16 +10,16 @@ export function CanIAccess() {
   return (
     <div className="text-foreground w-full">
       <div className="text-primary flex items-center space-x-2 py-2 dark:text-white">
-        <Lock size={28} className="" />
+        <FiLock size={28} className="" />
         <h3 className="text-xl font-bold">How can I access?</h3>
       </div>
       <p>You can access this dashboard if you have at least one of this role:</p>
       <div className="xs:grid-cols-2 grid grid-cols-1 flex-wrap gap-4 py-2 md:grid-cols-3 lg:flex">
-        <FeatureBox icon={Star} feature="President or Vice President" />
-        <FeatureBox icon={Award} feature="Board member" />
-        <FeatureBox icon={Building} feature="Department member" />
-        <FeatureBox icon={ShieldUser} feature="Groups admin" />
-        <FeatureBox icon={Gem} feature="Special roles" />
+        <FeatureBox icon={FiStar} feature="President or Vice President" />
+        <FeatureBox icon={FiAward} feature="Board member" />
+        <FeatureBox icon={FiBriefcase} feature="Department member" />
+        <FeatureBox icon={FiShield} feature="Groups admin" />
+        <FeatureBox icon={FiHexagon} feature="Special roles" />
       </div>
       <br />
       <p>When you have checked that you are eligible, these are the steps to access:</p>
diff --git a/src/app/(auth)/login/login-button.tsx b/src/app/(auth)/login/login-button.tsx
index 51c6226..748d318 100644
--- a/src/app/(auth)/login/login-button.tsx
+++ b/src/app/(auth)/login/login-button.tsx
@@ -1,6 +1,6 @@
 "use client"
-import { LogInIcon } from "lucide-react"
 import Link from "next/link"
+import { FiLogIn } from "react-icons/fi"
 import { Card, CardContent } from "@/components/ui/card"
 
 export function LoginButton() {
@@ -9,7 +9,7 @@ export function LoginButton() {
       <Card className="border-primary from-primary to-primary/20 group relative h-full w-full cursor-pointer overflow-hidden bg-linear-to-r to-60%">
         <div className="bg-primary absolute inset-0 opacity-0 transition duration-250 group-hover:opacity-100"></div>
         <CardContent className="text-primary-foreground absolute inset-0 flex items-center space-x-4 py-4">
-          <LogInIcon size={32} />
+          <FiLogIn size={32} />
           <p className="flex-1 text-start text-xl">Enter your reserved area</p>
         </CardContent>
       </Card>
diff --git a/src/app/(auth)/login/login-form.tsx b/src/app/(auth)/login/login-form.tsx
index e7ccd37..c810324 100644
--- a/src/app/(auth)/login/login-form.tsx
+++ b/src/app/(auth)/login/login-form.tsx
@@ -1,8 +1,8 @@
 "use client"
 
-import { Key, Loader2, Mail } from "lucide-react"
 import { useRouter } from "next/navigation"
 import { useState } from "react"
+import { FiKey, FiLoader, FiMail } from "react-icons/fi"
 import { toast } from "sonner"
 import { Button } from "@/components/ui/button"
 import { FieldSeparator } from "@/components/ui/field"
@@ -101,10 +101,10 @@ function EmailCard({
         </div>
         <Button type="submit" disabled={loading} className="basis-9 group">
           {loading ? (
-            <Loader2 size={16} className="animate-spin" />
+            <FiLoader size={16} className="animate-spin" />
           ) : (
             <>
-              <Mail size={16} />
+              <FiMail size={16} />
               Login with OTP
             </>
           )}
@@ -113,10 +113,10 @@ function EmailCard({
       <FieldSeparator>Or continue with</FieldSeparator>
       <Button onClick={passkeyLogin} disabled={passkeyLoading} className="basis-9 group" variant="secondary">
         {passkeyLoading ? (
-          <Loader2 size={16} className="animate-spin" />
+          <FiLoader size={16} className="animate-spin" />
         ) : (
           <>
-            <Key size={16} /> Login with Passkey
+            <FiKey size={16} /> Login with Passkey
           </>
         )}
       </Button>
@@ -189,7 +189,7 @@ function OTPCard({ email }: { email: string }) {
         </InputOTP>
       </div>
       <Button disabled={loading} className="self-stretch gap-2" onClick={verifyOtp}>
-        {loading ? <Loader2 size={16} className="animate-spin" /> : "Verify"}
+        {loading ? <FiLoader size={16} className="animate-spin" /> : "Verify"}
       </Button>
     </form>
   )
diff --git a/src/app/(auth)/login/what-is.tsx b/src/app/(auth)/login/what-is.tsx
index c9f34e5..29344d8 100644
--- a/src/app/(auth)/login/what-is.tsx
+++ b/src/app/(auth)/login/what-is.tsx
@@ -1,23 +1,23 @@
+import type { IconType } from "react-icons"
 import {
-  BookOpen,
-  Bot,
-  CircleEllipsis,
-  ClipboardList,
-  Gavel,
-  HelpCircle,
-  LayoutTemplate,
-  type LucideIcon,
-  PencilLine,
-  ShieldCheck,
-  Users,
-} from "lucide-react"
+  FiBookOpen,
+  FiCheckSquare,
+  FiClipboard,
+  FiCpu,
+  FiEdit3,
+  FiHelpCircle,
+  FiLayout,
+  FiMoreHorizontal,
+  FiShield,
+  FiUsers,
+} from "react-icons/fi"
 import { Card } from "@/components/ui/card"
 
 export function WhatIs() {
   return (
     <div className="text-foreground w-full">
       <div className="text-primary flex items-center space-x-2 py-2 dark:text-white">
-        <HelpCircle size={28} className="" />
+        <FiHelpCircle size={28} className="" />
         <h3 className="text-xl font-bold">What is this?</h3>
       </div>
       <p>
@@ -26,15 +26,15 @@ export function WhatIs() {
       </p>
       <p>What actions you can perform depends on your role, but some remarkable ones are:</p>
       <div className="xs:grid-cols-2 grid grid-cols-1 flex-wrap gap-4 py-2 md:grid-cols-3 lg:flex">
-        <FeatureBox icon={BookOpen} feature="Group list" />
-        <FeatureBox icon={Users} feature="User list" />
-        <FeatureBox icon={PencilLine} feature="Update homepage" />
-        <FeatureBox icon={Gavel} feature="Ban user everywhere" />
-        <FeatureBox icon={ClipboardList} feature="Global audit log" />
-        <FeatureBox icon={Bot} feature="Manage Telegram bot" />
-        <FeatureBox icon={ShieldCheck} feature="Spam bypass message " />
-        <FeatureBox icon={LayoutTemplate} feature="Internal assoc tools" />
-        <FeatureBox icon={CircleEllipsis} feature="Many others" />
+        <FeatureBox icon={FiBookOpen} feature="Group list" />
+        <FeatureBox icon={FiUsers} feature="User list" />
+        <FeatureBox icon={FiEdit3} feature="Update homepage" />
+        <FeatureBox icon={FiCheckSquare} feature="Ban user everywhere" />
+        <FeatureBox icon={FiClipboard} feature="Global audit log" />
+        <FeatureBox icon={FiCpu} feature="Manage Telegram bot" />
+        <FeatureBox icon={FiShield} feature="Spam bypass message " />
+        <FeatureBox icon={FiLayout} feature="Internal assoc tools" />
+        <FeatureBox icon={FiMoreHorizontal} feature="Many others" />
       </div>
       <p className="text-muted-foreground text-xs italic">
         It&apos;s clear that you&apos;ll have access to different features depending on your role(s).
@@ -43,7 +43,7 @@ export function WhatIs() {
   )
 }
 
-export function FeatureBox({ icon: Icon, feature }: { icon: LucideIcon; feature: string }) {
+export function FeatureBox({ icon: Icon, feature }: { icon: IconType; feature: string }) {
   return (
     <Card className="h-36 w-full md:h-28 lg:w-36">
       <div className="grid h-full grid-cols-1 grid-rows-[1fr_1fr] gap-y-2">
diff --git a/src/app/(auth)/onboarding/link/telegram.tsx b/src/app/(auth)/onboarding/link/telegram.tsx
index 86d5e0a..d6dd6bd 100644
--- a/src/app/(auth)/onboarding/link/telegram.tsx
+++ b/src/app/(auth)/onboarding/link/telegram.tsx
@@ -1,8 +1,8 @@
 "use client"
 import { APIError } from "better-auth/api"
-import { CircleCheckBig, ClockAlertIcon } from "lucide-react"
 import { useRouter } from "next/navigation"
 import { useCallback, useEffect, useState } from "react"
+import { FiCheckCircle, FiClock } from "react-icons/fi"
 import { toast } from "sonner"
 import { Code } from "@/components/code"
 import { InputWithPrefix } from "@/components/input-prefix"
@@ -104,7 +104,7 @@ export function TelegramLink({ botUsername }: { botUsername: string }) {
   if (success)
     return (
       <div className="flex flex-col items-center gap-4 py-8">
-        <CircleCheckBig className="text-green-500 dark:text-green-700" size={64} />
+        <FiCheckCircle className="text-green-500 dark:text-green-700" size={64} />
         <p className="text-xl font-bold">Linked successfully!</p>
         <p className="text-muted-foreground">Redirecting you in 5s...</p>
       </div>
@@ -113,7 +113,7 @@ export function TelegramLink({ botUsername }: { botUsername: string }) {
   if (expired)
     return (
       <div className="flex flex-col items-center gap-4 py-8">
-        <ClockAlertIcon size={64} />
+        <FiClock size={64} />
         <p>Code Expired!</p>
         <Button onClick={handleSubmit}>Regenerate</Button>
       </div>
diff --git a/src/app/dashboard/(active)/account/delete-passkey.tsx b/src/app/dashboard/(active)/account/delete-passkey.tsx
index 0047e80..56a1435 100644
--- a/src/app/dashboard/(active)/account/delete-passkey.tsx
+++ b/src/app/dashboard/(active)/account/delete-passkey.tsx
@@ -1,7 +1,7 @@
 "use client"
 
-import { Trash2Icon } from "lucide-react"
 import { useRouter } from "next/navigation"
+import { FiTrash2 } from "react-icons/fi"
 import { toast } from "sonner"
 import {
   AlertDialog,
@@ -34,7 +34,7 @@ export function DeletePasskey({ id }: { id: string }) {
       <AlertDialogContent size="sm">
         <AlertDialogHeader>
           <AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive">
-            <Trash2Icon />
+            <FiTrash2 />
           </AlertDialogMedia>
           <AlertDialogTitle>Remove passkey</AlertDialogTitle>
           <AlertDialogDescription>Are you sure you want to delete this passkey?</AlertDialogDescription>
diff --git a/src/app/dashboard/(active)/account/page.tsx b/src/app/dashboard/(active)/account/page.tsx
index 0ac592a..8267448 100644
--- a/src/app/dashboard/(active)/account/page.tsx
+++ b/src/app/dashboard/(active)/account/page.tsx
@@ -1,5 +1,5 @@
-import { Calendar, CircleAlert, KeyIcon } from "lucide-react"
 import { headers } from "next/headers"
+import { FiAlertCircle, FiCalendar, FiKey } from "react-icons/fi"
 import { auth } from "@/lib/auth"
 import { getServerSession } from "@/server/auth"
 import { DeletePasskey } from "./delete-passkey"
@@ -28,7 +28,7 @@ export default async function Account() {
 
         <div className="flex flex-col gap-2">
           <div className="flex items-center gap-2">
-            {!user.name && <CircleAlert className="text-yellow-500" />}
+            {!user.name && <FiAlertCircle className="text-yellow-500" />}
             <span className="text-accent-foreground/70">Name:</span>
             {user.name ? <p>{user.name}</p> : <SetName />}
           </div>
@@ -48,12 +48,12 @@ export default async function Account() {
         {passkeys?.map((p) => (
           <div className="grid grid-cols-[auto_1fr_auto] w-full gap-4 items-center" key={p.id}>
             <div className="bg-primary/30 h-full aspect-square flex justify-center items-center rounded-lg">
-              <KeyIcon size={16} />
+              <FiKey size={16} />
             </div>
             <div>
               <p>{p.name}</p>
               <p className="text-muted-foreground text-xs flex justify-start items-center gap-1">
-                <Calendar size={12} />
+                <FiCalendar size={12} />
                 Created on {p.createdAt.toLocaleDateString()}
               </p>
             </div>
diff --git a/src/app/dashboard/(active)/account/profile-pic.tsx b/src/app/dashboard/(active)/account/profile-pic.tsx
index 43d17dc..bfdf238 100644
--- a/src/app/dashboard/(active)/account/profile-pic.tsx
+++ b/src/app/dashboard/(active)/account/profile-pic.tsx
@@ -1,9 +1,9 @@
 "use client"
 
 import type { User } from "better-auth"
-import { Pencil, Upload, UserIcon, X } from "lucide-react"
 import { useRouter } from "next/navigation"
 import { forwardRef, useRef } from "react"
+import { FiEdit2, FiUpload, FiUser, FiX } from "react-icons/fi"
 import { toast } from "sonner"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
@@ -42,15 +42,15 @@ export function ProfilePic({ user }: Props) {
         <DropdownMenu>
           <DropdownMenuTrigger>
             <div className="absolute top-0 left-0 w-full h-full group-hover:opacity-100 opacity-0 bg-background/70 backdrop-blur-[1px] transition-all cursor-pointer z-10 grid place-content-center duration-100">
-              <Pencil size={32} />
+              <FiEdit2 size={32} />
             </div>
           </DropdownMenuTrigger>
           <DropdownMenuContent>
             <DropdownMenuItem onClick={() => uploadRef.current?.click()}>
-              <Upload /> Upload
+              <FiUpload /> Upload
             </DropdownMenuItem>
             <DropdownMenuItem onClick={handleRemove} variant="destructive" disabled={!user.image}>
-              <X /> Remove
+              <FiX /> Remove
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
@@ -59,7 +59,7 @@ export function ProfilePic({ user }: Props) {
 
         <AvatarImage src={user.image || undefined} alt={`propic of ${user.name}`} />
         <AvatarFallback className="rounded-full text-3xl text-foreground">
-          {user.name ? getInitials(user.name) : <UserIcon size={48} />}
+          {user.name ? getInitials(user.name) : <FiUser size={48} />}
         </AvatarFallback>
       </Avatar>
       <p className="peer-hover:opacity-100 opacity-0 text-xs">Max 1MB</p>
diff --git a/src/app/dashboard/(active)/azure/groups/groups-list.tsx b/src/app/dashboard/(active)/azure/groups/groups-list.tsx
index 41909c7..2bf11d5 100644
--- a/src/app/dashboard/(active)/azure/groups/groups-list.tsx
+++ b/src/app/dashboard/(active)/azure/groups/groups-list.tsx
@@ -1,8 +1,8 @@
 "use client"
 
-import { ChevronDown, Info, LoaderCircle, Mail, UserMinus, UserPlus } from "lucide-react"
 import { useRouter } from "next/navigation"
 import { useMemo, useState } from "react"
+import { FiChevronDown, FiInfo, FiLoader, FiMail, FiUserMinus, FiUserPlus } from "react-icons/fi"
 import { toast } from "sonner"
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 import { Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount } from "@/components/ui/avatar"
@@ -63,7 +63,7 @@ export function GroupsList({ groups, directoryMembers }: { groups: AzureGroup[];
               </div>
             </div>
             <Alert className="mt-2 " variant="info">
-              <Info />
+              <FiInfo />
               <AlertTitle>Looking for groups with 0-1 member(s)?</AlertTitle>
               <AlertDescription>
                 Groups with max one member are collected in a collapsed section at the bottom of the page.
@@ -86,7 +86,7 @@ export function GroupsList({ groups, directoryMembers }: { groups: AzureGroup[];
                         {multiMemberGroups.length} {singleMemberGroups.length === 1 ? "group" : "groups"}
                       </span>
                     </span>
-                    <ChevronDown className="transition-transform group-aria-expanded:rotate-180" />
+                    <FiChevronDown className="transition-transform group-aria-expanded:rotate-180" />
                   </Button>
                 }
               />
@@ -116,7 +116,7 @@ export function GroupsList({ groups, directoryMembers }: { groups: AzureGroup[];
                         {singleMemberGroups.length} {singleMemberGroups.length === 1 ? "group" : "groups"}
                       </span>
                     </span>
-                    <ChevronDown className="transition-transform group-aria-expanded:rotate-180" />
+                    <FiChevronDown className="transition-transform group-aria-expanded:rotate-180" />
                   </Button>
                 }
               />
@@ -148,7 +148,7 @@ function GroupRow({ group, directoryMembers }: { group: AzureGroup; directoryMem
           <h2 className="truncate text-base font-medium">{group.displayName}</h2>
           {group.mailAddress && (
             <div className="flex min-w-0 items-center gap-1.5 text-sm text-muted-foreground">
-              <Mail className="size-3.5 shrink-0" />
+              <FiMail className="size-3.5 shrink-0" />
               <span className="truncate">{group.mailAddress}</span>
             </div>
           )}
@@ -263,7 +263,7 @@ function AddMemberDialog({ group, directoryMembers }: { group: AzureGroup; direc
             />
           }
         >
-          <UserPlus />
+          <FiUserPlus />
         </TooltipTrigger>
         <TooltipContent>Add member</TooltipContent>
       </Tooltip>
@@ -310,9 +310,9 @@ function AddMemberDialog({ group, directoryMembers }: { group: AzureGroup; direc
           />
           <Button onClick={addMember} disabled={!selectedMember || pending}>
             {pending ? (
-              <LoaderCircle data-icon="inline-start" className="animate-spin" />
+              <FiLoader data-icon="inline-start" className="animate-spin" />
             ) : (
-              <UserPlus data-icon="inline-start" />
+              <FiUserPlus data-icon="inline-start" />
             )}
             {pending ? "Adding…" : "Add member"}
           </Button>
@@ -381,7 +381,7 @@ function RemoveMemberDialog({ group, directoryMembers }: { group: AzureGroup; di
             />
           }
         >
-          <UserMinus />
+          <FiUserMinus />
         </TooltipTrigger>
         <TooltipContent>Remove member</TooltipContent>
       </Tooltip>
@@ -430,9 +430,9 @@ function RemoveMemberDialog({ group, directoryMembers }: { group: AzureGroup; di
           />
           <Button variant="destructive" onClick={removeMember} disabled={!selectedMember || pending}>
             {pending ? (
-              <LoaderCircle data-icon="inline-start" className="animate-spin" />
+              <FiLoader data-icon="inline-start" className="animate-spin" />
             ) : (
-              <UserMinus data-icon="inline-start" />
+              <FiUserMinus data-icon="inline-start" />
             )}
             {pending ? "Removing…" : "Remove member"}
           </Button>
diff --git a/src/app/dashboard/(active)/complete-profile.tsx b/src/app/dashboard/(active)/complete-profile.tsx
index 89fc4ac..10c0eb4 100644
--- a/src/app/dashboard/(active)/complete-profile.tsx
+++ b/src/app/dashboard/(active)/complete-profile.tsx
@@ -1,7 +1,7 @@
 "use client"
 
-import { UserRoundPenIcon } from "lucide-react"
 import Link from "next/link"
+import { FiEdit3 } from "react-icons/fi"
 import { Button } from "@/components/ui/button"
 import { useSession } from "@/lib/auth"
 
@@ -13,7 +13,7 @@ export function CompleteProfile() {
   return (
     !data.user.name && (
       <div className="flex items-center p-2 pl-4 mb-4 gap-2 rounded-lg border text-accent-foreground bg-yellow-400/10 border-yellow-400">
-        <UserRoundPenIcon size={16} />
+        <FiEdit3 size={16} />
         <p className="grow">Your profile is incomplete, please enter the missing information.</p>
         <Link href="/dashboard/account">
           <Button>Go complete</Button>
diff --git a/src/app/dashboard/(active)/page.tsx b/src/app/dashboard/(active)/page.tsx
index a0cb34b..b22e159 100644
--- a/src/app/dashboard/(active)/page.tsx
+++ b/src/app/dashboard/(active)/page.tsx
@@ -1,4 +1,4 @@
-import { InfoIcon } from "lucide-react"
+import { FiInfo } from "react-icons/fi"
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 import { CompleteProfile } from "./complete-profile"
 
@@ -7,7 +7,7 @@ export default function AdminHome() {
     <div className="container">
       <CompleteProfile />
       <Alert variant="info">
-        <InfoIcon />
+        <FiInfo />
         <AlertTitle>Page under construction</AlertTitle>
         <AlertDescription>Use the sidebar to access the sections</AlertDescription>
       </Alert>
diff --git a/src/app/dashboard/(active)/telegram/grants/delete-grant.tsx b/src/app/dashboard/(active)/telegram/grants/delete-grant.tsx
index c12558b..2eb277b 100644
--- a/src/app/dashboard/(active)/telegram/grants/delete-grant.tsx
+++ b/src/app/dashboard/(active)/telegram/grants/delete-grant.tsx
@@ -1,8 +1,8 @@
 "use client"
 
-import { OctagonX } from "lucide-react"
 import { useRouter } from "next/navigation"
 import { useState } from "react"
+import { FiAlertOctagon } from "react-icons/fi"
 import { toast } from "sonner"
 import {
   AlertDialog,
@@ -58,7 +58,7 @@ export function DeleteGrant({
       <AlertDialogTrigger
         render={
           <Button variant="destructive">
-            <OctagonX />
+            <FiAlertOctagon />
             Interrupt
           </Button>
         }
@@ -66,7 +66,7 @@ export function DeleteGrant({
       <AlertDialogContent size="sm">
         <AlertDialogHeader>
           <AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive">
-            <OctagonX />
+            <FiAlertOctagon />
           </AlertDialogMedia>
           <AlertDialogTitle>Interrupt Grant</AlertDialogTitle>
           <AlertDialogDescription>Are you sure you want to interrupt the grant?</AlertDialogDescription>
diff --git a/src/app/dashboard/(active)/telegram/grants/new-grant.tsx b/src/app/dashboard/(active)/telegram/grants/new-grant.tsx
index 3f839aa..7c709c1 100644
--- a/src/app/dashboard/(active)/telegram/grants/new-grant.tsx
+++ b/src/app/dashboard/(active)/telegram/grants/new-grant.tsx
@@ -1,9 +1,9 @@
 "use client"
 
 import { format } from "date-fns"
-import { ChevronDownIcon, Plus } from "lucide-react"
 import { useRouter } from "next/navigation"
 import { useCallback, useEffect, useState } from "react"
+import { FiChevronDown, FiPlus } from "react-icons/fi"
 import { toast } from "sonner"
 import { Button } from "@/components/ui/button"
 import { Calendar } from "@/components/ui/calendar"
@@ -99,7 +99,7 @@ export function NewGrant() {
       <DialogTrigger
         render={
           <Button variant="outline">
-            <Plus size={20} /> New Grant
+            <FiPlus size={20} /> New Grant
           </Button>
         }
       />
@@ -184,7 +184,7 @@ function DatePicker({ onSelect }: { onSelect: (date: Date, startTime: number, du
             render={
               <Button variant="outline" id="date-picker-optional" className="w-32 justify-between font-normal">
                 {date ? format(date, "PPP") : "Select date"}
-                <ChevronDownIcon data-icon="inline-end" />
+                <FiChevronDown data-icon="inline-end" />
               </Button>
             }
           />
diff --git a/src/app/dashboard/(active)/telegram/groups/group-row.tsx b/src/app/dashboard/(active)/telegram/groups/group-row.tsx
index bfb8006..e17328d 100644
--- a/src/app/dashboard/(active)/telegram/groups/group-row.tsx
+++ b/src/app/dashboard/(active)/telegram/groups/group-row.tsx
@@ -1,6 +1,6 @@
 "use client"
-import { Copy } from "lucide-react"
 import { useRouter } from "next/navigation"
+import { FiCopy } from "react-icons/fi"
 import { toast } from "sonner"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
@@ -54,7 +54,7 @@ export function GroupRow({ row: r }: { row: TgGroup }) {
             }
           }}
         >
-          <Copy />
+          <FiCopy />
         </Button>
       </div>
       <div className="flex items-center justify-end gap-2">
diff --git a/src/app/dashboard/(active)/telegram/groups/leave-chat.tsx b/src/app/dashboard/(active)/telegram/groups/leave-chat.tsx
index 8a8a284..221564b 100644
--- a/src/app/dashboard/(active)/telegram/groups/leave-chat.tsx
+++ b/src/app/dashboard/(active)/telegram/groups/leave-chat.tsx
@@ -1,8 +1,8 @@
 "use client"
 
-import { OctagonX, Trash2 } from "lucide-react"
 import { useRouter } from "next/navigation"
 import { useState } from "react"
+import { FiAlertOctagon, FiTrash2 } from "react-icons/fi"
 import { toast } from "sonner"
 import { Spinner } from "@/components/spinner"
 import {
@@ -57,7 +57,7 @@ export function LeaveChat({ chatId }: { chatId: number }) {
       <AlertDialogTrigger
         render={
           <Button variant="destructive">
-            <Trash2 />
+            <FiTrash2 />
             Leave
           </Button>
         }
@@ -65,7 +65,7 @@ export function LeaveChat({ chatId }: { chatId: number }) {
       <AlertDialogContent size="sm">
         <AlertDialogHeader>
           <AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive">
-            <OctagonX />
+            <FiAlertOctagon />
           </AlertDialogMedia>
           <AlertDialogTitle>Leave chat</AlertDialogTitle>
           <AlertDialogDescription>
diff --git a/src/app/dashboard/(active)/telegram/users/[id]/add-role.tsx b/src/app/dashboard/(active)/telegram/users/[id]/add-role.tsx
index 361ddc1..c702ab1 100644
--- a/src/app/dashboard/(active)/telegram/users/[id]/add-role.tsx
+++ b/src/app/dashboard/(active)/telegram/users/[id]/add-role.tsx
@@ -1,8 +1,8 @@
 "use client"
 import { USER_ROLE } from "@polinetwork/backend"
-import { Plus } from "lucide-react"
 import { useRouter } from "next/navigation"
 import { useState } from "react"
+import { FiPlus } from "react-icons/fi"
 import { toast } from "sonner"
 import { Spinner } from "@/components/spinner"
 import { Badge } from "@/components/ui/badge"
@@ -89,7 +89,7 @@ export function AddRole({
       <DialogTrigger
         render={
           <Button variant="outline">
-            <Plus size={20} /> Add Role
+            <FiPlus size={20} /> Add Role
           </Button>
         }
       />
diff --git a/src/app/dashboard/(active)/telegram/users/[id]/card-message.tsx b/src/app/dashboard/(active)/telegram/users/[id]/card-message.tsx
index 46603cc..4f60cda 100644
--- a/src/app/dashboard/(active)/telegram/users/[id]/card-message.tsx
+++ b/src/app/dashboard/(active)/telegram/users/[id]/card-message.tsx
@@ -1,4 +1,4 @@
-import { ExternalLinkIcon } from "lucide-react"
+import { FiExternalLink } from "react-icons/fi"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardFooter } from "@/components/ui/card"
 import { stripChatId } from "@/lib/utils/telegram"
@@ -30,7 +30,7 @@ export function MessageCard({ message: m }: { message: Message }) {
         {m.group?.inviteLink && (
           <a href={m.group.inviteLink} rel="noopener noreferral" target="_blank" aria-label="Join group">
             <Button variant="outline">
-              <ExternalLinkIcon size={20} /> Join Chat
+              <FiExternalLink size={20} /> Join Chat
             </Button>
           </a>
         )}
@@ -41,7 +41,7 @@ export function MessageCard({ message: m }: { message: Message }) {
           aria-label="Open message in chat"
         >
           <Button variant="outline">
-            <ExternalLinkIcon size={20} /> Open
+            <FiExternalLink size={20} /> Open
           </Button>
         </a>
       </CardFooter>
diff --git a/src/app/dashboard/(active)/telegram/users/[id]/card-user-grant.tsx b/src/app/dashboard/(active)/telegram/users/[id]/card-user-grant.tsx
index 7dbeb37..8e8de0e 100644
--- a/src/app/dashboard/(active)/telegram/users/[id]/card-user-grant.tsx
+++ b/src/app/dashboard/(active)/telegram/users/[id]/card-user-grant.tsx
@@ -1,6 +1,6 @@
 "use client"
 import { format } from "date-fns"
-import { Sparkle } from "lucide-react"
+import { FiZap } from "react-icons/fi"
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
 import type { TgGrant, TgUser } from "@/server/trpc/types"
 import { DeleteGrant } from "../../grants/delete-grant"
@@ -18,7 +18,7 @@ export function UserGrantCard({
     <Card className="h-full">
       <CardHeader>
         <CardTitle className="flex gap-2 items-center">
-          <Sparkle size={20} /> Ongoing Grant
+          <FiZap size={20} /> Ongoing Grant
         </CardTitle>
         <CardDescription>This user has an ongoing grant</CardDescription>
       </CardHeader>
diff --git a/src/app/dashboard/(active)/telegram/users/[id]/card-user-info.tsx b/src/app/dashboard/(active)/telegram/users/[id]/card-user-info.tsx
index 52741df..8a44e6b 100644
--- a/src/app/dashboard/(active)/telegram/users/[id]/card-user-info.tsx
+++ b/src/app/dashboard/(active)/telegram/users/[id]/card-user-info.tsx
@@ -1,5 +1,5 @@
 "use client"
-import { Star } from "lucide-react"
+import { FiStar } from "react-icons/fi"
 import { Badge } from "@/components/ui/badge"
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
 import { useSession } from "@/lib/auth"
@@ -30,7 +30,7 @@ export function UserInfoCard({
           # User ID: {user.id}{" "}
           {isSelf && (
             <Badge>
-              <Star /> You
+              <FiStar /> You
             </Badge>
           )}
         </CardTitle>
diff --git a/src/app/dashboard/(active)/telegram/users/[id]/delete-group-admin.tsx b/src/app/dashboard/(active)/telegram/users/[id]/delete-group-admin.tsx
index 25b0b36..cfcd50b 100644
--- a/src/app/dashboard/(active)/telegram/users/[id]/delete-group-admin.tsx
+++ b/src/app/dashboard/(active)/telegram/users/[id]/delete-group-admin.tsx
@@ -1,8 +1,8 @@
 "use client"
 
-import { Trash2, Trash2Icon } from "lucide-react"
 import { useRouter } from "next/navigation"
 import { useState } from "react"
+import { FiTrash2 } from "react-icons/fi"
 import { toast } from "sonner"
 import { Spinner } from "@/components/spinner"
 import {
@@ -63,7 +63,7 @@ export function DeleteGroupAdmin({
       <AlertDialogTrigger
         render={
           <Button variant="destructive">
-            <Trash2 />
+            <FiTrash2 />
             Delete
           </Button>
         }
@@ -71,7 +71,7 @@ export function DeleteGroupAdmin({
       <AlertDialogContent size="sm">
         <AlertDialogHeader>
           <AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive">
-            <Trash2Icon />
+            <FiTrash2 />
           </AlertDialogMedia>
           <AlertDialogTitle>Remove Group Admin</AlertDialogTitle>
           <AlertDialogDescription>Are you sure you want to remove the group admin?</AlertDialogDescription>
diff --git a/src/app/dashboard/(active)/telegram/users/[id]/new-group-admin.tsx b/src/app/dashboard/(active)/telegram/users/[id]/new-group-admin.tsx
index 840e20d..fc7f5e5 100644
--- a/src/app/dashboard/(active)/telegram/users/[id]/new-group-admin.tsx
+++ b/src/app/dashboard/(active)/telegram/users/[id]/new-group-admin.tsx
@@ -1,7 +1,7 @@
 "use client"
-import { Plus, Search, X } from "lucide-react"
 import { useRouter } from "next/navigation"
 import { useState } from "react"
+import { FiPlus, FiSearch, FiX } from "react-icons/fi"
 import { toast } from "sonner"
 import { Button } from "@/components/ui/button"
 import {
@@ -84,7 +84,7 @@ export function NewGroupAdmin({
       <DialogTrigger
         render={
           <Button variant="outline">
-            <Plus size={20} /> New
+            <FiPlus size={20} /> New
           </Button>
         }
       />
@@ -119,12 +119,12 @@ export function NewGroupAdmin({
                 value={groupQuery}
               />
               <Button type="submit" size="icon">
-                <Search />
+                <FiSearch />
               </Button>
               <div className="grow" />
               {groups.length > 0 && (
                 <Button variant="outline" onClick={reset} className="justify-self-end">
-                  <X />
+                  <FiX />
                   Reset
                 </Button>
               )}
diff --git a/src/app/dashboard/(active)/telegram/users/[id]/page.tsx b/src/app/dashboard/(active)/telegram/users/[id]/page.tsx
index bc83ede..ec6649e 100644
--- a/src/app/dashboard/(active)/telegram/users/[id]/page.tsx
+++ b/src/app/dashboard/(active)/telegram/users/[id]/page.tsx
@@ -10,8 +10,8 @@ import { NewGroupAdmin } from "./new-group-admin"
 
 export default async function TgUserDetails({ params }: { params: Promise<{ id: string }> }) {
   const { id } = await params
-  const parsedInt = parseInt(id, 10)
-  if (isNaN(parsedInt)) notFound()
+  const parsedInt = Number(id)
+  if (!Number.isInteger(parsedInt) || !Number.isSafeInteger(parsedInt)) notFound()
   const data = await getUserDetails(parsedInt)
 
   if (!data) notFound()
diff --git a/src/app/dashboard/(active)/telegram/users/[id]/remove-role.tsx b/src/app/dashboard/(active)/telegram/users/[id]/remove-role.tsx
index 82ddde0..261a6b4 100644
--- a/src/app/dashboard/(active)/telegram/users/[id]/remove-role.tsx
+++ b/src/app/dashboard/(active)/telegram/users/[id]/remove-role.tsx
@@ -1,8 +1,8 @@
 "use client"
 import { USER_ROLE } from "@polinetwork/backend"
-import { Minus } from "lucide-react"
 import { useRouter } from "next/navigation"
 import { useState } from "react"
+import { FiMinus } from "react-icons/fi"
 import { toast } from "sonner"
 import { Spinner } from "@/components/spinner"
 import { Badge } from "@/components/ui/badge"
@@ -93,7 +93,7 @@ export function RemoveRole({
       <DialogTrigger
         render={
           <Button variant="destructive">
-            <Minus size={20} /> Remove Role
+            <FiMinus size={20} /> Remove Role
           </Button>
         }
       />
diff --git a/src/app/dashboard/(active)/telegram/users/page.tsx b/src/app/dashboard/(active)/telegram/users/page.tsx
index 5a52f6d..79d7a71 100644
--- a/src/app/dashboard/(active)/telegram/users/page.tsx
+++ b/src/app/dashboard/(active)/telegram/users/page.tsx
@@ -1,5 +1,5 @@
-import { Eye } from "lucide-react"
 import Link from "next/link"
+import { FiEye } from "react-icons/fi"
 import { SearchInput } from "@/components/search-input"
 import { Button } from "@/components/ui/button"
 import { trpc } from "@/server/trpc"
@@ -47,7 +47,7 @@ function UserRow({ row: r }: { row: Users[number] }) {
       <div className="flex justify-end gap-2 items-center">
         <Link href={`/dashboard/telegram/users/${r.id}`}>
           <Button size="icon" aria-label="see user details">
-            <Eye />
+            <FiEye />
           </Button>
         </Link>
       </div>
diff --git a/src/app/dashboard/(active)/web/guide/create-guide.tsx b/src/app/dashboard/(active)/web/guide/create-guide.tsx
index 6799ad0..5845298 100644
--- a/src/app/dashboard/(active)/web/guide/create-guide.tsx
+++ b/src/app/dashboard/(active)/web/guide/create-guide.tsx
@@ -1,8 +1,8 @@
 "use client"
 
 import { format } from "date-fns"
-import { ChevronDownIcon, Plus, Upload } from "lucide-react"
 import { useState } from "react"
+import { FiChevronDown, FiPlus, FiUpload } from "react-icons/fi"
 import { toast } from "sonner"
 import { Button } from "@/components/ui/button"
 import { Calendar } from "@/components/ui/calendar"
@@ -84,7 +84,7 @@ export function CreateGuide({
       <DialogTrigger
         render={
           <Button variant="outline">
-            <Plus size={20} /> Add Guide
+            <FiPlus size={20} /> Add Guide
           </Button>
         }
       />
@@ -116,7 +116,7 @@ export function CreateGuide({
                 render={
                   <Button variant="outline" id="date-picker" className="w-full justify-between font-normal">
                     {date ? format(date, "dd/MM/yyyy") : "Select date"}
-                    <ChevronDownIcon data-icon="inline-end" />
+                    <FiChevronDown data-icon="inline-end" />
                   </Button>
                 }
               />
@@ -142,7 +142,7 @@ export function CreateGuide({
               htmlFor="file"
               className="flex h-8 w-full cursor-pointer items-center gap-2 rounded-lg border border-input bg-transparent px-2.5 text-sm transition-colors hover:bg-accent/50"
             >
-              <Upload className="size-4 shrink-0 text-muted-foreground" />
+              <FiUpload className="size-4 shrink-0 text-muted-foreground" />
               <span className={file ? "truncate" : "truncate text-muted-foreground"}>
                 {file ? file.name : "Choose a PDF file..."}
               </span>
diff --git a/src/app/dashboard/(active)/web/guide/delete-guide.tsx b/src/app/dashboard/(active)/web/guide/delete-guide.tsx
index 9d88482..9597629 100644
--- a/src/app/dashboard/(active)/web/guide/delete-guide.tsx
+++ b/src/app/dashboard/(active)/web/guide/delete-guide.tsx
@@ -1,7 +1,7 @@
 "use client"
 
-import { OctagonX, Trash } from "lucide-react"
 import { useState } from "react"
+import { FiAlertOctagon, FiTrash } from "react-icons/fi"
 import { toast } from "sonner"
 import {
   AlertDialog,
@@ -52,14 +52,14 @@ export function DeleteGuide({
       <AlertDialogTrigger
         render={
           <Button type="button" variant="destructive" size="icon" aria-label={`Delete ${version}`}>
-            <Trash className="size-4" />
+            <FiTrash className="size-4" />
           </Button>
         }
       />
       <AlertDialogContent size="sm">
         <AlertDialogHeader>
           <AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive">
-            <OctagonX />
+            <FiAlertOctagon />
           </AlertDialogMedia>
           <AlertDialogTitle>Delete Guide</AlertDialogTitle>
           <AlertDialogDescription>
diff --git a/src/components/dashboard-sidebar/data.tsx b/src/components/dashboard-sidebar/data.tsx
index a50c731..0fa52ae 100644
--- a/src/components/dashboard-sidebar/data.tsx
+++ b/src/components/dashboard-sidebar/data.tsx
@@ -1,5 +1,5 @@
-import { BookOpen, Globe, MessageCircleMoreIcon, Sparkle, Users, UsersRound } from "lucide-react"
 import Image from "next/image"
+import { FiBookOpen, FiGlobe, FiMessageSquare, FiUsers, FiZap } from "react-icons/fi"
 import azureSvg from "@/assets/svg/azure.svg"
 import telegramSvg from "@/assets/svg/telegram.svg"
 
@@ -9,23 +9,23 @@ export const DSData = {
       title: "Telegram",
       icon: <Image alt="telegram logo" src={telegramSvg} className="size-4" />,
       items: [
-        { title: "Grants", url: "/dashboard/telegram/grants", icon: <Sparkle /> },
-        { title: "Groups", url: "/dashboard/telegram/groups", icon: <MessageCircleMoreIcon /> },
-        { title: "Users", url: "/dashboard/telegram/users", icon: <Users /> },
+        { title: "Grants", url: "/dashboard/telegram/grants", icon: <FiZap /> },
+        { title: "Groups", url: "/dashboard/telegram/groups", icon: <FiMessageSquare /> },
+        { title: "Users", url: "/dashboard/telegram/users", icon: <FiUsers /> },
       ],
     },
     {
       title: "Azure",
       icon: <Image alt="azure logo" src={azureSvg} className="size-4" />,
       items: [
-        { title: "Groups", url: "/dashboard/azure/groups", icon: <UsersRound /> },
-        { title: "Members", url: "/dashboard/azure/members", icon: <Users /> },
+        { title: "Groups", url: "/dashboard/azure/groups", icon: <FiUsers /> },
+        { title: "Members", url: "/dashboard/azure/members", icon: <FiUsers /> },
       ],
     },
     {
       title: "Web",
-      icon: <Globe className="size-4" />,
-      items: [{ title: "Guide", url: "/dashboard/web/guide", icon: <BookOpen /> }],
+      icon: <FiGlobe className="size-4" />,
+      items: [{ title: "Guide", url: "/dashboard/web/guide", icon: <FiBookOpen /> }],
     },
   ],
 }
diff --git a/src/components/dashboard-sidebar/main-nav.tsx b/src/components/dashboard-sidebar/main-nav.tsx
index 7b7acf5..b61f719 100644
--- a/src/components/dashboard-sidebar/main-nav.tsx
+++ b/src/components/dashboard-sidebar/main-nav.tsx
@@ -1,8 +1,8 @@
 "use client"
-import { ChevronRight } from "lucide-react"
 import Link from "next/link"
 import { usePathname } from "next/navigation"
 import { useState } from "react"
+import { FiChevronRight } from "react-icons/fi"
 import { COOKIES } from "@/constants"
 import { useCookieStorage } from "@/hooks/use-cookie-storage"
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible"
@@ -67,7 +67,7 @@ function DSMenuCategory({
           <SidebarMenuButton className="font-medium">
             {category.icon}
             {category.title}
-            <ChevronRight className="ml-auto transition-transform ease-linear rotate-0 group-data-open/collapsible:rotate-90" />
+            <FiChevronRight className="ml-auto transition-transform ease-linear rotate-0 group-data-open/collapsible:rotate-90" />
           </SidebarMenuButton>
         }
       />
diff --git a/src/components/dashboard-sidebar/user-nav.tsx b/src/components/dashboard-sidebar/user-nav.tsx
index 40ceabe..ca07cdc 100644
--- a/src/components/dashboard-sidebar/user-nav.tsx
+++ b/src/components/dashboard-sidebar/user-nav.tsx
@@ -1,8 +1,8 @@
 "use client"
 
-import { Bell, ChevronsUpDown, LogOut, UserIcon } from "lucide-react"
 import Link from "next/link"
 import { useRouter } from "next/navigation"
+import { FiBell, FiChevronsDown, FiLogOut, FiUser } from "react-icons/fi"
 import { toast } from "sonner"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import {
@@ -40,13 +40,13 @@ export function DSUserNav() {
               >
                 <Avatar className="size-8">
                   <AvatarImage src={user.image ?? undefined} alt={user.name} />
-                  <AvatarFallback>{user.name ? getInitials(user.name) : <UserIcon size={48} />}</AvatarFallback>
+                  <AvatarFallback>{user.name ? getInitials(user.name) : <FiUser size={48} />}</AvatarFallback>
                 </Avatar>
                 <div className="grid flex-1 text-left text-sm leading-tight">
                   <span className="truncate font-medium">{user.name}</span>
                   <span className="truncate text-xs">{user.email}</span>
                 </div>
-                <ChevronsUpDown className="ml-auto size-4" />
+                <FiChevronsDown className="ml-auto size-4" />
               </SidebarMenuButton>
             }
           />
@@ -61,7 +61,7 @@ export function DSUserNav() {
                 <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
                   <Avatar className="size-8">
                     <AvatarImage src={user.image ?? undefined} alt={user.name} />
-                    <AvatarFallback>{user.name ? getInitials(user.name) : <UserIcon size={48} />}</AvatarFallback>
+                    <AvatarFallback>{user.name ? getInitials(user.name) : <FiUser size={48} />}</AvatarFallback>
                   </Avatar>
                   <div className="grid flex-1 text-left text-sm leading-tight">
                     <span className="truncate font-medium">{user.name}</span>
@@ -74,12 +74,12 @@ export function DSUserNav() {
             <DropdownMenuGroup>
               <Link href="/dashboard/account">
                 <DropdownMenuItem>
-                  <UserIcon />
+                  <FiUser />
                   Account
                 </DropdownMenuItem>
               </Link>
               <DropdownMenuItem disabled>
-                <Bell />
+                <FiBell />
                 Notifications
               </DropdownMenuItem>
             </DropdownMenuGroup>
@@ -97,7 +97,7 @@ export function DSUserNav() {
                 })
               }
             >
-              <LogOut />
+              <FiLogOut />
               Log out
             </DropdownMenuItem>
           </DropdownMenuContent>
diff --git a/src/components/header-login-button.tsx b/src/components/header-login-button.tsx
index ed3dd14..62057da 100644
--- a/src/components/header-login-button.tsx
+++ b/src/components/header-login-button.tsx
@@ -1,7 +1,7 @@
 "use client"
-import { LogIn, LogOut } from "lucide-react"
 import Link from "next/link"
 import { usePathname, useRouter } from "next/navigation"
+import { FiLogIn, FiLogOut } from "react-icons/fi"
 import { useIsMobile } from "@/hooks/use-mobile"
 import { auth, useSession } from "@/lib/auth"
 import { Button } from "./ui/button"
@@ -24,7 +24,7 @@ export function HeaderLoginButton() {
           router.refresh()
         }}
       >
-        <LogOut size={20} /> Logout
+        <FiLogOut size={20} /> Logout
       </Button>
     )
 
@@ -36,7 +36,7 @@ export function HeaderLoginButton() {
         className="rounded-lg"
         size={isMobile ? "icon" : "default"}
       >
-        <LogIn size={20} />
+        <FiLogIn size={20} />
         <span className="max-md:hidden">Login</span>
       </Button>
     </Link>
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 55c341e..d007f74 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -1,5 +1,5 @@
-import { GlobeIcon } from "lucide-react"
 import Link from "next/link"
+import { FiGlobe } from "react-icons/fi"
 import { ThemeButton } from "@/components/theme-button"
 import { HeaderLoginButton } from "./header-login-button"
 import { Logo } from "./logo"
@@ -22,7 +22,7 @@ export async function Header() {
       <nav className="flex items-stretch space-x-2 sm:space-x-3">
         <ThemeButton />
         <Button disabled variant="ghost" size="icon">
-          <GlobeIcon size={20} />
+          <FiGlobe size={20} />
         </Button>
         <HeaderLoginButton />
       </nav>
diff --git a/src/components/logout-button.tsx b/src/components/logout-button.tsx
index 1a6a958..de99534 100644
--- a/src/components/logout-button.tsx
+++ b/src/components/logout-button.tsx
@@ -1,5 +1,5 @@
-import { LogOut } from "lucide-react"
 import { redirect } from "next/navigation"
+import { FiLogOut } from "react-icons/fi"
 import { Button } from "@/components/ui/button"
 import { signOut } from "@/lib/auth"
 
@@ -13,7 +13,7 @@ export function LogoutButton() {
       variant="destructive"
       type="submit"
     >
-      <LogOut />
+      <FiLogOut />
       Logout
     </Button>
   )
diff --git a/src/components/navigate-back.tsx b/src/components/navigate-back.tsx
index 463f442..febb551 100644
--- a/src/components/navigate-back.tsx
+++ b/src/components/navigate-back.tsx
@@ -1,7 +1,7 @@
 "use client"
 
-import { ArrowLeft } from "lucide-react"
 import { useRouter } from "next/navigation"
+import { FiArrowLeft } from "react-icons/fi"
 import { Button } from "./ui/button"
 
 export function NavigateBack() {
@@ -15,7 +15,7 @@ export function NavigateBack() {
         router.back()
       }}
     >
-      <ArrowLeft />
+      <FiArrowLeft />
     </Button>
   )
 }
diff --git a/src/components/search-input.tsx b/src/components/search-input.tsx
index e0e5a9e..43b9009 100644
--- a/src/components/search-input.tsx
+++ b/src/components/search-input.tsx
@@ -1,8 +1,8 @@
 "use client"
 
-import { RefreshCcw, Search } from "lucide-react"
 import { useRouter, useSearchParams } from "next/navigation"
 import { useEffect, useState } from "react"
+import { FiRefreshCcw, FiSearch } from "react-icons/fi"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 
@@ -35,11 +35,11 @@ export function SearchInput({ disabled }: { disabled?: boolean }) {
         placeholder="Search..."
       />
       <Button onClick={handleSearch} disabled={disabled}>
-        <Search />
+        <FiSearch />
         Search
       </Button>
       <Button onClick={() => router.refresh()} variant="outline" disabled={disabled}>
-        <RefreshCcw />
+        <FiRefreshCcw />
         Refresh
       </Button>
     </div>
diff --git a/src/components/theme-button.tsx b/src/components/theme-button.tsx
index cbaa0ad..2ddc817 100644
--- a/src/components/theme-button.tsx
+++ b/src/components/theme-button.tsx
@@ -1,6 +1,6 @@
 "use client"
-import { MoonIcon, SunIcon } from "lucide-react"
 import { useTheme } from "next-themes"
+import { FiMoon, FiSun } from "react-icons/fi"
 import { Button } from "./ui/button"
 
 export function ThemeButton() {
@@ -9,8 +9,8 @@ export function ThemeButton() {
   // TODO: remove disabled when light theme is ready
   return (
     <Button disabled size="icon" variant="ghost" onClick={() => setTheme(resolvedTheme === "light" ? "dark" : "light")}>
-      <SunIcon className="block dark:hidden" size={20} />
-      <MoonIcon className="hidden dark:block" size={20} />
+      <FiSun className="block dark:hidden" size={20} />
+      <FiMoon className="hidden dark:block" size={20} />
     </Button>
   )
 }
diff --git a/src/components/ui/breadcrumb.tsx b/src/components/ui/breadcrumb.tsx
index e0deed4..28b736e 100644
--- a/src/components/ui/breadcrumb.tsx
+++ b/src/components/ui/breadcrumb.tsx
@@ -3,7 +3,7 @@ import { mergeProps } from "@base-ui/react/merge-props"
 import { useRender } from "@base-ui/react/use-render"
 
 import { cn } from "@/lib/utils/shadcn"
-import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
+import { FiChevronRight, FiMoreHorizontal } from "react-icons/fi"
 
 function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
   return (
@@ -86,7 +86,7 @@ function BreadcrumbSeparator({
       {...props}
     >
       {children ?? (
-        <ChevronRightIcon />
+        <FiChevronRight />
       )}
     </li>
   )
@@ -107,8 +107,7 @@ function BreadcrumbEllipsis({
       )}
       {...props}
     >
-      <MoreHorizontalIcon
-      />
+      <FiMoreHorizontal />
       <span className="sr-only">More</span>
     </span>
   )
diff --git a/src/components/ui/calendar.tsx b/src/components/ui/calendar.tsx
index 686626b..a39b65e 100644
--- a/src/components/ui/calendar.tsx
+++ b/src/components/ui/calendar.tsx
@@ -10,7 +10,7 @@ import {
 
 import { cn } from "@/lib/utils/shadcn"
 import { Button, buttonVariants } from "@/components/ui/button"
-import { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from "lucide-react"
+import { FiChevronLeft, FiChevronRight, FiChevronDown } from "react-icons/fi"
 
 function Calendar({
   className,
@@ -147,18 +147,18 @@ function Calendar({
         Chevron: ({ className, orientation, ...props }) => {
           if (orientation === "left") {
             return (
-              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+              <FiChevronLeft className={cn("size-4", className)} {...props} />
             )
           }
 
           if (orientation === "right") {
             return (
-              <ChevronRightIcon className={cn("size-4", className)} {...props} />
+              <FiChevronRight className={cn("size-4", className)} {...props} />
             )
           }
 
           return (
-            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+            <FiChevronDown className={cn("size-4", className)} {...props} />
           )
         },
         DayButton: ({ ...props }) => (
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
index b57a702..7b8b0ef 100644
--- a/src/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@@ -15,7 +15,7 @@ import {
   InputGroup,
   InputGroupAddon,
 } from "@/components/ui/input-group"
-import { SearchIcon, CheckIcon } from "lucide-react"
+import { FiSearch, FiCheck } from "react-icons/fi"
 
 function Command({
   className,
@@ -82,7 +82,7 @@ function CommandInput({
           {...props}
         />
         <InputGroupAddon>
-          <SearchIcon className="size-4 shrink-0 opacity-50" />
+          <FiSearch className="size-4 shrink-0 opacity-50" />
         </InputGroupAddon>
       </InputGroup>
     </div>
@@ -162,7 +162,7 @@ function CommandItem({
       {...props}
     >
       {children}
-      <CheckIcon className="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
+      <FiCheck className="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
     </CommandPrimitive.Item>
   )
 }
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index 9bb1f25..c3f389e 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -5,7 +5,7 @@ import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
 
 import { cn } from "@/lib/utils/shadcn"
 import { Button } from "@/components/ui/button"
-import { XIcon } from "lucide-react"
+import { FiX } from "react-icons/fi"
 
 function Dialog({ ...props }: DialogPrimitive.Root.Props) {
   return <DialogPrimitive.Root data-slot="dialog" {...props} />
@@ -61,7 +61,6 @@ function DialogContent({
         {children}
         {showCloseButton && (
           <DialogPrimitive.Close
-            data-slot="dialog-close"
             render={
               <Button
                 variant="ghost"
@@ -70,8 +69,7 @@ function DialogContent({
               />
             }
           >
-            <XIcon
-            />
+            <FiX />
             <span className="sr-only">Close</span>
           </DialogPrimitive.Close>
         )}
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
index d1c45d7..385ff9f 100644
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -4,7 +4,7 @@ import * as React from "react"
 import { Menu as MenuPrimitive } from "@base-ui/react/menu"
 
 import { cn } from "@/lib/utils/shadcn"
-import { ChevronRightIcon, CheckIcon } from "lucide-react"
+import { FiChevronRight, FiCheck } from "react-icons/fi"
 
 function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
   return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />
@@ -119,7 +119,7 @@ function DropdownMenuSubTrigger({
       {...props}
     >
       {children}
-      <ChevronRightIcon className="ml-auto" />
+      <FiChevronRight className="ml-auto" />
     </MenuPrimitive.SubmenuTrigger>
   )
 }
@@ -170,8 +170,7 @@ function DropdownMenuCheckboxItem({
         data-slot="dropdown-menu-checkbox-item-indicator"
       >
         <MenuPrimitive.CheckboxItemIndicator>
-          <CheckIcon
-          />
+          <FiCheck />
         </MenuPrimitive.CheckboxItemIndicator>
       </span>
       {children}
@@ -211,8 +210,7 @@ function DropdownMenuRadioItem({
         data-slot="dropdown-menu-radio-item-indicator"
       >
         <MenuPrimitive.RadioItemIndicator>
-          <CheckIcon
-          />
+          <FiCheck />
         </MenuPrimitive.RadioItemIndicator>
       </span>
       {children}
diff --git a/src/components/ui/input-otp.tsx b/src/components/ui/input-otp.tsx
index dcbc966..baca16a 100644
--- a/src/components/ui/input-otp.tsx
+++ b/src/components/ui/input-otp.tsx
@@ -4,7 +4,7 @@ import * as React from "react"
 import { OTPInput, OTPInputContext } from "input-otp"
 
 import { cn } from "@/lib/utils/shadcn"
-import { MinusIcon } from "lucide-react"
+import { FiMinus } from "react-icons/fi"
 
 function InputOTP({
   className,
@@ -78,8 +78,7 @@ function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
       role="separator"
       {...props}
     >
-      <MinusIcon
-      />
+      <FiMinus />
     </div>
   )
 }
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
index bef549b..efd2cb8 100644
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -4,7 +4,7 @@ import * as React from "react"
 import { Select as SelectPrimitive } from "@base-ui/react/select"
 
 import { cn } from "@/lib/utils/shadcn"
-import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
+import { FiChevronDown, FiCheck, FiChevronUp } from "react-icons/fi"
 
 const Select = SelectPrimitive.Root
 
@@ -49,7 +49,7 @@ function SelectTrigger({
       {children}
       <SelectPrimitive.Icon
         render={
-          <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+          <FiChevronDown className="pointer-events-none size-4 text-muted-foreground" />
         }
       />
     </SelectPrimitive.Trigger>
@@ -130,7 +130,7 @@ function SelectItem({
           <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
         }
       >
-        <CheckIcon className="pointer-events-none" />
+        <FiCheck className="pointer-events-none" />
       </SelectPrimitive.ItemIndicator>
     </SelectPrimitive.Item>
   )
@@ -162,8 +162,7 @@ function SelectScrollUpButton({
       )}
       {...props}
     >
-      <ChevronUpIcon
-      />
+      <FiChevronUp />
     </SelectPrimitive.ScrollUpArrow>
   )
 }
@@ -181,8 +180,7 @@ function SelectScrollDownButton({
       )}
       {...props}
     >
-      <ChevronDownIcon
-      />
+      <FiChevronDown />
     </SelectPrimitive.ScrollDownArrow>
   )
 }
diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
index 308776c..a3bf29e 100644
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@@ -5,7 +5,7 @@ import { Dialog as SheetPrimitive } from "@base-ui/react/dialog"
 
 import { cn } from "@/lib/utils/shadcn"
 import { Button } from "@/components/ui/button"
-import { XIcon } from "lucide-react"
+import { FiX } from "react-icons/fi"
 
 function Sheet({ ...props }: SheetPrimitive.Root.Props) {
   return <SheetPrimitive.Root data-slot="sheet" {...props} />
@@ -70,8 +70,7 @@ function SheetContent({
               />
             }
           >
-            <XIcon
-            />
+            <FiX />
             <span className="sr-only">Close</span>
           </SheetPrimitive.Close>
         )}
diff --git a/src/components/ui/sidebar.tsx b/src/components/ui/sidebar.tsx
index 3205f8a..a984eb5 100644
--- a/src/components/ui/sidebar.tsx
+++ b/src/components/ui/sidebar.tsx
@@ -23,7 +23,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip"
-import { PanelLeftIcon } from "lucide-react"
+import { FiSidebar } from "react-icons/fi"
 import { useCookieStorage } from "@/hooks/use-cookie-storage"
 import { COOKIES } from "@/constants"
 
@@ -275,7 +275,7 @@ function SidebarTrigger({
       }}
       {...props}
     >
-      <PanelLeftIcon />
+      <FiSidebar />
       <span className="sr-only">Toggle Sidebar</span>
     </Button>
   )
diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx
index 9280ee5..ddee39b 100644
--- a/src/components/ui/sonner.tsx
+++ b/src/components/ui/sonner.tsx
@@ -2,7 +2,7 @@
 
 import { useTheme } from "next-themes"
 import { Toaster as Sonner, type ToasterProps } from "sonner"
-import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
+import { FiCheckCircle, FiInfo, FiAlertTriangle, FiAlertOctagon, FiLoader } from "react-icons/fi"
 
 const Toaster = ({ ...props }: ToasterProps) => {
   const { theme = "system" } = useTheme()
@@ -13,19 +13,19 @@ const Toaster = ({ ...props }: ToasterProps) => {
       className="toaster group"
       icons={{
         success: (
-          <CircleCheckIcon className="size-4" />
+          <FiCheckCircle className="size-4" />
         ),
         info: (
-          <InfoIcon className="size-4" />
+          <FiInfo className="size-4" />
         ),
         warning: (
-          <TriangleAlertIcon className="size-4" />
+          <FiAlertTriangle className="size-4" />
         ),
         error: (
-          <OctagonXIcon className="size-4" />
+          <FiAlertOctagon className="size-4" />
         ),
         loading: (
-          <Loader2Icon className="size-4 animate-spin" />
+          <FiLoader className="size-4 animate-spin" />
         ),
       }}
       style={
diff --git a/src/components/user-select.tsx b/src/components/user-select.tsx
index 68b2a14..bcb03bd 100644
--- a/src/components/user-select.tsx
+++ b/src/components/user-select.tsx
@@ -1,7 +1,7 @@
 "use client"
 
-import { Search, X } from "lucide-react"
 import { useState } from "react"
+import { FiSearch, FiX } from "react-icons/fi"
 import { toast } from "sonner"
 import { fmtUser } from "@/lib/utils/telegram"
 import { getUserInfo, searchUserInfo } from "@/server/actions/users"
@@ -98,11 +98,11 @@ export function UserSelect({ onUser, onReset }: Props) {
 
         {user ? (
           <Button size="icon" onClick={reset} type="button">
-            <X />
+            <FiX />
           </Button>
         ) : (
           <Button size="icon" onClick={search} type="button">
-            <Search />
+            <FiSearch />
           </Button>
         )}
       </form>