diff --git a/examples/responsive-app/assets/img/866-1024x1024.jpg b/examples/responsive-app/assets/img/866-1024x1024.jpg
new file mode 100644
index 000000000..80cee2b47
Binary files /dev/null and b/examples/responsive-app/assets/img/866-1024x1024.jpg differ
diff --git a/examples/responsive-app/index.css b/examples/responsive-app/index.css
new file mode 100644
index 000000000..37b2c80e1
--- /dev/null
+++ b/examples/responsive-app/index.css
@@ -0,0 +1,8 @@
+body,
+html {
+    margin: 0;
+    padding: 0;
+    font-family: -apple-system, Roboto, sans-serif;
+    background-color: #fafafa;
+    min-width: 320px;
+}
diff --git a/examples/responsive-app/index.html b/examples/responsive-app/index.html
new file mode 100644
index 000000000..510a0e5e5
--- /dev/null
+++ b/examples/responsive-app/index.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+    <head>
+        <title>Responsive App Demo</title>
+        <link rel="stylesheet" href="index.css" />
+    </head>
+    <body>
+        <script src="../../montage.js"></script>
+        <script type="text/mod-serialization">
+        {
+            "owner": {
+                "prototype": "mod/ui/loader.mod"
+            }
+        }
+        </script>
+    </head>
+    <body>
+        <span class="loading"></span>
+    </body>
+</html>
diff --git a/examples/responsive-app/package.json b/examples/responsive-app/package.json
new file mode 100644
index 000000000..ce7a5791c
--- /dev/null
+++ b/examples/responsive-app/package.json
@@ -0,0 +1,10 @@
+{
+    "name": "responsive-app",
+    "version": "1.0.0",
+    "dependencies": {
+        "mod": "*"
+    },
+    "mappings": {
+        "mod": "../../"
+    }
+}
diff --git a/examples/responsive-app/ui/footer.mod/footer.css b/examples/responsive-app/ui/footer.mod/footer.css
new file mode 100644
index 000000000..39a4ffcc5
--- /dev/null
+++ b/examples/responsive-app/ui/footer.mod/footer.css
@@ -0,0 +1,5 @@
+.Footer {
+    display: flex;
+    flex-direction: row;
+    gap: 16px;
+}
diff --git a/examples/responsive-app/ui/footer.mod/footer.html b/examples/responsive-app/ui/footer.mod/footer.html
new file mode 100644
index 000000000..7385700d2
--- /dev/null
+++ b/examples/responsive-app/ui/footer.mod/footer.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html>
+    <head>
+        <link rel="stylesheet" href="footer.css" />
+        <script type="text/mod-serialization">
+            {
+                "owner": {
+                    "values": {
+                        "element": {"#": "owner"}
+                    }
+                },
+                "button": {
+                    "prototype": "mod/ui/button.mod",
+                    "values": {
+                        "element": {"#": "button"},
+                        "label": "Click Me"
+                    }
+                },
+                "dangerButton": {
+                    "prototype": "mod/ui/button.mod",
+                    "values": {
+                        "visualStyle": {"@": "dangerVisualStyle"},
+                        "element": {"#": "dangerButton"},
+                        "label": "Delete"
+                    }
+                },
+                "dangerVisualStyle": {
+                    "prototype": "mod/ui/visual-style.mod",
+                    "values": {
+                        "raisedSurfaceFill": "rgba(220, 53, 69, 1)",
+                        "controlBorderWidth": "0px",
+                        "textFill": "rgba(255, 255, 255, 1)",
+                        "_FIXME": "Visual-style properties should be inherited from the closest ancestor with a visual style. @see controlBorderRadius from footerVisualStyle in main.mod/main.html"
+                    }
+                }
+            }
+        </script>
+    </head>
+    <body>
+        <footer data-mod-id="owner" class="Footer">
+            <div data-mod-id="button" class="Footer-button"></div>
+            <div data-mod-id="dangerButton" class="Footer-dangerButton"></div>
+        </footer>
+    </body>
+</html>
diff --git a/examples/responsive-app/ui/footer.mod/footer.js b/examples/responsive-app/ui/footer.mod/footer.js
new file mode 100644
index 000000000..47e4fc3b7
--- /dev/null
+++ b/examples/responsive-app/ui/footer.mod/footer.js
@@ -0,0 +1,10 @@
+/**
+ * @module "ui/footer.mod"
+ */
+const Component = require("mod/ui/component").Component;
+
+/**
+ * @class Footer
+ * @extends Component
+ */
+exports.Footer = class Footer extends Component {};
diff --git a/examples/responsive-app/ui/list-item.mod/list-item.css b/examples/responsive-app/ui/list-item.mod/list-item.css
new file mode 100644
index 000000000..f0e33a65c
--- /dev/null
+++ b/examples/responsive-app/ui/list-item.mod/list-item.css
@@ -0,0 +1,43 @@
+.ListItem {
+    display: flex;
+    flex-direction: column;
+    padding: 8px 12px;
+    border-bottom: 1px solid #eee;
+    background-color: #f9f9f9;
+    gap: 8px;
+
+    .ListItem-title {
+        font-weight: bold;
+        flex: 0 0 150px;
+    }
+
+    .ListItem-description {
+        color: #666;
+        font-size: 0.9rem;
+        flex: 1;
+    }
+
+    @container (min-width: 400px) {
+        gap: 16px;
+        padding: 12px 16px;
+
+        .ListItem-description {
+            font-size: 0.95rem;
+        }
+    }
+
+    @container (min-width: 600px) {
+        flex-direction: row;
+        align-items: center;
+        gap: 24px;
+        padding: 16px 24px;
+
+        .ListItem-title {
+            font-size: 1.2rem;
+        }
+
+        .ListItem-description {
+            font-size: 1rem;
+        }
+    }
+}
diff --git a/examples/responsive-app/ui/list-item.mod/list-item.html b/examples/responsive-app/ui/list-item.mod/list-item.html
new file mode 100644
index 000000000..efafde0d0
--- /dev/null
+++ b/examples/responsive-app/ui/list-item.mod/list-item.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<html>
+    <head>
+        <link rel="stylesheet" href="list-item.css" />
+        <script type="text/mod-serialization">
+            {
+                "owner": {
+                    "values": {
+                        "element": {"#": "owner"}
+                    }
+                },
+                "title": {
+                    "prototype": "mod/ui/text.mod",
+                    "values": {
+                        "element": {"#": "title"},
+                        "value": {"<-": "@owner.item.title"}
+                    }
+                },
+                "description": {
+                    "prototype": "mod/ui/text.mod",
+                    "values": {
+                        "element": {"#": "description"},
+                        "value": {"<-": "@owner.item.description"}
+                    }
+                }
+            }
+        </script>
+    </head>
+    <body>
+        <div data-mod-id="owner" class="ListItem">
+            <div data-mod-id="title" class="ListItem-text"></div>
+            <div data-mod-id="description" class="ListItem-description"></div>
+        </div>
+    </body>
+</html>
diff --git a/examples/responsive-app/ui/list-item.mod/list-item.js b/examples/responsive-app/ui/list-item.mod/list-item.js
new file mode 100644
index 000000000..54bc6c386
--- /dev/null
+++ b/examples/responsive-app/ui/list-item.mod/list-item.js
@@ -0,0 +1,10 @@
+/**
+ * @module "ui/list-item.mod"
+ */
+const Component = require("mod/ui/component").Component;
+
+/**
+ * @class ListItem
+ * @extends Component
+ */
+exports.ListItem = class ListItem extends Component {};
diff --git a/examples/responsive-app/ui/main.mod/main.css b/examples/responsive-app/ui/main.mod/main.css
new file mode 100644
index 000000000..3935f7856
--- /dev/null
+++ b/examples/responsive-app/ui/main.mod/main.css
@@ -0,0 +1,53 @@
+.Main {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 0 16px;
+
+    > .Main-header {
+        display: flex;
+        flex-direction: row-reverse;
+        justify-content: flex-end;
+        align-items: center;
+        gap: 12px;
+
+        > .Main-title {
+            font-size: 1.5rem;
+            font-weight: bold;
+        }
+
+        > .Main-logo {
+            flex-shrink: 0;
+            height: 48px;
+            width: 48px;
+
+            > img {
+                border-radius: 4px;
+            }
+        }
+    }
+}
+
+/* Tablets */
+@media screen and (min-width: 768px) {
+    .Main {
+        > .Main-header {
+            justify-content: space-between;
+            flex-direction: row;
+
+            > .Main-title {
+                font-size: 2rem;
+            }
+
+            > .Main-logo {
+                /* 16/9 ratio */
+                width: 128px;
+                height: 72px;
+            }
+        }
+
+        > .Main-nav {
+            max-width: 600px;
+        }
+    }
+}
diff --git a/examples/responsive-app/ui/main.mod/main.html b/examples/responsive-app/ui/main.mod/main.html
new file mode 100644
index 000000000..2f202e5cd
--- /dev/null
+++ b/examples/responsive-app/ui/main.mod/main.html
@@ -0,0 +1,100 @@
+<!doctype html>
+<html>
+    <head>
+        <link rel="stylesheet" href="main.css" />
+        <script type="text/mod-serialization">
+            {
+                "owner": {
+                    "values": {
+                        "element": {"#": "owner"},
+                        "visualStyle": {"@": "visualStyle"}
+                    }
+                },
+                "image": {
+                    "prototype": "mod/ui/image.mod",
+                    "values": {
+                        "element": {"#": "image"},
+                        "src": "assets/img/866-1024x1024.jpg",
+                        "enclosesSize": true
+                    }
+                },
+                "visualStyle": {
+                    "prototype": "mod/ui/visual-style.mod",
+                    "values": {
+                        "controlBorderWidth": "0.5px",
+                        "controlBorderRadius": "8px",
+                        "controlLabelSize": "16px",
+                        "controlBackgroundFill": "rgba(243, 244, 246, 1)",
+                        "controlSelectionFill": "rgba(252, 252, 252, 1)",
+                        "textFill": "rgba(0, 0, 0, 1)",
+                        "raisedSurfaceFill": "rgba(255, 255, 255, 1)"
+                    }
+                },
+                "segmentedControl": {
+                    "prototype": "mod/ui/segmented-control.mod",
+                    "values": {
+                        "element": {"#": "segmentedControl"},
+                        "options": {"<-": "@owner.menuOptions"},
+                        "selection": "home",
+                        "valuePath": "value",
+                        "enclosesSize": true
+                    }
+                },
+                "segmentedControlSegment": {
+                    "prototype": "mod/ui/text.mod",
+                    "values": {
+                        "element": {"#": "segmentedControlSegment"},
+                        "value": {"<-": "@segmentedControl:segment.object.label"}
+                    }
+                },
+                "list": {
+                    "prototype": "mod/ui/repetition.mod",
+                    "values": {
+                        "content": {"<-": "@owner.items"},
+                        "element": {"#": "list"}
+                    }
+                },
+                "listItem": {
+                    "prototype": "ui/list-item.mod",
+                     "values": {
+                        "item": {"<-": "@list:iteration.object"},
+                        "element": {"#": "listItem"},
+                        "enclosesSize": true
+                    }
+                },
+                "footer": {
+                    "prototype": "ui/footer.mod",
+                    "values": {
+                        "element": {"#": "footer"},
+                        "visualStyle": {"@": "footerVisualStyle"}
+                    }
+                },
+                "footerVisualStyle": {
+                    "prototype": "mod/ui/visual-style.mod",
+                    "values": {
+                        "controlBorderRadius": "16px"
+                    }
+                }
+            }
+        </script>
+    </head>
+    <body>
+        <div data-mod-id="owner" class="Main">
+            <header class="Main-header">
+                <h1 class="Main-title">Responsive App Demo</h1>
+                <div data-mod-id="image" class="Main-logo"></div>
+            </header>
+            <nav class="Main-nav">
+                <div data-mod-id="segmentedControl">
+                    <div data-mod-id="segmentedControlSegment"></div>
+                </div>
+            </nav>
+            <section class="Main-content">
+                <div data-mod-id="list" class="Main-List">
+                    <div data-mod-id="listItem" class="Main-ListItem"></div>
+                </div>
+            </section>
+            <footer data-mod-id="footer" class="Main-footer"></footer>
+        </div>
+    </body>
+</html>
diff --git a/examples/responsive-app/ui/main.mod/main.js b/examples/responsive-app/ui/main.mod/main.js
new file mode 100644
index 000000000..891b27d5a
--- /dev/null
+++ b/examples/responsive-app/ui/main.mod/main.js
@@ -0,0 +1,22 @@
+/**
+ * @module "ui/main.mod"
+ */
+const Component = require("mod/ui/component").Component;
+
+/**
+ * @class Main
+ * @extends Component
+ */
+exports.Main = class Main extends Component {
+    menuOptions = [
+        { label: "Home", value: "home" },
+        { label: "About", value: "about" },
+        { label: "Contact", value: "contact" },
+    ];
+
+    items = [
+        { title: "Item 1", description: "This is the first item." },
+        { title: "Item 2", description: "This is the second item." },
+        { title: "Item 3", description: "This is the third item." },
+    ];
+};
diff --git a/index.html b/index.html
index 48ccd940a..b81359a87 100644
--- a/index.html
+++ b/index.html
@@ -67,6 +67,7 @@ <h4>Tests:</h4>
 
             <h4>Examples:</h4>
             <a href="examples/data-app/index.html">Data App</a>
