diff --git a/libs/shared/lib/insight-sharing/InsightDialog.tsx b/libs/shared/lib/insight-sharing/InsightDialog.tsx
index 26ca601bff258109c046855d2d3295d0cfaea313..1d1f92b23a3935e9a1e1ba9e9804c5f38409bed0 100644
--- a/libs/shared/lib/insight-sharing/InsightDialog.tsx
+++ b/libs/shared/lib/insight-sharing/InsightDialog.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect} from 'react';
+import React, { useState, useCallback, useEffect} from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { Dialog, DialogContent } from '../components';
 import { SettingsPanel } from './SettingsPanel';
@@ -24,14 +24,14 @@ export function InsightDialog(props: Props) {
   const [active, setActive] = useState<string>('');
   const [activeCategory, setActiveCategory] = useState<MonitorType | undefined>(undefined);
 
-  const handleChangeActive = (category: MonitorType, id: string) => {
+  const handleChangeActive = useCallback((category: MonitorType, id: string) => {
     setActive(id);
     setActiveCategory(category);
     setAdding(false)
-  };
+  }, []);
 
-  const handleSaveTemplate = (templateData: Omit<ReportTemplate, 'id'>) => {
-    const existingTemplate = reportTemplates.find((t) => t.id === active);
+  const handleSaveTemplate = useCallback((templateData: ReportTemplate) => {
+    const existingTemplate = reportTemplates.find((t) => t.id === templateData.id);
 
     if (existingTemplate) {
       const updatedTemplate: ReportTemplate = {
@@ -41,15 +41,11 @@ export function InsightDialog(props: Props) {
       dispatch(updateTemplate(updatedTemplate));
       setActive(updatedTemplate.id);
     } else {
-      const newTemplate: ReportTemplate = {
-        ...templateData,
-        id: uuidv4(),
-      };
-      dispatch(addTemplate(newTemplate));
-      setActive(newTemplate.id);
+      dispatch(addTemplate(templateData));
+      setActive(templateData.id);
     }
     setAdding(false);
-  };
+  }, [dispatch, reportTemplates]);
 
   return (
     <Dialog
diff --git a/libs/shared/lib/insight-sharing/SettingsPanel.tsx b/libs/shared/lib/insight-sharing/SettingsPanel.tsx
index 84a51b0d1dbfa1bbae4ff9c522ddd30676efbd8a..9ca92cf73d89512d7386c3d43af0f5cc2bc93ed4 100644
--- a/libs/shared/lib/insight-sharing/SettingsPanel.tsx
+++ b/libs/shared/lib/insight-sharing/SettingsPanel.tsx
@@ -41,6 +41,7 @@ export function SettingsPanel(props: Props) {
         frequency: 'Daily',
         template: '',
       };
+      console.log('SettingsPanel: Creating new template:', newTemplate);
       onSaveTemplate(newTemplate);
       setAdding(false);
       setActive(newTemplate.id);
@@ -58,6 +59,7 @@ export function SettingsPanel(props: Props) {
 
   const renderContent = () => {
     if (adding) {
+      if (activeCategory === 'report') {
       return (
         <AddItem
           category={activeCategory as MonitorType}
@@ -66,6 +68,15 @@ export function SettingsPanel(props: Props) {
       );
     }
 
+    return (
+      <AddItem
+        category={activeCategory as MonitorType}
+        onAdd={handleAddItem}
+      />
+    );
+  }
+
+
     if (!activeCategory || !active) {
       return (
         <StartScreen
@@ -81,6 +92,7 @@ export function SettingsPanel(props: Props) {
           <ReportingForm
             onSave={onSaveTemplate}
             initialData={activeTemplate}
+            activeTemplate={active}
           />
         );
       //case 'alert':
@@ -94,8 +106,6 @@ export function SettingsPanel(props: Props) {
     }
   };
 
-  console.log('Templates in SettingsPanel:', templates);
-
   return (
     <div className="flex-1 p-4 overflow-auto">
       {renderContent()}
diff --git a/libs/shared/lib/insight-sharing/reporting/ReportingForm.tsx b/libs/shared/lib/insight-sharing/reporting/ReportingForm.tsx
index 1c4bf532602798e60ca8471620ac80a0f31c5b1d..214d9b5298ce61a279134b0b3376f3fc04e6585a 100644
--- a/libs/shared/lib/insight-sharing/reporting/ReportingForm.tsx
+++ b/libs/shared/lib/insight-sharing/reporting/ReportingForm.tsx
@@ -74,37 +74,40 @@ export function ReportingForm({ onSave, initialData, activeTemplate }: Reporting
             <span className="font-semibold">Report Template</span>
           </AccordionHead>
           <AccordionBody>
-            <div className="space-y-4">
+            <div className="border-t pt-4">
+              <span className="font-semibold">Template Name</span>
               <Input
                 type="text"
-                label="Template Name"
                 value={name}
                 onChange={(value: string) => setName(value)}
                 placeholder="Enter template name"
               />
-              <Input
-                type="text"
-                label="Recipients"
-                value={recipients}
-                onChange={(value: string) => setRecipients(value)}
-                placeholder="Enter email addresses"
-              />
-              <div className="form-control w-full">
-                <label className="label p-0">
-                  <span className="text-sm font-medium text-secondary-700">Frequency</span>
-                </label>
-                <select
-                  className="select select-bordered w-full focus:outline-none focus:ring-0"
-                  value={frequency}
-                  onChange={(e) => setFrequency(e.target.value)}
-                >
-                  <option value="Daily">Daily</option>
-                  <option value="Weekly">Weekly</option>
-                  <option value="Monthly">Monthly</option>
-                </select>
+              <div className="border-t pt-4">
+                <span className="font-semibold block">Recipient(s)</span>
+                <Input
+                  type="text"
+                  value={recipients}
+                  onChange={(value: string) => setRecipients(value)}
+                  placeholder="Enter email addresses"
+                />
+              </div>
+              <div className="border-t pt-4">
+                <span className="font-semibold block mb-2">Repeat</span>
+                <div className="pl-4 flex items-center space-x-10">
+                  <label className="text-sm whitespace-nowrap">Frequency</label>
+                  <select
+                    className="select select-bordered w-40 focus:outline-none focus:ring-0 ml-auto"
+                    value={frequency}
+                    onChange={(e) => setFrequency(e.target.value)}
+                  >
+                    <option value="Daily">Daily</option>
+                    <option value="Weekly">Weekly</option>
+                    <option value="Monthly">Monthly</option>
+                  </select>
+                </div>
               </div>
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
+                <label className="font-semibold">
                   Email Template
                 </label>
                 <TextEditor
@@ -114,7 +117,10 @@ export function ReportingForm({ onSave, initialData, activeTemplate }: Reporting
                   placeholder="Start typing your report template..."
                 />
               </div>
-              <Button onClick={handleSave}>Save Template</Button>
+              <div className="flex justify-end mt-2">
+                <Button label="Delete" variantType="secondary" variant="outline" />
+                <Button onClick={handleSave} label="Save" variantType="primary" className="ml-2" />
+              </div>
             </div>
           </AccordionBody>
         </AccordionItem>