diff --git a/package.json b/package.json
index 41485b4..7c8fd86 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,8 @@
     "next": "11.0.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "styled-components": "^5.3.0"
+    "styled-components": "^5.3.0",
+    "use-smooth-count": "^0.2.0"
   },
   "devDependencies": {
     "@types/escape-html": "^1.0.1",
diff --git a/pages/index.tsx b/pages/index.tsx
index 8a64ae8..0611dd8 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,13 +1,17 @@
 import Head from "next/head";
 import styled, { createGlobalStyle } from "styled-components";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import axios from "axios";
+import { useSmoothCount } from "use-smooth-count";
 
-export default function Home() {
-    const [userCount, setUserCount] = useState<null | number>(null);
+export default function Home({ userCount }: { userCount: number }) {
     const [userId, setUserId] = useState<null | string>(null);
     const [userError, setUserError] = useState<string>();
     const [copyState, setCopyState] = useState("Copy");
+    const countRef = useRef<HTMLSpanElement | null>(null);
+
+    const counter = useSmoothCount(countRef, userCount, 3, { curve: [0, 1, 0, 1] });
+
     const copy = () => {
         navigator.clipboard.writeText(
             `[![Discord Presence](https://lanyard.cnrad.dev/api/${userId})](https://discord.com/users/${userId})`
@@ -17,13 +21,6 @@ export default function Home() {
         setTimeout(() => setCopyState("Copy"), 1500);
     };
 
-    useEffect(() => {
-        (async () => {
-            let userCount = await axios.get("/api/getUserCount").then(res => res.data);
-            setUserCount(userCount.count);
-        })();
-    }, []);
-
     useEffect(() => {
         (async () => {
             try {
@@ -94,12 +91,20 @@ export default function Home() {
                 </Container>
             </Main>
             <FooterStat>
-                Lanyard Profile Readme has <b>{userCount}</b> total users!
+                Lanyard Profile Readme has <span style={{ fontWeight: "bold" }} ref={countRef} /> total users!
             </FooterStat>
         </>
     );
 }
 
+export async function getServerSideProps(ctx: any) {
+    let userCount = await axios.get("https://lanyard.cnrad.dev/api/getUserCount").then(res => res.data.count);
+
+    return {
+        props: { userCount },
+    };
+}
+
 const GlobalStyle = createGlobalStyle`
   *, *::before, *::after {
     box-sizing: border-box;
diff --git a/yarn.lock b/yarn.lock
index 293f188..9eee4f1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1512,6 +1512,19 @@ framer-motion@^4.1.17:
   optionalDependencies:
     "@emotion/is-prop-valid" "^0.8.2"
 
+framer-motion@^6.3.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-6.3.0.tgz#0e50ef04b4fa070fca7d04bc32fb1d64027b7ea7"
+  integrity sha512-Nm6l2cemuFeSC1fmq9R32sCQs1eplOuZ3r14/PxRDewpE3NUr+ul5ulGRRzk8K0Aa5p76Tedi3sfCUaTPa5fRg==
+  dependencies:
+    framesync "6.0.1"
+    hey-listen "^1.0.8"
+    popmotion "11.0.3"
+    style-value-types "5.0.0"
+    tslib "^2.1.0"
+  optionalDependencies:
+    "@emotion/is-prop-valid" "^0.8.2"
+
 framesync@5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/framesync/-/framesync-5.3.0.tgz#0ecfc955e8f5a6ddc8fdb0cc024070947e1a0d9b"
@@ -1519,6 +1532,13 @@ framesync@5.3.0:
   dependencies:
     tslib "^2.1.0"
 
+framesync@6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/framesync/-/framesync-6.0.1.tgz#5e32fc01f1c42b39c654c35b16440e07a25d6f20"
+  integrity sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==
+  dependencies:
+    tslib "^2.1.0"
+
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -2588,6 +2608,16 @@ pnp-webpack-plugin@1.6.4:
   dependencies:
     ts-pnp "^1.1.6"
 
+popmotion@11.0.3:
+  version "11.0.3"
+  resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-11.0.3.tgz#565c5f6590bbcddab7a33a074bb2ba97e24b0cc9"
+  integrity sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==
+  dependencies:
+    framesync "6.0.1"
+    hey-listen "^1.0.8"
+    style-value-types "5.0.0"
+    tslib "^2.1.0"
+
 popmotion@9.3.6:
   version "9.3.6"
   resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-9.3.6.tgz#b5236fa28f242aff3871b9e23721f093133248d1"
@@ -3191,6 +3221,14 @@ style-value-types@4.1.4:
     hey-listen "^1.0.8"
     tslib "^2.1.0"
 
+style-value-types@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-5.0.0.tgz#76c35f0e579843d523187989da866729411fc8ad"
+  integrity sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==
+  dependencies:
+    hey-listen "^1.0.8"
+    tslib "^2.1.0"
+
 styled-components@^5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.0.tgz#e47c3d3e9ddfff539f118a3dd0fd4f8f4fb25727"
@@ -3399,6 +3437,13 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-smooth-count@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/use-smooth-count/-/use-smooth-count-0.2.0.tgz#0cd3a9042ad3663444ed7a2150ab2ba2fa052a81"
+  integrity sha512-UOMOW41Wq0r8nY2t4CC12tz5p2Nmu81D5fN0fFUIobe91t2qt20z1jU1Dbd5MkA+QDFdQYGusjjSnvloqzLqxQ==
+  dependencies:
+    framer-motion "^6.3.0"
+
 use-subscription@1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/use-subscription/-/use-subscription-1.5.1.tgz#73501107f02fad84c6dd57965beb0b75c68c42d1"