diff --git a/.github/workflows/test-deploy.yml b/.github/workflows/test-deploy.yml
new file mode 100644
index 0000000..e8d3c60
--- /dev/null
+++ b/.github/workflows/test-deploy.yml
@@ -0,0 +1,35 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy
+
+on:
+  # Runs on pushes targeting the default branch
+  pull_request:
+  push:
+
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Allow one concurrent deployment
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
+
+jobs:
+  test-deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm install
+      - name: Build
+        run: npm run build-only
\ No newline at end of file
diff --git a/jackallabs-ck5-custom-0.0.0.tgz b/jackallabs-ck5-custom-0.0.0.tgz
new file mode 100644
index 0000000..fab0a9b
Binary files /dev/null and b/jackallabs-ck5-custom-0.0.0.tgz differ
diff --git a/src/components/DraftDocuments.vue b/src/components/DraftDocuments.vue
index 52ba12c..e24c4ee 100644
--- a/src/components/DraftDocuments.vue
+++ b/src/components/DraftDocuments.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="background-blocker" v-if="shouldName" @click.self="cancel">
-    <div id="name-modal" class="modal">
+  <div class="background-blocker" v-if="shouldDraftName || shouldPubName" @click.self="cancel">
+    <div id="name-modal" class="modal" v-if="shouldDraftName">
       <h2>Save Draft</h2>
       <div id="draft-name"><label>
         Draft Name:
@@ -11,11 +11,28 @@
         <button id="btn-cancel" @click="cancel">Cancel</button>
       </div>
     </div>
+    <div id="name-modal" class="modal" v-if="shouldPubName">
+      <h2>Publish Document</h2>
+      <div id="draft-name"><label>
+        Published Name:
+        <input type="text" required v-model="saveDraftFileName"/>
+      </label></div>
+      <div id="draft-buttons">
+        <button id="btn-save" @click="publishFile">Save</button>
+        <button id="btn-cancel" @click="cancel">Cancel</button>
+      </div>
+    </div>
+  </div>
+  <div id="loading" v-if="loading">
+    Loading...
   </div>
 
 <div class="draft-docs">
   <h2>Drafts</h2>
-  <h3 class="add-button" @click="openSaveDraft">+</h3>
+  <div class="action-buttons">
+    <button class="add-button" @click="openSaveDraft">+</button>
+    <button class="public-button" @click="openPubDraft">P</button>
+  </div>
   <ul class="files">
     <li v-for="item in files">
       <div class="file-card" @click="loadFile(item)">
@@ -31,45 +48,58 @@
 
   import { ref, onMounted, Ref } from 'vue'
   import { FolderHandler } from '@jackallabs/jackal.js'
-  const shouldName = ref(false)
+  const shouldDraftName = ref(false)
+  const shouldPubName = ref(false)
+
+  const loading = ref(false)
   const saveDraftFileName = ref("")
 
-  const props = defineProps(['content'])
+  const props = defineProps(['content', 'setter'])
 
   const files:Ref<string[]> = ref([])
 
   function cancel() {
-    shouldName.value = false;
+    shouldDraftName.value = false;
+    shouldPubName.value = false;
   }
 
   function openSaveDraft() {
-    shouldName.value = true;
+    shouldDraftName.value = true;
+  }
+  function openPubDraft() {
+    shouldPubName.value = true;
   }
 
+  function refreshDrafts() {
+    const folder = bStore.getDraftsFolder()
+    files.value = Object.keys(folder.getChildFiles())
+  }
 
   onMounted(() => {
-    bStore.getDraftsFolder().then((folder:FolderHandler) => {
-
-      console.dir(folder)
-
-      const children = folder.getChildFiles()
-      files.value = Object.keys(children)
-    }).catch((e) => {
-      alert(e)
-    })
+    refreshDrafts()
   })
 
   async function saveDraft() {
-    console.log("saving!")
-    console.log(props.content)
-
+    loading.value = true
     await bStore.saveDraft(saveDraftFileName.value, props.content).catch(alert)
+    cancel()
+    refreshDrafts()
+    loading.value = false
+  }
 
