diff --git a/src/components/EventModal.tsx b/src/components/EventModal.tsx
index 0c62c80..43e9960 100644
--- a/src/components/EventModal.tsx
+++ b/src/components/EventModal.tsx
@@ -181,19 +181,28 @@ const EventModal: React.FC<EventModalProps> = ({ event, setEvent }) => {
                     <p>{event.description}</p>
                   </div>
                   <div>
-                    <h5>
-                      Riders &nbsp; ({event.participants.length ?? 0})
-                    </h5>
+                      Riders:
                     <div>
-                      {event.participants ? (
-                        event.participants.map((username: any, index: number) => (
-                          <div key={index}>
-                            <span>{username}</span>
-                          </div>
-                        ))
-                      ) : (
-                        <></>
-                      )}
+                      <div className='ride-card-users-container'>
+                        {event.participants ? (
+                          [...event.participants]
+                          .sort((a: string, b: string) => a.localeCompare(b))
+                          .map((username: any, index: number) => (
+                            <div key={index}>
+                                <div className='ride-card-users'>
+                                  <span className='image'>
+                                    {username.slice(0,1).toLocaleUpperCase()}
+                                  </span>
+                                  <span className='name'>
+                                    <b>{username}</b>
+                                  </span>
+                                </div>
+                            </div>
+                          ))
+                        ) : (
+                          <></>
+                        )}
+                      </div>
                     </div>
                   </div>
                 </div>
diff --git a/src/styles/components/ride-feed-card.css b/src/styles/components/ride-feed-card.css
index 523e96a..7c2cfb4 100644
--- a/src/styles/components/ride-feed-card.css
+++ b/src/styles/components/ride-feed-card.css
@@ -176,6 +176,46 @@
     border: 0.5px solid rgba(209, 215, 221, 1);
 }
 
+.ride-card-users-container {
+    padding-top: 12px;
+    width: 100%;
+    height: 170px;
+    overflow-y: auto;
+}
+
+.ride-card-users {
+    padding-top: 8px;
+    padding-left: 8px;
+    padding-bottom: 8px;
+    justify-content: flex-start;
+    display: flex;
+    align-items: center;
+    overflow-y: auto;
+    border: 1px solid var(--dark-color);
+    border-radius: 12px;
+    margin-bottom: 4px;
+}
+
+.ride-card-users > .image {
+    height: 30px;
+    width: 30px;
+    border-radius: 50%;
+    background-color: var(--primary-color);
+    border: 2px solid var(--dark-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 15px;
+    color: white;
+    position: relative;
+}
+
+.ride-card-users > .name {
+    padding-left: 10px;
+    text-align: left;
+    font-size: 17px;
+}
+
 .ride-card-modal-values {
     padding: 12px;
 }