diff --git a/components/email/EmailSidebar.tsx b/components/email/EmailSidebar.tsx
index 3a78b5aa..80055b2b 100644
--- a/components/email/EmailSidebar.tsx
+++ b/components/email/EmailSidebar.tsx
@@ -16,8 +16,14 @@ import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
 import { Input } from '@/components/ui/input';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Label } from '@/components/ui/label';
-import { IconArrowDown, IconCheck, IconChevronDown, IconChevronUp, IconEdit, IconMail, IconMailbox, IconPencil, IconPlus, IconRefresh, IconTrash } from '@tabler/icons-react';
-import { Account } from '../../types';
+
+interface Account {
+  id: number | string;
+  name: string;
+  email: string;
+  color: string;
+  folders?: string[];
+}
 
 interface EmailSidebarProps {
   accounts: Account[];
@@ -294,15 +300,23 @@ export default function EmailSidebar({
                               name="port" 
                               placeholder="993" 
                               className="h-7 text-xs bg-white border-gray-300 text-gray-900" 
-                              defaultValue="993"
-                              required 
                               value={formData.port}
                               onChange={handleChange}
                             />
                           </div>
                           <div className="flex items-center pl-1">
                             <div className="flex items-center space-x-1">
-                              <Checkbox id="useSSL" name="useSSL" defaultChecked={formData.useSSL} onChange={handleChange} />
+                              <Checkbox 
+                                id="useSSL" 
+                                name="useSSL" 
+                                checked={formData.useSSL} 
+                                onCheckedChange={(checked) => {
+                                  setFormData(prev => ({
+                                    ...prev,
+                                    useSSL: checked === true
+                                  }));
+                                }} 
+                              />
                               <Label htmlFor="useSSL" className="text-xs">SSL</Label>
                             </div>
                           </div>
@@ -327,14 +341,23 @@ export default function EmailSidebar({
                               name="smtpPort" 
                               placeholder="587" 
                               className="h-7 text-xs bg-white border-gray-300 text-gray-900" 
-                              defaultValue="587"
                               value={formData.smtpPort}
                               onChange={handleChange}
                             />
                           </div>
                           <div className="flex items-center pl-1">
                             <div className="flex items-center space-x-1">
-                              <Checkbox id="smtp_secure" name="smtpUseSSL" defaultChecked={formData.smtpUseSSL} onChange={handleChange} />
+                              <Checkbox 
+                                id="smtp_secure" 
+                                name="smtpUseSSL" 
+                                checked={formData.smtpUseSSL} 
+                                onCheckedChange={(checked) => {
+                                  setFormData(prev => ({
+                                    ...prev,
+                                    smtpUseSSL: checked === true
+                                  }));
+                                }} 
+                              />
                               <Label htmlFor="smtp_secure" className="text-xs">SSL</Label>
                             </div>
                           </div>
@@ -405,7 +428,7 @@ export default function EmailSidebar({
                 {/* Show folders for each account when selected and when folders are visible */}
                 {selectedAccount?.id === account.id && showFolders && account.folders && account.folders.length > 0 && (
                   <div className="pl-4">
-                    {account.folders.map((folder) => renderFolderButton(folder, account.id))}
+                    {account.folders.map((folder: string) => renderFolderButton(folder, account.id.toString()))}
                   </div>
                 )}
               </div>