diff --git a/AppUi/src/components/common/Buttons/ButtonComponent.jsx b/AppUi/src/components/common/Buttons/ButtonComponent.jsx
index 9dc326e..5cd931e 100644
--- a/AppUi/src/components/common/Buttons/ButtonComponent.jsx
+++ b/AppUi/src/components/common/Buttons/ButtonComponent.jsx
@@ -1,115 +1,125 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva } from "class-variance-authority"
-import { Loader2 } from "lucide-react"
-import PropTypes from "prop-types"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { Loader2 } from "lucide-react";
+import PropTypes from "prop-types";
 
-import { cn } from "../../../utils/utils"
+import { cn } from "../../../utils/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-bold tracking-wide uppercase ring-offset-background transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 relative overflow-hidden",
-  {
-    variants: {
-      variant: {
-        primary: 
-          "bg-gradient-primary text-primary-foreground hover:shadow-glow-primary hover:scale-105 active:scale-95 border border-primary/20",
-        secondary:
-          "bg-gradient-secondary text-secondary-foreground hover:shadow-glow-secondary hover:scale-105 active:scale-95 border border-secondary/20",
-        danger:
-          "bg-gradient-danger text-destructive-foreground hover:shadow-glow-danger hover:scale-105 active:scale-95 border border-destructive/20",
-        success:
-          "bg-gradient-success text-primary-foreground hover:shadow-[0_0_20px_hsl(var(--game-success)/0.5)] hover:scale-105 active:scale-95 border border-game-success/20",
-        outline:
-          "border-2 border-primary bg-transparent text-primary hover:bg-primary hover:text-primary-foreground hover:shadow-glow-primary hover:scale-105 active:scale-95",
-        ghost: 
-          "hover:bg-accent hover:text-accent-foreground hover:scale-105 active:scale-95",
-        disabled: 
-          "bg-game-disabled text-muted-foreground cursor-not-allowed opacity-60",
-        link: 
-          "text-primary underline-offset-4 hover:underline hover:text-primary/80",
-      },
-      size: {
-        default: "h-12 px-6 py-3 text-sm",
-        sm: "h-9 rounded-md px-4 text-xs",
-        lg: "h-14 rounded-xl px-8 text-base",
-        icon: "h-12 w-12",
-      },
-    },
-    defaultVariants: {
-      variant: "primary",
-      size: "default",
-    },
-  }
-)
+    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-bold tracking-wide uppercase ring-offset-background transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 relative overflow-hidden",
+    {
+        variants: {
+            variant: {
+                primary:
+                    "bg-gradient-primary text-primary-foreground hover:shadow-glow-primary hover:scale-105 active:scale-95 border border-primary/20",
+                secondary:
+                    "bg-gradient-secondary text-secondary-foreground hover:shadow-glow-secondary hover:scale-105 active:scale-95 border border-secondary/20",
+                danger: "bg-gradient-danger text-destructive-foreground hover:shadow-glow-danger hover:scale-105 active:scale-95 border border-destructive/20",
+                success:
+                    "bg-gradient-success text-primary-foreground hover:shadow-[0_0_20px_hsl(var(--game-success)/0.5)] hover:scale-105 active:scale-95 border border-game-success/20",
+                outline:
+                    "border-2 border-primary bg-transparent text-primary hover:bg-primary hover:text-primary-foreground hover:shadow-glow-primary hover:scale-105 active:scale-95",
+                ghost: "hover:bg-accent hover:text-accent-foreground hover:scale-105 active:scale-95",
+                disabled:
+                    "bg-game-disabled text-muted-foreground cursor-not-allowed opacity-60",
+                link: "text-primary underline-offset-4 hover:underline hover:text-primary/80",
+            },
+            size: {
+                default: "h-12 px-6 py-3 text-sm",
+                sm: "h-9 rounded-md px-4 text-xs",
+                lg: "h-14 rounded-xl px-8 text-base",
+                icon: "h-12 w-12",
+            },
+        },
+        defaultVariants: {
+            variant: "primary",
+            size: "default",
+        },
+    }
+);
 
 const Button = React.forwardRef(
-  ({ className, variant, size, asChild = false, isLoading = false, disabled, children, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
-    const isDisabled = disabled || isLoading || variant === "disabled"
-    
-    // Only pass disabled prop to button elements, not to other elements when using asChild
-    const componentProps = {
-      className: cn(
-        buttonVariants({ 
-          variant: isDisabled ? "disabled" : variant, 
-          size, 
-          className 
-        }),
-        isLoading && "animate-pulse-glow"
-      ),
-      ref,
-      ...props
-    }
-    
-    // Only add disabled prop for button elements
-    if (!asChild) {
-      componentProps.disabled = isDisabled
-    }
-    
-    if (asChild) {
-      // For asChild, we need to clone the child and merge props
-      return (
-        <Slot {...componentProps}>
-          {React.cloneElement(children, {
-            className: cn(children.props.className, componentProps.className)
-          })}
-        </Slot>
-      )
+    (
+        {
+            className,
+            variant,
+            size,
+            asChild = false,
+            isLoading = false,
+            disabled,
+            children,
+            ...props
+        },
+        ref
+    ) => {
+        const Comp = asChild ? Slot : "button";
+        const isDisabled = disabled || isLoading || variant === "disabled";
+
+        // Only pass disabled prop to button elements, not to other elements when using asChild
+        const componentProps = {
+            className: cn(
+                buttonVariants({
+                    variant: isDisabled ? "disabled" : variant,
+                    size,
+                    className,
+                }),
+                isLoading && "animate-pulse-glow"
+            ),
+            ref,
+            ...props,
+        };
+
+        // Only add disabled prop for button elements
+        if (!asChild) {
+            componentProps.disabled = isDisabled;
+        }
+
+        if (asChild) {
+            // For asChild, we need to clone the child and merge props
+            return (
+                <Slot {...componentProps}>
+                    {React.cloneElement(children, {
+                        className: cn(
+                            children.props.className,
+                            componentProps.className
+                        ),
+                    })}
+                </Slot>
+            );
+        }
+
+        return (
+            <Comp {...componentProps}>
+                {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                {children}
+                {/* Gaming button shine effect */}
+                <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent transform -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-1000 ease-out pointer-events-none" />
+            </Comp>
+        );
     }
-    
-    return (
-      <Comp {...componentProps}>
-        {isLoading && (
-          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-        )}
-        {children}
-        {/* Gaming button shine effect */}
-        <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent transform -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-1000 ease-out pointer-events-none" />
-      </Comp>
-    )
-  }
-)
+);
 
-Button.displayName = "Button"
+Button.displayName = "Button";
 
 // PropTypes for runtime type checking
 Button.propTypes = {
-  className: PropTypes.string,
-  variant: PropTypes.oneOf([
-    "primary",
-    "secondary", 
-    "danger",
-    "success",
-    "outline",
-    "ghost",
-    "disabled",
-    "link"
-  ]),
-  size: PropTypes.oneOf(["default", "sm", "lg", "icon"]),
-  asChild: PropTypes.bool,
-  isLoading: PropTypes.bool,
-  disabled: PropTypes.bool,
-  children: PropTypes.node,
-}
+    className: PropTypes.string,
+    variant: PropTypes.oneOf([
+        "primary",
+        "secondary",
+        "danger",
+        "success",
+        "outline",
+        "ghost",
+        "disabled",
+        "link",
+    ]),
+    size: PropTypes.oneOf(["default", "sm", "lg", "icon"]),
+    asChild: PropTypes.bool,
+    isLoading: PropTypes.bool,
+    disabled: PropTypes.bool,
+    children: PropTypes.node,
+};
 
-export default Button
+export default Button;
diff --git a/AppUi/src/components/common/Form/FormComponents.jsx b/AppUi/src/components/common/Form/FormComponents.jsx
index d08ae37..8f1b7d4 100644
--- a/AppUi/src/components/common/Form/FormComponents.jsx
+++ b/AppUi/src/components/common/Form/FormComponents.jsx
@@ -1,302 +1,599 @@
 // FormComponents.jsx
-import React, { useState, useRef, useEffect } from 'react';
-import { ChevronDown, Calendar, Upload, X, Check, Search, Eye, EyeOff, Loader2 } from 'lucide-react';
+import React, { useState, useRef, useEffect } from "react";
+import {
+    ChevronDown,
+    Calendar,
+    Upload,
+    X,
+    Check,
+    Search,
+    Eye,
+    EyeOff,
+    Loader2,
+} from "lucide-react";
 import { cva } from "class-variance-authority";
 import { cn } from "../../../utils/utils";
 
-
 const inputBaseStyles =
-  "light-glass-input w-full rounded-lg text-slate-800 " +
-  "placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-all duration-300";
+    "light-glass-input w-full rounded-lg text-slate-800 " +
+    "placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-all duration-300";
 
-const labelBaseStyles = "block text-sm font-semibold text-slate-800 mb-2 text-left";
+const labelBaseStyles =
+    "block text-sm font-semibold text-slate-800 mb-2 text-left";
 
 const requiredIndicatorStyles = "text-orange-600 ml-1";
 const errorTextStyles = "text-red-600 text-xs mt-1 text-left font-semibold";
 
 const inputVariants = cva(inputBaseStyles, {
-  variants: {
-    variant: {
-      default: "",
-      error: "border-red-500/80 text-red-900 focus:ring-red-500",
+    variants: {
+        variant: {
+            default: "",
+            error: "border-red-500/80 text-red-900 focus:ring-red-500",
+        },
+        size: {
+            default: "h-11 px-4 text-sm",
+            sm: "h-9 px-3 text-xs",
+            lg: "h-14 px-5 text-base",
+        },
     },
-    size: {
-      default: "h-11 px-4 text-sm",
-      sm: "h-9 px-3 text-xs",
-      lg: "h-14 px-5 text-base",
+    defaultVariants: {
+        variant: "default",
+        size: "default",
     },
-  },
-  defaultVariants: {
-    variant: "default",
-    size: "default",
-  },
 });
 
-
 const Input = React.forwardRef(
-  ({ label, id, name, type = 'text', value, onChange, error, required, size, placeholder, ...props }, ref) => {
-    const [showPassword, setShowPassword] = useState(false);
-    const inputType = type === 'password' && showPassword ? 'text' : type;
+    (
+        {
+            label,
+            id,
+            name,
+            type = "text",
+            value,
+            onChange,
+            error,
+            required,
+            size,
+            placeholder,
+            ...props
+        },
+        ref
+    ) => {
+        const [showPassword, setShowPassword] = useState(false);
+        const inputType = type === "password" && showPassword ? "text" : type;
 
-    return (
-      <div className=" mb-4 w-full">
-        {label && (
-          <label htmlFor={id} className={labelBaseStyles}>
-            {label} {required && <span className={requiredIndicatorStyles}>*</span>}
-          </label>
-        )}
-        <div className="light-glass-pane relative">
-          <input
-            type={inputType}
-            id={id}
-            name={name}
-            value={value}
-            onChange={onChange}
-            className={cn(inputVariants({ variant: error ? "error" : "default", size }))}
-            ref={ref}
-            placeholder={placeholder}
-            {...props}
-          />
-          {type === 'password' && (
-            <button
-              type="button"
-              onClick={() => setShowPassword(!showPassword)}
-              className="absolute inset-y-0 right-0 pr-3 flex items-center text-slate-600 hover:text-slate-900 focus:outline-none focus:ring-1 focus:ring-orange-500 rounded-full"
-            >
-              {showPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
-            </button>
-          )}
-        </div>
-        {error && <p className={errorTextStyles}>{error}</p>}
-      </div>
-    );
-  }
+        return (
+            <div className=" mb-4 w-full">
+                {label && (
+                    <label htmlFor={id} className={labelBaseStyles}>
+                        {label}{" "}
+                        {required && (
+                            <span className={requiredIndicatorStyles}>*</span>
+                        )}
+                    </label>
+                )}
+                <div className="light-glass-pane relative">
+                    <input
+                        type={inputType}
+                        id={id}
+                        name={name}
+                        value={value}
+                        onChange={onChange}
+                        className={cn(
+                            inputVariants({
+                                variant: error ? "error" : "default",
+                                size,
+                            })
+                        )}
+                        ref={ref}
+                        placeholder={placeholder}
+                        {...props}
+                    />
+                    {type === "password" && (
+                        <button
+                            type="button"
+                            onClick={() => setShowPassword(!showPassword)}
+                            className="absolute inset-y-0 right-0 pr-3 flex items-center text-slate-600 hover:text-slate-900 focus:outline-none focus:ring-1 focus:ring-orange-500 rounded-full"
+                        >
+                            {showPassword ? (
+                                <EyeOff className="h-5 w-5" />
+                            ) : (
+                                <Eye className="h-5 w-5" />
+                            )}
+                        </button>
+                    )}
+                </div>
+                {error && <p className={errorTextStyles}>{error}</p>}
+            </div>
+        );
+    }
 );
 Input.displayName = "Input";
 
-
 const SingleSelectDropdown = React.forwardRef(
-  ({ label, id, name, value, onChange, options, error, required, size, placeholder = "Select an option" }, ref) => {
-    const [isOpen, setIsOpen] = useState(false);
-    const wrapperRef = useRef(null);
-    
-    const selectedOption = options.find(opt => opt.value === value);
+    (
+        {
+            label,
+            id,
+            name,
+            value,
+            onChange,
+            options,
+            error,
+            required,
+            size,
+            placeholder = "Select an option",
+        },
+        ref
+    ) => {
+        const [isOpen, setIsOpen] = useState(false);
+        const wrapperRef = useRef(null);
 
-    useEffect(() => {
-      const handleClickOutside = (event) => {
-        if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
-          setIsOpen(false);
-        }
-      };
-      document.addEventListener("mousedown", handleClickOutside);
-      return () => document.removeEventListener("mousedown", handleClickOutside);
-    }, [wrapperRef]);
-    
-    const handleSelectOption = (optionValue) => {
-        onChange({ target: { name, value: optionValue } });
-        setIsOpen(false);
-    };
+        const selectedOption = options.find((opt) => opt.value === value);
 
-    return (
-      <div className=" w-full mb-4" ref={wrapperRef}>
-        {label && <label htmlFor={id} className={labelBaseStyles}>{label}{required && <span className={requiredIndicatorStyles}>*</span>}</label>}
-        <div className="relative">
-          {/* This button looks like an input and triggers the dropdown */}
-          <button
-            type="button"
-            id={id}
-            ref={ref}
-            onClick={() => setIsOpen(!isOpen)}
-            className={cn(inputVariants({ variant: error ? "error" : "default", size }), "flex items-center justify-between text-left")}
-          >
-            <span className={cn(!selectedOption && "text-muted-foreground")}>
-              {selectedOption ? selectedOption.label : placeholder}
-            </span>
-            <ChevronDown className={cn("w-5 h-5 transition-transform duration-200 text-muted-foreground", isOpen && "rotate-180")} />
-          </button>
+        useEffect(() => {
+            const handleClickOutside = (event) => {
+                if (
+                    wrapperRef.current &&
+                    !wrapperRef.current.contains(event.target)
+                ) {
+                    setIsOpen(false);
+                }
+            };
+            document.addEventListener("mousedown", handleClickOutside);
+            return () =>
+                document.removeEventListener("mousedown", handleClickOutside);
+        }, [wrapperRef]);
 
-          {isOpen && (
-            <div className="light-glass-pane absolute z-10 w-full mt-2 p-1 rounded-radius">
-              <ul className="max-h-60 overflow-y-auto">
-                {options.map(option => (
-                  <li
-                    key={option.value}
-                    onClick={() => handleSelectOption(option.value)}
-                    className={cn("flex items-center justify-between p-2 text-sm rounded-md cursor-pointer hover:bg-muted", option.value === value && "font-semibold")}
-                  >
-                    {option.label}
-                    {option.value === value && <Check className="w-4 h-4 text-primary" />}
-                  </li>
-                ))}
-              </ul>
+        const handleSelectOption = (optionValue) => {
+            onChange({ target: { name, value: optionValue } });
+            setIsOpen(false);
+        };
+
+        return (
+            <div className=" w-full mb-4" ref={wrapperRef}>
+                {label && (
+                    <label htmlFor={id} className={labelBaseStyles}>
+                        {label}
+                        {required && (
+                            <span className={requiredIndicatorStyles}>*</span>
+                        )}
+                    </label>
+                )}
+                <div className="relative">
+                    {/* This button looks like an input and triggers the dropdown */}
+                    <button
+                        type="button"
+                        id={id}
+                        ref={ref}
+                        onClick={() => setIsOpen(!isOpen)}
+                        className={cn(
+                            inputVariants({
+                                variant: error ? "error" : "default",
+                                size,
+                            }),
+                            "flex items-center justify-between text-left"
+                        )}
+                    >
+                        <span
+                            className={cn(
+                                !selectedOption && "text-muted-foreground"
+                            )}
+                        >
+                            {selectedOption
+                                ? selectedOption.label
+                                : placeholder}
+                        </span>
+                        <ChevronDown
+                            className={cn(
+                                "w-5 h-5 transition-transform duration-200 text-muted-foreground",
+                                isOpen && "rotate-180"
+                            )}
+                        />
+                    </button>
+
+                    {isOpen && (
+                        <div className="light-glass-pane absolute z-10 w-full mt-2 p-1 rounded-radius">
+                            <ul className="max-h-60 overflow-y-auto">
+                                {options.map((option) => (
+                                    <li
+                                        key={option.value}
+                                        onClick={() =>
+                                            handleSelectOption(option.value)
+                                        }
+                                        className={cn(
+                                            "flex items-center justify-between p-2 text-sm rounded-md cursor-pointer hover:bg-muted",
+                                            option.value === value &&
+                                                "font-semibold"
+                                        )}
+                                    >
+                                        {option.label}
+                                        {option.value === value && (
+                                            <Check className="w-4 h-4 text-primary" />
+                                        )}
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
+                    )}
+                </div>
+                {error && <p className={errorTextStyles}>{error}</p>}
             </div>
-          )}
-        </div>
-        {error && <p className={errorTextStyles}>{error}</p>}
-      </div>
-    );
-  }
+        );
+    }
 );
 SingleSelectDropdown.displayName = "SingleSelectDropdown";
 
-
 const MultiSelectDropdown = React.forwardRef(
-  ({ label, id, name, selectedValues = [], onChange, options, error, required, placeholder = "Select options...", ...props }, ref) => {
-    const [isOpen, setIsOpen] = useState(false);
-    const wrapperRef = useRef(null);
+    (
+        {
+            label,
+            id,
+            name,
+            selectedValues = [],
+            onChange,
+            options,
+            error,
+            required,
+            placeholder = "Select options...",
+            ...props
+        },
+        ref
+    ) => {
+        const [isOpen, setIsOpen] = useState(false);
+        const wrapperRef = useRef(null);
+
+        useEffect(() => {
+            function handleClickOutside(event) {
+                if (
+                    wrapperRef.current &&
+                    !wrapperRef.current.contains(event.target)
+                ) {
+                    setIsOpen(false);
+                }
+            }
+            document.addEventListener("mousedown", handleClickOutside);
+            return () =>
+                document.removeEventListener("mousedown", handleClickOutside);
+        }, [wrapperRef]);
+
+        const handleSelectOption = (value) => {
+            const newSelectedValues = selectedValues.includes(value)
+                ? selectedValues.filter((v) => v !== value)
+                : [...selectedValues, value];
+            onChange({ target: { name, value: newSelectedValues } });
+        };
 
-    useEffect(() => {
-      function handleClickOutside(event) {
-        if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
-          setIsOpen(false);
-        }
-      }
-      document.addEventListener("mousedown", handleClickOutside);
-      return () => document.removeEventListener("mousedown", handleClickOutside);
-    }, [wrapperRef]);
-    
-    const handleSelectOption = (value) => {
-      const newSelectedValues = selectedValues.includes(value)
-        ? selectedValues.filter((v) => v !== value)
-        : [...selectedValues, value];
-      onChange({ target: { name, value: newSelectedValues } });
-    };
+        const handleRemoveTag = (valueToRemove, e) => {
+            e.stopPropagation();
+            const newSelectedValues = selectedValues.filter(
+                (v) => v !== valueToRemove
+            );
+            onChange({ target: { name, value: newSelectedValues } });
+        };
 
-    const handleRemoveTag = (valueToRemove, e) => {
-      e.stopPropagation();
-      const newSelectedValues = selectedValues.filter((v) => v !== valueToRemove);
-      onChange({ target: { name, value: newSelectedValues } });
-    };
-    
-    const selectedOptionsMap = options.reduce((acc, opt) => {
-      if (selectedValues.includes(opt.value)) {
-        acc[opt.value] = opt.label;
-      }
-      return acc;
-    }, {});
+        const selectedOptionsMap = options.reduce((acc, opt) => {
+            if (selectedValues.includes(opt.value)) {
+                acc[opt.value] = opt.label;
+            }
+            return acc;
+        }, {});
 
-    return (
-      <div className="mb-4 w-full" ref={wrapperRef}>
-        {label && (
-          <label htmlFor={id} className={labelBaseStyles}>
-            {label} {required && <span className={requiredIndicatorStyles}>*</span>}
-          </label>
-        )}
-        <div className="relative">
-          <div
-            className={cn(inputVariants({ variant: error ? "error" : "default" }), "h-auto min-h-[44px] flex items-center flex-wrap gap-1.5 p-2 cursor-text")}
-            onClick={() => setIsOpen(true)}
-          >
-            {selectedValues.map(value => (
-              <span key={value} className="flex items-center bg-white/50 text-slate-700 text-xs px-2 py-1 rounded-md border border-white/70">
-                {selectedOptionsMap[value]}
-                <button type="button" className="ml-1.5 text-slate-600 hover:text-slate-900 focus:outline-none" onClick={(e) => handleRemoveTag(value, e)}>
-                  <X className="h-3 w-3" />
-                </button>
-              </span>
-            ))}
-            <input type="text" id={id} placeholder={selectedValues.length === 0 ? placeholder : ""} className="flex-grow bg-transparent outline-none text-slate-800 text-sm h-full" {...props}/>
-          </div>
-          {isOpen && (
-            <div className="light-glass-pane absolute z-10 w-full mt-2 rounded-lg animate-in fade-in-0 zoom-in-95 p-1">
-              <ul className="max-h-60 overflow-y-auto">
-                {options.map(option => (
-                  <li key={option.value} className="flex items-center p-2 rounded-md hover:bg-white/30 cursor-pointer" onClick={() => handleSelectOption(option.value)}>
-                    <div className={cn("h-4 w-4 shrink-0 rounded border border-slate-500 flex items-center justify-center", { "bg-orange-500 border-orange-500 text-white": selectedValues.includes(option.value) })}>
-                      {selectedValues.includes(option.value) && <Check className="h-3 w-3" />}
+        return (
+            <div className="mb-4 w-full" ref={wrapperRef}>
+                {label && (
+                    <label htmlFor={id} className={labelBaseStyles}>
+                        {label}{" "}
+                        {required && (
+                            <span className={requiredIndicatorStyles}>*</span>
+                        )}
+                    </label>
+                )}
+                <div className="relative">
+                    <div
+                        className={cn(
+                            inputVariants({
+                                variant: error ? "error" : "default",
+                            }),
+                            "h-auto min-h-[44px] flex items-center flex-wrap gap-1.5 p-2 cursor-text"
+                        )}
+                        onClick={() => setIsOpen(true)}
+                    >
+                        {selectedValues.map((value) => (
+                            <span
+                                key={value}
+                                className="flex items-center bg-white/50 text-slate-700 text-xs px-2 py-1 rounded-md border border-white/70"
+                            >
+                                {selectedOptionsMap[value]}
+                                <button
+                                    type="button"
+                                    className="ml-1.5 text-slate-600 hover:text-slate-900 focus:outline-none"
+                                    onClick={(e) => handleRemoveTag(value, e)}
+                                >
+                                    <X className="h-3 w-3" />
+                                </button>
+                            </span>
+                        ))}
+                        <input
+                            type="text"
+                            id={id}
+                            placeholder={
+                                selectedValues.length === 0 ? placeholder : ""
+                            }
+                            className="flex-grow bg-transparent outline-none text-slate-800 text-sm h-full"
+                            {...props}
+                        />
                     </div>
-                    <span className={cn("ml-2 text-sm", selectedValues.includes(option.value) ? "text-slate-900 font-semibold" : "text-slate-700")}>{option.label}</span>
-                  </li>
-                ))}
-              </ul>
+                    {isOpen && (
+                        <div className="light-glass-pane absolute z-10 w-full mt-2 rounded-lg animate-in fade-in-0 zoom-in-95 p-1">
+                            <ul className="max-h-60 overflow-y-auto">
+                                {options.map((option) => (
+                                    <li
+                                        key={option.value}
+                                        className="flex items-center p-2 rounded-md hover:bg-white/30 cursor-pointer"
+                                        onClick={() =>
+                                            handleSelectOption(option.value)
+                                        }
+                                    >
+                                        <div
+                                            className={cn(
+                                                "h-4 w-4 shrink-0 rounded border border-slate-500 flex items-center justify-center",
+                                                {
+                                                    "bg-orange-500 border-orange-500 text-white":
+                                                        selectedValues.includes(
+                                                            option.value
+                                                        ),
+                                                }
+                                            )}
+                                        >
+                                            {selectedValues.includes(
+                                                option.value
+                                            ) && <Check className="h-3 w-3" />}
+                                        </div>
+                                        <span
+                                            className={cn(
+                                                "ml-2 text-sm",
+                                                selectedValues.includes(
+                                                    option.value
+                                                )
+                                                    ? "text-slate-900 font-semibold"
+                                                    : "text-slate-700"
+                                            )}
+                                        >
+                                            {option.label}
+                                        </span>
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
+                    )}
+                </div>
+                {error && <p className={errorTextStyles}>{error}</p>}
             </div>
-          )}
-        </div>
-        {error && <p className={errorTextStyles}>{error}</p>}
-      </div>
-    );
-  }
+        );
+    }
 );
 MultiSelectDropdown.displayName = "MultiSelectDropdown";
 
-
 const DatePicker = React.forwardRef(
-  ({ label, id, name, value, onChange, error, required, size, ...props }, ref) => (
-    <div className="mb-4 w-full">
-      {label && <label htmlFor={id} className={labelBaseStyles}>{label} {required && <span className={requiredIndicatorStyles}>*</span>}</label>}
-      <div className="relative">
-        <input type="date" id={id} name={name} value={value} onChange={onChange} className={cn(inputVariants({ variant: error ? "error" : "default", size }), "pr-10")} ref={ref} {...props} />
-        <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-slate-600"><Calendar className="h-5 w-5" /></div>
-      </div>
-      {error && <p className={errorTextStyles}>{error}</p>}
-    </div>
-  )
+    (
+        { label, id, name, value, onChange, error, required, size, ...props },
+        ref
+    ) => (
+        <div className="mb-4 w-full">
+            {label && (
+                <label htmlFor={id} className={labelBaseStyles}>
+                    {label}{" "}
+                    {required && (
+                        <span className={requiredIndicatorStyles}>*</span>
+                    )}
+                </label>
+            )}
+            <div className="relative">
+                <input
+                    type="date"
+                    id={id}
+                    name={name}
+                    value={value}
+                    onChange={onChange}
+                    className={cn(
+                        inputVariants({
+                            variant: error ? "error" : "default",
+                            size,
+                        }),
+                        "pr-10"
+                    )}
+                    ref={ref}
+                    {...props}
+                />
+                <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-slate-600">
+                    <Calendar className="h-5 w-5" />
+                </div>
+            </div>
+            {error && <p className={errorTextStyles}>{error}</p>}
+        </div>
+    )
 );
 DatePicker.displayName = "DatePicker";
 
-
 const FileUpload = React.forwardRef(
-  ({ label, id, name, onChange, error, required, isLoading = false, ...props }, ref) => {
-    const [fileName, setFileName] = useState('');
-    const handleFileChange = (e) => {
-      if (e.target.files?.length) setFileName(Array.from(e.target.files).map(file => file.name).join(', '));
-      else setFileName('');
-      if (onChange) onChange(e);
-    };
-    return (
-      <div className="mb-4 w-full">
-        {label && <label htmlFor={id} className={labelBaseStyles}>{label} {required && <span className={requiredIndicatorStyles}>*</span>}</label>}
-        <label htmlFor={id} className={cn("light-glass-pane flex flex-col items-center justify-center w-full min-h-[120px] p-4 text-center rounded-lg border-2 border-dashed border-white/50 cursor-pointer hover:border-orange-500/50 hover:bg-white/60 transition-all duration-300", error && "border-red-500/80", isLoading && "animate-pulse")}>
-          <input id={id} name={name} type="file" className="hidden" onChange={handleFileChange} disabled={isLoading} ref={ref} {...props} />
-          {isLoading ? <Loader2 className="w-8 h-8 text-orange-500 animate-spin mb-2" /> : <Upload className="w-8 h-8 text-slate-600 mb-2" />}
-          <p className="mb-2 text-sm text-slate-700">
-            <span className="font-semibold text-orange-600">{isLoading ? "Uploading..." : "Click to upload"}</span> or drag & drop
-          </p>
-          {fileName && !isLoading && <p className="text-xs text-slate-600">{fileName}</p>}
-        </label>
-        {error && <p className={errorTextStyles}>{error}</p>}
-      </div>
-    );
-  }
+    (
+        {
+            label,
+            id,
+            name,
+            onChange,
+            error,
+            required,
+            isLoading = false,
+            ...props
+        },
+        ref
+    ) => {
+        const [fileName, setFileName] = useState("");
+        const handleFileChange = (e) => {
+            if (e.target.files?.length)
+                setFileName(
+                    Array.from(e.target.files)
+                        .map((file) => file.name)
+                        .join(", ")
+                );
+            else setFileName("");
+            if (onChange) onChange(e);
+        };
+        return (
+            <div className="mb-4 w-full">
+                {label && (
+                    <label htmlFor={id} className={labelBaseStyles}>
+                        {label}{" "}
+                        {required && (
+                            <span className={requiredIndicatorStyles}>*</span>
+                        )}
+                    </label>
+                )}
+                <label
+                    htmlFor={id}
+                    className={cn(
+                        "light-glass-pane flex flex-col items-center justify-center w-full min-h-[120px] p-4 text-center rounded-lg border-2 border-dashed border-white/50 cursor-pointer hover:border-orange-500/50 hover:bg-white/60 transition-all duration-300",
+                        error && "border-red-500/80",
+                        isLoading && "animate-pulse"
+                    )}
+                >
+                    <input
+                        id={id}
+                        name={name}
+                        type="file"
+                        className="hidden"
+                        onChange={handleFileChange}
+                        disabled={isLoading}
+                        ref={ref}
+                        {...props}
+                    />
+                    {isLoading ? (
+                        <Loader2 className="w-8 h-8 text-orange-500 animate-spin mb-2" />
+                    ) : (
+                        <Upload className="w-8 h-8 text-slate-600 mb-2" />
+                    )}
+                    <p className="mb-2 text-sm text-slate-700">
+                        <span className="font-semibold text-orange-600">
+                            {isLoading ? "Uploading..." : "Click to upload"}
+                        </span>{" "}
+                        or drag & drop
+                    </p>
+                    {fileName && !isLoading && (
+                        <p className="text-xs text-slate-600">{fileName}</p>
+                    )}
+                </label>
+                {error && <p className={errorTextStyles}>{error}</p>}
+            </div>
+        );
+    }
 );
 FileUpload.displayName = "FileUpload";
 
-
 const RadioGroup = React.forwardRef(
-  ({ label, idPrefix, name, selectedValue, onChange, options, error, required, ...props }, ref) => (
-    <fieldset className="mb-4 w-full">
-      {label && <legend className={labelBaseStyles}>{label} {required && <span className={requiredIndicatorStyles}>*</span>}</legend>}
-      <div className="flex flex-col space-y-2 mt-2">
-        {options.map((option, index) => (
-          <label key={option.value} className="flex items-center cursor-pointer p-2 rounded-md hover:bg-white/20">
-            <input type="radio" id={`${idPrefix}-${option.value}`} name={name} value={option.value} checked={selectedValue === option.value} onChange={onChange} className="h-5 w-5 shrink-0 cursor-pointer appearance-none rounded-full border-2 border-slate-900/30 bg-white/20 checked:border-transparent checked:bg-gradient-to-br from-orange-500 to-amber-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white/50 focus:ring-orange-500" ref={index === 0 ? ref : null} {...props} />
-            <span className="ml-3 text-slate-800 text-sm font-medium">{option.label}</span>
-          </label>
-        ))}
-      </div>
-      {error && <p className={errorTextStyles}>{error}</p>}
-    </fieldset>
-  )
+    (
+        {
+            label,
+            idPrefix,
+            name,
+            selectedValue,
+            onChange,
+            options,
+            error,
+            required,
+            ...props
+        },
+        ref
+    ) => (
+        <fieldset className="mb-4 w-full">
+            {label && (
+                <legend className={labelBaseStyles}>
+                    {label}{" "}
+                    {required && (
+                        <span className={requiredIndicatorStyles}>*</span>
+                    )}
+                </legend>
+            )}
+            <div className="flex flex-col space-y-2 mt-2">
+                {options.map((option, index) => (
+                    <label
+                        key={option.value}
+                        className="flex items-center cursor-pointer p-2 rounded-md hover:bg-white/20"
+                    >
+                        <input
+                            type="radio"
+                            id={`${idPrefix}-${option.value}`}
+                            name={name}
+                            value={option.value}
+                            checked={selectedValue === option.value}
+                            onChange={onChange}
+                            className="h-5 w-5 shrink-0 cursor-pointer appearance-none rounded-full border-2 border-slate-900/30 bg-white/20 checked:border-transparent checked:bg-gradient-to-br from-orange-500 to-amber-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white/50 focus:ring-orange-500"
+                            ref={index === 0 ? ref : null}
+                            {...props}
+                        />
+                        <span className="ml-3 text-slate-800 text-sm font-medium">
+                            {option.label}
+                        </span>
+                    </label>
+                ))}
+            </div>
+            {error && <p className={errorTextStyles}>{error}</p>}
+        </fieldset>
+    )
 );
 RadioGroup.displayName = "RadioGroup";
 
-
 const Checkbox = React.forwardRef(
-  ({ label, id, name, checked, onChange, error, required, ...props }, ref) => (
-    <div className="mb-4 flex items-center w-full">
-      <label htmlFor={id} className="flex items-center cursor-pointer p-2 rounded-md hover:bg-white/20">
-        <div className="relative flex items-center h-5 w-5">
-            <input type="checkbox" id={id} name={name} checked={checked} onChange={onChange} className="h-5 w-5 shrink-0 cursor-pointer appearance-none rounded-md border-2 border-slate-900/30 bg-white/20 checked:border-transparent checked:bg-gradient-to-br from-orange-500 to-amber-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white/50 focus:ring-orange-500" ref={ref} {...props} />
-            {checked && <Check className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 h-4 w-4 text-white pointer-events-none" />}
+    (
+        { label, id, name, checked, onChange, error, required, ...props },
+        ref
+    ) => (
+        <div className="mb-4 flex items-center w-full">
+            <label
+                htmlFor={id}
+                className="flex items-center cursor-pointer p-2 rounded-md hover:bg-white/20"
+            >
+                <div className="relative flex items-center h-5 w-5">
+                    <input
+                        type="checkbox"
+                        id={id}
+                        name={name}
+                        checked={checked}
+                        onChange={onChange}
+                        className="h-5 w-5 shrink-0 cursor-pointer appearance-none rounded-md border-2 border-slate-900/30 bg-white/20 checked:border-transparent checked:bg-gradient-to-br from-orange-500 to-amber-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white/50 focus:ring-orange-500"
+                        ref={ref}
+                        {...props}
+                    />
+                    {checked && (
+                        <Check className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 h-4 w-4 text-white pointer-events-none" />
+                    )}
+                </div>
+                <span className="ml-3 text-slate-800 text-sm font-medium">
+                    {label}
+                </span>
+                {required && (
+                    <span className={cn(requiredIndicatorStyles, "ml-1")}>
+                        *
+                    </span>
+                )}
+            </label>
+            {error && (
+                <p id={`${id}-error`} className={errorTextStyles}>
+                    {error}
+                </p>
+            )}
         </div>
-        <span className="ml-3 text-slate-800 text-sm font-medium">{label}</span>
-        {required && <span className={cn(requiredIndicatorStyles, "ml-1")}>*</span>}
-      </label>
-      {error && <p id={`${id}-error`} className={errorTextStyles}>{error}</p>}
-    </div>
-  )
+    )
 );
 Checkbox.displayName = "Checkbox";
 
-
-export { Input, SingleSelectDropdown, MultiSelectDropdown, DatePicker, FileUpload, RadioGroup, Checkbox };
\ No newline at end of file
+export {
+    Input,
+    SingleSelectDropdown,
+    MultiSelectDropdown,
+    DatePicker,
+    FileUpload,
+    RadioGroup,
+    Checkbox,
+};
diff --git a/AppUi/src/pages/auth/Login.jsx b/AppUi/src/pages/auth/Login.jsx
index 1840a81..206f78d 100644
--- a/AppUi/src/pages/auth/Login.jsx
+++ b/AppUi/src/pages/auth/Login.jsx
@@ -1,43 +1,98 @@
+import { useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { login, logout } from "../../store/slices/authSlice";
+import { login } from "../../store/slices/authSlice";
 import { useNavigate } from "react-router-dom";
+import Button from "../../components/common/Buttons/ButtonComponent";
+import { Input } from "../../components/common/Form/FormComponents";
 import { ROLES } from "../../utils/constants/roles";
 import { ADMIN_PATH } from "../../routes/admin/AdminPaths";
-import Button from "../../components/common/Buttons/ButtonComponent";
 
 const LoginPage = () => {
-  const dispath = useDispatch();
-  const navigate = useNavigate();
-  const { isAuthenticated, role } = useSelector((state) => state.auth);
-
-  const handleLogin = () => {
-    dispath(
-      login({
-        user: { name: "Ayush" },
-        role: ROLES.ADMIN,
-      })
+    const dispatch = useDispatch();
+    const navigate = useNavigate();
+
+    const [email, setEmail] = useState("");
+    const [password, setPassword] = useState("");
+    const [error, setError] = useState("");
+    const { isLoading } = useSelector((state) => state.auth);
+
+    const handleLogin = async () => {
+        setError("");
+
+        if (!email || !password) {
+            setError("Email and password are required");
+            return;
+        }
+
+        try {
+            await dispatch(
+                login({
+                    user: { name: "Mock User", email },
+                    role: ROLES.ADMIN,
+                })
+            );
+            navigate(ADMIN_PATH.DASHBOARD);
+        } catch (err) {
+            setError("Login failed. Please try again.");
+        }
+    };
+
+    return (
+        <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-500 via-blue-400 to-purple-400">
+            <div className="bg-white/20 backdrop-blur-md border border-white/30 rounded-3xl shadow-2xl p-12 w-full max-w-md">
+                <h2 className="text-4xl font-light text-center mb-12 tracking-[0.2em] text-white">
+                    LOGIN
+                </h2>
+                <div className="space-y-6">
+                    <div
+                        className="[&_.light-glass-input]:bg-white/10 [&_.light-glass-input]:backdrop-blur-sm [&_.light-glass-input]:border-white/20 [&_.light-glass-input]:text-white [&_.light-glass-input]:px-6 [&_.light-glass-input]:py-4 [&_.light-glass-input]:rounded-2xl
+                    [&_.light-glass-pane]:rounded-2xl [&_.light-glass-input]:h-auto [&_.light-glass-input]:placeholder-white/60 [&_.light-glass-input]:focus:outline-none [&_.light-glass-input]:focus:ring-2 [&_.light-glass-input]:focus:ring-white/30 [&_.light-glass-input]:focus:border-white/40 [&_.light-glass-input]:transition-all [&_.light-glass-input]:duration-200 [&_.light-glass-input]:border [&_.light-glass-pane]:bg-transparent [&_label]:hidden [&_.text-red-600]:text-red-100 [&_button[type='button']]:text-white/60 [&_button[type='button']:hover]:text-white"
+                    >
+                        <Input
+                            type="email"
+                            placeholder="Email"
+                            value={email}
+                            onChange={(e) => setEmail(e.target.value)}
+                            id="email"
+                            name="email"
+                        />
+                    </div>
+
+                    <div className="[&_.light-glass-input]:bg-white/10 [&_.light-glass-pane]:rounded-2xl [&_.light-glass-input]:backdrop-blur-sm [&_.light-glass-input]:border-white/20 [&_.light-glass-input]:text-white [&_.light-glass-input]:px-6 [&_.light-glass-input]:py-4 [&_.light-glass-input]:rounded-2xl [&_.light-glass-input]:h-auto [&_.light-glass-input]:placeholder-white/60 [&_.light-glass-input]:focus:outline-none [&_.light-glass-input]:focus:ring-2 [&_.light-glass-input]:focus:ring-white/30 [&_.light-glass-input]:focus:border-white/40 [&_.light-glass-input]:transition-all [&_.light-glass-input]:duration-200 [&_.light-glass-input]:border [&_.light-glass-pane]:bg-transparent [&_label]:hidden [&_.text-red-600]:text-red-100 [&_button[type='button']]:text-white/60 [&_button[type='button']:hover]:text-white [&_button[type='button']:focus]:!ring-transparent [&_button[type='button']:focus]:!ring-0">
+                        <Input
+                            type="password"
+                            placeholder="Password"
+                            value={password}
+                            onChange={(e) => setPassword(e.target.value)}
+                            id="password"
+                            name="password"
+                        />
+                    </div>
+
+                    {error && (
+                        <p className="text-red-100 text-sm text-center">
+                            {error}
+                        </p>
+                    )}
+                    <div className="text-right">
+                        <button
+                            type="button"
+                            className="text-white/70 hover:text-white text-sm transition-colors duration-200 bg-transparent border-none cursor-pointer"
+                        >
+                            Forgot password?
+                        </button>
+                    </div>
+                    <Button
+                        onClick={handleLogin}
+                        disabled={isLoading}
+                        className="cursor-pointer w-full py-4 mt-1 rounded-2xl bg-gradient-to-r from-blue-500 to-blue-600 text-white font-medium text-lg shadow-lg hover:shadow-xl hover:from-blue-600 hover:to-blue-700 transform hover:scale-[1.02] transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none"
+                    >
+                        {isLoading ? "Logging in..." : "Login"}
+                    </Button>
+                </div>
+            </div>
+        </div>
     );
-    navigate(ADMIN_PATH.DASHBOARD);
-  };
-
-  const handleLogout = () => {
-    dispath(logout());
-  };
-
-  return (
-    <div>
-      <h2>Login Page</h2>
-      <p>Staus: {isAuthenticated ? `Logged in as ${role}` : "Not Logged In"}</p>
-      <Button variant="primary" onClick={handleLogin}>
-        Login as Admin
-      </Button>
-      <div />
-      <Button variant="secondary" onClick={handleLogout}>
-        Logout
-      </Button>
-      <div />
-    </div>
-  );
 };
 
 export default LoginPage;
diff --git a/AppUi/src/pages/landing.jsx b/AppUi/src/pages/landing.jsx
index c94d3b1..d1d1314 100644
--- a/AppUi/src/pages/landing.jsx
+++ b/AppUi/src/pages/landing.jsx
@@ -1,21 +1,20 @@
 import React from "react";
 import Button from "../components/common/Buttons/ButtonComponent";
-import { useDispatch } from "react-redux";
-import { showToast } from "../store/slices/toastSlice";
+import { useNavigate } from "react-router-dom";
 
 export default function Landing() {
-  const dispatch = useDispatch();
-  const btnHandle = () => {
-    dispatch(showToast({ 
-        message: "Login Successful!", 
-        type: "success" }));
-  };
-  return (
-    <div>
-      Landing Page. <br/>
-      <Button variant="secondary" onClick={btnHandle}>
-        Login
-      </Button>
-    </div>
-  );
+    const navigate = useNavigate();
+
+    const handleLoginRedirect = () => {
+        navigate("/login");
+    };
+
+    return (
+        <div>
+            Landing Page. <br />
+            <Button variant="secondary" onClick={handleLoginRedirect}>
+                Login
+            </Button>
+        </div>
+    );
 }
diff --git a/AppUi/src/store/slices/authSlice.jsx b/AppUi/src/store/slices/authSlice.jsx
index 52c61e4..9c2e44f 100644
--- a/AppUi/src/store/slices/authSlice.jsx
+++ b/AppUi/src/store/slices/authSlice.jsx
@@ -1,28 +1,70 @@
-import { createSlice } from "@reduxjs/toolkit"
+import { createSlice } from "@reduxjs/toolkit";
 import { ROLES } from "../../utils/constants/roles";
 
 const initialState = {
     isAuthenticated: false,
     role: ROLES.GUEST,
     user: null,
-}
+    isLoading: false,
+    error: null,
+};
 
 const authSlice = createSlice({
-    name: 'auth',
+    name: "auth",
     initialState,
     reducers: {
-        login: (state, action) => {
+        loginStart: (state) => {
+            state.isLoading = true;
+            state.error = null;
+        },
+        loginSuccess: (state, action) => {
             state.isAuthenticated = true;
             state.user = action.payload.user;
             state.role = action.payload.role;
+            state.isLoading = false;
+            state.error = null;
+        },
+        loginFailure: (state, action) => {
+            state.isAuthenticated = false;
+            state.user = null;
+            state.role = ROLES.GUEST;
+            state.isLoading = false;
+            state.error = action.payload || "Login failed";
         },
-        logout: (state, action) => {
+        logout: (state) => {
             state.isAuthenticated = false;
             state.user = null;
             state.role = ROLES.GUEST;
+            state.isLoading = false;
+            state.error = null;
         },
     },
 });
 
-export const {login, logout} = authSlice.actions;
-export default authSlice.reducer;
\ No newline at end of file
+// Async login action (mocked)
+export const login = (credentials) => async (dispatch) => {
+    try {
+        dispatch(loginStart());
+
+        // Simulating API delay here for testing
+        await new Promise((resolve) => setTimeout(resolve, 15000));
+
+        // You can add email/password validation here if needed
+        dispatch(
+            loginSuccess({
+                user: {
+                    name: credentials.user.name,
+                    email: credentials.user.email,
+                },
+                role: credentials.role || ROLES.USER,
+            })
+        );
+    } catch (error) {
+        dispatch(loginFailure("Something went wrong during login."));
+    }
+};
+
+export const { loginStart, loginSuccess, loginFailure, logout } =
+    authSlice.actions;
+
+export default authSlice.reducer;