diff --git a/client/components/SearchInput.tsx b/client/components/SearchInput.tsx
index 6cb92663..121190fc 100644
--- a/client/components/SearchInput.tsx
+++ b/client/components/SearchInput.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { SearchInputProps } from '@/types/index'
 import { Input } from './ui/input'
 import { Button } from './ui/button'
-import { Search } from 'lucide-react'
+import Image from 'next/image'
 
 const SearchInput = ({placeHolder}:SearchInputProps) => {
     const [input,setInput] = useState<string>('')
@@ -10,7 +10,7 @@ const SearchInput = ({placeHolder}:SearchInputProps) => {
     <div className='boarder rounded-lg flex justify-between items-center'>
         <Input type='text' placeholder={placeHolder} className='boarder-none' />
         <Button variant={'ghost'} size={"icon"} >
-            <Search />
+            <Image src='/assets/icons/search.svg' width={23} height={23} alt='Search Icon' />
             <span className='sr-only'>Search Button</span>
         </Button>
     </div>
diff --git a/client/components/ui/checkbox.tsx b/client/components/ui/checkbox.tsx
index df61a138..8c7ad148 100644
--- a/client/components/ui/checkbox.tsx
+++ b/client/components/ui/checkbox.tsx
@@ -2,9 +2,9 @@
 
 import * as React from "react"
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { Check } from "lucide-react"
 
 import { cn } from "@/lib/utils"
+import Image from "next/image"
 
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
@@ -21,7 +21,7 @@ const Checkbox = React.forwardRef<
     <CheckboxPrimitive.Indicator
       className={cn("flex items-center justify-center text-current")}
     >
-      <Check className="h-4 w-4" />
+      <Image alt="Check Icon" src={'/assets/icons/check.svg'} width={23} height={23} className="h-4 w-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ))
diff --git a/client/components/ui/dropdown-menu.tsx b/client/components/ui/dropdown-menu.tsx
index f69a0d64..5269eaa3 100644
--- a/client/components/ui/dropdown-menu.tsx
+++ b/client/components/ui/dropdown-menu.tsx
@@ -2,9 +2,10 @@
 
 import * as React from "react"
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { Check, ChevronRight, Circle } from "lucide-react"
+import { Circle } from "lucide-react"
 
 import { cn } from "@/lib/utils"
+import Image from "next/image"
 
 const DropdownMenu = DropdownMenuPrimitive.Root
 
@@ -34,7 +35,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
     {...props}
   >
     {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
+    <Image src={'/assets/icons/chevron-right.svg'} alt="chevron-right" width={23} height={23} className="ml-auto h-4 w-4" />
   </DropdownMenuPrimitive.SubTrigger>
 ))
 DropdownMenuSubTrigger.displayName =
@@ -107,7 +108,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
+        <Image src="/assets/icons/check.svg" alt="check" width={23} height={23} className="h-4 w-4" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
diff --git a/client/components/ui/input-otp.tsx b/client/components/ui/input-otp.tsx
index f66fcfa0..48619974 100644
--- a/client/components/ui/input-otp.tsx
+++ b/client/components/ui/input-otp.tsx
@@ -2,9 +2,9 @@
 
 import * as React from "react"
 import { OTPInput, OTPInputContext } from "input-otp"
-import { Dot } from "lucide-react"
 
 import { cn } from "@/lib/utils"
+import Image from "next/image"
 
 const InputOTP = React.forwardRef<
   React.ElementRef<typeof OTPInput>,
@@ -63,7 +63,7 @@ const InputOTPSeparator = React.forwardRef<
   React.ComponentPropsWithoutRef<"div">
 >(({ ...props }, ref) => (
   <div ref={ref} role="separator" {...props}>
-    <Dot />
+    <Image src={'assets/icons/dot.svg'} alt="Dot" width={10} height={10} />
   </div>
 ))
 InputOTPSeparator.displayName = "InputOTPSeparator"
diff --git a/client/components/ui/select.tsx b/client/components/ui/select.tsx
index cbe5a36b..0198c295 100644
--- a/client/components/ui/select.tsx
+++ b/client/components/ui/select.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import * as SelectPrimitive from "@radix-ui/react-select"
-import { Check, ChevronDown, ChevronUp } from "lucide-react"
+import Image from "next/image"
 
 import { cn } from "@/lib/utils"
 
@@ -26,7 +26,7 @@ const SelectTrigger = React.forwardRef<
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
+      <Image src={'/assets/icons/chevron-down.svg'} width={23} height={23} alt="chevron-down" className="h-4 w-4 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ))
@@ -44,7 +44,7 @@ const SelectScrollUpButton = React.forwardRef<
     )}
     {...props}
   >
