diff --git a/components/KernDropdown.tsx b/components/KernDropdown.tsx
index 6279d8d..7f4e8d3 100644
--- a/components/KernDropdown.tsx
+++ b/components/KernDropdown.tsx
@@ -84,6 +84,7 @@ export default function KernDropdown(props: KernDropdownProps) {
             case "bottom": return "-translate-x-1/2 left-1/2 top-full";
             case "left": return "-translate-y-1/2 top-1/2 right-full";
             case "right": return "-translate-y-1/2 top-1/2 left-full";
+            case "leftBottom": return "top-3/4 right-full";
         }
     }, [props.positionDropdown]);
 
diff --git a/components/SVGIcon.tsx b/components/SVGIcon.tsx
index 84dfb63..63d7f17 100644
--- a/components/SVGIcon.tsx
+++ b/components/SVGIcon.tsx
@@ -1,64 +1,66 @@
 import { IconHammer, IconSettingsFilled, IconZoomIn, IconZoomOut } from '@tabler/icons-react';
-import { MemoIconBolt, MemoIconChevronDown, MemoIconCode, MemoIconDotsVertical, MemoIconEdit, MemoIconExternalLink, MemoIconFileInfo, MemoIconFilePencil, MemoIconLoader, MemoIconPlayerPlayFilled, MemoIconPlus, MemoIconSettings, MemoIconShieldCheckFilled, MemoIconShieldFilled, MemoIconSquare, MemoIconSquareCheck, MemoIconTrash } from './kern-icons/icons';
+import { MemoIconBolt, MemoIconChevronDown, MemoIconCode, MemoIconDotsVertical, MemoIconEdit, MemoIconExternalLink, MemoIconFileInfo, MemoIconFilePencil, MemoIconLoader, MemoIconPlayerPlayFilled, MemoIconPlus, MemoIconSettings, MemoIconShieldCheckFilled, MemoIconShieldFilled, MemoIconSquare, MemoIconSquareCheck, MemoIconTag, MemoIconTrash } from './kern-icons/icons';
 
 export const SUPPORTED_ICONS = ['IconCode', 'IconBolt', 'IconSquareCheck', 'IconSquare', 'IconPlayerPlayFilled', 'IconTrash', 'IconExternalLink',
     'IconLoader', 'IconFilePencil', 'IconFileInfo', 'IconEdit', 'IconShieldFilled', 'IconShieldCheckFilled', 'IconPlus', 'IconSettings', 'IconSettingsFilled',
-    'IconHammer', 'IconZoomIn', 'IconZoomOut'
-
+    'IconHammer', 'IconZoomIn', 'IconZoomOut', 'IconTag'
 ]
 
 type SVGIconProps = {
     icon: string,
     size?: number,
     strokeWidth?: number,
-    useFillForIcons?: boolean
+    useFillForIcons?: boolean,
+    addClasses?: string
 }
 
 export default function SVGIcon(props: SVGIconProps) {
     switch (props.icon) {
+        case 'IconTag':
+            return <MemoIconTag size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''} ${props.addClasses}`} />
         case 'IconCode':
-            return <MemoIconCode size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconCode size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''} ${props.addClasses}`} />
         case 'IconBolt':
-            return <MemoIconBolt size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconBolt size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''} ${props.addClasses}`} />
         case 'IconSquareCheck':
-            return <MemoIconSquareCheck size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconSquareCheck size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''} ${props.addClasses}`} />
         case 'IconSquare':
-            return <MemoIconSquare size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconSquare size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''} ${props.addClasses}`} />
         case 'IconPlayerPlayFilled':
-            return <MemoIconPlayerPlayFilled size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconPlayerPlayFilled size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''} ${props.addClasses}`} />
         case 'IconTrash':
-            return <MemoIconTrash size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconTrash size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''} ${props.addClasses}`} />
         case 'IconExternalLink':
-            return <MemoIconExternalLink size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconExternalLink size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''} ${props.addClasses}`} />
         case 'IconChevronDown':
-            return <MemoIconChevronDown size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconChevronDown size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''} ${props.addClasses}`} />
         case 'IconDotsVertical':
-            return <MemoIconDotsVertical size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconDotsVertical size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''} ${props.addClasses}`} />
         case 'IconLoader':
-            return <MemoIconLoader size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconLoader size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''} ${props.addClasses}`} />
         case 'IconFilePencil':
-            return <MemoIconFilePencil size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconFilePencil size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''} ${props.addClasses}`} />
         case 'IconFileInfo':
