diff --git a/app/Section/Intro.tsx b/app/Section/Intro.tsx
index 3a744c6..693fb9a 100644
--- a/app/Section/Intro.tsx
+++ b/app/Section/Intro.tsx
@@ -19,26 +19,23 @@ export const Intro = () => {
       <div className="w-full flex items-center justify-center py-24 bg-[#161213] rounded-bl-[128px] rounded-tr-[128px] md:rounded-bl-[256px] md:rounded-tr-[256px] overflow-hidden">
         <div className="flex flex-col md:flex-row md:gap-8 md:flex-wrap md:justify-center 2xl:gap-16">
           <p
-            className="text-[#C8E8FE] font-medium text-4xl md:text-5xl xl:text-8xl transition-transform duration-1000 ease-out"
-            style={{
-              transform: !isAnimated ? "translateY(600%)" : "translateY(0)",
-            }}
+            className={`text-[#C8E8FE] ${
+              isAnimated ? "translate-y-0" : "translate-y-64 md:translate-y-96"
+            } font-medium text-4xl md:text-5xl xl:text-8xl transition-transform duration-1000 ease-out`}
           >
             Photographer
           </p>
           <p
-            className="text-[#FF8686] font-medium text-4xl md:text-5xl xl:text-8xl transition-transform delay-150 duration-1000 ease-out"
-            style={{
-              transform: !isAnimated ? "translateY(600%)" : "translateY(0)",
-            }}
+            className={`text-[#FF8686] ${
+              isAnimated ? "translate-y-0" : "translate-y-64 md:translate-y-96"
+            } font-medium text-4xl md:text-5xl xl:text-8xl transition-transform delay-150 duration-1000 ease-out`}
           >
             Developer
           </p>
           <p
-            className="text-[#FF851A] font-medium text-4xl md:text-5xl xl:text-8xl transition-transform delay-300 duration-1000 ease-out"
-            style={{
-              transform: !isAnimated ? "translateY(600%)" : "translateY(0)",
-            }}
+            className={`text-[#FF851A] ${
+              isAnimated ? "translate-y-0" : "translate-y-64 md:translate-y-96"
+            } font-medium text-4xl md:text-5xl xl:text-8xl transition-transform delay-300 duration-1000 ease-out`}
           >
             Self-Hosting admirer
           </p>
diff --git a/app/components/IconWithText.tsx b/app/components/IconWithText.tsx
index 0c35062..2778f7f 100644
--- a/app/components/IconWithText.tsx
+++ b/app/components/IconWithText.tsx
@@ -2,11 +2,21 @@ type IconWithTextProps = {
   icon: string;
   text: string;
   desc: string;
+  hoverTextColor?: string | null;
 };
 
-export const IconWithText = ({ icon, text, desc }: IconWithTextProps) => {
+export const IconWithText = ({
+  icon,
+  text,
+  desc,
+  hoverTextColor,
+}: IconWithTextProps) => {
   return (
-    <div className="flex items-center gap-1 hover:text-[#c8e8fe] transition-colors">
+    <div
+      className={`flex items-center gap-1 ${
+        hoverTextColor ? `hover:text-${hoverTextColor}` : ""
+      } transition-[color,_scale] hover:scale-105 duration-100`}
+    >
       {/* eslint-disable-next-line @next/next/no-img-element */}
       <img src={icon} alt={""} />
       <div>
diff --git a/app/components/Section.tsx b/app/components/Section.tsx
index 2af9962..f48e61b 100644
--- a/app/components/Section.tsx
+++ b/app/components/Section.tsx
@@ -2,7 +2,7 @@ export const Section = ({
   children,
 }: Readonly<{ children: React.ReactNode }>) => {
   return (
-    <div className="max-w-[400px] md:max-w-[542px] xl:max-w-[1012px] w-full mx-auto flex flex-col gap-2">
+    <div className="max-w-[400px] md:max-w-[542px] xl:max-w-[1012px] w-full mx-auto flex flex-col gap-2 px-2">
       {children}
     </div>
   );