diff --git a/apps/design-system/src/components/visualeditor.stories.tsx b/apps/design-system/src/components/visualeditor.stories.tsx
index dcafb2773..b8596ee10 100644
--- a/apps/design-system/src/components/visualeditor.stories.tsx
+++ b/apps/design-system/src/components/visualeditor.stories.tsx
@@ -84,6 +84,29 @@ export const WithObject = () => (
 
 
 
+export const WithArray_obj = () => (
+  <Template
+    initialSchema={JSON.stringify({
+      "type": "object",
+      "properties": {
+        "books": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "properties": {
+              "title": {
+                "type": "string"
+              },
+              "author": {
+                "type": "string"
+              }
+            }
+          }
+        }
+      }
+    }, null, 2)}
+  />
+);
 
 export const WithArray_obj_and_obj = () => (
   <Template
diff --git a/packages/ui/components/PropertyControls.tsx b/packages/ui/components/PropertyControls.tsx
index 4a028e9a4..8baaa2a58 100644
--- a/packages/ui/components/PropertyControls.tsx
+++ b/packages/ui/components/PropertyControls.tsx
@@ -58,14 +58,15 @@ const PropertyControls: React.FC<PropertyControlsProps> = ({ onAdd, schemaPath,
   };
 
   return (
-    <div style={{ marginLeft: `${level * 20}px` }}>
-      <div>
-        <input
-          type="text"
-          value={key}
-          onChange={(e) => setKey(e.target.value)}
-          placeholder="Property name"
-        />
+    <div style={{ marginLeft: `${level * 20}px` }} className="border-l border-extendedblue-gray800 pl-[10px]">
+        <div className="flex gap-[6px] items-center mt-[6px] mb-[6px]">
+            <input
+                type="text"
+                value={key}
+                onChange={(e) => setKey(e.target.value)}
+                placeholder="Property name"
+                className="[font-family:'Inter',Helvetica] text-extendedblue-gray300 bg-extendedblue-gray800 border border-extendedblue-gray700 rounded-[3px] p-[2px] text-[12px]"
+            />
         <select value={type} onChange={(e) => setType(e.target.value)}>
           <option value="">Select type</option>
           <option value="string">String</option>
@@ -84,9 +85,9 @@ const PropertyControls: React.FC<PropertyControlsProps> = ({ onAdd, schemaPath,
           </select>
         )}
         <button onClick={handleAddProperty}>Add Property</button>
-      </div>
-      {error && <p style={{ color: 'red' }}>{error}</p>}
-    </div>
+        </div>
+            {error && <p className="text-extendedred-700">{error}</p>}
+        </div>
   );
 };
 
diff --git a/packages/ui/components/SchemaProperty.tsx b/packages/ui/components/SchemaProperty.tsx
index c5775f099..b4fc76ab9 100644
--- a/packages/ui/components/SchemaProperty.tsx
+++ b/packages/ui/components/SchemaProperty.tsx
@@ -92,9 +92,13 @@ const SchemaProperty: React.FC<SchemaPropertyProps> = ({
 
     return (
         <div style={{ marginLeft: `${level * 20}px`, borderLeft: '1px solid grey', paddingLeft: '10px' }}>
-            <div>
-                <strong>{name}</strong> - Type: 
-                <select value={schema.type} onChange={handleTypeChange}>
+            <div className="flex items-center gap-[6px]">
+                <strong className="[font-family:'Inter',Helvetica] font-medium text-extendedblue-gray300">{name}</strong>
+                <select
+                    value={schema.type}
+                    onChange={handleTypeChange}
+                    className="[font-family:'Inter',Helvetica] text-extendedblue-gray300 bg-extendedblue-gray800 border border-extendedblue-gray700 rounded-[3px] p-[2px] text-[12px]"
+                >
                     <option value="string">String</option>
                     <option value="number">Number</option>
                     <option value="boolean">Boolean</option>
diff --git a/packages/ui/components/VisualEditor.tsx b/packages/ui/components/VisualEditor.tsx
index 0dfa522c8..1f84f8813 100644
--- a/packages/ui/components/VisualEditor.tsx
+++ b/packages/ui/components/VisualEditor.tsx
@@ -91,8 +91,8 @@ export const VisualEditor: React.FC<VisualEditorProps> = ({ schema, onSchemaChan
     };
 
     return (
-        <div className="visual-editor">
-            <h2>Visual Editor</h2>
+        <div className="visual-editor border border-solid border-extendedblue-gray800 bg-extendedblue-gray900 text-defaultyellow-500 p-4 rounded-md">
+            <h2 className="[font-family:'Inter',Helvetica] font-medium text-extendedblue-gray300 text-[16px] leading-[19px] mb-[10px]">Visual Editor</h2>
             {renderRootTypeSelector()}
             {renderArrayItemTypeSelector()}