diff --git a/components/FormBuilderFieldSettingsModal.vue b/components/FormBuilderFieldSettingsModal.vue
index b030566..1222ebf 100644
--- a/components/FormBuilderFieldSettingsModal.vue
+++ b/components/FormBuilderFieldSettingsModal.vue
@@ -306,93 +306,6 @@
               </div>
             </div>
 
-            <!-- Layout & Appearance Section -->
-            <div v-if="showField('width')" class="settings-section">
-              <div class="section-header">
-                <h4 class="section-title">
-                  <Icon name="heroicons:squares-2x2" class="w-5 h-5 mr-2" />
-                  Layout & Size
-                </h4>
-                <p class="section-description">Control how this field appears in your form</p>
-              </div>
-              
-              <div class="section-content">
-                <div>
-                  <label class="block text-sm font-medium text-gray-700 mb-3">Field Width</label>
-                  
-                  <!-- Width Options with Visual Grid Preview -->
-                  <div class="width-selector">
-                    <div 
-                      v-for="option in widthOptions" 
-                      :key="option.value"
-                      @click="setComponentWidth(option.value, option.gridColumns)"
-                      class="width-option"
-                      :class="{
-                        'selected': getComponentWidthPercent() === option.value,
-                        'recommended': isRecommendedWidth(option.type)
-                      }"
-                    >
-                      <!-- Visual Grid Preview -->
-                      <div class="grid-preview">
-                        <div class="grid-container-mini">
-                          <div 
-                            v-for="i in 12" 
-                            :key="i"
-                            class="grid-cell"
-                            :class="{
-                              'active': i <= option.gridColumns,
-                              'inactive': i > option.gridColumns
-                            }"
-                          ></div>
-                        </div>
-                      </div>
-                      
-                      <!-- Option Info -->
-                      <div class="option-info">
-                        <div class="option-name">
-                          {{ option.name }}
-                          <span v-if="isRecommendedWidth(option.type)" class="recommended-badge">
-                            Recommended
-                          </span>
-                        </div>
-                        <div class="option-description">{{ option.description }}</div>
-                        <div class="option-use-case">{{ option.useCase }}</div>
-                      </div>
-                    </div>
-                  </div>
-                  
-                  <!-- Current Selection Feedback -->
-                  <div class="current-selection-feedback">
-                    <div class="feedback-row">
-                      <span class="feedback-label">Current width:</span>
-                      <span class="feedback-value">{{ getCurrentWidthOption()?.name || 'Custom' }}</span>
-                    </div>
-                    <div class="feedback-row">
-                      <span class="feedback-label">Grid columns:</span>
-                      <span class="feedback-value">{{ getCurrentGridColumns() }} of 12</span>
-                    </div>
-                    
-                    <!-- Visual representation -->
-                    <div class="current-width-visual">
-                      <div class="visual-grid">
-                        <div 
-                          v-for="i in 12" 
-                          :key="i"
-                          class="visual-cell"
-                          :class="{
-                            'filled': i <= getCurrentGridColumns(),
-                            'empty': i > getCurrentGridColumns()
-                          }"
-                        ></div>
-                      </div>
-                      <div class="visual-label">
-                        {{ getCurrentGridColumns() }}/12 columns ({{ configModel.width || '100%' }})
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
 
             <!-- Component-Specific Settings -->
             <div v-if="hasSpecificSettings" class="settings-section">
