diff --git a/src/App.vue b/src/App.vue
index 38442ee..3886371 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,9 @@
 <template>
-  <router-view />
+  <router-view class="body-gradient" />
 </template>
 
 <script>
-import { defineComponent } from 'vue'
+import {defineComponent} from 'vue'
 
 export default defineComponent({
   name: 'App'
diff --git a/src/assets/CRMDashboard.png b/src/assets/CRMDashboard.png
deleted file mode 100644
index f6b488d..0000000
Binary files a/src/assets/CRMDashboard.png and /dev/null differ
diff --git a/src/assets/Dashboard.png b/src/assets/Dashboard.png
deleted file mode 100644
index 0e67741..0000000
Binary files a/src/assets/Dashboard.png and /dev/null differ
diff --git a/src/assets/Lock-1.png b/src/assets/Lock-1.png
deleted file mode 100644
index 8ea0f2b..0000000
Binary files a/src/assets/Lock-1.png and /dev/null differ
diff --git a/src/assets/Lock-2.png b/src/assets/Lock-2.png
deleted file mode 100644
index d4ba7d0..0000000
Binary files a/src/assets/Lock-2.png and /dev/null differ
diff --git a/src/assets/Login.png b/src/assets/Login.png
deleted file mode 100644
index a8b14d8..0000000
Binary files a/src/assets/Login.png and /dev/null differ
diff --git a/src/assets/Mail.png b/src/assets/Mail.png
deleted file mode 100644
index 93a9d9b..0000000
Binary files a/src/assets/Mail.png and /dev/null differ
diff --git a/src/assets/Pricing.png b/src/assets/Pricing.png
deleted file mode 100644
index fdb046e..0000000
Binary files a/src/assets/Pricing.png and /dev/null differ
diff --git a/src/assets/action.jpg b/src/assets/action.jpg
deleted file mode 100644
index e1ccb59..0000000
Binary files a/src/assets/action.jpg and /dev/null differ
diff --git a/src/assets/background.jpg b/src/assets/background.jpg
deleted file mode 100644
index 4a865a9..0000000
Binary files a/src/assets/background.jpg and /dev/null differ
diff --git a/src/assets/bag.jpg b/src/assets/bag.jpg
deleted file mode 100644
index 31275c7..0000000
Binary files a/src/assets/bag.jpg and /dev/null differ
diff --git a/src/assets/coding.jpeg b/src/assets/coding.jpeg
deleted file mode 100644
index 404e19c..0000000
Binary files a/src/assets/coding.jpeg and /dev/null differ
diff --git a/src/assets/jam.jpg b/src/assets/jam.jpg
deleted file mode 100644
index e15e38d..0000000
Binary files a/src/assets/jam.jpg and /dev/null differ
diff --git a/src/assets/laptop.jpg b/src/assets/laptop.jpg
deleted file mode 100644
index a422f9e..0000000
Binary files a/src/assets/laptop.jpg and /dev/null differ
diff --git a/src/assets/lookgood.jpeg b/src/assets/lookgood.jpeg
deleted file mode 100644
index 467a3e9..0000000
Binary files a/src/assets/lookgood.jpeg and /dev/null differ
diff --git a/src/assets/products/c-d-x-PDX_a_82obo-unsplash.jpg b/src/assets/products/c-d-x-PDX_a_82obo-unsplash.jpg
deleted file mode 100644
index 862642f..0000000
Binary files a/src/assets/products/c-d-x-PDX_a_82obo-unsplash.jpg and /dev/null differ
diff --git a/src/assets/products/frankie-valentine-VghbBAYqUJ0-unsplash.jpg b/src/assets/products/frankie-valentine-VghbBAYqUJ0-unsplash.jpg
deleted file mode 100644
index 9e19bb9..0000000
Binary files a/src/assets/products/frankie-valentine-VghbBAYqUJ0-unsplash.jpg and /dev/null differ
diff --git a/src/assets/products/giorgio-trovato-K62u25Jk6vo-unsplash.jpg b/src/assets/products/giorgio-trovato-K62u25Jk6vo-unsplash.jpg
deleted file mode 100644
index ab9411d..0000000
Binary files a/src/assets/products/giorgio-trovato-K62u25Jk6vo-unsplash.jpg and /dev/null differ
diff --git a/src/assets/products/jeroen-den-otter-iKmm0okt6Q4-unsplash.jpg b/src/assets/products/jeroen-den-otter-iKmm0okt6Q4-unsplash.jpg
deleted file mode 100644
index 4dd568d..0000000
Binary files a/src/assets/products/jeroen-den-otter-iKmm0okt6Q4-unsplash.jpg and /dev/null differ
diff --git a/src/assets/products/john-fornander-m2WpKnlLcEc-unsplash .jpg b/src/assets/products/john-fornander-m2WpKnlLcEc-unsplash .jpg
deleted file mode 100644
index bd22004..0000000
Binary files a/src/assets/products/john-fornander-m2WpKnlLcEc-unsplash .jpg and /dev/null differ
diff --git a/src/assets/products/marek-szturc-0iIV1goIodE-unsplash.jpg b/src/assets/products/marek-szturc-0iIV1goIodE-unsplash.jpg
deleted file mode 100644
index 1447f75..0000000
Binary files a/src/assets/products/marek-szturc-0iIV1goIodE-unsplash.jpg and /dev/null differ
diff --git a/src/assets/quasar-logo-full.svg b/src/assets/quasar-logo-full.svg
deleted file mode 100644
index 281d072..0000000
--- a/src/assets/quasar-logo-full.svg
+++ /dev/null
@@ -1,191 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="67.407623mm"
-   height="62.908276mm"
-   viewBox="0 0 238.84591 222.90334"
-   id="svg3570"
-   version="1.1"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="quasar-logo-full.svg">
-  <defs
-     id="defs3572" />
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="1.979899"
-     inkscape:cx="-39.753589"
-     inkscape:cy="27.706388"
-     inkscape:document-units="px"
-     inkscape:current-layer="g4895-4-4"
-     showgrid="false"
-     fit-margin-top="0"
-     fit-margin-left="0"
-     fit-margin-right="0"
-     fit-margin-bottom="0"
-     inkscape:window-width="1920"
-     inkscape:window-height="1056"
-     inkscape:window-x="0"
-     inkscape:window-y="24"
-     inkscape:window-maximized="1" />
-  <metadata
-     id="metadata3575">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(-277.71988,-312.33911)">
-    <g
-       id="g4895-4-4"
-       transform="translate(1419.0442,398.9018)">
-      <g
-         transform="translate(-29.620665,-4)"
-         id="g4579-2-20">
-        <g
-           id="g4445-2-0"
-           transform="translate(12.499948,7.809312)">
-          <g
-             inkscape:export-ydpi="44.860481"
-             inkscape:export-xdpi="44.860481"
-             inkscape:export-filename="/home/emanuele/Desktop/logo1.png"
-             transform="translate(-712.85583,-503.26814)"
-             id="g4561-6-7-0">
-            <g
-               transform="translate(16.233481,0)"
-               style="font-style:normal;font-weight:normal;font-size:50.25774765px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#263238;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-               id="flowRoot4513-6-6-08">
-              <path
-                 d="m -402.73125,631.46823 q -0.6125,0.0438 -1.3125,0.0875 -0.65625,0 -1.4,0 l -9.31875,0 q -12.81875,0 -12.81875,-8.44375 l 0,-13.475 q 0,-8.26875 12.6,-8.26875 l 9.75625,0 q 12.6,0 12.6,8.26875 l 0,13.475 q 0,5.03125 -4.4625,7.04375 l 3.10625,2.14375 q 1.35625,0.83125 1.35625,1.70625 0,0.875 -0.7,1.3125 -0.65625,0.48125 -1.88125,0.48125 -0.30625,0 -0.7875,-0.13125 -0.4375,-0.0875 -1.05,-0.48125 l -5.6875,-3.71875 z m 5.38125,-21.74375 q 0,-4.76875 -7.9625,-4.76875 l -9.58125,0 q -7.9625,0 -7.9625,4.76875 l 0,13.3875 q 0,4.94375 8.3125,4.94375 l 8.88125,0 q 8.3125,0 8.3125,-4.94375 l 0,-13.3875 z"
-                 style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:43.75px;font-family:'Neuropol X';-inkscape-font-specification:'Neuropol X';text-align:start;letter-spacing:5px;word-spacing:0px;text-anchor:start;fill:#263238;fill-opacity:1"
-                 id="path3428" />
-              <path
-                 d="m -368.0585,631.64323 q -11.2875,0 -11.2875,-6.9125 l 0,-12.73125 q 0,-1.8375 2.31875,-1.8375 2.31875,0 2.31875,1.8375 l 0,12.775 q 0,3.325 6.475,3.325 l 8.3125,0 q 6.475,0 6.475,-3.325 l 0,-12.775 q 0,-1.8375 2.31875,-1.8375 2.3625,0 2.3625,1.8375 l 0,12.73125 q 0,6.9125 -11.2875,6.9125 l -8.00625,0 z"
-                 style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:43.75px;font-family:'Neuropol X';-inkscape-font-specification:'Neuropol X';text-align:start;letter-spacing:5px;word-spacing:0px;text-anchor:start;fill:#263238;fill-opacity:1"
-                 id="path3430" />
-              <path
-                 d="m -327.2833,631.64323 q -9.3625,0 -9.3625,-5.81875 l 0,-2.49375 q 0,-5.775 9.3625,-5.775 l 18.59375,0 0,-0.65625 q 0,-3.0625 -5.38125,-3.0625 l -6.16875,0 q -2.1875,0 -2.1875,-1.70625 0,-1.75 2.1875,-1.75 l 6.16875,0 q 9.93125,0 9.93125,6.51875 l 0,8.575 q 0,6.16875 -9.5375,6.16875 l -13.60625,0 z m 13.34375,-3.4125 q 5.25,0 5.25,-2.8875 l 0,-4.76875 -18.24375,0 q -5.11875,0 -5.11875,2.66875 l 0,2.275 q 0,2.7125 5.11875,2.7125 l 12.99375,0 z"
-                 style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:43.75px;font-family:'Neuropol X';-inkscape-font-specification:'Neuropol X';text-align:start;letter-spacing:5px;word-spacing:0px;text-anchor:start;fill:#263238;fill-opacity:1"
-                 id="path3432" />
-              <path
-                 d="m -262.77031,626.74323 q 0,4.9 -9.975,4.9 l -17.0625,0 q -2.1875,0 -2.1875,-1.70625 0,-1.70625 2.1875,-1.70625 l 17.0625,0 q 5.38125,0 5.38125,-1.4875 l 0,-2.45 q 0,-1.4875 -5.38125,-1.4875 l -9.0125,0 q -9.975,0 -9.975,-4.76875 l 0,-2.05625 q 0,-5.6 10.28125,-5.6 l 5.99375,0 q 2.23125,0 2.23125,1.75 0,0.875 -0.6125,1.3125 -0.56875,0.39375 -1.61875,0.39375 l -5.99375,0 q -5.73125,0 -5.73125,2.14375 l 0,1.925 q 0,1.79375 5.6875,1.79375 l 9.0125,0 q 9.7125,0 9.7125,4.4625 l 0,2.58125 z"
-                 style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:43.75px;font-family:'Neuropol X';-inkscape-font-specification:'Neuropol X';text-align:start;letter-spacing:5px;word-spacing:0px;text-anchor:start;fill:#263238;fill-opacity:1"
-                 id="path3434" />
-              <path
-                 d="m -241.91709,631.64323 q -9.3625,0 -9.3625,-5.81875 l 0,-2.49375 q 0,-5.775 9.3625,-5.775 l 18.59375,0 0,-0.65625 q 0,-3.0625 -5.38125,-3.0625 l -6.16875,0 q -2.1875,0 -2.1875,-1.70625 0,-1.75 2.1875,-1.75 l 6.16875,0 q 9.93125,0 9.93125,6.51875 l 0,8.575 q 0,6.16875 -9.5375,6.16875 l -13.60625,0 z m 13.34375,-3.4125 q 5.25,0 5.25,-2.8875 l 0,-4.76875 -18.24375,0 q -5.11875,0 -5.11875,2.66875 l 0,2.275 q 0,2.7125 5.11875,2.7125 l 12.99375,0 z"
-                 style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:43.75px;font-family:'Neuropol X';-inkscape-font-specification:'Neuropol X';text-align:start;letter-spacing:5px;word-spacing:0px;text-anchor:start;fill:#263238;fill-opacity:1"
-                 id="path3436" />
-              <path
-                 d="m -205.62285,617.33698 q 0,-6.95625 11.2875,-6.95625 l 3.36875,0 q 2.23125,0 2.23125,1.79375 0,1.79375 -2.23125,1.79375 l -3.54375,0 q -6.475,0 -6.475,3.28125 l 0,12.775 q 0,1.8375 -2.31875,1.8375 -2.31875,0 -2.31875,-1.8375 l 0,-12.6875 z"
-                 style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:43.75px;font-family:'Neuropol X';-inkscape-font-specification:'Neuropol X';text-align:start;letter-spacing:5px;word-spacing:0px;text-anchor:start;fill:#263238;fill-opacity:1"
-                 id="path3438" />
-            </g>
-          </g>
-        </g>
-      </g>
-      <g
-         id="g5443-0-1-5-1-9"
-         transform="matrix(0.55595317,0,0,0.55595317,-521.93484,-328.66104)"
-         inkscape:export-filename="/home/emanuele/Desktop/logo1.png"
-         inkscape:export-xdpi="44.860481"
-         inkscape:export-ydpi="44.860481">
-        <g
-           inkscape:export-ydpi="3.4165223"
-           inkscape:export-xdpi="3.4165223"
-           transform="matrix(0.09527033,0,0,0.09527033,-1695.2716,706.62921)"
-           id="g8856-6-1-1-9-0-1-9">
-          <circle
-             r="1485"
-             cy="-1361.2571"
-             cx="8317.3574"
-             id="circle8858-1-3-7-6-5-3-0"
-             style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:50;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-             inkscape:export-xdpi="10.031387"
-             inkscape:export-ydpi="10.031387" />
-          <path
-             inkscape:export-ydpi="10.031387"
-             inkscape:export-xdpi="10.031387"
-             style="opacity:1;fill:#263238;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-             d="m 8560.3823,-1361.3029 a 242.947,242.947 0 0 1 -242.947,242.948 242.947,242.947 0 0 1 -242.947,-242.948 242.947,242.947 0 0 1 242.947,-242.946 242.947,242.947 0 0 1 242.947,242.946 z"
-             id="path8860-5-4-8-2-9-0-9"
-             inkscape:connector-curvature="0" />
-          <path
-             id="path8862-5-5-9-1-3-6-3"
-             d="m 9395.8755,-1984.028 a 1245.372,1245.372 0 0 0 -190.8415,-249.4971 l -280.8618,162.1556 c -87.542,-74.7796 -187.0349,-132.0588 -293.2407,-169.9527 -95.8868,97.1766 -172.0602,205.7604 -226.9672,323.8487 312.6411,-21.2772 635.5313,91.8725 935.2898,326.0721 l 176.7612,-102.0532 a 1245.372,1245.372 0 0 0 -120.1398,-290.5734 z"
-             clip-path="none"
-             mask="none"
-             style="fill:#1976d2;fill-opacity:1"
-             inkscape:connector-curvature="0"
-             inkscape:transform-center-x="-514.04855"
-             inkscape:transform-center-y="-444.04649" />
-          <path
-             inkscape:transform-center-y="265.80217"
-             inkscape:transform-center-x="-689.63727"
-             inkscape:connector-curvature="0"
-             style="fill:#42a5f5;fill-opacity:1"
-             mask="none"
-             clip-path="none"
-             d="m 9395.9474,-738.70387 a 1245.372,1245.372 0 0 0 120.6501,-290.02213 l -280.8618,-162.1557 c 20.99,-113.2034 20.8488,-228.0063 0.563,-338.9302 -132.1008,-34.4521 -264.2238,-46.1283 -393.9448,-34.635 174.7471,260.1165 238.2017,596.32248 185.2582,973.02076 l 176.7612,102.05309 a 1245.372,1245.372 0 0 0 191.5741,-249.33082 z"
-             id="path8864-4-8-1-2-4-4-4" />
-          <path
-             id="path8866-7-5-5-0-6-4-7"
-             d="m 8317.501,-115.97954 a 1245.372,1245.372 0 0 0 311.4916,-40.52501 l 0,-324.31131 c 108.5321,-38.42382 207.8837,-95.94755 293.8037,-168.97752 -36.214,-131.6287 -92.1636,-251.88868 -166.9776,-358.48372 -137.894,281.39369 -397.3296,504.44998 -750.0316,646.9487 l 0,204.10623 a 1245.372,1245.372 0 0 0 311.7139,41.24263 z"
-             clip-path="none"
-             mask="none"
-             style="fill:#1976d2;fill-opacity:1"
-             inkscape:connector-curvature="0"
-             inkscape:transform-center-x="-117.49007"
-             inkscape:transform-center-y="639.34029" />
-          <path
-             inkscape:transform-center-y="444.04652"
-             inkscape:transform-center-x="514.04857"
-             inkscape:connector-curvature="0"
-             style="fill:#42a5f5;fill-opacity:1"
-             mask="none"
-             clip-path="none"
-             d="m 7238.9827,-738.57936 a 1245.372,1245.372 0 0 0 190.8415,249.49714 l 280.8618,-162.15566 c 87.5421,74.77965 187.0349,132.05879 293.2407,169.95271 95.8868,-97.17659 172.0602,-205.76036 226.9672,-323.8487 -312.6411,21.27714 -635.5313,-91.87254 -935.2898,-326.07203 l -176.7612,102.0531 a 1245.372,1245.372 0 0 0 120.1398,290.57344 z"
-             id="path8868-6-7-4-7-2-7-3" />
-          <path
-             id="path8870-5-3-9-3-5-5-1"
-             d="m 7238.9108,-1983.9035 a 1245.372,1245.372 0 0 0 -120.6501,290.0221 l 280.8618,162.1557 c -20.99,113.2035 -20.8488,228.0063 -0.563,338.9302 132.1008,34.4521 264.2238,46.1283 393.9448,34.635 -174.7471,-260.1165 -238.2017,-596.3225 -185.2582,-973.0207 l -176.7612,-102.0532 a 1245.372,1245.372 0 0 0 -191.5741,249.3309 z"
-             clip-path="none"
-             mask="none"
-             style="fill:#1976d2;fill-opacity:1"
-             inkscape:connector-curvature="0"
-             inkscape:transform-center-x="689.63729"
-             inkscape:transform-center-y="-265.80221" />
-          <path
-             inkscape:transform-center-y="-639.34032"
-             inkscape:transform-center-x="117.49005"
-             inkscape:connector-curvature="0"
-             style="fill:#42a5f5;fill-opacity:1"
-             mask="none"
-             clip-path="none"
-             d="m 8317.3572,-2606.6279 a 1245.372,1245.372 0 0 0 -311.4915,40.525 l -1e-4,324.3113 c -108.5321,38.4239 -207.8837,95.9476 -293.8037,168.9776 36.214,131.6287 92.1637,251.8886 166.9776,358.4837 137.894,-281.3937 397.3296,-504.45 750.0316,-646.9487 l 1e-4,-204.1063 a 1245.372,1245.372 0 0 0 -311.714,-41.2426 z"
-             id="path8872-6-3-2-1-3-3-7" />
-        </g>
-      </g>
-    </g>
-  </g>
-</svg>
diff --git a/src/assets/sad.svg b/src/assets/sad.svg
deleted file mode 100644
index 628136f..0000000
--- a/src/assets/sad.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166.7 168.9" width="166.7" height="168.9" isolation="isolate"><defs><clipPath><rect width="166.7" height="168.9"/></clipPath></defs><g clip-path="url(#_clipPath_PPPiEcORhRSYwopEENnaRFzzeYSXmwtt)"><path d="M65.6 135.2C65.6 137.1 64.1 138.6 62.2 138.6 60.4 138.6 58.9 137.1 58.9 135.2 58.9 130.7 61.9 126.7 66.8 124 71.1 121.6 77 120.1 83.3 120.1 89.7 120.1 95.6 121.6 99.9 124 104.7 126.7 107.8 130.7 107.8 135.2 107.8 137.1 106.3 138.6 104.4 138.6 102.6 138.6 101.1 137.1 101.1 135.2 101.1 133.3 99.4 131.3 96.6 129.8 93.3 127.9 88.6 126.8 83.3 126.8 78.1 126.8 73.4 127.9 70 129.8 67.3 131.3 65.6 133.3 65.6 135.2ZM149.2 153.3C149.2 157.6 147.5 161.5 144.6 164.4 141.8 167.2 137.9 168.9 133.6 168.9 129.3 168.9 125.4 167.2 122.6 164.4 120.9 162.8 119.7 160.9 118.9 158.7 114.1 161 109 162.8 103.7 164.1 97.2 165.8 90.4 166.6 83.3 166.6 60.3 166.6 39.5 157.3 24.4 142.2 9.3 127.1 0 106.3 0 83.3 0 60.3 9.3 39.5 24.4 24.4 39.5 9.3 60.3 0 83.3 0 106.4 0 127.2 9.3 142.3 24.4 157.3 39.5 166.7 60.3 166.7 83.3 166.7 94.5 164.5 105.1 160.5 114.9 156.6 124.2 151.1 132.7 144.4 140 147 145.1 149.2 150.2 149.2 153.3ZM130.7 126.3C131.1 125.5 131.8 125 132.5 124.8L132.6 124.7 132.6 124.7 132.7 124.7 132.7 124.7 132.8 124.7 132.9 124.6 132.9 124.6 132.9 124.6 133 124.6 133 124.6C133 124.6 133.1 124.6 133.1 124.6L133.1 124.6 133.2 124.6 133.2 124.6C133.9 124.5 134.6 124.6 135.2 125 135.8 125.3 136.3 125.8 136.6 126.4L136.6 126.4 136.6 126.4 136.6 126.4 136.6 126.4 136.6 126.4 136.6 126.5 136.6 126.5 136.6 126.5 136.6 126.5 136.6 126.5 136.7 126.5C137 127.2 137.7 128.3 138.4 129.6L138.4 129.6 138.5 129.7 138.5 129.7 138.6 129.8 138.6 129.9 138.6 129.9 138.7 130 138.7 130.1 138.7 130.1 138.7 130.1 138.8 130.2 138.8 130.2 138.8 130.3 138.9 130.3 138.9 130.4 138.9 130.4 138.9 130.4 139 130.5 139 130.5 139 130.6 139.1 130.7 139.1 130.7 139.1 130.7 139.2 130.8 139.2 130.8 139.2 130.9C139.8 131.8 140.4 132.9 141 133.9 146.5 127.6 151.1 120.3 154.3 112.4 158 103.4 160 93.6 160 83.3 160 62.1 151.4 43 137.6 29.1 123.7 15.2 104.5 6.7 83.3 6.7 62.2 6.7 43 15.2 29.1 29.1 15.2 43 6.7 62.1 6.7 83.3 6.7 104.5 15.2 123.6 29.1 137.5 43 151.4 62.2 160 83.3 160 89.8 160 96.1 159.2 102.1 157.7 107.8 156.2 113.1 154.2 118.1 151.7L118.1 151.6 118.2 151.6 118.2 151.3 118.2 151.3 118.3 151 118.3 151 118.4 150.7 118.4 150.6 118.5 150.4 118.5 150.3 118.5 150 118.6 149.9 118.6 149.7 118.7 149.6 118.8 149.3C118.9 148.9 119 148.5 119.1 148.2L119.2 148.1 119.3 147.8 119.3 147.7 119.4 147.4 119.4 147.4C119.5 147.1 119.6 146.9 119.7 146.7L119.7 146.6 119.8 146.3 119.9 146.2 120 145.9 120.1 145.9C120.2 145.6 120.3 145.3 120.4 145.1L120.4 145.1 120.6 144.7 120.6 144.6 120.7 144.3 120.8 144.2 120.9 143.9 120.9 143.8 121 143.8 121.1 143.5 121.1 143.4 121.2 143.2 121.3 143 121.4 143C121.6 142.6 121.7 142.2 122 141.8L122 141.7 122.2 141.4 122.2 141.3 122.4 140.9 122.4 140.9 122.6 140.5 122.6 140.5 122.8 140.1 123 139.8 123 139.7 123 139.7 123.4 138.9 123.5 138.9 123.6 138.6 123.7 138.4 123.8 138.3 123.9 138 124 137.9 124.2 137.6 124.2 137.5 124.4 137.2 124.4 137.2 124.6 136.8 124.6 136.8 124.8 136.4 124.8 136.4 125 136.1 125.1 136 125.2 135.7 125.3 135.6 125.4 135.3 125.5 135.2 125.6 135 125.7 134.8 125.8 134.6 125.9 134.4 126.2 134 126.2 133.9 126.4 133.6 126.4 133.6 126.6 133.3 126.6 133.2 126.8 132.9 126.8 132.9 127 132.5 127 132.5 127.3 132.2 127.4 131.9 127.4 131.8 127.6 131.6 127.7 131.5 127.8 131.3 127.9 131.1 128 131 128.1 130.8 128.1 130.6 128.3 130.4 128.3 130.4 128.5 130.1 128.5 130.1 128.7 129.8 128.7 129.8 128.8 129.5 128.8 129.5 128.9 129.4 128.9 129.3 129 129.3 129 129.2 129 129.1 129 129.1 129.1 129 129.1 129 129.2 128.9 129.2 128.9 129.2 128.8 129.2 128.8 129.3 128.8 129.3 128.8 129.3 128.7 129.3 128.7 129.3 128.7 129.3 128.7 129.4 128.6 129.4 128.6 129.4 128.5 129.4 128.5 129.4 128.4 129.5 128.4 129.5 128.4 129.5 128.4 129.5 128.4 129.5 128.3 129.5 128.3 129.6 128.2 129.6 128.2 129.6 128.2 129.6 128.2 129.6 128.1 129.6 128.1 129.7 128.1 129.7 128.1 129.7 128 129.7 128 129.8 127.9 129.8 127.9 129.8 127.9 129.8 127.9 129.8 127.8 129.8 127.8 129.8 127.8 129.8 127.8 129.9 127.7 129.9 127.7 129.9 127.7 129.9 127.7 129.9 127.6 129.9 127.6 130 127.6 130 127.6 130 127.5 130 127.5 130 127.4 130 127.4 130.1 127.4 130.1 127.4 130.1 127.4 130.1 127.4 130.1 127.3 130.1 127.3 130.1 127.3 130.1 127.3 130.2 127.2 130.2 127.2 130.2 127.2 130.2 127.2 130.2 127.1 130.2 127.1 130.2 127.1 130.2 127.1 130.3 127 130.3 127 130.3 127 130.3 127 130.3 127 130.3 127 130.4 126.9 130.4 126.9 130.4 126.9 130.4 126.9 130.4 126.8 130.4 126.8 130.4 126.8 130.4 126.8 130.4 126.8 130.4 126.8 130.5 126.7 130.5 126.7 130.5 126.7 130.5 126.7 130.5 126.7 130.5 126.7 130.5 126.6 130.5 126.6 130.5 126.6 130.5 126.6 130.6 126.5 130.6 126.5 130.6 126.5 130.6 126.5 130.6 126.5 130.6 126.5 130.6 126.4 130.6 126.4 130.7 126.4 130.7 126.4 130.7 126.4 130.7 126.4 130.7 126.3 130.7 126.3 130.7 126.3 130.7 126.3ZM140 159.6C141.5 158.1 142.6 155.8 142.6 153.3 142.6 151 140.1 146 137.4 141.1L137.4 141.1 137.4 141.1 137.4 141.1C137 140.4 136.7 139.8 136.3 139.1L136.2 139 136.2 138.9 136.1 138.9 136.1 138.8 136 138.5 135.9 138.5C135.2 137.2 134.5 136.1 133.9 135L133.8 134.9 133.8 134.8 133.8 134.8 133.7 134.7 133.6 134.6 133.6 134.5 133.4 134.8 133.3 135.1 133.3 135.1 133.1 135.4 133.1 135.4 132.9 135.7 132.7 136 132.7 136 132.5 136.3 132.5 136.3 132.4 136.6 132.2 136.9 132.2 136.9 132 137.2 131.8 137.5 131.8 137.5 131.6 137.9 131.6 137.9 131.4 138.2 131.4 138.2 131.2 138.5 131 138.9 131 138.9 130.8 139.2 130.8 139.2 130.7 139.5 130.7 139.5 130.5 139.9 130.5 139.9 130.3 140.2 130.1 140.5 130.1 140.5 129.9 140.9 129.9 140.9 129.7 141.2 129.7 141.2 129.6 141.5 129.4 141.9 129.2 142.2 129.2 142.2 129 142.6 129 142.6 128.8 142.9 128.6 143.2 128.6 143.2 128.5 143.6 128.3 143.9 128.3 143.9 128.1 144.3 128.1 144.3 127.9 144.6 127.9 144.6 127.8 144.9 127.6 145.2 127.4 145.6 127.3 145.9 127.3 145.9 127.1 146.2 127 146.5 127 146.5 126.8 146.8 126.8 146.8 126.7 147.2 126.7 147.2 126.5 147.5 126.5 147.5 126.4 147.8 126.4 147.8 126.3 148.1 126.1 148.4 126 148.6 126 148.6 125.9 149 125.9 149 125.7 149.3 125.7 149.5 125.7 149.5 125.6 149.8 125.6 149.8 125.4 150 125.4 150 125.3 150.3 125.3 150.3 125.3 150.6 125.3 150.6 125.2 150.8 125.2 150.8 125.1 151.1 125.1 151.1 125 151.3 125 151.3 125 151.6 125 151.6 124.9 151.8 124.9 151.8 124.8 152 124.8 152 124.8 152.2 124.8 152.2 124.8 152.4 124.8 152.4C124.7 152.5 124.7 152.5 124.7 152.6L124.7 152.6 124.7 152.8 124.7 152.8C124.7 152.9 124.7 152.9 124.7 153L124.7 153 124.6 153.2 124.6 153.2 124.6 153.3 124.6 153.4C124.7 155.9 125.7 158.1 127.3 159.7 128.9 161.3 131.1 162.3 133.6 162.3 136.1 162.3 138.3 161.3 140 159.6ZM135.3 72.7C136.2 74.3 135.6 76.3 133.9 77.2 132.3 78 130.3 77.4 129.4 75.8 128.7 74.3 127.6 72.9 126.3 71.9 125 70.8 123.4 70.1 121.8 69.6L121.8 69.6C120.8 69.4 119.8 69.2 118.9 69.2 117.8 69.2 116.8 69.3 115.8 69.5 114 69.9 112.3 68.8 111.8 67 111.5 65.2 112.6 63.5 114.4 63 115.8 62.7 117.4 62.6 118.9 62.6 120.5 62.6 122 62.8 123.4 63.2L123.6 63.2C126.1 63.9 128.4 65.1 130.4 66.7 132.5 68.3 134.1 70.4 135.3 72.7ZM37.2 75.8C36.4 77.4 34.4 78 32.7 77.2 31.1 76.3 30.5 74.3 31.3 72.7 32.5 70.4 34.2 68.3 36.2 66.7 38.2 65.1 40.6 63.9 43.1 63.2L43.2 63.2C44.7 62.8 46.2 62.6 47.7 62.6 49.3 62.6 50.8 62.7 52.3 63 54.1 63.5 55.2 65.2 54.8 67 54.4 68.8 52.6 69.9 50.9 69.5 49.9 69.3 48.8 69.2 47.8 69.2 46.8 69.2 45.8 69.4 44.9 69.6L44.9 69.6C43.2 70.1 41.7 70.8 40.4 71.9 39.1 72.9 38 74.3 37.2 75.8ZM125.2 92.7C125.2 90.7 124.5 88.9 123.3 87.6 122.2 86.5 120.6 85.7 119 85.7 117.3 85.7 115.8 86.5 114.7 87.6 113.5 88.9 112.8 90.7 112.8 92.7 112.8 94.6 113.5 96.4 114.7 97.7 115.8 98.9 117.3 99.6 119 99.6 120.6 99.6 122.2 98.9 123.3 97.7 124.5 96.4 125.2 94.6 125.2 92.7ZM128.2 83.2C130.4 85.6 131.8 89 131.8 92.7 131.8 96.4 130.4 99.7 128.2 102.2 125.8 104.7 122.6 106.3 119 106.3 115.4 106.3 112.1 104.7 109.8 102.2 107.5 99.7 106.1 96.4 106.1 92.7 106.1 89 107.5 85.6 109.8 83.2 112.1 80.6 115.4 79.1 119 79.1 122.6 79.1 125.8 80.6 128.2 83.2ZM53.9 92.7C53.9 90.7 53.2 88.9 52 87.6 50.9 86.5 49.4 85.7 47.7 85.7 46 85.7 44.5 86.5 43.4 87.6 42.2 88.9 41.5 90.7 41.5 92.7 41.5 94.6 42.2 96.4 43.4 97.7 44.5 98.9 46 99.6 47.7 99.6 49.4 99.6 50.9 98.9 52 97.7 53.2 96.4 53.9 94.6 53.9 92.7ZM56.9 83.2C59.2 85.6 60.5 89 60.5 92.7 60.5 96.4 59.2 99.7 56.9 102.2 54.5 104.7 51.3 106.3 47.7 106.3 44.1 106.3 40.9 104.7 38.5 102.2 36.2 99.7 34.8 96.4 34.8 92.7 34.8 89 36.2 85.6 38.5 83.2 40.9 80.6 44.1 79.1 47.7 79.1 51.3 79.1 54.5 80.6 56.9 83.2Z" fill="rgb(1,22,39)" fill-opacity="0.2"/></g></svg>
diff --git a/src/assets/trawel.jpeg b/src/assets/trawel.jpeg
deleted file mode 100644
index cd7522e..0000000
Binary files a/src/assets/trawel.jpeg and /dev/null differ
diff --git a/src/components/cards/CardPricing.vue b/src/components/cards/CardPricing.vue
index a9ac8d7..3aa2091 100644
--- a/src/components/cards/CardPricing.vue
+++ b/src/components/cards/CardPricing.vue
@@ -1,6 +1,6 @@
 <template>
-  <q-card class="price-card q-mx-auto" :class="{popular: popular}">
-    <q-card-section class="bg-custom text-white">
+  <q-card class="table-bg q-mx-auto no-shadow" :class="{popular: popular}">
+    <q-card-section class="gradient-bg--primary text-white">
       <div class="text-h6">{{ title }}</div>
       <div class="text-subtitle2">{{ subtitle }}</div>
       <div class="text-body2 q-mt-sm ellipsis">{{ description }}</div>
@@ -16,9 +16,6 @@
         }}
       </div>
       <div class="text-body2">{{ price_text }}</div>
-      <div class="text-body2 text-green q-mt-lg">
-        {{ price_savings || '&nbsp;' }}
-      </div>
     </q-card-section>
     <q-card-section class="q-py-lg">
       <q-btn
@@ -81,18 +78,7 @@ const props = defineProps({
 </script>
 
 <style scoped>
-.price-card {
-  /* max-width: 350px; */
-}
-.bg-custom {
-  background: #26a69a;
-  background: linear-gradient(
-    145deg,
-    var(--q-secondary) 0%,
-    rgba(237, 178, 83, 1) 190%
-  );
-}
 .popular {
-  /* border: 2px solid var(--q-secondary); */
+  /* border: 1px solid var(--q-secondary); */
 }
 </style>
diff --git a/src/components/cards/CardStats.vue b/src/components/cards/CardStats.vue
new file mode 100644
index 0000000..ee3d9c9
--- /dev/null
+++ b/src/components/cards/CardStats.vue
@@ -0,0 +1,24 @@
+<template>
+  <q-card class="table-bg q-pa-md no-shadow" bordered>
+    <q-card-section>
+      <q-btn round unelevated color="primary" :icon="icon" />
+    </q-card-section>
+    <q-separator />
+    <q-card-section>
+      <div class="text-subtitle1">
+        {{ title }}
+      </div>
+      <div class="text-h4 text-weight-bolder">
+        {{ value }}
+      </div>
+    </q-card-section>
+  </q-card>
+</template>
+
+<script setup>
+defineProps({
+  title: String,
+  icon: String,
+  value: [String, Number]
+})
+</script>
diff --git a/src/components/tables/ActivityTable.vue b/src/components/tables/ActivityTable.vue
index 9aaa774..a759331 100644
--- a/src/components/tables/ActivityTable.vue
+++ b/src/components/tables/ActivityTable.vue
@@ -7,64 +7,37 @@
           :key="index"
           class="col-md-3 col-sm-12 col-xs-12"
         >
-          <q-item :style="`background-color: ${item.color1}`" class="q-pa-none">
-            <q-item-section
-              side
-              :style="`background-color: ${item.color2}`"
-              class="q-pa-lg q-mr-none text-white"
-            >
-              <q-icon :name="item.icon" color="white" size="24px"></q-icon>
-            </q-item-section>
-            <q-item-section class="q-pa-md q-ml-none text-white">
-              <q-item-label class="text-white text-h6 text-weight-bolder">{{
-                item.value
-              }}</q-item-label>
-              <q-item-label>{{ item.title }}</q-item-label>
-            </q-item-section>
-          </q-item>
+          <card-stats
+            :title="item.title"
+            :icon="item.icon"
+            :value="item.value"
+          />
         </div>
       </div>
     </q-card-section>
   </q-card>
-  <q-card class="table-bg no-shadow" bordered>
-    <q-card-section>
-      <div class="row">
-        <div class="col-9">
-          <div class="text-h6 text-white">
-            <span>Instances Activity</span>
-          </div>
-        </div>
-        <div class="col-3">
+  <q-card class="no-shadow" bordered>
+    <q-card-section class="q-pa-none">
+      <q-table
+        dense
+        class="table-bg"
+        :rows="data"
+        :columns="columns"
+        :pagination.sync="pagination"
+        title="Instances Activity"
+        :loading="inProgress"
+      >
+        <template v-slot:top-right>
           <q-select
             @update:model-value="showActivty"
             v-model="selectedInstance"
             :options="instances"
             outlined
-            dark
             dense
-            color="white"
             clearable
             label="Select Instance"
           ></q-select>
-        </div>
-      </div>
-    </q-card-section>
-    <q-linear-progress
-      v-if="inProgress"
-      indeterminate
-      color="secondary"
-      class="q-mt-sm"
-    />
-    <q-separator color="white" />
-    <q-card-section class="q-pa-none">
-      <q-table
-        dark
-        dense
-        class="table-bg"
-        :rows="data"
-        :columns="columns"
-        :pagination.sync="pagination"
-      >
+        </template>
         <template v-slot:body-cell-success="props">
           <q-td :props="props">
             <q-icon
@@ -81,13 +54,18 @@
 </template>
 
 <script>
-import { defineComponent } from "vue";
+import {defineComponent} from 'vue'
 
-import { useQuasar } from "quasar";
-import { saas } from "src/boot/saas";
+import {useQuasar} from 'quasar'
+import {saas} from 'src/boot/saas'
+import CardStats from '../cards/CardStats.vue'
 
 export default defineComponent({
-  name: "TableDarkMode",
+  name: 'TableDarkMode',
+
+  components: {
+    CardStats
+  },
 
   data() {
     return {
@@ -97,102 +75,102 @@ export default defineComponent({
 
       activityStats: [
         {
-          title: "Instances",
-          icon: "dns",
+          title: 'Instances',
+          icon: 'dns',
           value: 0,
-          color1: "#546bfa",
-          color2: "#3e51b5",
+          color1: '#546bfa',
+          color2: '#3e51b5'
         },
         {
-          title: "Hours Bought",
-          icon: "timer",
-          value: "20",
-          color1: "#3a9688",
-          color2: "#3e51b5",
+          title: 'Hours Bought',
+          icon: 'timer',
+          value: '20',
+          color1: '#3a9688',
+          color2: '#3e51b5'
         },
         {
-          title: "Sats Paid",
-          icon: "currency_bitcoin",
-          value: "321",
-          color1: "#7cb342",
-          color2: "#3e51b5",
+          title: 'Sats Paid',
+          icon: 'currency_bitcoin',
+          value: '321',
+          color1: '#7cb342',
+          color2: '#3e51b5'
         },
         {
-          title: "Activity Entries",
-          icon: "reorder",
-          value: "82",
-          color1: "#f88c2b",
-          color2: "#3e51b5",
-        },
+          title: 'Activity Entries',
+          icon: 'reorder',
+          value: '82',
+          color1: '#f88c2b',
+          color2: '#3e51b5'
+        }
       ],
 
       pagination: {
         rowsPerPage: 20,
-        page: 1,
+        page: 1
       },
       inProgress: false,
       columns: [
         {
-          name: "success",
-          label: "",
-          field: "success",
+          name: 'success',
+          label: '',
+          field: 'success',
           sortable: false,
-          align: "center",
+          align: 'center'
         },
         {
-          name: "id",
-          label: "Instance ID",
-          field: "instance_id",
+          name: 'id',
+          label: 'Instance ID',
+          field: 'instance_id',
           sortable: true,
-          align: "left",
+          align: 'left'
         },
         {
-          name: "instance_name",
-          label: "Instance Name",
-          field: "instance_name",
+          name: 'instance_name',
+          label: 'Instance Name',
+          field: 'instance_name',
           sortable: true,
-          align: "left",
+          align: 'left'
         },
         {
-          name: "name",
-          label: "Action",
-          field: "name",
+          name: 'name',
+          label: 'Action',
+          field: 'name',
           sortable: true,
-          align: "left",
+          align: 'left'
         },
         {
-          name: "description",
-          label: "Description",
-          field: "description",
+          name: 'description',
+          label: 'Description',
+          field: 'description',
           sortable: true,
-          align: "left",
+          align: 'left'
         },
         {
-          name: "time",
-          label: "Time",
-          field: "time",
+          name: 'time',
+          label: 'Time',
+          field: 'time',
           sortable: true,
-          align: "left",
+          align: 'left'
         },
         {
-          name: "cost_sats",
-          label: "Sats",
-          field: "cost_sats",
+          name: 'cost_sats',
+          label: 'Sats',
+          field: 'cost_sats',
           sortable: true,
-          align: "left",
+          align: 'left'
         },
         {
-          name: "extra_hours",
-          label: "Hours",
-          field: "extra_hours",
+          name: 'extra_hours',
+          label: 'Hours',
+          field: 'extra_hours',
           sortable: true,
-          align: "left",
-        },
-      ],
-    };
+          align: 'left'
+        }
+      ]
+    }
   },
   setup() {
-    const $q = useQuasar();
+    const $q = useQuasar()
 
     return {
       q: $q,
@@ -201,109 +179,103 @@ export default defineComponent({
           title,
           message,
           cancel: true,
-          persistent: true,
-        });
-      },
-    };
+          persistent: true
+        })
+      }
+    }
   },
   methods: {
     fetchUserActivity: async function () {
       try {
-        const { data } = await saas.getUserInstancesLogs();
-        this.data = this.mapInstanceLogs(data);
+        const {data} = await saas.getUserInstancesLogs()
+        this.data = this.mapInstanceLogs(data)
       } catch (error) {
-        console.warn(error);
+        console.warn(error)
         this.q.notify({
-          message: "Failed to fetch activity!",
+          message: 'Failed to fetch activity!',
           caption: saas.mapErrorToString(error),
-          color: "negative",
-        });
+          color: 'negative'
+        })
       }
     },
     fetchInstanceActivity: async function (id) {
       try {
-        const { data } = await saas.getInstancesLogs(id);
-        this.data = this.mapInstanceLogs(data);
+        const {data} = await saas.getInstancesLogs(id)
+        this.data = this.mapInstanceLogs(data)
       } catch (error) {
-        console.warn(error);
+        console.warn(error)
         this.q.notify({
-          message: "Failed to fetch instance activity!",
+          message: 'Failed to fetch instance activity!',
           caption: saas.mapErrorToString(error),
-          color: "negative",
-        });
+          color: 'negative'
+        })
       }
     },
     fetchUserInstances: async function () {
       try {
-        const { data } = await saas.getInstances();
-        this.activityStats[0].value = data.length;
-        this.instances = data.map((i) => ({
+        const {data} = await saas.getInstances()
+        this.activityStats[0].value = data.length
+        this.instances = data.map(i => ({
           value: i.id,
           label: `[${i.id}] ${i.domain}`,
-          name: i.domain,
-        }));
+          name: i.domain
+        }))
       } catch (error) {
-        console.warn(error);
+        console.warn(error)
         this.q.notify({
-          message: "Failed to fetch instances!",
+          message: 'Failed to fetch instances!',
           caption: saas.mapErrorToString(error),
-          color: "negative",
-        });
+          color: 'negative'
+        })
       }
     },
     showActivty: async function (instance) {
       try {
-        this.inProgress = true;
+        this.inProgress = true
         if (!instance) {
-          await this.fetchUserActivity();
+          await this.fetchUserActivity()
         } else {
-          await this.fetchInstanceActivity(instance.value);
+          await this.fetchInstanceActivity(instance.value)
         }
       } catch (error) {
       } finally {
-        this.inProgress = false;
+        this.inProgress = false
       }
     },
     instanceNameFromId: function (id) {
-      const instance = this.instances.find((i) => i.value === id);
+      const instance = this.instances.find(i => i.value === id)
       if (instance) {
-        return instance.name;
+        return instance.name
       }
-      return "?";
+      return '?'
     },
     mapInstanceLogs: function (logs) {
-      this.activityStats[1].value = logs.reduce((t, l) => t + l.extra_hours, 0);
-      this.activityStats[2].value = logs.reduce((t, l) => t + l.cost_sats, 0);
-      this.activityStats[3].value = logs.length;
+      this.activityStats[1].value = logs.reduce((t, l) => t + l.extra_hours, 0)
+      this.activityStats[2].value = logs.reduce((t, l) => t + l.cost_sats, 0)
+      this.activityStats[3].value = logs.length
       return logs
-        .map((i) => ({
+        .map(i => ({
           ...i,
           instance_name: this.instanceNameFromId(i.instance_id),
-          time: new Date(i.timestamp * 1000).toLocaleString(),
+          time: new Date(i.timestamp * 1000).toLocaleString()
         }))
-        .reverse();
-    },
+        .reverse()
+    }
   },
   async created() {
     try {
-      this.inProgress = true;
-      await this.fetchUserInstances();
-      const urlParams = new URLSearchParams(window.location.search);
+      this.inProgress = true
+      await this.fetchUserInstances()
+      const urlParams = new URLSearchParams(window.location.search)
 
       this.selectedInstance = this.instances.find(
-        (i) => `${i.value}` === urlParams.get("instance_id")
-      );
-      this.showActivty(this.selectedInstance);
+        i => `${i.value}` === urlParams.get('instance_id')
+      )
+      this.showActivty(this.selectedInstance)
     } catch (error) {
     } finally {
-      this.inProgress = false;
+      this.inProgress = false
     }
-  },
-});
+  }
+})
 </script>
