diff --git a/components/ComingSoon/ComingSoon.tsx b/components/ComingSoon/ComingSoon.tsx
index 4c1b18b0..4a2ec081 100644
--- a/components/ComingSoon/ComingSoon.tsx
+++ b/components/ComingSoon/ComingSoon.tsx
@@ -148,7 +148,7 @@ export const ComingSoon = () => {
         )}
         {comingSoonText !== "" && <Text>{comingSoonText}</Text>}
         <NotifyForm />
-        <SocialLinks />
+        <SocialLinks networks={['instagram', 'facebook', 'twitter', 'youtube']}/>
         {isSlideshow && (
           <ProductImageCarousel>
             <CarouselBackground onClick={() => setIsSlideshow(false)} />
diff --git a/components/FeaturedSnippet/FeaturedSnippet.styles.tsx b/components/FeaturedSnippet/FeaturedSnippet.styles.tsx
index e69de29b..94222147 100644
--- a/components/FeaturedSnippet/FeaturedSnippet.styles.tsx
+++ b/components/FeaturedSnippet/FeaturedSnippet.styles.tsx
@@ -0,0 +1,58 @@
+import styled from "@emotion/styled";
+
+export const FeaturedSnippetWrapper = styled.div`
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    /* position: absolute; */
+    z-index: 10;
+    overflow: hidden;
+    @media (max-width: 768px) {
+        padding: 20px 15px;
+    }
+    @media (max-width: 375px) {
+        padding: 20px 15px;
+    }
+`;
+
+export const FeaturedSnippetBadge = styled.div`
+    background: ${(p: any) => p.theme.colors.brand.primary};
+    color: ${(p: any) => p.theme.colors.white.primary};
+    padding: 6px 12px 4px 12px;
+    border-radius: 20px;
+    font-size: 14px;
+    font-weight: bold;
+`;
+
+export const FeaturedSnippetTitle = styled.h2`
+    margin: 0;
+    font-family: "Rubik Bubbles", sans-serif;
+    font-size: 42px;
+    line-height: 44px;
+`;
+export const FeaturedSnippetSubtitle = styled.h4`
+    margin: 0;
+    font-family: "Rubik Bubbles", sans-serif;
+    font-size: 24px;
+    line-height: 26px;
+`;
+export const FeaturedSnippetImageLink = styled.a`
+    transform: rotate(-2deg);
+    box-shadow: 5px 10px 22px rgba(0, 0, 0, 1);
+    padding: 0;
+    width: 300px;
+    height: 300px;
+    margin: 20px 0;
+`;
+export const FeaturedSnippetImage = styled.img`
+    width: 100%;
+    height: 100%;
+`;
+export const FeaturedSnippetText = styled.p`
+    margin: 0px auto;
+    font-family: "Gaegu", cursive;
+`;
+export const FeaturedSnippetButton = styled.button``;
+export const FeaturedSnippetLink = styled.div``;
\ No newline at end of file
diff --git a/components/FeaturedSnippet/FeaturedSnippet.tsx b/components/FeaturedSnippet/FeaturedSnippet.tsx
index 2be68ba3..04ed0090 100644
--- a/components/FeaturedSnippet/FeaturedSnippet.tsx
+++ b/components/FeaturedSnippet/FeaturedSnippet.tsx
@@ -1,9 +1,30 @@
 import React from "react";
 
+import {
+  FeaturedSnippetWrapper,
+  FeaturedSnippetBadge,
+  FeaturedSnippetTitle,
+  FeaturedSnippetSubtitle,
+  FeaturedSnippetImage,
+  FeaturedSnippetImageLink,
+  FeaturedSnippetText,
+  FeaturedSnippetButton,
+  FeaturedSnippetLink,
+} from "./FeaturedSnippet.styles";
+import { SocialLinks } from "..";
+
 export const FeaturedSnippet = () => {
   return (
-    <div>
-      <h1>FeaturedSnippet</h1>
-    </div>
+    <FeaturedSnippetWrapper>
+      <FeaturedSnippetBadge>New Release</FeaturedSnippetBadge>
+      <FeaturedSnippetTitle>"Watermark"</FeaturedSnippetTitle>
+      <FeaturedSnippetSubtitle>by Sky Chase</FeaturedSnippetSubtitle>
+      <FeaturedSnippetImageLink href="https://open.spotify.com/album/3FfuBJ7SkThWE5ZsxM8DZx?si=KmWYhLPTTXWQ2kYerZcjtQ" target="_blank">
+        <FeaturedSnippetImage src="images/SkyChase-Watermark.jpg" />
+      </FeaturedSnippetImageLink>
+      <FeaturedSnippetText>Now Streaming Everywhere</FeaturedSnippetText>
+      <SocialLinks networks={["spotify", "soundcloud", "lastfm", "youtube"]} />
+      {/* <FeaturedSnippetText>Checkout the latest release!</FeaturedSnippetText> */}
+    </FeaturedSnippetWrapper>
   );
 };
diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx
index 2d67abf9..0881c435 100644
--- a/components/Header/Header.tsx
+++ b/components/Header/Header.tsx
@@ -90,7 +90,7 @@ export const Header: React.FC<HeaderProps> = ({ darkMode }) => {
       <TopHeader>
         {!isMobile && (
           <LeftSide>
-            <SocialLinks darkMode={darkMode} />
+            <SocialLinks networks={["instagram", "facebook", "twitter", "youtube"]} />
           </LeftSide>
         )}
         <LogoDiv>
diff --git a/components/MediaPlayer/MediaPlayer.styles.tsx b/components/MediaPlayer/MediaPlayer.styles.tsx
index b160ec9c..e25651a3 100644
--- a/components/MediaPlayer/MediaPlayer.styles.tsx
+++ b/components/MediaPlayer/MediaPlayer.styles.tsx
@@ -27,7 +27,8 @@ export const Stars = styled.div`
   left: -50%;
   background: url(img/stars.png) 0 0 repeat;
   background-size: cover;
-  animation: ${spin} 180s linear infinite;
+  animation: ${spin} 333s linear infinite;
+  filter: blur(2px);
 `;
 
 export const GlowContainer = styled.div`
@@ -64,8 +65,9 @@ export const Skyline = styled.div`
   height: 490px;
   display: block;
   background: url(img/skyline.png) repeat-x;
-  background-size: 1775px 600px;
-  background-position: center -30px;
+  background-size: contain;
+  filter: blur(2px);
+  background-position: center bottom;
   pointer-events: none;
 `;
 
@@ -82,6 +84,5 @@ export const Cockpit = styled.div`
   background: url(img/cockpit.png) no-repeat;
   background-size: 120% 120%;
   background-position: top center;
-
   pointer-events: none;
 `;
diff --git a/components/MediaPlayer/MediaPlayer.tsx b/components/MediaPlayer/MediaPlayer.tsx
index 2bd821c4..765d3831 100644
--- a/components/MediaPlayer/MediaPlayer.tsx
+++ b/components/MediaPlayer/MediaPlayer.tsx
@@ -18,7 +18,7 @@ import {
   Cockpit
 } from "./MediaPlayer.styles";
 import { Layout, NotifyForm } from "..";
-import { FeaturedSnippet } from "../FeaturedSnippet";
+import { FeaturedSnippet } from "..";
 
 const styles = {
   backgroundColor: "#1f1f1f",
@@ -151,7 +151,7 @@ export const MediaPlayer = (props: any) => {
               width: "100%",
               bottom: "8%",
               textAlign: "center",
-              position: "absolute",
+              position: "relative",
               fontFamily: "james",
               fontSize: 40,
               margin: "auto",
@@ -163,7 +163,7 @@ export const MediaPlayer = (props: any) => {
         </a>
         <div
           style={{
-            position: "absolute",
+            position: "relative",
             width: "100%",
             margin: "auto",
             zIndex: 99999,
@@ -417,9 +417,9 @@ export const MediaPlayer = (props: any) => {
           onChange={ChangeTheTime} />
         <label id="lblTime">-:--:--</label>
       </div> */}
-      <GlowContainer>
+      {/* <GlowContainer>
         <Glow />
-      </GlowContainer>
+      </GlowContainer> */}
       <StarsContainer>
         <Stars />
       </StarsContainer>
@@ -432,9 +432,9 @@ export const MediaPlayer = (props: any) => {
         handleChangeReverse={handleChangeReverse}
         reverse={reverse}
       />
-      {songs && _renderSongPlayer()}
       {/* <div dangerouslySetInnerHTML={{__html: spotifyEmbedCode}} /> */}
       <FeaturedSnippet />
+      {/* {songs && _renderSongPlayer()} */}
       <NotifyForm />
     </>
   );
diff --git a/components/NotifyForm/NotifyForm.styles.tsx b/components/NotifyForm/NotifyForm.styles.tsx
index 2fad4d46..a498bf4d 100644
--- a/components/NotifyForm/NotifyForm.styles.tsx
+++ b/components/NotifyForm/NotifyForm.styles.tsx
@@ -5,11 +5,11 @@ export const NotifyFormContainer = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
-  position: absolute;
+  position: relative;
   z-index: 10;
   width: 100%;
   height: 175px;
-  bottom: 40px;
+  /* bottom: 40px; */
 `;
 
 export const NotifyText = styled.div`
diff --git a/components/SocialLinks/SocialLinks.styles.tsx b/components/SocialLinks/SocialLinks.styles.tsx
index 60e4dd7f..0af9fbff 100644
--- a/components/SocialLinks/SocialLinks.styles.tsx
+++ b/components/SocialLinks/SocialLinks.styles.tsx
@@ -12,6 +12,7 @@ export const SocialContainer = styled.div<FooterStateType>`
 
 export const SocialList = styled.ul`
   padding-inline-start: 0px;
+  display: flex;
 `;
 
 export const SocialListItem = styled.li<FooterStateType>`
diff --git a/components/SocialLinks/SocialLinks.tsx b/components/SocialLinks/SocialLinks.tsx
index 1d868bb7..cc7e76f3 100644
--- a/components/SocialLinks/SocialLinks.tsx
+++ b/components/SocialLinks/SocialLinks.tsx
@@ -1,5 +1,7 @@
 import React from "react";
 import { Facebook, Twitter, Instagram, YouTube } from "@material-ui/icons";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSpotify, faSoundcloud, faLastfm } from '@fortawesome/free-brands-svg-icons';
 
 import {
   SocialContainer,
@@ -8,63 +10,69 @@ import {
   SocialIcon
 } from "./SocialLinks.styles";
 
-export const SocialLinks = ({ darkMode }: any) => {
+export const SocialLinks = ({ networks = [] }: { networks: string[] }) => {
+  // Method to check if a network is in the passed array
+  const isNetworkPresent = (network: string) => networks.includes(network);
+
   return (
-    <>
-      <SocialContainer darkMode={darkMode}>
-        <SocialList>
-          <SocialListItem darkMode={darkMode}>
-            <a
-              href={
-                `http://www.instagram.com/${process.env.NEXT_PUBLIC_INSTAGRAM_SLUG}` ||
-                "http://www.instagram.com"
-              }
-              target="_blank"
-            >
-              {/* <SocialIcon src="images/social-icon-instagram.png" /> */}
-              <Instagram />{" "}
+    <SocialContainer>
+      <SocialList>
+        {isNetworkPresent("instagram") && (
+          <SocialListItem>
+            <a href={`http://www.instagram.com/${process.env.NEXT_PUBLIC_INSTAGRAM_SLUG}`} target="_blank">
+              <Instagram />
+            </a>
+          </SocialListItem>
+        )}
+
+        {isNetworkPresent("facebook") && (
+          <SocialListItem>
+            <a href={`http://www.facebook.com/${process.env.NEXT_PUBLIC_FACEBOOK_SLUG}`} target="_blank">
+              <Facebook />
             </a>
           </SocialListItem>
+        )}
 
-          <SocialListItem darkMode={darkMode}>
-            <a
-              href={
-                `http://www.facebook.com/${process.env.NEXT_PUBLIC_FACEBOOK_SLUG}` ||
-                "http://www.facebook.com"
-              }
-              target="_blank"
-            >
-              {/* <SocialIcon src="images/social-icon-facebook.png" />{" "} */}
-              <Facebook />{" "}
+        {isNetworkPresent("twitter") && (
+          <SocialListItem>
+            <a href={`http://www.twitter.com/${process.env.NEXT_PUBLIC_TWITTER_SLUG}`} target="_blank">
+              <Twitter />
             </a>
           </SocialListItem>
+        )}
 
-          <SocialListItem darkMode={darkMode}>
-            <a
-              href={
-                `http://www.twitter.com/${process.env.NEXT_PUBLIC_TWITTER_SLUG}` ||
-                "http://www.twitter.com"
-              }
-              target="_blank"
-            >
-              {/* <SocialIcon src="images/social-icon-twitter.png" />{" "} */}
-              <Twitter />{" "}
+        {isNetworkPresent("youtube") && (
+          <SocialListItem>
+            <a href={`http://www.youtube.com/${process.env.NEXT_PUBLIC_YOUTUBE_SLUG}`} target="_blank">
+              <YouTube />
             </a>
           </SocialListItem>
-          
-          <SocialListItem darkMode={darkMode}>
-            <a
-              href={
-                `http://www.youtube.com/${process.env.NEXT_PUBLIC_YOUTUBE_SLUG}` ||
-                "http://www.youtube.com"
-              }
-              target="_blank"
-            >
-              <YouTube />{" "}
+        )}
+
+        {isNetworkPresent("spotify") && (
+          <SocialListItem>
+            <a href="https://open.spotify.com/album/3FfuBJ7SkThWE5ZsxM8DZx?si=KmWYhLPTTXWQ2kYerZcjtQ" target="_blank">
+              <FontAwesomeIcon icon={faSpotify} />
+            </a>
+          </SocialListItem>
+        )}
+
+        {isNetworkPresent("soundcloud") && (
+          <SocialListItem>
+            <a href="http://www.soundcloud.com/smokeyyy" target="_blank">
+              <FontAwesomeIcon icon={faSoundcloud} />
+            </a>
+          </SocialListItem>
+        )}
+
+        {isNetworkPresent("lastfm") && (
+          <SocialListItem>
+            <a href="https://www.last.fm/music/Sky+Chase" target="_blank">
+              <FontAwesomeIcon icon={faLastfm} />
             </a>
           </SocialListItem>
-        </SocialList>
-      </SocialContainer>
-    </>
+        )}
+      </SocialList>
+    </SocialContainer>
   );
 };
