diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx
index 248629b..a8ca544 100644
--- a/src/components/Icon.tsx
+++ b/src/components/Icon.tsx
@@ -1,7 +1,8 @@
+import { socials } from '@/components/data/Socials';
 import Link from 'next/link';
 import toast from 'react-hot-toast';
 import copy from 'copy-to-clipboard';
-import { socials } from '@/components/data/Socials';
+import FadeIn from 'react-fade-in';
 
 type Icon = {
   children: any;
@@ -23,29 +24,35 @@ const notify = () => {
 export const Icon = ({ children, reference, copyValue }: Icon) => {
   if (copyValue) {
     return (
-      <Link
-        href={''}
-        className={`cursor-pointer`}
-        aria-label={
-          socials.find((social) => social.ref === reference)?.ariaLabel
-        }
-        onClick={() => {
-          notify(), copy(reference);
-        }}
-      >
-        {children}
-      </Link>
+      <FadeIn>
+        <Link
+          href={''}
+          className={`cursor-pointer`}
+          aria-label={
+            socials.find((social) => social.ref === reference)?.ariaLabel
+          }
+          onClick={() => {
+            notify(), copy(reference);
+          }}
+        >
+          {children}
+        </Link>
+      </FadeIn>
     );
   }
 
   return (
-    <Link
-      href={reference}
-      target='_blank'
-      className={'cursor-pointer'}
-      aria-label={socials.find((social) => social.ref === reference)?.ariaLabel}
-    >
-      {children}
-    </Link>
+    <FadeIn>
+      <Link
+        href={reference}
+        target='_blank'
+        className={'cursor-pointer'}
+        aria-label={
+          socials.find((social) => social.ref === reference)?.ariaLabel
+        }
+      >
+        {children}
+      </Link>
+    </FadeIn>
   );
 };
diff --git a/src/components/SpotifyCard.tsx b/src/components/SpotifyCard.tsx
index 3818471..d13e267 100644
--- a/src/components/SpotifyCard.tsx
+++ b/src/components/SpotifyCard.tsx
@@ -1,9 +1,9 @@
 import { truncate } from '@/utils/truncate';
-import Image from 'next/image';
-import useSWR from 'swr';
-import SongImage from '@/public/song.webp';
-import Link from 'next/link';
 import { HiMusicNote } from 'react-icons/hi';
+import Image from 'next/image';
+import Link from 'next/link';
+import FadeIn from 'react-fade-in';
+import useSWR from 'swr';
 
 export const fetcher = (url: RequestInfo) => fetch(url).then((r) => r.json());
 
@@ -14,29 +14,31 @@ export const NowPlayingCard = () => {
   });
 
   return (
-    <div className='mt-5 focus:outline-none transition duration-300 ease-in-out transform hover:scale-105 p-3 rounded-md border border-gray-800 shadow flex flex-row max-w-sm'>
-      {spotify.song ? (
-        <Image
-          height={45}
-          width={45}
-          alt='Song cover art'
-          src={spotify.song?.image}
-        />
-      ) : (
-        <HiMusicNote size={45} className='p-2.5' />
-      )}
-      <div className='my-auto ml-4'>
-        <div className='font-semibold text-l sm:text-regular'>
-          Listening to{' '}
-          {spotify.song ? (
-            <Link href={`${spotify.song.url}`} target='_blank'>
-              {truncate(`${spotify.song.title}`, 20)}
-            </Link>
-          ) : (
-            <span>nothing</span>
-          )}
+    <FadeIn>
+      <div className='mt-5 focus:outline-none transition duration-300 ease-in-out transform hover:scale-105 p-3 rounded-md border border-gray-800 shadow flex flex-row max-w-sm'>
+        {spotify.song ? (
+          <Image
+            height={45}
+            width={45}
+            alt='Song cover art'
+            src={spotify.song?.image}
+          />
+        ) : (
+          <HiMusicNote size={45} className='p-2.5' />
+        )}
+        <div className='my-auto ml-4'>
+          <div className='font-semibold text-l sm:text-regular'>
+            Listening to{' '}
+            {spotify.song ? (
+              <Link href={`${spotify.song.url}`} target='_blank'>
+                {truncate(`${spotify.song.title}`, 20)}
+              </Link>
+            ) : (
+              <span>nothing</span>
+            )}
+          </div>
         </div>
       </div>
-    </div>
+    </FadeIn>
   );
 };