diff --git a/package-lock.json b/package-lock.json
index 0be09bf..a57cb16 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "clsx": "^2.1.1",
         "date-fns": "^4.1.0",
         "lucide-react": "^0.460.0",
+        "motion": "^11.14.4",
         "next": "^15.0.3",
         "prettier": "^3.4.0",
         "react": "^18.3.1",
@@ -2795,6 +2796,33 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "11.14.4",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.14.4.tgz",
+      "integrity": "sha512-NQuzr9JbeJDMQmy0FFLhLzk9h1kAjVC1tGE/HY4ubF02B95EBm2lpA21LE3Od/OpXqXgp0zl5Hdqu25hliBRsA==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^11.14.3",
+        "motion-utils": "^11.14.3",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -3852,6 +3880,44 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/motion": {
+      "version": "11.14.4",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-11.14.4.tgz",
+      "integrity": "sha512-ZIaw6ko88B8rSmBEFzqbTCQMbo9xMu8f4PSXSGdb9DTDy8R0sXcbwMEKmTEYkrj9TmZ4n+Ebd0KYjtqHgzRkRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "framer-motion": "^11.14.4",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/motion-dom": {
+      "version": "11.14.3",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.14.3.tgz",
+      "integrity": "sha512-lW+D2wBy5vxLJi6aCP0xyxTxlTfiu+b+zcpVbGVFUxotwThqhdpPRSmX8xztAgtZMPMeU0WGVn/k1w4I+TbPqA==",
+      "license": "MIT"
+    },
+    "node_modules/motion-utils": {
+      "version": "11.14.3",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.14.3.tgz",
+      "integrity": "sha512-Xg+8xnqIJTpr0L/cidfTTBFkvRw26ZtGGuIhA94J9PQ2p4mEa06Xx7QVYZH0BP+EpMSaDlu+q0I0mmvwADPsaQ==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
diff --git a/package.json b/package.json
index 8491084..632ecd1 100644
--- a/package.json
+++ b/package.json
@@ -13,8 +13,9 @@
     "@tanstack/react-query": "^5.60.5",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.460.0",
     "date-fns": "^4.1.0",
+    "lucide-react": "^0.460.0",
+    "motion": "^11.14.4",
     "next": "^15.0.3",
     "prettier": "^3.4.0",
     "react": "^18.3.1",
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 291e667..0c493a9 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,7 +3,7 @@ import { Montserrat } from "next/font/google";
 import "./globals.css";
 import QueryProvider from "@/lib/queryClient";
 import { Navbar } from "@/components/Navbar";
-import SocialSidebar from "@/components/SocialsSidebar";
+import SocialSidebar from "@/sidebar/SocialsSidebar";
 
 export const metadata: Metadata = {
   title: "Juwenalia by Solvro",
diff --git a/src/components/Artist.tsx b/src/components/Artist.tsx
index 3d445ab..eda60fa 100644
--- a/src/components/Artist.tsx
+++ b/src/components/Artist.tsx
@@ -26,9 +26,9 @@ const Artist = async ({
       className="flex flex-col items-center rounded-lg p-2 text-center text-xl"
     >
       <Image
-        className={"aspect-square rounded-xl mb-4 object-cover"}
+        className={"mb-4 aspect-square rounded-xl object-cover"}
         src={`${API_URL}/assets/${image}`}
-        alt="Picture of the artist"
+        alt="Zdjęcie artysty."
         width={441}
         height={621}
         style={{ width: "100%", height: "621px" }}
@@ -53,7 +53,7 @@ const Artist = async ({
                   "rounded-xl p-1 hover:bg-green-400 active:bg-green-600"
                 }
                 src={`/buttons/spotify_logo_short.png`}
-                // src={`/buttons/spotify-svgrepo-com.svg`}
+                // src={`/buttons/spotify-svgrepo-com.svg`} svg, but it's skeeweed
                 alt="Link do Spotify artysty."
                 width="43"
                 height="43"
@@ -72,9 +72,8 @@ const Artist = async ({
                 className={
                   "rounded-xl bg-gradient-to-bl p-1 hover:from-fuchsia-500 hover:to-amber-400 active:from-fuchsia-700 active:to-amber-600"
                 }
-                // src={`/buttons/instagram_icon.png`}
                 src={`/buttons/ig.svg`}
-                alt="Link do IG artysty."
+                alt="Link do Instagrama artysty."
                 width="43"
                 height="43"
               />
@@ -82,24 +81,25 @@ const Artist = async ({
           )}
         </div>
       </div>
-        <div className="pr-4 text-sm lg:text-xl w-full">
-          {events && events.length > 0 ? (
-            events.slice(0, 1).map((event) => (
-              <div key={event.id} className="mx-2 flex w-full justify-between text-sm lg:text-xl">
-                <div>
-                  {event.events_id.location.name.toUpperCase()}
-                </div>
+      <div className="w-full pr-4 text-sm lg:text-xl">
+        {events && events.length > 0 ? (
+          events.slice(0, 1).map((event) => (
+            <div
+              key={event.id}
+              className="mx-2 flex w-full justify-between text-sm lg:text-xl"
+            >
+              <div>{event.events_id.location.name.toUpperCase()}</div>
 
-                <div>
-                  {getDayInfo(event.events_id.day)} /{" "}
-                  {event.events_id.start_time.slice(0, 5)}
-                </div>
+              <div>
+                {getDayInfo(event.events_id.day)} /{" "}
+                {event.events_id.start_time.slice(0, 5)}
               </div>
-            ))
-          ) : (
-            <span className="mx-2">Brak informacji o koncertach.</span>
-          )}
-        </div>
+            </div>
+          ))
+        ) : (
+          <span className="mx-2">Brak informacji o koncertach.</span>
+        )}
+      </div>
     </div>
   );
 };
diff --git a/src/components/SocialsSidebar.tsx b/src/components/SocialsSidebar.tsx
deleted file mode 100644
index f151a09..0000000
--- a/src/components/SocialsSidebar.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import Image from "next/image";
-import Link from "next/link";
-import React from "react";
-
-const SocialSidebar = () => {
-  const fb_url = "";
-  const ig_url = "";
-  const tt_url = "";
-
-  return (
-    <div className="fixed right-0 top-1/3 z-50 p-2 flex -translate-y-1/2 flex-col w-12 gap-4 rounded-l-2xl bg-black">
-      {/* Facebook Icon */}
-       <Link
-         href={fb_url}
-         target="_black"
-         rel="noopener noreferrer"
-         role="button"
-       >
-         <Image
-           className={
-            "rounded-xl p-1 hover:bg-gray-700 active:bg-gray-500"
-           }
-           src={`/social-icons/fb-white.svg`}
-           
-           alt="Link do Facebooka organizatorów."
-           width="32"
-           height="32"
-         />
-       </Link>
-
-      {/* Instagram Icon */}
-
-      <Link
-        href={ig_url}
-        target="_black"
-        rel="noopener noreferrer"
-        role="button"
-      >
-        <Image
-          className={
-            "rounded-xl p-1 hover:bg-gray-700 active:bg-gray-500"
-          }
-          src={`/social-icons/ig-white.svg`}
-          
-          alt="Link do Instagrama organizatorów."
-          width="32"
-          height="32"
-        />
-      </Link>
-
-      {/* TikTok Icon */}
-      <Link
-        href={tt_url}
-        target="_black"
-        rel="noopener noreferrer"
-        role="button"
-      >
-        <Image
-          className={
-            "rounded-xl p-1 hover:bg-gray-700 active:bg-gray-500"
-          }
-          src={`/social-icons/tt-white.svg`}
-          
-          alt="Link do TikToka organizatorów."
-          width="32"
-          height="32"
-        />
-      </Link>
-    </div>
-  );
-};
-
-export default SocialSidebar;
diff --git a/src/sidebar/AnimatedSidebar.tsx b/src/sidebar/AnimatedSidebar.tsx
new file mode 100644
index 0000000..6ce435e
--- /dev/null
+++ b/src/sidebar/AnimatedSidebar.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import { motion } from "framer-motion";
+import React, { ReactNode } from "react";
+
+interface AnimatedSidebarProps {
+  children: ReactNode;
+}
+
+const AnimatedSidebar: React.FC<AnimatedSidebarProps> = ({ children }) => {
+  return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 3, delay: 1 }}
+    >
+      {children}
+    </motion.div>
+  );
+};
+
+export default AnimatedSidebar;
diff --git a/src/sidebar/SocialsSidebar.tsx b/src/sidebar/SocialsSidebar.tsx
new file mode 100644
index 0000000..5525e2f
--- /dev/null
+++ b/src/sidebar/SocialsSidebar.tsx
@@ -0,0 +1,140 @@
+// import Image from "next/image";
+// import Link from "next/link";
+// import React from "react";
+
+// const SocialSidebar = () => {
+//   const fb_url = "";
+//   const ig_url = "";
+//   const tt_url = "";
+
+//   return (
+//     <div className={`fixed right-0 top-1/3 z-50 p-2 flex -translate-y-1/2 flex-col w-12 gap-4 rounded-l-2xl bg-black opacity-80`}>
+//       {/* Facebook Icon */}
+//        <Link
+//          href={fb_url}
+//          target="_black"
+//          rel="noopener noreferrer"
+//          role="button"
+//        >
+//          <Image
+//            className={
+//             "rounded-xl p-1 hover:bg-gray-600 active:bg-gray-400"
+//            }
+//            src={`/social-icons/fb-white.svg`}
+
+//            alt="Link do Facebooka organizatorów."
+//            width="32"
+//            height="32"
+//          />
+//        </Link>
+
+//       {/* Instagram Icon */}
+
+//       <Link
+//         href={ig_url}
+//         target="_black"
+//         rel="noopener noreferrer"
+//         role="button"
+//       >
+//         <Image
+//           className={
+//             "rounded-xl p-1 hover:bg-gray-600 active:bg-gray-400"
+//           }
+//           src={`/social-icons/ig-white.svg`}
+
+//           alt="Link do Instagrama organizatorów."
+//           width="32"
+//           height="32"
+//         />
+//       </Link>
+
+//       {/* TikTok Icon */}
+//       <Link
+//         href={tt_url}
+//         target="_black"
+//         rel="noopener noreferrer"
+//         role="button"
+//       >
+//         <Image
+//           className={
+//             "rounded-xl p-1 hover:bg-gray-600 active:bg-gray-400"
+//           }
+//           src={`/social-icons/tt-white.svg`}
+
+//           alt="Link do TikToka organizatorów."
+//           width="32"
+//           height="32"
+//         />
+//       </Link>
+//     </div>
+//   );
+// };
+
+// export default SocialSidebar;
+
+import Link from "next/link";
+import Image from "next/image";
+import AnimatedSidebar from "./AnimatedSidebar";
+
+const SocialSidebar = () => {
+  // dejta linki do sociali
+  const fb_url = "https://www.youtube.com/watch?v=NBNaArsb99Y";
+  const ig_url = "https://www.youtube.com/watch?v=GJDNkVDGM_s";
+  const tt_url = "https://www.youtube.com/watch?v=9bZkp7q19f0";
+
+  return (
+    <AnimatedSidebar>
+      <div className="fixed right-0 top-1/3 z-50 flex w-12 -translate-y-1/2 flex-col gap-4 rounded-l-2xl bg-black p-2">
+        {/* Facebook */}
+        <Link
+          href={fb_url}
+          target="_blank"
+          rel="noopener noreferrer"
+          role="button"
+        >
+          <Image
+            className="rounded-xl p-1 hover:bg-gray-700 active:bg-gray-500"
+            src="/social-icons/fb-white.svg"
+            alt="Facebook"
+            width={32}
+            height={32}
+          />
+        </Link>
+
+        {/* Instagram */}
+        <Link
+          href={ig_url}
+          target="_blank"
+          rel="noopener noreferrer"
+          role="button"
+        >
+          <Image
+            className="rounded-xl p-1 hover:bg-gray-700 active:bg-gray-500"
+            src="/social-icons/ig-white.svg"
+            alt="Instagram"
+            width={32}
+            height={32}
+          />
+        </Link>
+
+        {/* TikTok */}
+        <Link
+          href={tt_url}
+          target="_blank"
+          rel="noopener noreferrer"
+          role="button"
+        >
+          <Image
+            className="rounded-xl p-1 hover:bg-gray-700 active:bg-gray-500"
+            src="/social-icons/tt-white.svg"
+            alt="TikTok"
+            width={32}
+            height={32}
+          />
+        </Link>
+      </div>
+    </AnimatedSidebar>
+  );
+};
+
+export default SocialSidebar;