-    <ChevronUp className="h-4 w-4" />
+    <Image src={'/assets/icons/chevron-up.svg'} alt="chevron-up" width={23} height={23} className="h-4 w-4" />
   </SelectPrimitive.ScrollUpButton>
 ))
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
@@ -61,7 +61,7 @@ const SelectScrollDownButton = React.forwardRef<
     )}
     {...props}
   >
-    <ChevronDown className="h-4 w-4" />
+    <Image src={'/assets/icons/chevron-down.svg'} width={23} height={23} alt="chevron-down" className="h-4 w-4" />
   </SelectPrimitive.ScrollDownButton>
 ))
 SelectScrollDownButton.displayName =
@@ -125,7 +125,7 @@ const SelectItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
+        <Image src="/assets/icons/check.svg" alt="check" width={23} height={23} className="h-4 w-4" />
       </SelectPrimitive.ItemIndicator>
     </span>
 
diff --git a/client/components/ui/sheet.tsx b/client/components/ui/sheet.tsx
index a37f17ba..d0288ebe 100644
--- a/client/components/ui/sheet.tsx
+++ b/client/components/ui/sheet.tsx
@@ -3,9 +3,9 @@
 import * as React from "react"
 import * as SheetPrimitive from "@radix-ui/react-dialog"
 import { cva, type VariantProps } from "class-variance-authority"
-import { X } from "lucide-react"
 
 import { cn } from "@/lib/utils"
+import Image from "next/image"
 
 const Sheet = SheetPrimitive.Root
 
@@ -66,7 +66,7 @@ const SheetContent = React.forwardRef<
     >
       {children}
       <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
-        <X className="h-4 w-4" />
+        <Image src={'/assets/icons/x.svg'} width={23} height={23} alt="X" className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>
     </SheetPrimitive.Content>
diff --git a/client/public/assets/icons/chevron-down.svg b/client/public/assets/icons/chevron-down.svg
new file mode 100644
index 00000000..549f6d94
--- /dev/null
+++ b/client/public/assets/icons/chevron-down.svg
@@ -0,0 +1,2 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="white"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-down"><path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+<path d="M6 9l6 6l6 -6" /></svg>
\ No newline at end of file
diff --git a/client/public/assets/icons/chevron-right.svg b/client/public/assets/icons/chevron-right.svg
new file mode 100644
index 00000000..23463418
--- /dev/null
+++ b/client/public/assets/icons/chevron-right.svg
@@ -0,0 +1,3 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="white"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right">
+<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+<path d="M9 6l6 6l-6 6" /></svg>
\ No newline at end of file
diff --git a/client/public/assets/icons/chevron-up.svg b/client/public/assets/icons/chevron-up.svg
new file mode 100644
index 00000000..6528f67d
--- /dev/null
+++ b/client/public/assets/icons/chevron-up.svg
@@ -0,0 +1,3 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="white"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-up"><path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+<path d="M6 15l6 -6l6 6" />
+</svg>
\ No newline at end of file
diff --git a/client/public/assets/icons/circle.svg b/client/public/assets/icons/circle.svg
new file mode 100644
index 00000000..389a982a
--- /dev/null
+++ b/client/public/assets/icons/circle.svg
@@ -0,0 +1,4 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"   class="icon icon-tabler icons-tabler-outline icon-tabler-circle">
+<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
+</svg>
\ No newline at end of file
diff --git a/client/public/assets/icons/dot.svg b/client/public/assets/icons/dot.svg
new file mode 100644
index 00000000..65d7afa3
--- /dev/null
+++ b/client/public/assets/icons/dot.svg
@@ -0,0 +1,3 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="white"  class="icon icon-tabler icons-tabler-filled icon-tabler-point">
+<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+<path d="M12 7a5 5 0 1 1 -4.995 5.217l-.005 -.217l.005 -.217a5 5 0 0 1 4.995 -4.783z" /></svg>
\ No newline at end of file