diff --git a/dist/chrome/js/components/options-app.js b/dist/chrome/js/components/options-app.js
index 4a9cf31..7bb5587 100644
--- a/dist/chrome/js/components/options-app.js
+++ b/dist/chrome/js/components/options-app.js
@@ -20,6 +20,15 @@ const STORAGE_KEYS = {
   remoteHostInfo: 'remote_host_info',
 };
 
+function escapeHtml(value) {
+  return String(value ?? '')
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
 
 function getTemplateRegistry() {
   return globalThis.__THERP_TIMER_TEMPLATES__ || {};
@@ -51,14 +60,15 @@ function createOptionsAppTemplate(app, bdom, helpers) {
   const readMoreState = app.createComponent('ReadMore', true, false, false, ['text', 'limit']);
 
   const rootBlock = createBlock(
-    `<div><div id="navigation"><h1 class="title-app">Timer Options</h1><ul class="list-group"><li class="chooser list-group-item" block-attribute-0="class" block-handler-1="click"><i class="fa fa-info-circle"/> <span>About Timer</span></li><li class="chooser list-group-item" block-attribute-2="class" block-handler-3="click"><i class="fa fa-cogs"/> <span>Options</span></li></ul><hr/><div class="footer-app"><a href="popup.html" class="back-left"><i class="fa fa-arrow-circle-left fa-2x"/></a></div></div><div class="options-box box" block-attribute-4="class"><h1><div class="logo"><img src="/img/logo.png"/></div></h1><hr/><div class="about-app"><h4 class="title-app text-center">Description</h4><hr/>This is a standalone Owl rewrite of the original cross-platform timer extension for posting work hours to Odoo timesheets.<hr/><h4 class="title-app text-center">Features</h4><hr/><div class="timer-features"><ul class="list-group"><li class="list-group-item">Support for both tasks and issues</li><li class="list-group-item">Start and stop the timer for the selected item</li><li class="list-group-item">Create Odoo timesheet lines against the linked analytic account</li><li class="list-group-item">Show assigned items or everyone’s items</li><li class="list-group-item">Add, remove, or clear remote hosts</li><li class="list-group-item">Switch between remote sessions</li><li class="list-group-item">Download current month or current item timesheets as CSV</li></ul></div></div></div><div class="options-box box" block-attribute-5="class"><div class="form remote-options-form"><form block-handler-6="submit.prevent"><h4 class="remote-title text-info">Add Remote</h4><hr/><div class="form-group"><label for="remote-host">Odoo Host</label><input type="text" class="form-control" id="remote-host" placeholder="https://your-odoo-host.example" block-property-7="value" block-handler-8="input"/></div><div class="form-group"><label for="remote-name">Display Name</label><input type="text" class="form-control" id="remote-name" placeholder="Therp" block-property-9="value" block-handler-10="input"/></div><div class="form-group"><label for="remote-database">Odoo Database</label><input type="text" class="form-control" id="remote-database" placeholder="someodoodatabase" block-property-11="value" block-handler-12="input"/></div><div class="form-group"><label class="label">Data Source</label><ul class="data-source-list list-group"><li class="list-group-item"><div class="form-check"><input class="form-check-input" type="radio" value="project.issue" id="FromIssues" block-property-13="checked" block-handler-14="change"/><label class="form-check-label" for="FromIssues">From Issues</label></div></li><li class="list-group-item"><div class="form-check"><input class="form-check-input" type="radio" value="project.task" id="FromTasks" block-property-15="checked" block-handler-16="change"/><label class="form-check-label" for="FromTasks">From Tasks</label></div></li></ul></div><span class="caption-remotes">Controls</span><div class="remotes-control-btns col-md-12 text-center text-info pointer"><i title="Add a remote host" class="fa fa-2x fa-plus-circle" block-handler-17="click"/><i title="Refresh list of remotes" class="fa fa-2x fa-refresh" block-handler-18="click"/><i title="View list of remotes" class="fa fa-2x fa-eye" block-handler-19="click"/><i title="Remove all remotes" class="fa fa-2x fa-minus-circle" block-handler-20="click"/></div><block-child-0/></form></div><block-child-1/></div></div>`
+    `<div><div id="navigation"><h1 class="title-app">Timer Options</h1><ul class="list-group"><li class="chooser list-group-item" block-attribute-0="class" block-handler-1="click"><i class="fa fa-info-circle"/> <span>About Timer</span></li><li class="chooser list-group-item" block-attribute-2="class" block-handler-3="click"><i class="fa fa-cogs"/> <span>Options</span></li></ul><hr/><div class="footer-app"><a href="popup.html" class="back-left"><i class="fa fa-arrow-circle-left fa-2x"/></a></div></div><div class="options-box box" block-attribute-4="class"><h1><div class="logo"><img src="/img/logo.png"/></div></h1><hr/><div class="about-app"><h4 class="title-app text-center">Description</h4><hr/>This is a standalone Owl rewrite of the original cross-platform timer extension for posting work hours to Odoo timesheets.<hr/><h4 class="title-app text-center">Features</h4><hr/><div class="timer-features"><ul class="list-group"><li class="list-group-item">Support for both tasks and issues</li><li class="list-group-item">Start and stop the timer for the selected item</li><li class="list-group-item">Create Odoo timesheet lines against the linked analytic account</li><li class="list-group-item">Show assigned items or everyone’s items</li><li class="list-group-item">Add, remove, or clear remote hosts</li><li class="list-group-item">Switch between remote sessions</li><li class="list-group-item">Download current month or current item timesheets as CSV</li></ul></div></div></div><div class="options-box box" block-attribute-5="class"><div class="form remote-options-form"><form block-handler-6="submit.prevent"><h4 class="remote-title text-info">General Settings</h4><hr/><div class="form-group"><label class="general-setting-label"><input type="checkbox" class="defaultCheckbox" block-property-21="checked" block-handler-22="change"/> Auto Download Current Item Timesheet</label><p class="inline-help">Store timesheet locally each time you stop the timer on an item.</p></div><hr/><h4 class="remote-title text-info">Add Remote</h4><hr/><div class="form-group"><label for="remote-host">Odoo Host</label><input type="text" class="form-control" id="remote-host" placeholder="https://your-odoo-host.example" block-property-7="value" block-handler-8="input"/></div><div class="form-group"><label for="remote-name">Display Name</label><input type="text" class="form-control" id="remote-name" placeholder="Therp" block-property-9="value" block-handler-10="input"/></div><div class="form-group"><label for="remote-database">Odoo Database</label><input type="text" class="form-control" id="remote-database" placeholder="someodoodatabase" block-property-11="value" block-handler-12="input"/></div><div class="form-group"><label class="label">Data Source</label><ul class="data-source-list list-group"><li class="list-group-item"><div class="form-check"><input class="form-check-input" type="radio" value="project.issue" id="FromIssues" block-property-13="checked" block-handler-14="change"/><label class="form-check-label" for="FromIssues">From Issues</label></div></li><li class="list-group-item"><div class="form-check"><input class="form-check-input" type="radio" value="project.task" id="FromTasks" block-property-15="checked" block-handler-16="change"/><label class="form-check-label" for="FromTasks">From Tasks</label></div></li></ul></div><span class="caption-remotes">Controls</span><div class="remotes-control-btns col-md-12 text-center text-info pointer"><i title="Add a remote host" class="fa fa-2x fa-plus-circle" block-handler-17="click"/><i title="Refresh list of remotes" class="fa fa-2x fa-refresh" block-handler-18="click"/><i title="View list of remotes" class="fa fa-2x fa-eye" block-handler-19="click"/><i title="Remove all remotes" class="fa fa-2x fa-minus-circle" block-handler-20="click"/></div><block-child-0/></form></div><block-child-1/></div></div>`
   );
   const errorBlock = createBlock(`<div class="remote-error"><block-text-0/></div>`);
   const remotesTableBlock = createBlock(
     `<div class="remotes-table-info"><table class="table table-bordered"><caption class="text-info caption-remotes">List of Available Remotes</caption><thead><tr><th scope="col">Remote</th><th scope="col">Host</th><th scope="col">Database</th><th scope="col">Source</th><th scope="col">State</th><th></th></tr></thead><tbody><block-child-0/></tbody></table></div>`
   );
   const remoteRowBlock = createBlock(
-    `<tr><td class="text-info"><block-child-0/></td><td><block-child-1/></td><td><block-child-2/></td><td><block-child-3/></td><td><block-child-4/></td><td class="remote-row-actions"><i class="fa fa-trash text-danger" title="Remove remote" block-handler-0="click"/></td></tr>`
+    `<tr><td class="text-info"><block-child-0/></td><td><block-child-1/></td><td><block-child-2/></td><td><block-child-3/></td><td><block-child-4/></td><td class="remote-row-actions"><i class="fa fa-pencil text-primary" title="Edit remote" block-handler-0="click" style="margin-right: 10px; cursor: pointer;"/>
+                        <i class="fa fa-trash text-danger" title="Remove remote" block-handler-1="click" style="cursor: pointer;"/></td></tr>`
   );
 
   return function template(ctx, node, key = '') {
@@ -95,6 +105,8 @@ function createOptionsAppTemplate(app, bdom, helpers) {
     const reloadRemotesHandler = [ctx.loadRemotes, ctx];
     const toggleListHandler = [() => { ctx.state.showList = !ctx.state.showList; }, ctx];
     const removeAllRemotesHandler = [ctx.removeAllRemotes, ctx];
+    const autoDownloadChecked = ctx.state.autoDownloadIssueTimesheet;
+    const autoDownloadHandler = [(ev) => { ctx.toggleAutoDownload(ev); }];
 
     if (ctx.state.error) {
       errorNode = errorBlock([ctx.state.error]);
@@ -120,10 +132,11 @@ function createOptionsAppTemplate(app, bdom, helpers) {
         const sourceNode = readMoreSource({ text: ctx.remote.datasrc || DEFAULT_DATA_SOURCE, limit: 18 }, key + `__4__${remoteKey}`, node, this, null);
         const stateNode = readMoreState({ text: ctx.remote.state || 'Inactive', limit: 18 }, key + `__5__${remoteKey}`, node, this, null);
         const remoteItem = ctx.remote;
+        const editHandler = [() => ctx.editRemote(remoteItem), ctx];
         const deleteHandler = [() => ctx.removeRemote(remoteItem), ctx];
 
         remoteChildren[i] = withKey(
-          remoteRowBlock([deleteHandler], [nameNode, hostNode, databaseNode, sourceNode, stateNode]),
+          remoteRowBlock([editHandler, deleteHandler], [nameNode, hostNode, databaseNode, sourceNode, stateNode]),
           remoteKey
         );
       }
@@ -155,6 +168,8 @@ function createOptionsAppTemplate(app, bdom, helpers) {
         reloadRemotesHandler,
         toggleListHandler,
         removeAllRemotesHandler,
+        autoDownloadChecked,     
+        autoDownloadHandler,
       ],
       [errorNode, remoteListNode]
     );
@@ -169,11 +184,15 @@ class OptionsApp extends Component {
   static template = 'OptionsApp';
 
   setup() {
+    this.removeRemote = this.removeRemote.bind(this);
+    this.editRemote = this.editRemote.bind(this);
+
     this.state = useState({
       activePage: PAGE_OPTIONS,
       remotes: [],
       showList: true,
       error: '',
+      autoDownloadIssueTimesheet: false,
       form: {
         remote_host: '',
         remote_name: '',
@@ -184,6 +203,8 @@ class OptionsApp extends Component {
 
     onWillStart(async () => {
       await this.loadRemotes();
+      const saved = await storage.get('auto_download_issue_timesheet', false);
+      this.state.autoDownloadIssueTimesheet = !!saved;
     });
   }
 
@@ -206,6 +227,15 @@ class OptionsApp extends Component {
     this.state.form.remote_datasrc = DEFAULT_DATA_SOURCE;
   }
 
+  /**
+   * Toggle the auto-download timesheet preference and persist it.
+   * @param {Event} ev
+   */
+  async toggleAutoDownload(ev) {
+    this.state.autoDownloadIssueTimesheet = ev.target.checked;
+    await storage.set('auto_download_issue_timesheet', !!this.state.autoDownloadIssueTimesheet);
+  }
+
   /**
    * Validate current form fields and return normalized values.
    *
@@ -287,11 +317,131 @@ class OptionsApp extends Component {
     await this.loadRemotes();
     await notify(`[${remote.url}] removed successfully!`);
   }
+
   /**
-   * Expose the About page constant to Owl XML expressions.
+   * Edit an existing remote configuration.
    *
-   * @returns {string}
+   * @param {object} remote Remote row to edit.
+   * @returns {Promise<void>}
    */
+  async editRemote(remote) {
+    this.state.error = '';
+
+    const currentHost = remote.url || '';
+    const currentName = remote.name || '';
+    const currentDatabase = remote.database || '';
+    const currentDatasource = remote.datasrc || DEFAULT_DATA_SOURCE;
+
+    const customAlert = globalThis.alert && typeof globalThis.alert.show === 'function'
+      ? globalThis.alert
+      : null;
+
+    let host = currentHost;
+    let name = currentName;
+    let database = currentDatabase;
+    let datasrc = currentDatasource;
+
+    if (customAlert) {
+      const inputSuffix = `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+      const hostId = `edit-remote-host-${inputSuffix}`;
+      const nameId = `edit-remote-name-${inputSuffix}`;
+      const databaseId = `edit-remote-database-${inputSuffix}`;
+      const datasourceId = `edit-remote-datasource-${inputSuffix}`;
+      const html = `
+        <div style="min-width:340px;max-width:520px;text-align:left;">
+          <div style="margin-bottom:14px;font-weight:700;font-size:18px;color:#42475a;text-align:center;">Edit Remote</div>
+          <div style="display:flex;flex-direction:column;gap:12px;">
+            <label style="display:flex;flex-direction:column;gap:6px;font-weight:600;color:#334155;">
+              <span>Odoo Host</span>
+              <input id="${hostId}" type="text" value="${escapeHtml(currentHost)}" style="width:100%;box-sizing:border-box;padding:10px;border:1px solid #cbd5e1;border-radius:4px;font:14px Arial,Helvetica,sans-serif;color:#111827;background:#fff;" />
+            </label>
+            <label style="display:flex;flex-direction:column;gap:6px;font-weight:600;color:#334155;">
+              <span>Display Name</span>
+              <input id="${nameId}" type="text" value="${escapeHtml(currentName)}" style="width:100%;box-sizing:border-box;padding:10px;border:1px solid #cbd5e1;border-radius:4px;font:14px Arial,Helvetica,sans-serif;color:#111827;background:#fff;" />
+            </label>
+            <label style="display:flex;flex-direction:column;gap:6px;font-weight:600;color:#334155;">
+              <span>Odoo Database</span>
+              <input id="${databaseId}" type="text" value="${escapeHtml(currentDatabase)}" style="width:100%;box-sizing:border-box;padding:10px;border:1px solid #cbd5e1;border-radius:4px;font:14px Arial,Helvetica,sans-serif;color:#111827;background:#fff;" />
+            </label>
+            <label style="display:flex;flex-direction:column;gap:6px;font-weight:600;color:#334155;">
+              <span>Data Source</span>
+              <select id="${datasourceId}" style="width:100%;box-sizing:border-box;padding:10px;border:1px solid #cbd5e1;border-radius:4px;font:14px Arial,Helvetica,sans-serif;color:#111827;background:#fff;">
+                <option value="project.issue" ${currentDatasource === DEFAULT_DATA_SOURCE ? 'selected' : ''}>From Issues</option>
+                <option value="project.task" ${currentDatasource === 'project.task' ? 'selected' : ''}>From Tasks</option>
+              </select>
+            </label>
+          </div>
+        </div>
+      `;
+
+      const result = await customAlert.show(html, ['Cancel', 'Save']);
+      if (result !== 'Save') {
+        return;
+      }
+
+      const hostEl = document.getElementById(hostId);
+      const nameEl = document.getElementById(nameId);
+      const databaseEl = document.getElementById(databaseId);
+      const datasourceEl = document.getElementById(datasourceId);
+
+      host = normalizeHost(hostEl ? hostEl.value : currentHost);
+      name = ((nameEl ? nameEl.value : currentName) || '').trim();
+      database = ((databaseEl ? databaseEl.value : currentDatabase) || '').trim();
+      datasrc = datasourceEl ? datasourceEl.value : currentDatasource;
+    } else {
+      return;
+    }
+
+    if (!host || !name || !database) {
+      this.state.error = 'Fields cannot be empty';
+      return;
+    }
+
+    if (!validURL(host)) {
+      this.state.error = 'Invalid URL syntax';
+      return;
+    }
+
+    const remotes = await readRemotes();
+    const duplicate = remotes.find(
+      (item) => !(item.url === currentHost && item.database === currentDatabase)
+        && item.url === host
+        && item.database === database
+    );
+    if (duplicate) {
+      this.state.error = `${host} and ${database} already exist; duplicates are not allowed`;
+      return;
+    }
+
+    const index = remotes.findIndex(
+      (item) => item.url === currentHost && item.database === currentDatabase
+    );
+    if (index === -1) {
+      this.state.error = 'Remote not found';
+      return;
+    }
+
+    remotes[index] = {
+      ...remotes[index],
+      url: host,
+      name,
+      database,
+      datasrc,
+    };
+
+    await writeRemotes(remotes);
+
+    if (host !== currentHost) {
+      await clearOdooSessionCookies(currentHost);
+    }
+    if (database !== currentDatabase) {
+      await storage.remove(currentDatabase);
+    }
+
+    await this.loadRemotes();
+    await notify(`Remote [${name}] updated successfully.`);
+  }
+
   get PAGE_ABOUT() {
       return PAGE_ABOUT;
   }
diff --git a/dist/chrome/js/components/popup-app.js b/dist/chrome/js/components/popup-app.js
index 64eb316..2451f5f 100644
--- a/dist/chrome/js/components/popup-app.js
+++ b/dist/chrome/js/components/popup-app.js
@@ -79,7 +79,7 @@ function createPopupAppTemplate(app, bdom, helpers) {
     const readMoreProject = app.createComponent('ReadMore', true, false, false, ['text', 'limit']);
 
     const rootBlock = createBlock(
-        `<div class="app-root"><div id="loader-container" block-attribute-0="class"><div class="loader-card"><div class="loader-text">Loading current session and projects…</div><div class="loader-subtext">Please wait — or grab a cup of coffee ☕</div><i class="fa fa-cog fa-spin fa-5x"/></div></div><div id="login" class="login-view" block-attribute-1="class"><div class="popup-login-shell"><div class="form"><div class="logo"><img src="/img/logo.png"/></div><block-child-0/><block-child-1/><block-child-2/></div></div><div class="cta forgotpwd footer-app-opts login-footer-bar"><a href="options_main_page.html"><i class="fa fa-cogs"/> Options</a></div></div><div id="wrapper" block-attribute-2="class"><div class="toolbar-row"><input id="searchIssue" type="text" placeholder="Search by ID, name, user, priority, stage..." block-property-3="value" block-handler-4="input"/><select id="limitTo" block-property-5="value" block-handler-6="change"><option value="10">10</option><option value="15">15</option><option value="25">25</option><option value="">All</option></select></div><div class="container footer top-actions"><div class="auto_download_timesheet" title="Store timesheet locally when you stop timer on the current item"><input id="auto_download_timesheet_input" type="checkbox" block-property-7="checked" block-handler-8="change"/> Auto Download Current Item Timesheet </div><div class="row"><div class="mx-3 col-md-12 footer-btns pointer"><i class="fa fa-download fa-2x" title="Download current month timesheet" block-handler-9="click"/><i class="fa fa-hand-o-left fa-2x" title="Switch between remotes" block-handler-10="click"/><i class="fa fa-refresh fa-2x" title="Refresh current items" block-handler-11="click"/><i class="fa fa-undo fa-2x" title="Discard the active timer" block-handler-12="click"/><i class="fa fa-sign-out fa-2x" title="Log out" block-handler-13="click"/><a href="options_main_page.html" class="options-btn" title="Go To options"><i class="fa fa-cogs fa-2x"/></a></div></div></div><div class="table-scroll"><table class="table table-responsive-sm table-bordered table-fixed" id="table-task-issues"><thead><tr><th class="action-col"><div><block-child-3/></div><block-child-4/></th><th class="priority-col">Priority</th><th class="stage-col">Stage</th><th class="item-col"><div class="item-header-title"><block-text-14/> [<block-text-15/>]</div><label class="allIssues"><input id="showAllIssues" type="checkbox" block-property-16="checked" block-handler-17="input"/> Show for everyone</label></th><block-child-5/><block-child-6/><th class="project-col">Project</th></tr></thead><tbody><block-child-7/><block-child-8/></tbody></table></div><div class="info-footer mx-3"><div class="row"><div class="remote-info-block col-md-12"><span><b>Odoo:</b> <block-text-18/></span><br/><span><b>Host:</b> <block-text-19/></span><br/><span><b>Database:</b> <block-text-20/></span><br/><span><b>Current User:</b> <block-text-21/></span><br/></div></div></div></div></div>`
+        `<div class="app-root"><div id="loader-container" block-attribute-0="class"><div class="loader-card"><div class="loader-text">Loading current session and projects…</div><div class="loader-subtext">Please wait — or grab a cup of coffee ☕</div><i class="fa fa-cog fa-spin fa-5x"/></div></div><div id="login" class="login-view" block-attribute-1="class"><div class="popup-login-shell"><div class="form"><div class="logo"><img src="/img/logo.png"/></div><block-child-0/><block-child-1/><block-child-2/></div></div><div class="cta forgotpwd footer-app-opts login-footer-bar"><a href="options_main_page.html"><i class="fa fa-cogs"/> Options</a></div></div><div id="wrapper" block-attribute-2="class"><div class="toolbar-row"><input id="searchIssue" type="text" placeholder="Search by ID, name, user, priority, stage..." block-property-3="value" block-handler-4="input"/><select id="limitTo" block-property-5="value" block-handler-6="change"><option value="10">10</option><option value="15">15</option><option value="25">25</option><option value="">All</option></select></div><div class="container footer top-actions"><div class="row"><div class="mx-3 col-md-12 footer-btns pointer"><i class="fa fa-download fa-2x" title="Download current month timesheet" block-handler-7="click"/><i class="fa fa-hand-o-left fa-2x" title="Switch between remotes" block-handler-8="click"/><i class="fa fa-refresh fa-2x" title="Refresh current items" block-handler-9="click"/><i class="fa fa-undo fa-2x" title="Discard the active timer" block-handler-10="click"/><i class="fa fa-sign-out fa-2x" title="Log out" block-handler-11="click"/><a href="options_main_page.html" class="options-btn" title="Go To options"><i class="fa fa-cogs fa-2x"/></a></div></div></div><div class="table-scroll"><table class="table table-responsive-sm table-bordered table-fixed" id="table-task-issues"><thead><tr><th class="action-col"><div><block-child-3/></div><block-child-4/></th><th class="priority-col">Priority</th><th class="stage-col">Stage</th><th class="item-col"><div class="item-header-title"><block-text-12/> [<block-text-13/>]</div><label class="allIssues"><input id="showAllIssues" type="checkbox" block-property-14="checked" block-handler-15="input"/> Show for everyone</label></th><block-child-5/><block-child-6/><th class="project-col">Project</th></tr></thead><tbody><block-child-7/><block-child-8/></tbody></table></div><div class="info-footer mx-3"><div class="row"><div class="remote-info-block col-md-12"><span><b>Odoo:</b> <block-text-16/></span><br/><span><b>Host:</b> <block-text-17/></span><br/><span><b>Database:</b> <block-text-18/></span><br/><span><b>Current User:</b> <block-text-19/></span><br/></div></div></div></div></div>`
     );
     const bootErrorBlock = createBlock(`<div><p class="odooError"><block-text-0/></p></div>`);
     const noRemotesBlock = createBlock(
@@ -106,8 +106,8 @@ function createPopupAppTemplate(app, bdom, helpers) {
         `<div class="remote-info small-note">Host: <block-text-0/> <span class="current-source-chip"><block-text-1/></span></div>`
     );
     const activeTimerDurationBlock = createBlock(`<span class="startTimeCount"><block-text-0/></span>`);
-    const hoursSpentHeaderBlock = createBlock(`<th>Hours Spent</th>`);
-    const remainingHoursHeaderBlock = createBlock(`<th>Remaining Hours</th>`);
+    const hoursSpentHeaderBlock = createBlock(`<th class="text-center">Hours Spent</th>`);
+    const remainingHoursHeaderBlock = createBlock(`<th class="text-center">Hours Left</th>`);
     const issueRowBlock = createBlock(
         `<tr block-attribute-0="class"><td class="text-center px-2 td-btn action-col"><block-child-0/><block-child-1/></td><td class="priority-cell"><block-child-2/><block-child-3/></td><td class="stage-cell"><block-child-4/></td><td class="issue-desc-cell"><block-child-5/></td><block-child-6/><block-child-7/><td class="project-cell"><block-child-8/></td></tr>`
     );
@@ -119,8 +119,8 @@ function createPopupAppTemplate(app, bdom, helpers) {
     );
     const priorityStarBlock = createBlock(`<span class="fa fa-star checked"/>`);
     const priorityStarOutlineBlock = createBlock(`<i class="fa fa-star-o"/>`);
-    const effectiveHoursCellBlock = createBlock(`<td><block-child-0/></td>`);
-    const remainingHoursCellBlock = createBlock(`<td><block-child-0/></td>`);
+    const effectiveHoursCellBlock = createBlock(`<td class="text-center"><block-child-0/></td>`);
+    const remainingHoursCellBlock = createBlock(`<td class="text-center"><block-child-0/></td>`);
     const emptyIssuesRowBlock = createBlock(
         `<tr><td block-attribute-0="colspan" class="text-center text-danger">No matching items are currently available</td></tr>`
     );
@@ -250,8 +250,6 @@ function createPopupAppTemplate(app, bdom, helpers) {
         const limitHandler = [(ev) => {
             ctx.updateLimitPreference(ev.target.value);
         }];
-        const autoDownloadChecked = ctx.state.autoDownloadIssueTimesheet;
-        const autoDownloadHandler = [ctx.toggleAutoDownload, ctx];
         const downloadTimesheetHandler = [ctx.downloadCurrentMonthTimesheets, ctx];
         const switchRemotesHandler = [ctx.switchBetweenRemotes, ctx];
         const refreshHandler = [ctx.refreshAll, ctx];
@@ -400,8 +398,6 @@ function createPopupAppTemplate(app, bdom, helpers) {
                 searchQueryHandler,
                 limitValue,
                 limitHandler,
-                autoDownloadChecked,
-                autoDownloadHandler,
                 downloadTimesheetHandler,
                 switchRemotesHandler,
                 refreshHandler,
@@ -845,15 +841,15 @@ class PopupApp extends Component {
     }
 
     issueLabel(issue) {
-        const issueName = this.normalizeText(
-            issue.display_name || issue.name || issue.message_summary || issue.description || ''
-        );
-
         if (this.state.dataSource === DATA_SOURCE_TASK) {
             const code = this.normalizeText(issue.code);
+            const issueName = this.normalizeText(issue.name || issue.description || '');
             return [code, issueName].filter(Boolean).join(' - ') || `#${issue.id}`;
         }
 
+        const issueName = this.normalizeText(
+            issue.display_name || issue.name || issue.message_summary || issue.description || ''
+        );
         return [`#${issue.id}`, issueName].filter(Boolean).join(' - ');
     }
 
@@ -1291,6 +1287,24 @@ class PopupApp extends Component {
      * Download a CSV with current month timesheet rows.
      */
     async downloadCurrentMonthTimesheets() {
+        const autoDownloadEnabled = await storage.get('auto_download_issue_timesheet', false);
+        if (!autoDownloadEnabled) {
+            const blockingText = 
+              '<div style="text-align: center; padding: 20px;">' +
+                '<h5 style="margin-bottom: 15px; color: #d32f2f;">⚠️ Auto-Download Not Enabled</h5>' +
+                '<p style="margin-bottom: 15px; font-size: 16px;">' +
+                  'Please enable <b>Auto Download Current Item Timesheet</b> ' +
+                  'in the Options menu before downloading timesheets.' +
+                '</p>' +
+                '<p style="color: #666; font-size: 14px;">' +
+                  'Click the <b>⚙️ Options</b> icon, then check the box under General Settings.' +
+                '</p>' +
+              '</div>';
+            
+            await alert.show(blockingText, ['OK']);
+            return; // STOP - do not proceed with download
+        }
+
         try {
             if (!this.state.user?.id) {
                 throw new Error('Login first.');
diff --git a/dist/chrome/js/templates.js b/dist/chrome/js/templates.js
index a87b1ca..25ca7f7 100644
--- a/dist/chrome/js/templates.js
+++ b/dist/chrome/js/templates.js
@@ -1,190 +1,80 @@
 export const templates = {
- "PopupApp": function PopupApp(app, bdom, helpers
+ "OptionsApp": function OptionsApp(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput, prepareList, withKey } = helpers;
   const comp1 = app.createComponent(`ReadMore`, true, false, false, ["text","limit"]);
-  const comp2 = app.createComponent(`ReadMore`, true, false, false, ["text","limit","href"]);
+  const comp2 = app.createComponent(`ReadMore`, true, false, false, ["text","limit"]);
   const comp3 = app.createComponent(`ReadMore`, true, false, false, ["text","limit"]);
   const comp4 = app.createComponent(`ReadMore`, true, false, false, ["text","limit"]);
   const comp5 = app.createComponent(`ReadMore`, true, false, false, ["text","limit"]);
   
-  let block1 = createBlock(`<div class="app-root"><div id="loader-container" block-attribute-0="class"><div class="loader-card"><div class="loader-text"> Loading current session and projects… </div><div class="loader-subtext"> Please wait — or grab a cup of coffee ☕ </div><i class="fa fa-cog fa-spin fa-5x"/></div></div><div id="login" class="login-view" block-attribute-1="class"><div class="popup-login-shell"><div class="form"><div class="logo"><img src="/img/logo.png"/></div><block-child-0/><block-child-1/><block-child-2/></div></div><div class="cta forgotpwd footer-app-opts login-footer-bar"><a href="options_main_page.html"><i class="fa fa-cogs"/> Options </a></div></div><div id="wrapper" block-attribute-2="class"><div class="toolbar-row"><input id="searchIssue" type="text" placeholder="Search by ID, name, user, priority, stage..." block-property-3="value" block-handler-4="input"/><select id="limitTo" block-property-5="value" block-handler-6="change"><option value="10">10</option><option value="15">15</option><option value="25">25</option><option value="">All</option></select></div><div class="container footer top-actions"><div class="auto_download_timesheet" title="Store timesheet locally when you stop timer on the current item"><input id="auto_download_timesheet_input" type="checkbox" block-property-7="checked" block-handler-8="change"/> Auto Download Current Item Timesheet </div><div class="row"><div class="mx-3 col-md-12 footer-btns pointer"><i class="fa fa-download fa-2x" title="Download current month timesheet" block-handler-9="click"/><i class="fa fa-hand-o-left fa-2x" title="Switch between remotes" block-handler-10="click"/><i class="fa fa-refresh fa-2x" title="Refresh current items" block-handler-11="click"/><i class="fa fa-undo fa-2x" title="Discard the active timer" block-handler-12="click"/><i class="fa fa-sign-out fa-2x" title="Log out" block-handler-13="click"/><a href="options_main_page.html" class="options-btn" title="Go To options"><i class="fa fa-cogs fa-2x"/></a></div></div></div><div class="table-scroll"><table id="table-task-issues" class="table table-responsive-sm table-bordered table-fixed"><thead><tr><th class="action-col"><div><block-child-3/></div><block-child-4/></th><th class="priority-col">Priority</th><th class="stage-col">Stage</th><th class="item-col"><div class="item-header-title"><block-child-5/> [<block-child-6/>] </div><label class="allIssues"><input id="showAllIssues" type="checkbox" block-property-14="checked" block-handler-15="input"/> Show for everyone </label></th><block-child-7/><th class="project-col">Project</th></tr></thead><tbody><block-child-8/><block-child-8/><block-child-9/></tbody></table></div><div class="container footer info-footer"><div class="row"><div class="remote-info-block col-md-12"><span><b>Odoo:</b> <block-child-10/></span><br/><span><b>Host:</b> <block-child-11/></span><br/><span><b>Database:</b> <block-child-12/></span><br/><span><b>Current User:</b> <block-child-13/></span><br/></div></div></div></div></div>`);
-  let block2 = createBlock(`<div><p class="odooError"><block-child-0/></p></div>`);
-  let block4 = createBlock(`<div class="container no-remotes-set"><div class="alert alert-warning"> Hello <span class="fun-man">😉</span>, you have not configured any remotes. Open <b><i class="fa fa-cogs"/> Options</b> below and add one. </div></div>`);
-  let block5 = createBlock(`<form block-handler-0="submit.prevent"><block-child-0/><block-child-1/><div class="password-field"><block-child-2/><block-child-3/></div><select id="remote-selection" class="form-control" block-handler-1="change"><block-child-4/></select><div class="checkbox"><label><input type="checkbox" block-property-2="checked" block-handler-3="change"/> Use Existing Session </label></div><button class="login" type="submit"> Login <block-child-5/></button><block-child-6/></form>`);
-  let block6 = createBlock(`<p class="odooError"><block-child-0/></p>`);
-  let block8 = createBlock(`<input type="text" placeholder="Username" block-property-0="value" block-handler-1="input"/>`);
-  let block9 = createBlock(`<input id="unique-password" block-attribute-0="type" placeholder="Password" block-property-1="value" block-handler-2="input"/>`);
-  let block10 = createBlock(`<span class="pass-viewer" block-handler-0="click"><i class="fa" block-attribute-1="class"/></span>`);
-  let block12 = createBlock(`<option block-attribute-0="value" block-property-1="selected"><block-child-0/></option>`);
-  let block14 = createBlock(`<i class="fa fa-cog fa-spin"/>`);
-  let block15 = createBlock(`<div class="remote-info small-note"> Host: <block-child-0/><span class="current-source-chip"><block-child-1/></span></div>`);
-  let block18 = createBlock(`<span class="active-timer-running"><i class="fa fa-clock-o"/> #<block-child-0/></span>`);
-  let block20 = createBlock(`<span class="startTimeCount"><block-child-0/></span>`);
-  let block25 = createBlock(`<th>Hours Spent</th>`);
-  let block26 = createBlock(`<th>Remaining Hours</th>`);
-  let block28 = createBlock(`<tr block-attribute-0="class"><td class="text-center px-2 td-btn action-col"><block-child-0/><block-child-1/></td><td class="priority-cell"><block-child-2/><block-child-2/><block-child-3/></td><td class="stage-cell"><block-child-4/></td><td class="issue-desc-cell"><block-child-5/></td><block-child-6/><td class="project-cell"><block-child-7/></td></tr>`);
-  let block29 = createBlock(`<i class="fa fa-play-circle action-btn pointer" title="Start the timer for the selected item" block-handler-0="click"/>`);
-  let block30 = createBlock(`<i class="text-danger fa fa-stop-circle action-btn pointer" title="Stop timer and record the time to Odoo timesheets" block-handler-0="click"/>`);
-  let block32 = createBlock(`<span class="fa fa-star checked"/>`);
-  let block33 = createBlock(`<i class="fa fa-star-o"/>`);
-  let block37 = createBlock(`<td><block-child-0/></td>`);
-  let block39 = createBlock(`<td><block-child-0/></td>`);
-  let block42 = createBlock(`<tr><td class="text-center text-danger" block-attribute-0="colspan"> No matching items are currently available </td></tr>`);
+  let block1 = createBlock(`<div><!-- ── Left navigation sidebar ─────────────────────────────────── --><div id="navigation"><h1 class="title-app">Timer Options</h1><ul class="list-group"><li class="chooser list-group-item" block-attribute-0="class" block-handler-1="click"><i class="fa fa-info-circle"/> <span>About Timer</span></li><li class="chooser list-group-item" block-attribute-2="class" block-handler-3="click"><i class="fa fa-cogs"/> <span>Options</span></li></ul><hr/><div class="footer-app"><a href="popup.html" class="back-left"><i class="fa fa-arrow-circle-left fa-2x"/></a></div></div><!-- ── About page ──────────────────────────────────────────────── --><div class="options-box box" block-attribute-4="class"><h1><div class="logo"><img src="/img/logo.png"/></div></h1><hr/><div class="about-app"><h4 class="title-app text-center">Description</h4><hr/> This is a standalone Owl rewrite of the original cross-platform timer extension for posting work hours to Odoo timesheets. <hr/><h4 class="title-app text-center">Features</h4><hr/><div class="timer-features"><ul class="list-group"><li class="list-group-item">Support for both tasks and issues</li><li class="list-group-item">Start and stop the timer for the selected item</li><li class="list-group-item">Create Odoo timesheet lines against the linked analytic account</li><li class="list-group-item">Show assigned items or everyone's items</li><li class="list-group-item">Add, remove, or clear remote hosts</li><li class="list-group-item">Switch between remote sessions</li><li class="list-group-item">Download current month or current item timesheets as CSV</li></ul></div></div></div><!-- ── Options / remotes page ──────────────────────────────────── --><div class="options-box box" block-attribute-5="class"><div class="form remote-options-form"><form block-handler-6="submit.prevent"><!-- [FIX #38] General Settings ──────────────────────────── --><h4 class="remote-title text-info">General Settings</h4><hr/><div class="form-group"><label class="general-setting-label"><input type="checkbox" class="defaultCheckbox" block-property-7="checked" block-handler-8="change"/> Auto Download Current Item Timesheet </label><p class="inline-help"> Store timesheet locally each time you stop the timer on an item. </p></div><hr/><!-- Add Remote form ─────────────────────────────────────── --><h4 class="remote-title text-info">Add Remote</h4><hr/><div class="form-group"><label for="remote-host">Odoo Host</label><input type="text" class="form-control" id="remote-host" placeholder="https://your-odoo-host.example" block-property-9="value" block-handler-10="input"/></div><div class="form-group"><label for="remote-name">Display Name</label><input type="text" class="form-control" id="remote-name" placeholder="Therp" block-property-11="value" block-handler-12="input"/></div><div class="form-group"><label for="remote-database">Odoo Database</label><input type="text" class="form-control" id="remote-database" placeholder="someodoodatabase" block-property-13="value" block-handler-14="input"/></div><div class="form-group"><label class="label">Data Source</label><ul class="data-source-list list-group"><li class="list-group-item"><div class="form-check"><input class="form-check-input" type="radio" value="project.issue" id="FromIssues" block-property-15="checked" block-handler-16="change"/><label class="form-check-label" for="FromIssues">From Issues</label></div></li><li class="list-group-item"><div class="form-check"><input class="form-check-input" type="radio" value="project.task" id="FromTasks" block-property-17="checked" block-handler-18="change"/><label class="form-check-label" for="FromTasks">From Tasks</label></div></li></ul></div><span class="caption-remotes">Controls</span><div class="remotes-control-btns col-md-12 text-center text-info pointer"><i title="Add a remote host" class="fa fa-2x fa-plus-circle" block-handler-19="click"/><i title="Refresh list of remotes" class="fa fa-2x fa-refresh" block-handler-20="click"/><i title="View list of remotes" class="fa fa-2x fa-eye" block-handler-21="click"/><i title="Remove all remotes" class="fa fa-2x fa-minus-circle" block-handler-22="click"/></div><block-child-0/></form><!-- Saved remotes table ──────────────────────────────────── --><block-child-1/></div></div></div>`);
+  let block2 = createBlock(`<div class="remote-error"><block-child-0/></div>`);
+  let block4 = createBlock(`<div class="remotes-table-info"><table class="table table-bordered"><caption class="text-info caption-remotes"> List of Available Remotes </caption><thead><tr><th scope="col">Remote</th><th scope="col">Host</th><th scope="col">Database</th><th scope="col">Source</th><th scope="col">State</th><th/></tr></thead><tbody><block-child-0/></tbody></table></div>`);
+  let block6 = createBlock(`<tr><td class="text-info"><block-child-0/></td><td><block-child-1/></td><td><block-child-2/></td><td><block-child-3/></td><td><block-child-4/></td><td class="remote-row-actions"><i class="fa fa-pencil text-primary" title="Edit remote" style="margin-right: 10px; cursor: pointer;" block-handler-0="click"/><i class="fa fa-trash text-danger" title="Remove remote" style="cursor: pointer;" block-handler-1="click"/></td></tr>`);
   
   return function template(ctx, node, key = "") {
-    let b2, b4, b5, b18, b20, b22, b23, b24, b27, b42, b43, b44, b45, b46;
-    let attr1 = ctx['state'].view==='loading'?'':'hide';
-    let attr2 = ctx['state'].view==='login'?'login-view':'login-view hide';
-    if (ctx['state'].bootError) {
-      const b3 = safeOutput(ctx['state'].bootError);
-      b2 = block2([], [b3]);
-    }
-    if (!ctx['state'].remotes.length) {
-      b4 = block4();
-    }
-    if (ctx['state'].remotes.length) {
-      let b6, b8, b9, b10, b11, b14, b15;
-      let hdlr1 = ["prevent", ctx['login'], ctx];
-      if (ctx['state'].loginError) {
-        const b7 = safeOutput(ctx['state'].loginError);
-        b6 = block6([], [b7]);
-      }
-      if (!ctx['state'].useExistingSession) {
-        let prop1 = new String((ctx['state'].username) === 0 ? 0 : ((ctx['state'].username) || ""));
-        const v1 = ctx['state'];
-        let hdlr2 = [(_ev)=>v1.username=_ev.target.value, ctx];
-        b8 = block8([prop1, hdlr2]);
-      }
-      if (!ctx['state'].useExistingSession) {
-        let attr3 = ctx['state'].showPassword?'text':'password';
-        let prop2 = new String((ctx['state'].password) === 0 ? 0 : ((ctx['state'].password) || ""));
-        const v2 = ctx['state'];
-        let hdlr3 = [(_ev)=>v2.password=_ev.target.value, ctx];
-        b9 = block9([attr3, prop2, hdlr3]);
-      }
-      if (!ctx['state'].useExistingSession) {
-        let hdlr4 = [ctx['togglePassword'], ctx];
-        let attr4 = ctx['state'].showPassword?'fa fa-eye-slash':'fa fa-eye';
-        b10 = block10([hdlr4, attr4]);
-      }
-      const v3 = ctx['state'];
-      let hdlr5 = [(_ev)=>v3.selectedRemoteIndex=_ev.target.value, ctx];
-      ctx = Object.create(ctx);
-      const [k_block11, v_block11, l_block11, c_block11] = prepareList(ctx['state'].remotes);;
-      for (let i1 = 0; i1 < l_block11; i1++) {
-        ctx[`remote`] = k_block11[i1];
-        const key1 = ctx['remote'].database+ctx['remote'].url;
-        let attr5 = ctx['remote'].__index;
-        let prop3 = new Boolean(ctx['state'].selectedRemoteIndex===ctx['remote'].__index);
-        const b13 = safeOutput(ctx['remote'].name);
-        c_block11[i1] = withKey(block12([attr5, prop3], [b13]), key1);
-      }
-      ctx = ctx.__proto__;
-      b11 = list(c_block11);
-      let prop4 = new Boolean(ctx['state'].useExistingSession);
-      let hdlr6 = [ctx['toggleUseExistingSession'], ctx];
-      if (ctx['state'].loginLoading) {
-        b14 = block14();
-      }
-      if (ctx['currentRemote']) {
-        const b16 = safeOutput(ctx['currentRemote'].url);
-        const b17 = safeOutput(ctx['currentRemote'].datasrc||'project.issue');
-        b15 = block15([], [b16, b17]);
-      }
-      b5 = block5([hdlr1, hdlr5, prop4, hdlr6], [b6, b8, b9, b10, b11, b14, b15]);
-    }
-    let attr6 = ctx['state'].view==='main'?'':'hide';
-    let prop5 = new String((ctx['state'].searchQuery) === 0 ? 0 : ((ctx['state'].searchQuery) || ""));
+    let b2, b4;
+    let attr1 = ctx['state'].activePage==='about'?'selected':'notselected';
+    const v1 = ctx['state'];
+    let hdlr1 = [()=>v1.activePage='about', ctx];
+    let attr2 = ctx['state'].activePage==='options'?'selected':'notselected';
+    const v2 = ctx['state'];
+    let hdlr2 = [()=>v2.activePage='options', ctx];
+    let attr3 = ctx['state'].activePage==='about'?'active_page':'inactive_page';
+    let attr4 = ctx['state'].activePage==='options'?'active_page':'inactive_page';
+    let hdlr3 = ["prevent", ctx['addRemote'], ctx];
+    let prop1 = new Boolean(ctx['state'].autoDownloadIssueTimesheet);
+    let hdlr4 = [ctx['toggleAutoDownload'], ctx];
+    let prop2 = new String((ctx['state'].form.remote_host) === 0 ? 0 : ((ctx['state'].form.remote_host) || ""));
+    const v3 = ctx['state'];
+    let hdlr5 = [(_ev)=>v3.form.remote_host=_ev.target.value, ctx];
+    let prop3 = new String((ctx['state'].form.remote_name) === 0 ? 0 : ((ctx['state'].form.remote_name) || ""));
     const v4 = ctx['state'];
-    let hdlr7 = [(_ev)=>v4.searchQuery=_ev.target.value, ctx];
-    let prop6 = new String((ctx['state'].limitTo) === 0 ? 0 : ((ctx['state'].limitTo) || ""));
-    const v5 = ctx['updateLimitPreference'];
-    let hdlr8 = [(_ev)=>v5(_ev.target.value), ctx];
-    let prop7 = new Boolean(ctx['state'].autoDownloadIssueTimesheet);
-    let hdlr9 = [ctx['toggleAutoDownload'], ctx];
-    let hdlr10 = [ctx['downloadCurrentMonthTimesheets'], ctx];
-    let hdlr11 = [ctx['switchBetweenRemotes'], ctx];
-    let hdlr12 = [ctx['refreshAll'], ctx];
-    let hdlr13 = [ctx['resetTimer'], ctx];
-    let hdlr14 = [ctx['logout'], ctx];
-    if (ctx['state'].activeTimerId&&ctx['state'].timerStartIso) {
-      const b19 = safeOutput(ctx['state'].activeTimerId);
-      b18 = block18([], [b19]);
-    }
-    if (ctx['state'].timerStartIso) {
-      const b21 = safeOutput(ctx['formattedTimer']);
-      b20 = block20([], [b21]);
-    }
-    b22 = safeOutput(ctx['itemLabelPlural']);
-    b23 = safeOutput(ctx['filteredIssues'].length);
-    let prop8 = new Boolean(ctx['state'].allIssues);
-    const v6 = ctx['updateShowAllPreference'];
-    let hdlr15 = [(_ev)=>v6(_ev.target.checked), ctx];
-    if (ctx['state'].dataSource==='project.task') {
-      const b25 = block25();
-      const b26 = block26();
-      b24 = multi([b25, b26]);
+    let hdlr6 = [(_ev)=>v4.form.remote_name=_ev.target.value, ctx];
+    let prop4 = new String((ctx['state'].form.remote_database) === 0 ? 0 : ((ctx['state'].form.remote_database) || ""));
+    const v5 = ctx['state'];
+    let hdlr7 = [(_ev)=>v5.form.remote_database=_ev.target.value, ctx];
+    let prop5 = new Boolean(ctx['state'].form.remote_datasrc==='project.issue');
+    const v6 = ctx['state'];
+    let hdlr8 = [()=>v6.form.remote_datasrc='project.issue', ctx];
+    let prop6 = new Boolean(ctx['state'].form.remote_datasrc==='project.task');
+    const v7 = ctx['state'];
+    let hdlr9 = [()=>v7.form.remote_datasrc='project.task', ctx];
+    let hdlr10 = [ctx['addRemote'], ctx];
+    let hdlr11 = [ctx['loadRemotes'], ctx];
+    const v8 = ctx['state'];
+    let hdlr12 = [()=>v8.showList=!v8.showList, ctx];
+    let hdlr13 = [ctx['removeAllRemotes'], ctx];
+    if (ctx['state'].error) {
+      const b3 = safeOutput(ctx['state'].error);
+      b2 = block2([], [b3]);
     }
-    if (ctx['filteredIssues'].length) {
+    if (ctx['state'].showList&&ctx['state'].remotes.length) {
       ctx = Object.create(ctx);
-      const [k_block27, v_block27, l_block27, c_block27] = prepareList(ctx['filteredIssues']);;
-      for (let i1 = 0; i1 < l_block27; i1++) {
-        ctx[`issue`] = k_block27[i1];
-        const key1 = ctx['issue'].id;
-        let b29, b30, b31, b33, b34, b35, b36, b41;
-        let attr7 = ctx['state'].activeTimerId===ctx['issue'].id?'active-row':'';
-        if (!ctx['state'].activeTimerId) {
-          const v7 = ctx['startTimer'];
-          const v8 = ctx['issue'];
-          let hdlr16 = [()=>v7(v8), ctx];
-          b29 = block29([hdlr16]);
-        }
-        if (ctx['state'].activeTimerId===ctx['issue'].id) {
-          const v9 = ctx['stopTimer'];
-          const v10 = ctx['issue'];
-          let hdlr17 = [()=>v9(v10), ctx];
-          b30 = block30([hdlr17]);
-        }
-        if (ctx['issue'].priority_level.length) {
-          ctx = Object.create(ctx);
-          const [k_block31, v_block31, l_block31, c_block31] = prepareList(ctx['issue'].priority_level);;
-          for (let i2 = 0; i2 < l_block31; i2++) {
-            ctx[`priority`] = k_block31[i2];
-            const key2 = ctx['priority']+'_'+ctx['issue'].id;
-            c_block31[i2] = withKey(block32(), key2);
-          }
-          ctx = ctx.__proto__;
-          b31 = list(c_block31);
-        }
-        if (!ctx['issue'].priority_level.length) {
-          b33 = block33();
-        }
-        b34 = comp1({text: ctx['relationLabel'](ctx['issue'].stage_id),limit: 15}, key + `__1__${key1}`, node, this, null);
-        b35 = comp2({text: ctx['issueLabel'](ctx['issue']),limit: 70,href: ctx['issueHref'](ctx['issue'])}, key + `__2__${key1}`, node, this, null);
-        if (ctx['state'].dataSource==='project.task') {
-          const b38 = comp3({text: ctx['normalizeText'](ctx['formatHours'](ctx['issue'].effective_hours)),limit: 9}, key + `__3__${key1}`, node, this, null);
-          const b37 = block37([], [b38]);
-          const b40 = comp4({text: ctx['normalizeText'](ctx['formatHours'](ctx['issue'].remaining_hours)),limit: 9}, key + `__4__${key1}`, node, this, null);
-          const b39 = block39([], [b40]);
-          b36 = multi([b37, b39]);
-        }
-        b41 = comp5({text: ctx['relationLabel'](ctx['issue'].project_id),limit: 15}, key + `__5__${key1}`, node, this, null);
-        c_block27[i1] = withKey(block28([attr7], [b29, b30, b31, b33, b34, b35, b36, b41]), key1);
+      const [k_block5, v_block5, l_block5, c_block5] = prepareList(ctx['state'].remotes);;
+      for (let i1 = 0; i1 < l_block5; i1++) {
+        ctx[`remote`] = k_block5[i1];
+        const key1 = ctx['remote'].url+ctx['remote'].database;
+        const b7 = comp1({text: ctx['remote'].name,limit: 18}, key + `__1__${key1}`, node, this, null);
+        const b8 = comp2({text: ctx['remote'].url,limit: 25}, key + `__2__${key1}`, node, this, null);
+        const b9 = comp3({text: ctx['remote'].database,limit: 18}, key + `__3__${key1}`, node, this, null);
+        const b10 = comp4({text: ctx['remote'].datasrc||'project.issue',limit: 18}, key + `__4__${key1}`, node, this, null);
+        const b11 = comp5({text: ctx['remote'].state||'Inactive',limit: 18}, key + `__5__${key1}`, node, this, null);
+        const v9 = ctx['editRemote'];
+        const v10 = ctx['remote'];
+        let hdlr14 = [()=>v9(v10), ctx];
+        const v11 = ctx['removeRemote'];
+        const v12 = ctx['remote'];
+        let hdlr15 = [()=>v11(v12), ctx];
+        c_block5[i1] = withKey(block6([hdlr14, hdlr15], [b7, b8, b9, b10, b11]), key1);
       }
       ctx = ctx.__proto__;
-      b27 = list(c_block27);
+      const b5 = list(c_block5);
+      b4 = block4([], [b5]);
     }
-    if (!ctx['filteredIssues'].length) {
-      let attr8 = ctx['state'].dataSource==='project.task'?7:5;
-      b42 = block42([attr8]);
-    }
-    b43 = safeOutput(ctx['state'].serverVersion||'Unknown');
-    b44 = safeOutput(ctx['state'].currentHost||'-');
-    b45 = safeOutput(ctx['state'].currentDatabase||'-');
-    b46 = safeOutput(ctx['state'].user?ctx['state'].user.display_name:'-');
-    return block1([attr1, attr2, attr6, prop5, hdlr7, prop6, hdlr8, prop7, hdlr9, hdlr10, hdlr11, hdlr12, hdlr13, hdlr14, prop8, hdlr15], [b2, b4, b5, b18, b20, b22, b23, b24, b27, b42, b43, b44, b45, b46]);
+    return block1([attr1, hdlr1, attr2, hdlr2, attr3, attr4, hdlr3, prop1, hdlr4, prop2, hdlr5, prop3, hdlr6, prop4, hdlr7, prop5, hdlr8, prop6, hdlr9, hdlr10, hdlr11, hdlr12, hdlr13], [b2, b4]);
   }
 },
 
@@ -198,7 +88,7 @@ export const templates = {
   const comp4 = app.createComponent(`ReadMore`, true, false, false, ["text","limit"]);
   const comp5 = app.createComponent(`ReadMore`, true, false, false, ["text","limit"]);
   
-  let block1 = createBlock(`<div class="app-root"><div id="loader-container" block-attribute-0="class"><div class="loader-card"><div class="loader-text"> Loading current session and projects… </div><div class="loader-subtext"> Please wait — or grab a cup of coffee ☕ </div><i class="fa fa-cog fa-spin fa-5x"/></div></div><div id="login" class="login-view" block-attribute-1="class"><div class="popup-login-shell"><div class="form"><div class="logo"><img src="/img/logo.png"/></div><block-child-0/><block-child-1/><block-child-2/></div></div><div class="cta forgotpwd footer-app-opts login-footer-bar"><a href="options_main_page.html"><i class="fa fa-cogs"/> Options </a></div></div><div id="wrapper" block-attribute-2="class"><div class="toolbar-row"><input id="searchIssue" type="text" placeholder="Search by ID, name, user, priority, stage..." block-property-3="value" block-handler-4="input"/><select id="limitTo" block-property-5="value" block-handler-6="change" block-handler-7="change"><option value="10">10</option><option value="15">15</option><option value="25">25</option><option value="">All</option></select></div><div class="container footer top-actions"><div class="auto_download_timesheet" title="Store timesheet locally when you stop timer on the current item"><input id="auto_download_timesheet_input" type="checkbox" block-property-8="checked" block-handler-9="change"/> Auto Download Current Item Timesheet </div><div class="row"><div class="mx-3 col-md-12 footer-btns pointer"><i class="fa fa-download fa-2x" title="Download current month timesheet" block-handler-10="click"/><i class="fa fa-hand-o-left fa-2x" title="Switch between remotes" block-handler-11="click"/><i class="fa fa-refresh fa-2x" title="Refresh current items" block-handler-12="click"/><i class="fa fa-clock-o fa-2x" title="Discard the active timer" block-handler-13="click"/><i class="fa fa-sign-out fa-2x" title="Log out" block-handler-14="click"/><a href="options_main_page.html" class="options-btn" title="Go To options"><i class="fa fa-cogs fa-2x"/></a></div></div></div><div class="table-scroll"><table id="table-task-issues" class="table table-responsive-sm table-bordered table-fixed"><thead><tr><th class="action-col"><div/><block-child-3/></th><th class="priority-col">Priority</th><th class="stage-col">Stage</th><th class="item-col"><div class="item-header-title"><block-child-4/> [<block-child-5/>] </div><label class="allIssues"><input id="showAllIssues" type="checkbox" block-property-15="checked" block-handler-16="input"/> Show for everyone </label></th><block-child-6/><th class="project-col">Project</th></tr></thead><tbody><block-child-7/><block-child-7/><block-child-8/></tbody></table></div><div class="container footer info-footer"><div class="row"><div class="remote-info-block col-md-12"><span><b>Odoo:</b> <span class="remote-value"><block-child-9/></span></span><br/><span><b>OWL:</b> <span class="remote-value"><block-child-10/></span></span><br/><span><b>Host:</b> <span class="remote-value"><block-child-11/></span></span><br/><span><b>Database:</b> <span class="remote-value"><block-child-12/></span></span><br/><span><b>Current User:</b> <span class="remote-value"><block-child-13/></span></span><br/></div></div></div></div></div>`);
+  let block1 = createBlock(`<div class="app-root"><div id="loader-container" block-attribute-0="class"><div class="loader-card"><div class="loader-text"> Loading current session and projects… </div><div class="loader-subtext"> Please wait — or grab a cup of coffee ☕ </div><i class="fa fa-cog fa-spin fa-5x"/></div></div><div id="login" class="login-view" block-attribute-1="class"><div class="popup-login-shell"><div class="form"><div class="logo"><img src="/img/logo.png"/></div><block-child-0/><block-child-1/><block-child-2/></div></div><div class="cta forgotpwd footer-app-opts login-footer-bar"><a href="options_main_page.html"><i class="fa fa-cogs"/> Options </a></div></div><div id="wrapper" block-attribute-2="class"><div class="toolbar-row"><input id="searchIssue" type="text" placeholder="Search by ID, name, user, priority, stage..." block-property-3="value" block-handler-4="input"/><select id="limitTo" block-property-5="value" block-handler-6="change" block-handler-7="change"><option value="10">10</option><option value="15">15</option><option value="25">25</option><option value="">All</option></select></div><div class="container footer top-actions"><div class="row"><div class="mx-3 col-md-12 footer-btns pointer"><i class="fa fa-download fa-2x" title="Download current month timesheet" block-handler-8="click"/><i class="fa fa-hand-o-left fa-2x" title="Switch between remotes" block-handler-9="click"/><i class="fa fa-refresh fa-2x" title="Refresh current items" block-handler-10="click"/><i class="fa fa-clock-o fa-2x" title="Discard the active timer" block-handler-11="click"/><i class="fa fa-sign-out fa-2x" title="Log out" block-handler-12="click"/><a href="options_main_page.html" class="options-btn" title="Go To options"><i class="fa fa-cogs fa-2x"/></a></div></div></div><div class="table-scroll"><table id="table-task-issues" class="table table-responsive-sm table-bordered table-fixed"><thead><tr><th class="action-col"><div/><block-child-3/></th><th class="priority-col">Priority</th><th class="stage-col">Stage</th><th class="item-col"><div class="item-header-title"><block-child-4/> [<block-child-5/>] </div><label class="allIssues"><input id="showAllIssues" type="checkbox" block-property-13="checked" block-handler-14="input"/> Show for everyone </label></th><block-child-6/><th class="project-col">Project</th></tr></thead><tbody><block-child-7/><block-child-7/><block-child-8/></tbody></table></div><div class="container footer info-footer"><div class="row"><div class="remote-info-block col-md-12"><span><b>Odoo:</b> <span class="remote-value"><block-child-9/></span></span><br/><span><b>OWL:</b> <span class="remote-value"><block-child-10/></span></span><br/><span><b>Host:</b> <span class="remote-value"><block-child-11/></span></span><br/><span><b>Database:</b> <span class="remote-value"><block-child-12/></span></span><br/><span><b>Current User:</b> <span class="remote-value"><block-child-13/></span></span><br/></div></div></div></div></div>`);
   let block2 = createBlock(`<div><p class="odooError"><block-child-0/></p></div>`);
   let block4 = createBlock(`<div class="container no-remotes-set"><div class="alert alert-warning"> Hello <span class="fun-man">😉</span>, you have not configured any remotes. Open <b><i class="fa fa-cogs"/> Options</b> below and add one. </div></div>`);
   let block5 = createBlock(`<form block-handler-0="submit.prevent"><block-child-0/><block-child-1/><div class="password-field"><block-child-2/><block-child-3/></div><select id="remote-selection" class="form-control" block-handler-1="change"><block-child-4/></select><div class="checkbox"><label><input type="checkbox" block-property-2="checked" block-handler-3="change"/> Use Existing Session </label></div><button class="login" type="submit"> Login <block-child-5/></button><block-child-6/></form>`);
@@ -210,15 +100,15 @@ export const templates = {
   let block14 = createBlock(`<i class="fa fa-cog fa-spin"/>`);
   let block15 = createBlock(`<div class="remote-info small-note"> Host: <block-child-0/><span class="current-source-chip"><block-child-1/></span></div>`);
   let block18 = createBlock(`<span class="startTimeCount"><block-child-0/></span>`);
-  let block23 = createBlock(`<th>Hours Spent</th>`);
-  let block24 = createBlock(`<th>Remaining Hours</th>`);
+  let block23 = createBlock(`<th class="text-center">Hours Spent</th>`);
+  let block24 = createBlock(`<th class="text-center">Hours Left</th>`);
   let block26 = createBlock(`<tr block-attribute-0="class"><td class="text-center px-2 td-btn action-col"><block-child-0/><block-child-1/></td><td class="priority-cell"><block-child-2/><block-child-2/><block-child-3/></td><td class="stage-cell"><block-child-4/></td><td class="issue-desc-cell"><block-child-5/></td><block-child-6/><td class="project-cell"><block-child-7/></td></tr>`);
   let block27 = createBlock(`<i class="fa fa-play-circle action-btn pointer" title="Start the timer for the selected item" block-handler-0="click"/>`);
   let block28 = createBlock(`<i class="text-danger fa fa-stop-circle action-btn pointer" title="Stop timer and record the time to Odoo timesheets" block-handler-0="click"/>`);
   let block30 = createBlock(`<span class="fa fa-star checked"/>`);
   let block31 = createBlock(`<i class="fa fa-star-o"/>`);
-  let block35 = createBlock(`<td><block-child-0/></td>`);
-  let block37 = createBlock(`<td><block-child-0/></td>`);
+  let block35 = createBlock(`<td class="text-center"><block-child-0/></td>`);
+  let block37 = createBlock(`<td class="text-center"><block-child-0/></td>`);
   let block40 = createBlock(`<tr><td class="text-center text-danger" block-attribute-0="colspan"> No matching items are currently available </td></tr>`);
   
   return function template(ctx, node, key = "") {
@@ -293,22 +183,20 @@ export const templates = {
     let hdlr8 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
     const v5 = ctx['updateLimitPreference'];
     let hdlr9 = [(_ev)=>v5(_ev.target.value), ctx];
-    let prop7 = new Boolean(ctx['state'].autoDownloadIssueTimesheet);
-    let hdlr10 = [ctx['toggleAutoDownload'], ctx];
-    let hdlr11 = [ctx['downloadCurrentMonthTimesheets'], ctx];
-    let hdlr12 = [ctx['switchBetweenRemotes'], ctx];
-    let hdlr13 = [ctx['refreshAll'], ctx];
-    let hdlr14 = [ctx['resetTimer'], ctx];
-    let hdlr15 = [ctx['logout'], ctx];
+    let hdlr10 = [ctx['downloadCurrentMonthTimesheets'], ctx];
+    let hdlr11 = [ctx['switchBetweenRemotes'], ctx];
+    let hdlr12 = [ctx['refreshAll'], ctx];
+    let hdlr13 = [ctx['resetTimer'], ctx];
+    let hdlr14 = [ctx['logout'], ctx];
     if (ctx['state'].timerStartIso) {
       const b19 = safeOutput(ctx['formattedTimer']);
       b18 = block18([], [b19]);
     }
     b20 = safeOutput(ctx['itemLabelPlural']);
     b21 = safeOutput(ctx['filteredIssues'].length);
-    let prop8 = new Boolean(ctx['state'].allIssues);
+    let prop7 = new Boolean(ctx['state'].allIssues);
     const v6 = ctx['updateShowAllPreference'];
-    let hdlr16 = [(_ev)=>v6(_ev.target.checked), ctx];
+    let hdlr15 = [(_ev)=>v6(_ev.target.checked), ctx];
     if (ctx['state'].dataSource==='project.task') {
       const b23 = block23();
       const b24 = block24();
@@ -325,14 +213,14 @@ export const templates = {
         if (!ctx['state'].activeTimerId) {
           const v7 = ctx['startTimer'];
           const v8 = ctx['issue'];
-          let hdlr17 = [()=>v7(v8), ctx];
-          b27 = block27([hdlr17]);
+          let hdlr16 = [()=>v7(v8), ctx];
+          b27 = block27([hdlr16]);
         }
         if (ctx['state'].activeTimerId===ctx['issue'].id) {
           const v9 = ctx['stopTimer'];
           const v10 = ctx['issue'];
-          let hdlr18 = [()=>v9(v10), ctx];
-          b28 = block28([hdlr18]);
+          let hdlr17 = [()=>v9(v10), ctx];
+          b28 = block28([hdlr17]);
         }
         if (ctx['issue'].priority_level.length) {
           ctx = Object.create(ctx);
@@ -372,7 +260,7 @@ export const templates = {
     b43 = safeOutput(ctx['state'].currentHost||'-');
     b44 = safeOutput(ctx['state'].currentDatabase||'-');
     b45 = safeOutput(ctx['state'].user?ctx['state'].user.display_name:'-');
-    return block1([attr1, attr2, attr6, prop5, hdlr7, prop6, hdlr8, hdlr9, prop7, hdlr10, hdlr11, hdlr12, hdlr13, hdlr14, hdlr15, prop8, hdlr16], [b2, b4, b5, b18, b20, b21, b22, b25, b40, b41, b42, b43, b44, b45]);
+    return block1([attr1, attr2, attr6, prop5, hdlr7, prop6, hdlr8, hdlr9, hdlr10, hdlr11, hdlr12, hdlr13, hdlr14, prop7, hdlr15], [b2, b4, b5, b18, b20, b21, b22, b25, b40, b41, b42, b43, b44, b45]);
   }
 },
 
diff --git a/dist/chrome/manifest.json b/dist/chrome/manifest.json
index 7e98fc6..28f1757 100644
--- a/dist/chrome/manifest.json
+++ b/dist/chrome/manifest.json
@@ -32,7 +32,7 @@
     "storage",
     "cookies"
   ],
-  "optional_host_permissions": [
+  "host_permissions": [
     "https://*/*",
     "http://*/*"
   ]
diff --git a/dist/chrome/popup.html b/dist/chrome/popup.html
index 17c4c28..d31ccf8 100644
--- a/dist/chrome/popup.html
+++ b/dist/chrome/popup.html
@@ -17,7 +17,7 @@
   <div id="boot-loader" class="boot-loader">
     <div class="loader-card">
       <div class="loader-text">Loading current session and projects…</div>
-      <div class="loader-subtext">Please wait — or grab a cup of coffee ☕</div>
+      <div class="loader-subtext">Please wait or grab a cup of coffee ☕</div>
       <i class="fa fa-cog fa-spin fa-5x"></i>
     </div>
   </div>
diff --git a/dist/firefox/js/components/options-app.js b/dist/firefox/js/components/options-app.js
index 4a9cf31..54f1561 100644
--- a/dist/firefox/js/components/options-app.js
+++ b/dist/firefox/js/components/options-app.js
@@ -20,6 +20,15 @@ const STORAGE_KEYS = {
   remoteHostInfo: 'remote_host_info',
 };
 
+function escapeHtml(value) {
+  return String(value ?? '')
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
 
 function getTemplateRegistry() {
   return globalThis.__THERP_TIMER_TEMPLATES__ || {};
@@ -51,14 +60,15 @@ function createOptionsAppTemplate(app, bdom, helpers) {
   const readMoreState = app.createComponent('ReadMore', true, false, false, ['text', 'limit']);
 
   const rootBlock = createBlock(
-    `<div><div id="navigation"><h1 class="title-app">Timer Options</h1><ul class="list-group"><li class="chooser list-group-item" block-attribute-0="class" block-handler-1="click"><i class="fa fa-info-circle"/> <span>About Timer</span></li><li class="chooser list-group-item" block-attribute-2="class" block-handler-3="click"><i class="fa fa-cogs"/> <span>Options</span></li></ul><hr/><div class="footer-app"><a href="popup.html" class="back-left"><i class="fa fa-arrow-circle-left fa-2x"/></a></div></div><div class="options-box box" block-attribute-4="class"><h1><div class="logo"><img src="/img/logo.png"/></div></h1><hr/><div class="about-app"><h4 class="title-app text-center">Description</h4><hr/>This is a standalone Owl rewrite of the original cross-platform timer extension for posting work hours to Odoo timesheets.<hr/><h4 class="title-app text-center">Features</h4><hr/><div class="timer-features"><ul class="list-group"><li class="list-group-item">Support for both tasks and issues</li><li class="list-group-item">Start and stop the timer for the selected item</li><li class="list-group-item">Create Odoo timesheet lines against the linked analytic account</li><li class="list-group-item">Show assigned items or everyone’s items</li><li class="list-group-item">Add, remove, or clear remote hosts</li><li class="list-group-item">Switch between remote sessions</li><li class="list-group-item">Download current month or current item timesheets as CSV</li></ul></div></div></div><div class="options-box box" block-attribute-5="class"><div class="form remote-options-form"><form block-handler-6="submit.prevent"><h4 class="remote-title text-info">Add Remote</h4><hr/><div class="form-group"><label for="remote-host">Odoo Host</label><input type="text" class="form-control" id="remote-host" placeholder="https://your-odoo-host.example" block-property-7="value" block-handler-8="input"/></div><div class="form-group"><label for="remote-name">Display Name</label><input type="text" class="form-control" id="remote-name" placeholder="Therp" block-property-9="value" block-handler-10="input"/></div><div class="form-group"><label for="remote-database">Odoo Database</label><input type="text" class="form-control" id="remote-database" placeholder="someodoodatabase" block-property-11="value" block-handler-12="input"/></div><div class="form-group"><label class="label">Data Source</label><ul class="data-source-list list-group"><li class="list-group-item"><div class="form-check"><input class="form-check-input" type="radio" value="project.issue" id="FromIssues" block-property-13="checked" block-handler-14="change"/><label class="form-check-label" for="FromIssues">From Issues</label></div></li><li class="list-group-item"><div class="form-check"><input class="form-check-input" type="radio" value="project.task" id="FromTasks" block-property-15="checked" block-handler-16="change"/><label class="form-check-label" for="FromTasks">From Tasks</label></div></li></ul></div><span class="caption-remotes">Controls</span><div class="remotes-control-btns col-md-12 text-center text-info pointer"><i title="Add a remote host" class="fa fa-2x fa-plus-circle" block-handler-17="click"/><i title="Refresh list of remotes" class="fa fa-2x fa-refresh" block-handler-18="click"/><i title="View list of remotes" class="fa fa-2x fa-eye" block-handler-19="click"/><i title="Remove all remotes" class="fa fa-2x fa-minus-circle" block-handler-20="click"/></div><block-child-0/></form></div><block-child-1/></div></div>`
+    `<div><div id="navigation"><h1 class="title-app">Timer Options</h1><ul class="list-group"><li class="chooser list-group-item" block-attribute-0="class" block-handler-1="click"><i class="fa fa-info-circle"/> <span>About Timer</span></li><li class="chooser list-group-item" block-attribute-2="class" block-handler-3="click"><i class="fa fa-cogs"/> <span>Options</span></li></ul><hr/><div class="footer-app"><a href="popup.html" class="back-left"><i class="fa fa-arrow-circle-left fa-2x"/></a></div></div><div class="options-box box" block-attribute-4="class"><h1><div class="logo"><img src="/img/logo.png"/></div></h1><hr/><div class="about-app"><h4 class="title-app text-center">Description</h4><hr/>This is a standalone Owl rewrite of the original cross-platform timer extension for posting work hours to Odoo timesheets.<hr/><h4 class="title-app text-center">Features</h4><hr/><div class="timer-features"><ul class="list-group"><li class="list-group-item">Support for both tasks and issues</li><li class="list-group-item">Start and stop the timer for the selected item</li><li class="list-group-item">Create Odoo timesheet lines against the linked analytic account</li><li class="list-group-item">Show assigned items or everyone’s items</li><li class="list-group-item">Add, remove, or clear remote hosts</li><li class="list-group-item">Switch between remote sessions</li><li class="list-group-item">Download current month or current item timesheets as CSV</li></ul></div></div></div><div class="options-box box" block-attribute-5="class"><div class="form remote-options-form"><form block-handler-6="submit.prevent"><h4 class="remote-title text-info">General Settings</h4><hr/><div class="form-group"><label class="general-setting-label"><input type="checkbox" class="defaultCheckbox" block-property-21="checked" block-handler-22="change"/> Auto Download Current Item Timesheet</label><p class="inline-help">Store timesheet locally each time you stop the timer on an item.</p></div><hr/><h4 class="remote-title text-info">Add Remote</h4><hr/><div class="form-group"><label for="remote-host">Odoo Host</label><input type="text" class="form-control" id="remote-host" placeholder="https://your-odoo-host.example" block-property-7="value" block-handler-8="input"/></div><div class="form-group"><label for="remote-name">Display Name</label><input type="text" class="form-control" id="remote-name" placeholder="Therp" block-property-9="value" block-handler-10="input"/></div><div class="form-group"><label for="remote-database">Odoo Database</label><input type="text" class="form-control" id="remote-database" placeholder="someodoodatabase" block-property-11="value" block-handler-12="input"/></div><div class="form-group"><label class="label">Data Source</label><ul class="data-source-list list-group"><li class="list-group-item"><div class="form-check"><input class="form-check-input" type="radio" value="project.issue" id="FromIssues" block-property-13="checked" block-handler-14="change"/><label class="form-check-label" for="FromIssues">From Issues</label></div></li><li class="list-group-item"><div class="form-check"><input class="form-check-input" type="radio" value="project.task" id="FromTasks" block-property-15="checked" block-handler-16="change"/><label class="form-check-label" for="FromTasks">From Tasks</label></div></li></ul></div><span class="caption-remotes">Controls</span><div class="remotes-control-btns col-md-12 text-center text-info pointer"><i title="Add a remote host" class="fa fa-2x fa-plus-circle" block-handler-17="click"/><i title="Refresh list of remotes" class="fa fa-2x fa-refresh" block-handler-18="click"/><i title="View list of remotes" class="fa fa-2x fa-eye" block-handler-19="click"/><i title="Remove all remotes" class="fa fa-2x fa-minus-circle" block-handler-20="click"/></div><block-child-0/></form></div><block-child-1/></div></div>`
   );
   const errorBlock = createBlock(`<div class="remote-error"><block-text-0/></div>`);
   const remotesTableBlock = createBlock(
     `<div class="remotes-table-info"><table class="table table-bordered"><caption class="text-info caption-remotes">List of Available Remotes</caption><thead><tr><th scope="col">Remote</th><th scope="col">Host</th><th scope="col">Database</th><th scope="col">Source</th><th scope="col">State</th><th></th></tr></thead><tbody><block-child-0/></tbody></table></div>`
   );
   const remoteRowBlock = createBlock(
-    `<tr><td class="text-info"><block-child-0/></td><td><block-child-1/></td><td><block-child-2/></td><td><block-child-3/></td><td><block-child-4/></td><td class="remote-row-actions"><i class="fa fa-trash text-danger" title="Remove remote" block-handler-0="click"/></td></tr>`
+    `<tr><td class="text-info"><block-child-0/></td><td><block-child-1/></td><td><block-child-2/></td><td><block-child-3/></td><td><block-child-4/></td><td class="remote-row-actions"><i class="fa fa-pencil text-primary" title="Edit remote" block-handler-0="click" style="margin-right: 10px; cursor: pointer;"/>
+                        <i class="fa fa-trash text-danger" title="Remove remote" block-handler-1="click" style="cursor: pointer;"/></td></tr>`
   );
 
   return function template(ctx, node, key = '') {
@@ -95,6 +105,8 @@ function createOptionsAppTemplate(app, bdom, helpers) {
     const reloadRemotesHandler = [ctx.loadRemotes, ctx];
     const toggleListHandler = [() => { ctx.state.showList = !ctx.state.showList; }, ctx];
     const removeAllRemotesHandler = [ctx.removeAllRemotes, ctx];
+    const autoDownloadChecked = ctx.state.autoDownloadIssueTimesheet;
+    const autoDownloadHandler = [(ev) => { ctx.toggleAutoDownload(ev); }];
 
     if (ctx.state.error) {
       errorNode = errorBlock([ctx.state.error]);
@@ -120,10 +132,11 @@ function createOptionsAppTemplate(app, bdom, helpers) {
         const sourceNode = readMoreSource({ text: ctx.remote.datasrc || DEFAULT_DATA_SOURCE, limit: 18 }, key + `__4__${remoteKey}`, node, this, null);
         const stateNode = readMoreState({ text: ctx.remote.state || 'Inactive', limit: 18 }, key + `__5__${remoteKey}`, node, this, null);
         const remoteItem = ctx.remote;
+        const editHandler = [() => ctx.editRemote(remoteItem), ctx];
         const deleteHandler = [() => ctx.removeRemote(remoteItem), ctx];
 
         remoteChildren[i] = withKey(
-          remoteRowBlock([deleteHandler], [nameNode, hostNode, databaseNode, sourceNode, stateNode]),
+          remoteRowBlock([editHandler, deleteHandler], [nameNode, hostNode, databaseNode, sourceNode, stateNode]),
           remoteKey
         );
       }
@@ -155,6 +168,8 @@ function createOptionsAppTemplate(app, bdom, helpers) {
         reloadRemotesHandler,
         toggleListHandler,
         removeAllRemotesHandler,
+        autoDownloadChecked,     
+        autoDownloadHandler,    
       ],
       [errorNode, remoteListNode]
     );
@@ -169,11 +184,15 @@ class OptionsApp extends Component {
   static template = 'OptionsApp';
 
   setup() {
+    this.removeRemote = this.removeRemote.bind(this);
+    this.editRemote = this.editRemote.bind(this);
+
     this.state = useState({
       activePage: PAGE_OPTIONS,
       remotes: [],
       showList: true,
       error: '',
+      autoDownloadIssueTimesheet: false,
       form: {
         remote_host: '',
         remote_name: '',
@@ -184,6 +203,8 @@ class OptionsApp extends Component {
 
     onWillStart(async () => {
       await this.loadRemotes();
+      const saved = await storage.get('auto_download_issue_timesheet', false);
+      this.state.autoDownloadIssueTimesheet = !!saved;
     });
   }
 
@@ -206,6 +227,15 @@ class OptionsApp extends Component {
     this.state.form.remote_datasrc = DEFAULT_DATA_SOURCE;
   }
 
+  /**
+   * Toggle the auto-download timesheet preference and persist it.
+   * @param {Event} ev
+   */
+  async toggleAutoDownload(ev) {
+    this.state.autoDownloadIssueTimesheet = ev.target.checked;
+    await storage.set('auto_download_issue_timesheet', !!this.state.autoDownloadIssueTimesheet);
+  }
+
   /**
    * Validate current form fields and return normalized values.
    *
@@ -287,11 +317,131 @@ class OptionsApp extends Component {
     await this.loadRemotes();
     await notify(`[${remote.url}] removed successfully!`);
   }
+
   /**
-   * Expose the About page constant to Owl XML expressions.
+   * Edit an existing remote configuration.
    *
-   * @returns {string}
+   * @param {object} remote Remote row to edit.
+   * @returns {Promise<void>}
    */
+  async editRemote(remote) {
+    this.state.error = '';
+
+    const currentHost = remote.url || '';
+    const currentName = remote.name || '';
+    const currentDatabase = remote.database || '';
+    const currentDatasource = remote.datasrc || DEFAULT_DATA_SOURCE;
+
+    const customAlert = globalThis.alert && typeof globalThis.alert.show === 'function'
+      ? globalThis.alert
+      : null;
+
+    let host = currentHost;
+    let name = currentName;
+    let database = currentDatabase;
+    let datasrc = currentDatasource;
+
+    if (customAlert) {
+      const inputSuffix = `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+      const hostId = `edit-remote-host-${inputSuffix}`;
+      const nameId = `edit-remote-name-${inputSuffix}`;
+      const databaseId = `edit-remote-database-${inputSuffix}`;
+      const datasourceId = `edit-remote-datasource-${inputSuffix}`;
+      const html = `
+        <div style="min-width:340px;max-width:520px;text-align:left;">
+          <div style="margin-bottom:14px;font-weight:700;font-size:18px;color:#42475a;text-align:center;">Edit Remote</div>
+          <div style="display:flex;flex-direction:column;gap:12px;">
+            <label style="display:flex;flex-direction:column;gap:6px;font-weight:600;color:#334155;">
+              <span>Odoo Host</span>
+              <input id="${hostId}" type="text" value="${escapeHtml(currentHost)}" style="width:100%;box-sizing:border-box;padding:10px;border:1px solid #cbd5e1;border-radius:4px;font:14px Arial,Helvetica,sans-serif;color:#111827;background:#fff;" />
+            </label>
+            <label style="display:flex;flex-direction:column;gap:6px;font-weight:600;color:#334155;">
+              <span>Display Name</span>
+              <input id="${nameId}" type="text" value="${escapeHtml(currentName)}" style="width:100%;box-sizing:border-box;padding:10px;border:1px solid #cbd5e1;border-radius:4px;font:14px Arial,Helvetica,sans-serif;color:#111827;background:#fff;" />
+            </label>
+            <label style="display:flex;flex-direction:column;gap:6px;font-weight:600;color:#334155;">
+              <span>Odoo Database</span>
+              <input id="${databaseId}" type="text" value="${escapeHtml(currentDatabase)}" style="width:100%;box-sizing:border-box;padding:10px;border:1px solid #cbd5e1;border-radius:4px;font:14px Arial,Helvetica,sans-serif;color:#111827;background:#fff;" />
+            </label>
+            <label style="display:flex;flex-direction:column;gap:6px;font-weight:600;color:#334155;">
+              <span>Data Source</span>
+              <select id="${datasourceId}" style="width:100%;box-sizing:border-box;padding:10px;border:1px solid #cbd5e1;border-radius:4px;font:14px Arial,Helvetica,sans-serif;color:#111827;background:#fff;">
+                <option value="project.issue" ${currentDatasource === DEFAULT_DATA_SOURCE ? 'selected' : ''}>From Issues</option>
+                <option value="project.task" ${currentDatasource === 'project.task' ? 'selected' : ''}>From Tasks</option>
+              </select>
+            </label>
+          </div>
+        </div>
+      `;
+
+      const result = await customAlert.show(html, ['Cancel', 'Save']);
+      if (result !== 'Save') {
+        return;
+      }
+
+      const hostEl = document.getElementById(hostId);
+      const nameEl = document.getElementById(nameId);
+      const databaseEl = document.getElementById(databaseId);
+      const datasourceEl = document.getElementById(datasourceId);
+
+      host = normalizeHost(hostEl ? hostEl.value : currentHost);
+      name = ((nameEl ? nameEl.value : currentName) || '').trim();
+      database = ((databaseEl ? databaseEl.value : currentDatabase) || '').trim();
+      datasrc = datasourceEl ? datasourceEl.value : currentDatasource;
+    } else {
+      return;
+    }
+
+    if (!host || !name || !database) {
+      this.state.error = 'Fields cannot be empty';
+      return;
+    }
+
+    if (!validURL(host)) {
+      this.state.error = 'Invalid URL syntax';
+      return;
+    }
+
+    const remotes = await readRemotes();
+    const duplicate = remotes.find(
+      (item) => !(item.url === currentHost && item.database === currentDatabase)
+        && item.url === host
+        && item.database === database
+    );
+    if (duplicate) {
+      this.state.error = `${host} and ${database} already exist; duplicates are not allowed`;
+      return;
+    }
+
+    const index = remotes.findIndex(
+      (item) => item.url === currentHost && item.database === currentDatabase
+    );
+    if (index === -1) {
+      this.state.error = 'Remote not found';
+      return;
+    }
+
+    remotes[index] = {
+      ...remotes[index],
+      url: host,
+      name,
+      database,
+      datasrc,
+    };
+
+    await writeRemotes(remotes);
+
+    if (host !== currentHost) {
+      await clearOdooSessionCookies(currentHost);
+    }
+    if (database !== currentDatabase) {
+      await storage.remove(currentDatabase);
+    }
+
+    await this.loadRemotes();
+    await notify(`Remote [${name}] updated successfully.`);
+  }
+
   get PAGE_ABOUT() {
       return PAGE_ABOUT;
   }
diff --git a/dist/firefox/js/components/popup-app.js b/dist/firefox/js/components/popup-app.js
index 64eb316..177ea90 100644
--- a/dist/firefox/js/components/popup-app.js
+++ b/dist/firefox/js/components/popup-app.js
@@ -79,7 +79,7 @@ function createPopupAppTemplate(app, bdom, helpers) {
     const readMoreProject = app.createComponent('ReadMore', true, false, false, ['text', 'limit']);
 
     const rootBlock = createBlock(
-        `<div class="app-root"><div id="loader-container" block-attribute-0="class"><div class="loader-card"><div class="loader-text">Loading current session and projects…</div><div class="loader-subtext">Please wait — or grab a cup of coffee ☕</div><i class="fa fa-cog fa-spin fa-5x"/></div></div><div id="login" class="login-view" block-attribute-1="class"><div class="popup-login-shell"><div class="form"><div class="logo"><img src="/img/logo.png"/></div><block-child-0/><block-child-1/><block-child-2/></div></div><div class="cta forgotpwd footer-app-opts login-footer-bar"><a href="options_main_page.html"><i class="fa fa-cogs"/> Options</a></div></div><div id="wrapper" block-attribute-2="class"><div class="toolbar-row"><input id="searchIssue" type="text" placeholder="Search by ID, name, user, priority, stage..." block-property-3="value" block-handler-4="input"/><select id="limitTo" block-property-5="value" block-handler-6="change"><option value="10">10</option><option value="15">15</option><option value="25">25</option><option value="">All</option></select></div><div class="container footer top-actions"><div class="auto_download_timesheet" title="Store timesheet locally when you stop timer on the current item"><input id="auto_download_timesheet_input" type="checkbox" block-property-7="checked" block-handler-8="change"/> Auto Download Current Item Timesheet </div><div class="row"><div class="mx-3 col-md-12 footer-btns pointer"><i class="fa fa-download fa-2x" title="Download current month timesheet" block-handler-9="click"/><i class="fa fa-hand-o-left fa-2x" title="Switch between remotes" block-handler-10="click"/><i class="fa fa-refresh fa-2x" title="Refresh current items" block-handler-11="click"/><i class="fa fa-undo fa-2x" title="Discard the active timer" block-handler-12="click"/><i class="fa fa-sign-out fa-2x" title="Log out" block-handler-13="click"/><a href="options_main_page.html" class="options-btn" title="Go To options"><i class="fa fa-cogs fa-2x"/></a></div></div></div><div class="table-scroll"><table class="table table-responsive-sm table-bordered table-fixed" id="table-task-issues"><thead><tr><th class="action-col"><div><block-child-3/></div><block-child-4/></th><th class="priority-col">Priority</th><th class="stage-col">Stage</th><th class="item-col"><div class="item-header-title"><block-text-14/> [<block-text-15/>]</div><label class="allIssues"><input id="showAllIssues" type="checkbox" block-property-16="checked" block-handler-17="input"/> Show for everyone</label></th><block-child-5/><block-child-6/><th class="project-col">Project</th></tr></thead><tbody><block-child-7/><block-child-8/></tbody></table></div><div class="info-footer mx-3"><div class="row"><div class="remote-info-block col-md-12"><span><b>Odoo:</b> <block-text-18/></span><br/><span><b>Host:</b> <block-text-19/></span><br/><span><b>Database:</b> <block-text-20/></span><br/><span><b>Current User:</b> <block-text-21/></span><br/></div></div></div></div></div>`
+        `<div class="app-root"><div id="loader-container" block-attribute-0="class"><div class="loader-card"><div class="loader-text">Loading current session and projects…</div><div class="loader-subtext">Please wait — or grab a cup of coffee ☕</div><i class="fa fa-cog fa-spin fa-5x"/></div></div><div id="login" class="login-view" block-attribute-1="class"><div class="popup-login-shell"><div class="form"><div class="logo"><img src="/img/logo.png"/></div><block-child-0/><block-child-1/><block-child-2/></div></div><div class="cta forgotpwd footer-app-opts login-footer-bar"><a href="options_main_page.html"><i class="fa fa-cogs"/> Options</a></div></div><div id="wrapper" block-attribute-2="class"><div class="toolbar-row"><input id="searchIssue" type="text" placeholder="Search by ID, name, user, priority, stage..." block-property-3="value" block-handler-4="input"/><select id="limitTo" block-property-5="value" block-handler-6="change"><option value="10">10</option><option value="15">15</option><option value="25">25</option><option value="">All</option></select></div><div class="container footer top-actions"><div class="row"><div class="mx-3 col-md-12 footer-btns pointer"><i class="fa fa-download fa-2x" title="Download current month timesheet" block-handler-7="click"/><i class="fa fa-hand-o-left fa-2x" title="Switch between remotes" block-handler-8="click"/><i class="fa fa-refresh fa-2x" title="Refresh current items" block-handler-9="click"/><i class="fa fa-undo fa-2x" title="Discard the active timer" block-handler-10="click"/><i class="fa fa-sign-out fa-2x" title="Log out" block-handler-11="click"/><a href="options_main_page.html" class="options-btn" title="Go To options"><i class="fa fa-cogs fa-2x"/></a></div></div></div><div class="table-scroll"><table class="table table-responsive-sm table-bordered table-fixed" id="table-task-issues"><thead><tr><th class="action-col"><div><block-child-3/></div><block-child-4/></th><th class="priority-col">Priority</th><th class="stage-col">Stage</th><th class="item-col"><div class="item-header-title"><block-text-12/> [<block-text-13/>]</div><label class="allIssues"><input id="showAllIssues" type="checkbox" block-property-14="checked" block-handler-15="input"/> Show for everyone</label></th><block-child-5/><block-child-6/><th class="project-col">Project</th></tr></thead><tbody><block-child-7/><block-child-8/></tbody></table></div><div class="info-footer mx-3"><div class="row"><div class="remote-info-block col-md-12"><span><b>Odoo:</b> <block-text-16/></span><br/><span><b>Host:</b> <block-text-17/></span><br/><span><b>Database:</b> <block-text-18/></span><br/><span><b>Current User:</b> <block-text-19/></span><br/></div></div></div></div></div>`
     );
     const bootErrorBlock = createBlock(`<div><p class="odooError"><block-text-0/></p></div>`);
     const noRemotesBlock = createBlock(
@@ -106,8 +106,8 @@ function createPopupAppTemplate(app, bdom, helpers) {
         `<div class="remote-info small-note">Host: <block-text-0/> <span class="current-source-chip"><block-text-1/></span></div>`
     );
     const activeTimerDurationBlock = createBlock(`<span class="startTimeCount"><block-text-0/></span>`);
-    const hoursSpentHeaderBlock = createBlock(`<th>Hours Spent</th>`);
-    const remainingHoursHeaderBlock = createBlock(`<th>Remaining Hours</th>`);
+    const hoursSpentHeaderBlock = createBlock(`<th class="text-center">Hours Spent</th>`);
+    const remainingHoursHeaderBlock = createBlock(`<th class="text-center">Hours Left</th>`);
     const issueRowBlock = createBlock(
         `<tr block-attribute-0="class"><td class="text-center px-2 td-btn action-col"><block-child-0/><block-child-1/></td><td class="priority-cell"><block-child-2/><block-child-3/></td><td class="stage-cell"><block-child-4/></td><td class="issue-desc-cell"><block-child-5/></td><block-child-6/><block-child-7/><td class="project-cell"><block-child-8/></td></tr>`
     );
@@ -119,8 +119,8 @@ function createPopupAppTemplate(app, bdom, helpers) {
     );
     const priorityStarBlock = createBlock(`<span class="fa fa-star checked"/>`);
     const priorityStarOutlineBlock = createBlock(`<i class="fa fa-star-o"/>`);
-    const effectiveHoursCellBlock = createBlock(`<td><block-child-0/></td>`);
-    const remainingHoursCellBlock = createBlock(`<td><block-child-0/></td>`);
+    const effectiveHoursCellBlock = createBlock(`<td class="text-center"><block-child-0/></td>`);
+    const remainingHoursCellBlock = createBlock(`<td class="text-center"><block-child-0/></td>`);
     const emptyIssuesRowBlock = createBlock(
         `<tr><td block-attribute-0="colspan" class="text-center text-danger">No matching items are currently available</td></tr>`
     );
@@ -250,8 +250,6 @@ function createPopupAppTemplate(app, bdom, helpers) {
         const limitHandler = [(ev) => {
             ctx.updateLimitPreference(ev.target.value);
         }];
-        const autoDownloadChecked = ctx.state.autoDownloadIssueTimesheet;
-        const autoDownloadHandler = [ctx.toggleAutoDownload, ctx];
         const downloadTimesheetHandler = [ctx.downloadCurrentMonthTimesheets, ctx];
         const switchRemotesHandler = [ctx.switchBetweenRemotes, ctx];
         const refreshHandler = [ctx.refreshAll, ctx];
@@ -400,8 +398,6 @@ function createPopupAppTemplate(app, bdom, helpers) {
                 searchQueryHandler,
                 limitValue,
                 limitHandler,
-                autoDownloadChecked,
-                autoDownloadHandler,
                 downloadTimesheetHandler,
                 switchRemotesHandler,
                 refreshHandler,
@@ -767,7 +763,6 @@ class PopupApp extends Component {
             ]);
 
             if (sessionInfo?.uid) {
-                // FIX: must return here so we don't fall through to VIEW_LOGIN below.
                 await this.completeSession(sessionInfo, this.state.remotes[remoteIndex] || null);
                 return;
             }
@@ -845,15 +840,15 @@ class PopupApp extends Component {
     }
 
     issueLabel(issue) {
-        const issueName = this.normalizeText(
-            issue.display_name || issue.name || issue.message_summary || issue.description || ''
-        );
-
         if (this.state.dataSource === DATA_SOURCE_TASK) {
             const code = this.normalizeText(issue.code);
+            const issueName = this.normalizeText(issue.name || issue.description || '');
             return [code, issueName].filter(Boolean).join(' - ') || `#${issue.id}`;
         }
 
+        const issueName = this.normalizeText(
+            issue.display_name || issue.name || issue.message_summary || issue.description || ''
+        );
         return [`#${issue.id}`, issueName].filter(Boolean).join(' - ');
     }
 
@@ -1291,6 +1286,24 @@ class PopupApp extends Component {
      * Download a CSV with current month timesheet rows.
      */
     async downloadCurrentMonthTimesheets() {
+        const autoDownloadEnabled = await storage.get('auto_download_issue_timesheet', false);
+        if (!autoDownloadEnabled) {
+            const blockingText = 
+              '<div style="text-align: center; padding: 20px;">' +
+                '<h5 style="margin-bottom: 15px; color: #d32f2f;">⚠️ Auto-Download Not Enabled</h5>' +
+                '<p style="margin-bottom: 15px; font-size: 16px;">' +
+                  'Please enable <b>Auto Download Current Item Timesheet</b> ' +
+                  'in the Options menu before downloading timesheets.' +
+                '</p>' +
+                '<p style="color: #666; font-size: 14px;">' +
+                  'Click the <b>⚙️ Options</b> icon, then check the box under General Settings.' +
+                '</p>' +
+              '</div>';
+            
+            await alert.show(blockingText, ['OK']);
+            return; // STOP - do not proceed with download
+        }
+
         try {
             if (!this.state.user?.id) {
                 throw new Error('Login first.');
diff --git a/dist/firefox/js/templates.js b/dist/firefox/js/templates.js
index a87b1ca..25ca7f7 100644
--- a/dist/firefox/js/templates.js
+++ b/dist/firefox/js/templates.js
@@ -1,190 +1,80 @@
 export const templates = {
- "PopupApp": function PopupApp(app, bdom, helpers
+ "OptionsApp": function OptionsApp(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput, prepareList, withKey } = helpers;
   const comp1 = app.createComponent(`ReadMore`, true, false, false, ["text","limit"]);
-  const comp2 = app.createComponent(`ReadMore`, true, false, false, ["text","limit","href"]);
+  const comp2 = app.createComponent(`ReadMore`, true, false, false, ["text","limit"]);
   const comp3 = app.createComponent(`ReadMore`, true, false, false, ["text","limit"]);
   const comp4 = app.createComponent(`ReadMore`, true, false, false, ["text","limit"]);
   const comp5 = app.createComponent(`ReadMore`, true, false, false, ["text","limit"]);
   
-  let block1 = createBlock(`<div class="app-root"><div id="loader-container" block-attribute-0="class"><div class="loader-card"><div class="loader-text"> Loading current session and projects… </div><div class="loader-subtext"> Please wait — or grab a cup of coffee ☕ </div><i class="fa fa-cog fa-spin fa-5x"/></div></div><div id="login" class="login-view" block-attribute-1="class"><div class="popup-login-shell"><div class="form"><div class="logo"><img src="/img/logo.png"/></div><block-child-0/><block-child-1/><block-child-2/></div></div><div class="cta forgotpwd footer-app-opts login-footer-bar"><a href="options_main_page.html"><i class="fa fa-cogs"/> Options </a></div></div><div id="wrapper" block-attribute-2="class"><div class="toolbar-row"><input id="searchIssue" type="text" placeholder="Search by ID, name, user, priority, stage..." block-property-3="value" block-handler-4="input"/><select id="limitTo" block-property-5="value" block-handler-6="change"><option value="10">10</option><option value="15">15</option><option value="25">25</option><option value="">All</option></select></div><div class="container footer top-actions"><div class="auto_download_timesheet" title="Store timesheet locally when you stop timer on the current item"><input id="auto_download_timesheet_input" type="checkbox" block-property-7="checked" block-handler-8="change"/> Auto Download Current Item Timesheet </div><div class="row"><div class="mx-3 col-md-12 footer-btns pointer"><i class="fa fa-download fa-2x" title="Download current month timesheet" block-handler-9="click"/><i class="fa fa-hand-o-left fa-2x" title="Switch between remotes" block-handler-10="click"/><i class="fa fa-refresh fa-2x" title="Refresh current items" block-handler-11="click"/><i class="fa fa-undo fa-2x" title="Discard the active timer" block-handler-12="click"/><i class="fa fa-sign-out fa-2x" title="Log out" block-handler-13="click"/><a href="options_main_page.html" class="options-btn" title="Go To options"><i class="fa fa-cogs fa-2x"/></a></div></div></div><div class="table-scroll"><table id="table-task-issues" class="table table-responsive-sm table-bordered table-fixed"><thead><tr><th class="action-col"><div><block-child-3/></div><block-child-4/></th><th class="priority-col">Priority</th><th class="stage-col">Stage</th><th class="item-col"><div class="item-header-title"><block-child-5/> [<block-child-6/>] </div><label class="allIssues"><input id="showAllIssues" type="checkbox" block-property-14="checked" block-handler-15="input"/> Show for everyone </label></th><block-child-7/><th class="project-col">Project</th></tr></thead><tbody><block-child-8/><block-child-8/><block-child-9/></tbody></table></div><div class="container footer info-footer"><div class="row"><div class="remote-info-block col-md-12"><span><b>Odoo:</b> <block-child-10/></span><br/><span><b>Host:</b> <block-child-11/></span><br/><span><b>Database:</b> <block-child-12/></span><br/><span><b>Current User:</b> <block-child-13/></span><br/></div></div></div></div></div>`);
-  let block2 = createBlock(`<div><p class="odooError"><block-child-0/></p></div>`);
-  let block4 = createBlock(`<div class="container no-remotes-set"><div class="alert alert-warning"> Hello <span class="fun-man">😉</span>, you have not configured any remotes. Open <b><i class="fa fa-cogs"/> Options</b> below and add one. </div></div>`);
-  let block5 = createBlock(`<form block-handler-0="submit.prevent"><block-child-0/><block-child-1/><div class="password-field"><block-child-2/><block-child-3/></div><select id="remote-selection" class="form-control" block-handler-1="change"><block-child-4/></select><div class="checkbox"><label><input type="checkbox" block-property-2="checked" block-handler-3="change"/> Use Existing Session </label></div><button class="login" type="submit"> Login <block-child-5/></button><block-child-6/></form>`);
-  let block6 = createBlock(`<p class="odooError"><block-child-0/></p>`);
-  let block8 = createBlock(`<input type="text" placeholder="Username" block-property-0="value" block-handler-1="input"/>`);
-  let block9 = createBlock(`<input id="unique-password" block-attribute-0="type" placeholder="Password" block-property-1="value" block-handler-2="input"/>`);
-  let block10 = createBlock(`<span class="pass-viewer" block-handler-0="click"><i class="fa" block-attribute-1="class"/></span>`);
-  let block12 = createBlock(`<option block-attribute-0="value" block-property-1="selected"><block-child-0/></option>`);
-  let block14 = createBlock(`<i class="fa fa-cog fa-spin"/>`);
-  let block15 = createBlock(`<div class="remote-info small-note"> Host: <block-child-0/><span class="current-source-chip"><block-child-1/></span></div>`);
-  let block18 = createBlock(`<span class="active-timer-running"><i class="fa fa-clock-o"/> #<block-child-0/></span>`);
-  let block20 = createBlock(`<span class="startTimeCount"><block-child-0/></span>`);
-  let block25 = createBlock(`<th>Hours Spent</th>`);
-  let block26 = createBlock(`<th>Remaining Hours</th>`);
-  let block28 = createBlock(`<tr block-attribute-0="class"><td class="text-center px-2 td-btn action-col"><block-child-0/><block-child-1/></td><td class="priority-cell"><block-child-2/><block-child-2/><block-child-3/></td><td class="stage-cell"><block-child-4/></td><td class="issue-desc-cell"><block-child-5/></td><block-child-6/><td class="project-cell"><block-child-7/></td></tr>`);
-  let block29 = createBlock(`<i class="fa fa-play-circle action-btn pointer" title="Start the timer for the selected item" block-handler-0="click"/>`);
-  let block30 = createBlock(`<i class="text-danger fa fa-stop-circle action-btn pointer" title="Stop timer and record the time to Odoo timesheets" block-handler-0="click"/>`);
-  let block32 = createBlock(`<span class="fa fa-star checked"/>`);
-  let block33 = createBlock(`<i class="fa fa-star-o"/>`);
-  let block37 = createBlock(`<td><block-child-0/></td>`);
-  let block39 = createBlock(`<td><block-child-0/></td>`);
-  let block42 = createBlock(`<tr><td class="text-center text-danger" block-attribute-0="colspan"> No matching items are currently available </td></tr>`);
+  let block1 = createBlock(`<div><!-- ── Left navigation sidebar ─────────────────────────────────── --><div id="navigation"><h1 class="title-app">Timer Options</h1><ul class="list-group"><li class="chooser list-group-item" block-attribute-0="class" block-handler-1="click"><i class="fa fa-info-circle"/> <span>About Timer</span></li><li class="chooser list-group-item" block-attribute-2="class" block-handler-3="click"><i class="fa fa-cogs"/> <span>Options</span></li></ul><hr/><div class="footer-app"><a href="popup.html" class="back-left"><i class="fa fa-arrow-circle-left fa-2x"/></a></div></div><!-- ── About page ──────────────────────────────────────────────── --><div class="options-box box" block-attribute-4="class"><h1><div class="logo"><img src="/img/logo.png"/></div></h1><hr/><div class="about-app"><h4 class="title-app text-center">Description</h4><hr/> This is a standalone Owl rewrite of the original cross-platform timer extension for posting work hours to Odoo timesheets. <hr/><h4 class="title-app text-center">Features</h4><hr/><div class="timer-features"><ul class="list-group"><li class="list-group-item">Support for both tasks and issues</li><li class="list-group-item">Start and stop the timer for the selected item</li><li class="list-group-item">Create Odoo timesheet lines against the linked analytic account</li><li class="list-group-item">Show assigned items or everyone's items</li><li class="list-group-item">Add, remove, or clear remote hosts</li><li class="list-group-item">Switch between remote sessions</li><li class="list-group-item">Download current month or current item timesheets as CSV</li></ul></div></div></div><!-- ── Options / remotes page ──────────────────────────────────── --><div class="options-box box" block-attribute-5="class"><div class="form remote-options-form"><form block-handler-6="submit.prevent"><!-- [FIX #38] General Settings ──────────────────────────── --><h4 class="remote-title text-info">General Settings</h4><hr/><div class="form-group"><label class="general-setting-label"><input type="checkbox" class="defaultCheckbox" block-property-7="checked" block-handler-8="change"/> Auto Download Current Item Timesheet </label><p class="inline-help"> Store timesheet locally each time you stop the timer on an item. </p></div><hr/><!-- Add Remote form ─────────────────────────────────────── --><h4 class="remote-title text-info">Add Remote</h4><hr/><div class="form-group"><label for="remote-host">Odoo Host</label><input type="text" class="form-control" id="remote-host" placeholder="https://your-odoo-host.example" block-property-9="value" block-handler-10="input"/></div><div class="form-group"><label for="remote-name">Display Name</label><input type="text" class="form-control" id="remote-name" placeholder="Therp" block-property-11="value" block-handler-12="input"/></div><div class="form-group"><label for="remote-database">Odoo Database</label><input type="text" class="form-control" id="remote-database" placeholder="someodoodatabase" block-property-13="value" block-handler-14="input"/></div><div class="form-group"><label class="label">Data Source</label><ul class="data-source-list list-group"><li class="list-group-item"><div class="form-check"><input class="form-check-input" type="radio" value="project.issue" id="FromIssues" block-property-15="checked" block-handler-16="change"/><label class="form-check-label" for="FromIssues">From Issues</label></div></li><li class="list-group-item"><div class="form-check"><input class="form-check-input" type="radio" value="project.task" id="FromTasks" block-property-17="checked" block-handler-18="change"/><label class="form-check-label" for="FromTasks">From Tasks</label></div></li></ul></div><span class="caption-remotes">Controls</span><div class="remotes-control-btns col-md-12 text-center text-info pointer"><i title="Add a remote host" class="fa fa-2x fa-plus-circle" block-handler-19="click"/><i title="Refresh list of remotes" class="fa fa-2x fa-refresh" block-handler-20="click"/><i title="View list of remotes" class="fa fa-2x fa-eye" block-handler-21="click"/><i title="Remove all remotes" class="fa fa-2x fa-minus-circle" block-handler-22="click"/></div><block-child-0/></form><!-- Saved remotes table ──────────────────────────────────── --><block-child-1/></div></div></div>`);
+  let block2 = createBlock(`<div class="remote-error"><block-child-0/></div>`);
+  let block4 = createBlock(`<div class="remotes-table-info"><table class="table table-bordered"><caption class="text-info caption-remotes"> List of Available Remotes </caption><thead><tr><th scope="col">Remote</th><th scope="col">Host</th><th scope="col">Database</th><th scope="col">Source</th><th scope="col">State</th><th/></tr></thead><tbody><block-child-0/></tbody></table></div>`);
+  let block6 = createBlock(`<tr><td class="text-info"><block-child-0/></td><td><block-child-1/></td><td><block-child-2/></td><td><block-child-3/></td><td><block-child-4/></td><td class="remote-row-actions"><i class="fa fa-pencil text-primary" title="Edit remote" style="margin-right: 10px; cursor: pointer;" block-handler-0="click"/><i class="fa fa-trash text-danger" title="Remove remote" style="cursor: pointer;" block-handler-1="click"/></td></tr>`);
   
   return function template(ctx, node, key = "") {
-    let b2, b4, b5, b18, b20, b22, b23, b24, b27, b42, b43, b44, b45, b46;
-    let attr1 = ctx['state'].view==='loading'?'':'hide';
-    let attr2 = ctx['state'].view==='login'?'login-view':'login-view hide';
-    if (ctx['state'].bootError) {
-      const b3 = safeOutput(ctx['state'].bootError);
-      b2 = block2([], [b3]);
-    }
-    if (!ctx['state'].remotes.length) {
-      b4 = block4();
-    }
-    if (ctx['state'].remotes.length) {
-      let b6, b8, b9, b10, b11, b14, b15;
-      let hdlr1 = ["prevent", ctx['login'], ctx];
-      if (ctx['state'].loginError) {
-        const b7 = safeOutput(ctx['state'].loginError);
-        b6 = block6([], [b7]);
-      }
-      if (!ctx['state'].useExistingSession) {
-        let prop1 = new String((ctx['state'].username) === 0 ? 0 : ((ctx['state'].username) || ""));
-        const v1 = ctx['state'];
-        let hdlr2 = [(_ev)=>v1.username=_ev.target.value, ctx];
-        b8 = block8([prop1, hdlr2]);
-      }
-      if (!ctx['state'].useExistingSession) {
-        let attr3 = ctx['state'].showPassword?'text':'password';
-        let prop2 = new String((ctx['state'].password) === 0 ? 0 : ((ctx['state'].password) || ""));
-        const v2 = ctx['state'];
-        let hdlr3 = [(_ev)=>v2.password=_ev.target.value, ctx];
-        b9 = block9([attr3, prop2, hdlr3]);
-      }
-      if (!ctx['state'].useExistingSession) {
-        let hdlr4 = [ctx['togglePassword'], ctx];
-        let attr4 = ctx['state'].showPassword?'fa fa-eye-slash':'fa fa-eye';
-        b10 = block10([hdlr4, attr4]);
-      }
-      const v3 = ctx['state'];
-      let hdlr5 = [(_ev)=>v3.selectedRemoteIndex=_ev.target.value, ctx];
-      ctx = Object.create(ctx);
-      const [k_block11, v_block11, l_block11, c_block11] = prepareList(ctx['state'].remotes);;
-      for (let i1 = 0; i1 < l_block11; i1++) {
-        ctx[`remote`] = k_block11[i1];
-        const key1 = ctx['remote'].database+ctx['remote'].url;
-        let attr5 = ctx['remote'].__index;
-        let prop3 = new Boolean(ctx['state'].selectedRemoteIndex===ctx['remote'].__index);
-        const b13 = safeOutput(ctx['remote'].name);
-        c_block11[i1] = withKey(block12([attr5, prop3], [b13]), key1);
-      }
-      ctx = ctx.__proto__;
-      b11 = list(c_block11);
-      let prop4 = new Boolean(ctx['state'].useExistingSession);
-      let hdlr6 = [ctx['toggleUseExistingSession'], ctx];
-      if (ctx['state'].loginLoading) {
-        b14 = block14();
-      }
-      if (ctx['currentRemote']) {
-        const b16 = safeOutput(ctx['currentRemote'].url);
-        const b17 = safeOutput(ctx['currentRemote'].datasrc||'project.issue');
-        b15 = block15([], [b16, b17]);
-      }
-      b5 = block5([hdlr1, hdlr5, prop4, hdlr6], [b6, b8, b9, b10, b11, b14, b15]);
-    }
-    let attr6 = ctx['state'].view==='main'?'':'hide';
-    let prop5 = new String((ctx['state'].searchQuery) === 0 ? 0 : ((ctx['state'].searchQuery) || ""));
+    let b2, b4;
+    let attr1 = ctx['state'].activePage==='about'?'selected':'notselected';
+    const v1 = ctx['state'];
+    let hdlr1 = [()=>v1.activePage='about', ctx];
+    let attr2 = ctx['state'].activePage==='options'?'selected':'notselected';
+    const v2 = ctx['state'];
+    let hdlr2 = [()=>v2.activePage='options', ctx];
+    let attr3 = ctx['state'].activePage==='about'?'active_page':'inactive_page';
+    let attr4 = ctx['state'].activePage==='options'?'active_page':'inactive_page';
+    let hdlr3 = ["prevent", ctx['addRemote'], ctx];
+    let prop1 = new Boolean(ctx['state'].autoDownloadIssueTimesheet);
+    let hdlr4 = [ctx['toggleAutoDownload'], ctx];
+    let prop2 = new String((ctx['state'].form.remote_host) === 0 ? 0 : ((ctx['state'].form.remote_host) || ""));
+    const v3 = ctx['state'];
+    let hdlr5 = [(_ev)=>v3.form.remote_host=_ev.target.value, ctx];
+    let prop3 = new String((ctx['state'].form.remote_name) === 0 ? 0 : ((ctx['state'].form.remote_name) || ""));
     const v4 = ctx['state'];
-    let hdlr7 = [(_ev)=>v4.searchQuery=_ev.target.value, ctx];
-    let prop6 = new String((ctx['state'].limitTo) === 0 ? 0 : ((ctx['state'].limitTo) || ""));
-    const v5 = ctx['updateLimitPreference'];
-    let hdlr8 = [(_ev)=>v5(_ev.target.value), ctx];
-    let prop7 = new Boolean(ctx['state'].autoDownloadIssueTimesheet);
-    let hdlr9 = [ctx['toggleAutoDownload'], ctx];
-    let hdlr10 = [ctx['downloadCurrentMonthTimesheets'], ctx];
-    let hdlr11 = [ctx['switchBetweenRemotes'], ctx];
-    let hdlr12 = [ctx['refreshAll'], ctx];
-    let hdlr13 = [ctx['resetTimer'], ctx];
-    let hdlr14 = [ctx['logout'], ctx];
-    if (ctx['state'].activeTimerId&&ctx['state'].timerStartIso) {
-      const b19 = safeOutput(ctx['state'].activeTimerId);
-      b18 = block18([], [b19]);
-    }
-    if (ctx['state'].timerStartIso) {
-      const b21 = safeOutput(ctx['formattedTimer']);
-      b20 = block20([], [b21]);
-    }
-    b22 = safeOutput(ctx['itemLabelPlural']);
-    b23 = safeOutput(ctx['filteredIssues'].length);
-    let prop8 = new Boolean(ctx['state'].allIssues);
-    const v6 = ctx['updateShowAllPreference'];
-    let hdlr15 = [(_ev)=>v6(_ev.target.checked), ctx];
-    if (ctx['state'].dataSource==='project.task') {
-      const b25 = block25();
-      const b26 = block26();
-      b24 = multi([b25, b26]);
+    let hdlr6 = [(_ev)=>v4.form.remote_name=_ev.target.value, ctx];
+    let prop4 = new String((ctx['state'].form.remote_database) === 0 ? 0 : ((ctx['state'].form.remote_database) || ""));
+    const v5 = ctx['state'];
+    let hdlr7 = [(_ev)=>v5.form.remote_database=_ev.target.value, ctx];
+    let prop5 = new Boolean(ctx['state'].form.remote_datasrc==='project.issue');
+    const v6 = ctx['state'];
+    let hdlr8 = [()=>v6.form.remote_datasrc='project.issue', ctx];
+    let prop6 = new Boolean(ctx['state'].form.remote_datasrc==='project.task');
+    const v7 = ctx['state'];
+    let hdlr9 = [()=>v7.form.remote_datasrc='project.task', ctx];
+    let hdlr10 = [ctx['addRemote'], ctx];
+    let hdlr11 = [ctx['loadRemotes'], ctx];
+    const v8 = ctx['state'];
+    let hdlr12 = [()=>v8.showList=!v8.showList, ctx];
+    let hdlr13 = [ctx['removeAllRemotes'], ctx];
+    if (ctx['state'].error) {
+      const b3 = safeOutput(ctx['state'].error);
+      b2 = block2([], [b3]);
     }
-    if (ctx['filteredIssues'].length) {
+    if (ctx['state'].showList&&ctx['state'].remotes.length) {
       ctx = Object.create(ctx);
-      const [k_block27, v_block27, l_block27, c_block27] = prepareList(ctx['filteredIssues']);;
-      for (let i1 = 0; i1 < l_block27; i1++) {
-        ctx[`issue`] = k_block27[i1];
-        const key1 = ctx['issue'].id;
-        let b29, b30, b31, b33, b34, b35, b36, b41;
-        let attr7 = ctx['state'].activeTimerId===ctx['issue'].id?'active-row':'';
-        if (!ctx['state'].activeTimerId) {
-          const v7 = ctx['startTimer'];
-          const v8 = ctx['issue'];
-          let hdlr16 = [()=>v7(v8), ctx];
-          b29 = block29([hdlr16]);
-        }
-        if (ctx['state'].activeTimerId===ctx['issue'].id) {
-          const v9 = ctx['stopTimer'];
-          const v10 = ctx['issue'];
-          let hdlr17 = [()=>v9(v10), ctx];
-          b30 = block30([hdlr17]);
-        }
-        if (ctx['issue'].priority_level.length) {
-          ctx = Object.create(ctx);
-          const [k_block31, v_block31, l_block31, c_block31] = prepareList(ctx['issue'].priority_level);;
-          for (let i2 = 0; i2 < l_block31; i2++) {
-            ctx[`priority`] = k_block31[i2];
-            const key2 = ctx['priority']+'_'+ctx['issue'].id;
-            c_block31[i2] = withKey(block32(), key2);
-          }
-          ctx = ctx.__proto__;
-          b31 = list(c_block31);
-        }
-        if (!ctx['issue'].priority_level.length) {
-          b33 = block33();
-        }
-        b34 = comp1({text: ctx['relationLabel'](ctx['issue'].stage_id),limit: 15}, key + `__1__${key1}`, node, this, null);
-        b35 = comp2({text: ctx['issueLabel'](ctx['issue']),limit: 70,href: ctx['issueHref'](ctx['issue'])}, key + `__2__${key1}`, node, this, null);
-        if (ctx['state'].dataSource==='project.task') {
-          const b38 = comp3({text: ctx['normalizeText'](ctx['formatHours'](ctx['issue'].effective_hours)),limit: 9}, key + `__3__${key1}`, node, this, null);
-          const b37 = block37([], [b38]);
-          const b40 = comp4({text: ctx['normalizeText'](ctx['formatHours'](ctx['issue'].remaining_hours)),limit: 9}, key + `__4__${key1}`, node, this, null);
-          const b39 = block39([], [b40]);
-          b36 = multi([b37, b39]);
-        }
-        b41 = comp5({text: ctx['relationLabel'](ctx['issue'].project_id),limit: 15}, key + `__5__${key1}`, node, this, null);
-        c_block27[i1] = withKey(block28([attr7], [b29, b30, b31, b33, b34, b35, b36, b41]), key1);
+      const [k_block5, v_block5, l_block5, c_block5] = prepareList(ctx['state'].remotes);;
+      for (let i1 = 0; i1 < l_block5; i1++) {
+        ctx[`remote`] = k_block5[i1];
+        const key1 = ctx['remote'].url+ctx['remote'].database;
+        const b7 = comp1({text: ctx['remote'].name,limit: 18}, key + `__1__${key1}`, node, this, null);
+        const b8 = comp2({text: ctx['remote'].url,limit: 25}, key + `__2__${key1}`, node, this, null);
+        const b9 = comp3({text: ctx['remote'].database,limit: 18}, key + `__3__${key1}`, node, this, null);
+        const b10 = comp4({text: ctx['remote'].datasrc||'project.issue',limit: 18}, key + `__4__${key1}`, node, this, null);
+        const b11 = comp5({text: ctx['remote'].state||'Inactive',limit: 18}, key + `__5__${key1}`, node, this, null);
+        const v9 = ctx['editRemote'];
+        const v10 = ctx['remote'];
+        let hdlr14 = [()=>v9(v10), ctx];
+        const v11 = ctx['removeRemote'];
+        const v12 = ctx['remote'];
+        let hdlr15 = [()=>v11(v12), ctx];
+        c_block5[i1] = withKey(block6([hdlr14, hdlr15], [b7, b8, b9, b10, b11]), key1);
       }
       ctx = ctx.__proto__;
-      b27 = list(c_block27);
+      const b5 = list(c_block5);
+      b4 = block4([], [b5]);
     }
-    if (!ctx['filteredIssues'].length) {
-      let attr8 = ctx['state'].dataSource==='project.task'?7:5;
-      b42 = block42([attr8]);
-    }
-    b43 = safeOutput(ctx['state'].serverVersion||'Unknown');
-    b44 = safeOutput(ctx['state'].currentHost||'-');
-    b45 = safeOutput(ctx['state'].currentDatabase||'-');
-    b46 = safeOutput(ctx['state'].user?ctx['state'].user.display_name:'-');
-    return block1([attr1, attr2, attr6, prop5, hdlr7, prop6, hdlr8, prop7, hdlr9, hdlr10, hdlr11, hdlr12, hdlr13, hdlr14, prop8, hdlr15], [b2, b4, b5, b18, b20, b22, b23, b24, b27, b42, b43, b44, b45, b46]);
+    return block1([attr1, hdlr1, attr2, hdlr2, attr3, attr4, hdlr3, prop1, hdlr4, prop2, hdlr5, prop3, hdlr6, prop4, hdlr7, prop5, hdlr8, prop6, hdlr9, hdlr10, hdlr11, hdlr12, hdlr13], [b2, b4]);
   }
 },
 
@@ -198,7 +88,7 @@ export const templates = {
   const comp4 = app.createComponent(`ReadMore`, true, false, false, ["text","limit"]);
   const comp5 = app.createComponent(`ReadMore`, true, false, false, ["text","limit"]);
   
-  let block1 = createBlock(`<div class="app-root"><div id="loader-container" block-attribute-0="class"><div class="loader-card"><div class="loader-text"> Loading current session and projects… </div><div class="loader-subtext"> Please wait — or grab a cup of coffee ☕ </div><i class="fa fa-cog fa-spin fa-5x"/></div></div><div id="login" class="login-view" block-attribute-1="class"><div class="popup-login-shell"><div class="form"><div class="logo"><img src="/img/logo.png"/></div><block-child-0/><block-child-1/><block-child-2/></div></div><div class="cta forgotpwd footer-app-opts login-footer-bar"><a href="options_main_page.html"><i class="fa fa-cogs"/> Options </a></div></div><div id="wrapper" block-attribute-2="class"><div class="toolbar-row"><input id="searchIssue" type="text" placeholder="Search by ID, name, user, priority, stage..." block-property-3="value" block-handler-4="input"/><select id="limitTo" block-property-5="value" block-handler-6="change" block-handler-7="change"><option value="10">10</option><option value="15">15</option><option value="25">25</option><option value="">All</option></select></div><div class="container footer top-actions"><div class="auto_download_timesheet" title="Store timesheet locally when you stop timer on the current item"><input id="auto_download_timesheet_input" type="checkbox" block-property-8="checked" block-handler-9="change"/> Auto Download Current Item Timesheet </div><div class="row"><div class="mx-3 col-md-12 footer-btns pointer"><i class="fa fa-download fa-2x" title="Download current month timesheet" block-handler-10="click"/><i class="fa fa-hand-o-left fa-2x" title="Switch between remotes" block-handler-11="click"/><i class="fa fa-refresh fa-2x" title="Refresh current items" block-handler-12="click"/><i class="fa fa-clock-o fa-2x" title="Discard the active timer" block-handler-13="click"/><i class="fa fa-sign-out fa-2x" title="Log out" block-handler-14="click"/><a href="options_main_page.html" class="options-btn" title="Go To options"><i class="fa fa-cogs fa-2x"/></a></div></div></div><div class="table-scroll"><table id="table-task-issues" class="table table-responsive-sm table-bordered table-fixed"><thead><tr><th class="action-col"><div/><block-child-3/></th><th class="priority-col">Priority</th><th class="stage-col">Stage</th><th class="item-col"><div class="item-header-title"><block-child-4/> [<block-child-5/>] </div><label class="allIssues"><input id="showAllIssues" type="checkbox" block-property-15="checked" block-handler-16="input"/> Show for everyone </label></th><block-child-6/><th class="project-col">Project</th></tr></thead><tbody><block-child-7/><block-child-7/><block-child-8/></tbody></table></div><div class="container footer info-footer"><div class="row"><div class="remote-info-block col-md-12"><span><b>Odoo:</b> <span class="remote-value"><block-child-9/></span></span><br/><span><b>OWL:</b> <span class="remote-value"><block-child-10/></span></span><br/><span><b>Host:</b> <span class="remote-value"><block-child-11/></span></span><br/><span><b>Database:</b> <span class="remote-value"><block-child-12/></span></span><br/><span><b>Current User:</b> <span class="remote-value"><block-child-13/></span></span><br/></div></div></div></div></div>`);
+  let block1 = createBlock(`<div class="app-root"><div id="loader-container" block-attribute-0="class"><div class="loader-card"><div class="loader-text"> Loading current session and projects… </div><div class="loader-subtext"> Please wait — or grab a cup of coffee ☕ </div><i class="fa fa-cog fa-spin fa-5x"/></div></div><div id="login" class="login-view" block-attribute-1="class"><div class="popup-login-shell"><div class="form"><div class="logo"><img src="/img/logo.png"/></div><block-child-0/><block-child-1/><block-child-2/></div></div><div class="cta forgotpwd footer-app-opts login-footer-bar"><a href="options_main_page.html"><i class="fa fa-cogs"/> Options </a></div></div><div id="wrapper" block-attribute-2="class"><div class="toolbar-row"><input id="searchIssue" type="text" placeholder="Search by ID, name, user, priority, stage..." block-property-3="value" block-handler-4="input"/><select id="limitTo" block-property-5="value" block-handler-6="change" block-handler-7="change"><option value="10">10</option><option value="15">15</option><option value="25">25</option><option value="">All</option></select></div><div class="container footer top-actions"><div class="row"><div class="mx-3 col-md-12 footer-btns pointer"><i class="fa fa-download fa-2x" title="Download current month timesheet" block-handler-8="click"/><i class="fa fa-hand-o-left fa-2x" title="Switch between remotes" block-handler-9="click"/><i class="fa fa-refresh fa-2x" title="Refresh current items" block-handler-10="click"/><i class="fa fa-clock-o fa-2x" title="Discard the active timer" block-handler-11="click"/><i class="fa fa-sign-out fa-2x" title="Log out" block-handler-12="click"/><a href="options_main_page.html" class="options-btn" title="Go To options"><i class="fa fa-cogs fa-2x"/></a></div></div></div><div class="table-scroll"><table id="table-task-issues" class="table table-responsive-sm table-bordered table-fixed"><thead><tr><th class="action-col"><div/><block-child-3/></th><th class="priority-col">Priority</th><th class="stage-col">Stage</th><th class="item-col"><div class="item-header-title"><block-child-4/> [<block-child-5/>] </div><label class="allIssues"><input id="showAllIssues" type="checkbox" block-property-13="checked" block-handler-14="input"/> Show for everyone </label></th><block-child-6/><th class="project-col">Project</th></tr></thead><tbody><block-child-7/><block-child-7/><block-child-8/></tbody></table></div><div class="container footer info-footer"><div class="row"><div class="remote-info-block col-md-12"><span><b>Odoo:</b> <span class="remote-value"><block-child-9/></span></span><br/><span><b>OWL:</b> <span class="remote-value"><block-child-10/></span></span><br/><span><b>Host:</b> <span class="remote-value"><block-child-11/></span></span><br/><span><b>Database:</b> <span class="remote-value"><block-child-12/></span></span><br/><span><b>Current User:</b> <span class="remote-value"><block-child-13/></span></span><br/></div></div></div></div></div>`);
   let block2 = createBlock(`<div><p class="odooError"><block-child-0/></p></div>`);
   let block4 = createBlock(`<div class="container no-remotes-set"><div class="alert alert-warning"> Hello <span class="fun-man">😉</span>, you have not configured any remotes. Open <b><i class="fa fa-cogs"/> Options</b> below and add one. </div></div>`);
   let block5 = createBlock(`<form block-handler-0="submit.prevent"><block-child-0/><block-child-1/><div class="password-field"><block-child-2/><block-child-3/></div><select id="remote-selection" class="form-control" block-handler-1="change"><block-child-4/></select><div class="checkbox"><label><input type="checkbox" block-property-2="checked" block-handler-3="change"/> Use Existing Session </label></div><button class="login" type="submit"> Login <block-child-5/></button><block-child-6/></form>`);
@@ -210,15 +100,15 @@ export const templates = {
   let block14 = createBlock(`<i class="fa fa-cog fa-spin"/>`);
   let block15 = createBlock(`<div class="remote-info small-note"> Host: <block-child-0/><span class="current-source-chip"><block-child-1/></span></div>`);
   let block18 = createBlock(`<span class="startTimeCount"><block-child-0/></span>`);
-  let block23 = createBlock(`<th>Hours Spent</th>`);
-  let block24 = createBlock(`<th>Remaining Hours</th>`);
+  let block23 = createBlock(`<th class="text-center">Hours Spent</th>`);
+  let block24 = createBlock(`<th class="text-center">Hours Left</th>`);
   let block26 = createBlock(`<tr block-attribute-0="class"><td class="text-center px-2 td-btn action-col"><block-child-0/><block-child-1/></td><td class="priority-cell"><block-child-2/><block-child-2/><block-child-3/></td><td class="stage-cell"><block-child-4/></td><td class="issue-desc-cell"><block-child-5/></td><block-child-6/><td class="project-cell"><block-child-7/></td></tr>`);
   let block27 = createBlock(`<i class="fa fa-play-circle action-btn pointer" title="Start the timer for the selected item" block-handler-0="click"/>`);
   let block28 = createBlock(`<i class="text-danger fa fa-stop-circle action-btn pointer" title="Stop timer and record the time to Odoo timesheets" block-handler-0="click"/>`);
   let block30 = createBlock(`<span class="fa fa-star checked"/>`);
   let block31 = createBlock(`<i class="fa fa-star-o"/>`);
-  let block35 = createBlock(`<td><block-child-0/></td>`);
-  let block37 = createBlock(`<td><block-child-0/></td>`);
+  let block35 = createBlock(`<td class="text-center"><block-child-0/></td>`);
+  let block37 = createBlock(`<td class="text-center"><block-child-0/></td>`);
   let block40 = createBlock(`<tr><td class="text-center text-danger" block-attribute-0="colspan"> No matching items are currently available </td></tr>`);
   
   return function template(ctx, node, key = "") {
@@ -293,22 +183,20 @@ export const templates = {
     let hdlr8 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
     const v5 = ctx['updateLimitPreference'];
     let hdlr9 = [(_ev)=>v5(_ev.target.value), ctx];
-    let prop7 = new Boolean(ctx['state'].autoDownloadIssueTimesheet);
-    let hdlr10 = [ctx['toggleAutoDownload'], ctx];
-    let hdlr11 = [ctx['downloadCurrentMonthTimesheets'], ctx];
-    let hdlr12 = [ctx['switchBetweenRemotes'], ctx];
-    let hdlr13 = [ctx['refreshAll'], ctx];
-    let hdlr14 = [ctx['resetTimer'], ctx];
-    let hdlr15 = [ctx['logout'], ctx];
+    let hdlr10 = [ctx['downloadCurrentMonthTimesheets'], ctx];
+    let hdlr11 = [ctx['switchBetweenRemotes'], ctx];
+    let hdlr12 = [ctx['refreshAll'], ctx];
+    let hdlr13 = [ctx['resetTimer'], ctx];
+    let hdlr14 = [ctx['logout'], ctx];
     if (ctx['state'].timerStartIso) {
       const b19 = safeOutput(ctx['formattedTimer']);
       b18 = block18([], [b19]);
     }
     b20 = safeOutput(ctx['itemLabelPlural']);
     b21 = safeOutput(ctx['filteredIssues'].length);
-    let prop8 = new Boolean(ctx['state'].allIssues);
+    let prop7 = new Boolean(ctx['state'].allIssues);
     const v6 = ctx['updateShowAllPreference'];
-    let hdlr16 = [(_ev)=>v6(_ev.target.checked), ctx];
+    let hdlr15 = [(_ev)=>v6(_ev.target.checked), ctx];
     if (ctx['state'].dataSource==='project.task') {
       const b23 = block23();
       const b24 = block24();
@@ -325,14 +213,14 @@ export const templates = {
         if (!ctx['state'].activeTimerId) {
           const v7 = ctx['startTimer'];
           const v8 = ctx['issue'];
-          let hdlr17 = [()=>v7(v8), ctx];
-          b27 = block27([hdlr17]);
+          let hdlr16 = [()=>v7(v8), ctx];
+          b27 = block27([hdlr16]);
         }
         if (ctx['state'].activeTimerId===ctx['issue'].id) {
           const v9 = ctx['stopTimer'];
           const v10 = ctx['issue'];
-          let hdlr18 = [()=>v9(v10), ctx];
-          b28 = block28([hdlr18]);
+          let hdlr17 = [()=>v9(v10), ctx];
+          b28 = block28([hdlr17]);
         }
         if (ctx['issue'].priority_level.length) {
           ctx = Object.create(ctx);
@@ -372,7 +260,7 @@ export const templates = {
     b43 = safeOutput(ctx['state'].currentHost||'-');
     b44 = safeOutput(ctx['state'].currentDatabase||'-');
     b45 = safeOutput(ctx['state'].user?ctx['state'].user.display_name:'-');
-    return block1([attr1, attr2, attr6, prop5, hdlr7, prop6, hdlr8, hdlr9, prop7, hdlr10, hdlr11, hdlr12, hdlr13, hdlr14, hdlr15, prop8, hdlr16], [b2, b4, b5, b18, b20, b21, b22, b25, b40, b41, b42, b43, b44, b45]);
+    return block1([attr1, attr2, attr6, prop5, hdlr7, prop6, hdlr8, hdlr9, hdlr10, hdlr11, hdlr12, hdlr13, hdlr14, prop7, hdlr15], [b2, b4, b5, b18, b20, b21, b22, b25, b40, b41, b42, b43, b44, b45]);
   }
 },
 
diff --git a/dist/firefox/popup.html b/dist/firefox/popup.html
index 17c4c28..d31ccf8 100644
--- a/dist/firefox/popup.html
+++ b/dist/firefox/popup.html
@@ -17,7 +17,7 @@
   <div id="boot-loader" class="boot-loader">
     <div class="loader-card">
       <div class="loader-text">Loading current session and projects…</div>
-      <div class="loader-subtext">Please wait — or grab a cup of coffee ☕</div>
+      <div class="loader-subtext">Please wait or grab a cup of coffee ☕</div>
       <i class="fa fa-cog fa-spin fa-5x"></i>
     </div>
   </div>
diff --git a/src/templates/options_app.xml b/src/templates/options_app.xml
index 360b0ea..0e8b4e0 100644
--- a/src/templates/options_app.xml
+++ b/src/templates/options_app.xml
@@ -1,378 +1,259 @@
 <templates xml:space="preserve">
-  <t t-name="PopupApp" owl="1">
-    <div class="app-root">
+  <t t-name="OptionsApp" owl="1">
+    <div>
+
+      <!-- ── Left navigation sidebar ─────────────────────────────────── -->
+      <div id="navigation">
+        <h1 class="title-app">Timer Options</h1>
+        <ul class="list-group">
+          <li
+            class="chooser list-group-item"
+            t-att-class="state.activePage === 'about' ? 'selected' : 'notselected'"
+            t-on-click="() => state.activePage = 'about'"
+          >
+            <i class="fa fa-info-circle"/> <span>About Timer</span>
+          </li>
+          <li
+            class="chooser list-group-item"
+            t-att-class="state.activePage === 'options' ? 'selected' : 'notselected'"
+            t-on-click="() => state.activePage = 'options'"
+          >
+            <i class="fa fa-cogs"/> <span>Options</span>
+          </li>
+        </ul>
+        <hr/>
+        <div class="footer-app">
+          <a href="popup.html" class="back-left">
+            <i class="fa fa-arrow-circle-left fa-2x"/>
+          </a>
+        </div>
+      </div>
+
+      <!-- ── About page ──────────────────────────────────────────────── -->
       <div
-        id="loader-container"
-        t-att-class="state.view === 'loading' ? '' : 'hide'"
+        class="options-box box"
+        t-att-class="state.activePage === 'about' ? 'active_page' : 'inactive_page'"
       >
-        <div class="loader-card">
-          <div class="loader-text">
-            Loading current session and projects…
+        <h1>
+          <div class="logo">
+            <img src="/img/logo.png"/>
           </div>
-          <div class="loader-subtext">
-            Please wait — or grab a cup of coffee ☕
+        </h1>
+        <hr/>
+        <div class="about-app">
+          <h4 class="title-app text-center">Description</h4>
+          <hr/>
+          This is a standalone Owl rewrite of the original cross-platform timer
+          extension for posting work hours to Odoo timesheets.
+          <hr/>
+          <h4 class="title-app text-center">Features</h4>
+          <hr/>
+          <div class="timer-features">
+            <ul class="list-group">
+              <li class="list-group-item">Support for both tasks and issues</li>
+              <li class="list-group-item">Start and stop the timer for the selected item</li>
+              <li class="list-group-item">Create Odoo timesheet lines against the linked analytic account</li>
+              <li class="list-group-item">Show assigned items or everyone's items</li>
+              <li class="list-group-item">Add, remove, or clear remote hosts</li>
+              <li class="list-group-item">Switch between remote sessions</li>
+              <li class="list-group-item">Download current month or current item timesheets as CSV</li>
+            </ul>
           </div>
-          <i class="fa fa-cog fa-spin fa-5x"/>
         </div>
       </div>
 
+      <!-- ── Options / remotes page ──────────────────────────────────── -->
       <div
-        id="login"
-        class="login-view"
-        t-att-class="state.view === 'login' ? 'login-view' : 'login-view hide'"
+        class="options-box box"
+        t-att-class="state.activePage === 'options' ? 'active_page' : 'inactive_page'"
       >
-        <div class="popup-login-shell">
-          <div class="form">
-            <div class="logo">
-              <img src="/img/logo.png"/>
+        <div class="form remote-options-form">
+          <form t-on-submit.prevent="addRemote">
+
+            <!-- [FIX #38] General Settings ──────────────────────────── -->
+            <h4 class="remote-title text-info">General Settings</h4>
+            <hr/>
+            <div class="form-group">
+              <label class="general-setting-label">
+                <input
+                  type="checkbox"
+                  class="defaultCheckbox"
+                  t-att-checked="state.autoDownloadIssueTimesheet"
+                  t-on-change="toggleAutoDownload"
+                />
+                Auto Download Current Item Timesheet
+              </label>
+              <p class="inline-help">
+                Store timesheet locally each time you stop the timer on an item.
+              </p>
             </div>
+            <hr/>
 
-            <t t-if="state.bootError">
-              <div>
-                <p class="odooError" t-out="state.bootError"/>
-              </div>
-            </t>
+            <!-- Add Remote form ─────────────────────────────────────── -->
+            <h4 class="remote-title text-info">Add Remote</h4>
+            <hr/>
 
-            <t t-if="!state.remotes.length">
-              <div class="container no-remotes-set">
-                <div class="alert alert-warning">
-                  Hello <span class="fun-man">😉</span>, you have not configured
-                  any remotes. Open
-                  <b><i class="fa fa-cogs"/> Options</b>
-                  below and add one.
-                </div>
-              </div>
-            </t>
+            <div class="form-group">
+              <label for="remote-host">Odoo Host</label>
+              <input
+                type="text"
+                class="form-control"
+                id="remote-host"
+                placeholder="https://your-odoo-host.example"
+                t-att-value="state.form.remote_host"
+                t-on-input="(ev) => state.form.remote_host = ev.target.value"
+              />
+            </div>
 
-            <t t-if="state.remotes.length">
-              <form t-on-submit.prevent="login">
-                <t t-if="state.loginError">
-                  <p class="odooError" t-out="state.loginError"/>
-                </t>
+            <div class="form-group">
+              <label for="remote-name">Display Name</label>
+              <input
+                type="text"
+                class="form-control"
+                id="remote-name"
+                placeholder="Therp"
+                t-att-value="state.form.remote_name"
+                t-on-input="(ev) => state.form.remote_name = ev.target.value"
+              />
+            </div>
 
-                <t t-if="!state.useExistingSession">
-                  <input
-                    type="text"
-                    placeholder="Username"
-                    t-att-value="state.username"
-                    t-on-input="(ev) => state.username = ev.target.value"
-                  />
-                </t>
+            <div class="form-group">
+              <label for="remote-database">Odoo Database</label>
+              <input
+                type="text"
+                class="form-control"
+                id="remote-database"
+                placeholder="someodoodatabase"
+                t-att-value="state.form.remote_database"
+                t-on-input="(ev) => state.form.remote_database = ev.target.value"
+              />
+            </div>
 
-                <div class="password-field">
-                  <t t-if="!state.useExistingSession">
+            <div class="form-group">
+              <label class="label">Data Source</label>
+              <ul class="data-source-list list-group">
+                <li class="list-group-item">
+                  <div class="form-check">
                     <input
-                      id="unique-password"
-                      t-att-type="state.showPassword ? 'text' : 'password'"
-                      placeholder="Password"
-                      t-att-value="state.password"
-                      t-on-input="(ev) => state.password = ev.target.value"
-                    />
-                  </t>
-
-                  <t t-if="!state.useExistingSession">
-                    <span
-                      class="pass-viewer"
-                      t-on-click="togglePassword"
-                    >
-                      <i
-                        class="fa"
-                        t-att-class="state.showPassword ? 'fa fa-eye-slash' : 'fa fa-eye'"
-                      />
-                    </span>
-                  </t>
-                </div>
-
-                <select
-                  id="remote-selection"
-                  class="form-control"
-                  t-on-change="(ev) => state.selectedRemoteIndex = ev.target.value"
-                >
-                  <t
-                    t-foreach="state.remotes"
-                    t-as="remote"
-                    t-key="remote.database + remote.url"
-                  >
-                    <option
-                      t-att-value="remote.__index"
-                      t-att-selected="state.selectedRemoteIndex === remote.__index"
-                      t-out="remote.name"
+                      class="form-check-input"
+                      type="radio"
+                      value="project.issue"
+                      id="FromIssues"
+                      t-att-checked="state.form.remote_datasrc === 'project.issue'"
+                      t-on-change="() => state.form.remote_datasrc = 'project.issue'"
                     />
-                  </t>
-                </select>
-
-                <div class="checkbox">
-                  <label>
+                    <label class="form-check-label" for="FromIssues">From Issues</label>
+                  </div>
+                </li>
+                <li class="list-group-item">
+                  <div class="form-check">
                     <input
-                      type="checkbox"
-                      t-att-checked="state.useExistingSession"
-                      t-on-change="toggleUseExistingSession"
+                      class="form-check-input"
+                      type="radio"
+                      value="project.task"
+                      id="FromTasks"
+                      t-att-checked="state.form.remote_datasrc === 'project.task'"
+                      t-on-change="() => state.form.remote_datasrc = 'project.task'"
                     />
-                    Use Existing Session
-                  </label>
-                </div>
-
-                <button class="login" type="submit">
-                  Login
-                  <t t-if="state.loginLoading">
-                    <i class="fa fa-cog fa-spin"/>
-                  </t>
-                </button>
-
-                <t t-if="currentRemote">
-                  <div class="remote-info small-note">
-                    Host:
-                    <t t-out="currentRemote.url"/>
-                    <span class="current-source-chip">
-                      <t t-out="currentRemote.datasrc || 'project.issue'"/>
-                    </span>
+                    <label class="form-check-label" for="FromTasks">From Tasks</label>
                   </div>
-                </t>
-              </form>
-            </t>
-          </div>
-        </div>
-
-        <div class="cta forgotpwd footer-app-opts login-footer-bar">
-          <a href="options_main_page.html">
-            <i class="fa fa-cogs"/> Options
-          </a>
-        </div>
-      </div>
-
-      <div
-        id="wrapper"
-        t-att-class="state.view === 'main' ? '' : 'hide'"
-      >
-        <div class="toolbar-row">
-          <input
-            id="searchIssue"
-            type="text"
-            placeholder="Search by ID, name, user, priority, stage..."
-            t-att-value="state.searchQuery"
-            t-on-input="(ev) => state.searchQuery = ev.target.value"
-          />
-          <select
-            id="limitTo"
-            t-att-value="state.limitTo"
-            t-on-change="(ev) => updateLimitPreference(ev.target.value)"
-          >
-            <option value="10">10</option>
-            <option value="15">15</option>
-            <option value="25">25</option>
-            <option value="">All</option>
-          </select>
-        </div>
-
-        <div class="container footer top-actions">
-          <div
-            class="auto_download_timesheet"
-            title="Store timesheet locally when you stop timer on the current item"
-          >
-            <input
-              id="auto_download_timesheet_input"
-              type="checkbox"
-              t-att-checked="state.autoDownloadIssueTimesheet"
-              t-on-change="toggleAutoDownload"
-            />
-            Auto Download Current Item Timesheet
-          </div>
+                </li>
+              </ul>
+            </div>
 
-          <div class="row">
-            <div class="mx-3 col-md-12 footer-btns pointer">
+            <span class="caption-remotes">Controls</span>
+            <div class="remotes-control-btns col-md-12 text-center text-info pointer">
               <i
-                class="fa fa-download fa-2x"
-                title="Download current month timesheet"
-                t-on-click="downloadCurrentMonthTimesheets"
+                title="Add a remote host"
+                class="fa fa-2x fa-plus-circle"
+                t-on-click="addRemote"
               />
               <i
-                class="fa fa-hand-o-left fa-2x"
-                title="Switch between remotes"
-                t-on-click="switchBetweenRemotes"
+                title="Refresh list of remotes"
+                class="fa fa-2x fa-refresh"
+                t-on-click="loadRemotes"
               />
               <i
-                class="fa fa-refresh fa-2x"
-                title="Refresh current items"
-                t-on-click="refreshAll"
+                title="View list of remotes"
+                class="fa fa-2x fa-eye"
+                t-on-click="() => state.showList = !state.showList"
               />
               <i
-                class="fa fa-undo fa-2x"
-                title="Discard the active timer"
-                t-on-click="resetTimer"
+                title="Remove all remotes"
+                class="fa fa-2x fa-minus-circle"
+                t-on-click="removeAllRemotes"
               />
-              <i
-                class="fa fa-sign-out fa-2x"
-                title="Log out"
-                t-on-click="logout"
-              />
-              <a
-                href="options_main_page.html"
-                class="options-btn"
-                title="Go To options"
-              >
-                <i class="fa fa-cogs fa-2x"/>
-              </a>
             </div>
-          </div>
-        </div>
-
-        <div class="table-scroll">
-          <table
-            id="table-task-issues"
-            class="table table-responsive-sm table-bordered table-fixed"
-          >
-            <thead>
-              <tr>
-                <th class="action-col">
-                  <div>
-                    <t t-if="state.activeTimerId and state.timerStartIso">
-                      <span class="active-timer-running">
-                        <i class="fa fa-clock-o"/>
-                        #<t t-out="state.activeTimerId"/>
-                      </span>
-                    </t>
-                  </div>
-
-                  <t t-if="state.timerStartIso">
-                    <span class="startTimeCount" t-out="formattedTimer"/>
-                  </t>
-                </th>
-
-                <th class="priority-col">Priority</th>
-                <th class="stage-col">Stage</th>
-
-                <th class="item-col">
-                  <div class="item-header-title">
-                    <t t-out="itemLabelPlural"/> [<t t-out="filteredIssues.length"/>]
-                  </div>
-                  <label class="allIssues">
-                    <input
-                      id="showAllIssues"
-                      type="checkbox"
-                      t-att-checked="state.allIssues"
-                      t-on-input="(ev) => updateShowAllPreference(ev.target.checked)"
-                    />
-                    Show for everyone
-                  </label>
-                </th>
 
-                <t t-if="state.dataSource === 'project.task'">
-                  <th>Hours Spent</th>
-                  <th>Remaining Hours</th>
-                </t>
+            <t t-if="state.error">
+              <div class="remote-error" t-out="state.error"/>
+            </t>
 
-                <th class="project-col">Project</th>
-              </tr>
-            </thead>
+          </form>
 
-            <tbody>
-              <t t-if="filteredIssues.length">
-                <t
-                  t-foreach="filteredIssues"
-                  t-as="issue"
-                  t-key="issue.id"
-                >
-                  <tr
-                    t-att-class="state.activeTimerId === issue.id ? 'active-row' : ''"
+          <!-- Saved remotes table ──────────────────────────────────── -->
+          <t t-if="state.showList and state.remotes.length">
+            <div class="remotes-table-info">
+              <table class="table table-bordered">
+                <caption class="text-info caption-remotes">
+                  List of Available Remotes
+                </caption>
+                <thead>
+                  <tr>
+                    <th scope="col">Remote</th>
+                    <th scope="col">Host</th>
+                    <th scope="col">Database</th>
+                    <th scope="col">Source</th>
+                    <th scope="col">State</th>
+                    <th></th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <t
+                    t-foreach="state.remotes"
+                    t-as="remote"
+                    t-key="remote.url + remote.database"
                   >
-                    <td class="text-center px-2 td-btn action-col">
-                      <t t-if="!state.activeTimerId">
-                        <i
-                          class="fa fa-play-circle action-btn pointer"
-                          title="Start the timer for the selected item"
-                          t-on-click="() => startTimer(issue)"
-                        />
-                      </t>
-
-                      <t t-if="state.activeTimerId === issue.id">
-                        <i
-                          class="text-danger fa fa-stop-circle action-btn pointer"
-                          title="Stop timer and record the time to Odoo timesheets"
-                          t-on-click="() => stopTimer(issue)"
-                        />
-                      </t>
-                    </td>
-
-                    <td class="priority-cell">
-                      <t t-if="issue.priority_level.length">
-                        <t
-                          t-foreach="issue.priority_level"
-                          t-as="priority"
-                          t-key="priority + '_' + issue.id"
-                        >
-                          <span class="fa fa-star checked"/>
-                        </t>
-                      </t>
-                      <t t-if="!issue.priority_level.length">
-                        <i class="fa fa-star-o"/>
-                      </t>
-                    </td>
-
-                    <td class="stage-cell">
-                      <ReadMore
-                        text="relationLabel(issue.stage_id)"
-                        limit="15"
-                      />
-                    </td>
-
-                    <td class="issue-desc-cell">
-                      <ReadMore
-                        text="issueLabel(issue)"
-                        limit="70"
-                        href="issueHref(issue)"
-                      />
-                    </td>
-
-                    <t t-if="state.dataSource === 'project.task'">
+                    <tr>
+                      <td class="text-info">
+                        <ReadMore text="remote.name" limit="18"/>
+                      </td>
                       <td>
-                        <ReadMore
-                          text="normalizeText(formatHours(issue.effective_hours))"
-                          limit="9"
-                        />
+                        <ReadMore text="remote.url" limit="25"/>
+                      </td>
+                      <td>
+                        <ReadMore text="remote.database" limit="18"/>
+                      </td>
+                      <td>
+                        <ReadMore text="remote.datasrc || 'project.issue'" limit="18"/>
                       </td>
                       <td>
-                        <ReadMore
-                          text="normalizeText(formatHours(issue.remaining_hours))"
-                          limit="9"
+                        <ReadMore text="remote.state || 'Inactive'" limit="18"/>
+                      </td>
+                      <td class="remote-row-actions">
+                        <i
+                          class="fa fa-pencil text-primary"
+                          title="Edit remote"
+                          t-on-click="() => editRemote(remote)"
+                          style="margin-right: 10px; cursor: pointer;"
+                        />
+                        <i
+                          class="fa fa-trash text-danger"
+                          title="Remove remote"
+                          t-on-click="() => removeRemote(remote)"
+                          style="cursor: pointer;"
                         />
                       </td>
-                    </t>
-
-                    <td class="project-cell">
-                      <ReadMore
-                        text="relationLabel(issue.project_id)"
-                        limit="15"
-                      />
-                    </td>
-                  </tr>
-                </t>
-              </t>
-
-              <t t-if="!filteredIssues.length">
-                <tr>
-                  <td
-                    class="text-center text-danger"
-                    t-att-colspan="state.dataSource === 'project.task' ? 7 : 5"
-                  >
-                    No matching items are currently available
-                  </td>
-                </tr>
-              </t>
-            </tbody>
-          </table>
-        </div>
-
-        <div class="container footer info-footer">
-          <div class="row">
-            <div class="remote-info-block col-md-12">
-              <span><b>Odoo:</b> <t t-out="state.serverVersion || 'Unknown'"/></span><br/>
-              <span><b>Host:</b> <t t-out="state.currentHost || '-'"/></span><br/>
-              <span><b>Database:</b> <t t-out="state.currentDatabase || '-'"/></span><br/>
-              <span><b>Current User:</b> <t t-out="state.user ? state.user.display_name : '-'"/></span><br/>
+                    </tr>
+                  </t>
+                </tbody>
+              </table>
             </div>
-          </div>
+          </t>
+
         </div>
       </div>
+
     </div>
   </t>
-</templates>
\ No newline at end of file
+</templates>
diff --git a/src/templates/popup_app.xml b/src/templates/popup_app.xml
index 7e19a5e..c014950 100644
--- a/src/templates/popup_app.xml
+++ b/src/templates/popup_app.xml
@@ -165,19 +165,6 @@
         </div>
 
         <div class="container footer top-actions">
-          <div
-            class="auto_download_timesheet"
-            title="Store timesheet locally when you stop timer on the current item"
-          >
-            <input
-              id="auto_download_timesheet_input"
-              type="checkbox"
-              t-att-checked="state.autoDownloadIssueTimesheet"
-              t-on-change="toggleAutoDownload"
-            />
-            Auto Download Current Item Timesheet
-          </div>
-
           <div class="row">
             <div class="mx-3 col-md-12 footer-btns pointer">
               <i
@@ -250,8 +237,8 @@
                 </th>
 
                 <t t-if="state.dataSource === 'project.task'">
-                  <th>Hours Spent</th>
-                  <th>Remaining Hours</th>
+                  <th class="text-center">Hours Spent</th>
+                  <th class="text-center">Hours Left</th>
                 </t>
 
                 <th class="project-col">Project</th>
@@ -317,13 +304,13 @@
                     </td>
 
                     <t t-if="state.dataSource === 'project.task'">
-                      <td>
+                      <td class="text-center">
                         <ReadMore
                           text="normalizeText(formatHours(issue.effective_hours))"
                           limit="9"
                         />
                       </td>
-                      <td>
+                      <td class="text-center">
                         <ReadMore
                           text="normalizeText(formatHours(issue.remaining_hours))"
                           limit="9"