+            <a href="examples/responsive-app/index.html">Responsive App</a>
         </nav>
     </body>
 </html>
diff --git a/ui/button.mod/button.css b/ui/button.mod/button.css
index 1dee798be..9ca697e73 100644
--- a/ui/button.mod/button.css
+++ b/ui/button.mod/button.css
@@ -1,40 +1,31 @@
-/* WILL NOT BE FOUND */
-/* .ModButton { 
-    border: solid 1px;
+.ModButton {
+    border-style: solid;
+    border-width: var(--visual-style-control-border-width);
     border-color: var(--visual-style-control-border-fill);
+    background-color: var(--visual-style-raised-surface-fill);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
-    font-weight: 600;
+    font-weight: var(--visual-style-control-text-weight);
+    padding: var(--visual-style-control-buffer);
     position: relative;
     border-radius: var(--visual-style-control-border-radius);
-
     /* FIXME: Temporary arbitrary values, waiting for Button Themes */
-    /*transition: background-color 0.2s ease-in-out;
+    transition: background-color 0.2s ease-in-out;
     gap: 6px;
-} */
-
-
-.ModButton {
-        border-style: solid;
-        border-width: var(--visual-style-control-border-width);
-        border-color: var(--visual-style-control-border-fill);
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        box-sizing: border-box;
-        font-weight: var(--visual-style-control-text-weight);
-        padding: var(--visual-style-control-buffer);
-        position: relative;
-        border-radius: var(--visual-style-control-border-radius);
-        /* FIXME: Temporary arbitrary values, waiting for Button Themes */
-        transition: background-color 0.2s ease-in-out;
-        gap: 6px;
-        color: var(--visual-style-text-color);
+    color: var(--visual-style-text-fill);
 
     &:hover {
         cursor: pointer;
+
+        /* Mix the background with 10% of the text color */
+        background-color: color-mix(in srgb, var(--visual-style-raised-surface-fill), currentColor 10%);
+    }
+
+    &:active {
+        /* Mix the background with 15% of the text color */
+        background-color: color-mix(in srgb, var(--visual-style-raised-surface-fill), currentColor 15%);
     }
 
     /* Main Orientation */
@@ -57,21 +48,21 @@
         flex-direction: column-reverse;
     }
 
