diff --git a/css/base.css b/css/base.css
index 447b575..53f1bb0 100644
--- a/css/base.css
+++ b/css/base.css
@@ -135,6 +135,10 @@ sup.\~critical, .text-critical {
     color: var(--color-critical-normal-content);
 }
 
+.grey {
+    color: var(--color-neutral-500);
+}
+
 .aside.sm {
     font-size: 0.8rem;
     padding: 0.8rem;
diff --git a/css/tooltip.css b/css/tooltip.css
index e398c5c..4566f30 100644
--- a/css/tooltip.css
+++ b/css/tooltip.css
@@ -16,9 +16,17 @@
 
     position: absolute;
     z-index: 1;
+    top: -1rem;
+}
+
+.tooltip.right .content {
     left: 120%;
 }
 
+.tooltip.left .content {
+    right: 120%;
+}
+
 .tooltip .content.sm {
     font-size: 0.8rem;
 }
diff --git a/html/admin.html b/html/admin.html
index be0b4aa..f795f92 100644
--- a/html/admin.html
+++ b/html/admin.html
@@ -133,109 +133,112 @@
             <div id="invitesTab">
                 <div class="card ~neutral !low invites mb-1">
                     <span class="heading">Invites</span>
-                    <div class="inv">
-                        <div class="card ~neutral !normal inv-header flex-expand mt-half">
-                            <div class="inv-codearea">
-                                <a href="#" class="code monospace mr-1">ZD8ZeC55Jcpmbtv54FuVM3</a>
-                                <span class="button ~info !normal">Copy</span>
+                    <div id="invites">
+                        <div class="inv">
+                            <div class="card ~neutral !normal inv-header flex-expand mt-half">
+                                <div class="inv-codearea">
+                                    <a href="#" class="code monospace mr-1">ZD8ZeC55Jcpmbtv54FuVM3</a>
+                                    <span class="button ~info !normal" title="Copy invite link"><i class="ri-file-copy-line"></i></span>
+                                    <span class="support ml-1">Failed to send to this.email@addre.ss</span>
+                                </div>
+                                <div class="inv-infoarea">
+                                    <span class="inv-expiry mr-1">Expires in 30m</span>
+                                    <span class="button ~critical !normal">Delete</span>
+                                    <label>
+                                        <i class="icon ri-arrow-down-s-line not-rotated"></i>
+                                        <input type="checkbox" class="toggle-details unfocused">
+                                    </label>
+                                </div>
                             </div>
-                            <div class="inv-infoarea">
-                                <span class="inv-expiry mr-1">Expires in 30m</span>
-                                <span class="button ~critical !normal">Delete</span>
-                                <label>
-                                    <i class="icon ri-arrow-down-s-line not-rotated"></i>
-                                    <input type="checkbox" class="toggle-details unfocused">
-                                </label>
-                            </div>
-                        </div>
-                        <div class="card ~neutral !normal mt-half inv-details mt-half unfocused">
-                            <div class="inv-row flex-expand align-top">
-                                <div class="inv-profilearea">
-                                    <p class="supra mb-1 top">Profile</p>
-                                    <div class="select ~neutral !normal inv-profileselect inline-block">
-                                        <select>
-                                            <option>Friends</option>
-                                            <option>Family</option>
-                                            <option>No Profile</option>
-                                        </select>
+                            <div class="card ~neutral !normal mt-half inv-details mt-half unfocused">
+                                <div class="inv-row flex-expand align-top">
+                                    <div class="inv-profilearea">
+                                        <p class="supra mb-1 top">Profile</p>
+                                        <div class="select ~neutral !normal inv-profileselect inline-block">
+                                            <select>
+                                                <option>Friends</option>
+                                                <option>Family</option>
+                                                <option>No Profile</option>
+                                            </select>
+                                        </div>
+                                        <p class="label supra">Notify on:</p>
+                                        <label class="switch block">
+                                            <input type="checkbox" class="inv-notify-expiry">
+                                            <span>On expiry</span>
+                                        </label>
+                                        <label class="switch block">
+                                            <input type="checkbox" class="inv-notify-creation">
+                                            <span>On user creation</span>
+                                        </label>
                                     </div>