-            return <MemoIconFileInfo size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconFileInfo size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''} ${props.addClasses}`} />
         case 'IconEdit':
-            return <MemoIconEdit size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconEdit size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''} ${props.addClasses}`} />
         case 'IconShieldFilled':
-            return <MemoIconShieldFilled size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconShieldFilled size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''} ${props.addClasses}`} />
         case 'IconShieldCheckFilled':
-            return <MemoIconShieldCheckFilled size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconShieldCheckFilled size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''} ${props.addClasses}`} />
         case 'IconPlus':
-            return <MemoIconPlus size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconPlus size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''} ${props.addClasses}`} />
         case 'IconSettings':
-            return <MemoIconSettings size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconSettings size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''} ${props.addClasses}`} />
         case 'IconSettingsFilled':
-            return <IconSettingsFilled size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <IconSettingsFilled size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''} ${props.addClasses}`} />
         case 'IconHammer':
-            return <IconHammer size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <IconHammer size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''} ${props.addClasses}`} />
         case 'IconZoomIn':
-            return <IconZoomIn size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <IconZoomIn size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''} ${props.addClasses}`} />
         case 'IconZoomOut':
-            return <IconZoomOut size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
-        default: return <MemoIconLoader size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <IconZoomOut size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''} ${props.addClasses}`} />
+        default: return <MemoIconLoader size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''} ${props.addClasses}`} />
     }
 
 }
\ No newline at end of file
diff --git a/components/SwitchWithLabel.tsx b/components/SwitchWithLabel.tsx
new file mode 100644
index 0000000..b6e386b
--- /dev/null
+++ b/components/SwitchWithLabel.tsx
@@ -0,0 +1,51 @@
+import { combineClassNames } from "@/submodules/javascript-functions/general";
+import { Switch } from "@headlessui/react";
+import { Tooltip } from "@nextui-org/react";
+import { useMemo } from "react";
+import { MemoIconAlertCircle, MemoIconAlertTriangle } from "./kern-icons/icons";
+
+
+type Props = {
+    checked: boolean;
+    onChange: () => void;
+    label: string;
+    colorLabel?: string;
+    colorActive?: string;
+    colorInactive?: string;
+    addClassesGroup?: string;
+    tooltip?: string;
+}
+
+export default function SwitchWithLabel(props: Props) {
+
+    const finalColorActive = props.colorActive || 'bg-green-600';
+    const finalColorInactive = props.colorInactive || 'bg-gray-200';
+    const finalColorLabel = props.colorLabel || 'text-gray-700';
+
+    const tooltip = useMemo(() => props.tooltip ? <Tooltip content={props.tooltip} color="invert" placement="top"><MemoIconAlertTriangle className="w-6 h-6" /></Tooltip> : null, [props.tooltip])
+
+    return <Switch.Group as="div" className={combineClassNames("flex items-center justify-between", props.addClassesGroup)}>
+        <Switch.Description as="span" className={`font-medium ${finalColorLabel}`}>
+            {props.label}
+        </Switch.Description>
+        <div className="flex flex-row gap-x-2 items-center">
+            <Switch
+                checked={props.checked}
+                onChange={props.onChange}
+                className={combineClassNames(
+                    props.checked ? finalColorActive : finalColorInactive,
+                    'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-green-600 focus:ring-offset-2'
+                )}
+            >
+                <span
+                    aria-hidden="true"
+                    className={combineClassNames(
+                        props.checked ? 'translate-x-5' : 'translate-x-0',
+                        'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out'
+                    )}
+                />
+            </Switch>
+            {tooltip}
+        </div>
+    </Switch.Group>
+}
\ No newline at end of file
diff --git a/types/dropdown.ts b/types/dropdown.ts
index 75a7fb6..cef95d6 100644
--- a/types/dropdown.ts
+++ b/types/dropdown.ts
@@ -89,7 +89,7 @@ export type KernDropdownProps = {
     fontSizeClass?: string;
     filteredOptions?: (option: string) => void;
     ignoreDisabledForSearch?: boolean;
-    positionDropdown?: "top" | "bottom" | "left" | "right";
+    positionDropdown?: "top" | "bottom" | "left" | "right" | "leftBottom";
     scrollAfterNOptions?: number;
     dropdownAdd?: JSX.Element[];
     forceOverwriteOpen?: boolean;