diff --git a/app/templates/includes/navbar.html b/app/templates/includes/navbar.html
index 229ab5f..fc5ccf4 100644
--- a/app/templates/includes/navbar.html
+++ b/app/templates/includes/navbar.html
@@ -137,7 +137,7 @@
         <li class="nav-item text-center w-100">
           <a class="nav-item tw-text-2xl tw-cursor-pointer me-lg-4"
              data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="{% trans "Calculator" %}"
-             _="on click toggle .tw-hidden on #calculator then trigger show on #calculator">
+             _="on click trigger show on #calculator">
             <i class="fa-solid fa-calculator"></i>
           </a>
         </li>
diff --git a/app/templates/includes/tools/calculator.html b/app/templates/includes/tools/calculator.html
new file mode 100644
index 0000000..25cc4ed
--- /dev/null
+++ b/app/templates/includes/tools/calculator.html
@@ -0,0 +1,104 @@
+{% load formats %}
+<div class="tw-hidden tw-w-[60vw] lg:tw-w-[30vw] xl:tw-w-[20vw] position-fixed shadow rounded-3 bg-body tw-border-gray-700 tw-border tw-border-solid tw-text-center tw-align-middle tw-z-[2000] tw-touch-none user-select-none"
+     id="calculator"
+     hx-preserve
+     _="
+          on load
+              -- Get localized separators from Django
+              set window.decimalSeparator to '{% get_decimal_separator %}'
+              set window.thousandSeparator to '{% get_thousand_separator %}'
+              set window.argSeparator to ';'
+          end
+
+          on focusin halt the event end -- this prevents bootstrap's static offcanvas from hijacking the focus from the input when open end
+
+          on show
+            if my.classList.contains('tw-hidden')
+              remove .tw-hidden from me
+              measure my width, height
+              set xoff to (window.innerWidth/2) - (width/2)
+              set yoff to (window.innerHeight/2) - (height)
+              add { left: ${xoff}px; top: ${yoff}px; }
+              add .scale-in-center to me then wait for animationend then remove .scale-in-center from me
+              then call #calculator-input.focus()
+            else
+              add .scale-out-center to me then wait for animationend then remove .scale-out-center from me
+              add .tw-hidden to me
+            end
+          end
+
+          on pointerdown(screenX, screenY)
+            if event.target.closest('#calculator-handle')
+              halt the event
+              measure my x, y, width, height
+              set xoff to screenX - x
+              set yoff to screenY - y
+              repeat until event pointerup from document
+                wait for pointermove(screenX, screenY) or
+                         pointerup(screenX, screenY) from document
+                -- Calculate new position
+                 set newX to screenX - xoff
+                 set newY to screenY - yoff
+                 -- Constrain to viewport
+                 set newX to Math.max(5, Math.min(newX, window.innerWidth - (width + 10)))
+                 set newY to Math.max(20, Math.min(newY, window.innerHeight - (height + 5)))
+                 add { left: ${newX}px; top: ${newY}px; transform: none }
+              end
+            end
+          end">
+
+      <div id="calculator-handle"
+           class="position-absolute bg-secondary rounded-top-2 tw-cursor-move d-flex align-items-center justify-content-center tw-top-[-20px] tw-left-[3px] tw-w-[2em] tw-h-[20px]">
+        <i class="fa-solid fa-grip"></i>
+      </div>
+
+      <input type="search"
+             class="form-control"
+             id="calculator-input"
+             _="on click me.focus()
+              on input or search
+                js(my)
+                  return my.value.replace(new RegExp('\\' + window.decimalSeparator + '|\\' + window.argSeparator + '|\\' + window.thousandSeparator, 'g'),
+                                           match => {
+                                               if (match === window.decimalSeparator) return '.';
+                                               if (match === window.argSeparator) return ',';
+                                               return ''; // This will remove the thousandSeparator
+                                           })
+                end
+                then set expr to it
+                then call math.evaluate(expr)
+                if result exists and result is a Number
+                  js(result)
+                    return result.toString().replace(new RegExp(',|\\.', 'g'),
+                                                                   match => match === '.' ? window.decimalSeparator : window.argSeparator)
+                  end
+                  then set localizedResult to it
+                  set #calculator-result.innerText to localizedResult
+                  then remove .tw-hidden from #calculator-result-container
+                  then add .swing-in-top-fwd to #calculator-result-container
+                  then settle
+                  then remove .swing-in-top-fwd from #calculator-result-container
+                else
+                  add .swing-out-top-bck to #calculator-result-container
+                  then settle
+                  then add .tw-hidden to #calculator-result-container
+                  then remove .swing-out-top-bck from #calculator-result-container
+                end
+              catch e
+                add .swing-out-top-bck to #calculator-result-container
+                then settle
+                then add .tw-hidden to #calculator-result-container
+                then remove .swing-out-top-bck from #calculator-result-container
+              end"
+             placeholder="2 + 2">
+      <div class="tw-hidden" id="calculator-result-container">
+        <div class="d-flex flex-row p-2 justify-content-between">
+          <div class="tw-text-gray-400">=</div>
+          <div id="calculator-result" class="user-select-all"></div>
+        </div>
+      </div>
+      <div class="position-absolute tw-cursor-pointer top-0 start-100 translate-middle tw-p-0 text-bg-primary border border-light rounded-circle tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5"
+            _="on click trigger show on #calculator">
+        <i class="fa-solid fa-xmark tw-flex tw-items-center tw-justify-center tw-w-full tw-h-full"></i>
+      </div>
+    </div>
diff --git a/app/templates/layouts/base.html b/app/templates/layouts/base.html
index 4c9dde9..b55ceba 100644
--- a/app/templates/layouts/base.html
+++ b/app/templates/layouts/base.html
@@ -37,97 +37,8 @@
       {% include 'includes/toasts.html' %}
     </div>
 
