diff --git a/www/calendar/app-calendar.less b/www/calendar/app-calendar.less
index c229c295a..d93822d54 100644
--- a/www/calendar/app-calendar.less
+++ b/www/calendar/app-calendar.less
@@ -182,13 +182,20 @@
                 display: flex;
                 align-items: center;
                 margin-bottom: 0.2rem;
-                a {
-                    color: @cryptpad_color_link;
-                    text-decoration: underline;
-                }
-                span {
+                .event-location {
                     display: flex;
                     align-items: center;
+                }
+                a {
+                    margin:0.1rem;
+                    border-radius: @variables_radius;
+                    color: @cryptpad_color_link;
+                    text-decoration: underline;
+                    &:focus-visible{
+                        outline: @variables_focus_style;
+                    }
+                }
+                span {
                     overflow: hidden;
                     word-break: break-word;
                     text-overflow: ellipsis;
diff --git a/www/calendar/inner.js b/www/calendar/inner.js
index 82482d4ba..2cf77b874 100644
--- a/www/calendar/inner.js
+++ b/www/calendar/inner.js
@@ -409,7 +409,7 @@ define([
                 APP.nextLocationUid = uid;
             }
             let location_icon = h('i.fa.fa-map-marker.tui-full-calendar-icon', { 'aria-label': Messages.calendar_loc }, []);
-            return location_icon.outerHTML + str;
+            return `<div class="event-location"> ${location_icon.outerHTML} ${str} </div>`;
         },
         popupDetailBody: function(schedule) {
             var str = schedule.body;