diff --git a/background.js b/background.js
index 3eed2c1..92a8784 100644
--- a/background.js
+++ b/background.js
@@ -6,23 +6,28 @@ const homeKey = 'esc_win_content';
 const homeURL = api.runtime.getURL('home.html');
 const commandKey = 'open-escape';
 
-/*
-
-Weird thing:
+const VIEW_GROUPS = 1;
+const VIEW_PAGES = 2;
+const VIEW_URL = 3;
 
-- 'panel' gets us the featurelessness we want
-- but the resulting window has type of 'popup'
-- so you have to search by 'popup' when getting it
-
-*/
+// 'panel' gets us the featurelessness we want but the resulting window has type
+// of 'popup' so you have to search by 'popup' when getting it.
 
 //const windowType = 'normal';
+//const windowType = 'detached_panel';
 //const windowType = 'popup';
 const windowType = 'panel';
-//const windowType = 'detached_panel';
+
+/*
+const sa = signal([]);
+sa.effect(e => console.log('signal effect', sa.value));
+sa.value = [1];
+*/
 
 let port = null;
 
+const store = await datastore.init();
+
 // home page first load opens the connection
 api.runtime.onConnect.addListener(p => {
   console.log('port connected', p)
@@ -37,7 +42,8 @@ api.runtime.onConnect.addListener(p => {
 const escapeHandler = async msg => {
 	if (msg.ESC === 1) {
     const win = await findEscapeWindow();
-    if (msg.address && msg.address != homeURL) {
+    if (msg.url && msg.url != homeURL) {
+      store.setCurrentView(VIEW_URL);
       await openContentWindow(homeURL, homeKey);
     }
   }
@@ -45,32 +51,70 @@ const escapeHandler = async msg => {
 
 api.runtime.onMessage.addListener(escapeHandler);
 
-const onNavigate = async msg => {
-  console.log('onNavigate', msg);
-  if (msg.type === 'navigate' && msg.url) {
-    console.log('Navigating to:', msg.url);
-    // if the message is a navigation request, open the content window
-    // with the specified address
-    const win = await openContentWindow(msg.url, homeKey);
-    console.log(win);
-
-    const tab = win.tabs[0];
-    console.log('taking screenshot for:', tab);
-    const screenshot = await api.tabs.captureTab(tab.id);
-    if (screenshot) {
-      store.addScreenshot(url, screenshot);
-      console.log('Screenshot captured for:', msg.url);
-    }
-    
-    /*
-    if (port) {
-      port.postMessage({ type: 'windowOpened', address: msg.url, windowId: win.id });
-    }
-    */
+const addPageToGroup = (groupId, url) => {
+  const group = store.getGroupById(groupId);
+  const index = group.pages.indexOf(url);
+  console.log('aPTG', groupId, url);
+  if (index === -1) {
+    console.log('adding', url, 'to', groupId);
+    group.pages.push(url);
+    store.updateGroup(group);
+  }
+  else {
+    console.log('url already in group')
+  }
+};
+
+const onMessage = msg => {
+  console.log('onMessage', msg);
+  switch(msg.type) {
+    default:
+      onNavigate(msg.url);
   }
 };
 
-api.runtime.onMessage.addListener(onNavigate);
+const onNavigate = async url => {
+  if (!url) {
+    console.error('onNavigate, NO URL');
+    return;
+  }
+
+  console.log('Navigating to:', url);
+
+  console.log('getting group id...');
+  const groupId = store.getLastActiveGroupId();
+  console.log('got group', groupId);
+
+  // TODO
+  addPageToGroup(groupId, url);
+  console.log('group updated:', groupId);
+
+  store.setCurrentView(VIEW_URL);
+  console.log('current view set to:', VIEW_URL);
+
+  // if the message is a navigation request, open the content window
+  // with the specified address
+  const win = await openContentWindow(url, homeKey);
+  //console.log('opened win', win);
+
+  //
+  const tab = win.tabs[0];
+  console.log('taking screenshot for:', tab);
+  const screenshot = await api.tabs.captureTab(tab.id);
+  if (screenshot) {
+    store.setScreenshot(url, screenshot);
+    console.log('Screenshot captured for:', url);
+  }
+  //
+  
+  /*
+  if (port) {
+    port.postMessage({ type: 'windowOpened', url: msg.url, windowId: win.id });
+  }
+  */
+};
+
+api.runtime.onMessage.addListener(onMessage);
 
 api.commands.onCommand.addListener(async command => {
   if (command === commandKey) {
@@ -89,13 +133,13 @@ const findEscapeWindow = async () => {
   });
 };
 
-const openContentWindow = async (address, key = null) => {
+const openContentWindow = async (url, key = null) => {
   // attempt to find open window, and focus it
   if (key != null) {
     const foundWin = await findEscapeWindow();
     if (foundWin != null) {
       const tab = foundWin.tabs[0];
-      api.tabs.update(tab.id, {url: address});
+      api.tabs.update(tab.id, {url});
       api.windows.update(foundWin.id, { focused: true })
       return foundWin;
     }
@@ -104,7 +148,7 @@ const openContentWindow = async (address, key = null) => {
   // make new window
   const opts = {
     type: windowType,
-    url: address
+    url
   };
 
   // open window and get info
@@ -127,7 +171,4 @@ const executeContentScript = async name => {
 	return results[0]
 };
 
-await datastore.init();
-
 await openContentWindow(homeURL, homeKey);
-
diff --git a/content-script.js b/content-script.js
index 5c7f72f..3cc8ce2 100644
--- a/content-script.js
+++ b/content-script.js
@@ -17,7 +17,7 @@ const handleEsc = evt => {
 
   browser.runtime.sendMessage({
     ESC: 1,
-    address: document.location.href
+    url: document.location.href
   });
 };
 
diff --git a/datastore.js b/datastore.js
index 636c4c8..026fffa 100644
--- a/datastore.js
+++ b/datastore.js
@@ -1,6 +1,6 @@
 import api from './api.js';
 
-const FLUSH_MS = 10000; // how often to flush state to storage
+const FLUSH_MS = 5000; // how often to flush state to storage
 
 // keys for extension-level data
 const EXT_DATA_KEY = 'state';
@@ -28,22 +28,26 @@ const initializeStore = state => {
       else {
         state.groups[i] = group;
       }
+      updateStorage(state);
     },
     getLastActiveGroupId: () => {
       return state.lastGroupId;
     },
     setLastActiveGroupId: id => {
       state.lastGroupId = id;
+      updateStorage(state);
     },
     getGroupById: id => state.groups.find(group => group.id === id),
-    getLastActiveGroup: () => state.groups.find(id => group.id === state.lastGroupId),
+    getLastActiveGroup: () => state.groups.find(group => group.id === state.lastGroupId),
     getCurrentView: () => state.currentView,
     setCurrentView: view => {
       state.currentView = view;
+      updateStorage(state);
     },
     getScreenshot: url => state.screenshots[url] || null,
     setScreenshot: (url, screenshot) => {
       state.screenshots[url] = screenshot;
+      updateStorage(state);
     }
   };
 };
@@ -69,16 +73,48 @@ const init = async () => {
   // If state doesn't exist, initialize it
   else if (!state) {
     state = initialState;
+  }
+
+  const store = initializeStore(state);
+
+  if (store.groups().length === 0) {
     // first write
     updateStorage(state);
+    const DEFAULT_GROUP_PREFIX = 'Group';
+
+    const newGroupTitle = () => {
+      return `${DEFAULT_GROUP_PREFIX} ${Object.keys(store.groups()).length + 1}`;
+    };
+
+    const newGroupData = (title, urls) => {
+      console.log('newGroup', title);
+
+      const id = Math.random().toString(16).slice(2);
+      const now = Date.now();
+
+      const group = {
+        id,
+        title: title || newGroupTitle(),
+        pages: urls || [],
+        created: now,
+        updated: now
+      };
+
+      return group;
+    };
+
+    const group = newGroupData(newGroupTitle(), []);
+    store.updateGroup(group);
+    store.setLastActiveGroupId(group.id);
   }
 
   // Flush state to storage every `FLUSH_MS` milliseconds
+  /*
   setInterval(() => {
     updateStorage(state);
   }, FLUSH_MS);
-
-  return initializeStore(state);
+  */
+  return store;
 };
 
 export default {
diff --git a/home.css b/home.css
index 7362671..9d791aa 100644
--- a/home.css
+++ b/home.css
@@ -80,14 +80,10 @@ h2 {
 	background-color: var(--background);
   color: var(--text);
   border: none;
+  border-bottom: 0.01px solid var(--text);
   outline: none;
   font-size: 1.5rem;
   font-weight: 500;
-  /*
-  height: 1.5rem;
-  margin: 0;
-  padding: 0;
-  */
   -webkit-app-region: no-drag; /* Allow interaction */
 }
 
@@ -115,10 +111,6 @@ h2 {
 }
 
 .card {
-  /*
-  min-height: 100%;
-  min-width: 100%;
-  */
   display: flex;
   flex-direction: column;
   text-decoration: none;
@@ -126,11 +118,6 @@ h2 {
   padding-bottom: 1rem;
   padding-top: 1rem;
   cursor: pointer;
-  /*
-  position: relative;
-  top: 0;
-  transition: all .1s ease-in;
-  */
 }
 
 .card:hover {
@@ -145,7 +132,8 @@ h2 {
   flex-direction: column;
 }
 
-.card .thumb {
+/*.card .thumb {*/
+.card {
   background-size: cover;
   background-position: center center;
 }
@@ -155,6 +143,10 @@ h2 {
   line-height: 1.4;
 }
 
+.card title {
+  background-color: var(--primary);
+}
+
 .card span {
   font-size: 12px;
   font-weight: bold;
diff --git a/home.html b/home.html
index 7481e7a..6cc7af1 100644
--- a/home.html
+++ b/home.html
@@ -27,9 +27,7 @@
 
     <template class="tpl-card">
       <div class="card">
-        <!--
         <div class="thumb" style="background-image: url();"></div>
-        -->
         <article>
           <h2 class="title"></h2>
           <span></span>
diff --git a/home.js b/home.js
index 491e200..155d2a9 100644
--- a/home.js
+++ b/home.js
@@ -14,13 +14,13 @@ const VIEW_URL = 3;
 // TODO: move to i18n
 const DEFAULT_GROUP_PREFIX = 'Group';
 
-
 const homeURL = api.runtime.getURL('home.html');
 
 let store = null;
 
 const setTitle = title => document.querySelector('.title').textContent = title;
 
+/*
 const addPageToGroup = (groupId, url) => {
   const group = store.getGroupById(groupId);
   const index = group.pages.indexOf(url);
@@ -30,20 +30,22 @@ const addPageToGroup = (groupId, url) => {
   }
 };
 
-const removePageFromGroup = (address, groupId) => {
+const removePageFromGroup = (url, groupId) => {
   const group = store.getGroupById(groupId);
-  const index = group.pages.indexOf(address);
+  const index = group.pages.indexOf(url);
   if (index > -1) {
     group.pages.splice(index, 1);
     store.updateGroup(group);
   }
 };
+*/
 
 const activateGroup = groupId => {
   const group = store.getGroupById(groupId);
   setTitle(group.title);
-  store.setLastActiveGroupId(groupId);
   showPagesForGroup(groupId);
+  store.setLastActiveGroupId(groupId);
+  store.setCurrentView(VIEW_PAGES);
 };
 
 const newGroupTitle = () => {
@@ -51,8 +53,6 @@ const newGroupTitle = () => {
 };
 
 const newGroupData = (title, urls) => {
-  console.log('newGroup', title);
-
   const id = Math.random().toString(16).slice(2);
   const now = Date.now();
 
@@ -94,18 +94,17 @@ const showPagesForGroup = groupId => {
   clearCards();
 
   const group = store.getGroupById(groupId);
-  console.log('showPages', group);
-  group.pages.forEach(address => {
+  group.pages.forEach(url => {
     const card = addCard();
-    card.querySelector('.title').innerText = address;
-    card.style.backgroundImage = `url(${store.getScreenshot(address) || 'none'})`;
-    card.dataset.id = address;
+    card.querySelector('.title').innerText = url;
+    //card.querySelector('.thumb').backgroundImage = `url(${store.getScreenshot(url) || 'none'})`;
+    card.style.backgroundImage = `url(${store.getScreenshot(url) || 'none'})`;
+    card.dataset.id = url;
     card.addEventListener('click', async e => {
-      const address = card.dataset.id;
-      await openURL(address);
+      const url = card.dataset.id;
+      await openURL(url);
     });
   });
-  store.setCurrentView(VIEW_PAGES);
 };
 
 function clearCards() {
@@ -116,52 +115,44 @@ function clearCards() {
 }
 
 function addCard() {
-  var container = document.querySelector('.cards');
+  const container = document.querySelector('.cards');
 
-  var cardTpl = document.querySelector('.tpl-card')
-  var cardClone = document.importNode(cardTpl.content, true);
+  const cardTpl = document.querySelector('.tpl-card')
+  const cardClone = document.importNode(cardTpl.content, true);
   container.appendChild(cardClone);
-  var card = container.lastElementChild;
+  const card = container.lastElementChild;
   card.classList.add('card');
 
   return card;
 }
 
-// Handle ESC
-const handleEsc = evt => {
-  if (!isKey(evt, 27, 'Escape', 'Esc')) {
-    return;
-  }
-
+const renderView = () => {
+  const lastView = store.getCurrentView();
   switch(store.getCurrentView()) {
     // if viewing a url, go back to pages view for its group
     case VIEW_URL:
       const group = store.getLastActiveGroup();
-      showPagesForGroup(group);
+      activateGroup(group.id);
       break;
     // if viewing a group, go back to groups view
     case VIEW_PAGES:
-      showGroups();
-      break;
-    // no-op right now
+    case VIEW_GROUPS:
     default:
+      showGroups();
   }
 };
 
-document.addEventListener('keydown', handleEsc);
+// Handle ESC
+const handleEsc = evt => {
+  if (!isKey(evt, 27, 'Escape', 'Esc')) {
+    return;
+  }
 
-// Open port to background, so we can listen
-// for when we need to show tabs (user hits ESC on web page)
-const port = api.runtime.connect({name: 'background'});
+  renderView();
+};
+
+document.addEventListener('keydown', handleEsc);
 
-port.onMessage.addListener(function(msg) {
-  if (msg.show && msg.show == 'tabs') {
-    const group = store.getLastActiveGroup();
-    setTitle(group.title);
-    showPagesForGroup(groupId);
-  }
-});
-  
 // New group click handler
 const newGroup = async () => {
   const group = newGroupData(newGroupTitle(), []);
@@ -172,27 +163,17 @@ const newGroup = async () => {
 // URL was entered
 const onURLSubmitted = async () => {
   const field = document.querySelector('.address');
-  const url = field.value;
+  const url = isURL(field.value);
   if (isURL(url)) {
+    // TODO: reset to default? leave last/current address?
+    //field.value = '';
 
-    const group = store.getLastActiveGroupId();
-    addPageToGroup(group, url);
-
-    // TODO: hmmm what's best here...
-    field.value = '';
-
-    console.log('opening url over port', url);
-    await openURL(url);
+    console.log('telling background to open  url', url);
+    await openURL(url.href);
     console.log('navigated to', url);
   }
 };
 
-const firstRun = () => {
-  const group = newGroupData(newGroupTitle(), []);
-  store.updateGroup(group);
-  store.setLastActiveGroupId(group.id);
-};
-
 // Kick out the jams
 const init = async () => {
   console.log('init');
@@ -200,15 +181,10 @@ const init = async () => {
   // Initialize storage - this loads groups, everything else
   store = await datastore.init();
 
-  // First run
   console.log(store.groups().length, 'groups loaded');
-  if (store.groups().length == 0) {
-    console.log('first run, creating first group');
-    firstRun();
-  }
 
   // Data loaded, start building UI
-  showGroups();
+  renderView();
 
   // New group click handler
   document.querySelector('.cards').addEventListener('dblclick', newGroup);
@@ -222,5 +198,3 @@ const init = async () => {
 };
 
 document.addEventListener('DOMContentLoaded', init);
-
-console.log('home:end');
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..04f20b8
--- /dev/null
+++ b/package.json
@@ -0,0 +1,7 @@
+{
+  "name": "escape",
+  "packageManager": "yarn@4.10.2",
+  "dependencies": {
+    "uhtml": "^5.0.9"
+  }
+}
diff --git a/url.js b/url.js
index f41e306..e04edb4 100644
--- a/url.js
+++ b/url.js
@@ -9,17 +9,6 @@ const isURL = str => {
 };
 
 const openURL = async url => {
-  // current window approach
-  //document.location = url;
-
-  /*
-  // new window approach
-  await api.windows.create({
-    url: url,
-    type: 'panel'
-  });
-  */
-
   api.runtime.sendMessage({
     type: 'navigate',
     url