-    <div class="tw-hidden tw-w-[60vw] lg:tw-w-[30vw] xl:tw-w-[20vw] position-fixed shadow rounded-3 bg-body tw-border-gray-700 tw-border tw-border-solid tw-text-center tw-align-middle tw-z-[2000] tw-touch-none user-select-none"
-        id="calculator"
-        hx-preserve
-        _="on load
-            -- Get localized separators from Django
-            set window.decimalSeparator to '{% get_decimal_separator %}'
-            set window.thousandSeparator to '{% get_thousand_separator %}'
-            set window.argSeparator to ';'
-          end
+    {% include 'includes/tools/calculator.html' %}
 
-           on focusin halt the event -- this prevents bootstrap's static offcanvas from hijacking the focus from the input when open end
-
-           on show if not I.classList.contains('tw-hidden') add { left: 50vw; top: 50vh; transform: translate(-50%, -50%); } then call #calculator-input.focus() end
-
-           on pointerdown(screenX, screenY)
-            if event.target.closest('#calculator-handle')
-              log event
-              halt the event
-              measure my x, y, width, height
-              set xoff to screenX - x
-              set yoff to screenY - y
-              repeat until event pointerup from document
-                wait for pointermove(screenX, screenY) or
-                         pointerup(screenX, screenY) from document
-                -- Calculate new position
-                 set newX to screenX - xoff
-                 set newY to screenY - yoff
-                 -- Constrain to viewport
-                 set newX to Math.max(5, Math.min(newX, window.innerWidth - (width + 10)))
-                 set newY to Math.max(20, Math.min(newY, window.innerHeight - (height + 5)))
-                 add { left: ${newX}px; top: ${newY}px; transform: none }
-              end
-            end
-           end">
-
-      <div id="calculator-handle"
-           class="position-absolute bg-secondary rounded-top-2 tw-cursor-move d-flex align-items-center justify-content-center tw-top-[-20px] tw-left-[3px] tw-w-[2em] tw-h-[20px]">
-        <i class="fa-solid fa-grip"></i>
-      </div>
-
-      <input type="search"
-             class="form-control"
-             id="calculator-input"
-             _="on click me.focus()
-              on input or search
-                js(my)
-                  return my.value.replace(new RegExp('\\' + window.decimalSeparator + '|\\' + window.argSeparator + '|\\' + window.thousandSeparator, 'g'),
-                                           match => {
-                                               if (match === window.decimalSeparator) return '.';
-                                               if (match === window.argSeparator) return ',';
-                                               return ''; // This will remove the thousandSeparator
-                                           })
-                end
-                then set expr to it
-                then call math.evaluate(expr)
-                then log result
-                if result exists and result is a Number
-                  js(result)
-                    return result.toString().replace(new RegExp(',|\\.', 'g'),
-                                                                   match => match === '.' ? window.decimalSeparator : window.argSeparator)
-                  end
-                  then set localizedResult to it
-                  set #calculator-result.innerText to localizedResult
-                  then remove .tw-hidden from #calculator-result-container
-                  then add .swing-in-top-fwd to #calculator-result-container
-                  then settle
-                  then remove .swing-in-top-fwd from #calculator-result-container
-                else
-                  add .swing-out-top-bck to #calculator-result-container
-                  then settle
-                  then add .tw-hidden to #calculator-result-container
-                  then remove .swing-out-top-bck from #calculator-result-container
-                end
-              catch e
-                add .swing-out-top-bck to #calculator-result-container
-                then settle
-                then add .tw-hidden to #calculator-result-container
-                then remove .swing-out-top-bck from #calculator-result-container
-              end"
-             placeholder="2 + 2">
-      <div class="tw-hidden" id="calculator-result-container">
-        <div class="d-flex flex-row p-2 justify-content-between">
-          <div class="tw-text-gray-400">=</div>
-          <div id="calculator-result" class="user-select-all"></div>
-        </div>
-      </div>
-      <div class="position-absolute tw-cursor-pointer top-0 start-100 translate-middle tw-p-0 text-bg-primary border border-light rounded-circle tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5"
-            _="on click toggle .tw-hidden on #calculator">
-        <i class="fa-solid fa-xmark tw-flex tw-items-center tw-justify-center tw-w-full tw-h-full"></i>
-      </div>
-    </div>
     {% block extra_js_body %}{% endblock %}
   </body>
 </html>
