diff --git a/src/bg.JPG b/src/bg.JPG
deleted file mode 100644
index 6aca34a..0000000
Binary files a/src/bg.JPG and /dev/null differ
diff --git a/src/bgtbc.JPG b/src/bgtbc.JPG
new file mode 100644
index 0000000..28e20ea
Binary files /dev/null and b/src/bgtbc.JPG differ
diff --git a/src/bgwotlk.jpg b/src/bgwotlk.jpg
new file mode 100644
index 0000000..97bf2a7
Binary files /dev/null and b/src/bgwotlk.jpg differ
diff --git a/src/db.js b/src/db.js
index 946c3cf..b71c9b8 100644
--- a/src/db.js
+++ b/src/db.js
@@ -1,85 +1,205 @@
 import * as Storage from "@storage";
 import * as Env from "@env";
 import * as Sciter from "@sciter";
+
+/**
+ * @typedef appState
+ * @type {object}
+ * @property {string} version - number
+ * @property {object} realmListById - sciter storage Index collection, iterable  [key:string]:{realm:string, selected: boolean, id:string}
+ * @property {appSettings} appSettings
+ * @property {account[]} accounts
+ *
+ */
+/**
+ * @typedef realmlist
+ * @type {object}
+ * @property {string} id - string
+ * @property {boolean} selected
+ * @property {string} realm
+ */
+/**
+ * @typedef account
+ * @type {object}
+ * @property {string} name
+ * @property {string} id - string
+ * @property {boolean} selected
+ */
+/**
+ * @typedef appSettings
+ * @type {object}
+ * @property {string} tbcFolderPath
+ * @property {string} wotlkFolderPath
+ * @property {string} appMode
+ */
+
 class DB {
 
   constructor() {
-     const storage = Storage.open(Env.path("documents") + "/wow-launcher.db");
-     this.storage = storage;
-     this.root = storage.root || DB.initDb(storage);
+    const storage = Storage.open(Env.path("documents") + "/wow-launcher.db");
+    this.storage = storage;
+    /** @type {appState} */
+    this.root = storage.root || DB.initDb(storage);
   }
-static initDb(storage) {
-  storage.root = {
-     version: 1,
-     realmListById: storage.createIndex("string", true) // list of notes indexed by their UID
+  static initDb(storage) {
+    storage.root = {
+      version: 1,
+      realmListById: storage.createIndex("string", true), // list of notes indexed by their UID
+      appSettings: {
+        tbcFolderPath: '',
+        wotlkFolderPath: '',
+        appMode: 'tbc'
+      },
+      accounts: []
+    }
+    return storage.root;
+  }
+  destroy() {
+    this.root = undefined;
+    this.storage.close();
+    this.storage = undefined;
+  }
+  /**
+   *
+   * @param {string} realmStr
+   */
+  addRealmList(realmStr) {
+    const id = Sciter.uuid()
+    this.root.realmListById.set(id, {
+      realm: realmStr,
+      id,
+      selected: false
+    })
+    this.storage.commit()
+    this.eventDbUpdate()
+  }
+  deleteRealmList(id) {
+    this.root.realmListById.delete(id)
+    this.eventDbUpdate()
   }
-  return storage.root;
-}
-destroy(){
-  this.root = undefined;
-  this.storage.close();
-  this.storage = undefined;
-}
-addRealmList(realmStr) {
-  const id = Sciter.uuid()
-  this.root.realmListById.set(id, {
-     realm: realmStr,id,
-     selected:false
-  })
-  this.storage.commit()
-  this.eventDbUpdate()
-}
-deleteRealmList(id) {
-  this.root.realmListById.delete(id)
-  this.eventDbUpdate()
-}
 
-/**
- *
- * @returns [ ] array of {id:number,realm:string,selected:boolean}
- */
-getRealmLists() {
-  const index = this.root.realmListById
-  const res = [];
-  for (var obj of index)
-     res.push(obj)
-  return res;
-}
+  /**
+   *
+   * @returns {realmlist[]}
+   */
+  getRealmLists() {
+    const index = this.root.realmListById
+    const res = [];
+    for (var obj of index)
+      res.push(obj)
+    return res;
+  }
 
-getRealmListById(id) {
-  const realmlist = this.root.realmListById.get(id)
- return realmlist
-}
-/**
- * only to update realm string
- * @param {string} id
- * @param {string} value
- */
-editRealmList(id, value) {
-  const obj = this.getRealmListById(id);
-  obj.realm = value;
-  this.root.realmListById.set(id, obj);
-  this.storage.commit();
-  this.eventDbUpdate()
-}
-realmListSelected(id) {
-  const allRealms = this.getRealmLists();
-  const oldSelected = allRealms.find(el=>el.selected === true);
-  if(oldSelected){
-    oldSelected.selected = false;
-    this.root.realmListById.set(oldSelected.id, oldSelected)
-  }
-  const newSelected = this.getRealmListById(id);
-  newSelected.selected = true;
-  this.root.realmListById.set(id, newSelected)
+  /**
+   *
+   * @param {string} id
+   * @returns {realmlist}
+   */
+  getRealmListById(id) {
+    const realmlist = this.root.realmListById.get(id)
+    return realmlist
+  }
+  /**
+   * only to update realm string
+   * @param {string} id
+   * @param {string} value realmname
+   */
+  editRealmList(id, value) {
+    const obj = this.getRealmListById(id);
+    obj.realm = value;
+    this.root.realmListById.set(id, obj);
+    this.storage.commit();
+    this.eventDbUpdate()
+  }
+  /**
+   * update selected state
+   * @param {string} id
+   */
+  realmListSelected(id) {
+    const allRealms = this.getRealmLists();
+    const oldSelected = allRealms.find(el => el.selected === true);
+    if (oldSelected) {
+      oldSelected.selected = false;
+      this.root.realmListById.set(oldSelected.id, oldSelected)
+    }
+    const newSelected = this.getRealmListById(id);
+    newSelected.selected = true;
+    this.root.realmListById.set(id, newSelected)
 
-}
+  }
 
-eventDbUpdate() {
-  document.post(new Event("db-update",{bubbles:true,data:this}));
-}
+  addAccount(accName) {
+    const newAcc = {
+      name: accName,
+      id: Sciter.uuid(),
+      selected: false
+    }
+    this.root.accounts.unshift(newAcc);
+    this.storage.commit();
+    this.eventDbUpdate()
+  }
+  getAccount(id) {
+    return this.root.accounts.find(el => el.id === id)
+  }
+  getAllAccs() {
+    return this.root.accounts
+  }
+  deleteAcc(id) {
+    const oldAccs = this.getAllAccs();
+    this.root.accounts = oldAccs.filter(el => el.id !== id);
+    this.storage.commit();
+    this.eventDbUpdate()
+  }
+  editAccName(id, name) {
+    const accs = this.root.accounts.map(el => {
+      if (el.id === id) el.name = name
+      return el;
+    })
+    this.root.accounts = accs;
+    this.storage.commit();
+    this.eventDbUpdate()
+  }
+  selectAccount(id) {
+    const accs = this.getAllAccs().map(el => {
+      if (el.id == id) el.selected = true;
+      else el.selected = false;
+      return el;
+    })
+    this.root.accounts = accs;
+    this.storage.commit();
+  }
+  setAppMode(label) {
+    this.root.appSettings.appMode = label;
+    this.storage.commit();
+  }
+  getAppMode() {
+    return this.root.appSettings.appMode;
+  }
+  /**
+   * 
+   * @returns {appSettings}
+   */
+  getAppSettings() {
+    return this.root.appSettings
+  }
+  /**
+   *
+   * @param {"wotlkFolderPath" | "tbcFolderPath"} mode tbcFolderPath | wotlkFolderPath
+   * @param {string} path wow folder path
+   */
+  setWoWPath(mode, path) {
+    this.root.appSettings[mode] = path;
+    this.storage.commit();
+    console.log(this.root.appSettings)
+  }
 
-}
+  eventDbUpdate() {
+    document.post(new Event("db-update", {
+      bubbles: true,
+      data: this
+    }));
+  }
 
- export const db = new DB()
+}
 