-
-<style>
-.table-bg {
-  background-color: #162b4d;
-}
-</style>
diff --git a/src/components/tables/InstancesTable.vue b/src/components/tables/InstancesTable.vue
index 5f8bf2d..87a271a 100644
--- a/src/components/tables/InstancesTable.vue
+++ b/src/components/tables/InstancesTable.vue
@@ -7,27 +7,19 @@
           :key="index"
           class="col-md-3 col-sm-12 col-xs-12"
         >
-          <q-item :style="`background-color: ${item.color1}`" class="q-pa-none">
-            <q-item-section
-              side
-              :style="`background-color: ${item.color2}`"
-              class="q-pa-lg q-mr-none text-white"
-            >
-              <q-icon :name="item.icon" color="white" size="24px"></q-icon>
-            </q-item-section>
-            <q-item-section class="q-pa-md q-ml-none text-white">
-              <q-item-label class="text-white text-h6 text-weight-bolder">{{
-                item.value
-              }}</q-item-label>
-              <q-item-label>{{ item.title }}</q-item-label>
-            </q-item-section>
-          </q-item>
+          <CardStats
+            :title="item.title"
+            :icon="item.icon"
+            :value="item.value"
+          />
         </div>
       </div>
     </q-card-section>
-    <q-card-section class="q-pa-none">
-      <div class="row q-col-gutter-sm q-mt-md">
-        <div class="col">
+  </q-card>
+  <q-card class="no-shadow">
+    <q-card-section class="q-pa-none q-mb-md">
+      <div class="row q-mt-md">
+        <div class="col-12">
           <q-item class="q-pa-none bg-grey-8">
             <q-item-section side class="q-pa-lg q-mr-none text-white bg-black">
               <q-icon name="info" color="white" size="24px"></q-icon>
