diff --git a/.gitignore b/.gitignore
index 009bcc2..8f8ec6b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -47,4 +47,7 @@ bun.lockb
 package-lock.json
 
 # vs code
-.vscode/
\ No newline at end of file
+.vscode/
+
+# webstorm
+.idea/
\ No newline at end of file
diff --git a/app/about/page.tsx b/app/about/page.tsx
index c6362af..56150d8 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -6,7 +6,7 @@ export default function About() {
   return (
     <div className="min-h-screen flex flex-col">
       <Header />
-      <main className="flex-grow container mx-auto px-4 py-12">
+      <main className="grow container mx-auto px-4 py-12">
         <AboutPg />
       </main>
       <Footer />
diff --git a/app/contact/page.tsx b/app/contact/page.tsx
index 6b7e06a..cd587c4 100644
--- a/app/contact/page.tsx
+++ b/app/contact/page.tsx
@@ -6,7 +6,7 @@ export default function Contact() {
   return (
     <div className="min-h-screen flex flex-col">
       <Header />
-      <main className="flex-grow container mx-auto px-4 py-12">
+      <main className="grow container mx-auto px-4 py-12">
         <ContactPg />
       </main>
       <Footer />
diff --git a/app/domains/page.tsx b/app/domains/page.tsx
index ba7b900..970deaa 100644
--- a/app/domains/page.tsx
+++ b/app/domains/page.tsx
@@ -6,7 +6,7 @@ export default function Domains() {
   return (
     <div className="min-h-screen flex flex-col">
       <Header />
-      <main className="flex-grow container mx-auto px-4 py-12">
+      <main className="grow container mx-auto px-4 py-12">
         <DomainsPg />
       </main>
       <Footer />
diff --git a/app/globals.css b/app/globals.css
index 280b439..78de090 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,26 +1,47 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
 
-:root {
-  --foreground-rgb: 255, 255, 255;
-  --background-start-rgb: 0, 0, 0;
-  --background-end-rgb: 0, 0, 0;
+@theme {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
 }
 
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+/*
+  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);
+  }
+}
+
+@utility text-balance {
+  text-wrap: balance;
 }
 
 @layer utilities {
-  .text-balance {
-    text-wrap: balance;
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+
+  body {
+    color: rgb(var(--foreground-rgb));
+    background: linear-gradient(
+        to bottom,
+        transparent,
+        rgb(var(--background-end-rgb))
+      )
+      rgb(var(--background-start-rgb));
   }
 }
 
diff --git a/app/manifesto/page.tsx b/app/manifesto/page.tsx
index 6298ab8..117ef7a 100644
--- a/app/manifesto/page.tsx
+++ b/app/manifesto/page.tsx
@@ -6,7 +6,7 @@ export default function Manifesto() {
   return (
     <div className="min-h-screen flex flex-col">
       <Header />
-      <main className="flex-grow container mx-auto px-4 py-12">
+      <main className="grow container mx-auto px-4 py-12">
         <ManifestoPg />
       </main>
       <Footer />
diff --git a/app/music/page.tsx b/app/music/page.tsx
index 9592e3a..f10a013 100644
--- a/app/music/page.tsx
+++ b/app/music/page.tsx
@@ -7,7 +7,7 @@ export default function Music() {
   return (
     <div className="min-h-screen flex flex-col">
       <Header />
-      <main className="flex-grow container mx-auto px-4 py-12">
+      <main className="grow container mx-auto px-4 py-12">
         <MusicWidget />
         <MusicInfo />
       </main>
diff --git a/app/page.tsx b/app/page.tsx
index dfcb26e..737c0b7 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -6,7 +6,7 @@ export default function Home() {
   return (
     <div className="min-h-screen flex flex-col">
       <Header />
-      <main className="flex-grow container mx-auto px-4 py-12">
+      <main className="grow container mx-auto px-4 py-12">
         <HomePg />
       </main>
       <Footer />
diff --git a/app/time-periods/early-summer-2024/page.tsx b/app/time-periods/early-summer-2024/page.tsx
index 08c1df3..15869fd 100644
--- a/app/time-periods/early-summer-2024/page.tsx
+++ b/app/time-periods/early-summer-2024/page.tsx
@@ -6,7 +6,7 @@ export default function EarlySummer2024() {
   return (
     <div className="min-h-screen flex flex-col">
       <Header />
-      <main className="flex-grow container mx-auto px-4 py-12">
+      <main className="grow container mx-auto px-4 py-12">
         <WhatWasGoingOn />
       </main>
       <Footer />
diff --git a/app/time-periods/early-summer-2024/what-was-going-on/page.tsx b/app/time-periods/early-summer-2024/what-was-going-on/page.tsx
index 81cbbb6..31a9ee4 100644
--- a/app/time-periods/early-summer-2024/what-was-going-on/page.tsx
+++ b/app/time-periods/early-summer-2024/what-was-going-on/page.tsx
@@ -6,7 +6,7 @@ export default function Music() {
   return (
     <div className="min-h-screen flex flex-col">
       <Header />
-      <main className="flex-grow container mx-auto px-4 py-12">
+      <main className="grow container mx-auto px-4 py-12">
         <WhatWasGoingOn />
       </main>
       <Footer />
diff --git a/app/time-periods/late-summer-2024/page.tsx b/app/time-periods/late-summer-2024/page.tsx
index 4e12b9c..d45de92 100644
--- a/app/time-periods/late-summer-2024/page.tsx
+++ b/app/time-periods/late-summer-2024/page.tsx
@@ -6,7 +6,7 @@ export default function LateSummer2024() {
   return (
     <div className="min-h-screen flex flex-col">
       <Header />
-      <main className="flex-grow container mx-auto px-4 py-12">
+      <main className="grow container mx-auto px-4 py-12">
         <WhatWasGoingOn />
       </main>
       <Footer />
diff --git a/app/time-periods/late-summer-2024/what-was-going-on/page.tsx b/app/time-periods/late-summer-2024/what-was-going-on/page.tsx
index 93d2787..353e524 100644
--- a/app/time-periods/late-summer-2024/what-was-going-on/page.tsx
+++ b/app/time-periods/late-summer-2024/what-was-going-on/page.tsx
@@ -6,7 +6,7 @@ export default function Music() {
   return (
     <div className="min-h-screen flex flex-col">
       <Header />
-      <main className="flex-grow container mx-auto px-4 py-12">
+      <main className="grow container mx-auto px-4 py-12">
         <WhatWasGoingOn />
       </main>
       <Footer />
diff --git a/components/Header.tsx b/components/Header.tsx
index f0e4959..b2bca95 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -30,7 +30,7 @@ export default function Header() {
         <Link href="/" className="text-gray-300 hover:text-white text-2xl font-bold transition-all duration-300 hover:glow">
           aidxn.cc
         </Link>
-        <button onClick={toggleMenu} className="md:hidden text-gray-300 focus:outline-none">
+        <button onClick={toggleMenu} className="md:hidden text-gray-300 focus:outline-hidden">
           {isOpen ? <X className="text-2xl" /> : <Menu className="text-2xl" />}
         </button>
         <ul className={`flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-4 absolute md:static bg-gray-800 md:bg-transparent w-full md:w-auto left-0 md:left-auto top-16 md:top-auto p-4 md:p-0 transition-all duration-300 ease-in-out ${isOpen ? 'flex' : 'hidden md:flex'}`}>
diff --git a/components/objects/BackButton.tsx b/components/objects/BackButton.tsx
index d22c60e..f1cf8be 100644
--- a/components/objects/BackButton.tsx
+++ b/components/objects/BackButton.tsx
@@ -12,7 +12,7 @@ const BackButton: React.FC<BackButtonProps> = ({ href, label = 'Back' }) => {
   return (
     <Link 
       href={href}
-      className="inline-flex items-center px-4 py-2 mt-4 text-white bg-gray-800 rounded shadow-md transition-all duration-300 ease-in-out hover:bg-gray-700 hover:shadow-lg hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
+      className="inline-flex items-center px-4 py-2 mt-4 text-white bg-gray-800 rounded-sm shadow-md transition-all duration-300 ease-in-out hover:bg-gray-700 hover:shadow-lg hover:-translate-y-0.5 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
       aria-label={`Go back to ${label}`}
     >
       <FontAwesomeIcon icon={faArrowLeft} className="mr-2" />
diff --git a/components/objects/Button.tsx b/components/objects/Button.tsx
index a8afb1b..ef82124 100644
--- a/components/objects/Button.tsx
+++ b/components/objects/Button.tsx
@@ -10,7 +10,7 @@ const MusicInfoButton: React.FC<MusicInfoButtonProps> = ({ href, label }) => {
   return (
     <Link 
       href={href}
-      className="inline-block bg-gray-800 text-white font-bold py-2 px-4 rounded shadow-md transition-all duration-300 ease-in-out hover:bg-gray-700 hover:shadow-lg hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
+      className="inline-block bg-gray-800 text-white font-bold py-2 px-4 rounded-sm shadow-md transition-all duration-300 ease-in-out hover:bg-gray-700 hover:shadow-lg hover:-translate-y-0.5 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
     >
       {label}
     </Link>
diff --git a/components/widgets/FeaturedRepos.tsx b/components/widgets/FeaturedRepos.tsx
index 12ca58b..18ca946 100644
--- a/components/widgets/FeaturedRepos.tsx
+++ b/components/widgets/FeaturedRepos.tsx
@@ -13,7 +13,7 @@ export default function GitHubFeatured() {
             <h3 className="text-xl font-bold text-gray-100 mb-3">
               <FontAwesomeIcon icon={project.github ? faGithub : faGitAlt} className="mr-2" /> {project.name}
             </h3>
-            <p className="text-gray-300 flex-grow">{project.description}</p>
+            <p className="text-gray-300 grow">{project.description}</p>
           </div>
           <div className="pt-4 border-t border-gray-700 flex justify-between items-center mt-auto">
             <Link href={project.url} className="text-blue-400 hover:underline">View Repo</Link>
diff --git a/components/widgets/LastPlayed.tsx b/components/widgets/LastPlayed.tsx
index 0ad3d55..e92bb45 100644
--- a/components/widgets/LastPlayed.tsx
+++ b/components/widgets/LastPlayed.tsx
@@ -40,7 +40,7 @@ const LastPlayed: React.FC = () => {
   return (
     <div className="max-w-2xl mx-auto mb-12">
       <h2 className="text-2xl font-bold mb-4 text-gray-200">Last Played Song</h2>
-      <div className="now-playing flex items-center border border-gray-300 rounded-lg p-4 max-w-md mt-8 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg">
+      <div className="now-playing flex items-center border border-gray-300 rounded-lg p-4 max-w-md mt-8 bg-white/10 backdrop-filter backdrop-blur-lg">
         <Image 
           src={track.image.find(img => img.size === 'large')?.['#text'] || '/placeholder.png'} 
           alt={track.name} 
diff --git a/components/widgets/Music.tsx b/components/widgets/Music.tsx
index 3e74a8e..047ccd2 100644
--- a/components/widgets/Music.tsx
+++ b/components/widgets/Music.tsx
@@ -59,7 +59,7 @@ export default function Home() {
             id="timePeriod"
             value={timePeriod}
             onChange={(e) => setTimePeriod(e.target.value)}
-            className="ml-2 p-2 bg-gray-700 text-gray-300 rounded"
+            className="ml-2 p-2 bg-gray-700 text-gray-300 rounded-sm"
           >
             <option value="Early Summer 2024">Early Summer 2024</option>
           </select>
diff --git a/package.json b/package.json
index d604cb5..bc37682 100644
--- a/package.json
+++ b/package.json
@@ -15,19 +15,20 @@
     "@fortawesome/react-fontawesome": "^0.2.2",
     "geist": "^1.3.1",
     "lucide-react": "^0.469.0",
-    "next": "15.1.3",
+    "next": "^15.2.0-canary.63",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "typescript": "^5.7.3",
+    "@eslint/eslintrc": "^3.2.0",
+    "@tailwindcss/postcss": "^4.0.0",
     "@types/node": "^20.17.19",
-    "@types/react": "^19.0.8",
-    "@types/react-dom": "^19.0.3",
-    "postcss": "^8.5.2",
-    "tailwindcss": "^3.4.17",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
     "eslint": "^9.20.1",
     "eslint-config-next": "15.1.3",
-    "@eslint/eslintrc": "^3.2.0"
+    "postcss": "^8.5.2",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.7.3"
   }
 }
diff --git a/postcss.config.mjs b/postcss.config.mjs
index 1a69fd2..5d6d845 100644
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@@ -1,7 +1,7 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
   },
 };
 
diff --git a/tailwind.config.ts b/tailwind.config.ts
deleted file mode 100644
index 1362b88..0000000
--- a/tailwind.config.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { Config } from "tailwindcss";
-
-export default {
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      colors: {
-        background: "var(--background)",
-        foreground: "var(--foreground)",
-      },
-    },
-  },
-  plugins: [],
-} satisfies Config;