diff --git a/components/Header/Header.js b/components/Header/Header.js
index 939ef04..3ee9c0a 100644
--- a/components/Header/Header.js
+++ b/components/Header/Header.js
@@ -1,6 +1,8 @@
 import Image from "next/image";
+import dynamic from "next/dynamic";
 import Fade from "react-reveal/Fade";
-import SoundBar from "./SoundBar/SoundBar";
+
+const SoundBar = dynamic(() => import("./SoundBar/SoundBar"));
 
 const Header = ({ children }) => {
   return (
diff --git a/package.json b/package.json
index db28562..a2c2898 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
     "bad-words": "^3.0.4",
     "gsap": "^3.8.0",
     "lottie-web": "^5.8.1",
-    "next": "latest",
+    "next": "12.0.1",
     "next-pwa": "^5.4.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
diff --git a/yarn.lock b/yarn.lock
index 231a792..d6d1ed2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3645,7 +3645,7 @@ next-pwa@^5.4.4:
     workbox-webpack-plugin "^6.4.2"
     workbox-window "^6.4.2"
 
-next@latest:
+next@12.0.1:
   version "12.0.1"
   resolved "https://registry.yarnpkg.com/next/-/next-12.0.1.tgz#7b82a73bc185bfda7372e7e8309f9b38e6be9cb0"
   integrity sha512-4MNXAbD9+Tmtejg0TOKbaP52Cgu4mIn2ejKMLHWV0acxWGkkcE7QvdZwvg5pkg3fQBMrgucOxxtmw4D7yWaZvg==