diff --git a/src/app/globals.css b/src/app/globals.css
index b245970..22477ea 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -179,3 +179,55 @@
   overflow-y: auto;
   overflow-x: hidden;
 }
+
+/* Compact properties cards */
+.properties-panel-scroll .max-w-sm {
+  max-width: 280px;
+  min-height: auto;
+}
+
+.properties-panel-scroll .space-y-4 > * + * {
+  margin-top: 0.75rem;
+}
+
+.properties-panel-scroll .space-y-2 > * + * {
+  margin-top: 0.375rem;
+}
+
+/* Reduce card header and content height */
+.properties-panel-scroll .max-w-sm .pb-2 {
+  padding-bottom: 0.375rem;
+}
+
+.properties-panel-scroll .max-w-sm .pt-3 {
+  padding-top: 0.5rem;
+}
+
+.properties-panel-scroll .max-w-sm .px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.properties-panel-scroll .max-w-sm .pb-3 {
+  padding-bottom: 0.5rem;
+}
+
+/* Additional compact styling */
+.properties-panel-scroll .space-y-3 > * + * {
+  margin-top: 0.5rem;
+}
+
+.properties-panel-scroll .space-y-1\.5 > * + * {
+  margin-top: 0.25rem;
+}
+
+/* Reduce text size for more compact look */
+.properties-panel-scroll .text-sm {
+  font-size: 0.8rem;
+  line-height: 1.2;
+}
+
+.properties-panel-scroll .text-xs {
+  font-size: 0.7rem;
+  line-height: 1.1;
+}
diff --git a/src/components/ai/AICustomFeatureCreator.tsx b/src/components/ai/AICustomFeatureCreator.tsx
index 18883dc..0e893c0 100644
--- a/src/components/ai/AICustomFeatureCreator.tsx
+++ b/src/components/ai/AICustomFeatureCreator.tsx
@@ -45,7 +45,6 @@ export function AICustomFeatureCreator({
   const [requirements, setRequirements] = useState<Array<{ text: string; rules: string[] }>>([
     { text: '', rules: [] },
   ])
-  const [logicRules, setLogicRules] = useState<string[]>([])
   const [analyzingIdx, setAnalyzingIdx] = useState<number | null>(null)
 
   const handleAnalyze = async () => {
@@ -74,8 +73,6 @@ export function AICustomFeatureCreator({
         confidence_score: 0.9,
       })
 
-      // Capture dynamic logic rules (editable)
-      setLogicRules(Array.isArray(overall.logicRules) ? overall.logicRules : [])
 
       // Generate logic rules per requirement in parallel and attach to each requirement
       const perRequirementRules = await Promise.all(
@@ -269,31 +266,6 @@ export function AICustomFeatureCreator({
               </div>
             )}
 
-            {aiAnalysis && (
-              <div>
-                <label className="block text-sm text-white/70 mb-2">Logic Rules (AI-generated, editable)</label>
-                <div className="space-y-2">
-                  {logicRules.map((rule, idx) => (
-                    <div key={idx} className="flex items-center gap-2">
-                      <div className="text-white/60 text-xs w-8">R{idx + 1}</div>
-                      <Input
-                        value={rule}
-                        onChange={(e) => {
-                          const next = [...logicRules]
-                          next[idx] = e.target.value
-                          setLogicRules(next)
-                        }}
-                        className="bg-white/10 border-white/20 text-white placeholder:text-white/40"
-                      />
-                      <button type="button" onClick={() => setLogicRules(logicRules.filter((_, i) => i !== idx))} className="text-white/50 hover:text-red-400">×</button>
-                    </div>
-                  ))}
-                </div>
-                <Button type="button" variant="outline" onClick={() => setLogicRules([...logicRules, ''])} className="mt-2 border-white/20 text-white hover:bg-white/10">
-                  + Add logic rule
-                </Button>
-              </div>
-            )}
             
             {/* Form Actions */}
             <div className="flex gap-3 flex-wrap items-center pt-4 border-t border-white/10">
diff --git a/src/components/properties-panel.tsx b/src/components/properties-panel.tsx
index 0415169..bed17d9 100644
--- a/src/components/properties-panel.tsx
+++ b/src/components/properties-panel.tsx
@@ -178,13 +178,13 @@ export function PropertiesPanel() {
       </div>
 
       <ScrollArea className="flex-1 properties-panel-scroll">
-        <div className="p-4 space-y-6">
+        <div className="p-2 space-y-3">
           {/* Component Info */}
-          <Card>
-            <CardHeader className="pb-3">
+          <Card className="w-full max-w-sm">
+            <CardHeader className="pb-2 px-3 pt-3">
               <CardTitle className="text-sm font-medium">Component Info</CardTitle>
             </CardHeader>
-            <CardContent className="space-y-2">
+            <CardContent className="space-y-1.5 px-3 pb-3">
               <div>
                 <Label className="text-xs text-muted-foreground">Type</Label>
                 <p className="text-sm font-medium capitalize">{selectedComponent.type}</p>
@@ -197,19 +197,19 @@ export function PropertiesPanel() {
           </Card>
 
           {/* Properties */}
-          <Card>
-            <CardHeader className="pb-3">
+          <Card className="w-full max-w-sm">
+            <CardHeader className="pb-2 px-3 pt-3">
               <CardTitle className="text-sm font-medium">Properties</CardTitle>
             </CardHeader>
-            <CardContent>{renderPropertyEditor()}</CardContent>
+            <CardContent className="px-3 pb-3">{renderPropertyEditor()}</CardContent>
           </Card>
 
           {/* Position */}
-          <Card>
-            <CardHeader className="pb-3">
+          <Card className="w-full max-w-sm">
+            <CardHeader className="pb-2 px-3 pt-3">
               <CardTitle className="text-sm font-medium">Position</CardTitle>
             </CardHeader>
-            <CardContent className="space-y-4">
+            <CardContent className="space-y-3 px-3 pb-3">
               <div className="grid grid-cols-2 gap-2">
                 <div>
                   <Label htmlFor="pos-x" className="text-xs">
@@ -246,11 +246,11 @@ export function PropertiesPanel() {
           </Card>
 
           {/* Actions */}
-          <Card>
-            <CardHeader className="pb-3">
+          <Card className="w-full max-w-sm">
+            <CardHeader className="pb-2 px-3 pt-3">
               <CardTitle className="text-sm font-medium">Actions</CardTitle>
             </CardHeader>
-            <CardContent>
+            <CardContent className="px-3 pb-3">
               <Button variant="destructive" size="sm" onClick={handleDelete} className="w-full">
                 <Trash2 className="w-4 h-4 mr-2" />
                 Delete Component