diff --git a/boomer.mp3 b/boomer.mp3
new file mode 100644
index 0000000..431486a
Binary files /dev/null and b/boomer.mp3 differ
diff --git a/index.css b/index.css
index 166a84b..e513b59 100644
--- a/index.css
+++ b/index.css
@@ -9,7 +9,7 @@ body {
   display: flex;
   flex-direction: column;
   position: relative;
-  top: 370px;
+  top: 428px;
   margin: 0 auto;
 }
 .wishes form {
@@ -227,6 +227,13 @@ body {
   top: 0;
 }
 
+.audio {
+  position: absolute;
+  left: 50%;
+  margin-left: -137px;
+  top: 450px;
+}
+
 .balloon {
   height: 125px;
   width: 105px;
diff --git a/index.php b/index.php
index 4c70284..5089c3b 100644
--- a/index.php
+++ b/index.php
@@ -8,12 +8,17 @@
 		<link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap" rel="stylesheet">
+<script>
+  window.onload = function() {
+    var context = new AudioContext();
+  }
+  </script>
 	</head>
 <body>
 	<h1 class="title">Happy Birthday Prime!</h1>
 	<div id="balloon-container">
 	</div>
-	<div class="cake">
+  <div class="cake">
 		<div class="plate"></div>
 		<div class="layer layer-bottom"></div>
 		<div class="layer layer-middle"></div>
@@ -26,7 +31,11 @@
 				<div class="flame"></div>
 		</div>
 	</div>
-	
+	<div class="audio">
+    <audio controls>
+      <source src="boomer.mp3">
+    </audio>
+</div>
 
 <div class="wishes">
 	<script crossorigin src="https://unpkg.com/@memorista/client-ui@2/dist/index.bundle.js"></script>
diff --git a/index.scss b/index.scss
index c588eaf..3ce76cd 100644
--- a/index.scss
+++ b/index.scss
@@ -8,7 +8,7 @@ body {
     display: flex;
     flex-direction: column;
     position: relative;
-    top: 370px;
+    top: 428px;
     margin: 0 auto;
 
     form {
@@ -273,6 +273,13 @@ body {
     position: fixed;
     top:0;
   }
+
+  .audio {
+    position: absolute;
+    left: 50%;
+    margin-left: -137px;
+    top: 450px;
+  }
   
   .balloon {
     height: 125px;
