diff --git a/src/components/chart/Chart.vue b/src/components/chart/Chart.vue
index fb1ed793..3bca3926 100644
--- a/src/components/chart/Chart.vue
+++ b/src/components/chart/Chart.vue
@@ -36,7 +36,7 @@
         @click="toggleTimeframeDropdown($event, $refs.timeframeButton)"
         class="-arrow -cases pane-header__highlight pane-chart__timeframe-selector"
       >
-        {{ !isKnownTimeframe ? timeframeForHuman : '' }}
+        <span>{{ !isKnownTimeframe ? timeframeForHuman : '' }}</span>
       </Btn>
       <hr />
     </pane-header>
diff --git a/src/components/chart/TimeframeDropdown.vue b/src/components/chart/TimeframeDropdown.vue
index 166b8727..b029a834 100644
--- a/src/components/chart/TimeframeDropdown.vue
+++ b/src/components/chart/TimeframeDropdown.vue
@@ -1,5 +1,5 @@
 <template>
-  <dropdown v-model="value">
+  <dropdown :value="value" @input="$emit('input', $event)">
     <div class="timeframe-dropdown">
       <div class="dropdown-item timeframe-dropdown__header" @click.stop>
         <timeframe-input
@@ -233,14 +233,22 @@ export default {
     }
   }
 
