diff --git a/components/cardLightCurve.vue b/components/cardLightCurve.vue
index b8e823dd..660af5ce 100644
--- a/components/cardLightCurve.vue
+++ b/components/cardLightCurve.vue
@@ -1,81 +1,28 @@
 <template>
   <v-col :cols="cols" :lg="lg" :md="md" :sm="sm">
-    <v-card v-if="isLoading || error" :class="cardClass">
-      <v-card-text v-if="isLoading">
-        <v-progress-circular
-          indeterminate
-          color="primary"
-        ></v-progress-circular>
-        Fetching data for object {{ objectId }} ...
-      </v-card-text>
-      <v-card-text v-if="error">
-        <v-alert text prominent type="error" icon="mdi-cloud-alert">
-          {{ error }}
-        </v-alert>
-      </v-card-text>
-    </v-card>
-    <v-card v-else :class="cardClass" width="100%">
-      <v-card-text>
-        <select-lightcurve :selected="selected">
-          <plots-light-curve-plot
-            slot="difference"
-            :detections="lightcurve.detections"
-            :non-detections="lightcurve.nonDetections"
-            type="difference"
-            :dark="isDark"
-            @detectionClick="onDetectionClick"
-          />
-          <plots-light-curve-plot
-            slot="apparent"
-            :detections="apparent"
-            type="apparent"
-            :dark="isDark"
-            @detectionClick="onDetectionClick"
-          />
-          <plots-light-curve-plot
-            slot="folded"
-            :detections="apparent"
-            :period="period"
-            type="folded"
-            :dark="isDark"
-            @detectionClick="onDetectionClick"
-          />
-        </select-lightcurve>
-      </v-card-text>
-      <!-- OPTIONS -->
-      <v-card-actions class="py-0">
-        <!--RADIO BUTTONS-->
-        <buttons-lightcurve-radio-buttons
-          v-model="selected"
-          :options="options"
-        />
-        <v-spacer />
-        <v-row>
-          <!-- LIGHTCURVE BUTTONS -->
-          <v-col class="py-1">
-            <buttons-display-data-release
-              v-model="dataReleaseValues"
-              :datarelease="dataRelease"
-              :loading="isLoadingDataRelease"
-              :plot="selected"
-              @update-plot="updatePlotSelected"
-            />
-          </v-col>
-          <v-col class="py-1">
-            <buttons-download-lightcurve-button
-              :oid="objectId"
-              :detections="lightcurve.detections"
-              :non-detections="lightcurve.nonDetections"
-            />
-          </v-col>
-        </v-row>
-      </v-card-actions>
+    <v-card :class="cardClass">
+      <v-card v-if="isLoading || error">
+        <v-card-text v-if="isLoading">
+          <v-progress-circular
+            indeterminate
+            color="primary"
+          ></v-progress-circular>
+          Fetching data for object {{ objectId }} ...
+        </v-card-text>
+        <v-card-text v-if="error">
+          <v-alert text prominent type="error" icon="mdi-cloud-alert">
+            {{ error }}
+          </v-alert>
+        </v-card-text>
+      </v-card>
+      <v-card id="lightcurve-container" width="100%" :height="height"> </v-card>
     </v-card>
   </v-col>
 </template>
 
 <script>
 import { Vue, Component, Prop, Watch } from 'nuxt-property-decorator'
