diff --git a/components/AnimatedTitle.js b/components/AnimatedTitle.js
new file mode 100644
index 0000000..de39095
--- /dev/null
+++ b/components/AnimatedTitle.js
@@ -0,0 +1,53 @@
+import { motion } from 'framer-motion';
+
+const AnimatedTitle = () => {
+  const title = "No Text To Speech";
+  const words = title.split(' ');
+  let charCount = 0;
+  const characterDelay = 0.05;
+
+  return (
+    <motion.h1
+      className="text-5xl md:text-7xl font-extrabold tracking-tight text-ntts-blue"
+      aria-label={title}
+      style={{ textAlign: 'center' }}
+      initial="hidden"
+      animate="visible"
+    >
+      {words.map((word, wordIndex) => {
+        const wordElement = (
+          <span key={wordIndex} style={{ display: 'inline-block', whiteSpace: 'nowrap' }}>
+            {word.split('').map((char, charIndex) => {
+              const el = (
+                <motion.span
+                  key={charIndex}
+                  style={{ display: 'inline-block' }}
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{
+                    delay: charCount * characterDelay,
+                    type: 'spring',
+                    damping: 12,
+                    stiffness: 100,
+                  }}
+                >
+                  {char}
+                </motion.span>
+              );
+              charCount++;
+              return el;
+            })}
+          </span>
+        );
+
+        if (wordIndex < words.length - 1) {
+          charCount++; // for the space
+          return [wordElement, <span key={`space-${wordIndex}`}>&nbsp;</span>];
+        }
+        return wordElement;
+      })}
+    </motion.h1>
+  );
+};
+
+export default AnimatedTitle;
diff --git a/components/Homepage.js b/components/Homepage.js
index a2d55a3..b750ec7 100644
--- a/components/Homepage.js
+++ b/components/Homepage.js
@@ -4,17 +4,21 @@ import DiscordIcon from './icons/discord';
 import FAQIcon from './icons/faq';
 import RulesIcon from './icons/rules';
 import ScamsIcon from './icons/scams';
+import AnimatedTitle from './AnimatedTitle';
 
 const Card = ({ title, description, href, icon: Icon }) => (
   <Link
     href={href}
-    className="flex flex-col justify-between p-6 bg-dark-card border-2 border-ntts-blue-light rounded-lg transition-all duration-200 ease-in-out hover:border-ntts-blue-hover hover:scale-[1.02] hover:shadow-lg hover:shadow-ntts-blue/10 h-32"
+    className="flex flex-col justify-between p-6 bg-gradient-to-r from-gray-800 to-gray-700 border border-gray-600 rounded-xl transition-all duration-300 ease-out hover:border-ntts-blue-light/50 hover:scale-[1.02] hover:shadow-xl hover:shadow-gray-900/70 h-32 group relative overflow-hidden"
   >
-    <div className="flex items-center mb-2">
-      {Icon && <div className="text-[#253540]">{<Icon />}</div>}
-      <h3 className="ml-3 text-xl font-bold text-[#253540]">{title}</h3>
+    {/* Shimmer effect */}
+    <div className="absolute inset-0 -translate-x-full group-hover:translate-x-full transition-transform duration-1000 bg-gradient-to-r from-transparent via-white/10 to-transparent skew-x-12" />
+    
+    <div className="flex items-center mb-2 relative z-10">
+      {Icon && <div className="text-ntts-blue mr-3"><Icon /></div>}
+      <h3 className="text-xl font-bold text-ntts-blue">{title}</h3>
     </div>
-    <p className="text-[#253540]">{description}</p>
+    <p className="text-dark-text-secondary text-sm relative z-10">{description}</p>
   </Link>
 );
 
@@ -34,10 +38,9 @@ export default function Homepage() {
   return (
     <div className={containerClasses}>
       <div className="text-center mb-12">
-        <h1 className="text-5xl md:text-7xl font-extrabold tracking-tight text-ntts-blue mb-4">
-          No Text To Speech
-        </h1>
-        <p className="text-xl md:text-2xl font-bold text-dark-text-secondary max-w-2xl mx-auto">
+        <AnimatedTitle />
+        <br />
+        <p className="text-xl md:text-2xl font-bold text-dark-text-secondary max-w-2xl mx-auto px-4">
           The official community hub. Find our rules, guides, and important information.
         </p>
       </div>
diff --git a/package.json b/package.json
index 8024e10..58af4b1 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "focus-visible": "^5.2.0",
+    "framer-motion": "^12.23.12",
     "intersection-observer": "^0.12.2",
     "next": "^13.5.4",
     "next-plausible": "^3.12.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 458ec01..329233d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,9 @@ importers:
       focus-visible:
         specifier: ^5.2.0
         version: 5.2.0
+      framer-motion:
+        specifier: ^12.23.12
+        version: 12.23.12(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
       intersection-observer:
         specifier: ^0.12.2
         version: 0.12.2
@@ -753,6 +756,20 @@ packages:
   fraction.js@4.3.7:
     resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
 
+  framer-motion@12.23.12:
+    resolution: {integrity: sha512-6e78rdVtnBvlEVgu6eFEAgG9v3wLnYEboM8I5O5EXvfKC8gxGQB8wXJdhkMy10iVcn05jl6CNw7/HTsTCfwcWg==}
+    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
+
   fs.realpath@1.0.0:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
 
@@ -1201,6 +1218,12 @@ packages:
   minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
 
+  motion-dom@12.23.12:
+    resolution: {integrity: sha512-RcR4fvMCTESQBD/uKQe49D5RUeDOokkGRmz4ceaJKDBgHYtZtntC/s2vLvY38gqGaytinij/yi3hMcWVcEF5Kw==}
+
+  motion-utils@12.23.6:
+    resolution: {integrity: sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==}
+
   mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
@@ -2461,6 +2484,15 @@ snapshots:
 
   fraction.js@4.3.7: {}
 
+  framer-motion@12.23.12(react-dom@18.2.0(react@18.3.1))(react@18.3.1):
+    dependencies:
+      motion-dom: 12.23.12
+      motion-utils: 12.23.6
+      tslib: 2.4.0
+    optionalDependencies:
+      react: 18.3.1
+      react-dom: 18.2.0(react@18.3.1)
+
   fs.realpath@1.0.0: {}
 
   fsevents@2.3.2:
@@ -3247,6 +3279,12 @@ snapshots:
     dependencies:
       brace-expansion: 1.1.11
 
+  motion-dom@12.23.12:
+    dependencies:
+      motion-utils: 12.23.6
+
+  motion-utils@12.23.6: {}
+
   mri@1.2.0: {}
 
   ms@2.1.3: {}
diff --git a/theme.config.js b/theme.config.js
index 2a93b27..a8d23c9 100644
--- a/theme.config.js
+++ b/theme.config.js
@@ -1,7 +1,6 @@
 import { useRouter } from "next/router";
 import { useConfig } from "nextra-theme-docs";
 import Logo from "./components/icons/logo";
-import Ntts from "./components/icons/ntts";
 import useLocalesMap from "./components/use-locales-map"; 
 import {
   editTextMap,
@@ -112,7 +111,9 @@ const themeConfig = {
     );
   },
 
-  footer: "",
+  footer: {
+    text: null,
+  },
 
   gitTimestamp({ timestamp }) {
     const { locale } = useRouter();