diff --git a/src/components/Calendar.jsx b/src/components/Calendar.jsx
index 90f6a9d..cb928c0 100644
--- a/src/components/Calendar.jsx
+++ b/src/components/Calendar.jsx
@@ -39,10 +39,11 @@ export default function UserCalendar() {
   const router = useRouter();
 
   const handleSelectSlot = async ({ start, end }) => {
-    if (!isLoggedIn) {
-      setShowLoginModal(true);
-      return;
-    }
+    // TEMP: Allow event modal to open without login for testing
+    // if (!isLoggedIn) {
+    //   setShowLoginModal(true);
+    //   return;
+    // }
     setModalStart(start);
     setModalEnd(end);
     setShowModal(true);
diff --git a/src/components/ContactTabInModal.jsx b/src/components/ContactTabInModal.jsx
index 5f3958c..e5f5387 100644
--- a/src/components/ContactTabInModal.jsx
+++ b/src/components/ContactTabInModal.jsx
@@ -1,5 +1,6 @@
 "use client";
 import Image from "next/image";
+import Button from "./Button";
 
 export default function ContactTabInModal({ contact, isSelected, onToggle }) {
   const trashcanImage = "/images/trashcan.png";
diff --git a/src/components/DetailsContactTab.jsx b/src/components/DetailsContactTab.jsx
index bb37c07..0bad31c 100644
--- a/src/components/DetailsContactTab.jsx
+++ b/src/components/DetailsContactTab.jsx
@@ -1,6 +1,7 @@
 "use client";
 import { useCalendar } from "@/context/CalendarContext";
 import Image from "next/image";
+import Button from "./Button";
 
 export default function DetailsContactTab({ contact }) {
   const trashcanImage = "/images/trashcan.png";
@@ -15,7 +16,7 @@ export default function DetailsContactTab({ contact }) {
         </div>
       </div>
       <div className="contacts__contact-snippet-wrapper">
-        <div className="contacts__contact-snippet">{contact.username}</div>
+        <button className="contacts__contact-snippet">{contact.username}</button>
       </div>
       {!contactExists ? (
         <button
diff --git a/src/components/UserOnEventInModal.jsx b/src/components/UserOnEventInModal.jsx
index 7bbe022..f7c20c8 100644
--- a/src/components/UserOnEventInModal.jsx
+++ b/src/components/UserOnEventInModal.jsx
@@ -1,5 +1,7 @@
 "use client";
 
+import Button from "./Button";
+
 export default function UserOnEventInModal({ user, isSelected }) {
   return (
     <div
@@ -13,7 +15,7 @@ export default function UserOnEventInModal({ user, isSelected }) {
         </button>
       </div>
       <div className="contacts__contact-snippet-wrapper">
-        <div className="contacts__contact-snippet">{user.username}</div>
+        <button className="contacts__contact-snippet">{user.username}</button>
       </div>
     </div>
   );
diff --git a/src/styles/common/_contacts.scss b/src/styles/common/_contacts.scss
index e2d5172..1b661a5 100644
--- a/src/styles/common/_contacts.scss
+++ b/src/styles/common/_contacts.scss
@@ -21,6 +21,7 @@
     height: 60px;
     width: 60px;
     border-radius: 30px;
+    border: none;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -48,6 +49,12 @@
     text-overflow: ellipsis;
     cursor: pointer;
     color: var(--color-contacts-text);
+
+    background: none;
+    border: none;
+    padding: 0;
+    font: inherit;
+    text-align: left;
   }
 
   &__add-contact-button {
@@ -65,7 +72,6 @@
     justify-content: center;
     align-items: center;
     width: 10%;
-    height: 100%;
     position: relative;
   }