diff --git a/images/toggle-closed.gif b/images/toggle-closed.gif
new file mode 100644
index 000000000..cac5ac03d
Binary files /dev/null and b/images/toggle-closed.gif differ
diff --git a/images/toggle-open.gif b/images/toggle-open.gif
new file mode 100644
index 000000000..00f0a6e49
Binary files /dev/null and b/images/toggle-open.gif differ
diff --git a/javascript/TogglePanel.js b/javascript/TogglePanel.js
index 0705cacfb..70080bda5 100755
--- a/javascript/TogglePanel.js
+++ b/javascript/TogglePanel.js
@@ -2,6 +2,9 @@ Behaviour.register({
 	'h2.TogglePanelHeader' : {
 		onclick : function() {
 			var contentDiv = $('panel_' + this.id);
+			var toggleID = this.id.replace('panel_','') + '_toggle';
+			Element.toggle(toggleID + '_closed');
+			Element.toggle(toggleID + '_open');
 			if(contentDiv.style.display == 'none') {
 				contentDiv.style.display = '';
 				Element.removeClassName(this, 'closed');
diff --git a/templates/TogglePanel.ss b/templates/TogglePanel.ss
index 973aefbc9..f48cb2eee 100755
--- a/templates/TogglePanel.ss
+++ b/templates/TogglePanel.ss
@@ -1,4 +1,8 @@
-<h2 id="$id" class="TogglePanelHeader$ClosedClass">$Title</h2>
+<h2 id="$id" style="cursor: pointer;" class="TogglePanelHeader$ClosedClass">
+	<img id="{$id}_toggle_closed" src="sapphire/images/toggle-closed.gif" alt="+" title="Show" />
+	<img id="{$id}_toggle_open" src="sapphire/images/toggle-open.gif" alt="-" style="display:none;" title="Hide" /> 
+	$Title
+</h2>
 <div id="panel_$id" $ClosedStyle>
 <% control FieldSet %>
 $FieldHolder