diff --git a/core/ui/ViewTemplate/unfold.tid b/core/ui/ViewTemplate/unfold.tid
index 331ec45ae..b145b605f 100644
--- a/core/ui/ViewTemplate/unfold.tid
+++ b/core/ui/ViewTemplate/unfold.tid
@@ -1,7 +1,14 @@
 title: $:/core/ui/ViewTemplate/unfold
 tags: $:/tags/ViewTemplate
 
-<$reveal tag="div" class="tc-tiddler-body" type="nomatch" state=<<folded-state>> text="show" default="show" retain="yes" animate="yes">
+<$reveal tag="div" type="nomatch" state=<<folded-state>> text="hide" default="show" retain="yes" animate="yes">
+<$button tooltip={{$:/language/Buttons/Fold/Hint}} aria-label={{$:/language/Buttons/Fold/Caption}} class="tc-fold-banner">
+<$action-sendmessage $message="tm-fold-tiddler" $param=<<currentTiddler>> foldedState=<<folded-state>>/>
+{{$:/core/images/chevron-up}}
+</$button>
+</$reveal>
+
+<$reveal tag="div" type="nomatch" state=<<folded-state>> text="show" default="show" retain="yes" animate="yes">
 <$button tooltip={{$:/language/Buttons/Unfold/Hint}} aria-label={{$:/language/Buttons/Unfold/Caption}} class="tc-unfold-banner">
 <$action-sendmessage $message="tm-fold-tiddler" $param=<<currentTiddler>> foldedState=<<folded-state>>/>
 {{$:/core/images/chevron-down}}
diff --git a/core/wiki/tags/ViewTemplate.tid b/core/wiki/tags/ViewTemplate.tid
index c89951b72..ab86265a7 100644
--- a/core/wiki/tags/ViewTemplate.tid
+++ b/core/wiki/tags/ViewTemplate.tid
@@ -1,2 +1,2 @@
 title: $:/tags/ViewTemplate
-list: [[$:/core/ui/ViewTemplate/title]] [[$:/core/ui/ViewTemplate/subtitle]] [[$:/core/ui/ViewTemplate/tags]] [[$:/core/ui/ViewTemplate/classic]] [[$:/core/ui/ViewTemplate/body]] [[$:/core/ui/ViewTemplate/unfold]]
+list: [[$:/core/ui/ViewTemplate/title]] [[$:/core/ui/ViewTemplate/unfold]] [[$:/core/ui/ViewTemplate/subtitle]] [[$:/core/ui/ViewTemplate/tags]] [[$:/core/ui/ViewTemplate/classic]] [[$:/core/ui/ViewTemplate/body]]
diff --git a/themes/tiddlywiki/vanilla/base.tid b/themes/tiddlywiki/vanilla/base.tid
index e6c6c334a..01ab3c267 100644
--- a/themes/tiddlywiki/vanilla/base.tid
+++ b/themes/tiddlywiki/vanilla/base.tid
@@ -435,29 +435,65 @@ button svg.tc-image-button, button .tc-image-button img {
 }
 
 .tc-unfold-banner {
+	position: absolute;
 	padding: 0;
 	margin: 0;
 	background: none;
 	border: none;
 	width: 100%;
+    width: calc(100% + 2px);
+    margin-left: -43px;
 	text-align: center;
-	border-top: 2px solid <<colour tiddler-controls-foreground>>;
-	margin-top: 8px;
+	border-top: 2px solid <<colour tiddler-info-background>>;
+	margin-top: 4px;
 }
 
 .tc-unfold-banner:hover {
 	background: <<colour tiddler-info-background>>;
+	border-top: 2px solid <<colour tiddler-info-border>>;
 }
 
-.tc-unfold-banner svg {
+.tc-unfold-banner svg, .tc-fold-banner svg {
 	height: 0.75em;
 	fill: <<colour tiddler-controls-foreground>>;
 }
 
-.tc-unfold-banner:hover svg {
+.tc-unfold-banner:hover svg, .tc-fold-banner:hover svg {
 	fill: <<colour tiddler-controls-foreground-hover>>;
 }
 
+.tc-fold-banner {
+	position: absolute;
+	padding: 0;
+	margin: 0;
+	background: none;
+	border: none;
+	width: 23px;
+	text-align: center;
+	margin-left: -35px;
+    top: 6px;
+    bottom: 6px;
+}
+
+.tc-fold-banner:hover {
+	background: <<colour tiddler-info-background>>;
+}
+
+@media (max-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {
+	
+	.tc-unfold-banner {
+		position: static;
+	    width: calc(100% + 59px);
+    }
+
+	.tc-fold-banner {
+		width: 16px;
+		margin-left: -16px;
+	    font-size: 0.75em;
+	}
+
+}
+
 /*
 ** Tags and missing tiddlers
 */
@@ -704,6 +740,7 @@ button.tc-untagged-label {
 */
 
 .tc-tiddler-frame {
+	position: relative;
 	margin-bottom: 28px;
 	background-color: <<colour tiddler-background>>;
 	border: 1px solid <<colour tiddler-border>>;