diff --git a/package.json b/package.json
index d7b9429..cfe2b99 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "vue-confetti": "^2.0.7",
     "vue-countup-v2": "^4.0.0",
     "vue-router": "^3.1.3",
+    "vue-slider-component": "^3.1.2",
     "vuex": "^3.1.2"
   },
   "devDependencies": {
@@ -59,4 +60,4 @@
     "> 1%",
     "last 2 versions"
   ]
-}
\ No newline at end of file
+}
diff --git a/src/components/Channels/Open.vue b/src/components/Channels/Open.vue
index 30a5d13..e77e503 100644
--- a/src/components/Channels/Open.vue
+++ b/src/components/Channels/Open.vue
@@ -40,21 +40,33 @@
 
         <!-- <small>{{ btc.confirmed.toLocaleString() }} Sats available out of {{ btc.total.toLocaleString() }} and {{ btc.pending.toLocaleString() }} pending</small> -->
       </b-col>
-
-      <b-col col cols="12">
-        <div class="mt-2 d-flex w-100 justify-content-between">
-          <div>
+    </b-row>
+    <b-row>
+      <b-col col cols="12" sm="6">
+        <small class="text-muted mb-4 d-block">Mining Fee</small>
+        <vue-slider
+          v-model="value2"
+          absorb
+          marks
+          :data="data"
+          :dotSize="[22, 22]"
+          :tooltip-formatter="formatter1"
+          contained
+          tooltip="always"
+          class="pl-3 pb-4"
+          :disabled="fee.fast.total <= 0"
+        ></vue-slider>
+      </b-col>
+      <b-col class="d-flex" col cols="12" sm="6">
+        <div class="mt-4 mt-sm-0 d-flex w-100 justify-content-between align-self-end">
+          <span>
             <small class="text-danger align-self-center" v-if="error">
               {{
               error
               }}
             </small>
-            <small
-              class="text-muted align-self-center"
-              v-else-if="fee.fast.total"
-            >Mining fee: {{ fee.fast.total }} Sats</small>
-          </div>
-          <b-button type="submit" variant="success" :disabled="isOpening">
+          </span>
+          <b-button type="submit" variant="success" :disabled="isOpening || !!error">
             {{
             this.isOpening ? "Opening..." : "Open Channel"
             }}
@@ -62,11 +74,22 @@
         </div>
       </b-col>
     </b-row>
+    <!-- <div class="mt-2 d-flex w-100 justify-content-between">
+      <div>
+      </div>
+      <b-button type="submit" variant="success" :disabled="isOpening">
+        {{
+        this.isOpening ? "Opening..." : "Open Channel"
+        }}
+      </b-button>
+    </div>-->
   </form>
 </template>
 
 <script>
 import { mapState } from "vuex";
+import VueSlider from "vue-slider-component";
+import "vue-slider-component/theme/default.css";
 
 import API from "@/helpers/api";
 import { btcToSats } from "@/helpers/units.js";
