diff --git a/grafana-plugin/src/components/CheatSheet/CheatSheet.module.css b/grafana-plugin/src/components/CheatSheet/CheatSheet.module.css
index 2915452c..db596036 100644
--- a/grafana-plugin/src/components/CheatSheet/CheatSheet.module.css
+++ b/grafana-plugin/src/components/CheatSheet/CheatSheet.module.css
@@ -6,6 +6,12 @@
   min-width: min-content;
 }
 
+.cheatsheet-container > div {
+  height: 100%;
+  max-height: 100%;
+  overflow-y: scroll;
+}
+
 .cheatsheet-item {
   margin-bottom: 24px;
 }
diff --git a/grafana-plugin/src/containers/IntegrationForm/IntegrationForm2.tsx b/grafana-plugin/src/containers/IntegrationForm/IntegrationForm2.tsx
index d565ee50..0065de03 100644
--- a/grafana-plugin/src/containers/IntegrationForm/IntegrationForm2.tsx
+++ b/grafana-plugin/src/containers/IntegrationForm/IntegrationForm2.tsx
@@ -152,7 +152,7 @@ const IntegrationForm2 = observer((props: IntegrationFormProps) => {
           <div className={cx('content')}>
             <VerticalGroup>
               <GForm form={form} data={data} onSubmit={handleSubmit} />
-              {isTableView && (
+              {isTableView && selectedOption && (
                 <Collapse
                   headerWithBackground
                   className={cx('collapse')}
@@ -165,10 +165,10 @@ const IntegrationForm2 = observer((props: IntegrationFormProps) => {
                     <ul className={cx('integration-info-list')}>
                       <li className={cx('integration-info-item')}>Unique URL endpoint for receiving alerts </li>
                       <li className={cx('integration-info-item')}>
-                        Templates to interpret alerts, tailored for Grafana Alerting{' '}
+                        Templates to interpret alerts, tailored for {selectedOption.display_name}{' '}
                       </li>
-                      <li className={cx('integration-info-item')}>Grafana Alerting contact point </li>
-                      <li className={cx('integration-info-item')}>Grafana Alerting notification</li>
+                      <li className={cx('integration-info-item')}>{selectedOption.display_name} contact point </li>
+                      <li className={cx('integration-info-item')}>{selectedOption.display_name} notification</li>
                     </ul>
                     What you’ll need to do next:
                     <ul className={cx('integration-info-list')}>
diff --git a/grafana-plugin/src/containers/IntegrationTemplate/IntegrationTemplate.module.css b/grafana-plugin/src/containers/IntegrationTemplate/IntegrationTemplate.module.css
index 17f7b2a2..e7a7639c 100644
--- a/grafana-plugin/src/containers/IntegrationTemplate/IntegrationTemplate.module.css
+++ b/grafana-plugin/src/containers/IntegrationTemplate/IntegrationTemplate.module.css
@@ -4,10 +4,14 @@
 
 .container-wrapper {
   padding: 8px;
+  height: 100%;
+  max-height: 100%;
 }
 
 .container {
   display: flex;
+  height: 100%;
+  max-height: 100%;
   width: 100%;
   border: var(--border-strong);
   padding: 0 16px;
diff --git a/grafana-plugin/src/containers/IntegrationTemplate/IntegrationTemplate.tsx b/grafana-plugin/src/containers/IntegrationTemplate/IntegrationTemplate.tsx
index 2d9afecc..55c36495 100644
--- a/grafana-plugin/src/containers/IntegrationTemplate/IntegrationTemplate.tsx
+++ b/grafana-plugin/src/containers/IntegrationTemplate/IntegrationTemplate.tsx
@@ -55,6 +55,12 @@ const IntegrationTemplate = observer((props: IntegrationTemplateProps) => {
     LocationHelper.update(locationParams, 'partial');
   }, []);
 
+  const getCodeEditorHeight = () => {
+    const mainDiv = document.getElementById('content-container-id');
+    const height = mainDiv?.getBoundingClientRect().height - 59;
+    return `${height}px`;
+  };
+
   const onShowCheatSheet = useCallback(() => {
     setIsCheatSheetVisible(true);
   }, []);
@@ -166,7 +172,7 @@ const IntegrationTemplate = observer((props: IntegrationTemplateProps) => {
       width={'95%'}
     >
       <div className={cx('container-wrapper')}>
-        <div className={cx('container')}>
+        <div className={cx('container')} id={'content-container-id'}>
           <TemplatesAlertGroupsList
             alertReceiveChannelId={id}
             onEditPayload={onEditPayload}
@@ -183,7 +189,7 @@ const IntegrationTemplate = observer((props: IntegrationTemplateProps) => {
             <>
               <div className={cx('template-block-codeeditor')}>
                 <div className={cx('template-editor-block-title')}>
-                  <HorizontalGroup justify="space-between">
+                  <HorizontalGroup justify="space-between" wrap>
                     <Text>Template editor</Text>
 
                     <Button variant="secondary" fill="outline" onClick={onShowCheatSheet} icon="book" size="sm">
@@ -196,7 +202,7 @@ const IntegrationTemplate = observer((props: IntegrationTemplateProps) => {
                   value={changedTemplateBody}
                   data={templates}
                   showLineNumbers={true}
-                  height={'85vh'}
+                  height={getCodeEditorHeight()}
                   onChange={getChangeHandler()}
                 />
               </div>
diff --git a/grafana-plugin/src/containers/TemplatePreview/TemplatePreview.module.css b/grafana-plugin/src/containers/TemplatePreview/TemplatePreview.module.css
index 5f2ecb4a..41af313f 100644
--- a/grafana-plugin/src/containers/TemplatePreview/TemplatePreview.module.css
+++ b/grafana-plugin/src/containers/TemplatePreview/TemplatePreview.module.css
@@ -13,3 +13,8 @@
 .message code {
   white-space: break-spaces;
 }
+
+.image-result img {
+  max-width: 100%;
+  max-height: 100%;
+}
diff --git a/grafana-plugin/src/containers/TemplatePreview/TemplatePreview.tsx b/grafana-plugin/src/containers/TemplatePreview/TemplatePreview.tsx
index f2172173..e268ef25 100644
--- a/grafana-plugin/src/containers/TemplatePreview/TemplatePreview.tsx
+++ b/grafana-plugin/src/containers/TemplatePreview/TemplatePreview.tsx
@@ -60,7 +60,6 @@ const TemplatePreview = observer((props: TemplatePreviewProps) => {
   }, 1000);
 
   useEffect(handleTemplateBodyChange, [templateBody, payload]);
-  // onResult(result);
 
   return result ? (
     <>
@@ -93,12 +92,20 @@ const TemplatePreview = observer((props: TemplatePreviewProps) => {
           )}
         </Text>
       ) : (
-        <div
-          className={cx('message')}
-          dangerouslySetInnerHTML={{
-            __html: sanitize(result.preview || ''),
-          }}
-        />
+        <>
+          {templateName.includes('image') ? (
+            <div className={cx('image-result')}>
+              <img src={result.preview} />
+            </div>
+          ) : (
+            <div
+              className={cx('message')}
+              dangerouslySetInnerHTML={{
+                __html: sanitize(result.preview.replace(/\n/g, '<br />') || ''),
+              }}
+            />
+          )}
+        </>
       )}
     </>
   ) : (
diff --git a/grafana-plugin/src/containers/TemplatesAlertGroupsList/TemplatesAlertGroupsList.module.css b/grafana-plugin/src/containers/TemplatesAlertGroupsList/TemplatesAlertGroupsList.module.css
index 29df3d90..e66b1ba4 100644
--- a/grafana-plugin/src/containers/TemplatesAlertGroupsList/TemplatesAlertGroupsList.module.css
+++ b/grafana-plugin/src/containers/TemplatesAlertGroupsList/TemplatesAlertGroupsList.module.css
@@ -27,6 +27,15 @@
   padding-left: 0;
 }
 
+.alert-groups-list-item {
+  cursor: pointer;
+  margin-bottom: 8px;
+}
+
+.alert-groups-list-item:hover {
+  background-color: var(--background-secondary);
+}
+
 .alert-groups-editor {
   width: 100%;
 }
diff --git a/grafana-plugin/src/containers/TemplatesAlertGroupsList/TemplatesAlertGroupsList.tsx b/grafana-plugin/src/containers/TemplatesAlertGroupsList/TemplatesAlertGroupsList.tsx
index 26cc233b..b58d1988 100644
--- a/grafana-plugin/src/containers/TemplatesAlertGroupsList/TemplatesAlertGroupsList.tsx
+++ b/grafana-plugin/src/containers/TemplatesAlertGroupsList/TemplatesAlertGroupsList.tsx
@@ -37,6 +37,12 @@ const TemplatesAlertGroupsList = (props: TemplatesAlertGroupsListProps) => {
       .then((result) => setAlertGroupsList(result.slice(0, 30)));
   }, []);
 
+  const getCodeEditorHeight = () => {
+    const mainDiv = document.getElementById('content-container-id');
+    const height = mainDiv?.getBoundingClientRect().height - 59;
+    return `${height}px`;
+  };
+
   const getChangeHandler = () => {
     return debounce((value: string) => {
       onEditPayload(value);
@@ -65,7 +71,7 @@ const TemplatesAlertGroupsList = (props: TemplatesAlertGroupsListProps) => {
   };
 
   return (
-    <div className={cx('template-block-list')}>
+    <div className={cx('template-block-list')} id="content-container-id">
       {selectedAlertPayload ? (
         <>
           {isEditMode ? (
@@ -83,7 +89,7 @@ const TemplatesAlertGroupsList = (props: TemplatesAlertGroupsListProps) => {
                 <MonacoEditor
                   value={JSON.stringify(selectedAlertPayload, null, 4)}
                   data={templates}
-                  height={'85vh'}
+                  height={getCodeEditorHeight()}
                   onChange={getChangeHandler()}
                   showLineNumbers
                   useAutoCompleteList={false}
@@ -110,7 +116,7 @@ const TemplatesAlertGroupsList = (props: TemplatesAlertGroupsListProps) => {
                     value={JSON.stringify(selectedAlertPayload, null, 4)}
                     data={undefined}
                     disabled
-                    height={'85vh'}
+                    height={getCodeEditorHeight()}
                     onChange={getChangeHandler()}
                     showLineNumbers
                     useAutoCompleteList={false}
@@ -147,7 +153,7 @@ const TemplatesAlertGroupsList = (props: TemplatesAlertGroupsListProps) => {
                   data={templates}
                   monacoOptions={MONACO_PAYLOAD_OPTIONS}
                   showLineNumbers={false}
-                  height={'85vh'}
+                  height={getCodeEditorHeight()}
                   onChange={getChangeHandler()}
                 />
               </div>
@@ -175,10 +181,12 @@ const TemplatesAlertGroupsList = (props: TemplatesAlertGroupsListProps) => {
                       <>
                         {alertGroupsList.map((alertGroup) => {
                           return (
-                            <div key={alertGroup.pk}>
-                              <Button fill="text" onClick={() => getAlertGroupPayload(alertGroup.pk)}>
-                                {getAlertGroupName(alertGroup)}
-                              </Button>
+                            <div
+                              key={alertGroup.pk}
+                              onClick={() => getAlertGroupPayload(alertGroup.pk)}
+                              className={cx('alert-groups-list-item')}
+                            >
+                              <Text type="link"> {getAlertGroupName(alertGroup)}</Text>
                             </div>
                           );
                         })}
diff --git a/grafana-plugin/src/pages/integration_2/Integration2.tsx b/grafana-plugin/src/pages/integration_2/Integration2.tsx
index c09110c7..17c2b7d5 100644
--- a/grafana-plugin/src/pages/integration_2/Integration2.tsx
+++ b/grafana-plugin/src/pages/integration_2/Integration2.tsx
@@ -1059,7 +1059,7 @@ const IntegrationHeader: React.FC<IntegrationHeaderProps> = ({
 
     if (
       !alertReceiveChannel.is_available_for_integration_heartbeat ||
-      alertReceiveChannel.heartbeat?.last_heartbeat_time_verbal === null
+      !alertReceiveChannel.heartbeat?.last_heartbeat_time_verbal
     ) {
       return null;
     }