diff --git a/src/atoms/ToggleLayout.svelte b/src/atoms/ToggleLayout.svelte
index c85e7e8..154915b 100644
--- a/src/atoms/ToggleLayout.svelte
+++ b/src/atoms/ToggleLayout.svelte
@@ -19,11 +19,15 @@
         const grid = document.querySelector('.photos')
         const toggle = document.querySelector('.toggle')
         const pill = toggle.querySelector('.pill')
-        const activeButton = document.querySelector(`.toggle [data-layout="${layoutSetting}"]`)
+
+        // Change active pill
+        const toggleAnimate = (elem, pill, toggle) => {
+            pill.style.width = Math.round(elem.getBoundingClientRect().width) + 'px'
+            pill.style.left = Math.round(elem.getBoundingClientRect().left - toggle.getBoundingClientRect().left) + 'px'
+        }
 
         // Init of first option
-        pill.style.width = activeButton.getBoundingClientRect().width + 'px'
-        pill.style.left = activeButton.getBoundingClientRect().left - toggle.getBoundingClientRect().left + 'px'
+        toggleAnimate(document.querySelector(`.toggle [data-layout="${layoutSetting}"]`), pill, toggle)
 
         // Toggle layout
         toggleLayout = event => {
@@ -44,8 +48,7 @@
             }
 
             // Animate the active pill
-            pill.style.width = clicked.getBoundingClientRect().width + 'px'
-            pill.style.left = clicked.getBoundingClientRect().left - toggle.getBoundingClientRect().left + 'px'
+            toggleAnimate(clicked, pill, toggle)
 
             // Add/Remove active classes
             document.querySelectorAll('.toggle button').forEach(button => button.classList.remove('active'))