+import * as htmx from 'htmx.org'
 
 @Component
 export default class CardLightCurve extends Vue {
@@ -87,71 +34,13 @@ export default class CardLightCurve extends Vue {
 
   @Prop({ type: Number | String, default: 12 }) sm
 
-  @Prop({ type: Number, default: null }) period
-
   @Prop({ type: Boolean, default: true }) show
 
   @Prop({ type: String }) cardClass
 
-  selected = ''
-
-  dataReleaseValues = []
-
-  options = [
-    {
-      text: 'Difference Magnitude',
-      value: 'difference',
-      tooltip:
-        'The difference Magnitude light curve, is the absolute difference between a science and reference magnitudes.',
-      show: true,
-      default: true,
-    },
-    {
-      text: 'Apparent Magnitude',
-      value: 'apparent',
-      tooltip:
-        'Apparent magnitude light curve results from adding/subtracting the fluxes from the reference and difference in the same unit system and then converting to magnitudes.',
-      show: true,
-    },
-    {
-      text: 'Folded',
-      value: 'folded',
-      tooltip:
-        'The Period folded light curve, where time is transformed to time modulo the period (Phase).',
-      show: true,
-    },
-  ]
-
-  get isDark() {
-    return this.$vuetify.theme.isDark
-  }
-
-  get isLoading() {
-    return this.$store.state.lightcurve.loading
-  }
-
-  get error() {
-    return this.$store.state.lightcurve.error
-  }
-
-  get lightcurve() {
-    return {
-      detections: this.$store.state.lightcurve.detections,
-      nonDetections: this.$store.state.lightcurve.nonDetections,
-    }
-  }
-
-  get dataRelease() {
-    return this.$store.state.datarelease.dataReleaseLightCurve
-  }
-
-  get isLoadingDataRelease() {
-    return this.$store.state.datarelease.loading
-  }
-
-  get apparent() {
-    return this.lightcurve.detections.concat(this.dataReleaseValues)
-  }
+  isLoading = true
+  error = ''
+  height = '0%'
 
   get objectInformation() {
     return this.$store.state.object.object
@@ -161,54 +50,40 @@ export default class CardLightCurve extends Vue {
     return this.$store.state.object.objectId
   }
 
-  @Watch('objectInformation')
-  onObjectInformation(val) {
-    this.options.forEach((x) => {
-      switch (x.value) {
-        case 'difference':
-          x.default = !val.corrected
-          break
-        case 'apparent':
-          x.show = val.corrected
-          x.default = val.corrected
-          break
-        case 'folded':
-          x.show = this.period !== null && val.corrected
-          break
-      }
-    })
+  updatePlotSelected(event) {
+    this.selected = event
   }
 
-  @Watch('dataRelease')
-  onDataReleaseValues(val) {
-    this.options.forEach((x) => {
-      switch (x.value) {
-        case 'apparent':
-          x.show = this.objectInformation.corrected || val.length > 0
-          x.default = this.objectInformation.corrected
-          break
-        case 'folded':
-          x.show =
-            this.period !== null &&
-            (this.objectInformation.corrected || val.length > 0)
-          break
+  mounted() {
+    this.$el.addEventListener('htmx:responseError', (event) => {
+      this.error = event.detail.error
+      this.isLoading = false
+    })
+    this.$el.addEventListener('htmx:afterRequest', (event) => {
+      if (event.detail.successful) {
+        this.error = ''
+        this.isLoading = false
+        this.height = '100%'
       }
     })
+    document.body.addEventListener('onDetectionClick', (val) => {
+      if (val) this.$store.dispatch('lightcurve/changeDetection', val.detail)
+    })
   }
 
-  @Watch('period')
-  onPeriod(val) {
-    if (this.objectInformation) {
-      this.options[2].show = val !== null && this.objectInformation.corrected
+  @Watch('objectId', { immediate: true })
+  onIdChange(newId) {
+    this.error = ''
+    this.isLoading = true
+    if (newId) {
+      const url = `${this.$config.ztfApiv2Url}/lightcurve/htmx/lightcurve?oid=${newId}`
+      const myDiv = document.getElementById('lightcurve-container')
+      if (myDiv) {
+        myDiv.innerHTML = `<div hx-get=${url} hx-trigger="updateLightcurve from:body" hx-swap="outerHTML"></div>`
+        htmx.process(myDiv)
+        document.body.dispatchEvent(new Event('updateLightcurve'))
+      }
     }
   }
-
-  onDetectionClick(val) {
-    if (val) this.$store.dispatch('lightcurve/changeDetection', val.index)
-  }
-
-  updatePlotSelected(event) {
-    this.selected = event
-  }
 }
 </script>
diff --git a/layouts/default.vue b/layouts/default.vue
index fa29079c..de8ec047 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import { Vue, Component } from 'nuxt-property-decorator'
+import { Vue, Component, Watch } from 'nuxt-property-decorator'
 import { userStore } from '~/store'
 @Component
 export default class DefaultLayout extends Vue {
@@ -75,5 +75,18 @@ export default class DefaultLayout extends Vue {
     }
     return this.userData.name[0] + (this.userData.last_name[0] || '')
   }
+
+  get isDark() {
+    return this.$vuetify.theme.isDark
+  }
+
+  @Watch('isDark', { immediate: true })
+  onIsDarkChange(newIsDark) {
+    if (newIsDark) {
+      document.body.classList.add('dark')
+    } else {
+      document.body.classList.remove('dark')
+    }
+  }
 }
 </script>
diff --git a/nuxt.config.js b/nuxt.config.js
index 0b52c036..97b1312c 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -110,7 +110,8 @@ export default {
     ztfApiBaseUrl:
       process.env.ZTF_API_BASE_URL ||
       'https://dev-api.alerce.online/alerts/v1/',
-    ztfApiv2Url: 'https://api.staging.alerce.online/v2',
+    ztfApiv2Url:
+      process.env.ZTF_V2_API_URL || 'https://api.staging.alerce.online/v2',
     usersApiBaseUrl:
       process.env.USERS_API_BASE_URL || 'https://dev.users.alerce.online/users',
     googleRedirectUri:
diff --git a/package-lock.json b/package-lock.json
index 8461a44e..dc87b693 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,10 +5,9 @@
   "requires": true,
   "packages": {
     "": {
-      "name": "ztf_explorer",
       "version": "1.0.0",
       "dependencies": {
-        "@alerce/components": "0.0.46-dev",
+        "@alerce/components": "0.0.50-dev",
         "@nuxtjs/axios": "^5.11.0",
         "@nuxtjs/google-analytics": "^2.4.0",
         "@nuxtjs/pwa": "^3.0.1",
@@ -19,6 +18,7 @@
         "gulp": "^4.0.2",
         "gulp-awspublish": "^4.1.2",
         "gulp-cloudfront-invalidate-aws-publish": "^1.0.0",
+        "htmx.org": "^1.9.6",
         "julian": "^0.2.0",
         "lodash.debounce": "^4.0.8",
         "nuxt": "^2.15.0",
@@ -44,9 +44,9 @@
       }
     },
     "node_modules/@alerce/components": {
-      "version": "0.0.46-dev",
-      "resolved": "https://registry.npmjs.org/@alerce/components/-/components-0.0.46-dev.tgz",
-      "integrity": "sha512-uSeXP5VxK2zG1UINW9nJTOfIraLuNvUB3043cwlr7u09JsAHTtCHY4NZh908WK/gRxPbVXdSKaIC4XQTjCOA2Q==",
+      "version": "0.0.50-dev",
+      "resolved": "https://registry.npmjs.org/@alerce/components/-/components-0.0.50-dev.tgz",
+      "integrity": "sha512-Md8mFD5ud0V9U/G35kIaB7aIjD5vjAy9vXoPVENyTf/dF00zyyBVj1EVBhzTVDV82Y6ur5HfqAJdfE8dsXCaxg==",
       "dependencies": {
         "@cquiroz/aladin-lite": "^0.5.1",
         "@mdi/font": "^4.9.95",
@@ -2039,6 +2039,7 @@
         "jest-resolve": "^26.6.2",
         "jest-util": "^26.6.2",
         "jest-worker": "^26.6.2",
+        "node-notifier": "^8.0.0",
         "slash": "^3.0.0",
         "source-map": "^0.6.0",
         "string-length": "^4.0.1",
@@ -2624,6 +2625,7 @@
       "dependencies": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
+        "fsevents": "~2.3.2",
         "glob-parent": "~5.1.2",
         "is-binary-path": "~2.1.0",
         "is-glob": "~4.0.1",
@@ -2987,6 +2989,7 @@
       "dependencies": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
+        "fsevents": "~2.3.2",
         "glob-parent": "~5.1.2",
         "is-binary-path": "~2.1.0",
         "is-glob": "~4.0.1",
@@ -3506,6 +3509,9 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
       "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
+      "dependencies": {
+        "graceful-fs": "^4.1.6"
+      },
       "optionalDependencies": {
         "graceful-fs": "^4.1.6"
       }
@@ -4262,6 +4268,7 @@
         "merge-source-map": "^1.1.0",
         "postcss": "^7.0.36",
         "postcss-selector-parser": "^6.0.2",
+        "prettier": "^1.18.2 || ^2.0.0",
         "source-map": "~0.6.1",
         "vue-template-es2015-compiler": "^1.9.0"
       },
@@ -6385,6 +6392,7 @@
         "anymatch": "^2.0.0",
         "async-each": "^1.0.1",
         "braces": "^2.3.2",
+        "fsevents": "^1.2.7",
         "glob-parent": "^3.1.0",
         "inherits": "^2.0.3",
         "is-binary-path": "^1.0.0",
@@ -8315,7 +8323,8 @@
         "esprima": "^4.0.1",
         "estraverse": "^5.2.0",
         "esutils": "^2.0.2",
-        "optionator": "^0.8.1"
+        "optionator": "^0.8.1",
+        "source-map": "~0.6.1"
       },
       "bin": {
         "escodegen": "bin/escodegen.js",
@@ -8545,6 +8554,9 @@
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
       "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
       "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.1.6"
+      },
       "optionalDependencies": {
         "graceful-fs": "^4.1.6"
       }
@@ -11249,6 +11261,11 @@
         "entities": "^2.0.0"
       }
     },
+    "node_modules/htmx.org": {
+      "version": "1.9.6",
+      "resolved": "https://registry.npmjs.org/htmx.org/-/htmx.org-1.9.6.tgz",
+      "integrity": "sha512-4Zebo9nzg8u2ZHuIJmvB/nQS6kIMLIoEfhTg/oRwyCIJhL5MLA/jPU1EPEBtGOmG4ZG0k05Vpd3sab2+zfvteQ=="
+    },
     "node_modules/http-errors": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
@@ -12890,6 +12907,7 @@
         "@types/node": "*",
         "anymatch": "^3.0.3",
         "fb-watchman": "^2.0.0",
+        "fsevents": "^2.1.2",
         "graceful-fs": "^4.2.4",
         "jest-regex-util": "^26.0.0",
         "jest-serializer": "^26.6.2",
@@ -14338,6 +14356,7 @@
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
       "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
       "dependencies": {
+        "graceful-fs": "^4.1.6",
         "universalify": "^2.0.0"
       },
       "optionalDependencies": {
@@ -19295,6 +19314,7 @@
       "dependencies": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
+        "fsevents": "~2.3.2",
         "glob-parent": "~5.1.2",
         "is-binary-path": "~2.1.0",
         "is-glob": "~4.0.1",
@@ -22202,8 +22222,10 @@
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
       "integrity": "sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==",
       "dependencies": {
+        "chokidar": "^3.4.1",
         "graceful-fs": "^4.1.2",
-        "neo-async": "^2.5.0"
+        "neo-async": "^2.5.0",
+        "watchpack-chokidar2": "^2.0.1"
       },
       "optionalDependencies": {
         "chokidar": "^3.4.1",
@@ -22267,6 +22289,7 @@
       "dependencies": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
+        "fsevents": "~2.3.2",
         "glob-parent": "~5.1.2",
         "is-binary-path": "~2.1.0",
         "is-glob": "~4.0.1",
@@ -23516,9 +23539,9 @@
   },
   "dependencies": {
     "@alerce/components": {
-      "version": "0.0.46-dev",
-      "resolved": "https://registry.npmjs.org/@alerce/components/-/components-0.0.46-dev.tgz",
-      "integrity": "sha512-uSeXP5VxK2zG1UINW9nJTOfIraLuNvUB3043cwlr7u09JsAHTtCHY4NZh908WK/gRxPbVXdSKaIC4XQTjCOA2Q==",
+      "version": "0.0.50-dev",
+      "resolved": "https://registry.npmjs.org/@alerce/components/-/components-0.0.50-dev.tgz",
+      "integrity": "sha512-Md8mFD5ud0V9U/G35kIaB7aIjD5vjAy9vXoPVENyTf/dF00zyyBVj1EVBhzTVDV82Y6ur5HfqAJdfE8dsXCaxg==",
       "requires": {
         "@cquiroz/aladin-lite": "^0.5.1",
         "@mdi/font": "^4.9.95",
@@ -32194,6 +32217,11 @@
         "entities": "^2.0.0"
       }
     },
+    "htmx.org": {
+      "version": "1.9.6",
+      "resolved": "https://registry.npmjs.org/htmx.org/-/htmx.org-1.9.6.tgz",
+      "integrity": "sha512-4Zebo9nzg8u2ZHuIJmvB/nQS6kIMLIoEfhTg/oRwyCIJhL5MLA/jPU1EPEBtGOmG4ZG0k05Vpd3sab2+zfvteQ=="
+    },
     "http-errors": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
diff --git a/package.json b/package.json
index d28ce127..46625c29 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "gulp": "^4.0.2",
     "gulp-awspublish": "^4.1.2",
     "gulp-cloudfront-invalidate-aws-publish": "^1.0.0",
+    "htmx.org": "^1.9.6",
     "julian": "^0.2.0",
     "lodash.debounce": "^4.0.8",
     "nuxt": "^2.15.0",
diff --git a/plugins/avro.js b/plugins/avro.js
index 5d57325e..28ed39f5 100644
--- a/plugins/avro.js
+++ b/plugins/avro.js
@@ -9,7 +9,7 @@ export default function ({ $axios, $config }, inject) {
 
   avroApi.getAvroInfo = (oid, candid, surveyId, request = null) => {
     const token = localStorage.getItem('access_token')
-    const config = {  params: { oid, candid, survey_id: surveyId } }
+    const config = { params: { oid, candid, survey_id: surveyId } }
     if (request) {
       config.cancelToken = request.token
     }
diff --git a/store/filters.js b/store/filters.js
index 90d40186..ac638455 100644
--- a/store/filters.js
+++ b/store/filters.js
@@ -269,7 +269,7 @@ export default class Filters extends VuexModule {
   }
 
   @VuexAction({ rawError: true })
-  async getLimitValues() {
+  getLimitValues() {
     // let resp = await this.store.$ztfApi.getLimitValues()
     // resp = resp.data
     const limitNdet = [1, 30000]
diff --git a/store/lightcurve.js b/store/lightcurve.js
index 76296573..44c71788 100644
--- a/store/lightcurve.js
+++ b/store/lightcurve.js
@@ -34,6 +34,11 @@ export default class LightCurveStore extends VuexModule {
     this.error = val
   }
 
+  @VuexMutation
+  setActiveRequest(req) {
+    this.activeRequest = req
+  }
+
   @VuexMutation
   setSelectedDetection(val) {
     this.selectedDetection = val
@@ -44,18 +49,13 @@ export default class LightCurveStore extends VuexModule {
     this.setSelectedDetection(val)
   }
 
-  @VuexMutation
-  setActiveRequest(req) {
-    this.activeRequest = req
-  }
-
   @VuexAction({ rawError: true })
   async getLightCurve(val) {
     this.setLoading(true)
     this.setDetections([])
     this.setNonDetections([])
 
-    // making zrf sync request
+    // making ztf sync request
     if (this.activeRequest) {
       this.activeRequest.cancel('Cancel request due to new request sent')
       this.setActiveRequest(null)
@@ -89,6 +89,8 @@ export default class LightCurveStore extends VuexModule {
       this.setLoading(false)
     }
 
+    /*
+
     // making atlas sync request
     if (this.activeRequest) {
       this.activeRequest.cancel('Cancel request due to new request sent')
@@ -124,5 +126,6 @@ export default class LightCurveStore extends VuexModule {
       }
       this.setLoading(false)
     }
+  */
   }
 }