diff --git a/src/ExecutionSimulator.tsx b/src/ExecutionSimulator.tsx
index 4e365de..c99b422 100644
--- a/src/ExecutionSimulator.tsx
+++ b/src/ExecutionSimulator.tsx
@@ -10,13 +10,25 @@ import { Button } from '@/components/ui/button';
 import { Play, Pause, BookOpen } from 'lucide-react';
 import { CanvasTimeline, TimelineEvent, PatternType } from './CanvasTimeline';
 import { DocsModal } from './DocsModal';
-import { GithubIcon } from '@/components/GithubIcon';
+import { StrategyConfig, StrategyConfiguration } from './StrategyConfig';
+import { GithubIcon } from "@/components/GithubIcon";
+
+const DEFAULT_STRATEGY_CONFIG: StrategyConfiguration = {
+  debounceWait: 500,
+  throttleWait: 500,
+  rateLimitCount: 3,
+  rateLimitWindow: 2000,
+  batchMaxSize: 5,
+  batchMaxWait: 1000,
+  queueConcurrency: 1,
+};
 
 export function ExecutionSimulator() {
   const [events, setEvents] = useState<TimelineEvent[]>([]);
   const [windowMs, setWindowMs] = useState(6000);
   const [isPaused, setIsPaused] = useState(false);
   const [showDoc, setShowDoc] = useState(false);
+  const [strategyConfig, setStrategyConfig] = useState<StrategyConfiguration>(DEFAULT_STRATEGY_CONFIG);
 
   // Refs for tracking pause duration offsets
   const isPausedRef = useRef(isPaused);
@@ -49,19 +61,19 @@ export function ExecutionSimulator() {
   // 1. Debounce
   const handleDebounce = useDebouncedCallback(
     useCallback((tTime?: number) => logEvent('debounce', tTime), [logEvent]), 
-    { wait: 500 }
+    { wait: strategyConfig.debounceWait }
   );
 
   // 2. Throttle
   const handleThrottle = useThrottledCallback(
     useCallback((tTime?: number) => logEvent('throttle', tTime), [logEvent]), 
-    { wait: 500 }
+    { wait: strategyConfig.throttleWait }
   );
 
   // 3. Rate Limit
   const handleRateLimit = useRateLimitedCallback(
     useCallback((tTime?: number) => logEvent('rateLimit', tTime), [logEvent]), 
-    { limit: 3, window: 2000 }
+    { limit: strategyConfig.rateLimitCount, window: strategyConfig.rateLimitWindow }
   );
 
   // 4. Queue
@@ -77,7 +89,7 @@ export function ExecutionSimulator() {
     await new Promise(resolve => setTimeout(resolve, 400)); 
   }, [logEvent]);
   
-  const handleQueue = useAsyncQueuer(processQueue, { concurrency: 1, started: true });
+  const handleQueue = useAsyncQueuer(processQueue, { concurrency: strategyConfig.queueConcurrency, started: true });
 
   // 5. Batch
   const processBatch = useCallback(async (items: string[]) => {
@@ -93,7 +105,11 @@ export function ExecutionSimulator() {
     logEvent('batch', tTime);
   }, [logEvent]);
 
-  const handleBatch = useBatcher(processBatch, { maxSize: 5, wait: 1000, started: true });
+  const handleBatch = useBatcher(processBatch, {
+    maxSize: strategyConfig.batchMaxSize,
+    wait: strategyConfig.batchMaxWait,
+    started: true,
+  });
 
   // The Master Trigger
   const triggerAll = () => {
@@ -126,7 +142,8 @@ export function ExecutionSimulator() {
               Execution Timing Simulator
             </h1>
             <p className="text-zinc-400 text-sm">
-              Click rapidly to see how different architectural patterns handle high-frequency events.
+              Click rapidly to see how different architectural patterns handle
+              high-frequency events.
             </p>
           </div>
 
@@ -142,7 +159,7 @@ export function ExecutionSimulator() {
               <span>GitHub</span>
             </a>
 
-            <Button 
+            <Button
               onClick={() => setShowDoc(true)}
               className="cursor-pointer bg-teal-950/40 hover:bg-teal-900/60 border border-teal-500/40 hover:border-teal-400 text-teal-300 hover:text-white px-4 py-2.5 rounded-xl shadow-lg transition-all flex items-center gap-2 text-sm font-semibold"
             >
@@ -154,21 +171,21 @@ export function ExecutionSimulator() {
 
         <div className="grid grid-cols-1 md:grid-cols-4 gap-6 md:items-stretch">
           {/* Controls Panel */}
-          <div className="md:col-span-1 flex flex-col h-full">
-            <div className="bg-zinc-900 border border-zinc-800 p-6 rounded-xl shadow-lg flex flex-col justify-between flex-1 h-full">
+          <div className="md:col-span-1 relative flex flex-col">
+            <div className="bg-zinc-900 border border-zinc-800 p-6 rounded-xl shadow-lg flex flex-col flex-1 overflow-y-auto md:absolute md:inset-0">
               <div>
                 <h2 className="text-sm font-semibold text-zinc-300 uppercase tracking-wider mb-4">
                   Controls
                 </h2>
-                
-                <Button 
+
+                <Button
                   onClick={triggerAll}
                   className="cursor-pointer w-full h-16 text-lg font-bold bg-teal-600 hover:bg-teal-500 active:scale-95 transition-all shadow-teal-900/20 shadow-xl mb-4"
                 >
                   Trigger Event
                 </Button>
 
-                <Button 
+                <Button
                   onClick={() => {
                     setIsPaused((prev) => {
                       const next = !prev;
@@ -179,7 +196,8 @@ export function ExecutionSimulator() {
                       } else {
                         // Accumulate the elapsed pause duration before resuming
                         if (pausedTimeRef.current !== null) {
-                          totalPausedDurationRef.current += Date.now() - pausedTimeRef.current;
+                          totalPausedDurationRef.current +=
+                            Date.now() - pausedTimeRef.current;
                           pausedTimeRef.current = null;
                         }
                       }
@@ -187,8 +205,8 @@ export function ExecutionSimulator() {
                     });
                   }}
                   className={`w-full h-12 text-sm font-semibold transition-all mb-4 gap-2 flex items-center justify-center cursor-pointer ${
-                    isPaused 
-                      ? "bg-amber-600 hover:bg-amber-500 text-white shadow-amber-900/20 shadow-xl border border-transparent" 
+                    isPaused
+                      ? "bg-amber-600 hover:bg-amber-500 text-white shadow-amber-900/20 shadow-xl border border-transparent"
                       : "border border-zinc-700 hover:bg-zinc-800 text-white bg-transparent"
                   }`}
                 >
@@ -204,8 +222,8 @@ export function ExecutionSimulator() {
                     </>
                   )}
                 </Button>
-                
-                <Button 
+
+                <Button
                   onClick={() => setEvents([])}
                   variant="outline"
                   className="w-full border-zinc-700 hover:bg-zinc-300 text-zinc-900 cursor-pointer"
@@ -223,12 +241,12 @@ export function ExecutionSimulator() {
                       {windowMs / 1000}s
                     </span>
                   </div>
-                  <input 
-                    type="range" 
-                    min="2000" 
-                    max="15000" 
+                  <input
+                    type="range"
+                    min="2000"
+                    max="15000"
                     step="1000"
-                    value={windowMs} 
+                    value={windowMs}
                     onChange={(e) => setWindowMs(Number(e.target.value))}
                     className="w-full accent-teal-500 cursor-pointer"
                   />
@@ -236,11 +254,19 @@ export function ExecutionSimulator() {
                     Adjust how much history is visible on screen.
                   </p>
                 </div>
+
+                {/* Strategy Configuration */}
+                <div className="mt-8">
+                  <StrategyConfig
+                    config={strategyConfig}
+                    onChange={setStrategyConfig}
+                  />
+                </div>
               </div>
 
               {/* Sidebar Secondary Resource Buttons */}
               <div className="mt-8 pt-6 border-t border-zinc-800/80 space-y-3">
-                <Button 
+                <Button
                   onClick={() => setShowDoc(true)}
                   className="w-full bg-teal-950/30 hover:bg-teal-900/50 border border-teal-800/60 hover:border-teal-500/60 text-teal-300 hover:text-white cursor-pointer flex items-center justify-center gap-2 h-11 text-xs font-semibold rounded-xl transition-all shadow-sm"
                 >
@@ -262,10 +288,10 @@ export function ExecutionSimulator() {
           </div>
 
           {/* Timeline Visualization Panel */}
-          <div className="md:col-span-3 flex flex-col h-full">
-            <CanvasTimeline 
-              events={events} 
-              windowMs={windowMs} 
+          <div className="md:col-span-3 flex flex-col">
+            <CanvasTimeline
+              events={events}
+              windowMs={windowMs}
               isPaused={isPaused}
               pausedTimeRef={pausedTimeRef}
               totalPausedDurationRef={totalPausedDurationRef}
@@ -277,7 +303,7 @@ export function ExecutionSimulator() {
       {/* Footer */}
       <footer className="mt-12 pt-6 border-t border-zinc-800 flex flex-col sm:flex-row items-center justify-between gap-4 text-sm text-zinc-500">
         <p>
-          Made with love by{' '}
+          Made with love by{" "}
           <a
             href="https://youtube.com/@tapasadhikary"
             target="_blank"
@@ -298,11 +324,9 @@ export function ExecutionSimulator() {
           <span>Star & Contribute on GitHub</span>
         </a>
       </footer>
-      {
-        showDoc && (
-          <DocsModal isOpen={showDoc} onClose={() => setShowDoc(false)} />
-        )
-      }
+      {showDoc && (
+        <DocsModal isOpen={showDoc} onClose={() => setShowDoc(false)} />
+      )}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/StrategyConfig.tsx b/src/StrategyConfig.tsx
new file mode 100644
index 0000000..3452ca8
--- /dev/null
+++ b/src/StrategyConfig.tsx
@@ -0,0 +1,186 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
+export interface StrategyConfiguration {
+  debounceWait: number;
+  throttleWait: number;
+  rateLimitCount: number;
+  rateLimitWindow: number;
+  batchMaxSize: number;
+  batchMaxWait: number;
+  queueConcurrency: number;
+}
+
+interface StrategyConfigProps {
+  config: StrategyConfiguration;
+  onChange: (config: StrategyConfiguration) => void;
+}
+
+interface RangeControlProps {
+  label: string;
+  value: number;
+  min: number;
+  max: number;
+  step?: number;
+  unit?: string;
+  onChange: (value: number) => void;
+}
+
+function RangeControl({ label, value, min, max, step = 1, unit = '', onChange }: RangeControlProps) {
+  return (
+    <label className="block space-y-2">
+      <span className="flex items-center justify-between gap-3 text-xs font-medium text-zinc-300">
+        {label}
+        <output className="rounded bg-zinc-800 px-2 py-0.5 font-mono text-teal-300">{value}{unit}</output>
+      </span>
+      <input
+        aria-label={label}
+        className="w-full cursor-pointer accent-teal-500"
+        type="range"
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        onChange={(event) => onChange(Number(event.target.value))}
+      />
+      <span className="flex justify-between text-[10px] text-zinc-500" aria-hidden="true">
+        <span>{min}{unit}</span>
+        <span>{max}{unit}</span>
+      </span>
+    </label>
+  );
+}
+
+export function StrategyConfig({ config, onChange }: StrategyConfigProps) {
+  const update = <K extends keyof StrategyConfiguration>(key: K, value: StrategyConfiguration[K]) => {
+    onChange({ ...config, [key]: value });
+  };
+
+  return (
+    <Card className="w-full border-zinc-800 bg-zinc-950/40 p-4 text-zinc-100 shadow-none">
+      <Accordion defaultValue={[]}>
+        <AccordionItem value="strategy-settings" className="border-b-0">
+          <AccordionTrigger className="py-0 hover:no-underline hover:cursor-pointer">
+            <CardHeader className="flex-1 px-0">
+              <CardTitle className="text-sm font-semibold uppercase tracking-wider text-zinc-300">
+                Strategy settings
+              </CardTitle>
+              <CardDescription>
+                Tune a pattern, then trigger events to see the effect.
+              </CardDescription>
+            </CardHeader>
+          </AccordionTrigger>
+          <AccordionContent className="px-0">
+            <CardContent className="px-0">
+              <Accordion defaultValue={["debounce"]}>
+                <AccordionItem value="debounce">
+                  <AccordionTrigger className="text-zinc-200 hover:text-teal-300 hover:cursor-pointer">
+                    Debounce
+                  </AccordionTrigger>
+                  <AccordionContent className="pt-2">
+                    <RangeControl
+                      label="Wait"
+                      value={config.debounceWait}
+                      min={50}
+                      max={3000}
+                      step={50}
+                      unit="ms"
+                      onChange={(value) => update("debounceWait", value)}
+                    />
+                  </AccordionContent>
+                </AccordionItem>
+                <AccordionItem value="throttle">
+                  <AccordionTrigger className="text-zinc-200 hover:text-teal-300 hover:cursor-pointer">
+                    Throttle
+                  </AccordionTrigger>
+                  <AccordionContent className="pt-2">
+                    <RangeControl
+                      label="Wait"
+                      value={config.throttleWait}
+                      min={50}
+                      max={3000}
+                      step={50}
+                      unit="ms"
+                      onChange={(value) => update("throttleWait", value)}
+                    />
+                  </AccordionContent>
+                </AccordionItem>
+                <AccordionItem value="rate-limit">
+                  <AccordionTrigger className="text-zinc-200 hover:text-teal-300 hover:cursor-pointer">
+                    Rate limit
+                  </AccordionTrigger>
+                  <AccordionContent className="space-y-4 pt-2">
+                    <RangeControl
+                      label="Limit"
+                      value={config.rateLimitCount}
+                      min={1}
+                      max={10}
+                      onChange={(value) => update("rateLimitCount", value)}
+                    />
+                    <RangeControl
+                      label="Window"
+                      value={config.rateLimitWindow}
+                      min={100}
+                      max={5000}
+                      step={100}
+                      unit="ms"
+                      onChange={(value) => update("rateLimitWindow", value)}
+                    />
+                  </AccordionContent>
+                </AccordionItem>
+                <AccordionItem value="batching">
+                  <AccordionTrigger className="text-zinc-200 hover:text-teal-300 hover:cursor-pointer">
+                    Batching
+                  </AccordionTrigger>
+                  <AccordionContent className="space-y-4 pt-2">
+                    <RangeControl
+                      label="Max size"
+                      value={config.batchMaxSize}
+                      min={1}
+                      max={20}
+                      onChange={(value) => update("batchMaxSize", value)}
+                    />
+                    <RangeControl
+                      label="Max wait"
+                      value={config.batchMaxWait}
+                      min={100}
+                      max={5000}
+                      step={100}
+                      unit="ms"
+                      onChange={(value) => update("batchMaxWait", value)}
+                    />
+                  </AccordionContent>
+                </AccordionItem>
+                <AccordionItem value="async-queue">
+                  <AccordionTrigger className="text-zinc-200 hover:text-teal-300 hover:cursor-pointer">
+                    Async queue
+                  </AccordionTrigger>
+                  <AccordionContent className="pt-2">
+                    <RangeControl
+                      label="Concurrency"
+                      value={config.queueConcurrency}
+                      min={1}
+                      max={5}
+                      onChange={(value) => update("queueConcurrency", value)}
+                    />
+                  </AccordionContent>
+                </AccordionItem>
+              </Accordion>
+            </CardContent>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </Card>
+  );
+}
diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx
new file mode 100644
index 0000000..f86cbf8
--- /dev/null
+++ b/src/components/ui/accordion.tsx
@@ -0,0 +1,78 @@
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      className={cn("flex w-full flex-col", className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("not-last:border-b", className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Trigger.Props) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+        />
+        <ChevronUpIcon
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+        />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Panel.Props) {
+  return (
+    <AccordionPrimitive.Panel
+      data-slot="accordion-content"
+      className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
+      {...props}
+    >
+      <div
+        className={cn(
+          "h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+          className,
+        )}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.Panel>
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
new file mode 100644
index 0000000..fe271e8
--- /dev/null
+++ b/src/components/ui/card.tsx
@@ -0,0 +1,103 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Card({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cn(
+        "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn(
+        "cn-font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-(--card-spacing)", className)}
+      {...props}
+    />
+  );
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        "flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+};