diff --git a/website/css/website.css b/website/css/website.css
index ea88396..36e306d 100644
--- a/website/css/website.css
+++ b/website/css/website.css
@@ -97,3 +97,15 @@
 .avatar-x-large img {
 	width: 100px; 
 }
+
+.carousel-control .icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 5;
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  margin-top: -10px;
+  margin-left: -10px;
+}
diff --git a/website/doctype/website_slideshow/website_slideshow.txt b/website/doctype/website_slideshow/website_slideshow.txt
index 2887d4b..e67e1f8 100644
--- a/website/doctype/website_slideshow/website_slideshow.txt
+++ b/website/doctype/website_slideshow/website_slideshow.txt
@@ -1,8 +1,8 @@
 [
  {
-  "creation": "2013-03-07 14:48:40", 
+  "creation": "2013-03-07 15:53:15", 
   "docstatus": 0, 
-  "modified": "2012-12-25 16:56:34", 
+  "modified": "2013-05-28 16:57:32", 
   "modified_by": "Administrator", 
   "owner": "Administrator"
  }, 
@@ -53,6 +53,7 @@
  }, 
  {
   "depends_on": "eval:!doc.__islocal", 
+  "description": "Note: For best results, images must be of the same size and width must be greater than height.", 
   "doctype": "DocField", 
   "fieldname": "sb0", 
   "fieldtype": "Section Break", 
diff --git a/website/templates/html/slideshow.html b/website/templates/html/slideshow.html
index b26338c..b148cb1 100644
--- a/website/templates/html/slideshow.html
+++ b/website/templates/html/slideshow.html
@@ -1,6 +1,17 @@
 {% if slideshow %}
 {{ slideshow_header }}
-<div id="myCarousel" class="carousel slide">
+
+
+<div id="the-carousel" class="carousel slide">
+	<!-- Indicators -->
+	<ol class="carousel-indicators">
+		{% for slide in obj.slides %}
+			<li data-target="#the-carousel" data-slide-to="0" 
+				{%- if loop.index==0 %}class="active"{% endif %}></li>
+		{% endfor %}
+	</ol>
+	
+	<!-- Wrapper for slides -->
 	<div class="carousel-inner">
 		{% for slide in obj.slides %}
 		<div class="{% if slide.idx==1 %}active {% endif %}item">
@@ -14,10 +25,15 @@
 		</div>
 		{% endfor %}
 	</div>
-	<a class="carousel-control left" href="#myCarousel"
-		data-slide="prev">&lsaquo;</a>
-	<a class="carousel-control right" href="#myCarousel" 
-		data-slide="next">&rsaquo;</a>
-	</div>
-	<script>$(".carousel").carousel();</script>
+
+	<!-- Controls -->
+	<a class="left carousel-control" href="#the-carousel" data-slide="prev">
+		<span class="icon icon-chevron-left"></span>
+	</a>
+	<a class="right carousel-control" href="#the-carousel" data-slide="next">
+		<span class="icon icon-chevron-right"></span>
+	</a>
+</div>
+
+<script>$(".carousel").carousel();</script>
 {% endif %}