diff --git a/app/components/public/add-to-calender.hbs b/app/components/public/add-to-calender.hbs
new file mode 100644
index 00000000000..13be6cde102
--- /dev/null
+++ b/app/components/public/add-to-calender.hbs
@@ -0,0 +1,15 @@
+<div class="ui list basic segment m-0 pb-0">
+  <div class="item">
+    <i class="clock alternate outline icon pt-1"></i>
+    <div class="content">
+      {{#if this.isSingleDay}}
+        {{general-date @event.startsAt @event.timezone "dddd, MMMM DD, YYYY"}}<br>{{general-date @event.startsAt @event.timezone "h:mm A"}} {{t 'to'}} {{general-date @event.endsAt @event.timezone "h:mm A"}} 
+      {{else}}
+        {{general-date @event.startsAt @event.timezone "dddd, MMMM DD, YYYY h:mm A"}} {{t 'to'}} {{general-date @event.endsAt @event.timezone "dddd, MMMM DD, YYYY h:mm A"}} 
+      {{/if}}
+      ({{this.timezone}})
+      <br>
+      <a href={{this.calendarUrl}} target="_blank" rel="noreferrer nofollow">{{t 'Add to Google Calendar'}}</a>
+    </div>
+  </div>
+</div>
diff --git a/app/components/public/add-to-calender.ts b/app/components/public/add-to-calender.ts
new file mode 100644
index 00000000000..26da5b7176a
--- /dev/null
+++ b/app/components/public/add-to-calender.ts
@@ -0,0 +1,37 @@
+import Component from '@glimmer/component';
+import moment, { Moment } from 'moment';
+import Event from 'open-event-frontend/models/event';
+
+interface Args {
+  event: Event,
+  location: string
+}
+
+export default class AddToCalender extends Component<Args> {
+
+  get timezone(): string {
+    return moment.tz(this.args.event.timezone).format('z');
+  }
+
+  get startsAt(): Moment {
+    const { event } = this.args;
+    return moment(event.startsAt).tz(event.timezone);
+  }
+
+  get endsAt(): Moment {
+    const { event } = this.args;
+    return moment(event.endsAt).tz(event.timezone);
+  }
+
+  get isSingleDay(): boolean {
+    return this.startsAt.isSame(this.endsAt, 'day');
+  }
+
+  get calendarUrl(): string {
+    const { event } = this.args;
+    const startTime = this.startsAt.utc().format('YYYYMMDD[T]HHmmSS[Z]');
+    const endTime = this.endsAt.utc().format('YYYYMMDD[T]HHmmSS[Z]');
+    return `https://calendar.google.com/calendar/render?action=TEMPLATE&dates=${startTime}/${endTime}&text=${event.name}&location=${this.args.location}&ctz=${event.timezone}&details=${event.description}`;
+  }
+
+}
diff --git a/app/components/public/social-links.js b/app/components/public/social-links.js
index 84cae78f0d7..0356ef4ed77 100644
--- a/app/components/public/social-links.js
+++ b/app/components/public/social-links.js
@@ -3,7 +3,7 @@ import Component from '@ember/component';
 import { computed } from '@ember/object';
 
 export default Component.extend({
-  classNames: ['ui', 'basic', 'segment'],
+  classNames: ['ui', 'basic', 'segment', 'm-0', 'pt-0'],
 
   socialLinks: A(),
 
diff --git a/app/styles/partials/utils.scss b/app/styles/partials/utils.scss
index 694825524c9..5260026ffca 100644
--- a/app/styles/partials/utils.scss
+++ b/app/styles/partials/utils.scss
@@ -49,6 +49,10 @@
   padding: .25rem !important;
 }
 
+.pt-1 {
+  padding-top: .25rem !important;
+}
+
 .p-4 {
   padding: 1rem !important;
 }
diff --git a/app/templates/public.hbs b/app/templates/public.hbs
index 69a5434e91c..f810d8af01e 100644
--- a/app/templates/public.hbs
+++ b/app/templates/public.hbs
@@ -77,7 +77,8 @@
               {{/each}}
             </div>
           {{/if}}
-          <Public::SocialLinks @externalUrl={{this.model.externalEventUrl}} @socialLinks={{this.model.socialLinks}} />
+          <Public::AddToCalender @event={{this.model}} @location={{this.headerLocation}}/>
+          <Public::SocialLinks @externalUrl={{this.model.externalEventUrl}} @socialLinks={{this.model.socialLinks}}/>
         {{/if}}
       </div>
     </div>