+export const db = new DB()
\ No newline at end of file
diff --git a/src/main.htm b/src/main.htm
index 5c62ac4..3794cc1 100644
--- a/src/main.htm
+++ b/src/main.htm
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="styles.css"/>
     <style>
       body {
-        background-image: url("./bg.JPG");
+        background-image: url("./bgtbc.JPG");
       }
     </style>
   </head>
@@ -24,9 +24,9 @@
 <div#middle-section>
 <div#middle-up>
   <button#settings-btn .btn><icon|cog .center  name="path_settings"/></button>
-  <div#middle-up-select>
-    <button|radio(group) checked>TBC</button>
-    <button|radio(group)>WoTLK</button>
+  <div#wow-v-select>
+    <button|radio(group) checked key="tbc">TBC</button>
+    <button|radio(group) key="wotlk">WoTLK</button>
   </div>
 </div>
 <button#launch-btn .btn>Launch WoW</button>
@@ -36,19 +36,14 @@
   <div.column-header>
     <button.edit-select-btn #accounts-btn .btn>edit accounts<icon|edit /></button>
 </div>
+<div#acc-select-wrap>
   <select|list.select>
     <option>First</option>
     <option selected key="1235">Second</option>
-    <option>Third</option>
-    <option>Fourth</option>
-    <option>Fifth</option>
-    <option>Sixth</option>
-    <option>Seventh</option>
-    <option>Eight</option>
-    <option>Nineth</option>
     <option>Tenth</option>
  </select>
 </div>
