diff --git a/packages/flowplayer-vertical-volume-control/package.json b/packages/flowplayer-vertical-volume-control/package.json
deleted file mode 100644
index c5f7c49..0000000
--- a/packages/flowplayer-vertical-volume-control/package.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "name": "@flowplayer/components-flowplayer-vertical-volume-control",
-  "main": "./index.ts",
-  "description": "A vertical volume bar",
-  "flowplayer": {
-    "componentName": "flowplayer-vertical-volume-control",
-    "overridenComponent": "flowplayer-volume-control",
-    "className": "FlowplayerVerticalVolumeControl"
-  }
-}
diff --git a/packages/flowplayer-vertical-volume-control/index.ts b/packages/vertical-volume-bar/index.ts
similarity index 93%
rename from packages/flowplayer-vertical-volume-control/index.ts
rename to packages/vertical-volume-bar/index.ts
index 55b5407..0df8a36 100644
--- a/packages/flowplayer-vertical-volume-control/index.ts
+++ b/packages/vertical-volume-bar/index.ts
@@ -5,7 +5,7 @@ import support from "../utils"
 import { SliderStates, makeSlider } from "./slider"
 
 
-export default class FlowplayerVerticalVolumeControl extends HTMLElement {
+export default class VerticalVolume extends HTMLElement {
 
   constructor(player: Player) {
     super()
@@ -80,5 +80,5 @@ export default class FlowplayerVerticalVolumeControl extends HTMLElement {
     progress.style.height = player.muted ? "0" : Math.round(amount * 100) + "%"
   }
 }
-// handle umd installs
-install("flowplayer-volume-control", "flowplayer-vertical-volume-control", FlowplayerVerticalVolumeControl)
+
+install("flowplayer-volume-control", "vertical-volume-bar", VerticalVolume)
diff --git a/packages/vertical-volume-bar/package.json b/packages/vertical-volume-bar/package.json
new file mode 100644
index 0000000..f166fcd
--- /dev/null
+++ b/packages/vertical-volume-bar/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "@flowplayer/components-vertical-volume-bar",
+  "main": "./index.ts",
+  "description": "A vertical volume bar",
+  "flowplayer": {
+    "componentName": "vertical-volume-bar",
+    "overridenComponent": "flowplayer-volume-control",
+    "className": "VerticalVolume"
+  }
+}
diff --git a/packages/flowplayer-vertical-volume-control/slider.ts b/packages/vertical-volume-bar/slider.ts
similarity index 100%
rename from packages/flowplayer-vertical-volume-control/slider.ts
rename to packages/vertical-volume-bar/slider.ts
diff --git a/packages/vertical-volume-bar/vertical-volume.css b/packages/vertical-volume-bar/vertical-volume.css
new file mode 100644
index 0000000..81aab5e
--- /dev/null
+++ b/packages/vertical-volume-bar/vertical-volume.css
@@ -0,0 +1,45 @@
+.fp-volume-control-vertical {
+    position: relative;
+}
+
+.fp-volume-control-vertical .fp-volume-vertical {
+    position: absolute;
+    cursor: pointer;
+    opacity: 0;
+    padding: 0.5em;
+    left: -0.4em;
+    bottom: 1.3em;
+    height: 10em;
+}
+
+.fp-volume-control-vertical .fp-volume-vertical:focus {
+    opacity: 1;
+}
+
+.fp-volume-control-vertical .fp-volume-container {
+    display: flex;
+    background-color: #a7b4b8;
+    height: 100%;
+    width: 0.4em;
+    align-items: flex-end;
+}
+
+.fp-volume-control-vertical .fp-volume-progress {
+    width: 100%;
+}
+
+.fp-volume-control-vertical .fp-dragger {
+    left: -0.29em;
+}
+
+.fp-volume-control-vertical .fp-volume-mute-unmute {
+    padding-top: 1.2em;
+}
+
+.fp-volume-control-vertical .fp-volume-mute-unmute:after {
+    padding-bottom: 0.7em;
+}
+
+.fp-volume-control-vertical .fp-volume-mute-unmute:focus + .fp-volume-vertical {
+    opacity: 1;
+}