@@ -81,6 +104,9 @@ export default {
       fundingAmountInput: "",
       fundingAmount: 0,
       isOpening: false,
+      value2: "normal",
+      data: ["cheapest", "slow", "normal", "fast"],
+      formatter1: v => `${this.fee[v]["total"]} Sats`,
       fee: {
         fast: {
           total: 0,
@@ -249,9 +275,81 @@ export default {
     }
   },
   components: {
-    SatsBtcSwitch
+    SatsBtcSwitch,
+    VueSlider
   }
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss">
+/* Set the theme color of the component */
+$themeColor: #edeef1;
+
+$bgColor: #edeef1;
+$railBorderRadius: 15px !default;
+
+$dotShadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
+$dotShadowFocus: 0px 4px 10px rgba(0, 0, 0, 0.4);
+$dotBgColor: #fff !default;
+$dotBgColorDisable: #ccc !default;
+$dotBorderRadius: 50% !default;
+
+$tooltipBgColor: #141821 !default;
+$tooltipColor: #fff !default;
+$tooltipBorderRadius: 5px !default;
+$tooltipPadding: 2px 5px !default;
+$tooltipMinWidth: 20px !default;
+$tooltipArrow: 10px !default;
+$tooltipFontSize: 0.8rem !default;
+
+$stepBorderRadius: 50% !default;
+$stepBgColor: rgba(0, 0, 0, 0.1) !default;
+
+$labelFontSize: 0.8rem;
+
+/* import theme style */
+@import "~vue-slider-component/lib/theme/default.scss";
+
+.vue-slider-ltr .vue-slider-mark-label,
+.vue-slider-rtl .vue-slider-mark-label {
+  margin-top: 1.2rem;
+}
+
+.vue-slider-dot-handle {
+  transition: box-shadow 0.2s, background-color 0.2s ease;
+}
+.vue-slider-dot-tooltip {
+  transition: opacity 0.2s ease;
+}
+
+.vue-slider-rail {
+  cursor: pointer;
+}
+.vue-slider-disabled {
+  .vue-slider-rail {
+    cursor: not-allowed;
+  }
+}
+.vue-slider-dot-handle-disabled {
+  box-shadow: none;
+}
+.vue-slider-mark-label {
+  text-transform: capitalize;
+}
+// .vue-slider-ltr {
+//   .vue-slider-mark:first-child {
+//     .vue-slider-mark-label,
+//     .vue-slider-mark-label {
+//       left: 0;
+//       transform: translateX(0);
+//     }
+//   }
+//   .vue-slider-mark:last-child {
+//     .vue-slider-mark-label,
+//     .vue-slider-mark-label {
+//       left: 0;
+//       transform: translateX(calc(-100% + 4px));
+//     }
+//   }
+// }
+</style>
diff --git a/yarn.lock b/yarn.lock
index 8e7463f..506f494 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7968,6 +7968,11 @@ vm-browserify@^1.0.1:
   resolved "https://registry.npm.taobao.org/vm-browserify/download/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha1-eGQcSIuObKkadfUR56OzKobl3aA=
 
+vue-class-component@^7.1.0:
+  version "7.2.3"
+  resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-7.2.3.tgz#a5b1abd53513a72ad51098752e2dedd499807cca"
+  integrity sha512-oEqYpXKaFN+TaXU+mRLEx8dX0ah85aAJEe61mpdoUrq0Bhe/6sWhyZX1JjMQLhVsHAkncyhedhmCdDVSasUtDw==
+
 vue-confetti@^2.0.7:
   version "2.0.7"
   resolved "https://registry.npm.taobao.org/vue-confetti/download/vue-confetti-2.0.7.tgz#986eb3d9f92b8424443409b4fbfa2fb6aaac92d5"
@@ -8011,11 +8016,25 @@ vue-loader@^15.7.2:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-property-decorator@^8.0.0:
+  version "8.4.2"
+  resolved "https://registry.yarnpkg.com/vue-property-decorator/-/vue-property-decorator-8.4.2.tgz#016e17f259f73bc547e77a50ce282ba18db4ee41"
+  integrity sha512-IqbARlvgPE2pzKfbecKxsu2yEH0Wv7hfHR6m4eZA3LTnNw9hveAX77vDfLFyTeMISS5N7Kucp/xRSHjcQ6bAfQ==
+  dependencies:
+    vue-class-component "^7.1.0"
+
 vue-router@^3.1.3:
   version "3.1.5"
   resolved "https://registry.npm.taobao.org/vue-router/download/vue-router-3.1.5.tgz#ff29b8a1e1306c526b52d4dc0532109f16c41231"
   integrity sha1-/ym4oeEwbFJrUtTcBTIQnxbEEjE=
 
+vue-slider-component@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/vue-slider-component/-/vue-slider-component-3.1.2.tgz#173608c86bb1c3469952fca368dd79cc7942d81c"
+  integrity sha512-pSVSoUTvRLYlkEr8pquNJMWtW3r5UU8GyUhWm0xfPBrNLWzcC/KNhRF2QtwccFuC+iTxjI03Za3EIM8UO09+Xw==
+  dependencies:
+    vue-property-decorator "^8.0.0"
+
 vue-style-loader@^4.1.0:
   version "4.1.2"
   resolved "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"