@@ -2459,6 +2372,61 @@ if (this.element.querySelector('.file-upload')) {
             </div>
           </div>
 
+          <!-- Layout Tab -->
+          <div v-if="activeTab === 'layout'" class="space-y-6">
+            <div class="settings-section">
+              <div class="section-header">
+                <h4 class="section-title">
+                  <Icon name="heroicons:squares-2x2" class="w-5 h-5 mr-2" />
+                  Layout & Size
+                </h4>
+                <p class="section-description">Control how this field appears in your form</p>
+              </div>
+              
+              <div class="section-content">
+                <div>
+                  <label class="block text-sm font-medium text-gray-700 mb-3">Field Width</label>
+                  
+                  <!-- Compact Width Selector -->
+                  <div class="width-selector-compact">
+                    <!-- Button Group for Width Selection -->
+                    <div class="width-buttons">
+                      <button
+                        v-for="option in widthOptions" 
+                        :key="option.value"
+                        @click="setComponentWidth(option.value, option.gridColumns)"
+                        type="button"
+                        class="width-button"
+                        :class="{
+                          'active': getComponentWidthPercent() === option.value,
+                          'recommended': isRecommendedWidth(option.type)
+                        }"
+                        :title="option.useCase"
+                      >
+                        <div class="width-visual">
+                          <div class="width-bar" :style="{ width: option.value + '%' }"></div>
+                        </div>
+                        <span class="width-label">{{ option.name }}</span>
+                      </button>
+                    </div>
+                    
+                    <!-- Simple Visual Preview -->
+                    <div class="width-preview">
+                      <div class="preview-container">
+                        <div class="preview-field" :style="{ width: getComponentWidthPercent() + '%' }">
+                          <div class="preview-input"></div>
+                        </div>
+                      </div>
+                      <div class="preview-info">
+                        {{ getCurrentWidthOption()?.name || 'Custom' }} ({{ getComponentWidthPercent() }}%)
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
           <!-- Validation Tab -->
           <div v-if="activeTab === 'validation'" class="space-y-6">
             <div class="settings-section">
@@ -2931,6 +2899,11 @@ const availableTabs = computed(() => {
     { id: 'basic', label: 'Basic Settings', icon: 'heroicons:cog-6-tooth' }
   ]
   
+  // Add layout tab for components that support width settings
+  if (showField('width')) {
+    tabs.push({ id: 'layout', label: 'Layout', icon: 'heroicons:squares-2x2' })
+  }
+  
   if (hasOptions.value) {
     tabs.push({ id: 'options', label: 'Options', icon: 'heroicons:list-bullet' })
   }
@@ -4082,6 +4055,84 @@ const getDefaultPropsForType = (type) => {
   @apply flex justify-between items-center py-1;
 }
 
+/* Compact Width Selection - New Styles */
+.width-selector-compact {
+  @apply space-y-4;
+}
+
+.width-buttons {
+  @apply flex flex-wrap gap-2;
+}
+
+.width-button {
+  @apply flex-1 min-w-0 px-3 py-2 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition-all duration-200 cursor-pointer text-center relative;
+}
+
+.width-button.active {
+  @apply border-blue-500 bg-blue-50 ring-1 ring-blue-200;
+}
+
+.width-button.recommended::before {
+  content: '';
+  @apply absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full;
+}
+
+.width-button.active.recommended {
+  @apply border-green-500 bg-green-50 ring-1 ring-green-200;
+}
+
+.width-visual {
+  @apply w-full h-1.5 bg-gray-100 rounded-sm mb-2 overflow-hidden;
+}
+
+.width-bar {
+  @apply h-full bg-blue-500 rounded-sm transition-all duration-300;
+}
+
+.width-button.active .width-bar {
+  @apply bg-blue-600;
+}
+
+.width-button.recommended .width-bar {
+  @apply bg-green-500;
+}
+
+.width-button.active.recommended .width-bar {
+  @apply bg-green-600;
+}
+
+.width-label {
+  @apply text-sm font-medium text-gray-700;
+}
+
+.width-button.active .width-label {
+  @apply text-blue-700;
+}
+
+.width-button.recommended .width-label {
+  @apply text-green-700;
+}
+
+.width-preview {
+  @apply mt-4 p-3 bg-gray-50 rounded-lg border;
+}
+
+.preview-container {
+  @apply w-full bg-white rounded border p-2 mb-2;
+}
+
+.preview-field {
+  @apply transition-all duration-300;
+}
+
+.preview-input {
+  @apply w-full h-8 border border-gray-100 rounded px-2 bg-blue-600;
+}
+
+.preview-info {
+  @apply text-sm text-gray-600 text-center;
+}
+
 .feedback-label {
   @apply text-sm font-medium text-gray-600;
 }