-  &:hover {
-    .icon-star {
-      display: block;
+  @media (hover: hover) and (pointer: fine) {
+    &:hover {
+      .icon-star {
+        display: block;
 
-      &:hover {
-        color: var(--theme-color-base);
+        &:hover {
+          color: var(--theme-color-base);
+        }
       }
     }
   }
+
+  @media (hover: none) and (pointer: coarse) {
+    .icon-star {
+      display: block;
+    }
+  }
 }
 </style>
diff --git a/src/components/chart/controls.ts b/src/components/chart/controls.ts
index e47496e2..8e82ee77 100644
--- a/src/components/chart/controls.ts
+++ b/src/components/chart/controls.ts
@@ -593,6 +593,10 @@ export default class ChartControl {
       components.timeframeDropdown = createComponent(module.default, propsData)
 
       mountComponent(components.timeframeDropdown)
+
+      components.timeframeDropdown.$on('input', value => {
+        components.timeframeDropdown.value = value
+      })
     } else {
       if (components.timeframeDropdown.value === event.currentTarget) {
         components.timeframeDropdown.value = null
diff --git a/src/components/framework/Btn.vue b/src/components/framework/Btn.vue
index 8cc2ca3b..1ebacc35 100644
--- a/src/components/framework/Btn.vue
+++ b/src/components/framework/Btn.vue
@@ -7,13 +7,13 @@
     class="btn"
     @click="onClick"
   >
-    <loader v-if="loading" class="btn__loader" small />
+    <loader v-if="isLoading" class="btn__loader" small />
     <slot />
   </component>
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue, Watch } from 'vue-property-decorator'
 import Loader from '@/components/framework/Loader.vue'
 
 @Component({
@@ -50,10 +50,15 @@ import Loader from '@/components/framework/Loader.vue'
   }
 })
 export default class Btn extends Vue {
-  loading: boolean
+  isLoading = false
+
+  @Watch('loading')
+  onLoadingChange(value) {
+    this.isLoading = value
+  }
 
   onClick(event) {
-    if (!this.loading) {
+    if (!this.isLoading) {
       this.$emit('click', event)
     }
   }
@@ -63,7 +68,6 @@ export default class Btn extends Vue {
 <style lang="scss" scoped>
 .btn {
   &__loader {
-    margin-right: 0.5rem;
     width: 0.5em;
     height: 0.5em;
 
diff --git a/src/components/indicators/IndicatorDetail.vue b/src/components/indicators/IndicatorDetail.vue
index 2e6e0be2..413d1aa8 100644
--- a/src/components/indicators/IndicatorDetail.vue
+++ b/src/components/indicators/IndicatorDetail.vue
@@ -2,18 +2,14 @@
   <transition name="indicator-detail" @after-leave="$emit('close')">
     <div v-if="opened" class="indicator-detail" @click="onBackdropClick">
       <div class="indicator-detail__wrapper hide-scrollbar">
-        <div
+        <IndicatorPreview
           class="indicator-detail__preview"
-          :style="{ '--image-height': imageHeight + 'px' }"
-        >
-          <Btn class="indicator-detail__close -text" @click="close">
-            <i class="icon-cross"></i>
-          </Btn>
-          <code class="indicator-detail__id -filled">
-            <small>#{{ indicator.id }}</small>
-          </code>
-          <img v-if="image" :src="image" @load="onImageLoad" />
-        </div>
+          :id="indicator.id"
+          :preview="indicator.preview"
+          :path="indicator.imagePath"
+          :is-installed="isInstalled"
+          @close="close"
+        ></IndicatorPreview>
         <div class="indicator-detail__content">
           <div class="indicator-detail__head">
             <div class="indicator-detail__name">
@@ -128,7 +124,7 @@
   </transition>
 </template>
 
-<script>
+<script lang="ts">
 import Btn from '@/components/framework/Btn.vue'
 import importService from '@/services/importService'
 import { ago, sleep } from '@/utils/helpers'
@@ -137,6 +133,7 @@ import workspacesService from '@/services/workspacesService'
 import EditResourceDialog from '@/components/library/EditResourceDialog.vue'
 import { openPublishDialog } from '@/components/library/helpers'
 import { computeThemeColorAlpha } from '@/utils/colors'
+import IndicatorPreview from './IndicatorPreview.vue'
 
 export default {
   props: {
@@ -150,12 +147,12 @@ export default {
     }
   },
   components: {
-    Btn
+    Btn,
+    IndicatorPreview
   },
   data() {
     return {
       opened: false,
-      imageHeight: 100,
       isInstalling: false,
       isPublishing: false,
       isFetchingVersions: false,
@@ -172,17 +169,6 @@ export default {
     isInstalled() {
       return !!this.indicator.script
     },
-    image() {
-      if (this.imageObjectUrl) {
-        return this.imageObjectUrl
-      }
-
-      if (this.indicator.imagePath) {
-        return `${import.meta.env.VITE_APP_LIB_URL}${this.indicator.imagePath}`
-      }
-
-      return null
-    },
     createdAt() {
       if (this.indicator.createdAt) {
         return `${ago(this.indicator.createdAt)} ago`
@@ -247,7 +233,6 @@ export default {
     indicator: {
       immediate: true,
       handler() {
-        this.loadPreview()
         if (this.isInstalling) {
           this.addToChart()
         }
@@ -257,12 +242,6 @@ export default {
   mounted() {
     this.opened = true
   },
-  beforeDestroy() {
-    if (this.imageObjectUrl) {
-      URL.revokeObjectURL(this.imageObjectUrl)
-      this.imageObjectUrl = null
-    }
-  },
   methods: {
     close() {
       this.opened = false
@@ -289,24 +268,6 @@ export default {
         this.close()
       }
     },
-    loadPreview() {
-      this.clearPreview()
-
-      const preview = this.indicator.preview
-
-      if (
-        this.isInstalled &&
-        (preview instanceof Blob || preview instanceof File)
-      ) {
-        this.imageObjectUrl = URL.createObjectURL(preview)
-      }
-    },
-    clearPreview() {
-      if (this.imageObjectUrl) {
-        URL.revokeObjectURL(this.imageObjectUrl)
-        this.imageObjectUrl = null
-      }
-    },
     async fetchIndicatorVersions() {
       if (this.indicator.versions) {
         return
@@ -366,10 +327,6 @@ export default {
           throw new Error('invalid payload')
         }
 
-        if (this.image) {
-          indicator.data.preview = await (await fetch(this.image)).blob()
-        }
-
         await importService.importIndicator(indicator, false, true)
       } catch (error) {
         console.error(error)
@@ -473,10 +430,6 @@ export default {
         await workspacesService.saveIndicator(indicator, true)
         this.$emit('reload', indicator.id)
       }
-    },
-    onImageLoad(event) {
-      const img = event.target
-      this.imageHeight = img.naturalHeight
     }
   }
 }
@@ -493,37 +446,8 @@ export default {
   z-index: 27;
 
   &__preview {
-    height: 100px;
-    width: 100%;
-    position: relative;
-    overflow: hidden;
     border-radius: 0.75rem 0.75rem 0 0;
-    background-color: var(--theme-background-o75);
-    transition: height 0.2s $ease-out-expo;
     max-height: 420px;
-
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      border-radius: 0.75rem 0.75rem 0 0;
-    }
-
-    &:hover {
-      height: var(--image-height);
-    }
-  }
-
-  &__id {
-    position: absolute;
-    top: 0.5rem;
-    left: 0.5rem;
-  }
-
-  &__close {
-    position: absolute;
-    top: 0.5rem;
-    right: 0.5rem;
   }
 
   &__name {
diff --git a/src/components/indicators/IndicatorLibraryDialog.vue b/src/components/indicators/IndicatorLibraryDialog.vue
index 9af053aa..aaaaa055 100644
--- a/src/components/indicators/IndicatorLibraryDialog.vue
+++ b/src/components/indicators/IndicatorLibraryDialog.vue
@@ -15,10 +15,7 @@
     <template #subheader>
       <tabs v-model="tab">
         <tab name="installed"> Installed </tab>
-        <tab v-if="communityTabEnabled" name="community">
-          Community
-          <span class="badge -red ml8">new</span>
-        </tab>
+        <tab v-if="communityTabEnabled" name="community"> Community </tab>
       </tabs>
     </template>
 
diff --git a/src/components/indicators/IndicatorPreview.vue b/src/components/indicators/IndicatorPreview.vue
new file mode 100644
index 00000000..b1a0134b
--- /dev/null
+++ b/src/components/indicators/IndicatorPreview.vue
@@ -0,0 +1,221 @@
+<template>
+  <div
+    class="indicator-preview"
+    @mousemove="moveImage"
+    @mouseleave="resetImage"
+    ref="preview"
+    :class="[isImageZoomed && 'indicator-preview--zoomed']"
+    :style="{ '--image-height': imageDimensions.height + 'px' }"
+  >
+    <Btn class="indicator-preview__close -text" @click="$emit('close')">
+      <i class="icon-cross"></i>
+    </Btn>
+    <code class="indicator-preview__id -filled">
+      <small>#{{ id }}</small>
+    </code>
+    <img v-if="image" :src="image" ref="image" @load="onImageLoad" />
+  </div>
+</template>
+
+<script lang="ts">
+import Btn from '@/components/framework/Btn.vue'
+
+export default {
+  props: {
+    id: {
+      type: String,
+      required: true
+    },
+    path: {
+      default: null
+    },
+    preview: {
+      default: null
+    },
+    isInstalled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  components: {
+    Btn
+  },
+  data() {
+    return {
+      imageDimensions: { width: 0, height: 0 },
+      imagePosition: { x: 0, y: 0 },
+      isImageZoomed: false,
+      imageObjectUrl: null
+    }
+  },
+  computed: {
+    source() {
+      return this.preview || this.path
+    },
+    image() {
+      if (this.imageObjectUrl) {
+        return this.imageObjectUrl
+      }
+
+      if (this.path) {
+        return `${import.meta.env.VITE_APP_LIB_URL}${this.path}`
+      }
+
+      return null
+    }
+  },
+  watch: {
+    source: {
+      immediate: true,
+      handler() {
+        this.loadPreview()
+      }
+    }
+  },
+  beforeDestroy() {
+    if (this.imageObjectUrl) {
+      URL.revokeObjectURL(this.imageObjectUrl)
+      this.imageObjectUrl = null
+    }
+  },
+  methods: {
+    loadPreview() {
+      this.clearPreview()
+
+      const preview = this.preview
+
+      if (
+        this.isInstalled &&
+        (preview instanceof Blob || preview instanceof File)
+      ) {
+        this.imageObjectUrl = URL.createObjectURL(preview)
+      }
+    },
+    clearPreview() {
+      if (this.imageObjectUrl) {
+        URL.revokeObjectURL(this.imageObjectUrl)
+        this.imageObjectUrl = null
+      }
+    },
+    onImageLoad(event) {
+      const img = event.target as HTMLImageElement
+      const pxRatio = window.devicePixelRatio || 1
+      this.imageDimensions = {
+        height: img.naturalHeight / pxRatio,
+        width: img.naturalWidth / pxRatio
+      }
+
+      if (this.imageDimensions.width < this.$el.clientWidth) {
+        const ratio = this.imageDimensions.height / this.imageDimensions.width
+        this.imageDimensions.width = this.$el.clientWidth
+        this.imageDimensions.height = this.$el.clientWidth * ratio
+      }
+
+      img.style.width = this.imageDimensions.width + 'px'
+      img.style.height = this.imageDimensions.height + 'px'
+
+      this.centerImage()
+    },
+    centerImage() {
+      const preview = this.$refs.preview
+      const image = this.$refs.image
+
+      const previewRect = preview.getBoundingClientRect()
+      const imageRect = image.getBoundingClientRect()
+
+      const offsetX = (previewRect.width - imageRect.width) / 2
+      const offsetY = (previewRect.height - imageRect.height) / 2
+
+      this.imagePosition.x = offsetX
+      this.imagePosition.y = offsetY
+
+      image.style.transform = `translate(${offsetX}px, ${offsetY}px)`
+    },
+    scheduleImageZoom(event) {
+      if (this.isImageZoomed) {
+        return
+      }
+
+      if (this._imageZoomTimeout) {
+        clearTimeout(this._imageZoomTimeout)
+      }
+
+      this._imageZoomTimeout = setTimeout(async () => {
+        this._imageZoomTimeout = null
+        this.isImageZoomed = true
+        await this.$nextTick()
+        this.moveImage(event)
+      }, 1000)
+    },
+    moveImage(event) {
+      const preview = this.$refs.preview
+      const image = this.$refs.image
+
+      const previewRect = preview.getBoundingClientRect()
+      const imageRect = image.getBoundingClientRect()
+
+      if (this.isImageZoomed) {
+        previewRect.height = this.imageDimensions.height
+        imageRect.height = this.imageDimensions.height
+      }
+
+      const maxMoveX = Math.max(0, imageRect.width - previewRect.width)
+      const maxMoveY = Math.max(0, imageRect.height - previewRect.height)
+
+      const mouseX = event.clientX - previewRect.left
+      const mouseY = event.clientY - previewRect.top
+
+      const moveX = (mouseX / previewRect.width) * maxMoveX
+      const moveY = (mouseY / previewRect.height) * maxMoveY
+
+      const newX = Math.min(Math.max(-moveX, -maxMoveX), 0)
+      const newY = Math.min(Math.max(-moveY, -maxMoveY), 0)
+
+      this.imagePosition.x = newX
+      this.imagePosition.y = newY
+
+      image.style.transform = `translate(${newX}px, ${newY}px)`
+
+      this.scheduleImageZoom(event)
+    },
+    resetImage() {
+      this.isImageZoomed = false
+      this.centerImage()
+
+      if (this._imageZoomTimeout) {
+        clearTimeout(this._imageZoomTimeout)
+        this._imageZoomTimeout = null
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.indicator-preview {
+  height: 100px;
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  background-color: var(--theme-background-o75);
+  transition: height 0.2s $ease-out-expo;
+
+  &--zoomed {
+    height: var(--image-height);
+  }
+
+  &__id,
+  &__close {
+    position: absolute;
+    z-index: 1;
+    top: 0.5rem;
+  }
+
+  &__id {
+    left: 0.5rem;
+  }
+
+  &__close {
+    right: 0.5rem;
+  }
+}
+</style>
diff --git a/src/components/panes/PaneHeader.vue b/src/components/panes/PaneHeader.vue
index 7419efe4..4ea2d0dd 100644
--- a/src/components/panes/PaneHeader.vue
+++ b/src/components/panes/PaneHeader.vue
@@ -143,41 +143,25 @@ import Btn from '@/components/framework/Btn.vue'
 import { downloadAnything, getSiblings, slugify } from '@/utils/helpers'
 import dialogService from '@/services/dialogService'
 import { INFRAME } from '@/utils/constants'
+import { Prop } from 'vue-property-decorator'
 
 @Component({
   name: 'PaneHeader',
-  props: {
-    paneId: {
-      type: String
-    },
-    settings: {
-      type: Function,
-      default: null
-    },
-    showSearch: {
-      type: Boolean,
-      default: true
-    },
-    showName: {
-      type: Boolean,
-      default: true
-    },
-    split: {
-      type: Boolean,
-      default: true
-    }
-  },
   components: {
     Btn
   }
 })
 export default class PaneHeader extends Vue {
-  private settings?: () => Promise<any>
-  paneId: string
   paneDropdownTrigger = null
   isLoading = false
   isInFrame = INFRAME
 
+  @Prop(String) readonly paneId: string
+  @Prop({ default: null }) readonly settings?: () => Promise<any>
+  @Prop({ default: true }) readonly showSearch: boolean
+  @Prop({ default: true }) readonly showName: boolean
+  @Prop({ default: true }) readonly split: boolean
+
   get zoom() {
     return this.$store.state.panes.panes[this.paneId].zoom || 1
   }
diff --git a/src/services/aggregatorService.ts b/src/services/aggregatorService.ts
index f2b8b6bc..6e2f3ab5 100644
--- a/src/services/aggregatorService.ts
+++ b/src/services/aggregatorService.ts
@@ -268,7 +268,6 @@ class AggregatorService extends EventEmitter {
   listenVisibilityChange() {
     document.addEventListener('visibilitychange', () => {
       if (document.visibilityState === 'visible') {
-        console.log('made visible')
         this.worker.postMessage({ op: 'clearReconnectionTimeout' })
       }
     })
diff --git a/src/worker/aggregator.ts b/src/worker/aggregator.ts
index d36cc39a..d0d531da 100644
--- a/src/worker/aggregator.ts
+++ b/src/worker/aggregator.ts
@@ -881,7 +881,14 @@ class Aggregator {
 
   clearReconnectionTimeout() {
     for (const exchange of exchanges) {
-      exchange.reconnectAllClosedApis()
+      if (exchange.reconnectAllClosedApis()) {
+        this.ctx.postMessage({
+          op: 'notice',
+          data: {
+            title: `Reconnecting ${exchange.id}`
+          }
+        })
+      }
     }
   }
 }
diff --git a/src/worker/exchange.ts b/src/worker/exchange.ts
index a726425e..f2e91f64 100755
--- a/src/worker/exchange.ts
+++ b/src/worker/exchange.ts
@@ -423,13 +423,14 @@ class Exchange extends EventEmitter {
   /**
    * Reconnect api
    * @param {Api} api
+   * @returns true if has attempted a reconnection
    */
-  reconnectApi(api: Api) {
+  reconnectApi(api: Api): boolean {
     if (this.apis.indexOf(api) === -1) {
       console.debug(
         `[${this.id}.reconnectApi] reconnect api prevented because api doesn't exist anymore (url: ${api.url})`
       )
-      return
+      return false
     }
 
     console.debug(
@@ -443,9 +444,11 @@ class Exchange extends EventEmitter {
     )
 
     const pairsToReconnect = [...api._pending, ...api._connected]
-
+    const hasPairs = pairsToReconnect.length > 0
     this.removeWs(api)
     this.reconnectPairs(pairsToReconnect, api._errored)
+
+    return hasPairs
   }
 
   /**
@@ -826,12 +829,17 @@ class Exchange extends EventEmitter {
 
   reconnectAllClosedApis() {
     this.scheduledOperationsDelays = {}
+    let isReconecting = false
 
     for (const api of this.apis) {
       if (api.readyState == WebSocket.CLOSED) {
-        this.reconnectApi(api)
+        if (!isReconecting && this.reconnectApi(api)) {
+          isReconecting = true
+        }
       }
     }
+
+    return isReconecting
   }
 }