diff --git a/bun.lockb b/bun.lockb
index 24398d9..237d62f 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/index.html b/index.html
index 3b8e86e..52250b9 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,7 @@
     <script defer src="https://visitors.taevas.xyz/script.js" data-website-id="f196d626-e609-4841-9a80-0dc60f523ed5"></script>
     <title>Site - taevas.xyz</title>
   </head>
-  <body class="bg-gradient-to-tl from-amber-100 via-sky-300 to-amber-100 bg-fixed">
+  <body>
     <span id="links" style="display: none;">
       <a rel="me" href="https://taevas.xyz/">Taevas</a>
       <a rel="me" href="https://www.youtube.com/@TTTaevas">YouTube</a>
diff --git a/package.json b/package.json
index 201eb01..1d2ceee 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "scripts": {
     "dev": "bun css && vite build && bun --hot index.ts --dev",
-    "css": "tailwindcss -i ./src/App.css -o index.css",
+    "css": "bunx @tailwindcss/cli -i ./src/App.css -o index.css",
     "lint": "eslint .",
     "getready": "bun install && bun css && vite build",
     "start": "bun getready && bun run index.ts"
@@ -22,18 +22,17 @@
     "@eslint/js": "^9.22.0",
     "@stylistic/eslint-plugin": "^3.1.0",
     "@tailwindcss/forms": "^0.5.10",
-    "@tailwindcss/postcss": "^4.0.12",
+    "@tailwindcss/postcss": "^4.0.13",
     "@types/bun": "latest",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
-    "autoprefixer": "^10.4.21",
     "dotenv": "^16.4.7",
     "eslint": "^9.22.0",
     "eslint-config-xo-typescript": "^7.0.0",
     "eslint-plugin-react": "^7.37.4",
     "postcss": "^8.5.3",
     "react-animate-height": "^3.2.3",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.13",
     "typescript": "^5.8.2",
     "typescript-eslint": "^8.26.1",
     "vite": "^6.2.1"
diff --git a/postcss.config.cjs b/postcss.config.cjs
index 33ad091..52b9b4b 100644
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 }
diff --git a/src/App.css b/src/App.css
index a9d8a59..65dcaa5 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,6 +1,24 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@config '../tailwind.config.js';
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
 
 @font-face {
   font-family: "LexendDeca";
diff --git a/src/App.tsx b/src/App.tsx
index 27d967d..f2fc887 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,7 +8,7 @@ import Infos from "./Infos/index.tsx";
 const root = createRoot(document.getElementById("root")!);
 root.render(
   <React.StrictMode>
-    <div className="App flex text-center bg-gradient-to-tl from-amber-100 via-sky-300 to-amber-100 bg-fixed">
+    <div className="App flex text-center bg-linear-to-tl from-amber-100 via-sky-300 to-amber-100 bg-fixed">
       <MainContent/>
       <Infos/>
     </div>
diff --git a/src/Infos/Info.tsx b/src/Infos/Info.tsx
index 18ad182..8ffee9c 100644
--- a/src/Infos/Info.tsx
+++ b/src/Infos/Info.tsx
@@ -17,7 +17,7 @@ export default class Info extends Component<{
         ${state !== 2 ? "text-sky-600" : "text-purple-600"}`}>
           {this.props.type}
         </h2>
-        <div className="block w-72 bg-gradient-to-r from-sky-900 to-indigo-900 rounded-r-xl border-b-2 border-r-2 border-white">
+        <div className="block w-72 bg-linear-to-r from-sky-900 to-indigo-900 rounded-r-xl border-b-2 border-r-2 border-white">
           {
             state === 1 ?
               this.props.websites.map((website) => {
@@ -26,7 +26,7 @@ export default class Info extends Component<{
                 </div>;
               }) :
               state === 2 ?
-                <div className="flex h-full bg-gradient-to-r from-purple-900 to-pink-900 rounded-xl rounded-l-none border-t-2 border-white">
+                <div className="flex h-full bg-linear-to-r from-purple-900 to-pink-900 rounded-xl rounded-l-none border-t-2 border-white">
                   <div className="h-min m-auto">
                     <div className="w-min mb-2 mx-auto">
                       <MisuseOutline size={64} fill="red"/>
@@ -35,7 +35,7 @@ export default class Info extends Component<{
                     <p className="mx-4 mb-2">Please contact me and let me know about it!</p>
                   </div>
                 </div> :
-                <div className="flex h-full bg-gradient-to-r from-sky-900 to-indigo-900 rounded-xl rounded-l-none border-t-2 border-white">
+                <div className="flex h-full bg-linear-to-r from-sky-900 to-indigo-900 rounded-xl rounded-l-none border-t-2 border-white">
                   <div className="animate-pulse m-auto">
                     <div className="animate-spin h-16 w-16 mx-auto mb-2 border-8 border-sky-600 border-r-gray-200 rounded-full"/>
                     <p className="mx-4">Loading...</p>
diff --git a/src/Infos/Media/Anilist.tsx b/src/Infos/Media/Anilist.tsx
index 63c9af9..040de13 100644
--- a/src/Infos/Media/Anilist.tsx
+++ b/src/Infos/Media/Anilist.tsx
@@ -26,7 +26,7 @@ export default function Anilist() {
       try {
         setElements([
           <div key={"data"} className="flex mb-4">
-            <img className="m-auto w-16 h-22" alt="anime cover" src={data.cover} />
+            <img className="m-auto w-18 h-24" alt="anime cover" src={data.cover} />
             <div className="m-auto pl-2">
               <Link classes="mt-1 px-1 py-2 inline-block w-full font-bold leading-[18px] bg-white text-blue-800" link={data.url} text={data.title}/>
               <p className="mt-4">Started: <strong>{data.startDate}</strong></p>
diff --git a/src/Infos/index.tsx b/src/Infos/index.tsx
index eaff1e1..0a67305 100644
--- a/src/Infos/index.tsx
+++ b/src/Infos/index.tsx
@@ -12,10 +12,10 @@ export default class Infos extends Component {
   private readonly collection = React.createRef<HTMLDivElement>();
 
   render() {
-    return <div ref={this.collection} className="z-[110] lg:z-[0] w-[27px] lg:w-[360px] fixed right-0 h-screen outline outline-4 outline-white overflow-y-auto
-    bg-gradient-to-r from-sky-600 to-indigo-600">
-      <div draggable="false" ref={this.dragbar} className="z-[100] h-full w-[25px] fixed right-[7px] lg:right-[340px] cursor-ew-resize select-none hover:bg-gradient-to-r from-white/80 to-white/1 active:to-white/20"></div>
-      <div className="z-[90] p-2.5 flex flex-wrap text-white">
+    return <div ref={this.collection} className="z-110 lg:z-0 w-[27px] lg:w-[360px] fixed right-0 h-screen outline outline-4 outline-white overflow-y-auto
+    bg-linear-to-r from-sky-600 to-indigo-600">
+      <div draggable="false" ref={this.dragbar} className="z-100 h-full w-[25px] fixed right-[7px] lg:right-[340px] cursor-ew-resize select-none hover:bg-linear-to-r from-white/80 to-white/1 active:to-white/20"></div>
+      <div className="z-90 p-2.5 flex flex-wrap text-white">
         <Media/>
         <Fediverse/>
         <Coding/>
diff --git a/src/Main/MainWindow/SocialButtons/SocialButton.tsx b/src/Main/MainWindow/SocialButtons/SocialButton.tsx
index b415e65..b31062c 100644
--- a/src/Main/MainWindow/SocialButtons/SocialButton.tsx
+++ b/src/Main/MainWindow/SocialButtons/SocialButton.tsx
@@ -20,7 +20,7 @@ export default function SocialButton({
       <button title={title} className={`
       m-1 h-12 w-12 bg-white text-black tracking-[-.2em]
       rounded-full border-solid hover:border-dashed active:brightness-95 border-4 hover:border-8 ${border}
-      transition-transform duration-75 ${rotation} hover:rotate-0
+      cursor-pointer transition-transform duration-75 ${rotation} hover:rotate-0
       `}>
         <img draggable="false" className={`${padding} w-32 absolute right-1/2 bottom-1/2 translate-x-2/4 translate-y-2/4`} src={image} alt={title}/>
       </button>
diff --git a/src/Main/MainWindow/TabButtons/TabButton.tsx b/src/Main/MainWindow/TabButtons/TabButton.tsx
index ce4e21a..d68db67 100644
--- a/src/Main/MainWindow/TabButtons/TabButton.tsx
+++ b/src/Main/MainWindow/TabButtons/TabButton.tsx
@@ -10,7 +10,7 @@ export default function TabButton({
   content: string | React.JSX.Element;
 }) {
   return (
-    <button className={`text-xl text-white m-2 p-4 border-solid border-white border-4 rounded-md bg-gradient-to-t from-70% ${colors} active:brightness-90`} onClick={onClick}>
+    <button className={`cursor-pointer text-xl text-white m-2 p-4 border-solid border-white border-4 rounded-md bg-linear-to-t from-70% ${colors} active:brightness-90`} onClick={onClick}>
       {content}
     </button>
   );
diff --git a/src/parts/CopyField.tsx b/src/parts/CopyField.tsx
index d39c05a..7f3ad1b 100644
--- a/src/parts/CopyField.tsx
+++ b/src/parts/CopyField.tsx
@@ -25,7 +25,7 @@ export default function CopyField({
   }
 
   return (
-    <div className="flex w-fit mx-auto m-2 pr-4 pl-0 text-lg bg-red-500 hover:shadow">
+    <div className="flex w-fit mx-auto m-2 pr-4 pl-0 text-lg bg-red-500 hover:shadow-sm">
       {imageUrl ? <div className="bg-red-700 p-4">
         <img src={imageUrl} draggable="false" className="w-8 h-8"/>
       </div> : ""}
