diff --git a/css/imagefield-slideshow.css b/css/imagefield-slideshow.css
index 23ffa2e..0fab465 100644
--- a/css/imagefield-slideshow.css
+++ b/css/imagefield-slideshow.css
@@ -27,4 +27,26 @@
     -o-transform-style: preserve-3d;
     perspective: 1000;
     transform-style: preserve-3d;
-}
\ No newline at end of file
+}
+
+.prev-next {
+    border-radius: 50%;
+    background-color: #eee;
+    display: inline-block;
+    padding: 2px 6px;
+    text-decoration: none;
+    color: black;
+    position: relative;
+    float: left;
+    z-index: 10000;
+    margin: 10px;
+    font-size: 10px;
+}
+a.prev-next:hover {
+    background-color: #ddd;
+    color: black;
+    text-decoration: none;
+}
+.prev-next.next {
+    float: right;
+}
diff --git a/templates/imagefield-slideshow.html.twig b/templates/imagefield-slideshow.html.twig
index 226a8da..ebddf64 100644
--- a/templates/imagefield-slideshow.html.twig
+++ b/templates/imagefield-slideshow.html.twig
@@ -14,6 +14,10 @@
  */
 #}
 <div class="imagefield_slideshow-wrapper">
+    {% if prev_next %}
+        <a href=# class="prev-next prev" id="imagefield_slideshow-prev"><</a>
+        <a href=# class="prev-next next" id="imagefield_slideshow-next">></a>
+    {% endif %}
     <div class="cycle-slideshow"
          data-cycle-pause-on-hover='{{ pause }}'
          data-cycle-fx="{{ effect }}"
@@ -29,10 +33,4 @@
             <img src="{{ value }}" />
         {% endfor %}
     </div>
-    {% if prev_next %}
-        <div class="prev-next">
-            <a href=# id="imagefield_slideshow-prev">Prev</a>
-            <a href=# id="imagefield_slideshow-next">Next</a>
-        </div>
-    {% endif %}
 </div>