diff --git a/app/components/GooeySwitch.tsx b/app/components/GooeySwitch.tsx
index 3a7791b..7c7c08a 100644
--- a/app/components/GooeySwitch.tsx
+++ b/app/components/GooeySwitch.tsx
@@ -11,21 +11,22 @@ const GooeySwitch: React.FC<GooeySwitchProps> = ({
   props,
   state,
 }: GooeySwitchProps) => {
-  const { label, name, defaultChecked, className = "" , ...args } = props;
+  const { label, name, defaultChecked, className = "", size = 'large', ...args } = props;
   const inputRef = useGooeyCheckedInput({
     stateChecked: state[name],
     defaultChecked,
   });
   return (
-    <div className={"d-flex justify-content-between align-items-center container-margin-reset py-2 " + className }>
+    <div className={"d-flex justify-content-between align-items-center container-margin-reset py-2 gooey-switch-container" + className }>
       <RenderedMarkdown body={label} />
-      <div className="gooey-switch-container">
+      <div>
         <input
+          hidden
           ref={inputRef}
           id={name}
           name={name}
           defaultChecked={defaultChecked}
-          className="gooey-switch gooey-switch--shadow"
+          className={`gooey-switch gooey-switch--shadow--${size}`}
           {...args}
           type="checkbox"
         />
diff --git a/app/styles/custom.css b/app/styles/custom.css
index 38c4147..e8f5039 100644
--- a/app/styles/custom.css
+++ b/app/styles/custom.css
@@ -795,16 +795,23 @@ button {
   font: inherit;
 }
 
-.gooey-switch-container h1, h2, h3, h4, h5, h6 {
+/* Reset heading margins */
+.gooey-switch-container p,
+.gooey-switch-container h6,
+.gooey-switch-container h5,
+.gooey-switch-container h4,
+.gooey-switch-container h3,
+.gooey-switch-container h2,
+.gooey-switch-container h1 {
   margin: 0;
 }
 
+/* Hide the actual switch input */
 .gooey-switch {
   visibility: hidden;
-  position: absolute;
-  margin-left: -9999px;
 }
 
+/* Label for the switch */
 .gooey-switch + label {
   display: block;
   position: relative;
@@ -813,38 +820,75 @@ button {
   user-select: none;
 }
 
-.gooey-switch--shadow + label {
-  padding: 2px;
-  width: 48px;
-  height: 24px;
-  background-color: #dddddd;
-  border-radius: 60px;
-}
-.gooey-switch--shadow + label:before,
-.gooey-switch--shadow + label:after {
-  display: block;
+/* Track (background) styles */
+.gooey-switch + label:before {
+  content: "";
   position: absolute;
   top: 1px;
   left: 1px;
   bottom: 1px;
-  content: "";
-}
-.gooey-switch--shadow + label:before {
   right: 1px;
   background-color: #f1f1f1;
-  border-radius: 24px;
+  border-radius: inherit;
   transition: background 0.4s;
 }
-.gooey-switch--shadow + label:after {
-  width: 22px;
+
+/* Ball (knob) styles */
+.gooey-switch + label:after {
+  content: "";
+  position: absolute;
+  top: 1px;
+  left: 1px;
   background-color: #fff;
-  border-radius: 100%;
+  border-radius: 50%;
   box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
   transition: all 0.2s;
 }
-.gooey-switch--shadow:checked + label:before {
-  background-color: #02c4c8 !important;
+
+/* Checked state */
+.gooey-switch:checked + label:before {
+  background-color: #02c4c8;
+}
+
+/* Large Variant */
+.gooey-switch--shadow--large + label {
+  width: 48px;
+  height: 24px;
+  background-color: #ddd;
+  border-radius: 60px;
+  padding: 2px;
+}
+.gooey-switch--shadow--large + label:after {
+  width: 22px;
+  height: 22px;
+  transition: transform 0.2s ease;
 }
-.gooey-switch--shadow:checked + label:after {
+.gooey-switch--shadow--large:checked + label:after {
   transform: translateX(24px);
 }
+
+/* Small Variant */
+.gooey-switch--shadow--small + label {
+  width: 36px;
+  height: 20px;
+  background-color: #ddd;
+  border-radius: 30px;
+  padding: 1px;
+}
+.gooey-switch--shadow--small + label:after {
+  width: 18px;
+  height: 18px;
+  transition: transform 0.2s ease;
+}
+.gooey-switch--shadow--small:checked + label:after {
+  transform: translateX(16px);
+}
+
+/* Cross-browser support (vendor prefixes) */
+.gooey-switch + label:before, 
+.gooey-switch + label:after {
+  -webkit-transition: all 0.2s ease;
+  -moz-transition: all 0.2s ease;
+  -o-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+}
diff --git a/py/gooey_gui/components/common.py b/py/gooey_gui/components/common.py
index 8eec8a1..074156b 100644
--- a/py/gooey_gui/components/common.py
+++ b/py/gooey_gui/components/common.py
@@ -1052,6 +1052,7 @@ def switch(
     help: str = None,
     *,
     disabled: bool = False,
+    size: str = "large",
     label_visibility: LabelVisibility = "visible",
     **props,
 ) -> bool:
@@ -1068,6 +1069,7 @@ def switch(
             "defaultChecked": value,
             "help": help,
             "disabled": disabled,
+            "size": size,
             **props,
         },
     ).mount()