diff --git a/frontend/src/styles/_animations.scss b/frontend/src/styles/_animations.scss
index 44787e0..765a921 100644
--- a/frontend/src/styles/_animations.scss
+++ b/frontend/src/styles/_animations.scss
@@ -130,3 +130,57 @@
     opacity: 0;
   }
 }
+
+/* ----------------------------------------------
+ * Generated by Animista on 2024-12-21 0:6:39
+ * Licensed under FreeBSD License.
+ * See http://animista.net/license for more info.
+ * w: http://animista.net, t: @cssanimista
+ * ---------------------------------------------- */
+
+/**
+ * ----------------------------------------
+ * animation scale-in-center
+ * ----------------------------------------
+ */
+@keyframes scale-in-center {
+  0% {
+    transform: scale(0);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.scale-in-center {
+	animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+}
+
+/* ----------------------------------------------
+ * Generated by Animista on 2024-12-21 0:8:10
+ * Licensed under FreeBSD License.
+ * See http://animista.net/license for more info.
+ * w: http://animista.net, t: @cssanimista
+ * ---------------------------------------------- */
+
+/**
+ * ----------------------------------------
+ * animation scale-out-center
+ * ----------------------------------------
+ */
+@keyframes scale-out-center {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(0);
+    opacity: 1;
+  }
+}
+
+.scale-out-center {
+	animation: scale-out-center 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
+}