diff --git a/dist/index.html b/dist/index.html
index 58eaea6..74331a4 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -18,6 +18,7 @@
   
   <nav>
     <ul>
+      <li><a href="#" onclick="showSettings()">settings</a></li>
     </ul>
   </nav>
   <main>
diff --git a/src/index.js b/src/index.js
index a611fac..27725b5 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,14 +1,18 @@
-import { createAdapter, toNostrAdapter } from "./adapter";
+import adapter from "./adapter";
 
 let adapters = [];
 
+function $(id) {
+  return document.getElementById(id);
+}
+
 function main() {
-  let settings = localStorage.getItem("settings");
+  let settings = JSON.parse(localStorage.getItem("settings"));;
   if (settings != null) {
     for (let s of settings.adapters) {
      switch (s.protocol) {
         case "nostr": 
-          let a = toNostrAdapter(createAdapter(), s);
+          let a = adapter.toNostrAdapter(adapter.createAdapter(), s);
           adapters.push(a);
           break;
       }
@@ -18,4 +22,33 @@ function main() {
   }
 };
 
+function showSettings() {
+  // tab bar hidden
+  let tabbar = $("tabbar");
+  tabbar.style.display = "none";
+  
+  // tabcontent to show settings ui
+  let tabcontent = $("tabcontent");
+  
+  tabcontent.innerHTML = "<p>this is our settings dialogue</p>";
+  tabcontent.innerHTML += "<button onclick='saveSettings()'>save</button>";
+  
+}
+
+function saveSettings() {
+  if (window.settings) {
+    localStorage.setItem("settings", JSON.stringify(window.settings));
+  }
+    // tab bar hidden
+  let tabbar = $("tabbar");
+  tabbar.style.display = "block";
+  
+  // tabcontent to show settings ui
+  let tabcontent = $("tabcontent");
+  tabcontent.innerHTML = "";
+}
+
+window.showSettings = showSettings;
+window.saveSettings = saveSettings;
+
 main();
\ No newline at end of file