+  async function publishFile() {
+    loading.value = true
+    await bStore.publishFinal(saveDraftFileName.value, props.content).catch(alert)
     cancel()
+    refreshDrafts()
+    loading.value = false
   }
 
-  function loadFile(filename:string) {
-    console.log(filename)
+  async function loadFile(filename:string) {
+    loading.value = true
+    const s = await bStore.loadDraft(filename).catch(alert)
+    props.setter(s)
+    loading.value = false
   }
 
 
@@ -95,16 +125,24 @@
   }
 
   .file-card {
-    background-color: lightgray;
-    border-radius: 8px;
+    border-radius: 4px 4px 0px 4px;
     align-items: flex-start;
     flex-direction: column;
     display: flex;
     padding: 4px 10px 4px 10px;
     cursor: pointer;
+    border-left: lightcoral solid 4px;
+    border-bottom: black solid 1px;
+    box-sizing: border-box;
   }
-  .file-card:hover > * {
-    text-decoration: underline;
+
+  button {
+    background-color: lightblue;
+  }
+
+  .file-card:hover {
+    background-color: #f0f0f0;
+    border-bottom: black solid 3px;
   }
 
   .files {
@@ -127,17 +165,20 @@
     border-left: none;
   }
 
-  .add-button {
-    text-align: center;
-    width: 100%;
-    padding: 4px 0px 4px 0px;
+  .action-buttons > * {
     cursor: pointer;
+  }
 
+  .action-buttons {
+    width: 100%;
+    padding: 4px 0px 4px 0px;
     border-bottom: #888888 solid;
-  }
 
-  .add-button:hover {
-    text-decoration: underline;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    gap: 10px;
+
   }
 
   .background-blocker {
@@ -147,6 +188,7 @@
     width: 100vw;
     height: 100vh;
     background-color: rgba(255, 255, 255, 0.5);
+    z-index: 100;
   }
 
   .modal {
@@ -168,9 +210,7 @@
     border-width: 6px;
   }
 
-  button {
-    background-color: lightblue;
-  }
+
 
   #draft-buttons {
     margin-top: 30px;
@@ -184,4 +224,11 @@
     margin-top: 10px;
   }
 
+  #loading {
+    position: absolute;
+    right: 10px;
+    bottom: 10px;
+    font-size: 2rem;
+  }
+
 </style>
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 8be4732..ca6af57 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -1,6 +1,7 @@
 <template>
   <nav>
     <ul>
+
       <li v-for="(item, index) in navItems" :key="index">
         <router-link :to="item.path">
           <span class="text">{{ item.label }}</span>
@@ -27,6 +28,7 @@ import { navItems } from '@/config/nav.ts'
     float: left;
   }
 
+
   li a {
     display: block;
     color: white;
diff --git a/src/router/index.ts b/src/router/index.ts
index 0d022f8..65edc5a 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -13,9 +13,19 @@ const routes: Array<RouteRecordRaw> = [
     component: () => import('@/views/UserSettings.vue')
   },
   {
-    path: '/:user/:stub(.*)*',
+    path: '/',
     name: 'Home',
     component: () => import('@/views/HomePage.vue')
+  },
+  {
+    path: '/:user/:slug(.*)*',
+    name: 'Article',
+    component: () => import('@/views/HomePage.vue')
+  },
+  {
+    path: '/:user',
+    name: 'Profile',
+    component: () => import('@/views/UserPage.vue')
   }
 ]
 