diff --git a/package.json b/package.json
index edf3caff..da11f493 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,14 @@
   "dependencies": {
     "@emotion/react": "^11.1.5",
     "@emotion/styled": "^11.1.5",
+    "@fortawesome/fontawesome-svg-core": "6.4.2",
+    "@fortawesome/free-brands-svg-icons": "6.4.2",
+    "@fortawesome/free-solid-svg-icons": "6.4.2",
+    "@fortawesome/pro-duotone-svg-icons": "6.4.2",
+    "@fortawesome/pro-light-svg-icons": "6.4.2",
+    "@fortawesome/pro-regular-svg-icons": "6.4.2",
+    "@fortawesome/pro-solid-svg-icons": "6.4.2",
+    "@fortawesome/react-fontawesome": "0.2.0",
     "@kontent-ai/delivery-sdk": "12.3.0",
     "@kontent-ai/model-generator": "5.8.0",
     "@kontent-ai/react-components": "0.1.1",
diff --git a/public/images/SkyChase-Watermark.jpg b/public/images/SkyChase-Watermark.jpg
new file mode 100644
index 00000000..2deb3116
Binary files /dev/null and b/public/images/SkyChase-Watermark.jpg differ
diff --git a/styles/fonts.css b/styles/fonts.css
index d87eb427..82f2a11d 100644
--- a/styles/fonts.css
+++ b/styles/fonts.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Gaegu:wght@400;700&family=Rubik+Bubbles&display=swap');
+
 @font-face {
   font-family: "body_mono_bold";
   src: url("../public/fonts/ibmplexmono-bold-webfont.woff2") format("woff2"),
diff --git a/yarn.lock b/yarn.lock
index 7c5501f2..472a13d0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -322,6 +322,67 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@fortawesome/fontawesome-common-types@6.4.2":
+  version "6.4.2"
+  resolved "https://npm.fontawesome.com/@fortawesome/fontawesome-common-types/-/6.4.2/fontawesome-common-types-6.4.2.tgz#1766039cad33f8ad87f9467b98e0d18fbc8f01c5"
+  integrity sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA==
+
+"@fortawesome/fontawesome-svg-core@6.4.2":
+  version "6.4.2"
+  resolved "https://npm.fontawesome.com/@fortawesome/fontawesome-svg-core/-/6.4.2/fontawesome-svg-core-6.4.2.tgz#37f4507d5ec645c8b50df6db14eced32a6f9be09"
+  integrity sha512-gjYDSKv3TrM2sLTOKBc5rH9ckje8Wrwgx1CxAPbN5N3Fm4prfi7NsJVWd1jklp7i5uSCVwhZS5qlhMXqLrpAIg==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.4.2"
+
+"@fortawesome/free-brands-svg-icons@6.4.2":
+  version "6.4.2"
+  resolved "https://npm.fontawesome.com/@fortawesome/free-brands-svg-icons/-/6.4.2/free-brands-svg-icons-6.4.2.tgz#9b8e78066ea6dd563da5dfa686615791d0f7cc71"
+  integrity sha512-LKOwJX0I7+mR/cvvf6qIiqcERbdnY+24zgpUSouySml+5w8B4BJOx8EhDR/FTKAu06W12fmUIcv6lzPSwYKGGg==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.4.2"
+
+"@fortawesome/free-solid-svg-icons@6.4.2":
+  version "6.4.2"
+  resolved "https://npm.fontawesome.com/@fortawesome/free-solid-svg-icons/-/6.4.2/free-solid-svg-icons-6.4.2.tgz#33a02c4cb6aa28abea7bc082a9626b7922099df4"
+  integrity sha512-sYwXurXUEQS32fZz9hVCUUv/xu49PEJEyUOsA51l6PU/qVgfbTb2glsTEaJngVVT8VqBATRIdh7XVgV1JF1LkA==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.4.2"
+
+"@fortawesome/pro-duotone-svg-icons@6.4.2":
+  version "6.4.2"
+  resolved "https://npm.fontawesome.com/@fortawesome/pro-duotone-svg-icons/-/6.4.2/pro-duotone-svg-icons-6.4.2.tgz#7d358159aab76f10c9f2acf14e3df346c5ee3301"
+  integrity sha512-+nB6ryovu5AWWc2a2qz0lkmc2jEtdPRuHeKl6eI202xk1Ci0KCkBNKAb7iarRFLlvMIkOqU6d1Fpd1XccIRBwA==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.4.2"
+
+"@fortawesome/pro-light-svg-icons@6.4.2":
+  version "6.4.2"
+  resolved "https://npm.fontawesome.com/@fortawesome/pro-light-svg-icons/-/6.4.2/pro-light-svg-icons-6.4.2.tgz#e35a2608e75805c8b9f0a9d3ab1ce634e9a37d84"
+  integrity sha512-JC/soha6KokIirjuaOZExGg2rw3TGVqvrOvYHmqFSV2FtVJzbW10ZByJDC3z4SXrBTJp8kuub8AgR8XND75OBw==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.4.2"
+
+"@fortawesome/pro-regular-svg-icons@6.4.2":
+  version "6.4.2"
+  resolved "https://npm.fontawesome.com/@fortawesome/pro-regular-svg-icons/-/6.4.2/pro-regular-svg-icons-6.4.2.tgz#0c4621a6e351da81e13f93248ad01c7e6c83048e"
+  integrity sha512-e6LJbjPuthsDfskXvsy3kSpz/NFD2FQ0utZHelMwOyjkalPSbM3kyedZ4Vgq3XVTKo6NQd9FtIoHxxmEQHQKRA==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.4.2"
+
+"@fortawesome/pro-solid-svg-icons@6.4.2":
+  version "6.4.2"
+  resolved "https://npm.fontawesome.com/@fortawesome/pro-solid-svg-icons/-/6.4.2/pro-solid-svg-icons-6.4.2.tgz#839a5bfad7d02b9adcf3b1c8f91b7e7faa39cff5"
+  integrity sha512-60mEfU6Tw7Qn//4JS3O4jWVF2qfED94+wxrWfAD5Z0Bo002XJrA/xIKTbIo71HbhHV4LGQ1wltlzhG34O6Y0Cg==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.4.2"
+
+"@fortawesome/react-fontawesome@0.2.0":
+  version "0.2.0"
+  resolved "https://npm.fontawesome.com/@fortawesome/react-fontawesome/-/0.2.0/react-fontawesome-0.2.0.tgz#d90dd8a9211830b4e3c08e94b63a0ba7291ddcf4"
+  integrity sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==
+  dependencies:
+    prop-types "^15.8.1"
+
 "@humanwhocodes/config-array@^0.5.0":
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.5.0.tgz#1407967d4c6eecd7388f83acf1eaf4d0c6e58ef9"