diff --git a/TestMasterUI/src/components/api-tester/APITabs.jsx b/TestMasterUI/src/components/api-tester/APITabs.jsx
index 5230d5d..b0a19bb 100644
--- a/TestMasterUI/src/components/api-tester/APITabs.jsx
+++ b/TestMasterUI/src/components/api-tester/APITabs.jsx
@@ -5,6 +5,7 @@ import { TCPClientView } from '../client-views/TCPClientView';
 import { HTTPFlatClientView } from '../client-views/HTTPFlatClientView';
 import { X } from 'lucide-react';
 import {Button} from '@/components/ui/button.jsx';
+import {ScrollArea} from '@/components/ui/scroll-area.jsx';
 
 const APITabs = ({
   apiRequests,
diff --git a/TestMasterUI/src/components/client-views/HTTPClientView.jsx b/TestMasterUI/src/components/client-views/HTTPClientView.jsx
index a3c75f2..59c6f7a 100644
--- a/TestMasterUI/src/components/client-views/HTTPClientView.jsx
+++ b/TestMasterUI/src/components/client-views/HTTPClientView.jsx
@@ -12,6 +12,7 @@ import MonacoEditor from '@/components/shared/MonacoEditor';
 import APIClient from '@/services/APIClient.js';
 import {SidebarTrigger} from '@/components/ui/sidebar.jsx';
 import {Separator} from '@/components/ui/separator.jsx';
+import {ScrollArea} from '@/components/ui/scroll-area.jsx';
 
 const HTTP_METHODS = [
   'POST', 'GET', 'PUT', 'DELETE', 'CONNECT',
@@ -96,16 +97,15 @@ export const HTTPClientView = ({model, index}) => {
     });
   };
 
-
   const buildUrlFromPathAndParams = (path, queryParams) => {
     const baseUrl = path.split('?')[0];
     const enabledParams = queryParams.filter(p => p.enabled && p.key);
 
-    if (!enabledParams.length) return baseUrl;
+    if (!enabledParams.length) {
+      return baseUrl;
+    }
 
-    const queryString = enabledParams
-    .map(p => `${p.key}=${p.value || ''}`)
-    .join('&');
+    const queryString = enabledParams.map(p => `${p.key}=${p.value || ''}`).join('&');
 
     return `${baseUrl}?${queryString}`;
   };
@@ -119,7 +119,6 @@ export const HTTPClientView = ({model, index}) => {
     }));
   };
 
-
   const parseQueryParams = (path) => {
     const queryParams = [];
     const [, queryString] = path.split('?');
@@ -176,7 +175,6 @@ export const HTTPClientView = ({model, index}) => {
         responseBody: response.body
       }));
 