diff --git a/src/store/main.ts b/src/store/main.ts
index 251a336..a02f5a2 100644
--- a/src/store/main.ts
+++ b/src/store/main.ts
@@ -1,4 +1,5 @@
 import type {
+  IFileDownloadHandler,
   IFileIo,
   IFolderHandler,
   IRnsHandler,
@@ -17,16 +18,18 @@ interface IBStore {
 
   getOwnedRns(): IRnsOwnedHashMap | null
   getJackalAddress(): string
+  getWorkspaceFolder(): FolderHandler
   getDraftsFolder(): FolderHandler
+  getPublishedFolder(): FolderHandler
+  loadDraft(name: string): Promise<string>
 
   saveDraft(name: string, source: string): Promise<void>
   publishFinal(name: string, source: string): Promise<void>
+  compilePublications(): Promise<void>
 
   isWalletInit(): boolean
   isFileIoInit(): boolean
   isRnsInit(): boolean
-
-  saveDraft(name: string, source: string): Promise<void>
 }
 
 class BStore implements IBStore {
@@ -36,6 +39,7 @@ class BStore implements IBStore {
   private jackalAddress: string
   private ownedRns: IRnsOwnedHashMap | null
 
+  private workspaceFolder: IFolderHandler | null
   private draftsFolder: IFolderHandler | null
   private publishedFolder: IFolderHandler | null
 
@@ -46,6 +50,7 @@ class BStore implements IBStore {
     this.jackalAddress = ''
 
     this.ownedRns = null
+    this.workspaceFolder = null
     this.draftsFolder = null
     this.publishedFolder = null
   }
@@ -74,17 +79,46 @@ class BStore implements IBStore {
     return this.jackalAddress
   }
 
-  async getDraftsFolder(): FolderHandler {
+  getWorkspaceFolder(): FolderHandler {
+    if (!this.workspaceFolder) {
+      throw Error('no workspace')
+    }
+    return this.workspaceFolder
+  }
+
+  getDraftsFolder(): FolderHandler {
     if (!this.draftsFolder) {
       throw Error('no drafts')
     }
     return this.draftsFolder
   }
 
+  getPublishedFolder(): FolderHandler {
+    if (!this.publishedFolder) {
+      throw Error('no published')
+    }
+    return this.publishedFolder
+  }
+
+  async loadDraft(name: string): Promise<string> {
+    if (!this.globalFileIo || !this.draftsFolder) {
+      throw 'oh fuck file io'
+    }
+
+    const details = {
+      rawPath: this.draftsFolder.getMyChildPath(name),
+      owner: this.jackalAddress,
+      isFolder: false
+    }
+    const download = await this.globalFileIo.downloadFile(details, { track: 0 }) as IFileDownloadHandler
+    return await download.receiveBacon().text()
+  }
+
   async saveDraft(name: string, source: string): Promise<void> {
     if (!this.globalFileIo || !this.draftsFolder) {
       throw 'oh fuck file io'
     }
+    await this.globalFileIo.shuffle()
 
     const tmpFile = new File([source], name)
     const handler = await FileUploadHandler.trackFile(tmpFile, this.draftsFolder.getMyPath())
@@ -105,18 +139,57 @@ class BStore implements IBStore {
       throw 'oh fuck file io'
     }
     const safeName = `${sanitizeName(name)}.html`
+
+    await this.globalFileIo.shuffle()
     const publishFile = new File([source], safeName)
-    const handler = await FileUploadHandler.trackFile(publishFile, this.draftsFolder.getMyPath())
+    const handler = await FileUploadHandler.trackFile(publishFile, this.publishedFolder.getMyPath())
     const upload: IUploadList = {}
     upload[safeName] = {
       data: null,
       exists: false,
       handler,
       key: safeName,
-      uploadable: await handler.getForUpload()
+      uploadable: await handler.getForPublicUpload()
     }
-    await this.globalFileIo.staggeredUploadFiles(upload, this.draftsFolder, { complete: 0, timer: 0 })
-    await this.fetchDraftsFolder()
+    await this.globalFileIo.staggeredUploadFiles(upload, this.publishedFolder, { complete: 0, timer: 0 })
+    await this.fetchPublishedFolder()
+
+    await this.compilePublications()
+  }
+
+  async compilePublications(): Promise<void> {
+    if (!this.globalFileIo || !this.publishedFolder || !this.workspaceFolder) {
+      throw 'oh fuck file io'
+    }
+
+    const folder = this.getPublishedFolder()
+    const final = {}
+    const children = folder.getChildFiles()
+    for (const name in children) {
+      const children = folder.getChildFiles()
+      const trunked = name.replace(/\.html$/, '')
+      final[trunked] = children[name].lastModified
+    }
+
+    await this.globalFileIo.shuffle()
+
+    const fileName = 'worx'
+    const worxFile = new File([JSON.stringify(final)], fileName)
+    const handler = await FileUploadHandler.trackFile(worxFile, this.workspaceFolder.getMyPath())
+    const upload: IUploadList = {}
+    upload[fileName] = {
+      data: null,
+      exists: false,
+      handler,
+      key: fileName,
+      uploadable: await handler.getForPublicUpload()
+    }
+    await this.globalFileIo.staggeredUploadFiles(upload, this.workspaceFolder, { complete: 0, timer: 0 })
+    await this.fetchWorkspaceFolder()
+  }
+
+  private async fetchWorkspaceFolder(): Promise<void> {
+    this.workspaceFolder = await this.globalFileIo.downloadFolder(['s', workspace].join('/'))
   }
 
   private async fetchDraftsFolder(): Promise<void> {
@@ -138,18 +211,20 @@ class BStore implements IBStore {
     if (!this.globalFileIo) {
       throw 'oh fuck file io'
     }
-    try {
-      const beacons = [
-        workspace,
-        `${workspace}/drafts`,
-        `${workspace}/published`
-      ]
-      await this.globalFileIo.verifyFoldersExist(beacons);
+    if (await this.globalFileIo.checkFolderIsFileTree(['s', workspace].join('/'))) {
+      await this.fetchWorkspaceFolder()
+      await this.fetchDraftsFolder()
+      await this.fetchPublishedFolder()
+    } else {
+      await this.globalFileIo.generateInitialDirs(null, [workspace])
+      await this.fetchWorkspaceFolder()
+      if (!this.workspaceFolder) {
+        throw 'oh fuck workspace folder'
+      }
+      await this.globalFileIo.createFolders(this.workspaceFolder, ['drafts', 'published'])
+
       await this.fetchDraftsFolder()
       await this.fetchPublishedFolder()
-    } catch (err: any) {
-      console.log(err);
-      console.log("AHHHHH");
     }
   }
 
diff --git a/src/views/DraftEditor.vue b/src/views/DraftEditor.vue
index 8df8244..8437725 100644
--- a/src/views/DraftEditor.vue
+++ b/src/views/DraftEditor.vue
@@ -1,18 +1,32 @@
 <template>
   <div class="template-container">
     <div class="connect-buttons">
-      <button @click="connectWallet" :disabled="walletInit">{{ walletInit ? "Connected" : "Connect Wallet" }}</button>
-      <button>Get Jackal</button>
+      <button @click="connectWallet"  v-if=!walletInit>Connect Wallet</button>
+      <router-link v-else :to="`/` + address">
+        <button >My Profile</button>
+      </router-link>
+      <a href="https://app.osmosis.zone/?to=JKL&from=OSMO" target="_blank">
+        <button>Get Jackal</button>
+      </a>
+
+
     </div>
-    <div class="main-container" v-if="walletInit">
-      <h1>Dashboard</h1>
-      <main>
+    <div class="main-container" >
+      <h1>Beacon Editor</h1>
+      <main v-if="walletInit">
         <section>
           <CKE id="editor" :editor="CustomCKEditor" v-model="editorData" :config="{}" />
         </section>
         <aside>
-<!--          // folders-->
-          <DraftDocuments :content="editorData"/>
+          <DraftDocuments :content="editorData" :setter="setEditorText"/>
+        </aside>
+      </main>
+      <main v-else>
+        <section>
+          <div class="editor-placeholder"></div>
+        </section>
+        <aside>
+          <div class="folder-placeholder"></div>
         </aside>
       </main>
     </div>
@@ -27,13 +41,24 @@
   import { ref } from 'vue'
 
   const CKE = CKEditor.component
-  const editorData = ref('<p>Content of the editor.</p>')
+  const editorData = ref('')
+  const address = ref(bStore.getJackalAddress())
 
-  const walletInit = ref(false)
+  const walletInit = ref(bStore.isWalletInit())
+  const setEditorText = function(s:string) {
+    editorData.value = s
+  }
 
   async function connectWallet() {
+    if (bStore.isWalletInit()) {
+      walletInit.value = bStore.isWalletInit()
+      address.value = bStore.getJackalAddress()
+      return
+    }
+
     await bStore.initWallet("keplr").catch(alert)
     walletInit.value = bStore.isWalletInit()
+    address.value = bStore.getJackalAddress()
   }
 
 </script>
@@ -77,7 +102,7 @@
   .ck-powered-by, .ck-powered-by-balloon {
     display: none !important;
   }
-  .ck-editor__editable {
+  .ck-editor__editable, .editor-placeholder {
     min-height: 65vh;
     max-height: 500px;
     overflow-y: scroll;
@@ -91,10 +116,25 @@
 
   .connect-buttons {
     display: flex;
-    gap: 20px;
+    gap: 10px;
     flex-direction: row;
     justify-content: flex-end;
     margin: 10px 10px 0px 0px;
   }
 
+
+  .editor-placeholder {
+    border-radius: 8px;
+    filter: blur(8px);
+    background-color: #dddddd;
+  }
+
+  .folder-placeholder {
+   border-radius: 8px;
+    filter: blur(8px);
+    width: 100%;
+    height: 100%;
+    background-color: #dddddd
+  }
+
 </style>
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index 9ca0c2b..c4a5314 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -1,10 +1,21 @@
 <template>
   <div class="template-container">
     <div class="main-container">
-      <h1>Dashboard</h1>
-      <main>
+      <div class="hero" v-if="!route.params.user?.length">
+        <div class="hero-info">
+          <h1 id="hero-header">Beacon</h1>
+          <span id="hero-text">Beacon is a fully decentralized publishing platform for writers, creators and anyone with something to say.</span>
+            <router-link id="cta-button" :to="'/editor'">
+              <button>Start Publishing</button>
+            </router-link>
+        </div>
+          <div id="hero-art"></div>
+      </div>
+      <main v-else>
         <section>
-          <div ref="shell" />
+          <div ref="shell" >
+            <span class="loader"></span>
+          </div>
         </section>
         <aside>
 <!--          // people here -->
@@ -24,7 +35,7 @@
   const route = useRoute()
 
   function requestData(owner: string, fileName: string): Promise<string> {
-    const url = `https://jackal.link/p/${owner}/newsboy/published/${fileName}`
+    const url = `https://jackal.link/p/${owner}/beacon/published/${fileName}.html`
     return fetch(url)
       .then(resp => resp.text())
       .catch(err => {
@@ -33,8 +44,9 @@
   }
 
   onMounted(async () => {
-    if (shell.value && route.params.user?.length && route.params.stub?.length) {
-      shell.value.innerHTML = await requestData(route.params.user[0], route.params.stub[0])
+    console.log(route.params)
+    if (shell.value && route.params.user?.length && route.params.slug?.length) {
+      shell.value.innerHTML = await requestData(route.params.user as string, route.params.slug[0]) || ''
     }
   })
 
@@ -47,4 +59,69 @@
     grid-template-rows: 1fr;
     padding: 0rem 4rem;
   }
+  .loader {
+    width: 48px;
+    height: 48px;
+    border: 5px solid #000;
+    border-bottom-color: transparent;
+    border-radius: 50%;
+    display: inline-block;
+    box-sizing: border-box;
+    animation: rotation 1s linear infinite;
+
+    position: absolute;
+    top: 50vh;
+    left: 50vw;
+    transform: translate(-50% -50%);
+  }
+
+  @keyframes rotation {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  #hero-art {
+    width: 100%;
+    height: 100%;
+    background: lightcoral;
+  }
+
+  button {
+    background-color: lightblue;
+  }
+
+
+  .hero {
+    height: 80vh;
+    //background-color: lightgray;
+    padding-top: 10vh;
+
+    width: 70vw;
+    margin: 0px auto;
+
+    display: flex;
+    flex-direction: row;
+  }
+
+  .hero-info {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+
+    text-align: left;
+
+    #cta-button {
+      margin-top: 20px;
+    }
+    h1 {
+      margin-top: 0px;
+    }
+
+
+  }
 </style>
diff --git a/src/views/UserPage.vue b/src/views/UserPage.vue
new file mode 100644
index 0000000..4970dcd
--- /dev/null
+++ b/src/views/UserPage.vue
@@ -0,0 +1,136 @@
+<template>
+  <div class="template-container">
+    <div class="main-container">
+      <main>
+        <section>
+          <div>
+            <span v-if="!worx.length" class="loader"></span>
+            <div v-else>
+              <h1>{{ address }}'s Worx</h1>
+              <ul class="work-list">
+                <li class="work-item" v-for="item in worx">
+                  <router-link :to="`/` + address + `/` + item">
+                    <div class="work-body">
+                      <h2>{{ item }}</h2>
+                    </div>
+                  </router-link>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </section>
+        <aside>
+<!--          // people here -->
+          <div ref="peoples" />
+        </aside>
+      </main>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { onMounted, Ref, ref } from 'vue'
+  import { useRoute } from 'vue-router'
+  import { bStore } from '@/store/main.ts'
+
+  const peoples = ref<HTMLElement | null>(null)
+  const route = useRoute()
+
+  const worx:Ref<string[]> = ref([])
+
+  const address = route.params.user
+
+  async function requestData(owner: string): Promise<any> {
+    const url = `https://jackal.link/p/${owner}/beacon/worx`
+    return fetch(url)
+      .then(resp => resp.json())
+      .catch(err => {
+        throw err
+      })
+  }
+
+  async function updateWorx(owner: string) {
+    console.log(owner)
+    const data = await requestData(owner).catch(alert)
+    console.log(data)
+    for (const k in data) {
+      worx.value.unshift(k)
+    }
+  }
+
+  onMounted(async () => {
+    console.log(route.params)
+    if (route.params.user?.length) {
+      await updateWorx(route.params.user as string)
+    }
+  })
+
+</script>
+
+<style lang="scss">
+  main {
+    display: grid;
+    grid-template-columns: auto 300px;
+    grid-template-rows: 1fr;
+    padding: 0rem 4rem;
+  }
+  .loader {
+    width: 48px;
+    height: 48px;
+    border: 5px solid #000;
+    border-bottom-color: transparent;
+    border-radius: 50%;
+    display: inline-block;
+    box-sizing: border-box;
+    animation: rotation 1s linear infinite;
+
+    position: absolute;
+    top: 50vh;
+    left: 50vw;
+    transform: translate(-50% -50%);
+  }
+
+  @keyframes rotation {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+
+  .work-list {
+    list-style: none;
+    padding-left: 0px;
+    margin: 0px;
+    display: flex;
+    flex-direction: column;
+    max-width: 30vw;
+    margin: 0px auto;
+  }
+
+  .work-item {
+  }
+
+  .work-body {
+    min-height: 200px;
+    color: black;
+
+    margin-top: 20px;
+
+    border-left: lightcoral solid 8px;
+    border-bottom: black solid 4px;
+    border-top: black solid 1px;
+    border-right: black solid 1px;
+
+  }
+
+  .work-body:hover {
+    background-color: #f0f0f0;
+    border-bottom: black solid 8px;
+  }
+
+
+
+</style>