diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5f29c902c..4ff08a751 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,6 +23,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Changed code at line 218 in covalent/_shared_files/utils.py
 - Fixed usage of deprecated pydantic validation methods
 - Fixed qelectron_db retrieval in result object
+- Fixed editability of Qelectron on settings page - UI changes
 - Certain pydantic v2 related updates
 - Fixed lattice's metadata propagation to electron's metadata in case no metadata was provided to the electron
 
diff --git a/covalent_ui/webapp/src/components/settings/SettingsCard.js b/covalent_ui/webapp/src/components/settings/SettingsCard.js
index 70c908904..b83c65227 100644
--- a/covalent_ui/webapp/src/components/settings/SettingsCard.js
+++ b/covalent_ui/webapp/src/components/settings/SettingsCard.js
@@ -78,6 +78,7 @@ const SettingsCard = () => {
   const [serverDetail, setServerDetail] = useState(null)
   const [tempData, setTempData] = useState(null)
   const [tempDataServer, setTempDataServer] = useState(null)
+  const [openMenuKey, setOpenMenuKey] = useState(null)
 
   useEffect(() => {
     dispatch(settingsResults())
@@ -169,7 +170,8 @@ const SettingsCard = () => {
     return childIsObject
   }
 
-  const handleClick = (item) => {
+  const handleClick = (item, args) => {
+    openMenuKey === args ? setOpenMenuKey(null) : setOpenMenuKey(args)
     _.map(item, function (value, _key) {
       if (_.isObject(value)) {
         setOpen(!open)
@@ -314,13 +316,19 @@ const SettingsCard = () => {
     setSubMenu(Object.values(settings_result)[0].executors)
   }
 
-  const handleSubmenuClick = (value, key) => {
+  const handleSubmenuClick = (value, key, args) => {
+
     setIsDisabled(false)
-    if (resultKey !== 'executors') {
+    setResultKey(args)
+
+    if (!key) {
       setValueChange(false)
-      setResultKey('executors')
       setResultOutput(value)
       setRestoreData(value)
+      // Check if the key is 'qelectron' and scroll into view
+      if (key) {
+        document.getElementById(key).scrollIntoView({ behavior: 'smooth' })
+      }
     } else {
       document.getElementById(key).scrollIntoView({ behavior: 'smooth' })
     }
@@ -443,7 +451,7 @@ const SettingsCard = () => {
                           data-testid="openMenu"
                           onClick={
                             isChildHasList
-                              ? () => handleClick(menuValue)
+                              ? () => handleClick(menuValue, menuKey)
                               : () => {}
                           }
                           sx={{
@@ -452,8 +460,13 @@ const SettingsCard = () => {
                           }}
                         >
                           {isChildHasList(menuValue) && (
-                            <ListItemIcon sx={{ minWidth: '45px', pl: 1 }}>
-                              {open ? (
+                            <ListItemIcon
+                              sx={{ minWidth: '45px', pl: 1 }}
+                              onClick={() =>
+                                menuClick(menuValue, menuKey, accName)
+                              }
+                            >
+                              {menuKey === openMenuKey && menuKey !== 'sdk' ? (
                                 <ExpandMore />
                               ) : (
                                 <KeyboardArrowRightIcon />
@@ -483,51 +496,60 @@ const SettingsCard = () => {
                           />
                         </ListItemButton>
                       </ListItem>
+                      {openMenuKey && (
+                        <Collapse
+                          in={menuKey === openMenuKey && menuKey !== 'sdk'}
+                          timeout="auto"
+                          unmountOnExit
+                        >
+                          <List component="div" disablePadding>
+                            {_.map(subMenu, function (value, key) {
+                              return (
+                                <StyledList sx={{ pb: 0, pt: 0 }} key={key}>
+                                  <ListItem
+                                    disablePadding
+                                    sx={{ lineHeight: '18px' }}
+                                  >
+                                    <ListItemButton
+                                      sx={{ pl: 7, pt: 0.3, pb: 0.3 }}
+                                      onClick={() =>
+                                        handleSubmenuClick(
+                                          subMenu,
+                                          key,
+                                          menuKey
+                                        )
+                                      }
+                                    >
+                                      <ListItemText
+                                        inset
+                                        primary={formatUnderscoreConcatenatedString(
+                                          key
+                                        )}
+                                        disableTypography
+                                        sx={{ pl: '0px', fontSize: '14px' }}
+                                      />
+                                    </ListItemButton>
+                                  </ListItem>
+                                </StyledList>
+                              )
+                            })}
+                          </List>
+                        </Collapse>
+                      )}
                     </StyledList>
                   )
                 })}
-
-                {open && (
-                  <Collapse in={open} timeout="auto" unmountOnExit>
-                    <List component="div" disablePadding>
-                      {_.map(subMenu, function (value, key) {
-                        return (
-                          <StyledList sx={{ pb: 0, pt: 0 }} key={key}>
-                            <ListItem
-                              disablePadding
-                              sx={{ lineHeight: '18px' }}
-                            >
-                              <ListItemButton
-                                sx={{ pl: 7, pt: 0.3, pb: 0.3 }}
-                                onClick={() => handleSubmenuClick(subMenu, key)}
-                              >
-                                <ListItemText
-                                  inset
-                                  primary={formatUnderscoreConcatenatedString(
-                                    key
-                                  )}
-                                  disableTypography
-                                  sx={{ pl: '0px', fontSize: '14px' }}
-                                />
-                              </ListItemButton>
-                            </ListItem>
-                          </StyledList>
-                        )
-                      })}
-                    </List>
-                  </Collapse>
-                )}
               </Box>
 
               <Box>
-                {_.map(serverDetail, function (menuValue, menuKey) {
+                {_.map(serverDetail, function (menuValue, menuKey, index) {
                   return (
-                    <StyledList sx={{ pb: 0, pt: 0 }} key={menuKey}>
+                    <StyledList sx={{ pb: 0, pt: 0 }} key={index}>
                       <ListItem disablePadding sx={{ lineHeight: '18px' }}>
                         <ListItemButton
                           onClick={
                             isChildHasList
-                              ? () => handleClick(menuValue)
+                              ? () => handleClick(menuValue, menuKey)
                               : () => {}
                           }
                           sx={{