diff --git a/.vscode/daisyui.md b/.vscode/daisyui.md
new file mode 100644
index 0000000..265f022
--- /dev/null
+++ b/.vscode/daisyui.md
@@ -0,0 +1,1537 @@
+# daisyUI 5
+daisyUI 5 is a CSS library for Tailwind CSS
+daisyUI 5 provides class names for common UI components
+
+[docs](http://daisyui.com)
+
+## daisyUI 5 install notes
+[install guide](https://daisyui.com/docs/install/)
+1. daisyUI 5 requires Tailwind CSS v4
+2. `tailwind.config.js` file is deprecated in Tailwind CSS v4. do not use `tailwind.config.js`. Tailwind CSS v4 only needs `@import "tailwindcss";` in the CSS file if it's a node dependency.
+3. daisyUI 5 can be installed using `npm i -D daisyui@latest` and then adding `@plugin "daisyui";` to the CSS file
+4. daisyUI is suggested to be installed as a dependency but if you really want to use it from CDN, you can use Tailwind CSS and daisyUI CDN files:
+```html
+
+
+```
+5. A CSS file with Tailwind CSS and daisyUI looks like this (if it's a node dependency)
+```css
+@import "tailwindcss";
+@plugin "daisyui";
+```
+
+## daisyUI 5 usage rules
+1. We can give styles to a HTML element by adding daisyUI class names to it. By adding a component class name, part class names (if there's any available for that component), and modifier class names (if there's any available for that component)
+2. Components can be customized using Tailwind CSS utility classes if the customization is not possible using the existing daisyUI classes. For example `btn px-10` sets a custom horizontal padding to a `btn`
+3. If customization of daisyUI styles using Tailwind CSS utility classes didn't work because of CSS specificity issues, you can use the `!` at the end of the Tailwind CSS utility class to override the existing styles. For example `btn bg-red-500!` sets a custom background color to a `btn` forcefully. This is a last resort solution and should be used sparingly
+4. If a specific component or something similar to it doesn't exist in daisyUI, you can create your own component using Tailwind CSS utility
+5. when using Tailwind CSS `flex` and `grid` for layout, it should be responsive using Tailwind CSS responsive utility prefixes.
+6. Only allowed class names are existing daisyUI class names or Tailwind CSS utility classes.
+7. Ideally, you won't need to write any custom CSS. Using daisyUI class names or Tailwind CSS utility classes is preferred.
+8. suggested - if you need placeholder images, use https://picsum.photos/200/300 with the size you want
+9. suggested - when designing , don't add a custom font unless it's necessary
+10. don't add `bg-base-100 text-base-content` to body unless it's necessary
+
+daisyUI 5 class names are one of the following categories. these type names are only for reference and are not used in the actual code
+- `component`: the required component class
+- `part`: a child part of a component
+- `style`: sets a specific style to component or part
+- `behavior`: changes the behavior of component or part
+- `color`: sets a specific color to component or part
+- `size`: sets a specific size to component or part
+- `placement`: sets a specific placement to component or part
+- `direction`: sets a specific direction to component or part
+- `modifier`: modifies the component or part in a specific way
+
+## Config
+daisyUI 5 config docs: https://daisyui.com/docs/config/
+daisyUI without config:
+```css
+@plugin "daisyui";
+```
+daisyUI config with `light` theme only:
+```css
+@plugin "daisyui" {
+ themes: light --default;
+}
+```
+daisyUI with all the default configs:
+```css
+@plugin "daisyui" {
+ themes: light --default, dark --prefersdark;
+ root: ":root";
+ include: ;
+ exclude: ;
+ prefix: ;
+ logs: true;
+}
+```
+An example config:
+In below config, all the built-in themes are enabled while bumblebee is the default theme and synthwave is the prefersdark theme (default dark mode)
+All the other themes are enabled and can be used by adding `data-theme="THEME_NAME"` to the `` element
+root scrollbar gutter is excluded. `daisy-` prefix is used for all daisyUI classes and console.log is disabled
+```css
+@plugin "daisyui" {
+ themes: light, dark, cupcake, bumblebee --default, emerald, corporate, synthwave --prefersdark, retro, cyberpunk, valentine, halloween, garden, forest, aqua, lofi, pastel, fantasy, wireframe, black, luxury, dracula, cmyk, autumn, business, acid, lemonade, night, coffee, winter, dim, nord, sunset, caramellatte, abyss, silk;
+ root: ":root";
+ include: ;
+ exclude: rootscrollgutter, checkbox;
+ prefix: daisy-;
+ logs: false;
+}
+```
+## daisyUI 5 colors
+
+### daisyUI color names
+- `primary`: Primary brand color, The main color of your brand
+- `primary-content`: Foreground content color to use on primary color
+- `secondary`: Secondary brand color, The optional, secondary color of your brand
+- `secondary-content`: Foreground content color to use on secondary color
+- `accent`: Accent brand color, The optional, accent color of your brand
+- `accent-content`: Foreground content color to use on accent color
+- `neutral`: Neutral dark color, For not-saturated parts of UI
+- `neutral-content`: Foreground content color to use on neutral color
+- `base-100`:-100 Base surface color of page, used for blank backgrounds
+- `base-200`:-200 Base color, darker shade, to create elevations
+- `base-300`:-300 Base color, even more darker shade, to create elevations
+- `base-content`: Foreground content color to use on base color
+- `info`: Info color, For informative/helpful messages
+- `info-content`: Foreground content color to use on info color
+- `success`: Success color, For success/safe messages
+- `success-content`: Foreground content color to use on success color
+- `warning`: Warning color, For warning/caution messages
+- `warning-content`: Foreground content color to use on warning color
+- `error`: Error color, For error/danger/destructive messages
+- `error-content`: Foreground content color to use on error color
+
+### daisyUI color rules
+1. daisyUI adds semantic color names to Tailwind CSS colors
+2. daisyUI color names can be used in utility classes, like other Tailwind CSS color names. for example, `bg-primary` will use the primary color for the background
+3. daisyUI color names include variables as value so they can change based the theme
+4. There's no need to use `dark:` for daisyUI color names
+5. Ideally only daisyUI color names should be used for colors so the colors can change automatically based on the theme
+6. If a Tailwind CSS color name (like `red-500`) is used, it will be same red color on all themes
+7. If a daisyUI color name (like `primary`) is used, it will change color based on the theme
+8. Using Tailwind CSS color names for text colors should be avoided because Tailwind CSS color `text-gray-800` on `bg-base-100` would be unreadable on a dark theme - because on dark theme, `bg-base-100` is a dark color
+9. `*-content` colors should have a good contrast compared to their associated colors
+10. suggestion - when designing a page use `base-*` colors for majority of the page. use `primary` color for important elements
+
+### daisyUI custom theme with custom colors
+A CSS file with Tailwind CSS, daisyUI and a custom daisyUI theme looks like this:
+```css
+@import "tailwindcss";
+@plugin "daisyui";
+@plugin "daisyui/theme" {
+ name: "mytheme";
+ default: true; /* set as default */
+ prefersdark: false; /* set as default dark mode (prefers-color-scheme:dark) */
+ color-scheme: light; /* color of browser-provided UI */
+
+ --color-base-100: oklch(98% 0.02 240);
+ --color-base-200: oklch(95% 0.03 240);
+ --color-base-300: oklch(92% 0.04 240);
+ --color-base-content: oklch(20% 0.05 240);
+ --color-primary: oklch(55% 0.3 240);
+ --color-primary-content: oklch(98% 0.01 240);
+ --color-secondary: oklch(70% 0.25 200);
+ --color-secondary-content: oklch(98% 0.01 200);
+ --color-accent: oklch(65% 0.25 160);
+ --color-accent-content: oklch(98% 0.01 160);
+ --color-neutral: oklch(50% 0.05 240);
+ --color-neutral-content: oklch(98% 0.01 240);
+ --color-info: oklch(70% 0.2 220);
+ --color-info-content: oklch(98% 0.01 220);
+ --color-success: oklch(65% 0.25 140);
+ --color-success-content: oklch(98% 0.01 140);
+ --color-warning: oklch(80% 0.25 80);
+ --color-warning-content: oklch(20% 0.05 80);
+ --color-error: oklch(65% 0.3 30);
+ --color-error-content: oklch(98% 0.01 30);
+
+ --radius-selector: 1rem; /* border radius of selectors (checkbox, toggle, badge) */
+ --radius-field: 0.25rem; /* border radius of fields (button, input, select, tab) */
+ --radius-box: 0.5rem; /* border radius of boxes (card, modal, alert) */
+
+ --size-selector: 0.25rem; /* base size of selectors (checkbox, toggle, badge) */
+ --size-field: 0.25rem; /* base size of fields (button, input, select, tab) */
+
+ --border: 1px; /* border size */
+
+ --depth: 1; /* Adds a shadow and subtle 3D effect to components */
+ --noise: 0; /* Adds a subtle noise effect to components */
+}
+```
+You can use https://daisyui.com/theme-generator/ to create your own theme
+
+## daisyUI 5 components
+
+### accordion
+Accordion is used for showing and hiding content but only one item can stay open at a time
+
+[accordion docs](https://daisyui.com/components/accordion/)
+
+#### Class names
+- component: `collapse`
+- part: `collapse-title`, `collapse-content`
+- modifier: `collapse-arrow`, `collapse-plus`, `collapse-open`, `collapse-close`
+
+#### Syntax
+```html
+
{CONTENT}
+```
+where content is:
+```html
+
+
{title}
+
{CONTENT}
+```
+
+#### Rules
+- {MODIFIER} is optional and can have one of the modifier class names
+- Accordion uses radio inputs. All radio inputs with the same name work together and only one of them can be open at a time
+- If you have more than one set of accordion items on a page, use different names for the radio inputs on each set
+- Replace {name} with a unique name for the accordion group
+- replace `{checked}` with `checked="checked"` if you want the accordion to be open by default
+
+### alert
+Alert informs users about important events
+
+[alert docs](https://daisyui.com/components/alert/)
+
+#### Class names
+- component: `alert`
+- style: `alert-outline`, `alert-dash`, `alert-soft`
+- color: `alert-info`, `alert-success`, `alert-warning`, `alert-error`
+- direction: `alert-vertical`, `alert-horizontal`
+
+#### Syntax
+```html
+
{CONTENT}
+```
+
+#### Rules
+- {MODIFIER} is optional and can have one of each style/color/direction class names
+- Add `sm:alert-horizontal` for responsive layouts
+
+### avatar
+Avatars are used to show a thumbnail
+
+[avatar docs](https://daisyui.com/components/avatar/)
+
+#### Class names
+- component: `avatar`, `avatar-group`
+- modifier: `avatar-online`, `avatar-offline`, `avatar-placeholder`
+
+#### Syntax
+```html
+
+
+
+
+
+```
+
+#### Rules
+- {MODIFIER} is optional and can have one of the modifier class names
+- Use `avatar-group` for containing multiple avatars
+- You can set custom sizes using `w-*` and `h-*`
+- You can use mask classes such as `mask-squircle`, `mask-hexagon`, `mask-triangle`
+
+### badge
+Badges are used to inform the user of the status of specific data
+
+[badge docs](https://daisyui.com/components/badge/)
+
+#### Class names
+- component: `badge`
+- style: `badge-outline`, `badge-dash`, `badge-soft`, `badge-ghost`
+- color: `badge-neutral`, `badge-primary`, `badge-secondary`, `badge-accent`, `badge-info`, `badge-success`, `badge-warning`, `badge-error`
+- size: `badge-xs`, `badge-sm`, `badge-md`, `badge-lg`, `badge-xl`
+
+#### Syntax
+```html
+Badge
+```
+
+#### Rules
+- {MODIFIER} is optional and can have one of each style/color/size class names
+- Can be used inside text or buttons
+- To create an empty badge, just remove the text between the span tags
+
+### breadcrumbs
+Breadcrumbs helps users to navigate
+
+[breadcrumbs docs](https://daisyui.com/components/breadcrumbs/)
+
+#### Class names
+- component: `breadcrumbs`
+
+#### Syntax
+```html
+
+```
+
+#### Rules
+- breadcrumbs only has one main class name
+- Can contain icons inside the links
+- If you set `max-width` or the list gets larger than the container it will scroll
+
+### button
+Buttons allow the user to take actions
+
+[button docs](https://daisyui.com/components/button/)
+
+#### Class names
+- component: `btn`
+- color: `btn-neutral`, `btn-primary`, `btn-secondary`, `btn-accent`, `btn-info`, `btn-success`, `btn-warning`, `btn-error`
+- style: `btn-outline`, `btn-dash`, `btn-soft`, `btn-ghost`, `btn-link`
+- behavior: `btn-active`, `btn-disabled`
+- size: `btn-xs`, `btn-sm`, `btn-md`, `btn-lg`, `btn-xl`
+- modifier: `btn-wide`, `btn-block`, `btn-square`, `btn-circle`
+
+#### Syntax
+```html
+
+```
+#### Rules
+- {MODIFIER} is optional and can have one of each color/style/behavior/size/modifier class names
+- btn can be used on any html tags such as `
+