diff --git a/flask/converters/static/js/MaterialXConversionApp.js b/flask/converters/static/js/MaterialXConversionApp.js
index 51f458e..08df8fe 100644
--- a/flask/converters/static/js/MaterialXConversionApp.js
+++ b/flask/converters/static/js/MaterialXConversionApp.js
@@ -124,7 +124,7 @@ export class MaterialX_Conversion_Client extends WebSocketClient {
             // Copy the content from CodeMirror back to the textarea
             materialXTextArea.value = this.editor.getValue();
         });
-        this.editor.setSize('auto', '300px');
+        this.editor.setSize('auto', '40em');
 
         ///////////////////////////////////////////////////////////////////////////////
 
diff --git a/flask/converters/templates/MaterialXConversionApp.html b/flask/converters/templates/MaterialXConversionApp.html
index 484bc62..47d14d5 100644
--- a/flask/converters/templates/MaterialXConversionApp.html
+++ b/flask/converters/templates/MaterialXConversionApp.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -14,9 +15,9 @@
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/json/json.min.js"></script>   
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/javascript/javascript.min.js"></script>  
-    
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/json/json.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/javascript/javascript.min.js"></script>
+
     <style>
         .CodeMirror {
             font-size: 11px;
@@ -24,49 +25,109 @@
             height: 50em;
         }
     </style>
+
+    <style>
+        /* Parent container to hold columns and resizer */
+        .resizable-container {
+            display: flex;
+            width: 100%;
+        }
+
+        /* Left and right columns */
+        .resizable-column {
+            flex-grow: 0;
+            /* Disable flex-grow to allow explicit width */
+            flex-shrink: 0;
+            /* Prevent shrinking */
+            overflow: hidden;
+            padding: 10px;
+            border: 1px solid skyblue;
+        }
+
+        /* Resizer element */
+        .resizer {
+            width: 10px;
+            cursor: ew-resize;
+            background-color: #dbdbdb;
+            position: relative;
+        }
+
+        /* Vertical line in the resizer for better visibility */
+        .resizer::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 50%;
+            border-left: 1px solid #ccc;
+        }
+    </style>
+
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>  
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
     <!--StyleEnd-->
 </head>
 
 <body>
-<!--Begin-->
-    <div class="container-fluid p-2">
-    <h2 id="title">MaterialX Conversion App</h2>
-
-        <p style="font-size: 12px">Sample application used to support glTF node graph / MaterialX / OpenUSD interop
-            testing and site deployment. OpenUSD conversion uses usd-core and
-            custom code to generate a simplified USD document (*). glTF Texture Procedural
-            conversion uses the library found <a href="https://github.com/KhronosGroup/glTF-MaterialX-Converter"
-            target="_blank">here</a>
-            <br>
-            <sub>(*) Note that synchronization of USD to MaterialX 1.39
-                is the target.</sub>            
+    <!--Begin-->
+    <div class="container-fluid p-4">
+        <h2 id="title">MaterialX Server Rendering</h2>
+        <p style="font-size: 12px">
+            Sample showing rendering of the document using the C++ MaterialxView
+            core utility.
         </p>
-        <div class="row p-2">
-            <div class="col-sm p-2 border">
-                <button id="getMTLXButton" class="btn btn-sm btn-primary">Load MaterialX</button>
-                <textarea id="mtlxOutput" rows="20" cols="100%"></textarea>
+        <div id="resizableTopContainer" class="resizable-container" style="display:none">
+            <div class="resizable-column" id="leftCol">
+                <button id="getMTLXButton_RS" class="btn btn-sm btn-primary">Load MaterialX</button>
+                <textarea id="mtlxOutput_RS" rows="100%" style="width: 100%;"></textarea>
+            </div>
+
+            <div class="resizer" id="resizer"></div>
+
+            <div class="resizable-column" id="rightCol" style="flex: 1 1 auto;">
+                <button id="renderMTLXButton_RS" class="btn btn-sm btn-primary">Render Reference Image</button>
+                <img src="" class="img-fluid" id="mtlxImage_RS" alt="MaterialX Image" width=100% style="display: none;">
             </div>
         </div>
-        <div class="row p-2">
-            <div class="col-sm p-2 border">
-            <button id="renderMTLXButton" class="btn btn-sm btn-primary">Render Reference Image</button>
-            <img src="" id="mtlxImage" alt="MaterialX Image" style="display:none; width: 100%">        
+
+        <div id="nonResizableTopContainer" style="display:block">
+            <div class="row p-2">
+                <div class="col-sm p-2 border">
+                    <button id="getMTLXButton_NR" class="btn btn-sm btn-primary">Load MaterialX</button>
+                    <textarea id="mtlxOutput_NR" rows="20" cols="100%"></textarea>
+                </div>
+                <div class="col-sm p-2 border">
+                    <button id="renderMTLXButton_NR" class="btn btn-sm btn-primary">Render Reference Image</button>
+                    <img src="" id="mtlxImage_NR" alt="MaterialX Image" style="display:none; width: 100%">
+                </div>
             </div>
         </div>
