diff --git a/src/components/custom-ui/calendar.tsx b/src/components/custom-ui/calendar.tsx
index 54b77d1..d37bdc8 100644
--- a/src/components/custom-ui/calendar.tsx
+++ b/src/components/custom-ui/calendar.tsx
@@ -9,7 +9,7 @@ import {
 import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker';
 
 import { cn } from '@/lib/utils';
-import { Button, buttonVariants } from '@/components/ui/button';
+import { Button, buttonVariants } from '@/components/custom-ui/button';
 
 function Calendar({
   className,
diff --git a/src/components/time-picker.tsx b/src/components/time-picker.tsx
index a43695f..bdd364f 100644
--- a/src/components/time-picker.tsx
+++ b/src/components/time-picker.tsx
@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { ChevronDownIcon } from 'lucide-react';
 
-import { Button } from '@/components/ui/button';
+import { Button } from '@/components/custom-ui/button';
 import { Calendar } from '@/components/custom-ui/calendar';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
@@ -38,11 +38,7 @@ export default function TimePicker({
         </Label>
         <Popover open={open} onOpenChange={setOpen}>
           <PopoverTrigger asChild>
-            <Button
-              variant='outline'
-              id='date'
-              className='w-32 justify-between font-normal'
-            >
+            <Button variant='calendar' id='date'>
               {date ? date.toLocaleDateString() : 'Select date'}
               <ChevronDownIcon />
             </Button>
@@ -66,6 +62,8 @@ export default function TimePicker({
                 day: 'text-center hover:bg-gray-500 hover:rounded-md',
               }}
               weekStartsOn={1} // Set Monday as the first day of the week
+              startMonth={new Date(new Date().getFullYear() - 10, 0)}
+              endMonth={new Date(new Date().getFullYear() + 14, 12)}
             />
           </PopoverContent>
         </Popover>
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 5489c62..4f9b58c 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -23,6 +23,10 @@ const buttonVariants = cva(
           'bg-background border-2 text-text shadow-xs hover:bg-muted border-muted hover:border-background-reversed active:bg-active-muted disabled:bg-disabled-muted',
 
         link: 'text-text underline-offset-4 hover:underline',
+        calendar:
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 w-32 justify-between font-normal',
+        ghost:
+          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
       },
       size: {
         default: 'h-9 px-4 py-2 has-[>svg]:px-3',