-
     } catch (error) {
       console.error(error);
       setEditorContents(prev => ({
@@ -228,8 +226,8 @@ export const HTTPClientView = ({model, index}) => {
       <div className="flex flex-col h-full p-4 gap-4">
         {/* Request Header Section */}
         <div className="flex items-center gap-2">
-          <SidebarTrigger className="-ml-1" />
-          <Separator orientation="vertical" className="mr-2 h-4" />
+          <SidebarTrigger className="-ml-1"/>
+          <Separator orientation="vertical" className="mr-2 h-4"/>
           <div>
             <span>{currentModel.collectionName}</span>
             {' > '}
@@ -275,143 +273,143 @@ export const HTTPClientView = ({model, index}) => {
         </div>
 
         {/* Request/Response Container */}
-        <div className="flex flex-col gap-4 flex-1 min-h-0">
-          {/* Request Section */}
-          <div className="flex-1 min-h-0">
-            <Tabs value={currentTab} onValueChange={setCurrentTab} className="flex flex-col h-full">
-              <TabsList>
-                <TabsTrigger value="body">Body</TabsTrigger>
-                <TabsTrigger value="params">Params</TabsTrigger>
-                <TabsTrigger value="headers">Headers</TabsTrigger>
-                <TabsTrigger value="pre-request">Pre-Request</TabsTrigger>
-                <TabsTrigger value="post-request">Post-Request</TabsTrigger>
-              </TabsList>
+        <ScrollArea className="flex-1">
+          <div className="grid flex-1 gap-4 min-h-0">
+            {/* Request Section */}
+            <div className="flex flex-col">
+              <Tabs value={currentTab} onValueChange={setCurrentTab} className="flex flex-col h-full">
+                <TabsList>
+                  <TabsTrigger value="body">Body</TabsTrigger>
+                  <TabsTrigger value="params">Params</TabsTrigger>
+                  <TabsTrigger value="headers">Headers</TabsTrigger>
+                  <TabsTrigger value="pre-request">Pre-Request</TabsTrigger>
+                  <TabsTrigger value="post-request">Post-Request</TabsTrigger>
+                </TabsList>
 
-              <div className="flex-1 min-h-0 mt-2">
-                {/* Body Tab Content */}
-                <TabsContent value="body" className="h-full m-0">
-                  <div className="flex flex-col h-full gap-2">
-                    <Select
-                        value={currentModel.contentType}
-                        onValueChange={(value) => setCurrentModel(prev => ({...prev, contentType: value}))}
-                    >
-                      <SelectTrigger>
-                        <SelectValue placeholder="Content Type"/>
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="json">JSON</SelectItem>
-                        <SelectItem value="xml">XML</SelectItem>
-                        <SelectItem value="plaintext">Text/Plain</SelectItem>
-                      </SelectContent>
-                    </Select>
-                    <div className="h-[calc(100%-40px)]">
-                      <MonacoEditor
-                          id={`request-body-${model.id}`}
-                          value={currentModel.requestBody}
-                          language={
-                            currentModel.contentType
-                          }
-                          onChange={(newValue) => {
-                            setCurrentModel(prev => ({
-                              ...prev,
-                              requestBody: newValue
-                            }));
-                          }}
-                          height="full"
-                      />
+                <div className="flex-1 min-h-0 mt-2">
+                  {/* Body Tab Content */}
+                  <TabsContent value="body" className="h-full m-0">
+                    <div className="flex flex-col h-full gap-2">
+                      <Select
+                          value={currentModel.contentType}
+                          onValueChange={(value) => setCurrentModel(prev => ({...prev, contentType: value}))}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Content Type"/>
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="json">JSON</SelectItem>
+                          <SelectItem value="xml">XML</SelectItem>
+                          <SelectItem value="plaintext">Text/Plain</SelectItem>
+                        </SelectContent>
+                      </Select>
+                      <div className="h-[calc(100%-40px)]">
+                        <MonacoEditor
+                            id={`request-body-${model.id}`}
+                            value={currentModel.requestBody}
+                            language={
+                              currentModel.contentType
+                            }
+                            onChange={(newValue) => {
+                              setCurrentModel(prev => ({
+                                ...prev,
+                                requestBody: newValue
+                              }));
+                            }}
+                            height="300px"
+                        />
+                      </div>
                     </div>
-                  </div>
-                </TabsContent>
+                  </TabsContent>
 
-                <TabsContent value="params" className="h-full m-0">
-                  <PropertyTable
-                      properties={currentModel.queryParams || []}
-                      onChange={handleQueryParamsChange}
-                  />
-                </TabsContent>
+                  <TabsContent value="params" className="h-full m-0">
+                    <PropertyTable
+                        properties={currentModel.queryParams || []}
+                        onChange={handleQueryParamsChange}
+                    />
+                  </TabsContent>
 
-                {/* Headers Tab Content */}
-                <TabsContent value="headers" className="h-full m-0">
-                  <PropertyTable
-                      properties={currentModel.headers || []}
-                      onChange={handleHeadersChange}
-                  />
-                </TabsContent>
-                <TabsContent value="pre-request" className="h-full m-0">
-                  <MonacoEditor
-                      id={`pre-request-${model.id}`}
-                      value={editorContents.preRequestScript}
-                      language="javascript"
-                      onChange={(value) => {
-                        setEditorContents(prev => ({...prev, preRequestScript: value}));
-                        setCurrentModel(prev => ({...prev, preRequestScript: value}));
-                      }}
-                      height="full"
-                  />
-                </TabsContent>
+                  {/* Headers Tab Content */}
+                  <TabsContent value="headers" className="h-full m-0">
+                    <PropertyTable
+                        properties={currentModel.headers || []}
+                        onChange={handleHeadersChange}
+                    />
+                  </TabsContent>
+                  <TabsContent value="pre-request" className="h-full m-0">
+                    <MonacoEditor
+                        id={`pre-request-${model.id}`}
+                        value={editorContents.preRequestScript}
+                        language="javascript"
+                        onChange={(value) => {
+                          setEditorContents(prev => ({...prev, preRequestScript: value}));
+                          setCurrentModel(prev => ({...prev, preRequestScript: value}));
+                        }}
+                        height="300px"
+                    />
+                  </TabsContent>
 
-                {/* Post-Request Tab Content */}
-                <TabsContent value="post-request" className="h-full m-0">
-                  <MonacoEditor
-                      id={`post-request-${model.id}`}
-                      value={editorContents.postRequestScript}
-                      language="javascript"
-                      onChange={(value) => {
-                        setEditorContents(prev => ({...prev, postRequestScript: value}));
-                        setCurrentModel(prev => ({...prev, postRequestScript: value}));
-                      }}
-                      height="full"
-                  />
-                </TabsContent>
-              </div>
-            </Tabs>
-          </div>
-
-          {/* Response Section */}
-          <div className="flex-1 min-h-0">
-            <div className="flex items-center gap-2 mb-2">
-              <span>Response</span>
-              <span className="text-sm text-gray-500">{responseData.status}</span>
-              <span className="text-sm text-gray-500">{responseData.time}</span>
-              <span className="text-sm text-gray-500">{responseData.size}</span>
+                  {/* Post-Request Tab Content */}
+                  <TabsContent value="post-request" className="h-full m-0">
+                    <MonacoEditor
+                        id={`post-request-${model.id}`}
+                        value={editorContents.postRequestScript}
+                        language="javascript"
+                        onChange={(value) => {
+                          setEditorContents(prev => ({...prev, postRequestScript: value}));
+                          setCurrentModel(prev => ({...prev, postRequestScript: value}));
+                        }}
+                        height="300px"
+                    />
+                  </TabsContent>
+                </div>
+              </Tabs>
             </div>
 
-            <Tabs value={currentResponseTab} onValueChange={setCurrentResponseTab} className="flex flex-col h-[calc(100%-2rem)]">
-              <TabsList>
-                <TabsTrigger value="response-body">Body</TabsTrigger>
-                <TabsTrigger value="response-headers">Headers</TabsTrigger>
-                <TabsTrigger value="console">Console</TabsTrigger>
-              </TabsList>
-
-              <div className="flex-1 min-h-0 mt-2">
-                <TabsContent value="response-body" className="h-full m-0">
-                  <MonacoEditor
-                      id={`response-body-${model.id}`}
-                      value={editorContents.responseBody}
-                      readOnly={true}
-                      height="full"
-                  />
-                </TabsContent>
-
-                <TabsContent value="response-headers" className="h-full m-0">
-                  {renderResponseHeaders()}
-                </TabsContent>
-
-                <TabsContent value="console" className="h-full m-0">
-                  <MonacoEditor
-                      id={`console-${model.id}`}
-                      value={editorContents.consoleLog}
-                      language="plaintext"
-                      readOnly={true}
-                      height="full"
-                  />
-                </TabsContent>
+            {/* Response Section */}
+            <div className="flex flex-col">
+              <div className="flex items-center gap-2 mb-2">
+                <span>Response</span>
+                <span className="text-sm text-gray-500">{responseData.status}</span>
+                <span className="text-sm text-gray-500">{responseData.time}</span>
+                <span className="text-sm text-gray-500">{responseData.size}</span>
               </div>
-            </Tabs>
+
+              <Tabs value={currentResponseTab} onValueChange={setCurrentResponseTab} className="flex flex-col h-[calc(100%-2rem)]">
+                <TabsList>
+                  <TabsTrigger value="response-body">Body</TabsTrigger>
+                  <TabsTrigger value="response-headers">Headers</TabsTrigger>
+                  <TabsTrigger value="console">Console</TabsTrigger>
+                </TabsList>
+
+                <div className="flex-1 min-h-0 mt-2">
+                  <TabsContent value="response-body" className="h-full m-0">
+                    <MonacoEditor
+                        id={`response-body-${model.id}`}
+                        value={editorContents.responseBody}
+                        readOnly={true}
+                        height="300px"
+                    />
+                  </TabsContent>
+
+                  <TabsContent value="response-headers" className="h-full m-0">
+                    {renderResponseHeaders()}
+                  </TabsContent>
+
+                  <TabsContent value="console" className="h-full m-0">
+                    <MonacoEditor
+                        id={`console-${model.id}`}
+                        value={editorContents.consoleLog}
+                        language="plaintext"
+                        readOnly={true}
+                        height="300px"
+                    />
+                  </TabsContent>
+                </div>
+              </Tabs>
+            </div>
           </div>
-        </div>
-
-
+        </ScrollArea>
       </div>
   );
 };
diff --git a/TestMasterUI/src/components/client-views/TCPClientView.jsx b/TestMasterUI/src/components/client-views/TCPClientView.jsx
index 7fdb017..e9883d9 100644
--- a/TestMasterUI/src/components/client-views/TCPClientView.jsx
+++ b/TestMasterUI/src/components/client-views/TCPClientView.jsx
@@ -7,10 +7,9 @@ import MonacoEditor from '@/components/shared/MonacoEditor';
 import APIClient from '@/services/APIClient';
 import {SidebarTrigger} from '@/components/ui/sidebar.jsx';
 import {Separator} from '@/components/ui/separator.jsx';
-import LayoutGrid from '@/components/layout/LayoutGrid.jsx';
-import LayoutTreeGrid from '@/components/layout/LayoutTreeGrid.jsx';
-import LayoutTreeDataGrid from '@/components/layout/LayoutTreeDataGrid.jsx';
 import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card.jsx';
+import FlatLayoutManager from '@/components/layout/FlatLayoutManager.jsx';
+import {ScrollArea} from '@/components/ui/scroll-area.jsx';
 
 export const TCPClientView = ({model, index}) => {
   const apiClient = new APIClient();
@@ -19,7 +18,7 @@ export const TCPClientView = ({model, index}) => {
   const [currentModel, setCurrentModel] = useState(model);
   const [currentTab, setCurrentTab] = useState('body');
   const [currentResponseTab, setCurrentResponseTab] = useState('response-body');
-  const [layoutItems, setLayoutItems] = useState(model.layout?.layoutItems || []);
+  // const [layoutItems, setLayoutItems] = useState(model.layout?.layoutItems || []);
 
   useEffect(() => {
     setCurrentModel(prev => ({
@@ -48,7 +47,7 @@ export const TCPClientView = ({model, index}) => {
 
   useEffect(() => {
     if (currentModel.server) {
-      const selectedServer = getServer(currentModel.server);
+      getServer(currentModel.server);
     }
   }, [currentModel.server]);
 
@@ -115,58 +114,35 @@ export const TCPClientView = ({model, index}) => {
   };
 
   const handleLayoutUpdate = useCallback((updatedLayout) => {
-    setLayoutItems(updatedLayout.layoutItems); // Add this
-    setCurrentModel(prev => ({  // Update this to use setState
+    setCurrentModel(prev => ({
       ...prev,
       layout: updatedLayout
     }));
-
-    setEditorContents(prev => ({
-      ...prev,
-      layout: JSON.stringify(updatedLayout, null, 2)
-    }));
-
   }, []);
 
   const handleLayoutDataUpdate = useCallback((updatedLayout) => {
-    console.log(updatedLayout);
-
-    // Update layout and request body based on the data tree
+    const requestBody = generateRequestBody(updatedLayout.computedLayoutItemRoot);
     setCurrentModel(prev => ({
       ...prev,
       layout: updatedLayout,
-      requestBody: generateRequestBody(updatedLayout.computedLayoutItemRoot)
-    }));
-
-    // Update editor contents with new request body
-    setEditorContents(prev => ({
-      ...prev,
-      requestBody: generateRequestBody(updatedLayout.computedLayoutItemRoot)
+      requestBody
     }));
   }, []);
 
   const generateRequestBody = useCallback((layoutRoot) => {
-    console.log(layoutRoot);
     if (!layoutRoot) return '';
 
-    // Helper function to pad field values with spaces
     const padField = (value, length) => {
-      // Convert to string and ensure it's not null/undefined
       const stringValue = String(value || '');
-      // Left pad with spaces to match the specified length
       return stringValue.padStart(length, ' ');
     };
 
-    // Process nodes using recursive function
     const processNodes = (node) => {
-      // If it's a Field type node, pad the value
       if (node.loutItemType === 'Field') {
         return padField(node.value, node.loutItemLength);
       }
 
-      // If node has children
       if (node.children && node.children.length > 0) {
-        // For non-repeating nodes, just process children
         return node.children
         .map(child => processNodes(child))
         .join('');
@@ -178,6 +154,7 @@ export const TCPClientView = ({model, index}) => {
     return processNodes(layoutRoot);
   }, []);
 
+
   return (
       <div className="flex flex-col h-full p-4 gap-4">
         {/* Request Header Section */}
@@ -202,158 +179,133 @@ export const TCPClientView = ({model, index}) => {
           </Button>
           <Button variant="secondary" onClick={handleSave}>Save</Button>
         </div>
+        <ScrollArea className="flex-1">
+          <div className="grid flex-1 gap-4 min-h-0">
+            {/* 요청 영역 */}
+            <Card className="flex flex-col">
+              <CardHeader className="p-4 pb-2">
+                <CardTitle>Request</CardTitle>
+              </CardHeader>
+              <CardContent className="flex flex-col flex-1 p-4 pt-2 min-h-0">
+                <Tabs value={currentTab} onValueChange={setCurrentTab} className="flex flex-col flex-1">
+                  <TabsList>
+                    <TabsTrigger value="body">Layout</TabsTrigger>
+                    <TabsTrigger value="pre-request">Pre-Request</TabsTrigger>
+                    <TabsTrigger value="post-request">Post-Request</TabsTrigger>
+                  </TabsList>
 
-        <div className="grid flex-1 gap-4 min-h-0">
-          {/* 요청 영역 */}
-          <Card className="flex flex-col">
-            <CardHeader className="p-4 pb-2">
-              <CardTitle>Request</CardTitle>
-            </CardHeader>
-            <CardContent className="flex flex-col flex-1 p-4 pt-2 min-h-0">
-              <Tabs value={currentTab} onValueChange={setCurrentTab} className="flex flex-col flex-1">
-                <TabsList>
-                  <TabsTrigger value="body">Layout</TabsTrigger>
-                  <TabsTrigger value="layout-tree">Layout Tree</TabsTrigger>
-                  <TabsTrigger value="layout-data">Layout Data</TabsTrigger>
-                  <TabsTrigger value="layout-json">Layout JSON</TabsTrigger>
-                  <TabsTrigger value="pre-request">Pre-Request</TabsTrigger>
-                  <TabsTrigger value="post-request">Post-Request</TabsTrigger>
-                </TabsList>
+                  <div className="flex-1 min-h-0 mt-2">
+                    <TabsContent value="body" className="h-full m-0">
+                      <FlatLayoutManager
+                          initialLayout={currentModel.layout}
+                          modelId={model.id}
+                          onLayoutChange={handleLayoutUpdate}
+                          onLayoutDataChange={handleLayoutDataUpdate}
+                          onRequestBodyChange={(body) => {
+                            setCurrentModel(prev => ({
+                              ...prev,
+                              requestBody: body
+                            }));
+                          }}
+                      />
+                    </TabsContent>
+                    <TabsContent value="pre-request" className="h-full m-0">
+                      <MonacoEditor
+                          id={`pre-request-${model.id}`}
+                          value={editorContents.preRequestScript}
+                          language="javascript"
+                          onChange={(value) => {
+                            setEditorContents(prev => ({...prev, preRequestScript: value}));
+                            setCurrentModel(prev => ({...prev, preRequestScript: value}));
+                          }}
+                          height="300px"
+                      />
+                    </TabsContent>
 
-                <div className="flex-1 min-h-0 mt-2">
-                  {/* Body Tab Content */}
-                  <TabsContent value="body" className="h-full m-0">
-                    <LayoutGrid
-                        layout={currentModel.layout}
-                        layoutItems={layoutItems}  // Add this
-                        setLayoutItems={setLayoutItems}  // Add this
-                        onChange={handleLayoutUpdate}
-                    />
-                  </TabsContent>
-                  <TabsContent value="layout-tree" className="h-full m-0">
-                    <LayoutTreeGrid
-                        layout={currentModel.layout}
-                        layoutItems={layoutItems}  // Add this
-                        setLayoutItems={setLayoutItems}  // Add this
-                        onChange={handleLayoutUpdate}
-                    />
-                  </TabsContent>
-                  <TabsContent value="layout-data" className="h-full m-0">
-                    <LayoutTreeDataGrid
-                        layout={currentModel.layout}
-                        layoutItems={layoutItems}  // Add this
-                        setLayoutItems={setLayoutItems}  // Add this
-                        onChange={handleLayoutDataUpdate}
-                    />
-                  </TabsContent>
-                  <TabsContent value="layout-json" className="h-full m-0">
-                    <MonacoEditor
-                        id={`layout-json-${model.id}`}
-                        value={editorContents.layout}
-                        language="json"
-                        onChange={(value) => {
-                          setEditorContents(prev => ({...prev, layout: value}));
-                          setCurrentModel(prev => ({...prev, layout: JSON.parse(value)}));
-                        }}
-                        height="full"
-                    />
-                  </TabsContent>
-                  <TabsContent value="pre-request" className="h-full m-0">
-                    <MonacoEditor
-                        id={`pre-request-${model.id}`}
-                        value={editorContents.preRequestScript}
-                        language="javascript"
-                        onChange={(value) => {
-                          setEditorContents(prev => ({...prev, preRequestScript: value}));
-                          setCurrentModel(prev => ({...prev, preRequestScript: value}));
-                        }}
-                        height="full"
-                    />
-                  </TabsContent>
+                    {/* Post-Request Tab Content */}
+                    <TabsContent value="post-request" className="h-full m-0">
+                      <MonacoEditor
+                          id={`post-request-${model.id}`}
+                          value={editorContents.postRequestScript}
+                          language="javascript"
+                          onChange={(value) => {
+                            setEditorContents(prev => ({...prev, postRequestScript: value}));
+                            setCurrentModel(prev => ({...prev, postRequestScript: value}));
+                          }}
+                          height="300px"
+                      />
+                    </TabsContent>
+                  </div>
+                </Tabs>
 
-                  {/* Post-Request Tab Content */}
-                  <TabsContent value="post-request" className="h-full m-0">
-                    <MonacoEditor
-                        id={`post-request-${model.id}`}
-                        value={editorContents.postRequestScript}
-                        language="javascript"
-                        onChange={(value) => {
-                          setEditorContents(prev => ({...prev, postRequestScript: value}));
-                          setCurrentModel(prev => ({...prev, postRequestScript: value}));
-                        }}
-                        height="full"
-                    />
-                  </TabsContent>
+                <Separator className="my-4" />
+
+                <div className="flex-none">
+                  <div className="font-medium mb-2">Request Body</div>
+                  <MonacoEditor
+                      id={`request-body-${model.id}`}
+                      value={currentModel.requestBody}
+                      language="plaintext"
+                      onChange={(newValue) => {
+                        setCurrentModel(prev => ({
+                          ...prev,
+                          requestBody: newValue
+                        }));
+                      }}
+                      height="150px"
+                  />
+                  <div className="mt-2 text-sm text-gray-600">
+                    <strong>전체 메시지 길이:</strong> {currentModel.requestBody?.length || 0}
+                  </div>
                 </div>
-              </Tabs>
+              </CardContent>
+            </Card>
 
-              <Separator className="my-4" />
+            {/* 응답 영역 */}
+            <Card className="flex flex-col">
+              <CardHeader className="p-4 pb-2">
+                <CardTitle className="flex items-center gap-2">
+                  <span>Response</span>
+                  <span className="text-sm font-normal text-gray-500">{responseData.status}</span>
+                  <span className="text-sm font-normal text-gray-500">{responseData.time}</span>
+                  <span className="text-sm font-normal text-gray-500">{responseData.size}</span>
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="flex flex-col flex-1 p-4 pt-2 min-h-0">
+                <Tabs
+                    value={currentResponseTab}
+                    onValueChange={setCurrentResponseTab}
+                    className="flex flex-col flex-1"
+                >
+                  <TabsList>
+                    <TabsTrigger value="response-body">Body</TabsTrigger>
+                    <TabsTrigger value="console">Console</TabsTrigger>
+                  </TabsList>
 
-              <div className="flex-none">
-                <div className="font-medium mb-2">Request Body</div>
-                <MonacoEditor
-                    id={`request-body-${model.id}`}
-                    value={currentModel.requestBody}
-                    language="plaintext"
-                    onChange={(newValue) => {
-                      setCurrentModel(prev => ({
-                        ...prev,
-                        requestBody: newValue
-                      }));
-                    }}
-                    height="200px"
-                />
-                <div className="mt-2 text-sm text-gray-600">
-                  <strong>전체 메시지 길이:</strong> {currentModel.requestBody?.length || 0}
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-
-          {/* 응답 영역 */}
-          <Card className="flex flex-col">
-            <CardHeader className="p-4 pb-2">
-              <CardTitle className="flex items-center gap-2">
-                <span>Response</span>
-                <span className="text-sm font-normal text-gray-500">{responseData.status}</span>
-                <span className="text-sm font-normal text-gray-500">{responseData.time}</span>
-                <span className="text-sm font-normal text-gray-500">{responseData.size}</span>
-              </CardTitle>
-            </CardHeader>
-            <CardContent className="flex flex-col flex-1 p-4 pt-2 min-h-0">
-              <Tabs
-                  value={currentResponseTab}
-                  onValueChange={setCurrentResponseTab}
-                  className="flex flex-col flex-1"
-              >
-                <TabsList>
-                  <TabsTrigger value="response-body">Body</TabsTrigger>
-                  <TabsTrigger value="console">Console</TabsTrigger>
-                </TabsList>
-
-                <div className="flex-1 min-h-0 mt-2">
-                  <TabsContent value="response-body" className="h-full m-0">
-                    <MonacoEditor
-                        id={`response-body-${model.id}`}
-                        value={editorContents.responseBody}
-                        readOnly={true}
-                        height="full"
-                    />
-                  </TabsContent>
-                  <TabsContent value="console" className="h-full m-0">
-                    <MonacoEditor
-                        id={`console-${model.id}`}
-                        value={editorContents.consoleLog}
-                        language="plaintext"
-                        readOnly={true}
-                        height="full"
-                    />
-                  </TabsContent>
-                </div>
-              </Tabs>
-            </CardContent>
-          </Card>
-        </div>
+                  <div className="flex-1 min-h-0 mt-2">
+                    <TabsContent value="response-body" className="h-full m-0">
+                      <MonacoEditor
+                          id={`response-body-${model.id}`}
+                          value={editorContents.responseBody}
+                          readOnly={true}
+                          height="250px"
+                      />
+                    </TabsContent>
+                    <TabsContent value="console" className="h-full m-0">
+                      <MonacoEditor
+                          id={`console-${model.id}`}
+                          value={editorContents.consoleLog}
+                          language="plaintext"
+                          readOnly={true}
+                          height="250px"
+                      />
+                    </TabsContent>
+                  </div>
+                </Tabs>
+              </CardContent>
+            </Card>
+          </div>
+        </ScrollArea>
       </div>
   );
 };
diff --git a/TestMasterUI/src/components/layout/FlatLayoutManager.jsx b/TestMasterUI/src/components/layout/FlatLayoutManager.jsx
new file mode 100644
index 0000000..6bae638
--- /dev/null
+++ b/TestMasterUI/src/components/layout/FlatLayoutManager.jsx
@@ -0,0 +1,102 @@
+import React, { useState, useCallback } from 'react';
+import LayoutGrid from '@/components/layout/LayoutGrid';
+import LayoutTreeGrid from '@/components/layout/LayoutTreeGrid';
+import LayoutTreeDataGrid from '@/components/layout/LayoutTreeDataGrid';
+import MonacoEditor from '@/components/shared/MonacoEditor';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+
+const FlatLayoutManager = ({
+  initialLayout,
+  onLayoutChange,
+  onLayoutDataChange,
+  onRequestBodyChange,
+  modelId
+}) => {
+  const [currentLayout, setCurrentLayout] = useState(initialLayout);
+  const [layoutItems, setLayoutItems] = useState(initialLayout?.layoutItems || []);
+  const [layoutJson, setLayoutJson] = useState(
+      JSON.stringify(initialLayout, null, 2)
+  );
+
+  // Shared layout update handler
+  const handleLayoutUpdate = useCallback((updatedLayout) => {
+    // Clear the computed tree when layout changes
+    const layoutToUpdate = {
+      ...updatedLayout,
+      computedLayoutItemRoot: null  // Clear the computed tree
+    };
+    setCurrentLayout(layoutToUpdate);
+    setLayoutItems(layoutToUpdate.layoutItems);
+    setLayoutJson(JSON.stringify(layoutToUpdate, null, 2));
+    onLayoutChange?.(layoutToUpdate);
+  }, [onLayoutChange]);
+
+  // Layout data update handler (for LayoutTreeDataGrid)
+  const handleLayoutDataUpdate = useCallback((updatedLayout) => {
+    setCurrentLayout(updatedLayout);
+    setLayoutItems(updatedLayout.layoutItems);
+    setLayoutJson(JSON.stringify(updatedLayout, null, 2));
+    onLayoutDataChange?.(updatedLayout);
+  }, [onLayoutDataChange]);
+
+  // JSON editor change handler
+  const handleJsonChange = useCallback((value) => {
+    try {
+      const parsedLayout = JSON.parse(value);
+      setLayoutJson(value);
+      setCurrentLayout(parsedLayout);
+      setLayoutItems(parsedLayout.layoutItems || []);
+      onLayoutChange?.(parsedLayout);
+    } catch (error) {
+      console.error('Invalid JSON:', error);
+    }
+  }, [onLayoutChange]);
+
+  return (
+      <Tabs defaultValue="grid">
+        <TabsList>
+          <TabsTrigger value="grid">Layout</TabsTrigger>
+          <TabsTrigger value="tree">Layout Tree</TabsTrigger>
+          <TabsTrigger value="data">Layout Data</TabsTrigger>
+          <TabsTrigger value="json">Layout JSON</TabsTrigger>
+        </TabsList>
+
+        <div className="flex-1 min-h-0 mt-2">
+          <TabsContent value="grid" className="h-full m-0">
+            <LayoutGrid
+                layout={currentLayout}
+                layoutItems={layoutItems}
+                setLayoutItems={setLayoutItems}
+                onChange={handleLayoutUpdate}
+            />
+          </TabsContent>
+
+          <TabsContent value="tree" className="h-full m-0">
+            <LayoutTreeGrid
+                layout={currentLayout}
+                layoutItems={layoutItems}
+            />
+          </TabsContent>
+
+          <TabsContent value="data" className="h-full m-0">
+            <LayoutTreeDataGrid
+                layout={currentLayout}
+                onChange={handleLayoutDataUpdate}
+            />
+          </TabsContent>
+
+          <TabsContent value="json" className="h-full m-0">
+            <MonacoEditor
+                id={`layout-json-${modelId}`}
+                value={layoutJson}
+                language="json"
+                onChange={handleJsonChange}
+                height="300px"
+            />
+          </TabsContent>
+        </div>
+      </Tabs>
+  );
+};
+
+export default FlatLayoutManager;