@@ -46,34 +38,25 @@
       </div>
     </q-card-section>
   </q-card>
-  <q-card class="table-bg no-shadow" bordered>
-    <q-card-section>
-      <div class="text-h6 text-white">
-        <span>LNbits Instances</span>
-        <q-btn
-          @click="selectPlan.show = true"
-          label="New Instance"
-          icon="add_to_queue"
-          color="blue"
-          class="float-right text-capitalize shadow-3"
-        />
-      </div>
-    </q-card-section>
-    <q-linear-progress
-      v-if="inProgress"
-      indeterminate
-      color="secondary"
-      class="q-mt-sm"
-    />
-    <q-separator color="white" />
+  <q-card class="no-shadow" bordered>
     <q-card-section class="q-pa-none">
       <q-table
-        dark
         class="table-bg"
         :rows="data"
         :columns="columns"
         :pagination.sync="pagination"
+        title="LNbits Instances"
+        :loading="inProgress"
       >
+        <template v-slot:top-right>
+          <q-btn
+            @click="selectPlan.show = true"
+            label="New Instance"
+            icon="add_to_queue"
+            color="primary"
+            class="float-right text-capitalize"
+          />
+        </template>
         <template v-slot:body-cell-action="props">
           <q-td :props="props">
             <q-btn