-                                    <p class="label supra">Notify on:</p>
-                                    <label class="switch block">
-                                        <input type="checkbox" class="inv-notify-expiry">
-                                        <span>On expiry</span>
-                                    </label>
-                                    <label class="switch block">
-                                        <input type="checkbox" class="inv-notify-creation">
-                                        <span>On user creation</span>
-                                    </label>
-                                </div>
-                                <div class="block">
-                                    <p class="supra mb-1 top">Created <strong class="inv-created">10/12/20 18:46</strong></p>
-                                    <p class="supra mb-1">Remaining uses <strong class="inv-remaining">8</strong></p>
-                                </div>
-                                <div class="card ~neutral !low inv-created-users">
-                                    <strong class="supra table-header">Created users</strong>
-                                    <table class="table inv-table">
-                                        <thead>
-                                            <tr>
-                                                <th>Name</th>
-                                                <th>Date</th>
-                                            </tr>
-                                        </thead>
-                                        <tbody>
-                                            <tr>
-                                                <td>jeff</td>
-                                                <td>10/12/20 19:00</td>
-                                            </tr>
-                                        </tbody>
-                                    </table>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="inv">
-                        <div class="card ~neutral !normal inv-header flex-expand mt-half">
-                            <div class="inv-codearea">
-                                <a href="#" class="code monospace mr-1">ZD8ZeC55Jcpmbtv54FuVM3</a>
-                                <span class="button ~info !normal">Copy</span>
-                            </div>
-                            <div class="inv-infoarea">
-                                <span class="inv-expiry mr-1">Expires in 30m</span>
-                                <span class="button ~critical !normal">Delete</span>
-                                <label>
-                                    <i class="icon ri-arrow-down-s-line not-rotated"></i>
-                                    <input type="checkbox" class="toggle-details unfocused">
-                                </label>
-                            </div>
-                        </div>
-                        <div class="card ~neutral !normal mt-half inv-details mt-half unfocused">
-                            <div class="inv-row flex-expand align-top">
-                                <div class="inv-profilearea">
-                                    <p class="supra mb-1 top">Profile</p>
-                                    <div class="select ~neutral !normal inv-profileselect inline-block">
-                                        <select>
-                                            <option>Friends</option>
-                                            <option>Family</option>
-                                            <option>No Profile</option>
-                                        </select>
+                                    <div class="block">
+                                        <p class="supra mb-1 top">Created <strong class="inv-created">10/12/20 18:46</strong></p>
+                                        <p class="supra mb-1">Remaining uses <strong class="inv-remaining">8</strong></p>
                                     </div>
-                                    <p class="label supra">Notify on:</p>
-                                    <label class="switch block">
-                                        <input type="checkbox" class="inv-notify-expiry">
-                                        <span>On expiry</span>
-                                    </label>
-                                    <label class="switch block">
-                                        <input type="checkbox" class="inv-notify-creation">
-                                        <span>On user creation</span>
+                                    <div class="card ~neutral !low inv-created-users">
+                                        <strong class="supra table-header">Created users</strong>
+                                        <table class="table inv-table">
+                                            <thead>
+                                                <tr>
+                                                    <th>Name</th>
+                                                    <th>Date</th>
+                                                </tr>
+                                            </thead>
+                                            <tbody>
+                                                <tr>
+                                                    <td>jeff</td>
+                                                    <td>10/12/20 19:00</td>
+                                                </tr>
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="inv">
+                            <div class="card ~neutral !normal inv-header flex-expand mt-half">
+                                <div class="inv-codearea">
+                                    <a href="#" class="code monospace mr-1">ZD8ZeC55Jcpmbtv54FuVM3</a>
+                                    <span class="button ~info !normal">Copy</span>
+                                </div>
+                                <div class="inv-infoarea">
+                                    <span class="inv-expiry mr-1">Expires in 30m</span>
+                                    <span class="button ~critical !normal">Delete</span>
+                                    <label>
+                                        <i class="icon ri-arrow-down-s-line not-rotated"></i>
+                                        <input type="checkbox" class="toggle-details unfocused">
                                     </label>
                                 </div>