+
+    </div>
+
+    <div class="container-fluid p-4">
+        <h2 id="title">MaterialX Conversion</h2>
+
+        <p style="font-size: 12px">Sample showing support for glTF Texture Procedural, MaterialX, and OpenUSD interop
+            OpenUSD conversion uses the <code>usd-core</code> Python package with
+            custom code to generate a simplified USD document (*). glTF Texture Procedural
+            conversion uses the Python library found <a href="https://github.com/KhronosGroup/glTF-MaterialX-Converter"
+                target="_blank">here</a>
+            <br>
+            <sub>(*) Note that synchronization of USD to MaterialX 1.39
+                is the target.</sub>
+        </p>
+
         <div class="row p-2">
             <div class="col-sm p-2 border">
                 <button id="convertToUsd" class="btn btn-sm btn-primary">Convert to USD</button>
                 <textarea id="usdOutput" rows="20" cols="80"></textarea>
             </div>
-        </div>
-        <div class="row p-2">
-                <div class="col-sm p-2 border">
+            <div class="col-sm p-2 border">
                 <button id="convertToglTF" class="btn btn-sm btn-primary">Convert to glTF Texture Procedural</button>
-                <textarea id="glTFOutput" rows="20" cols="80"></textarea>        
+                <textarea id="glTFOutput" rows="20" cols="80"></textarea>
             </div>
-        </div>    
+        </div>
     </div>
 
     <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.4/socket.io.js"></script> -->
@@ -82,8 +143,99 @@ <h2 id="title">MaterialX Conversion App</h2>
             // Setup text formatting
             client.setupXML();
         };
+    </script>
+
+    <script>
+        // Function to initialize resizer
+        function initializeResizer() {
+            const resizer = document.getElementById('resizer');
+            const leftCol = document.getElementById('leftCol');
+            const rightCol = document.getElementById('rightCol');
+
+            let x = 0;
+            let leftWidth = 0;
+
+            const mouseDownHandler = function (e) {
+                x = e.clientX;
+                leftWidth = leftCol.getBoundingClientRect().width;
+
+                document.addEventListener('mousemove', mouseMoveHandler);
+                document.addEventListener('mouseup', mouseUpHandler);
+            };
+
+            const mouseMoveHandler = function (e) {
+                const dx = e.clientX - x;
+                const newLeftWidth = leftWidth + dx;
+
+                // Calculate the new width of the right column
+                const newRightWidth = window.innerWidth - newLeftWidth - resizer.offsetWidth;
 
+                // Prevent resizing if the right column would be smaller than the minimum width
+                if (newRightWidth >= 200) {
+                    // Set minimum and maximum width for left column
+                    if (newLeftWidth > 100 && newLeftWidth < window.innerWidth - 100) {
+                        leftCol.style.width = `${newLeftWidth}px`;
+                    }
+                }
+            };
+
+            const mouseUpHandler = function () {
+                document.removeEventListener('mousemove', mouseMoveHandler);
+                document.removeEventListener('mouseup', mouseUpHandler);
+            };
+
+            resizer.addEventListener('mousedown', mouseDownHandler);
+        }
+
+        // Function to toggle between resizable and non-resizable modes
+        function toggleResizableMode(isResizable) {
+            const resizableContainer = document.getElementById("resizableTopContainer");
+            const nonResizableContainer = document.getElementById("nonResizableTopContainer");
+
+            if (isResizable) {
+                // Show resizable container and hide non-resizable container
+                resizableContainer.style.display = 'flex';
+                nonResizableContainer.style.display = 'none';
+
+                // Find all elements with an ID that ends with "_RS"
+                const resizableElements = resizableContainer.querySelectorAll('[id$="_RS"]');
+                resizableElements.forEach(element => {
+                    element.id = element.id.replace('_RS', '');
+                    console.log('RS element.id', element.id);
+                });
+
+
+                // Initialize the resizer
+                initializeResizer();
+            } else {
+                console.log('>>>>>>>>>>>>>>>>> Non resizable mode');
+
+                // Find all elements with an ID that ends with "Resizable"
+                const resizableElements = nonResizableContainer.querySelectorAll('[id$="_NR"]');
+                resizableElements.forEach(element => {
+                    element.id = element.id.replace('_NR', '');
+                    console.log('NR element.id', element.id);
+                });
+
+                // Show non-resizable container and hide resizable container
+                resizableContainer.style.display = 'none';
+                nonResizableContainer.style.display = 'block';
+            }
+        }
+
+        // Check if there is an argument on the url for ?resizable=true
+        const urlParams = new URLSearchParams(window.location.search);
+        const resizable = urlParams.get('resizable');
+
+        console.log('-------- Use resizable UI', resizable);
+        if (resizable=='true' || resizable=='1') {
+            toggleResizableMode(true);
+        } else {
+            toggleResizableMode(false);
+        }
     </script>
-<!--End-->
+
+    <!--End-->
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/flask/gpuopen/data/Motley Patchwork Rug.zip b/flask/gpuopen/data/Motley Patchwork Rug.zip
new file mode 100644
index 0000000..6de4f14
Binary files /dev/null and b/flask/gpuopen/data/Motley Patchwork Rug.zip differ