@@ -207,7 +190,6 @@
               class="float-right"
             ></span>
             <q-linear-progress
-              dark
               :color="getColor(props.row.progress)"
               :value="props.row.progress / 100"
               class="q-mt-sm"
@@ -280,7 +262,7 @@
     </q-card-section>
   </q-card>
   <q-dialog v-model="qrCodeDialog.show" position="top">
-    <q-card style="min-height: 200px" class="q-pa-lg">
+    <q-card style="min-height: 200px" class="q-pa-lg q-mx-sm">
       <h5 class="q-mt-sm">
         <span>Instance: &nbsp;</span><span v-text="activeInstance.id"></span>
       </h5>
@@ -307,9 +289,10 @@
         <q-responsive :ratio="1" class="q-mx-xl">
           <qrcode-vue
             :value="qrCodeDialog.data"
-            :options="{width: 340}"
+            size="200"
             level="Q"
             render-as="svg"
+            margin="2"
             class="rounded-borders"
           ></qrcode-vue>
         </q-responsive>
@@ -320,7 +303,8 @@
         <q-btn
           v-close-popup
           flat
-          color="primary"
+          outline
+          color="grey-6"
           class="q-mr-auto"
           v-text="'Close'"
         ></q-btn>
@@ -330,7 +314,9 @@
   </q-dialog>
   <q-dialog v-model="showProvisioning" backdrop-filter="blur(4px)" persistent>
     <q-card style="width: 95%; max-width: 1200px" class="q-mx-auto">