-                                <div class="block">
-                                    <p class="supra mb-1 top">Created <strong class="inv-created">10/12/20 18:46</strong></p>
-                                    <p class="supra mb-1">Remaining uses <strong class="inv-remaining">8</strong></p>
-                                </div>
-                                <div class="card ~neutral !low inv-created-users empty">
-                                    <strong class="supra table-header">Created users</strong>
-                                    <p class="content">None yet!</p>
+                            </div>
+                            <div class="card ~neutral !normal mt-half inv-details mt-half unfocused">
+                                <div class="inv-row flex-expand align-top">
+                                    <div class="inv-profilearea">
+                                        <p class="supra mb-1 top">Profile</p>
+                                        <div class="select ~neutral !normal inv-profileselect inline-block">
+                                            <select>
+                                                <option>Friends</option>
+                                                <option>Family</option>
+                                                <option>No Profile</option>
+                                            </select>
+                                        </div>
+                                        <p class="label supra">Notify on:</p>
+                                        <label class="switch block">
+                                            <input type="checkbox" class="inv-notify-expiry">
+                                            <span>On expiry</span>
+                                        </label>
+                                        <label class="switch block">
+                                            <input type="checkbox" class="inv-notify-creation">
+                                            <span>On user creation</span>
+                                        </label>
+                                    </div>
+                                    <div class="block">
+                                        <p class="supra mb-1 top">Created <strong class="inv-created">10/12/20 18:46</strong></p>
+                                        <p class="supra mb-1">Remaining uses <strong class="inv-remaining">8</strong></p>
+                                    </div>
+                                    <div class="card ~neutral !low inv-created-users empty">
+                                        <strong class="supra table-header">Created users</strong>
+                                        <p class="content">None yet!</p>
+                                    </div>
                                 </div>
                             </div>
                         </div>
@@ -356,7 +359,7 @@
                                 <div class="setting">
                                     <label class="label" for="settings-input">
                                         Input <span class="badge ~critical">*</span>
-                                        <div class="tooltip">
+                                        <div class="tooltip right">
                                             <i class="icon ri-information-line"></i>
                                             <span class="content sm">An example tooltip.</span>
                                         </div>
diff --git a/ts/admin.ts b/ts/admin.ts
index be0e53c..b4947e9 100644
--- a/ts/admin.ts
+++ b/ts/admin.ts
@@ -1,6 +1,7 @@
 import  { toggleTheme, loadTheme } from "./modules/theme.js";
 import { Modal } from "./modules/modal.js";
 import { Tabs } from "./modules/tabs.js";
+import { inviteList } from "./modules/invites.js";
 
 loadTheme();
 (document.getElementById('button-theme') as HTMLSpanElement).onclick = toggleTheme;
@@ -13,7 +14,7 @@ const whichAnimationEvent = () => {
     return "webkitAnimationEnd";
 }
 window.animationEvent = whichAnimationEvent();
