diff --git a/enum.js b/enum.js
index 65b485e..1cf996a 100644
--- a/enum.js
+++ b/enum.js
@@ -41,6 +41,10 @@ const BackgroundHistoryEnum = {
     NoBackground: 'no_background',
 }
 
+const PresetTypeEnum = {
+    SDPreset: 'sd_preset',
+    ControlNetPreset: 'controlnet_preset',
+}
 module.exports = {
     clickTypeEnum,
     generationModeEnum,
@@ -49,4 +53,5 @@ module.exports = {
     RequestStateEnum,
     DocumentTypeEnum,
     BackgroundHistoryEnum,
+    PresetTypeEnum,
 }
diff --git a/index.html b/index.html
index 46b36ad..d3ae786 100644
--- a/index.html
+++ b/index.html
@@ -1692,6 +1692,25 @@
                     >
                         New Preset
                     </button>
+                    <div>
+                        <sp-radio-group id="rgPresetType">
+                            <sp-label slot="label">Preset Type:</sp-label>
+                            <!-- <sp-label slot="label">Select a Mode:</sp-label> -->
+                            <sp-radio
+                                title="Use to create Stable Diffusion tab Preset"
+                                class="rbPresetType"
+                                value="sd_preset"
+                                >SD Preset</sp-radio
+                            >
+                            <sp-radio
+                                title="Use to create a ControlNet preset"
+                                class="rbPresetType"
+                                value="controlnet_preset"
+                                checked
+                                >ControlNet Preset</sp-radio
+                            >
+                        </sp-radio-group>
+                    </div>
                     <button
                         class="btnSquare"
                         id="btnEditPresetName"
diff --git a/utility/presets/preset.js b/utility/presets/preset.js
index d423ccb..a8ee68e 100644
--- a/utility/presets/preset.js
+++ b/utility/presets/preset.js
@@ -1,5 +1,7 @@
 const io = require('../io')
 const html_manip = require('../html_manip')
+const Enum = require('../../enum')
+const control_net = require('../../utility/tab/control_net')
 let settings = {
     model: null,
     prompt_shortcut: null,
@@ -140,7 +142,7 @@ function setPresetSettingsHtml(preset_settings) {
 
     const new_lines_count = general.countNewLines(JSONInPrettyFormat)
     new_lines_count
-    preset_settings_element.style.height = new_lines_count * 10 + 100
+    preset_settings_element.style.height = new_lines_count * 12 + 100
 }
 
 function getPresetName() {
@@ -150,10 +152,30 @@ function getPresetName() {
 function setPresetName(preset_name) {
     document.getElementById('tiPresetName').value = preset_name
 }
+
+function getPresetSettings(preset_type) {
+    let preset_settings
+    if (preset_type === Enum.PresetTypeEnum['SDPreset']) {
+        preset_settings = g_ui_settings_object.getSettings()
+    } else if (preset_type === Enum.PresetTypeEnum['ControlNetPreset']) {
+        preset_settings = control_net.ControlNetUnit.getUnits()
+    }
+    return preset_settings
+}
+
+function getPresetType() {
+    const presetType = document.getElementById('rgPresetType').selected
+
+    return presetType
+}
 document.getElementById('btnNewPreset').addEventListener('click', () => {
     // const g_ui_settings_object = getUISettingsObject()
-    const settings = g_ui_settings_object.getSettings()
-    setPresetSettingsHtml(settings)
+    const preset_type = getPresetType()
+    const preset_settings = getPresetSettings(preset_type)
+
+    // const settings = g_ui_settings_object.getSettings()
+
+    setPresetSettingsHtml(preset_settings)
 
     const preset_name = getPresetName()
     setPresetNameLabel(preset_name)