-      <q-card-section class="row items-center q-py-lg bg-secondary text-white">
+      <q-card-section
+        class="row items-center q-py-lg gradient-bg--primary text-white"
+      >
         <div>
           <div
             class="text-h6"
@@ -373,7 +359,6 @@
           :key="index"
           :name="index"
           :img-src="slide.image"
-          class=""
         >
           <div class="absolute-bottom custom-caption">
             <div class="text-h5">{{ slide.title }}</div>
@@ -389,8 +374,8 @@
     persistent
     @hide="resetSubscriptionDialog"
   >
-    <q-card style="width: 95%; max-width: 700px" class="q-mx-auto">
-      <q-card-section class="q-py-lg bg-secondary text-white column">
+    <q-card style="width: 95%; max-width: 700px" class="table-bg q-mx-auto">
+      <q-card-section class="q-py-lg gradient-bg--primary text-white column">
         <div class="text-h6">
           {{
             planDialog.instanceId
@@ -439,7 +424,7 @@
           </div>
         </div>
         <div class="q-py-lg">
-          <q-list padding class="">
+          <q-list padding>
             <ItemPricing
               v-model:plan="planDialog.plan"
               v-model:count="planDialog.count"
@@ -449,7 +434,7 @@
                   ? 'Automatically renews every week. Great for ongoing projects without long-term commitment. Cancel anytime before renewal.'
                   : 'Pay once for 1 week, or more, of access. No automatic renewal. Perfect for testing, demos, or short-term projects.'
               "
-              :price="2.00"
+              :price="2.0"
               :min="1"
               :max="8"
               :step="1"
@@ -464,7 +449,7 @@
                   ? 'Best value for regular use. Renews monthly. Cancel anytime, no questions asked.'
                   : 'Pay once for 1 month, or more, of access with no recurring charges. Ideal when you need a month of service without ongoing commitment.'
               "
-              :price="7.00"
+              :price="7.0"
               :min="1"
               :max="12"
               :step="1"
@@ -479,7 +464,7 @@
                   ? 'Renews annually. Buy 12 months for the price of 10.'
                   : 'Buy 12 months for the price of 10. Set it and forget it. '
               "
-              :price="70.00"
+              :price="70.0"
               :min="1"
               :max="5"
               :step="1"
@@ -488,11 +473,11 @@
           </q-list>
         </div>
       </q-card-section>
-      <q-card-actions align="right">
+      <q-card-actions align="right" class="q-pa-md">
         <q-btn
           class="q-mr-auto"
           label="Close"
-          color="primary"
+          color="grey-6"
           outline
           v-close-popup
         ></q-btn>
@@ -530,8 +515,8 @@
     </q-card>
   </q-dialog>
   <q-dialog v-model="selectPlan.show" backdrop-filter="blur(4px)" persistent>
-    <q-card style="width: 95%; max-width: 700px" class="q-mx-auto">
-      <q-card-section class="q-py-lg bg-secondary text-white column">
+    <q-card style="width: 95%; max-width: 700px" class="table-bg q-mx-auto">
+      <q-card-section class="q-py-lg gradient-bg--primary text-white column">
         <div class="text-h6">Select a method</div>
       </q-card-section>
       <q-card-section class="q-mb-lg">
@@ -542,7 +527,7 @@
           </div>
         </div>
         <div class="q-py-lg">
-          <q-list padding class="">
+          <q-list padding>
             <q-item tag="label">
               <q-item-section avatar top>
                 <q-radio
@@ -612,12 +597,13 @@
           </q-list>
         </div>
       </q-card-section>
-      <q-card-actions align="right">
+      <q-card-actions align="right" class="q-pa-md">
         <q-btn
           class="q-mr-auto"
+          outline
           flat
           label="Close"
-          color="primary"
+          color="grey-6"
           v-close-popup
         ></q-btn>
         <q-btn
@@ -640,6 +626,7 @@ import {secondsToDhm} from 'src/boot/utils'
 import QrcodeVue from 'qrcode.vue'
 
 import ItemPricing from 'components/cards/ItemPricing.vue'
+import CardStats from 'components/cards/CardStats.vue'
 
 export default defineComponent({
   name: 'TableDarkMode',
@@ -648,6 +635,7 @@ export default defineComponent({
   },
   components: {
     ItemPricing,
+    CardStats,
     QrcodeVue
   },
   data() {
@@ -1263,10 +1251,6 @@ export default defineComponent({
 </script>
 
 <style>
-.table-bg {
-  background-color: #162b4d;
-}
-
 .custom-caption {
   padding: 12px;
   color: white;
diff --git a/src/css/app.css b/src/css/app.css
index c7403ff..5f3e902 100644
--- a/src/css/app.css
+++ b/src/css/app.css
@@ -2,3 +2,41 @@
 .bg-image {
   background-image: linear-gradient(135deg, #7028e4 0%, #e5b2ca 100%);
 }
+
+.q-drawer {
+  background: inherit !important;
+}
+
+.table-bg {
+  /* background-color: #162b4d; */
+  background-image: linear-gradient(
+    135deg,
+    var(--surface),
+    var(--surface-variant)
+  );
+  background-color: var(--surface-variant);
+}
+
+.body-gradient {
+  background: linear-gradient(
+    135deg,
+    var(--surface),
+    var(--light-page-gradient)
+  ) !important;
+}
+
+.body--dark .body-gradient {
+  background: linear-gradient(
+    135deg,
+    var(--q-dark-page),
+    var(--dark-page-gradient)
+  ) !important;
+}
+
+.gradient-bg--primary {
+  background: linear-gradient(
+    135deg,
+    var(--q-primary) 0%,
+    var(--q-secondary) 100%
+  );
+}
diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index ac94220..6b51926 100644
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -1,11 +1,88 @@
+// quasar-variables.scss
 
-$primary   : rgba(15, 23, 42, 0.89);
-$secondary : #26A69A;
-$accent    : #dd4b39;
+// ===== LIGHT THEME (Default) =====
+$primary : #ad4bb1;; // primary-100 - main purple
+$secondary : #713274; // primary-200 - deeper purple
+$accent : #9fc771; // accent-200 - medium purple accent
 
-$dark      : #1D1D1D;
+$dark : #4A4A4A; // text-100 - dark text
+$dark-page : #0f0f14; // bg-200 - light page background
+$dark-page-gradient: darken($primary, 42%); // Gradient for dark theme background
+$light-page-gradient: lighten($primary, 45%); // Gradient for light theme background
 
-$positive  : #21BA45;
-$negative  : #C10015;
-$info      : #31CCEC;
-$warning   : #F2C037;
+// Additional theme colors
+$background: #f8f8fc; // bg-100 - main background
+$text-color: #1a1a2e; // text-100
+$text-secondary: #4e4e5e; // text-200
+
+// Surface colors for cards, panels, etc.
+$surface-light: #f8f8fc; // bg-300
+$surface-variant: #fff8ff; // bg-200
+
+
+// ===== DARK THEME =====
+// .body--dark {
+//     --surface: #1c1c26; // bg-200 - cards/panels
+//     --surface-variant: #16161e; // bg-300 - elevated surfaces
+
+//     // Text colors
+//     --q-text-color: #e4e4ef; // text-100 - primary text
+//     --q-text-secondary: #7a7a8e; // text-200 - secondary text
+
+//     // Optional: border colors
+//     --q-border: rgba(188, 111, 241, 0.12);
+
+//     background: linear-gradient(135deg, $dark-page, darken($primary, 52%)) !important; // Force dark background for the entire app
+// }
+// ===== CSS Custom Properties (for both themes) =====
+:root {
+    --light-page-gradient: #{$light-page-gradient};
+    --dark-page-gradient: #{$dark-page-gradient};
+    
+    --surface: #{$surface-light};
+    --surface-variant: #{$surface-variant};
+
+    // Border and divider
+    --border-color: rgba(138, 95, 191, 0.12);
+    --divider-color: rgba(74, 74, 74, 0.12);
+}
+
+.body--dark {
+    --q-primary: #aa14af; // primary-100 - main purple (same as light theme)
+    --q-secondary: #650d77; // primary-200 - deeper purple (same as light theme)
+    --q-accent: #8bc34a; // accent
+    --surface: #1c1c26; // bg-200 - cards/panels
+    --surface-variant: #16161e; // bg-300 - elevated surfaces
+
+    // Text colors
+    --q-text-color: #e4e4ef; // text-100 - primary text
+    --q-text-secondary: #7a7a8e; // text-200 - secondary text
+
+    // Optional: border colors
+    --q-border: rgba(188, 111, 241, 0.12);
+
+
+    --border-color: rgba(188, 111, 241, 0.12);
+    --divider-color: rgba(238, 238, 238, 0.12);
+
+    // .q-drawer {
+    //     background: inherit !important;
+    // }
+}
+
+// ===== Additional Quasar Variable Overrides =====
+
+// Adjust default shade variations if needed
+$primary-shades: (
+    'light': lighten($primary, 15%),
+    'dark': darken($primary, 10%)
+);
+
+$secondary-shades: (
+    'light': lighten($secondary, 15%),
+    'dark': darken($secondary, 10%)
+);
+
+// Card and surface styling
+$card-border-radius: 12px;
+$generic-border-radius: 12px;
\ No newline at end of file
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index a2a1516..42d7384 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -1,6 +1,6 @@
 <template>
-  <q-layout view="lHh Lpr lFf">
-    <q-header elevated>
+  <q-layout view="hHh Lpr lFf" class="body-gradient">
+    <q-header class="bg-transparent" style="color: inherit">
       <q-toolbar>
         <q-btn
           flat
@@ -10,39 +10,47 @@
           icon="menu"
           aria-label="Menu"
         />
-        <q-toolbar-title> My Bits </q-toolbar-title>
+        <q-toolbar-title>
+          <span class="text-subtitle1 text-italic text-weight-light">my</span>
+          <span class="q-ml-xs text-weight-bold">Bits</span>
+        </q-toolbar-title>
         <q-space />
-        <div class="q-gutter-sm row items-center no-wrap">
-          <span v-text="username"></span>
-
-          <q-btn
-            round
-            dense
-            flat
-            color="white"
-            icon="fab fa-github"
-            type="a"
-            href="https://github.com/lnbits"
-            target="_blank"
-          >
-          </q-btn>
-
-          <q-btn round flat>
-            <q-avatar @click="logout()" icon="logout" size="26px"> </q-avatar>
-          </q-btn>
+        <div class="q-mr-md">
+          <q-icon name="light_mode" size="xs" />
+          <q-toggle
+            v-model="darkMode"
+            @update:model-value="toggleDarkMode"
+            :icon="darkMode ? 'light_mode' : 'dark_mode'"
+            color="primary"
+          ></q-toggle>
+          <q-icon name="dark_mode" size="xs" />
         </div>
+        <q-btn-dropdown icon="account_circle" flat>
+          <q-list>
+            <q-item>
+              <q-item-section>
+                <q-item-label>
+                  {{ username }}
+                </q-item-label>
+              </q-item-section>
+            </q-item>
+            <q-separator />
+            <q-item clickable @click="logout()">
+              <q-item-section>
+                <q-item-label>Logout</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <q-icon name="logout" />
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-btn-dropdown>
       </q-toolbar>
     </q-header>
 
-    <q-drawer
-      v-model="leftDrawerOpen"
-      show-if-above
-      bordered
-      class="bg-primary text-white"
-    >
-      <q-list>
-        <q-item></q-item>
-        <q-item to="/instances" active-class="q-item-no-link-highlighting">
+    <q-drawer v-model="leftDrawerOpen" show-if-above bordered>
+      <q-list class="q-mt-xl">
+        <q-item to="/instances" active-class="text-primary">
           <q-item-section avatar>
             <q-icon name="table_chart" />
           </q-item-section>
@@ -50,7 +58,7 @@
             <q-item-label>Instances</q-item-label>
           </q-item-section>
         </q-item>
-        <q-item to="/payments" active-class="q-item-no-link-highlighting">
+        <q-item to="/payments" active-class="text-primary">
           <q-item-section avatar>
             <q-icon name="payment" />
           </q-item-section>
@@ -61,7 +69,7 @@
         <q-item
           v-if="showFeatureFlag"
           to="/subscriptions"
-          active-class="q-item-no-link-highlighting"
+          active-class="text-primary"
         >
           <q-item-section avatar>
             <q-icon name="subscriptions" />
@@ -71,7 +79,7 @@
           </q-item-section>
         </q-item>
 
-        <q-item to="/activity" active-class="q-item-no-link-highlighting">
+        <q-item to="/activity" active-class="text-primary">
           <q-item-section avatar>
             <q-icon name="manage_history" />
           </q-item-section>
@@ -80,7 +88,7 @@
           </q-item-section>
         </q-item>
 
-        <q-item to="/pricing" active-class="q-item-no-link-highlighting">
+        <q-item to="/pricing" active-class="text-primary">
           <q-item-section avatar>
             <q-icon name="currency_bitcoin" />
           </q-item-section>
@@ -91,7 +99,7 @@
       </q-list>
     </q-drawer>
 
-    <q-page-container class="bg-grey-2">
+    <q-page-container>
       <router-view />
     </q-page-container>
   </q-layout>
@@ -112,7 +120,12 @@ export default defineComponent({
   },
   data() {
     return {
-      showFeatureFlag: false
+      showFeatureFlag: false,
+      toggleDarkMode: () => {
+        this.q.dark.toggle()
+        localStorage.setItem('darkMode', this.q.dark.isActive)
+      },
+      darkMode: false
     }
   },
 
@@ -150,9 +163,19 @@ export default defineComponent({
           icon: 'warning'
         })
       }
+    },
+    isLinkActive(link) {
+      return this.$route.path === link
     }
   },
   async created() {
+    this.darkMode = localStorage.getItem('darkMode') === 'true'
+    this.q.dark.set(this.darkMode)
+    if (this.$route.path === '/') {
+      this.$router.replace('/instances').catch(() => {
+        // Ignore errors
+      })
+    }
     try {
       // temporary feature flag for alan
       this.showFeatureFlag = saas.username === 'alan@lnbits.com'
diff --git a/src/pages/Login.vue b/src/pages/Login.vue
index 93017c4..023f8b4 100644
--- a/src/pages/Login.vue
+++ b/src/pages/Login.vue
@@ -7,7 +7,7 @@
             <q-avatar
               size="150px"
               class="absolute-center shadow-10"
-              color="primary"
+              color="grey-10"
             >
               <img src="profile.svg" class="q-pa-md" />
             </q-avatar>
@@ -233,9 +233,3 @@ export default defineComponent({
   }
 })
 </script>
-
-<!-- <style>
-.bg-image {
-  background-image: linear-gradient(135deg, #7028e4 0%, #e5b2ca 100%);
-}
-</style> -->
diff --git a/src/pages/Payments.vue b/src/pages/Payments.vue
index f35ee71..8a3751b 100644
--- a/src/pages/Payments.vue
+++ b/src/pages/Payments.vue
@@ -1,45 +1,28 @@
 <template>
   <q-page class="q-pa-sm">
     <div class="q-gutter-y-md">
-      <q-card class="table-bg no-shadow" bordered>
-        <q-card-section>
-          <div class="row">
-            <div class="col-9">
-              <div class="text-h6 text-white">
-                <span>Payments</span>
-              </div>
-            </div>
-            <div class="col-3">
+      <q-card class="no-shadow" bordered>
+        <q-card-section class="q-pa-none">
+          <q-table
+            dense
+            class="table-bg"
+            :rows="payments"
+            :columns="columns"
+            :pagination.sync="pagination"
+            title="Payments"
+            :loading="inProgress"
+          >
+            <template v-slot:top-right>
               <q-select
                 @update:model-value="showPayments"
                 v-model="selectedInstance"
                 :options="instances"
                 outlined
-                dark
                 dense
                 clearable
-                color="white"
                 label="Select Instance"
               ></q-select>
-            </div>
-          </div>
-        </q-card-section>
-        <q-linear-progress
-          v-if="inProgress"
-          indeterminate
-          color="secondary"
-          class="q-mt-sm"
-        />
-        <q-separator color="white" />
-        <q-card-section class="q-pa-none">
-          <q-table
-            dark
-            dense
-            class="table-bg"
-            :rows="payments"
-            :columns="columns"
-            :pagination.sync="pagination"
-          >
+            </template>
             <template v-slot:body-cell-success="props">
               <q-td :props="props">
                 <q-icon
@@ -211,5 +194,3 @@ export default defineComponent({
   }
 })
 </script>
-
-<style></style>
diff --git a/src/pages/Pricing.vue b/src/pages/Pricing.vue
index 46091ba..b558fdc 100644
--- a/src/pages/Pricing.vue
+++ b/src/pages/Pricing.vue
@@ -1,20 +1,15 @@
 <template>
-  <q-layout view="lHh Lpr lFf" class="bg-image">
-    <q-header class="bg-transparent text-white">
+  <q-layout view="lHh Lpr lFf">
+    <q-header class="bg-transparent" style="color: inherit">
       <q-toolbar class="q-pa-md">
-        <q-toolbar-title> </q-toolbar-title>
+        <q-toolbar-title>
+          <span class="text-subtitle1 text-italic text-weight-light">my</span>
+          <span class="q-ml-xs text-weight-bold">Bits</span>
+        </q-toolbar-title>
         <q-space />
 
         <div class="q-gutter-sm row items-center no-wrap">
-          <q-btn
-            square
-            dense
-            flat
-            color="text-grey-7"
-            to="/"
-            label="Home"
-            icon="dashboard"
-          >
+          <q-btn square dense flat to="/" label="Home" icon="dashboard">
             <q-tooltip>Home</q-tooltip>
           </q-btn>
         </div>
@@ -22,10 +17,7 @@
     </q-header>
 
     <q-page-container>
-      <section
-        style="min-height: 20vh"
-        class="flex text-white flex-center layout_bg"
-      >
+      <section style="min-height: 20vh" class="flex flex-center layout_bg">
         <div style="position: relative">
           <div class="text-h2 q-mb-lg text-center">
             <span class="text-weight-bold">LN</span>bits
@@ -39,9 +31,7 @@
         </div>
       </section>
       <section>
-        <div class="text-h5 text-center q-mt-xl q-mb-md text-white">
-          Pricing plans
-        </div>
+        <div class="text-h5 text-center q-mt-lg q-mb-md">Pricing plans</div>
       </section>
       <section class="q-pa-xl">
         <div class="row q-col-gutter-md q-mx-auto" style="max-width: 1200px">
@@ -61,13 +51,15 @@
         </div>
       </section>
     </q-page-container>
-
-    <section class="flex row flex-center q-py-sm"></section>
   </q-layout>
 </template>
 
-<script>
-import {defineComponent, defineAsyncComponent} from 'vue'
+<script setup>
+import CardPricing from 'src/components/cards/CardPricing.vue'
+import {ref, onMounted} from 'vue'
+import {useQuasar} from 'quasar'
+
+const q = useQuasar()
 
 const pricing_data = [
   // {
@@ -84,7 +76,7 @@ const pricing_data = [
     title: 'Weekly',
     subtitle: 'Great Start',
     description: 'Perfect for testing and short-term projects',
-    price: 2.00,
+    price: 2.0,
     price_text: 'USD / per week',
     price_savings: '',
     active: true,
@@ -94,7 +86,7 @@ const pricing_data = [
     title: 'Monthly',
     subtitle: 'Most Popular',
     description: 'Ideal for developers and growing businesses',
-    price: 7.00,
+    price: 7.0,
     price_text: 'USD / per month',
     price_savings: '',
     active: true,
@@ -105,26 +97,18 @@ const pricing_data = [
     title: 'Yearly',
     subtitle: 'Best Value',
     description: 'Buy 12 months for the price of 10.',
-    price: 70.00,
+    price: 70.0,
     price_text: 'USD / per year',
     price_savings: '',
     active: true,
     link: {path: '/instances', query: {plan: 'yearly'}}
   }
 ]
-export default defineComponent({
-  name: 'Pricing',
-  components: {
-    CardPricing: defineAsyncComponent(() =>
-      import('components/cards/CardPricing.vue')
-    )
-  },
-  setup() {
-    return {
-      year: new Date().getFullYear(),
-      pricing_data
-    }
-  }
+const darkMode = ref(false)
+
+onMounted(() => {
+  darkMode.value = localStorage.getItem('darkMode') === 'true'
+  q.dark.set(darkMode.value)
 })
 </script>
 
diff --git a/src/pages/Subscriptions.vue b/src/pages/Subscriptions.vue
index 8feaa22..91b538f 100644
--- a/src/pages/Subscriptions.vue
+++ b/src/pages/Subscriptions.vue
@@ -1,50 +1,34 @@
 <template>
   <q-page class="q-pa-sm">
     <div class="q-gutter-y-md">
-      <q-card class="table-bg no-shadow" bordered>
-        <q-card-section>
-          <div class="row">
-            <div class="col-9">
-              <div class="text-h6 text-white">
-                <span>Subscriptions</span>
-              </div>
-            </div>
-            <div class="col-3">
-              <q-select
-                @update:model-value="showSubscriptions"
-                v-model="selectedInstance"
-                :options="instances"
-                outlined
-                dark
-                dense
-                clearable
-                color="white"
-                label="Select Instance"
-              ></q-select>
-            </div>
-          </div>
-        </q-card-section>
-        <q-linear-progress
-          v-if="inProgress"
-          indeterminate
-          color="secondary"
-          class="q-mt-sm"
-        />
-        <q-separator color="white" />
-
+      <q-card class="no-shadow" bordered>
         <q-card-section class="q-pa-none">
           <q-table
-            dark
             grid
             flat
             bordered
-            card-class="bg-primary text-white"
+            card-class="gradient-bg--primary text-white"
             hide-header
             class="table-bg"
             :rows="subscriptions"
             :columns="columns"
             :pagination.sync="pagination"
+            title="Subscriptions"
+            :loading="inProgress"
           >
+            <template v-slot:top-right>
+              <q-btn
+                @click="showSubscriptions(selectedInstance)"
+                label="Refresh"
+                color="primary"
+                outline
+                :loading="inProgress"
+              >
+                <q-tooltip class="bg-indigo" :offset="[10, 10]">
+                  <span> Refresh subscriptions. </span>
+                </q-tooltip>
+              </q-btn>
+            </template>
             <template v-slot:item="props">
               <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4">
                 <q-card class="my-card" flat bordered>