+</div>
 </div>
   </body>
 </html>
diff --git a/src/main.js b/src/main.js
index 694fd80..8d28a35 100644
--- a/src/main.js
+++ b/src/main.js
@@ -44,9 +44,35 @@ function renderRealmSelect() {
    root.innerHTML = html;
 }
 
+function renderAccSelect(){
+   const root = document.querySelector('#acc-select-wrap');
+   const data = db.getAllAccs();
+   const isThereSelected = data.some(el=>el.selected);
+   if(!isThereSelected && data.length  > 0) data[0].selected = true;
+   const html = `
+   <select|list.select#acc-select>
+   ${data.reduce((acc,el)=>acc+=`<option ${el.selected ? 'selected=""': ''} key="${el.id}">${el.name}</option>`, '')}
+</select>
+   `;
+   root.innerHTML = html;
+}
+
+function appMode() {
+   const data = db.getAppMode();
+   console.log(data)
+   const btns = document.querySelector('#wow-v-select').querySelectorAll('button');;
+   btns.forEach(el=>{
+      if(el.getAttribute("key") === data)  el.state.checked = true;
+      else (el.state.checked = false)
+   })
+   document.body.style.backgroundImage = `url('bg${data}.jpg')`;
+}
+
 document.on('ready', () => {
 
    renderRealmSelect();
+   renderAccSelect()
+   appMode()
 })
 document.on('beforeunload', () => db.destroy())
 
@@ -62,10 +88,22 @@ accountsBtn.addEventListener('click', () => settingsWin('accounts_settings'))
 document.on("db-update",()=>{
    //re render
    renderRealmSelect();
+   renderAccSelect()
 })
 
 
