diff --git a/www/html/about.html b/www/html/about.html
new file mode 100644
index 0000000..6c28d4f
--- /dev/null
+++ b/www/html/about.html
@@ -0,0 +1,25 @@
+<style>
+    .main .pane { border-color: transparent; line-height: 1.5; padding:0}
+    .fa-trash {color:red;}
+</style>
+<div class="border-round border">
+    <div align="center">
+        <h4>Vanderbilt University Medical Center</h4>
+    </div>
+    <p>
+
+    </p>
+</div>
+<br>
+<div class="border-round border">
+    <b>{{layout.header.title}}</B>, empowers patients with answers to questions they may have around kidney transplant care and other related conditions.
+
+    <div>
+            Click on the following:
+        <ul class="">
+            <div><i class="fa-solid fa-volume-high" style="margin-right:20px"></i> read response</div>
+            <div><i class="fa-solid fa-file" style="margin-right:20px"></i> supporting documents</div>
+            <div><i class="fa-solid fa-trash" style="margin-right:20px"></i> delete question</div>
+        </ul>
+    </div>
+</div>
\ No newline at end of file
diff --git a/www/html/alert.html b/www/html/alert.html
new file mode 100644
index 0000000..9edebe7
--- /dev/null
+++ b/www/html/alert.html
@@ -0,0 +1,32 @@
+<style>
+    .alert-pane {
+        display:grid;
+        grid-template-columns: 64px calc(100% - 64px);
+        gap:4px;
+        margin:4px;
+        width:500px;
+    }
+    .alert-controls {
+        display:grid;
+        grid-template-columns: 50% 50%; gap:4px;
+        align-items: center;
+        align-content: center;
+    }
+</style>
+
+<div class="alert-pane">
+    <div class="alert-icon">
+        
+    </div>
+    <div class="alert-message"></div>
+</div>
+
+<div class="alert-controls">
+    <div class="active">
+        <i class="fa-solid fa-times fa-2x"></i> Cancel
+    </div>
+    <div class="active">
+        <i class="fa-solid fa-check fa-2x"></i> continue
+    </div>
+
+</div>
diff --git a/www/html/documents.html b/www/html/documents.html
new file mode 100644
index 0000000..ae8095c
--- /dev/null
+++ b/www/html/documents.html
@@ -0,0 +1,38 @@
+<script>
+var papers  = {}
+papers.render = function (_data){
+    _index = 0
+    _data.documents.forEach(_item => {
+        css = (_index % 2 ==0)?'shadow': ''
+        var _html = (['<div class="cell ',css,'">',_item.name,'</div><div class="cell ',css,'" align="right">',_item.page,'</div>']).join('')
+        _html = $(_html)
+        $('.documents').append(_html)
+        _index += 1
+
+    });
+}
+$(document).ready(function(){
+    var _data = JSON.parse(sessionStorage['llm'])
+    papers.render(_data)
+})
+</script>
+<style>
+    .documents {
+        display: grid;
+        grid-template-columns: auto 64px;
+        gap:4px;
+        width:650px;
+        font-weight:lighter;
+        font-size:14px;
+        line-height: 1.5;
+        font-family: sans-serif;
+    }
+    
+    .cell {padding:4px;}
+    .shadow {background-color: #f3f3f3;}
+</style>
+<div>
+    <div class="documents">
+        <div class="cell bold border-bottom" >Documents</div><div class="cell bold border-bottom"  align="right">Page</div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/www/html/index.html b/www/html/index.html
new file mode 100644
index 0000000..c314d9f
--- /dev/null
+++ b/www/html/index.html
@@ -0,0 +1,174 @@
+<link href="www/html/_assets/themes/common.css" type="text/css" rel="stylesheet">
+<script src="www/html/_assets/js/assistant.js"></script>
+<script>
+    var chat = {get:{}}
+    // var _assistant = new Assistant()
+    chat.get.id = function (_index){
+        return (['.llm-pane-',_index,' .answer .llm-answer']).join('')
+    }
+    chat.read = function (_index){
+        var _id = (['.llm-pane-',_index,' .answer .llm-answer']).join('')
+        var text = $(_id).text()
+        // Assistant.speak(text)
+        //
+        // We need to submit the box to retrieve the audio file and transcript
+        //
+        _args = {title:'{{layout.header.title}} Transcript Reader',uri:'www/html/transcript.html',context:'{{system.context}}'}
+        uri = '{{system.context}}/api/medix/audio?token='+$('.chat').attr('token')+'&index='+_index
+        uri = uri.replace(/\/\//g,'/')
+        dialog.show(_args,()=>{
+            
+            $('.jxmodal .text').html(text)
+            $('audio').attr('src',uri)
+            $('audio')[0].play()
+            
+            // Assistant.speak(text)
+            // $('audio').hide()
+        
+        })
+        
+        // console.log(uri)
+        
+    }
+    chat.print = function (){
+        //
+        // if the log pane is empty then I should throw a message
+        if ($('.logs').children().length >  0){
+
+            // var _html = ['<div class="main">',$('head').html(), ,$('#header').html(), '<br>',$('.logs').html(),'</div></div]
+            style=["<style>",".menu {border:1px solid transparent;}",".content {grid-column:1 / span 2;}","</style>"]
+            _html = [$('head').html(),'<link href="www/html/_assets/themes/common.css" type="text/css" rel="stylesheet">',style.join(' '),'<div class="main {{system.theme}}"><div id="header" class="header">',$('#header').html(),'</div><div class="menu"></div><div class="content"><div class="logs">',$('.logs').html(),'</div></div></div>']
+            _html = _html.join('')
+            var _printer = window.open('','','width=500,height=500')
+            
+            _printer.document.open()
+            _printer.document.write(_html)
+
+        }else{
+            //
+            // Throw an error, no printing is needed
+            _args = {uri:'www/html/alert.html',title:'{{layout.header.title}} - Print Error',context:'{{system.context}}'}
+            _args.pointer = function (){$('.alert-controls').hide()}
+            dialog.show(_args)
+            
+            
+            setTimeout(function(){
+                $('.alert-icon').html('<i class="fa-solid fa-times fa-2x" style="color:maroon"></i>')
+                $('.alert-message').html('There are no conversations to be printed')
+                $('.alert-controls').hide()
+            },50)
+        }
+    }
+    chat.delete = function (_index){
+        var _id = '.llm-pane-'+_index
+        $(_id).remove()
+        if ($(_id).children().length == 0){
+            $('.logs').animate({'height':'42%'})
+        }
+    }
+    chat.support = function(_index){
+        // dialog.show({message:'Work in progress'})
+        var _div = $('.answer')[_index]
+        sessionStorage['llm'] = JSON.stringify(_div.data)
+        _args = {uri:'www/html/documents.html',title:'{{layout.header.title}} ',context:'{{system.context}}'}
+        dialog.show(_args)
+
+    }
+    chat.question = {}
+    chat.question.ask = function (){
+        
+        var height = $('.chat').height() -  $('.question-input').height() - 16 - 48
+        $('.logs').animate({'height':height})
+        var _index = $('.logs').children().length
+        var _q = $('textarea').val().trim()
+        var uri = '{{system.context}}/api/medix/answer'
+        //
+        // @TODO: perform validation here
+        if (_q.length > 0 ){
+            chat.question.render()
+            chat.answer.render()
+            token = $('.chat').attr('token')
+            var _data = {'question':_q,'index':_index}
+            if (token){
+                _data.token = token
+            }
+            
+            _data = JSON.stringify(_data)
+            
+            var http = HttpClient.instance()
+            http.setHeader('Content-Type','application/json')
+            http.setData(_data)
+            http.post(uri,function(x){
+                if(x.readyState == 4 && x.status == 200){
+                    var _data = JSON.parse(x.responseText)
+                    $('.chat').attr('token',_data.token)
+                    chat.answer.render(_data)
+                }
+            })
+        }else{
+            //
+            // alert the user something is wrong
+        }
+    }
+    chat.question.render = function (){
+        //
+        // showing a 
+        var _index = $('.logs').children().length
+        var _q = $('textarea').val().trim()
+        if (_q.length > 0){
+            //
+            // Add read, documents, delete buttons 
+            _delete = ['<div class="active" align="center" title="Delete Question" onclick="chat.delete(',_index,')"><i class="fa-solid fa-trash"></i></div>']
+            var _html = ['<div class="llm-pane-',_index,'"> <div class="border-round border question-frame"><div><i class="fa-solid fa-user fa-2x"></i></div><div class="question">',_q,'</div>',_delete.join(''),'</div> <div class="answer-frame">  </div></div>']
+            _html = _html.join('')
+
+            $('.logs').append(_html)
+            $('textarea').val('')
+        }
+    }
+    chat.answer  = {}
+    chat.answer.render = function (_answer){
+        var _index = $('.answer-frame').length - 1
+        if (_answer == null){
+            var _html = ['<div class="answer border-round border"><div class="answer-status"><i class="fa-solid fa-cog fa-spin fa-2x" style="color:gray"></i></div></div>']
+            _html =$( _html.join(''))
+
+            $($('.answer-frame')[_index]).append(_html)
+        }else{
+            _action = ['<div class="active" align="center" title="read out" onclick="chat.read(',_index,')"><i class="fa-solid fa-volume-high"></i></div>']
+            _action.push('<div class="active" align="center" title="supporting documents" onclick="chat.support(',_index,')"><i class="fa-solid fa-file"></i></div>')
+
+            var _div = $('.answer')[_index]
+
+            var _html = ['<div class="llm-answer">',_answer.answer,'</div><div class="border-left">',_action.join(''), '</div>']
+            
+            _html = $( _html.join(''))
+            $(_div).append(_html)
+            // $(_div).attr('data',_answer)
+            _div.data = _answer
+            
+            $('.answer-status').html('<i class="fa-solid fa-user-doctor fa-2x" style="color:#4682B4"></i>')
+        }
+        //
+        
+        
+    }
+    $(document).ready(()=>{
+        $('.logs').animate({'height':'42%'})
+    })
+</script>
+<div class="chat border-round border">
+    <div align="right" style="background-color: #f3f3f3;" class="border-round-top-left border-round-top-right">
+        <div class="active" onclick="chat.print()" title="Print conversation" style="justify-self: right; width:100px" align="center"><i class="fa-solid fa-print"></i></div>
+    </div>
+  <div class="logs"></div>
+  <div class="question-input border-top">
+    <textarea class="question" placeholder="[Enter your question]"></textarea>
+    <div class="active" onclick="chat.question.ask()">
+        <div align="center" style="display:grid; grid-template-rows:48px auto; gap:4px; align-items:center">
+            <div><i class="fa-solid fa-paper-plane fa-2x"></i></div>
+            <div class="small">Submit</div>
+        </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/www/html/report.html b/www/html/report.html
new file mode 100644
index 0000000..90b95b9
--- /dev/null
+++ b/www/html/report.html
@@ -0,0 +1,14 @@
+<div class="main {{system.theme}}">
+    <div id="header" class="header" >
+    
+        <div class="icon">
+            <img src="{{system.icon}}">
+        </div>
+            
+        <div>
+            <div class="title">{{layout.header.title}}</div>
+            <div class="subtitle">{{layout.header.subtitle}}</div>
+        </div>
+    
+    </div>
+</div>
\ No newline at end of file