diff --git a/src/components/TheDetails.vue b/src/components/TheDetails.vue
index 267779a1..d962c17d 100644
--- a/src/components/TheDetails.vue
+++ b/src/components/TheDetails.vue
@@ -40,14 +40,14 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 					>
 					<label :for="'detailsToggleCompleted_' + task.uid" />
 				</span>
-				<a class="star reactive" @click="togglePinned(task)">
-					<span :class="[{'disabled': task.calendar.readOnly}, iconPinned]" class="icon" />
-				</a>
 				<a class="star reactive" @click="toggleStarred(task)">
 					<span :class="[{'disabled': task.calendar.readOnly}, iconStar]"
 						class="icon"
 					/>
 				</a>
+				<a class="star reactive" @click="togglePinned(task)">
+					<span :class="[{'disabled': task.calendar.readOnly}, iconPinned]" class="icon" />
+				</a>
 				<TaskStatusDisplay :task="task" />
 				<div v-click-outside="() => finishEditing('summary')">
 					<div v-linkify="task.summary"
@@ -591,9 +591,9 @@ export default {
 		},
 		iconPinned: function() {
 			if (this.task.pinned) {
-				return 'icon-bw icon-pinned-off'
-			} else {
 				return 'icon-bw icon-pinned'
+			} else {
+				return 'icon-bw icon-pinned-off'
 			}
 		},
 		iconPercent: function() {