diff --git a/app/assets/javascripts/initializers/initializePodcastPlayback.js b/app/assets/javascripts/initializers/initializePodcastPlayback.js
index bc69f8e9d..e548cee71 100644
--- a/app/assets/javascripts/initializers/initializePodcastPlayback.js
+++ b/app/assets/javascripts/initializers/initializePodcastPlayback.js
@@ -82,14 +82,18 @@ function initializePodcastPlayback() {
 
   function spinPodcastRecord(customMessage) {
     if (audioExistAndIsPlaying() && recordExist()) {
-      getById(`record-${window.activeEpisode}`).classList.add('playing');
+      var podcastPlaybackButton = getById(`record-${window.activeEpisode}`);
+      podcastPlaybackButton.classList.add('playing');
+      podcastPlaybackButton.setAttribute('aria-pressed', 'true');
       changeStatusMessage(customMessage);
     }
   }
 
   function stopRotatingActivePodcastIfExist() {
     if (window.activeEpisode && getById(`record-${window.activeEpisode}`)) {
-      getById(`record-${window.activeEpisode}`).classList.remove('playing');
+      var podcastPlaybackButton = getById(`record-${window.activeEpisode}`);
+      podcastPlaybackButton.classList.remove('playing');
+      podcastPlaybackButton.setAttribute('aria-pressed', 'false');
       window.activeEpisode = undefined;
     }
   }
@@ -183,7 +187,8 @@ function initializePodcastPlayback() {
     Array.prototype.forEach.call(records, function (record) {
       var episodeSlug = record.getAttribute('data-episode');
       var podcastSlug = record.getAttribute('data-podcast');
-      record.onclick = function () {
+
+      var togglePodcastState = function (e) {
         if (podcastBarAlreadyExistAndPlayingTargetEpisode(episodeSlug)) {
           var audio = getById('audio');
           if (audio) {
@@ -194,6 +199,7 @@ function initializePodcastPlayback() {
           loadAndPlayNewPodcast(episodeSlug);
         }
       };
+      record.addEventListener('click', togglePodcastState);
     });
   }
 
diff --git a/app/assets/stylesheets/podcast-episodes-show.scss b/app/assets/stylesheets/podcast-episodes-show.scss
index 9dcfc96f4..9ff9d59f2 100644
--- a/app/assets/stylesheets/podcast-episodes-show.scss
+++ b/app/assets/stylesheets/podcast-episodes-show.scss
@@ -124,6 +124,11 @@
       }
     }
 
+    .record-wrapper {
+      background-color: transparent;
+      border: 0;
+    }
+
     .playing {
       .record {
         .main-image {
diff --git a/app/views/podcast_episodes/show.html.erb b/app/views/podcast_episodes/show.html.erb
index d88686530..62e0bf616 100644
--- a/app/views/podcast_episodes/show.html.erb
+++ b/app/views/podcast_episodes/show.html.erb
@@ -49,18 +49,18 @@
         </time>
       <% end %>
     </div>
-    <div id="record-<%= @episode.slug %>" class="record-wrapper" data-podcast="<%= @podcast.slug %>" data-episode="<%= @episode.slug %>">
+    <button id="record-<%= @episode.slug %>" class="record-wrapper" data-podcast="<%= @podcast.slug %>" data-episode="<%= @episode.slug %>" aria-pressed="false">
       <div class="record" id="record">
         <%= optimized_image_tag(@podcast.image_url,
                                 optimizer_options: { width: 420, height: 420, crop: "fill" },
                                 image_options: { class: "main-image", alt: @podcast.title }) %>
-        <img alt="Play Button" class="butt play-butt" src="<%= image_path("playbutt.png") %>" />
-        <img alt="Pause Button" class="butt pause-butt" src="<%= image_path("pausebutt.png") %>" />
+        <img alt="Play podcast" class="butt play-butt" src="<%= image_path("playbutt.png") %>" />
+        <img alt="Play podcast" class="butt pause-butt" src="<%= image_path("pausebutt.png") %>" />
         <div class="status-message" id="status-message-<%= @episode.slug %>">
           play
         </div>
       </div>
-    </div>
+    </button>
   </div>
   <%# checking both podcast_episode and podcast status for now  %>
   <% unless @episode.https? %>
diff --git a/cypress/integration/seededFlows/podcastFlows/togglePodcastPlayback.spec.js b/cypress/integration/seededFlows/podcastFlows/togglePodcastPlayback.spec.js
new file mode 100644
index 000000000..a1634840a
--- /dev/null
+++ b/cypress/integration/seededFlows/podcastFlows/togglePodcastPlayback.spec.js
@@ -0,0 +1,20 @@
+describe('Toggle Podcast playback', () => {
+  beforeEach(() => {
+    cy.testSetup();
+  });
+
+  it('should toggle podcast playback', () => {
+    cy.visit('/pod');
+    cy.contains('div', 'Example media | crow call').click();
+
+    cy.findByRole('button', { name: 'Developer on Fire Play podcast' }).as(
+      'toggleButton',
+    );
+
+    cy.get('@toggleButton')
+      .invoke('attr', 'aria-pressed')
+      .should('eq', 'false');
+    cy.get('@toggleButton').click();
+    cy.get('@toggleButton').invoke('attr', 'aria-pressed').should('eq', 'true');
+  });
+});
diff --git a/public/media/crow-call.mp3 b/public/media/crow-call.mp3
new file mode 100644
index 000000000..20a696b6f
Binary files /dev/null and b/public/media/crow-call.mp3 differ
diff --git a/spec/support/seeds/seeds_e2e.rb b/spec/support/seeds/seeds_e2e.rb
index 91283b01e..e6fec2923 100644
--- a/spec/support/seeds/seeds_e2e.rb
+++ b/spec/support/seeds/seeds_e2e.rb
@@ -549,6 +549,45 @@ end
 
 ##############################################################################
 
+seeder.create_if_doesnt_exist(Podcast, "title", "Test podcast") do
+  podcast_attributes = {
+    title: "Developer on Fire",
+    description: "",
+    feed_url: "http://developeronfire.com/rss.xml",
+    itunes_url: "https://itunes.apple.com/us/podcast/developer-on-fire/id1006105326",
+    slug: "developeronfire",
+    twitter_username: "raelyard",
+    website_url: "http://developeronfire.com",
+    main_color_hex: "343d46",
+    overcast_url: "https://overcast.fm/itunes1006105326/developer-on-fire",
+    android_url: "http://subscribeonandroid.com/developeronfire.com/rss.xml",
+    image: File.open(Rails.root.join("app/assets/images/#{rand(1..40)}.png")),
+    published: true
+  }
+  podcast = Podcast.create!(podcast_attributes)
+
+  podcast_episode_attributes = {
+    body: "<p>A real good crow call</p>",
+    guid: "<guid isPermaLink=\"true\">/media/crow-call.mp3</guid>",
+    https: false,
+    itunes_url: nil,
+    image: nil,
+    media_url: "/media/crow-call.mp3",
+    processed_html: "<p>A real good crow call</p>",
+    published_at: Date.new(2021,1,1),
+    slug: "crow-call",
+    subtitle: "Example media: Crow Call",
+    summary: "<p>6 seconds of bird song</p>",
+    title: "Example media | crow call",
+    website_url: "https://github.com/forem/",
+    tag_list: nil,
+    podcast_id: podcast.id
+  }
+  PodcastEpisode.create!(podcast_episode_attributes)
+end
+
+##############################################################################
+
 seeder.create_if_none(Reaction) do
   user = User.find_by(username: "trusted_user_1")
   admin_user.reactions.create!(category: :vomit, reactable: user)