diff --git a/app/Section/Socials.tsx b/app/Section/Socials.tsx
index e0e195c..ed83c4a 100644
--- a/app/Section/Socials.tsx
+++ b/app/Section/Socials.tsx
@@ -50,7 +50,7 @@ const links = [
 export const Socials = () => {
   return (
     <Section>
-      <h2 className="text-4xl md:text-5xl border-1 px-3 py-2 rounded-xl border-white/5 bg-[#ffb1cd]/5">Socials</h2>
+      <h2 className="text-4xl md:text-5xl border-1 px-3 py-2 rounded-xl border-white/5 bg-[#161213]/25">Socials</h2>
       <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-2">
         {links.map((item) => (
           <Link href={item.url} key={`socials.link.${item.text}`}>
diff --git a/app/components/IconWithText.tsx b/app/components/IconWithText.tsx
index 2679bb4..ef38369 100644
--- a/app/components/IconWithText.tsx
+++ b/app/components/IconWithText.tsx
@@ -11,14 +11,17 @@ export const IconWithText = ({
   text,
   desc,
   backgroundColor,
-  backgroundOpacity
+  backgroundOpacity,
 }: IconWithTextProps) => {
   return (
     <div
-      className={`flex items-start gap-2 border-1 px-3 py-1.5 rounded-xl border-white/5 bg-[var(--bg-color)]/[var(--bg-opacity)] ${
-        backgroundColor ? `` : "bg-[#161213]/25"
-      } transition-[scale] hover:scale-105 duration-100 ease-in-out`}
-      style={{ "--bg-color": backgroundColor, "--bg-opacity": backgroundOpacity || "25%" } as React.CSSProperties}
+      className={`flex items-start gap-2 border-1 px-3 py-1.5 rounded-xl border-white/5 bg-[var(--bg-color)]/[var(--bg-opacity)] transition-[scale] hover:scale-105 duration-100 ease-in-out`}
+      style={
+        {
+          "--bg-color": backgroundColor || "#161213",
+          "--bg-opacity": backgroundOpacity || "25%",
+        } as React.CSSProperties
+      }
     >
       {/* eslint-disable-next-line @next/next/no-img-element */}
       <img src={icon} alt={""} />