diff --git a/src/components/utilities/CippActionsOffcanvas.jsx b/src/components/utilities/CippActionsOffcanvas.jsx
index 6bc9d896d71c..c2cab6d24539 100644
--- a/src/components/utilities/CippActionsOffcanvas.jsx
+++ b/src/components/utilities/CippActionsOffcanvas.jsx
@@ -40,7 +40,7 @@ export default function CippActionsOffcanvas(props) {
     (modalMessage, modalUrl, modalType = 'GET', modalBody, modalInput, modalDropdown) => {
       const handlePostConfirm = () => {
         const selectedValue = inputRef.current.value
-        console.log(inputRef)
+        //console.log(inputRef)
         let additionalFields = {}
 
         if (inputRef.current.nodeName === 'SELECT') {
diff --git a/src/components/utilities/CippJsonView.jsx b/src/components/utilities/CippJsonView.jsx
index 635da48a9cdf..90b7f9fe1fe2 100644
--- a/src/components/utilities/CippJsonView.jsx
+++ b/src/components/utilities/CippJsonView.jsx
@@ -1,8 +1,23 @@
-import React from 'react'
-import JsonView from '@uiw/react-json-view'
+import React, { useState } from 'react'
 import { useSelector } from 'react-redux'
 import { useMediaPredicate } from 'react-media-hook'
-import translator from 'src/data/translator.json'
+import JsonView from '@uiw/react-json-view'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import {
+  CAccordion,
+  CAccordionBody,
+  CAccordionHeader,
+  CAccordionItem,
+  CCard,
+  CCardBody,
+  CCardHeader,
+  CCardTitle,
+  CCol,
+  CFormSwitch,
+  CRow,
+} from '@coreui/react'
+import translator from 'src/data/translator.json' // Ensure the path to your translator.json is correct
+
 const githubLightTheme = {
   '--w-rjv-font-family': 'monospace',
   '--w-rjv-color': '#6f42c1',
@@ -64,10 +79,10 @@ export const githubDarkTheme = {
   '--w-rjv-type-nan-color': '#859900',
   '--w-rjv-type-undefined-color': '#79c0ff',
 }
+
 const matchPattern = (key, patterns) => {
   return patterns.some((pattern) => {
     if (pattern.includes('*')) {
-      // Replace * with regex that matches any character sequence and create a RegExp object
       const regex = new RegExp(`^${pattern.replace(/\*/g, '.*')}$`, 'i')
       return regex.test(key)
     }
@@ -75,42 +90,100 @@ const matchPattern = (key, patterns) => {
   })
 }
 
+const removeNullOrEmpty = (obj) => {
+  if (Array.isArray(obj)) {
+    const filteredArray = obj.filter((item) => item != null).map(removeNullOrEmpty)
+    return filteredArray.length > 0 ? filteredArray : null
+  } else if (typeof obj === 'object' && obj !== null) {
+    const result = Object.entries(obj).reduce((acc, [key, value]) => {
+      const processedValue = removeNullOrEmpty(value)
+      if (processedValue != null) {
+        acc[key] = processedValue
+      }
+      return acc
+    }, {})
+    return Object.keys(result).length > 0 ? result : null
+  }
+  return obj
+}
+
 const translateAndRemoveKeys = (obj, removePatterns = []) => {
+  obj = removeNullOrEmpty(obj)
   if (Array.isArray(obj)) {
     return obj.map((item) => translateAndRemoveKeys(item, removePatterns))
-  } else if (obj !== null && typeof obj === 'object') {
+  } else if (typeof obj === 'object' && obj !== null) {
     return Object.entries(obj).reduce((acc, [key, value]) => {
-      // Check if the key matches any removal pattern
       if (!matchPattern(key, removePatterns)) {
         const translatedKey =
           translator[key.toLowerCase()] ||
           key.replace(/([A-Z])/g, ' $1').replace(/^./, (str) => str.toUpperCase())
-        acc[translatedKey] = translateAndRemoveKeys(value, removePatterns) // Recursively process
+        acc[translatedKey] = translateAndRemoveKeys(value, removePatterns)
       }
       return acc
     }, {})
   }
   return obj
 }
+function renderObjectAsColumns(object, level = 0, maxLevel = 4) {
+  const content = []
+  let nextLevelObject = null
+
+  for (const [key, value] of Object.entries(object)) {
+    if (level < maxLevel && typeof value === 'object' && value !== null && !Array.isArray(value)) {
+      nextLevelObject = value // Prepare the next level's object for rendering
+      continue // Skip to avoid rendering this as a separate card
+    }
+
+    // Render current level key-value pairs
+    content.push(
+      <CCol key={`${key}-${level}`}>
+        <CCard>
+          <CCardHeader>{key}</CCardHeader>
+          <CCardBody>{JSON.stringify(value, null, 2)}</CCardBody>
+        </CCard>
+      </CCol>,
+    )
+  }
+
+  return (
+    <>
+      {content}
+      {nextLevelObject && renderObjectAsColumns(nextLevelObject, level + 1, maxLevel)}
+    </>
+  )
+}
 
-function CippJsonView({ object, removeKeys = ['*@odata*'] }) {
-  const currentTheme = useSelector((state) => state.app.currentTheme)
-  const preferredTheme = useMediaPredicate('(prefers-color-scheme: dark)') ? 'impact' : 'cyberdrain'
+function CippJsonView({
+  jsonData = { 'No Data Selected': 'No Data Selected' },
+  removeKeys = ['*@odata*', 'id', 'guid', 'createdDateTime', '*modified*', 'deletedDateTime'],
+}) {
+  const [showRawJson, setShowRawJson] = useState(false)
   const theme =
-    currentTheme === 'impact' || (currentTheme === preferredTheme) === 'impact'
-      ? githubDarkTheme
-      : githubLightTheme
-  const translatedObject = translateAndRemoveKeys(object, removeKeys)
-  console.log('translatedObject', translatedObject)
+    useSelector((state) => state.app.currentTheme) === 'dark' ? githubDarkTheme : githubLightTheme
+  const cleanedJsonData = translateAndRemoveKeys(jsonData, removeKeys)
 
   return (
-    <JsonView
-      value={translatedObject}
-      collapsed={1}
-      displayDataTypes={false}
-      displayObjectSize={false}
-      style={{ ...theme }}
-    />
+    <div className="mb-3">
+      <CAccordion alwaysOpen>
+        <CAccordionItem itemKey="general-1">
+          <CAccordionHeader>Settings</CAccordionHeader>
+          <CAccordionBody>
+            <CFormSwitch label="View as code" onChange={() => setShowRawJson(!showRawJson)} />
+            {showRawJson ? (
+              <JsonView
+                value={jsonData}
+                collapsed={1}
+                displayDataTypes={false}
+                displayObjectSize={false}
+                style={{ ...theme }}
+              />
+            ) : (
+              <CRow>{renderObjectAsColumns(cleanedJsonData)}</CRow>
+            )}
+          </CAccordionBody>
+        </CAccordionItem>
+      </CAccordion>
+    </div>
   )
 }
 
diff --git a/src/components/utilities/CippListOffcanvas.jsx b/src/components/utilities/CippListOffcanvas.jsx
index b27c1ed3dbd4..4fbde6931ce3 100644
--- a/src/components/utilities/CippListOffcanvas.jsx
+++ b/src/components/utilities/CippListOffcanvas.jsx
@@ -39,7 +39,7 @@ CippListOffcanvas.propTypes = {
 }
 
 export function OffcanvasListSection({ title, items }) {
-  console.log(items)
+  //console.log(items)
   const mappedItems = items.map((item, key) => ({ value: item.content, label: item.heading }))
   return (
     <>
diff --git a/src/components/utilities/CippOffcanvas.jsx b/src/components/utilities/CippOffcanvas.jsx
index d3eaece82e94..eb20726fbfbe 100644
--- a/src/components/utilities/CippOffcanvas.jsx
+++ b/src/components/utilities/CippOffcanvas.jsx
@@ -23,7 +23,7 @@ export default function CippOffcanvas(props) {
               color="link"
               size="lg"
               onClick={() => {
-                console.log('refresh')
+                //console.log('refresh')
                 props.refreshFunction()
               }}
             >
diff --git a/src/hooks/useNavFavouriteCheck.jsx b/src/hooks/useNavFavouriteCheck.jsx
index 90f710405b18..2045b101ea25 100644
--- a/src/hooks/useNavFavouriteCheck.jsx
+++ b/src/hooks/useNavFavouriteCheck.jsx
@@ -15,7 +15,7 @@ export const useNavFavouriteCheck = (navigation) => {
         to: '/favorites',
         icon: <FontAwesomeIcon icon={'star'} className="nav-icon" />,
         items: favourites.map((item) => {
-          console.log(item)
+          //console.log(item)
           return {
             name: item.value.name,
             to: item.value.to,
diff --git a/src/hooks/useRouteNavCompare.jsx b/src/hooks/useRouteNavCompare.jsx
index aee23a37474d..27fc1f9a3a14 100644
--- a/src/hooks/useRouteNavCompare.jsx
+++ b/src/hooks/useRouteNavCompare.jsx
@@ -21,7 +21,7 @@ export const useRouteNavCompare = (navigation) => {
         ) {
           return true
         } else {
-          console.log('Removing route', item)
+          //console.log('Removing route', item)
           return false
         }
       })
diff --git a/src/views/cipp/UserSettings.jsx b/src/views/cipp/UserSettings.jsx
index 21ab0182287c..955101c02921 100644
--- a/src/views/cipp/UserSettings.jsx
+++ b/src/views/cipp/UserSettings.jsx
@@ -216,14 +216,12 @@ const UserSettings = () => {
                             multi={true}
                             values={_nav
                               .reduce((acc, val) => acc.concat(val.items), [])
-                              .map(
-                                (item) => (
-                                  console.log(item),
-                                  {
-                                    name: item?.name,
-                                    value: { to: item?.to, name: item?.name },
-                                  }
-                                ),
+                              .map((item) =>
+                                // console.log(item),
+                                ({
+                                  name: item?.name,
+                                  value: { to: item?.to, name: item?.name },
+                                }),
                               )}
                             allowCreate={false}
                             refreshFunction={() =>
diff --git a/src/views/endpoint/applications/ApplicationsAddChocoApp.jsx b/src/views/endpoint/applications/ApplicationsAddChocoApp.jsx
index 7d4ef791b391..2995fd32bb16 100644
--- a/src/views/endpoint/applications/ApplicationsAddChocoApp.jsx
+++ b/src/views/endpoint/applications/ApplicationsAddChocoApp.jsx
@@ -87,7 +87,7 @@ const ApplyStandard = () => {
             <OnChange name={field}>
               {(value) => {
                 let template = foundPackages.data.Results.filter(function (obj) {
-                  console.log(value)
+                  //console.log(value)
                   return obj.packagename === value
                 })
                 onChange(template[0][set])
diff --git a/src/views/endpoint/applications/ApplicationsAddWinGet.jsx b/src/views/endpoint/applications/ApplicationsAddWinGet.jsx
index dda13eecf7c6..525c39d93799 100644
--- a/src/views/endpoint/applications/ApplicationsAddWinGet.jsx
+++ b/src/views/endpoint/applications/ApplicationsAddWinGet.jsx
@@ -88,10 +88,10 @@ const AddWinGet = () => {
             <OnChange name={field}>
               {(value) => {
                 let template = foundPackages.data.filter(function (obj) {
-                  console.log(value)
+                  // console.log(value)
                   return obj.packagename === value
                 })
-                console.log(template[0])
+                //console.log(template[0])
                 onChange(template[0][set])
               }}
             </OnChange>
diff --git a/src/views/endpoint/intune/MEMListAppProtection.jsx b/src/views/endpoint/intune/MEMListAppProtection.jsx
index 9f63b4820fde..b3e59de4c9e7 100644
--- a/src/views/endpoint/intune/MEMListAppProtection.jsx
+++ b/src/views/endpoint/intune/MEMListAppProtection.jsx
@@ -19,7 +19,7 @@ import { cellBooleanFormatter, cellDateFormatter } from 'src/components/tables'
 
 const Actions = (row, rowIndex, formatExtraData) => {
   const [ocVisible, setOCVisible] = useState(false)
-  console.log(row)
+  //console.log(row)
   const tenant = useSelector((state) => state.app.currentTenant)
   return (
     <>
diff --git a/src/views/tenant/administration/ListGDAPRelationships.jsx b/src/views/tenant/administration/ListGDAPRelationships.jsx
index e55def41f1ce..c463797c16c9 100644
--- a/src/views/tenant/administration/ListGDAPRelationships.jsx
+++ b/src/views/tenant/administration/ListGDAPRelationships.jsx
@@ -128,7 +128,6 @@ const Actions = (row, rowIndex, formatExtraData) => {
     </>
   )
 }
-
 const GDAPRelationships = () => {
   const columns = [
     {
diff --git a/src/views/tenant/administration/Tenants.jsx b/src/views/tenant/administration/Tenants.jsx
index 87ab0a9d12da..f4d14335e6cc 100644
--- a/src/views/tenant/administration/Tenants.jsx
+++ b/src/views/tenant/administration/Tenants.jsx
@@ -11,9 +11,9 @@ import { CippTenantOffcanvasRow } from 'src/components/utilities/CippTenantOffca
 const TenantsList = () => {
   const TenantListSelector = useSelector((state) => state.app.TenantListSelector)
   const tenant = useSelector((state) => state.app.currentTenant)
-  console.log('TenantListSelector', TenantListSelector)
+  //console.log('TenantListSelector', TenantListSelector)
   const [columnOmits, setOmitVisible] = useState(TenantListSelector)
-  console.log('columnOmits', columnOmits)
+  //console.log('columnOmits', columnOmits)
   const generatePortalColumn = (portal) => ({
     name: portal.label,
     omit: columnOmits,