-    /** 
-     * FIXME: Hide temporally empty elements wait for this pr to be merged: 
-     * https://github.com/PhrontHQ/mod/pull/37 
+    /**
+     * FIXME: Hide temporally empty elements wait for this pr to be merged:
+     * https://github.com/PhrontHQ/mod/pull/37
      */
-    >div:empty {
+    > div:empty {
         display: none;
     }
 
     /* Visual Specifications */
 
-    >.ModButton-visual {
+    > .ModButton-visual {
         position: relative;
     }
 
-    >svg.ModButton-visual {
+    > svg.ModButton-visual {
         fill: currentColor;
     }
 
diff --git a/ui/component.js b/ui/component.js
index 6ff754eb0..5746d1e67 100644
--- a/ui/component.js
+++ b/ui/component.js
@@ -74,6 +74,9 @@ const DEFAULT_ATTRIBUTE_MERGE_OPTIONS = {
     },
 };
 
+// Flag to avoid repeating warning enclosesSize messages
+let hasWarnedEnclosesSize = false;
+
 function loggerToString(object) {
     if (!object) {
         return "NIL";
@@ -2495,12 +2498,19 @@ Component.addClassProperties({
         enumerable: false,
         value: function () {
             // Capture the current DOM instance (host) and the incoming template.
-            // It will be replaced by the template element.
+            // Depending on configuration, the host will either be swapped out
+            // or converted into a CSS container.
             const { element: hostElement, _templateElement: templateElement } = this;
 
             this._applyHostAttributesToTemplateElement(hostElement, templateElement);
+
+            if (this.enclosesSize) {
+                this._retainHostElementAsContainer(hostElement, templateElement);
+            } else {
+                this._swapDOMElement(hostElement, templateElement);
+            }
+
             this._initializeClassListFromElement(templateElement);
-            this._swapDOMElement(hostElement, templateElement);
             this._handleProcessedDomArg(hostElement, templateElement);
             this._finalizeTemplateReplacement(templateElement);
         },
@@ -2556,6 +2566,9 @@ Component.addClassProperties({
                     throw new Error(`No separator defined for merging attribute: ${nodeName}`);
                 }
 
+                // When using css container queries, template element attribute values take precedence
+                if (this.enclosesSize) return elementValue;
+
                 return `${elementValue}${attributeMergeSeparators[nodeName]}${nodeValue}`;
             }
 
@@ -2563,6 +2576,34 @@ Component.addClassProperties({
         },
     },
 
+    /**
+     * Configures the host element to act as a CSS container and appends the template
+     * instead of replacing the host.
+     * @param {Element} hostElement - The original host element.
+     * @param {Element} templateElement - The template element.
+     * @private
+     */
+    _retainHostElementAsContainer: {
+        value: function (hostElement, templateElement) {
+            // Remove ID to prevent collisions or logic errors in the host
+            hostElement.removeAttribute("data-mod-id");
+
+            // Setup internal references and CSS container properties
+            this._cssContainerElement = hostElement;
+            // TODO: instead of setting a style attribute container-type", we could use a "super" class.
+            this._cssContainerElement.style.setProperty("container-type", this.enclosedSizeType);
+
+            // TODO: Use a more specific class name to avoid potential conflicts, use the layer as prefix?
+            this._cssContainerElement.classList.add(`${this.constructor.name}CssContainer`);
+
+            // Inject template into the host rather than replacing it
+            this._cssContainerElement.append(templateElement);
+
+            // Ensure events are properly routed
+            this._transferEventListeners(hostElement, templateElement);
+        },
+    },
+
     /**
      * FIXME: What is this for?
      * @Benoit: ???
@@ -3536,6 +3577,12 @@ Component.addClassProperties({
             if (this._enclosesSize !== value) {
                 this._enclosesSize = value;
             }
+
+            // TODO: remove this warning when the feature is stable
+            if (value && !hasWarnedEnclosesSize) {
+                console.warn("enclosesSize is an experimental feature. Use with caution.");
+                hasWarnedEnclosesSize = true;
+            }
         },
     },
 
@@ -4037,50 +4084,6 @@ Component.addClassProperties({
                 }
             }
 
-            // Handle containerization
-            // Check if we need to wrap the element
-            //TODO: When a component is instanciated, it is given an element. If a component has a tenplate,
-            // that element is replaced by the component's element coming from its template.
-            //If we need to keep an extra container in that case, we should probabaly reuse that element
-            //instead of creating a new one.
-            if (this.enclosesSize && !this._cssContainerElement) {
-                if (element.tagName === "HTML" || element.tagName === "BODY") {
-                    let containerName =
-                        this.constructor.name === "Component"
-                            ? !!this.identifier
-                                ? null
-                                : this.identifier
-                            : this.constructor.name;
-
-                    if (containerName) {
-                        element.style.setProperty("container", `${this.constructor.name} / ${this.enclosedSizeType}`);
-                    }
-                } else {
-                    // Create the container
-                    this._cssContainerElement = document.createElement("div");
-                    this._cssContainerElement.style.setProperty(
-                        "container",
-                        `${this.constructor.name} / ${this.enclosedSizeType}`,
-                    );
-                    this._cssContainerElement.classList.add(`${this.constructor.name}-container`);
-
-                    // Place the new container right before the original element
-                    element.before(this._cssContainerElement);
-
-                    // Move the original element inside the new container
-                    this._cssContainerElement.append(element);
-                }
-
-                // Check if we need to unwrap the element
-            } else if (!this.enclosesSize && this._cssContainerElement) {
-                // Place the original element back before the container
-                this._cssContainerElement.before(element);
-
-                // Remove the now-empty container
-                this._cssContainerElement.remove();
-                this._cssContainerElement = null;
-            }
-
             // classList
             this._drawClassListIntoComponent();
 
diff --git a/ui/image.mod/image.css b/ui/image.mod/image.css
index fc5ca5966..fe543abdc 100644
--- a/ui/image.mod/image.css
+++ b/ui/image.mod/image.css
@@ -1,3 +1,13 @@
-.image-mod[hidden] {
-    display: none !important;
+.ModImage {
+    object-fit: cover;
+    object-position: center center;
+    width: 100%;
+    height: 100%;
+
+    /* Remove bottom inline spacing */
+    display: block;
+
+    &[hidden] {
+        display: none !important;
+    }
 }
diff --git a/ui/image.mod/image.html b/ui/image.mod/image.html
index f500badb6..2b5e39d69 100644
--- a/ui/image.mod/image.html
+++ b/ui/image.mod/image.html
@@ -14,6 +14,6 @@
     </script>
 </head>
 <body>
-    <img data-mod-id="owner" class="image-mod"></span>
+    <img data-mod-id="owner" class="ModImage"></span>
 </body>
 </html>
diff --git a/ui/segmented-control.mod/segmented-control.css b/ui/segmented-control.mod/segmented-control.css
index 76e53d8fd..3c2902478 100644
--- a/ui/segmented-control.mod/segmented-control.css
+++ b/ui/segmented-control.mod/segmented-control.css
@@ -8,9 +8,6 @@
 
     /* Segment */
     --mod-segment-transition: color 0.25s ease-out, background-color 0.25s ease-out;
-    --mod-segment-height: 36px;
-    --mod-segment-padding: 4px 8px;
-    --mod-segment-font-size: 12px;
 
     /* Segment Hover State */
     --mod-segment-hover-text: rgba(0, 0, 0, 1);
@@ -19,101 +16,116 @@
     --mod-segment-active-text: rgba(0, 0, 0, 1);
 }
 
-.ModSegmentedControl {
-    display: inline-flex;
-    -webkit-tap-highlight-color: transparent;
-
-    > .ModSegmentedControl-container {
+@scope (.ModSegmentedControl) {
+    :scope {
         display: flex;
-        background-color: var(--visual-style-control-background-fill);
-        padding: var(--mod-segmented-control-padding); /** TODO Incorporate into visual-style? **/
-        position: relative;
-        flex: 1;
-        border-radius: var(--visual-style-control-border-radius);
-
-        > .ModSegmentedControl-thumb {
-            position: absolute;
-            top: var(--mod-segmented-control-padding);
-            left: var(--mod-segmented-control-padding);
-            /* background: var(--visual-style-control-fill); */
-            background: var(--visual-style-control-selection-fill);
-            backdrop-filter: blur(10px);
-            border: 2px solid var(--visual-style-control-border-color);
-            box-sizing: border-box;
-            box-shadow: var(--visual-style-control-thumb-shadow); /** TODO Incorporate into visual-style? **/
-            z-index: 1;
-            pointer-events: none;
-            height: calc(100% - var(--mod-segmented-control-padding) * 2);
-        }
+        -webkit-tap-highlight-color: transparent;
 
-        > .ModSegmentedControl-segments {
+        > .ModSegmentedControl-container {
             display: flex;
-            flex-direction: row;
-            flex-wrap: nowrap;
-            overflow: hidden;
+            background-color: var(--visual-style-control-background-fill);
+            padding: var(--mod-segmented-control-padding); /** TODO Incorporate into visual-style? **/
             position: relative;
             flex: 1;
-            justify-content: space-around;
+            border-radius: var(--visual-style-control-border-radius);
 
-            > .ModSegmentedControl-segment {
-                flex: 1;
-                padding: var(--mod-segment-padding);
-                min-height: var(--mod-segment-height);
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                color: var(--visual-style-text-fill);
-                cursor: pointer;
-                transition: var(--mod-segment-transition);
-                z-index: 2;
+            > .ModSegmentedControl-thumb {
+                position: absolute;
+                top: var(--mod-segmented-control-padding);
+                left: var(--mod-segmented-control-padding);
+                background: var(--visual-style-control-selection-fill);
+                backdrop-filter: blur(10px);
+                border: 2px solid var(--visual-style-control-border-color);
                 box-sizing: border-box;
-                white-space: nowrap;
-                -webkit-user-select: none;
-                user-select: none;
-                outline: none;
-                border: none;
-                background: transparent;
-                font-family: inherit;
-                font-size: inherit;
-                gap: 8px;
-
-                &:hover:not(.mod--selected) {
-                    background-color: var(--visual-style-control-hover-fill);
-                    color: var(--mod-segment-hover-text);
-                }
-
-                &:active:not(.mod--selected) {
-                    background-color: var(--visual-style-control-active-fill);
-                    color: var(--mod-segment-active-text);
-                }
+                box-shadow: var(--visual-style-control-thumb-shadow); /** TODO Incorporate into visual-style? **/
+                z-index: 1;
+                pointer-events: none;
+                height: calc(100% - var(--mod-segmented-control-padding) * 2);
+            }
 
-                &.mod--selected {
+            > .ModSegmentedControl-segments {
+                display: flex;
+                flex-direction: row;
+                flex-wrap: nowrap;
+                overflow: hidden;
+                position: relative;
+                flex: 1;
+                justify-content: space-around;
+
+                > .ModSegmentedControl-segment {
+                    flex: 1;
+                    padding: 0.25rem 0.5rem;
+                    min-height: 2.25rem;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
                     color: var(--visual-style-text-fill);
-                }
-
-                > * {
-                    pointer-events: none;
+                    cursor: pointer;
+                    transition: var(--mod-segment-transition);
+                    z-index: 2;
+                    box-sizing: border-box;
+                    white-space: nowrap;
+                    -webkit-user-select: none;
                     user-select: none;
+                    outline: none;
+                    border: none;
+                    background: transparent;
+                    font-family: inherit;
+                    font-size: 1rem;
+                    gap: 0.5rem;
+
+                    &:hover:not(.mod--selected) {
+                        background-color: var(--visual-style-control-hover-fill);
+                        color: var(--mod-segment-hover-text);
+                    }
+
+                    &:active:not(.mod--selected) {
+                        background-color: var(--visual-style-control-active-fill);
+                        color: var(--mod-segment-active-text);
+                    }
+
+                    &.mod--selected {
+                        color: var(--visual-style-text-fill);
+                    }
+
+                    > * {
+                        pointer-events: none;
+                        user-select: none;
+                    }
                 }
             }
+
+            > .ModSegmentedControl-thumb,
+            > .ModSegmentedControl-segments > .ModSegmentedControl-segment {
+                border-radius: calc(var(--visual-style-control-border-radius) - var(--mod-segmented-control-padding));
+            }
         }
 
-        > .ModSegmentedControl-thumb,
-        > .ModSegmentedControl-segments > .ModSegmentedControl-segment {
-            border-radius: calc(var(--visual-style-control-border-radius) - var(--mod-segmented-control-padding));
+        &.mod--disabled {
+            opacity: 0.6;
+            pointer-events: none;
+            cursor: not-allowed;
         }
-    }
 
-    &.mod--disabled {
-        opacity: 0.6;
-        pointer-events: none;
-        cursor: not-allowed;
-    }
+        &.mod--readyForAnimation {
+            > .ModSegmentedControl-container {
+                > .ModSegmentedControl-thumb {
+                    transition: var(--mod-segmented-control-thumb-transition);
+                }
+            }
+        }
 
-    &.mod--readyForAnimation {
-        > .ModSegmentedControl-container {
-            > .ModSegmentedControl-thumb {
-                transition: var(--mod-segmented-control-thumb-transition);
+        /* "Compact Mode" (e.g., for narrow containers) */
+        @container (max-width: 400px) {
+            > .ModSegmentedControl-container {
+                > .ModSegmentedControl-segments {
+                    > .ModSegmentedControl-segment {
+                        padding: 0.2rem 0.4rem;
+                        font-size: 0.75rem;
+                        min-height: 2rem;
+                        gap: 0.25rem;
+                    }
+                }
             }
         }
     }
diff --git a/ui/segmented-control.mod/segmented-control.html b/ui/segmented-control.mod/segmented-control.html
index 685eb2d08..9eff02696 100644
--- a/ui/segmented-control.mod/segmented-control.html
+++ b/ui/segmented-control.mod/segmented-control.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
     <head>
         <link rel="stylesheet" type="text/css" href="segmented-control.css" />
diff --git a/ui/segmented-control.mod/teach/ui/main.mod/main.html b/ui/segmented-control.mod/teach/ui/main.mod/main.html
index e2efe7478..7bbc18471 100644
--- a/ui/segmented-control.mod/teach/ui/main.mod/main.html
+++ b/ui/segmented-control.mod/teach/ui/main.mod/main.html
@@ -120,6 +120,22 @@
                         "element": {"#": "iconSegmentedControlSegmentSelectedOption"},
                         "value": {"<-": "@iconSegmentedControl.selection"}
                     }
+                },
+                "responsiveSegmentedControl": {
+                    "prototype": "mod/ui/segmented-control.mod",
+                    "values": {
+                        "element": {"#": "responsiveSegmentedControl"},
+                        "options": {"<-": "@owner.stringOptions"},
+                        "selection": "Banana",
+                        "enclosesSize": true
+                    }
+                },
+                "responsiveSegmentedControlSegment": {
+                    "prototype": "mod/ui/text.mod",
+                    "values": {
+                        "element": {"#": "responsiveSegmentedControlSegment"},
+                        "value": {"<-": "@responsiveSegmentedControl:segment.object"}
+                    }
                 }
             }
         </script>
@@ -183,6 +199,17 @@ <h2>Icon Segmented Control</h2>
                     </div>
                 </div>
             </div>
+
+            <!-- Responsive Segmented Control -->
+            <div class="card column stretch">
+                <h2>Responsive Segmented Control</h2>
+                <div class="row center">
+                    <label>Resize the window to see responsiveness:</label>
+                    <div data-mod-id="responsiveSegmentedControl" class="flexible">
+                        <div data-mod-id="responsiveSegmentedControlSegment"></div>
+                    </div>
+                </div>
+            </div>
         </div>
     </body>
 </html>
