diff --git a/lnbits/extensions/copilot/migrations.py b/lnbits/extensions/copilot/migrations.py
index bb282837..2ef759fe 100644
--- a/lnbits/extensions/copilot/migrations.py
+++ b/lnbits/extensions/copilot/migrations.py
@@ -22,6 +22,8 @@ async def m001_initial(db):
             show_message INTEGER,
             show_ack INTEGER,
             amount_made INTEGER,
+            fullscreen_cam INTEGER,
+            iframe_url TEXT,
             timestamp TIMESTAMP NOT NULL DEFAULT (strftime('%s', 'now'))
         );
     """
diff --git a/lnbits/extensions/copilot/models.py b/lnbits/extensions/copilot/models.py
index e2b58aba..7074d703 100644
--- a/lnbits/extensions/copilot/models.py
+++ b/lnbits/extensions/copilot/models.py
@@ -16,12 +16,13 @@ class Copilots(NamedTuple):
     animation1webhook: str
     animation2webhook: str
     animation3webhook: str
-    show_message: bool
-    amount: int
     lnurl_title: str
     show_message: int
     show_ack: int
     amount_made: int
+    timestamp: int
+    fullscreen_cam: int
+    iframe_url: str
 
     @classmethod
     def from_row(cls, row: Row) -> "Copilots":
diff --git a/lnbits/extensions/copilot/static/confetti.gif b/lnbits/extensions/copilot/static/confetti.gif
new file mode 100644
index 00000000..a3fec971
Binary files /dev/null and b/lnbits/extensions/copilot/static/confetti.gif differ
diff --git a/lnbits/extensions/copilot/static/face.gif b/lnbits/extensions/copilot/static/face.gif
new file mode 100644
index 00000000..3e70d779
Binary files /dev/null and b/lnbits/extensions/copilot/static/face.gif differ
diff --git a/lnbits/extensions/copilot/static/rocket.gif b/lnbits/extensions/copilot/static/rocket.gif
new file mode 100644
index 00000000..6f19597d
Binary files /dev/null and b/lnbits/extensions/copilot/static/rocket.gif differ
diff --git a/lnbits/extensions/copilot/templates/copilot/index.html b/lnbits/extensions/copilot/templates/copilot/index.html
index 581ce2ec..d055e052 100644
--- a/lnbits/extensions/copilot/templates/copilot/index.html
+++ b/lnbits/extensions/copilot/templates/copilot/index.html
@@ -72,13 +72,27 @@
                   unelevated
                   dense
                   size="xs"
-                  icon="link"
+                  icon="apps"
                   :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
                   type="a"
-                  :href="props.row.displayUrl"
+                  :href="props.row.displayPanelUrl"
                   target="_blank"
                 >
-                  <q-tooltip> Payment link </q-tooltip>
+                  <q-tooltip> Panel </q-tooltip>
+                </q-btn>
+              </q-td>
+              <q-td auto-width>
+                <q-btn
+                  unelevated
+                  dense
+                  size="xs"
+                  icon="face"
+                  :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
+                  type="a"
+                  :href="props.row.displayComposeUrl"
+                  target="_blank"
+                >
+                  <q-tooltip> Compose window </q-tooltip>
                 </q-btn>
               </q-td>
               <q-td auto-width>
@@ -305,7 +319,7 @@
             unelevated
             color="deep-purple"
             :disable="
-                formDialogCopilot.data.amount == null"
+                formDialogCopilot.data.title == ''"
             type="submit"
             >Create Copilot</q-btn
           >
@@ -336,7 +350,8 @@
         'HH:mm:ss'
       )
     }
-    obj.displayUrl = ['/copilot/', obj.id].join('')
+    obj.displayComposeUrl = ['/copilot/cp/', obj.id].join('')
+    obj.displayPanelUrl = ['/copilot/', obj.id].join('')
     return obj
   }
 
@@ -377,58 +392,10 @@
               field: 'title'
             },
             {
-              name: 'animation_1',
+              name: 'amount_made',
               align: 'left',
-              label: 'animation 1',
-              field: 'animation_1'
-            },
-            {
-              name: 'animation_2',
-              align: 'left',
-              label: 'animation 2',
-              field: 'animation_2'
-            },
-            {
-              name: 'animation_3',
-              align: 'left',
-              label: 'animation 3',
-              field: 'animation_3'
-            },
-            {
-              name: 'animation_1_threshold',
-              align: 'left',
-              label: '1 threshold',
-              field: 'animation_1_threshold'
-            },
-            {
-              name: 'animation_2_threshold',
-              align: 'left',
-              label: '2 threshold',
-              field: 'animation_2_threshold'
-            },
-            {
-              name: 'animation_3_threshold',
-              align: 'left',
-              label: '3 threshold',
-              field: 'animation_3_threshold'
-            },
-            {
-              name: 'lnurl_title',
-              align: 'left',
-              label: 'lnurl message',
-              field: 'lnurl_title'
-            },
-            {
-              name: 'amount',
-              align: 'left',
-              label: 'amount to pay',
-              field: 'amount'
-            },
-            {
-              name: 'show_message',
-              align: 'left',
-              label: 'show comments?',
-              field: 'show_message'
+              label: 'amount made',
+              field: 'amount_made'
             }
           ],
           pagination: {
@@ -444,18 +411,44 @@
           data: {
             show_message: false,
             show_ack: true,
-            description: '',
-            time: null,
-            amount: null
+            title: '',
+            animation1threshold: 0,
+            animation2threshold: 0,
+            animation3threshold: 0,
+            animation1webhook: '',
+            animation2webhook: '',
+            animation3webhook: ''
           }
         },
         qrCodeDialog: {
           show: false,
           data: null
-        }
+        },
+        options: ['moon_rocket', 'confetti', 'roller_coaster']
       }
     },
     methods: {
+      cancelCopilot: function (data) {
+        var self = this
+        self.formDialogCopilot.show = false
+      },
+      closeFormDialog: function () {
+        this.formDialog.data = {
+          is_unique: false
+        }
+      },
+      sendFormDataCopilot: function () {
+        var self = this
+        var wallet = this.g.user.wallets[0].adminkey
+        var data = this.formDialogCopilot.data
+        console.log(data)
+        data.animation1threshold = parseInt(data.animation1threshold)
+        data.animation1threshold = parseInt(data.animation2threshold)
+        data.animation1threshold = parseInt(data.animation3threshold)
+
+        this.createCopilot(wallet, data)
+      },
+
       createCopilot: function (wallet, data) {
         var self = this
 
@@ -471,7 +464,6 @@
       },
       getCopilots: function () {
         var self = this
-        var getAddressBalance = this.getAddressBalance
         LNbits.api
           .request(
             'GET',
@@ -507,12 +499,16 @@
               })
           })
       },
-      exportchargeCSV: function () {
+      exportcopilotCSV: function () {
         var self = this
         LNbits.utils.exportCSV(self.CopilotsTable.columns, this.CopilotLinks)
       }
     },
-    created: function () {}
+    created: function () {
+      var self = this
+      var getCopilots = this.getCopilots
+      getCopilots()
+    }
   })
 </script>
 {% endblock %}
diff --git a/lnbits/extensions/copilot/templates/copilot/panel.html b/lnbits/extensions/copilot/templates/copilot/panel.html
index 7d96e8d8..6a7ed069 100644
--- a/lnbits/extensions/copilot/templates/copilot/panel.html
+++ b/lnbits/extensions/copilot/templates/copilot/panel.html
@@ -1,14 +1,18 @@
 {% extends "public.html" %} {% block page %}
-<div class="q-pa-sm theCard">
+<div class="q-pa-sm" style="width: 400px; margin: 10px auto">
   <q-card class="my-card">
     <div class="column">
       <center>
-        <div class="col theHeading">{{ copilot.title }}</div>
+        <div class="col" style="margin: 15px; font-size: 25px">
+          {{ copilot.title }}
+        </div>
       </center>
       <div class="col">say what</div>
       <div class="col" style="margin: 2px 15px; max-height: 100px">
         <center>
-          <q-btn flat dense outline>Open compose window</q-btn>
+          <q-btn flat dense outline @click="openCompose"
+            >Open compose window</q-btn
+          >
         </center>
       </div>
       <q-separator></q-separator>
@@ -37,14 +41,16 @@
         counter: 1,
         newTimeLeft: '',
         lnbtc: true,
-        onbtc: false,
-        charge_time_elapsed: '{{charge.time_elapsed}}',
-        charge_amount: '{{charge.amount}}',
-        charge_balance: '{{charge.balance}}',
-        charge_paid: '{{charge.paid}}'
+        onbtc: false
+      }
+    },
+    methods: {
+      openCompose: function () {
+        let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,width=900,height=500,left=200,top=200`
+
+        open('../copilot/cp/{{ copilot.id }}', 'test', params)
       }
     },
-    methods: {},
     created: function () {}
   })
 </script>
diff --git a/lnbits/extensions/copilot/views.py b/lnbits/extensions/copilot/views.py
index 7d6408b0..e1bb4c54 100644
--- a/lnbits/extensions/copilot/views.py
+++ b/lnbits/extensions/copilot/views.py
@@ -14,9 +14,16 @@ async def index():
     return await render_template("copilot/index.html", user=g.user)
 
 
-@copilot_ext.route("/<copilot_id>")
-async def display(copilot_id):
+@copilot_ext.route("/cp/<copilot_id>")
+async def compose(copilot_id):
     copilot = await get_copilot(copilot_id) or abort(
-        HTTPStatus.NOT_FOUND, "Charge link does not exist."
+        HTTPStatus.NOT_FOUND, "Copilot link does not exist."
     )
-    return await render_template("copilot/panel.html", copilot=copilot)
+    return await render_template("copilot/compose.html", copilot=copilot)
+
+@copilot_ext.route("/<copilot_id>")
+async def panel(copilot_id):
+    copilot = await get_copilot(copilot_id) or abort(
+        HTTPStatus.NOT_FOUND, "Copilot link does not exist."
+    )
+    return await render_template("copilot/panel.html", copilot=copilot)
\ No newline at end of file
diff --git a/lnbits/extensions/copilot/views_api.py b/lnbits/extensions/copilot/views_api.py
index 6d595ca2..e345e94f 100644
--- a/lnbits/extensions/copilot/views_api.py
+++ b/lnbits/extensions/copilot/views_api.py
@@ -24,15 +24,15 @@ from .crud import (
 @api_validate_post_request(
     schema={
         "title": {"type": "string", "empty": False, "required": True},
-        "animation1": {"type": "string"},
-        "animation2": {"type": "string"},
-        "animation3": {"type": "string"},
-        "animation1threshold": {"type": "integer"},
-        "animation2threshold": {"type": "integer"},
-        "animation3threshold": {"type": "integer"},
-        "animation1webhook": {"type": "string"},
-        "animation2webhook": {"type": "string"},
-        "animation3webhook": {"type": "string"},
+        "animation1": {"type": "string", "required": False},
+        "animation2": {"type": "string", "required": False},
+        "animation3": {"type": "string", "required": False},
+        "animation1threshold": {"type": "integer", "required": False},
+        "animation2threshold": {"type": "integer", "required": False},
+        "animation3threshold": {"type": "integer", "required": False},
+        "animation1webhook": {"type": "string", "required": False},
+        "animation2webhook": {"type": "string", "required": False},
+        "animation3webhook": {"type": "string", "required": False},
         "lnurl_title": {"type": "string", "empty": False, "required": True},
         "show_message": {"type": "integer", "empty": False, "required": True},
         "show_ack": {"type": "integer", "empty": False, "required": True},
@@ -49,20 +49,21 @@ async def api_copilot_create_or_update(copilot_id=None):
 
 @copilot_ext.route("/api/v1/copilot", methods=["GET"])
 @api_check_wallet_key("invoice")
-async def api_copilots_retrieve(copilot_id):
-    copilots = await get_copilots(user=g.wallet.user)
-
-    if not copilots:
-        return jsonify({"message": "copilot does not exist"}), HTTPStatus.NOT_FOUND
-
-    return (
-        jsonify(
-            {
-                copilots._asdict()
-            }
-        ),
-        HTTPStatus.OK,
-    )
+async def api_copilots_retrieve():
+    try:
+        return (
+            jsonify(
+                [
+                    {
+                        **copilot._asdict()
+                    }
+                    for copilot in await get_copilots(g.wallet.user)
+                ]
+            ),
+            HTTPStatus.OK,
+        )
+    except:
+        return ""
 
 @copilot_ext.route("/api/v1/copilot/<copilot_id>", methods=["GET"])
 @api_check_wallet_key("invoice")