-document.on("click",  "select#realm-select", function(e){
+document.on("click",  "select#realm-select", (e)=>{
    const key = e.target.getAttribute("key");
    db.realmListSelected(key)
+})
+
+document.on("click",  "select#acc-select", (e)=>{
+   const key = e.target.getAttribute("key");
+   db.selectAccount(key)
+})
+
+document.on("click", "#wow-v-select",(e)=>{
+   const key = e.target.getAttribute("key");
+   db.setAppMode(key);
+   document.body.style.backgroundImage = `url('bg${key}.jpg')`;
 })
\ No newline at end of file
diff --git a/src/settings-win.js b/src/settings-win.js
index 3bfb184..e36935c 100644
--- a/src/settings-win.js
+++ b/src/settings-win.js
@@ -3,24 +3,16 @@
 // } from './db';
 let db;
 
-const data = {
-  1: 'set realmlist wocserver.org',
-  2: 'set realmlist 1wocserver.org',
-  3: 'set realmlist wocserver.org11',
-}
-
-
 class Settings {
   rootHtml;
   constructor(root) {
     this.rootHtml = root;
   }
 
-
   realmListsHTML() {
     let inputHtml = '';
     const data = db.getRealmLists();
-    data.forEach(realm => {
+    data.forEach((realm) => {
       const inputWrap = `
       <div.settings-input-wrap key=${realm.id}>
       <input|text(textEdit) .settings-input value="${realm.realm}" /> <button#settings-btn .realm-edit .btn><icon|i-tick  .center/></button>
@@ -28,7 +20,7 @@ class Settings {
     </div>
       `;
       inputHtml += inputWrap;
-    })
+    });
     const html = `
     <h1>edit realmlists</h1>
     <div.settings-input-wrap .add-settings-wrap>
@@ -42,27 +34,34 @@ class Settings {
   }
 
   accountsHTML() {
-    const html =
-      `
+    const accounts = db.getAllAccs();
+    console.log(accounts);
+    const html = `
     <h1>edit accounts</h1>
     <div.settings-input-wrap .add-settings-wrap>
-      <input|text(textEdit) .settings-input  novalue="enter account name"/> <button#settings-btn .btn><icon|plus  .center/></button>
+      <input|text(textEdit) .settings-input  novalue="enter account name"/> <button#addaccount-btn .btn><icon|plus  .center/></button>
       <!-- <button#settings-btn  .btn><icon|i-cross   .center/></button> -->
     </div>
-    <div.settings-input-wrap>
-      <input|text(textEdit) .settings-input value="accountname" /> <button#settings-btn .btn><icon|i-tick  .center /></button>
-      <button#settings-btn .btn><icon|i-cross   .center/></button>
+    ${accounts.reduce((acc, el) => {
+      acc += `
+      <div.settings-input-wrap key="${el.id}">
+      <input|text(textEdit) .settings-input value="${el.name}" /> <button#settings-btn .acc-edit .btn><icon|i-tick  .center /></button>
+      <button#settings-btn .acc-delete .btn><icon|i-cross   .center/></button>
     </div>
-    `
+      `;
+      return acc;
+    }, '')}
+    `;
     this.rootHtml.innerHTML = html;
   }
 
   wowPathsHTML() {
+    const data = db.getAppSettings();
     const html = `
     <h1>enter path to WoW folders</h1>
     <h3.input-title>TBC WOW PATH</h3>
     <div.settings-input-wrap>
-      <input|text(textEdit) .settings-input value="" /> <button#settings-btn .btn><icon|i-tick  .center /></button>
+      <input|text(textEdit) .settings-input value="${data.tbcFolderPath}" key="tbcFolderPath"/> <button#settings-btn .path-edit .btn><icon|i-tick  .center /></button>
   </div>
 
     <div.test>
@@ -70,7 +69,7 @@ class Settings {
     </div>
 
   <div.settings-input-wrap>
-    <input|text(textEdit) .settings-input value="" novalue="D:\World of Warcraft 3.3.5a(example)"/> <button#settings-btn .btn><icon|i-tick  .center/></button>
+    <input|text(textEdit) key="wotlkFolderPath" .settings-input value="${data.wotlkFolderPath}" novalue="D:\World of Warcraft 3.3.5a(example)"/> <button#settings-btn .btn><icon|i-tick  .path-edit .center/></button>
   </div>
     `;
     this.rootHtml.innerHTML = html;
@@ -96,50 +95,54 @@ class Settings {
 
 const settings = new Settings(document.querySelector('#settings-inner'));
 
-document.on("click", "button.realm-delete-btn", function (e) {
-  const btn = e.target;
-  const parent = btn.parentElement;
-
-  const id = parent.getAttribute('key')
+document.on('click', 'button.realm-delete-btn', function (e) {
+  const id = e.target.parentElement.getAttribute('key');
   db.deleteRealmList(id);
   settings.realmListsHTML();
 });
 
-document.on("click", "button.realm-edit", function (e) {
-  const btn = e.target;
-  const parent = btn.parentElement;
-  const inputValue = parent.querySelector('input').value
-  const id = parent.getAttribute('key')
-  db.editRealmList(id, inputValue)
+document.on('click', 'button.realm-edit', function (e) {
+  const parent = e.target.parentElement;
+  const inputValue = parent.querySelector('input').value;
+  const id = parent.getAttribute('key');
+  db.editRealmList(id, inputValue);
   settings.realmListsHTML();
 });
 
-document.on("click",  "#add-realmlist-btn", function(e){
-  const btn = e.target;
-  const parent = btn.parentElement;
-  const inputValue = parent.querySelector('input').value
-
+document.on('click', '#add-realmlist-btn', function (e) {
+  const inputValue = e.target.parentElement.querySelector('input').value;
   db.addRealmList(inputValue);
   settings.realmListsHTML();
-})
+});
 
+document.on('click', '#addaccount-btn', (e) => {
+  const inputValue = e.target.parentElement.querySelector('input').value;
+  db.addAccount(inputValue);
+  settings.accountsHTML();
+});
+document.on('click', '.acc-delete', (e) => {
+  const id = e.target.parentElement.getAttribute('key');
+  db.deleteAcc(id);
+  settings.accountsHTML();
+});
+
+document.on('click', '.acc-edit', (e) => {
+  const id = e.target.parentElement.getAttribute('key');
+  const name = e.target.parentElement.querySelector('input').value;
+  db.editAccName(id, name);
+  settings.accountsHTML();
+});
 
-document.on("ready", function () {
+document.on('click', '.path-edit', e => {
+  const input = e.target.parentElement.querySelector('input')
+  db.setWoWPath( input.getAttribute("key"),input.value)
+})
 
+document.on('ready', function () {
   var passedParameters = Window.this.parameters; // { foo:"bar" here }
 
-
   Window.this.caption = passedParameters.screenName;
   db = passedParameters.db;
 
-
   settings.renderSettings(passedParameters.screenName);
-
-
-})
-
- document.on('unload', () => {
-    // PubSub: notify potential observers
-    console.log('unload')
-    document.post(new Event("settings-closed",{bubbles:true,data:this}));
- })
\ No newline at end of file
+});
\ No newline at end of file
diff --git a/src/styles.css b/src/styles.css
index aff1f9f..b743a16 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,5 +1,5 @@
 body {
-  background-image: url("./bg.JPG");
+  background-image: url("./bgtbc.JPG");
 }
 #container{
   flow: horizontal;
@@ -32,7 +32,7 @@ body {
   flow: horizontal;
   background-color: rgba(245, 250, 246, 0.6);
 }
-#middle-up-select{
+#wow-v-select{
   font-size: 150%;
   font-weight: bold;
   margin-left:1*;
@@ -50,7 +50,7 @@ margin-right: auto;
 display: block !important;
 
 }
-#settings-btn, #add-realmlist-btn {
+#settings-btn, #add-realmlist-btn, #addaccount-btn {
 font-size: 150%;
 margin-top: *;
 margin-bottom:*;