diff --git a/packages/protocol/src/services/browser.ts b/packages/protocol/src/services/browser.ts
index 53a7c2b..21500b2 100644
--- a/packages/protocol/src/services/browser.ts
+++ b/packages/protocol/src/services/browser.ts
@@ -260,11 +260,8 @@ export class Autism extends EventEmitter2 {
     this.p2p.on(`pubsub:${PubsubTopics.Global}`, this.#onGlobalPubSub);
     this.p2p.once('peer:connect', this.#startSync);
 
-    console.log('starting db');
     await this.db.start();
-    console.log('starting p2p');
     await this.p2p.start();
-    console.log('started');
 
     this.p2p.handle(ProtocolType.V1Info, this.#handleGetInfo);
     this.p2p.handle(ProtocolType.V1Sync, this.#handleSync);
diff --git a/packages/web/lib/style.css b/packages/web/lib/style.css
index b837d58..926229a 100644
--- a/packages/web/lib/style.css
+++ b/packages/web/lib/style.css
@@ -46,6 +46,11 @@ html {
     --green-900: #1D8348;
     --green-1000: #186A3B;
 
+    --shadow-sm: 0 1px 2px 0 rgb var(--slate-100);
+    --shadow: 0 1px 3px 0 var(--slate-200), 0 1px 2px -1px var(--slate-200);
+    --shadow-md: 0 4px 6px -1px var(--slate-200), 0 2px 4px -2px var(--slate-200);
+    --shadow-lg: 0 10px 15px -3px var(--slate-200), 0 4px 6px -4px var(--slate-200);
+
     --text-3xs: .5rem;
     --text-2xs: .625rem;
     --text-xs: .75rem;
diff --git a/packages/web/lib/ui.ts b/packages/web/lib/ui.ts
index b89bfe5..ca3e312 100644
--- a/packages/web/lib/ui.ts
+++ b/packages/web/lib/ui.ts
@@ -4,7 +4,6 @@ interface CustomElementConstructor {
   new (): CustomElement;
 }
 
-const count = 0;
 interface ICustomElement extends HTMLElement {
   state: any;
   render: () => VNode;
@@ -17,8 +16,7 @@ export class CustomElement extends HTMLElement implements ICustomElement {
   css: string;
   html: string;
   #tree?: VNode;
-  #lastAttrUpdated = 0;
-  #attrUpdateTimeout: any;
+  $?: any;
 
   get tree() {
     return this.#tree;
@@ -99,6 +97,7 @@ type VNodeProps = {
   children?: VNode[];
   style?: CSSStyleDeclaration;
   content?: string;
+  oninput?: () => void;
   cache?: boolean;
 };
 
@@ -109,6 +108,7 @@ export class VNode {
   attributes = new Map<string, string>();
   children: VNode[] = [];
   style?: CSSStyleDeclaration;
+  oninput?: () => void;
   parentNode?: VNode;
   content?: string;
   #el?: any;
@@ -120,6 +120,7 @@ export class VNode {
     this.attributes = options.attributes || new Map();
     this.style = options.style;
     this.content = options.content;
+    this.oninput = options.oninput;
     this.children = options.children || [];
 
     for (const node of this.children) {
@@ -218,6 +219,12 @@ export class VNode {
       el.textContent = this.content;
     }
 
+    if (this.oninput) {
+      // @ts-ignore
+      // el.oninput = onchange;
+      el.addEventListener('input', this.oninput);
+    }
+
     frag.append(el);
 
     for (const child of this.children) {
@@ -236,7 +243,7 @@ type DOMOptions = {
   style?: CSSStyleDeclaration;
   className?: string;
   children?: VNode[];
-  cache?: boolean;
+  oninput?(): void;
 } & { [key: string]: string };
 
 type VNodeOption = VNode | string | (() => VNode | VNode[]);
@@ -331,7 +338,7 @@ export const h = (
 
   function reduceOption(props: VNodeProps, opts: DOMOptions): VNodeProps {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { content, cache, children, className, style, id, ...rest } = opts;
+    const { oninput, content, children, className, style, id, ...rest } = opts;
 
     const newProps = { ...props };
 
@@ -343,9 +350,10 @@ export const h = (
     if (style) newProps.style = style;
     if (id) newProps.id = id;
     if (children) newProps.children = children.concat(children);
-    if (cache) newProps.cache = cache;
     if (content) newProps.content = content;
 
+    if (oninput) newProps.oninput = oninput;
+
     for (const [key, value] of Object.entries(rest)) {
       newProps.attributes.set(key, value || '');
     }
@@ -369,10 +377,12 @@ export function connect(
       oldonmount.call(this);
 
       if (getStore instanceof Observable) {
+        this.$ = getStore;
         getStore.subscribe(this.update);
       } else if (typeof getStore === 'function') {
         const stores = getStore(this);
 
+        this.$ = stores;
         if (stores instanceof Observable) {
           stores.subscribe(this.update);
         } else {
diff --git a/packages/web/src/components/Button/index.css b/packages/web/src/components/Button/index.css
index 0fe9637..a92cae7 100644
--- a/packages/web/src/components/Button/index.css
+++ b/packages/web/src/components/Button/index.css
@@ -1,16 +1,17 @@
 button {
-  transition: opacity 200ms;
+  transition: opacity 100ms ease-in-out;
   display: var(--display, flex);
   flex-flow: var(--flex-flow, row);
   align-items: var(--align-items, center);
-  padding: var(--padding, 0.125rem 0.25rem);
+  padding: var(--padding, 0.25rem 0.5rem);
   cursor: pointer;
   border: var(--border, 1px solid var(--slate-200));
   gap: var(--gap, 0);
-  font-family: var(--font-family, --font-sans);
+  font-family: var(--font-family, var(--font-sans));
   font-size: var(--font-size, 0.875rem);
   color: var(--color, var(--black));
   background-color: var(--background-color, var(--slate-100));
+  width: var(--width);
   opacity: 0.9;
 }
 button:hover {
diff --git a/packages/web/src/components/Button/index.css.map b/packages/web/src/components/Button/index.css.map
index f17f301..b32446b 100644
--- a/packages/web/src/components/Button/index.css.map
+++ b/packages/web/src/components/Button/index.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["index.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE","file":"index.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["index.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE","file":"index.css"}
\ No newline at end of file
diff --git a/packages/web/src/components/Button/index.scss b/packages/web/src/components/Button/index.scss
index ea744b3..96cfe7c 100644
--- a/packages/web/src/components/Button/index.scss
+++ b/packages/web/src/components/Button/index.scss
@@ -1,16 +1,17 @@
 button {
-  transition: opacity 200ms;
+  transition: opacity 100ms ease-in-out;
   display: var(--display, flex);
   flex-flow: var(--flex-flow, row);
   align-items: var(--align-items, center);
-  padding: var(--padding, .125rem .25rem);
+  padding: var(--padding, .25rem .5rem);
   cursor: pointer;
   border: var(--border, 1px solid var(--slate-200));
   gap: var(--gap, 0);
-  font-family: var(--font-family, --font-sans);
+  font-family: var(--font-family, var(--font-sans));
   font-size: var(--font-size, .875rem);
   color: var(--color, var(--black));
   background-color: var(--background-color, var(--slate-100));
+  width: var(--width);
   opacity: .9;
 
   &:hover {
diff --git a/packages/web/src/components/LeftSidebar/index.css b/packages/web/src/components/LeftSidebar/index.css
new file mode 100644
index 0000000..7674c88
--- /dev/null
+++ b/packages/web/src/components/LeftSidebar/index.css
@@ -0,0 +1,173 @@
+.post {
+  display: grid;
+  background: var(--white);
+  grid-template-columns: 3.5rem auto;
+  grid-template-rows: auto auto auto;
+  padding: 0.5rem;
+  font-size: var(--font-size, var(--text-base));
+  border: var(--border, none);
+  cursor: default;
+}
+
+profile-image {
+  --display: inline-block;
+  --width: 3rem;
+  --height: 3rem;
+  grid-column-start: 1;
+  grid-column-end: 2;
+  grid-row-start: 1;
+  grid-row-end: 4;
+  --margin: 0 .5rem 0 0;
+}
+
+.top {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  grid-column-start: 2;
+  grid-column-end: 3;
+  grid-row-start: 1;
+  grid-row-end: 2;
+  gap: 0.25rem;
+}
+.top .creator {
+  font-weight: var(--font-semibold);
+}
+.top .userId {
+  color: var(--slate-300);
+  font-weight: var(--font-light);
+}
+.top .createAt-top {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  color: var(--slate-300);
+  gap: 0.25rem;
+  font-weight: var(--font-light);
+}
+
+.content {
+  display: flex;
+  flex-flow: row nowrap;
+  grid-column-start: 2;
+  grid-column-end: 3;
+  grid-row-start: 2;
+  grid-row-end: 3;
+  padding: 0.25rem 0;
+  font-weight: var(--font-normal);
+  line-height: 1.3125;
+}
+
+.bottom {
+  display: flex;
+  flex-flow: row nowrap;
+  grid-column-start: 2;
+  grid-column-end: 3;
+  grid-row-start: 3;
+  grid-row-end: 4;
+  gap: 0.25rem;
+}
+.bottom c-button {
+  --gap: .5rem;
+  --font-family: var(--font-mono);
+  --font-size: var(--text-base);
+  --padding: .125rem .25rem;
+}
+.bottom c-button img {
+  width: var(--text-base);
+  height: var(--text-base);
+}
+
+.comment-btn {
+  --color: var(--blue-500);
+  --background-color: var(--blue-200);
+  --border: 1px solid var(--blue-300);
+}
+
+.repost-btn {
+  --color: var(--green-500);
+  --background-color: var(--green-200);
+  --border: 1px solid var(--green-300);
+}
+
+.like-btn {
+  --color: var(--red-500);
+  --background-color: var(--red-200);
+  --border: 1px solid var(--red-300);
+}
+
+.left-sidebar {
+  display: flex;
+  flex-flow: column nowrap;
+  width: 20rem;
+  flex: 1 0 auto;
+  gap: 0.25rem;
+}
+.left-sidebar c-button {
+  --width: 100%;
+}
+.left-sidebar .editor .post {
+  grid-template-columns: auto auto;
+  grid-template-rows: auto auto auto auto;
+  padding: 0;
+}
+.left-sidebar .editor .post profile-image {
+  grid-column-start: 1;
+  grid-column-end: 2;
+  grid-row-start: 1;
+  grid-row-end: 2;
+  --margin: 0 .5rem .5rem 0;
+  --box-shadow: var(--shadow);
+  padding: 1rem 0 0 1rem;
+}
+.left-sidebar .editor .post .top {
+  grid-column-start: 1;
+  grid-column-end: 3;
+  grid-row-start: 2;
+  grid-row-end: 3;
+  padding: 0 1rem;
+}
+.left-sidebar .editor .post .bottom {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: flex-end;
+  grid-column-start: 1;
+  grid-column-end: 3;
+  grid-row-start: 4;
+  grid-row-end: 5;
+  padding: 0 1rem 1rem;
+}
+.left-sidebar .editor .post textarea.content {
+  transition: background-color 100ms ease-in-out, border 100ms ease-in-out;
+  outline: none;
+  grid-column-start: 1;
+  grid-column-end: 3;
+  grid-row-start: 3;
+  grid-row-end: 4;
+  background-color: var(--white);
+  font-size: var(--text-sm);
+  font-family: var(--font-sans);
+  margin: 0.5rem;
+  border: 1px solid var(--slate-100);
+  border-radius: 4px;
+  resize: none;
+  padding: 0.5rem;
+  cursor: pointer;
+  color: var(--slate-800);
+  font-weight: var(--font-normal);
+}
+.left-sidebar .editor .post textarea.content::placeholder {
+  color: var(--slate-200);
+}
+.left-sidebar .editor .post textarea.content:hover {
+  border: 1px solid var(--slate-200);
+  background-color: var(--slate-50);
+}
+.left-sidebar .editor .post textarea.content:active, .left-sidebar .editor .post textarea.content:focus-within {
+  border: 1px solid var(--slate-400);
+  background-color: var(--slate-50);
+  cursor: text;
+}
+
+/*# sourceMappingURL=index.css.map */
diff --git a/packages/web/src/components/LeftSidebar/index.css.map b/packages/web/src/components/LeftSidebar/index.css.map
new file mode 100644
index 0000000..a1590e3
--- /dev/null
+++ b/packages/web/src/components/LeftSidebar/index.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../Post/index.scss","index.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAKN;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AClGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EAEE;EACA;EACA","file":"index.css"}
\ No newline at end of file
diff --git a/packages/web/src/components/LeftSidebar/index.scss b/packages/web/src/components/LeftSidebar/index.scss
new file mode 100644
index 0000000..3410b6e
--- /dev/null
+++ b/packages/web/src/components/LeftSidebar/index.scss
@@ -0,0 +1,87 @@
+@import "../Post/index.scss";
+
+.left-sidebar {
+  display: flex;
+  flex-flow: column nowrap;
+  width: 20rem;
+  flex: 1 0 auto;
+  gap: .25rem;
+
+  c-button {
+    --width: 100%;
+  }
+
+  .editor {
+    .post {
+      grid-template-columns: auto auto;
+      grid-template-rows: auto auto auto auto;
+      padding: 0;
+
+      profile-image {
+        grid-column-start: 1;
+        grid-column-end: 2;
+        grid-row-start: 1;
+        grid-row-end: 2;
+        --margin: 0 .5rem .5rem 0;
+        --box-shadow: var(--shadow);
+        padding: 1rem 0 0 1rem;
+      }
+
+      .top {
+        grid-column-start: 1;
+        grid-column-end: 3;
+        grid-row-start: 2;
+        grid-row-end: 3;
+        padding: 0 1rem;
+      }
+
+      .bottom {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        justify-content: flex-end;
+        grid-column-start: 1;
+        grid-column-end: 3;
+        grid-row-start: 4;
+        grid-row-end: 5;
+        padding: 0 1rem 1rem;
+      }
+
+      textarea.content {
+        transition: background-color 100ms ease-in-out, border 100ms ease-in-out;
+        outline: none;
+        grid-column-start: 1;
+        grid-column-end: 3;
+        grid-row-start: 3;
+        grid-row-end: 4;
+        background-color: var(--white);
+        font-size: var(--text-sm);
+        font-family: var(--font-sans);
+        margin: 0.5rem;
+        border: 1px solid var(--slate-100);
+        border-radius: 4px;
+        resize: none;
+        padding: .5rem;
+        cursor: pointer;
+        color: var(--slate-800);
+        font-weight: var(--font-normal);
+
+        &::placeholder {
+          color: var(--slate-200);
+        }
+
+        &:hover {
+          border: 1px solid var(--slate-200);
+          background-color: var(--slate-50);
+        }
+
+        &:active,
+        &:focus-within {
+          border: 1px solid var(--slate-400);
+          background-color: var(--slate-50);
+          cursor: text;
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/web/src/components/LeftSidebar/index.ts b/packages/web/src/components/LeftSidebar/index.ts
index 73b3d51..779c8f6 100644
--- a/packages/web/src/components/LeftSidebar/index.ts
+++ b/packages/web/src/components/LeftSidebar/index.ts
@@ -1,5 +1,48 @@
-import { CustomElement, register } from '../../../lib/ui.ts';
+import { connect, CustomElement, h, register } from '../../../lib/ui.ts';
+import css from './index.scss';
+import { Observable } from '../../../lib/state.ts';
 
-export default class LeftSidebar extends CustomElement {}
+@connect(() => {
+  const content = new Observable('');
+  return {
+    content,
+  };
+})
+export default class LeftSidebar extends CustomElement {
+  css = css.toString();
+
+  render() {
+    const creator = '';
+    const name = 'Anonymous';
+    const handle = '0x1234';
+    const content = this.$.content.$;
+
+    return h(
+      `div.left-sidebar`,
+      h(
+        'div.editor',
+        h(
+          'div.post',
+          h('profile-image', {
+            creator: creator,
+          }),
+          h('div.top', h('div.creator', name), h('div.userId', handle)),
+          //@ts-ignore
+          h('textarea.content', {
+            content: content,
+            rows: '6',
+            placeholder: 'Say something here',
+            onchange: (event: any) => {
+              this.$.content.$ = event.target.value;
+            },
+          }),
+          h('div.bottom', h('c-button', {}, 'Submit')),
+        ),
+      ),
+      h('c-button', 'Import Private Key'),
+      h('c-button', 'Generate Private Key'),
+    );
+  }
+}
 
 register('left-sidebar', LeftSidebar);
diff --git a/packages/web/src/components/Post/index.css b/packages/web/src/components/Post/index.css
index cd787a2..589dfa3 100644
--- a/packages/web/src/components/Post/index.css
+++ b/packages/web/src/components/Post/index.css
@@ -71,6 +71,7 @@ profile-image {
   --gap: .5rem;
   --font-family: var(--font-mono);
   --font-size: var(--text-base);
+  --padding: .125rem .25rem;
 }
 .bottom c-button img {
   width: var(--text-base);
diff --git a/packages/web/src/components/Post/index.css.map b/packages/web/src/components/Post/index.css.map
index f67fedf..8c22b8a 100644
--- a/packages/web/src/components/Post/index.css.map
+++ b/packages/web/src/components/Post/index.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["index.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAKN;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA","file":"index.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["index.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAKN;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA","file":"index.css"}
\ No newline at end of file
diff --git a/packages/web/src/components/Post/index.scss b/packages/web/src/components/Post/index.scss
index 860a636..e68225b 100644
--- a/packages/web/src/components/Post/index.scss
+++ b/packages/web/src/components/Post/index.scss
@@ -74,6 +74,7 @@ profile-image {
     --gap: .5rem;
     --font-family: var(--font-mono);
     --font-size: var(--text-base);
+    --padding: .125rem .25rem;
 
     img {
       width: var(--text-base);
diff --git a/packages/web/src/components/Post/index.ts b/packages/web/src/components/Post/index.ts
index c6721fa..7146e99 100644
--- a/packages/web/src/components/Post/index.ts
+++ b/packages/web/src/components/Post/index.ts
@@ -25,8 +25,8 @@ export default class Post extends CustomElement {
   css = css.toString();
 
   render() {
-    const p = $node.getPost(this.state.hash);
-    const u = $node.getUser(p?.creator || '');
+    const p = this.$.post?.$;
+    const u = this.$.user?.$;
 
     const creator = p?.json.creator || '';
     const createat = fromNow(p?.json.createdAt) || '';
diff --git a/packages/web/src/components/ProfileImage/index.css b/packages/web/src/components/ProfileImage/index.css
index ce0d688..8ffa5f9 100644
--- a/packages/web/src/components/ProfileImage/index.css
+++ b/packages/web/src/components/ProfileImage/index.css
@@ -2,10 +2,12 @@ img {
   display: var(--display, block);
   width: var(--width, 2rem);
   height: var(--height, 2rem);
+  border: var(--border, none);
   border-radius: var(--border-radius, 2px);
   padding: var(--padding, 0);
   margin: var(--margin, 0);
-  background-color: var(--slate-50);
+  background-color: var(--background-color, var(--slate-50));
+  box-shadow: var(--box-shadow);
 }
 
 /*# sourceMappingURL=index.css.map */
diff --git a/packages/web/src/components/ProfileImage/index.css.map b/packages/web/src/components/ProfileImage/index.css.map
index 6e8d04d..49c8e8f 100644
--- a/packages/web/src/components/ProfileImage/index.css.map
+++ b/packages/web/src/components/ProfileImage/index.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["index.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA","file":"index.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["index.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"index.css"}
\ No newline at end of file
diff --git a/packages/web/src/components/ProfileImage/index.scss b/packages/web/src/components/ProfileImage/index.scss
index d18635c..1eac093 100644
--- a/packages/web/src/components/ProfileImage/index.scss
+++ b/packages/web/src/components/ProfileImage/index.scss
@@ -2,8 +2,10 @@ img {
   display: var(--display, block);
   width: var(--width, 2rem);
   height: var(--height, 2rem);
+  border: var(--border, none);
   border-radius: var(--border-radius, 2px);
   padding: var(--padding, 0);
   margin: var(--margin, 0);
-  background-color: var(--slate-50);
+  background-color: var(--background-color, var(--slate-50));
+  box-shadow: var(--box-shadow);
 }
\ No newline at end of file
diff --git a/packages/web/src/components/ProfileImage/index.ts b/packages/web/src/components/ProfileImage/index.ts
index d5e4319..68389e0 100644
--- a/packages/web/src/components/ProfileImage/index.ts
+++ b/packages/web/src/components/ProfileImage/index.ts
@@ -13,16 +13,13 @@ export default class ProfileImage extends CustomElement {
   css = css.toString();
 
   render() {
-    const { creator } = this.state;
-
-    const user = $node.getUser(creator || '');
-
     let url =
       'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAABNZJREFUeF7tnFmW6jAMRJP975Ut0CcNnc5gR6XRcmL+HtFQqitDMzzm1+v1nsbN1oF5nqa3zNZ5ALFlUao2T9OE4ukXCGdKynNOLU4s0bdUigZSE2AojPIr+3VLK1YglkWzG5hZH31CMquvaku4XqAkNZD1DwqwoZ4v2AgM0+vRVDiLVANZ5HQxO+ib7yx0dRMg66x0P9AWfljD1nyxFxm2QEylIcW0GLT5lEZ+fRAIvzAl9enXq68moFfqFA/qemL3s0m/PCHZxCbmei2NYST4kAVawWgMVgTCbJqqq5AF/gOuQm2BCN67ARz3DyHNpCUYlPhtEgqEHksasdix3ND3VKV9/PPcgGAbU48qXcFq+pvm2cENCCb6CRZjTvxFNQbCE9t1NLh7sUBAUWmN3+j3GsUByDzN0/vw9OolPyE65qjHcDUQZn9jB9t2Nx6mzz97QxGENvvgLZwQZxVG5Y3KeCy5qmbxIQsaFgpSacub7DX7fJtX6nnZkcoOcNVP6mTDEcByYABh2aULRh7p3IBcN0ekgcMblgI74mECbW5ASNWnV0R+b9ZyfeHGk7MyAphAFFIVqYx5DEIpodR13feimEAM5tWWAPwgW1jUIJvIAkRA/OfRdEBz0biNsVTK9joVW+H1BSLMli0BkQVoAUJcpAUUFZ2QAF2PbWEE5MYrG7waRkBiVMPY4UCmbq+626cp6JuLTN2PCC/CqRNDWXZ1Qp4A+jZA0A1EoFrWQvptYxoAaTku1574+HggCXhIJEhyJP+1LB7IcekEkwpS4lcd6bgb5PMPGsiaJLChkCKogox2mxgayG1GLQ9iuiCaYsvn6e/xmXrQuuGkHnJCcEP4hGxr3wAIaEjhCZRvvjIDkEoAOVQACtKSTYrQbTqNAE/IMDGKLwjERk7XWIPEhwKxwdp3FYrrAJKM7wYIxa6knJfDi07m1EmOzzTjhDTgfvWjpWcgbPDsBDsLGra2G2JfiTwhN5zZy0tR3aO/JJC1yyCj+44oiAsHon9OByUlCGu4fDogCby7k4RlD3yBWGyaRY2OqPkCuTCi7PNy73LL96s+UXvRDEgfS2uFAa/jCAQX0QccnUrUDR4QtKpOO/uBzq1dg8JlIFfGN4fi6ZLzcED5IpDLPKCoh2WN2tZHcRJ08ZDF6ciJ9cDlVPM7VuR0vOcQzdyRU2l0Vt+RiBkgDoi1Sc3qlcBs76uAA3kOIJ5gQQhbCQOIJxBB7fZABFskmLObFCEQwkVjk5FySMyJiijJl+0eSEKBvuPnqy48IT6DxO9DfEfKuVRAKLF3vv63Gu5A8u1gbqyOQAYKCfpfICfr1jsiTV0PbcpPDCXmSnLMT0gkQsnAa06EUEEPcyAqk0ay37dOBMvRLQ75rOfMfCdEPp3rh0n/sgoCDTXnA9LtOQGFb776Xnwjv/R7WYbAaZVOzZzK0vNUIlA96hOCNhJPok1ML3A/oBqI1q+m+QlhNQWS0A96P5xFxwNxHoh29CpCKa6ajtVdotyBYFJ0Nt4pmwckm7vZ9BQ3gyeSB6TBKvLGaSDQuGV6IMbzfsq5U5Y3UAGRt3Wx+VzUU6CoNp2kAhJkq28b2iNGf30xBZBK8+/d+6t6oQxXug5VADnObW+6fcX8rPhAnuhSIEc+kEBxT2z1A58ObwvXw1MMAAAAAElFTkSuQmCC';
-    if (user?.profileImageUrl) {
-      url = user.profileImageUrl;
+    if (this.$.profileImageUrl) {
+      url = this.$.profileImageUrl;
     } else if (this.state.creator) {
-      url = 'data:image/svg+xml;utf8,' + minidenticon(creator, 50, 50);
+      url =
+        'data:image/svg+xml;utf8,' + minidenticon(this.state.creator, 50, 50);
     }
 
     return h('img', { src: url });
diff --git a/packages/web/src/pages/App/index.css b/packages/web/src/pages/App/index.css
index d9e74cf..9df984e 100644
--- a/packages/web/src/pages/App/index.css
+++ b/packages/web/src/pages/App/index.css
@@ -6,6 +6,7 @@
   height: calc(100% - 2rem);
   overflow: hidden;
   padding: 1rem;
+  gap: 0.5rem;
 }
 
 .posts {
@@ -28,9 +29,4 @@
   border: 1px solid var(--slate-100);
 }
 
-.sidebar {
-  width: 12rem;
-  flex: 1 0 auto;
-}
-
 /*# sourceMappingURL=index.css.map */
diff --git a/packages/web/src/pages/App/index.css.map b/packages/web/src/pages/App/index.css.map
index d2c0f12..14ebbc0 100644
--- a/packages/web/src/pages/App/index.css.map
+++ b/packages/web/src/pages/App/index.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["index.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA","file":"index.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["index.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;EACE;EACA","file":"index.css"}
\ No newline at end of file
diff --git a/packages/web/src/pages/App/index.scss b/packages/web/src/pages/App/index.scss
index ecb0dab..a2cc090 100644
--- a/packages/web/src/pages/App/index.scss
+++ b/packages/web/src/pages/App/index.scss
@@ -6,6 +6,7 @@
   height: calc(100% - 2rem);
   overflow: hidden;
   padding: 1rem;
+  gap: 0.5rem;
 }
 
 .posts {
@@ -27,8 +28,3 @@
   flex: 0 0 auto;
   border: 1px solid var(--slate-100);
 }
-
-.sidebar {
-  width: 12rem;
-  flex: 1 0 auto;
-}
\ No newline at end of file
diff --git a/packages/web/src/pages/App/index.ts b/packages/web/src/pages/App/index.ts
index 17fa82c..6925b32 100644
--- a/packages/web/src/pages/App/index.ts
+++ b/packages/web/src/pages/App/index.ts
@@ -1,6 +1,8 @@
 import { connect, CustomElement, h, register } from '../../../lib/ui.ts';
 import $node from '../../state/node.ts';
 import '../../components/Post';
+import '../../components/LeftSidebar';
+
 import css from './index.scss';
 
 @connect($node.$globalPosts)
@@ -10,9 +12,10 @@ export default class App extends CustomElement {
   render() {
     return h(
       'div.app',
+      h('left-sidebar'),
       h(
         'div.posts',
-        $node.$globalPosts.$.map((hash) => {
+        this.$.$?.map((hash: string) => {
           return h(`post-card`, { hash });
         }),
       ),
diff --git a/packages/web/src/state/node.ts b/packages/web/src/state/node.ts
index e5fc8e8..9a92f69 100644
--- a/packages/web/src/state/node.ts
+++ b/packages/web/src/state/node.ts
@@ -14,7 +14,7 @@ export class NodeStore {
   constructor() {
     const node = new Autism({
       bootstrap: [
-        '/ip4/192.168.86.24/tcp/60513/ws/p2p/12D3KooWBQns6iojm1whaL4VrrGvMsg2kMmqoxNMCwEGDg27G6Pq',
+        '/ip4/192.168.86.24/tcp/56199/ws/p2p/12D3KooWFYeg3L3ew9tboKrQPxtMDyTEs77cJKJkYp2YLhuvZ21M',
       ],
     });