diff --git a/gurubu-client/package.json b/gurubu-client/package.json
index 0d7630f..ca01f9c 100644
--- a/gurubu-client/package.json
+++ b/gurubu-client/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@tabler/icons-react": "^2.40.0",
     "axios": "^1.6.0",
+    "framer-motion": "^11.15.0",
     "marked": "^15.0.4",
     "next": "14.0.0",
     "react": "^18",
diff --git a/gurubu-client/src/app/components/room/grooming-board-participants.tsx b/gurubu-client/src/app/components/room/grooming-board-participants.tsx
index b299730..6e1136f 100644
--- a/gurubu-client/src/app/components/room/grooming-board-participants.tsx
+++ b/gurubu-client/src/app/components/room/grooming-board-participants.tsx
@@ -3,101 +3,141 @@ import { IconCheck } from "@tabler/icons-react";
 import { useGroomingRoom } from "@/contexts/GroomingRoomContext";
 import Image from "next/image";
 import { GroomingMode, PARTICIPANT_VOTES_COUNT } from "@/shared/enums";
+import { useEffect, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
 
 const GroomingBoardParticipants = () => {
   const { groomingInfo } = useGroomingRoom();
   const groomingInfoParticipants = Object.keys(groomingInfo.participants || {});
+  const [sortedParticipants, setSortedParticipants] = useState<string[]>([]);
+
+  useEffect(() => {
+    if (groomingInfo.isResultShown) {
+      const sorted = groomingInfoParticipants.sort((a, b) => {
+        const votesA = groomingInfo.participants[a].votes || {};
+        const votesB = groomingInfo.participants[b].votes || {};
+        return (
+          (Number(votesB["storyPoint"] || 0)) -
+          Number(votesA["storyPoint"] || 0)
+        );
+      });
+      setSortedParticipants([...sorted]);
+    } else {
+      setSortedParticipants([...groomingInfoParticipants]);
+    }
+  }, [
+    groomingInfo.isResultShown,
+    groomingInfoParticipants,
+    groomingInfo.metrics,
+    groomingInfo.participants,
+  ]);
 
   return (
     <ul className="grooming-board-participants">
-      {groomingInfoParticipants.map((participantKey) => {
-        const { isAdmin, sockets, votes, nickname } = groomingInfo.participants[participantKey];
-        const hasSockets = sockets.length > 0;
-        const hasMaxVotes = Object.keys(votes || {}).length === PARTICIPANT_VOTES_COUNT.MAX_VOTE;
-        const isResultShown = groomingInfo.isResultShown;
-        const isPlanningPokerMode = groomingInfo.mode === GroomingMode.PlanningPoker;
+      <AnimatePresence>
+        {sortedParticipants.map(participantKey => {
+          const { isAdmin, sockets, votes, nickname } =
+            groomingInfo.participants[participantKey];
+          const hasSockets = sockets.length > 0;
+          const hasMaxVotes =
+            Object.keys(votes || {}).length ===
+            PARTICIPANT_VOTES_COUNT.MAX_VOTE;
+          const isResultShown = groomingInfo.isResultShown;
+          const isPlanningPokerMode =
+            groomingInfo.mode === GroomingMode.PlanningPoker;
 
-        return (
-          <li key={participantKey}>
-            <div className="grooming-board-participants__nickname-container">
-              {isAdmin && (
-                <Image
-                  src="/admin.svg"
-                  width={16}
-                  height={16}
-                  alt="Admin Logo"
-                  priority
-                />
-              )}
-              {!hasSockets && (
-                <Image
-                  src="/wifi-off.svg"
-                  width={14.26}
-                  height={12}
-                  alt="Wifi Off Logo"
-                  priority
-                />
-              )}
-              {hasSockets && !isAdmin && !isPlanningPokerMode && (
-                <div
+          return (
+            <motion.li
+              layout
+              initial={{ opacity: 0, scale: 0.9 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.9 }}
+              transition={{ duration: 0.3, ease: "easeInOut" }}
+              key={participantKey}
+            >
+              <div className="grooming-board-participants__nickname-container">
+                {isAdmin && (
+                  <Image
+                    src="/admin.svg"
+                    width={16}
+                    height={16}
+                    alt="Admin Logo"
+                    priority
+                  />
+                )}
+                {!hasSockets && (
+                  <Image
+                    src="/wifi-off.svg"
+                    width={14.26}
+                    height={12}
+                    alt="Wifi Off Logo"
+                    priority
+                  />
+                )}
+                {hasSockets && !isAdmin && !isPlanningPokerMode && (
+                  <div
+                    className={classNames(
+                      "grooming-board-participants__point-card",
+                      {
+                        "grooming-board-participants__all-metrics-voted":
+                          hasMaxVotes,
+                      }
+                    )}
+                  >
+                    {hasMaxVotes && (
+                      <div className="grooming-board-participants__check-icon-container">
+                        <IconCheck width={13} color="white" />
+                      </div>
+                    )}
+                  </div>
+                )}
+
+                <label
                   className={classNames(
-                    "grooming-board-participants__point-card",
+                    "grooming-board-participants__nickname",
                     {
-                      "grooming-board-participants__all-metrics-voted":
-                        hasMaxVotes,
+                      "connection-lost": !hasSockets,
+                      "additional-space":
+                        hasSockets && isPlanningPokerMode && !isAdmin,
                     }
                   )}
                 >
-                  {hasMaxVotes && (
-                    <div className="grooming-board-participants__check-icon-container">
-                      <IconCheck width={13} color="white" />
-                    </div>
-                  )}
-                </div>
-              )}
-
-              <label
-                className={classNames("grooming-board-participants__nickname", {
-                  "connection-lost": !hasSockets,
-                  "additional-space": hasSockets && isPlanningPokerMode && !isAdmin
-                })}
-              >
-                {nickname}
-              </label>
-            </div>
+                  {nickname}
+                </label>
+              </div>
 
-            <div className="grooming-board-participants__point-cards-container">
-              {groomingInfo.metrics.map((metric) => {
-                const participantVote =
-                  votes && votes[metric.name];
-                const hasParticipantVoted = !!participantVote;
+              <div className="grooming-board-participants__point-cards-container">
+                {groomingInfo.metrics.map((metric) => {
+                  const participantVote = votes && votes[metric.name];
+                  const hasParticipantVoted = !!participantVote;
 
-                return (
-                  <div key={metric.id}>
-                    <div
-                      className={classNames(
-                        "grooming-board-participants__point-card",
-                        {
-                          "grooming-board-participants__metric-voted":
-                            hasParticipantVoted,
-                          show: isResultShown,
-                        }
-                      )}
-                    >
-                      {!isResultShown && (
-                        <div className="grooming-board-participants__check-icon-container">
-                          <IconCheck width={16} color="white" />
-                        </div>
-                      )}
+                  return (
+                    <div key={metric.id}>
+                      <div
+                        className={classNames(
+                          "grooming-board-participants__point-card",
+                          {
+                            "grooming-board-participants__metric-voted":
+                              hasParticipantVoted,
+                            show: isResultShown,
+                          }
+                        )}
+                      >
+                        {!isResultShown && (
+                          <div className="grooming-board-participants__check-icon-container">
+                            <IconCheck width={16} color="white" />
+                          </div>
+                        )}
+                      </div>
+                      {isResultShown && <p>{participantVote}</p>}
                     </div>
-                    {isResultShown && <p>{participantVote}</p>}
-                  </div>
-                );
-              })}
-            </div>
-          </li>
-        );
-      })}
+                  );
+                })}
+              </div>
+            </motion.li>
+          );
+        })}
+      </AnimatePresence>
     </ul>
   );
 };
diff --git a/gurubu-client/src/app/styles/room/grooming-board.scss b/gurubu-client/src/app/styles/room/grooming-board.scss
index 6bfb934..9e14ac0 100644
--- a/gurubu-client/src/app/styles/room/grooming-board.scss
+++ b/gurubu-client/src/app/styles/room/grooming-board.scss
@@ -126,6 +126,7 @@
     border: 1px solid $gray-20;
     padding: 0 12px 12px 12px;
     max-height: max-content;
+    margin-bottom: 24px;
   }
   &__metrics {
     display: flex;
diff --git a/gurubu-client/yarn.lock b/gurubu-client/yarn.lock
index 07d9dc6..92d952c 100644
--- a/gurubu-client/yarn.lock
+++ b/gurubu-client/yarn.lock
@@ -1134,6 +1134,15 @@ form-data@^4.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
+framer-motion@^11.15.0:
+  version "11.15.0"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-11.15.0.tgz#93e5d1839d500ba9cab1d617959a36142a61212b"
+  integrity sha512-MLk8IvZntxOMg7lDBLw2qgTHHv664bYoYmnFTmE0Gm/FW67aOJk0WM3ctMcG+Xhcv+vh5uyyXwxvxhSeJzSe+w==
+  dependencies:
+    motion-dom "^11.14.3"
+    motion-utils "^11.14.3"
+    tslib "^2.4.0"
+
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -1702,6 +1711,16 @@ minimist@^1.2.0, minimist@^1.2.6:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
   integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
 
+motion-dom@^11.14.3:
+  version "11.14.3"
+  resolved "https://registry.yarnpkg.com/motion-dom/-/motion-dom-11.14.3.tgz#725c72c0f1d0b632e42fdd8d13b69ecf9fe202c0"
+  integrity sha512-lW+D2wBy5vxLJi6aCP0xyxTxlTfiu+b+zcpVbGVFUxotwThqhdpPRSmX8xztAgtZMPMeU0WGVn/k1w4I+TbPqA==
+
+motion-utils@^11.14.3:
+  version "11.14.3"
+  resolved "https://registry.yarnpkg.com/motion-utils/-/motion-utils-11.14.3.tgz#cd4a413463739498411f82abb67b3dd58768b0f8"
+  integrity sha512-Xg+8xnqIJTpr0L/cidfTTBFkvRw26ZtGGuIhA94J9PQ2p4mEa06Xx7QVYZH0BP+EpMSaDlu+q0I0mmvwADPsaQ==
+
 ms@2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"