-const toggles: HTMLInputElement[] = Array.from(document.getElementsByClassName('toggle-details'));
+/*const toggles: HTMLInputElement[] = Array.from(document.getElementsByClassName('toggle-details'));
 for (let toggle of toggles) {
     toggle.onclick = () => {
         const el = toggle.parentElement.parentElement.parentElement.nextElementSibling as HTMLDivElement;
@@ -27,7 +28,7 @@ for (let toggle of toggles) {
         toggle.previousElementSibling.classList.toggle("rotated");
         toggle.previousElementSibling.classList.toggle("not-rotated");
     };
-}
+}*/
 
 const checkInfUses = function (check: HTMLInputElement, mode = 2) {
     const uses = document.getElementById('inv-uses') as HTMLInputElement;
@@ -254,6 +255,8 @@ function login(username: string, password: string) {
                 const data = this.response;
                 window.token = data["token"];
                 window.modals.login.close();
+                window.invites.reload();
+                setInterval(window.invites.reload, 30*1000);
                 /*generateInvites();
                 setInterval((): void => generateInvites(), 60 * 1000);
                 addOptions(30, document.getElementById('days') as HTMLSelectElement);
@@ -288,3 +291,5 @@ document.getElementById('form-login').addEventListener('submit', (event: Event)
 });
 
 login("", "");
+
+window.invites = new inviteList();
diff --git a/ts/modules/common.ts b/ts/modules/common.ts
index 39ba0d2..a7a0041 100644
--- a/ts/modules/common.ts
+++ b/ts/modules/common.ts
@@ -50,13 +50,13 @@ export const rmAttr = (el: HTMLElement, attr: string): void => {
 
 export const addAttr = (el: HTMLElement, attr: string): void => el.classList.add(attr);
 
-export const _get = (url: string, data: Object, onreadystatechange: () => void): void => {
+export const _get = (url: string, data: Object, onreadystatechange: (req: XMLHttpRequest) => void): void => {
     let req = new XMLHttpRequest();
     req.open("GET", window.URLBase + url, true);
     req.responseType = 'json';
     req.setRequestHeader("Authorization", "Bearer " + window.token);
     req.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
-    req.onreadystatechange = onreadystatechange;
+    req.onreadystatechange = () => { onreadystatechange(req); };
     req.send(JSON.stringify(data));
 };
 
@@ -81,3 +81,19 @@ export function _delete(url: string, data: Object, onreadystatechange: () => voi
     req.send(JSON.stringify(data));
 }
 
+export function toClipboard (str: string) {
+    const el = document.createElement('textarea') as HTMLTextAreaElement;
+    el.value = str;
+    el.readOnly = true;
+    el.style.position = "absolute";
+    el.style.left = "-9999px";
+    document.body.appendChild(el);
+    const selected = document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false;
+    el.select();
+    document.execCommand("copy");
+    document.body.removeChild(el);
+    if (selected) {
+        document.getSelection().removeAllRanges();
+        document.getSelection().addRange(selected);
+    }
+}
diff --git a/ts/modules/invites.ts b/ts/modules/invites.ts
new file mode 100644
index 0000000..39a57ca
--- /dev/null
+++ b/ts/modules/invites.ts
@@ -0,0 +1,436 @@
+import { _get, _post, _delete, toClipboard } from "../modules/common.js";
+
+export class DOMInvite implements Invite {
+    
+    // TODO
+    updateNotify = () => {}; // SetNotify
+    delete = () => {}; // deleteInvite
+    
+    private _code: string = "None";
+    get code(): string { return this._code; }
+    set code(code: string) {
+        this._code = code;
+        this._codeLink = window.location.href.split("#")[0] + "invite/" + code;
+        const linkEl = this._codeArea.querySelector("a") as HTMLAnchorElement;
+        linkEl.textContent = code.replace(/-/g, '-');
+        linkEl.href = this._codeLink;
+    }
+    private _codeLink: string;
+
+    private _expiresIn: string;
+    get expiresIn(): string { return this._expiresIn }
+    set expiresIn(expiry: string) {
+        this._expiresIn = expiry;
+        this._infoArea.querySelector("span.inv-expiry").textContent = expiry;
+    }
+
+    private _remainingUses: string = "1";
+    get remainingUses(): string { return this._remainingUses; }
+    set remainingUses(remaining: string) {
+        this._remainingUses = remaining;
+        this._middle.querySelector("strong.inv-remaining").textContent = remaining;
+    }
+
+    private _email: string = "";
+    get email(): string { return this._email };
+    set email(address: string) {
+        this._email = address;
+        const icon = this._infoArea.querySelector(".tooltip i");
+        const chip = this._infoArea.querySelector(".tooltip span.inv-email-chip");
+        const tooltip = this._infoArea.querySelector(".tooltip span.content") as HTMLSpanElement;
+        if (address == "") {
+            icon.classList.remove("ri-mail-line");
+            icon.classList.remove("ri-mail-close-line");
+            chip.classList.remove("~neutral");
+            chip.classList.remove("~critical");
+            chip.classList.remove("chip");
+        } else {
+            chip.classList.add("chip");
+            if (address.includes("Failed to send to")) {
+                icon.classList.remove("ri-mail-line");
+                icon.classList.add("ri-mail-close-line");
+                chip.classList.remove("~neutral");
+                chip.classList.add("~critical");
+            } else {
+                address = "Sent to " + address;
+                icon.classList.remove("ri-mail-close-line");
+                icon.classList.add("ri-mail-line");
+                chip.classList.remove("~critical");
+                chip.classList.add("~neutral");
+            }
+        }
+        tooltip.textContent = address;
+    }
+
+    private _usedBy: string[][];
+    get usedBy(): string[][] { return this._usedBy; }
+    set usedBy(uB: string[][]) {
+        // ub[i][0]: username, ub[i][1]: date
+        this._usedBy = uB;
+        if (uB.length == 0) {
+            this._right.classList.add("empty");
+            this._userTable.innerHTML = `<p class="content">None yet!</p>`;
+            return;
+        }
+        this._right.classList.remove("empty");
+        let innerHTML = `
+        <table class="table inv-table">
+            <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Date</th>
+                </tr>
+            </thead>
+            <tbody>
+        `;
+        for (let user of uB) {
+            innerHTML += `
+                <tr>
+                    <td>${user[0]}</td>
+                    <td>${user[1]}</td>
+                </tr>
+            `;
+        }
+        innerHTML += `
+            </tbody>
+        </table>
+        `;
+        this._userTable.innerHTML = innerHTML;
+    }
+
+    private _created: string;
+    get created(): string { return this._created; }
+    set created(created: string) {
+        this._created = created;
+        this._middle.querySelector("strong.inv-created").textContent = created;
+    }
+    
+    private _notifyExpiry: boolean = false;
+    get notifyExpiry(): boolean { return this._notifyExpiry }
+    set notifyExpiry(state: boolean) {
+        this._notifyExpiry = state;
+        (this._left.querySelector("input.inv-notify-expiry") as HTMLInputElement).checked = state;
+    }
+
+    private _notifyCreation: boolean = false;
+    get notifyCreation(): boolean { return this._notifyCreation }
+    set notifyCreation(state: boolean) {
+        this._notifyCreation = state;
+        (this._left.querySelector("input.inv-notify-creation") as HTMLInputElement).checked = state;
+    }
+
+    private _profile: string;
+    get profile(): string { return this._profile; }
+    set profile(profile: string) { this.loadProfiles(profile); }
+    loadProfiles = (selected?: string) => {
+        const select = this._left.querySelector("select") as HTMLSelectElement;
+        let noProfile = false;
+        if (selected === "") {
+            noProfile = true; 
+        } else {
+            selected = selected || select.value;
+        }
+        let innerHTML = `<option value="noProfile" ${noProfile ? "selected" : ""}>No Profile</option>`;
+        for (let profile of window.availableProfiles) {
+            innerHTML += `<option value="${profile}" ${((profile == selected) && !noProfile) ? "selected" : ""}>${profile}</option>`;
+        }
+        select.innerHTML = innerHTML;
+    };
+
+    private _container: HTMLDivElement;
+
+    private _header: HTMLDivElement;
+    private _codeArea: HTMLDivElement;
+    private _infoArea: HTMLDivElement;
+
+    private _details: HTMLDivElement;
+    private _left: HTMLDivElement;
+    private _middle: HTMLDivElement;
+    private _right: HTMLDivElement;
+    private _userTable: HTMLDivElement;
+
+    // whether the details card is expanded.
+    get expanded(): boolean {
+        return this._details.classList.contains("focused");
+    }
+    set expanded(state: boolean) {
+        const toggle = (this._infoArea.querySelector("input.inv-toggle-details") as HTMLInputElement);
+        if (state) {
+            this._details.classList.remove("unfocused");
+            this._details.classList.add("focused");
+            toggle.previousElementSibling.classList.add("rotated");
+            toggle.previousElementSibling.classList.remove("not-rotated");
+        } else {
+            this._details.classList.add("unfocused");
+            this._details.classList.remove("focused");
+            toggle.previousElementSibling.classList.remove("rotated");
+            toggle.previousElementSibling.classList.add("not-rotated");
+        }
+    }
+
+    constructor(invite: Invite) {
+        // first create the invite structure, then use our setter methods to fill in the data.
+        this._container = document.createElement('div') as HTMLDivElement;
+        this._container.classList.add("inv");
+
+        this._header = document.createElement('div') as HTMLDivElement;
+        this._container.appendChild(this._header);
+        this._header.classList.add("card", "~neutral", "!normal", "inv-header", "flex-expand", "mt-half");
+
+        this._codeArea = document.createElement('div') as HTMLDivElement;
+        this._header.appendChild(this._codeArea);
+        this._codeArea.classList.add("inv-codearea");
+        this._codeArea.innerHTML = `
+        <a class="code monospace mr-1" href=""></a>
+        <span class="button ~info !normal" title="Copy invite link"><i class="ri-file-copy-line"></i></span>
+        `;
+        (this._codeArea.querySelector("span.button") as HTMLSpanElement).onclick = () => { toClipboard(this._codeLink); };
+
+        this._infoArea = document.createElement('div') as HTMLDivElement;
+        this._header.appendChild(this._infoArea);
+        this._infoArea.classList.add("inv-infoarea");
+        this._infoArea.innerHTML = `
+        <div class="tooltip left mr-1">
+            <span class="inv-email-chip"><i></i></span>
+            <span class="content sm"></span>
+        </div>
+        <span class="inv-expiry mr-1"></span>
+        <span class="button ~critical !normal inv-delete">Delete</span>
+        <label>
+            <i class="icon ri-arrow-down-s-line not-rotated"></i>
+            <input class="inv-toggle-details unfocused" type="checkbox">
+        </label>
+        `;
+        
+        (this._infoArea.querySelector(".inv-delete") as HTMLSpanElement).onclick = this.delete;
+
+        const toggle = (this._infoArea.querySelector("input.inv-toggle-details") as HTMLInputElement);
+        toggle.onchange = () => { this.expanded = !this.expanded; };
+
+        this._details = document.createElement('div') as HTMLDivElement;
+        this._container.appendChild(this._details);
+        this._details.classList.add("card", "~neutral", "!normal", "mt-half", "inv-details");
+        const detailsInner = document.createElement('div') as HTMLDivElement;
+        this._details.appendChild(detailsInner);
+        detailsInner.classList.add("inv-row", "flex-expand", "align-top");
+
+        this._left = document.createElement('div') as HTMLDivElement;
+        detailsInner.appendChild(this._left);
+        this._left.classList.add("inv-profilearea");
+        this._left.innerHTML = `
+        <p class="supra mb-1 top">Profile</p>
+        <div class="select ~neutral !normal inv-profileselect inline-block">
+            <select>
+                <option value="noProfile" selected>No Profile</option>
+            </select>
+        </div>
+        <p class="label supra">Notify on:</p>
+        <label class="switch block">
+            <input class="inv-notify-expiry" type="checkbox">
+            <span>On expiry</span>
+        </label>
+        <label class="switch block">
+            <input class="inv-notify-creation" type="checkbox">
+            <span>On user creation</span>
+        </label>
+        `;
+
+        this._middle = document.createElement('div') as HTMLDivElement;
+        detailsInner.appendChild(this._middle);
+        this._middle.classList.add("block");
+        this._middle.innerHTML = `
+        <p class="supra mb-1 top">Created <strong class="inv-created"></strong></p>
+        <p class="supra mb-1">Remaining uses <strong class="inv-remaining"></strong></p>
+        `;
+
+        this._right = document.createElement('div') as HTMLDivElement;
+        detailsInner.appendChild(this._right);
+        this._right.classList.add("card", "~neutral", "!low", "inv-created-users");
+        this._right.innerHTML = `<strong class="supra table-header">Created users</strong>`;
+        this._userTable = document.createElement('div') as HTMLDivElement;
+        this._right.appendChild(this._userTable);
+
+
+        this.expanded = false;
+        this.update(invite);
+    }
+
+    update = (invite: Invite) => {
+        this.code = invite.code;
+        this.created = invite.created;
+        this.email = invite.email;
+        this.expiresIn = invite.expiresIn;
+        this.notifyCreation = invite.notifyCreation;
+        this.notifyExpiry = invite.notifyExpiry;
+        this.profile = invite.profile;
+        this.remainingUses = invite.remainingUses;
+        this.usedBy = invite.usedBy;
+    }
+
+    asElement = (): HTMLDivElement => { return this._container; }
+
+    remove = () => { this._container.remove(); }
+}
+
+// TODO:
+// implement inviteList as a class
+// inviteList has empty boolean value, set true adds an emptyInvite
+
+export class inviteList implements inviteList {
+    private _list: HTMLDivElement;
+    private _empty: boolean;
+    invites: { [code: string]: DOMInvite };
+
+    constructor() {
+        this._list = document.getElementById('invites') as HTMLDivElement;
+        this.empty = true;
+        this.invites = {};
+    }
+
+    get empty(): boolean { return this._empty; }
+    set empty(state: boolean) {
+        this._empty = state;
+        if (state) {
+            this.invites = {};
+            this._list.classList.add("empty");
+            this._list.innerHTML = `
+            <div class="inv inv-empty">
+                <div class="card ~neutral !normal inv-header flex-expand mt-half">
+                    <div class="inv-codearea">
+                        <span class="code monospace">None</span>
+                    </div>
+                </div>
+            </div>
+            `;
+        } else {
+            this._list.classList.remove("empty");
+            if (this._list.querySelector(".inv-empty")) {
+                this._list.textContent = '';
+            }
+        }
+    }
+
+    add = (invite: Invite) => {
+        let domInv = new DOMInvite(invite);
+        this.invites[invite.code] = domInv;
+        if (this.empty) { this.empty = false; }
+        this._list.appendChild(domInv.asElement());
+    }
+
+    reload = () => { _get("/invites", null, (req: XMLHttpRequest) => {
+        if (req.readyState == 4) {
+            let data = req.response;
+            window.availableProfiles = data["profiles"];
+            for (let code in this.invites) {
+                this.invites[code].loadProfiles();
+            }
+            if (data["invites"] === undefined || data["invites"].length == 0) {
+                this.empty = true;
+                return;
+            }
+            // get a list of all current inv codes on dom
+            // every time we find a match in resp, delete from list
+            // at end delete all remaining in list from dom
+            let invitesOnDOM: { [code: string]: boolean } = {};
+            for (let code in this.invites) { invitesOnDOM[code] = true; }
+            for (let inv of (data["invites"] as Array<any>)) {
+                const invite = parseInvite(inv);
+                if (invite.code in this.invites) {
+                    this.invites[invite.code].update(invite);
+                    delete invitesOnDOM[invite.code];
+                } else {
+                    this.add(invite);
+                }
+            }
+            for (let code in invitesOnDOM) {
+                this.invites[code].remove();
+                delete this.invites[code];
+            }
+        }
+    }) }
+}
+    
+
+function parseInvite(invite: { [f: string]: string | number | string[][] | boolean }): Invite {
+    let parsed: Invite = {};
+    parsed.code = invite["code"] as string;
+    parsed.email = invite["email"] as string || "";
+    let time = "";
+    const fields = ["days", "hours", "minutes"];
+    for (let i = 0; i < fields.length; i++) {
+        if (invite[fields[i]] != 0) {
+            time += `${invite[fields[i]]}${fields[i][0]} `;
+        }
+    }
+    parsed.expiresIn = `Expires in ${time.slice(0, -1)}`;
+    parsed.remainingUses = invite["no-limit"] ? "∞" : String(invite["remaining-uses"])
+    parsed.usedBy = invite["used-by"] as string[][] || [];
+    parsed.created = invite["created"] as string || "Unknown";
+    parsed.profile = invite["profile"] as string || "";
+    parsed.notifyExpiry = invite["notify-expiry"] as boolean || false;
+    parsed.notifyCreation = invite["notify-creation"] as boolean || false;
+    return parsed;
+}
+    
+
+
+/*
+function addInvite(invite: Invite): void {
+    const list = document.getElementById('invites') as HTMLDivElement;
+    const container = document.createElement('div') as HTMLDivElement;
+    container.classList.add("inv");
+    container.id = "invite-" + invite.code;
+    // invite header
+    const header = document.createElement("div") as HTMLDivElement;
+    (() => {
+        header.classList.add("card", "~neutral", "!normal", "inv-header", "flex-expand", "mt-half");
+        // code area (code, copy button, "sent to" message)
+        const codeArea = document.createElement('div') as HTMLDivElement;
+        (() => {
+            codeArea.classList.add('inv-codearea');
+            if (invite.empty) {
+                codeArea.innerHTML = `
+                <a class="code monospace">None</a>
+                `;
+                return;
+            }
+            const link = window.location.href.split("#")[0] + "invite/" + invite.code;
+            let innerHTML = `
+            <a class="code monospace mr-1" href="${link}">${invite.code.replace(/-/g, '-')}</a>
+            <span class="button ~info !normal" title="Copy invite link"><i class="ri-file-copy-line"></i></span>
+            `;
+            if (invite.email) {
+                let email = invite.email;
+                if (!invite.email.includes("Failed to send to")) {
+                    email = "Sent to " + email;
+                }
+                innerHTML += `
+                <span class="support ml-1">${email}</span>
+                `;
+            }
+            codeArea.innerHTML = innerHTML;
+        })();
+        header.appendChild(codeArea);
+
+        // info area (expiry, delete, dropdown button)
+        const infoArea = document.createElement('div') as HTMLDivElement;
+        (() => {
+            infoArea.classList.add("inv-infoarea");
+            infoArea.innerHTML = `
+            <span class="inv-expiry mr-1">${invite.expiresIn}</span>
+            <span class="button ~critical !normal inv-delete">Delete</span>
+            <label>
+                <i class="icon ri-arrow-down-s-line not-rotated"></i>
+                <input class="toggle-details
+                `; /// LINE 70
+        })();
+            
+    })();
+    if (invite.empty) {
+        container.appendChild(header);
+        list.appendChild(container);
+        return;
+    }
+}
+
+*/
diff --git a/ts/typings/d.ts b/ts/typings/d.ts
index cf0ea07..b3b53a4 100644
--- a/ts/typings/d.ts
+++ b/ts/typings/d.ts
@@ -21,7 +21,8 @@ declare interface Window {
     buttonWidth: number;
     transitionEvent: string;
     animationEvent: string;
-    tabs: Tabs
+    tabs: Tabs;
+    invites: inviteList;
 }
 
 declare interface Tabs {
@@ -54,15 +55,21 @@ declare interface Modals {
 interface Invite {
     code?: string;
     expiresIn?: string;
-    empty: boolean;
     remainingUses?: string;
     email?: string;
-    usedBy?: Array<Array<string>>;
+    usedBy?: string[][];
     created?: string;
     notifyExpiry?: boolean;
     notifyCreation?: boolean;
     profile?: string;
 }
 
+interface inviteList {
+    empty: boolean;
+    invites: { [code: string]: Invite }
+    add: (invite: Invite) => void;
+    reload: () => void;
+}
+
 declare var config: Object;
 declare var modifiedConfig: Object;