diff --git a/frontend/.prettierrc b/frontend/.prettierrc
index 12c5880..2f218be 100644
--- a/frontend/.prettierrc
+++ b/frontend/.prettierrc
@@ -4,5 +4,6 @@
     "semi": true,
     "singleQuote": false,
     "bracketSpacing": true,
-    "bracketSameLine": false
+    "bracketSameLine": false,
+    "plugins": ["prettier-plugin-tailwindcss"]
 }
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index d0f2e3c..c4bc369 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -60,7 +60,8 @@
                 "eslint-config-next": "14.1.0",
                 "eslint-config-prettier": "^9.1.0",
                 "postcss": "^8",
-                "prettier": "3.2.4",
+                "prettier": "^3.2.4",
+                "prettier-plugin-tailwindcss": "^0.5.12",
                 "tailwindcss": "^3.3.0",
                 "typescript": "^5.3.3"
             }
@@ -15046,6 +15047,79 @@
                 "url": "https://github.com/prettier/prettier?sponsor=1"
             }
         },
+        "node_modules/prettier-plugin-tailwindcss": {
+            "version": "0.5.12",
+            "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.12.tgz",
+            "integrity": "sha512-o74kiDBVE73oHW+pdkFSluHBL3cYEvru5YgEqNkBMFF7Cjv+w1vI565lTlfoJT4VLWDe0FMtZ7FkE/7a4pMXSQ==",
+            "dev": true,
+            "engines": {
+                "node": ">=14.21.3"
+            },
+            "peerDependencies": {
+                "@ianvs/prettier-plugin-sort-imports": "*",
+                "@prettier/plugin-pug": "*",
+                "@shopify/prettier-plugin-liquid": "*",
+                "@trivago/prettier-plugin-sort-imports": "*",
+                "prettier": "^3.0",
+                "prettier-plugin-astro": "*",
+                "prettier-plugin-css-order": "*",
+                "prettier-plugin-import-sort": "*",
+                "prettier-plugin-jsdoc": "*",
+                "prettier-plugin-marko": "*",
+                "prettier-plugin-organize-attributes": "*",
+                "prettier-plugin-organize-imports": "*",
+                "prettier-plugin-sort-imports": "*",
+                "prettier-plugin-style-order": "*",
+                "prettier-plugin-svelte": "*"
+            },
+            "peerDependenciesMeta": {
+                "@ianvs/prettier-plugin-sort-imports": {
+                    "optional": true
+                },
+                "@prettier/plugin-pug": {
+                    "optional": true
+                },
+                "@shopify/prettier-plugin-liquid": {
+                    "optional": true
+                },
+                "@trivago/prettier-plugin-sort-imports": {
+                    "optional": true
+                },
+                "prettier-plugin-astro": {
+                    "optional": true
+                },
+                "prettier-plugin-css-order": {
+                    "optional": true
+                },
+                "prettier-plugin-import-sort": {
+                    "optional": true
+                },
+                "prettier-plugin-jsdoc": {
+                    "optional": true
+                },
+                "prettier-plugin-marko": {
+                    "optional": true
+                },
+                "prettier-plugin-organize-attributes": {
+                    "optional": true
+                },
+                "prettier-plugin-organize-imports": {
+                    "optional": true
+                },
+                "prettier-plugin-sort-imports": {
+                    "optional": true
+                },
+                "prettier-plugin-style-order": {
+                    "optional": true
+                },
+                "prettier-plugin-svelte": {
+                    "optional": true
+                },
+                "prettier-plugin-twig-melody": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/pretty-ms": {
             "version": "7.0.1",
             "resolved": "https://registry.npmjs.org/pretty-ms/-/pretty-ms-7.0.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 5525f5a..8387a21 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -65,7 +65,8 @@
         "eslint-config-next": "14.1.0",
         "eslint-config-prettier": "^9.1.0",
         "postcss": "^8",
-        "prettier": "3.2.4",
+        "prettier": "^3.2.4",
+        "prettier-plugin-tailwindcss": "^0.5.12",
         "tailwindcss": "^3.3.0",
         "typescript": "^5.3.3"
     }
diff --git a/frontend/src/app/(about)/contact/page.tsx b/frontend/src/app/(about)/contact/page.tsx
index dba1e43..824713b 100644
--- a/frontend/src/app/(about)/contact/page.tsx
+++ b/frontend/src/app/(about)/contact/page.tsx
@@ -36,8 +36,8 @@ export default async function ContactPage() {
     const content = people?.data?.people?.data ?? [];
 
     return (
-        <div className="flex justify-center items-start h-full">
-            <div className="flex flex-wrap justify-center items-start h-full max-w-7xl mx-auto">
+        <div className="flex h-full items-start justify-center">
+            <div className="mx-auto flex h-full max-w-7xl flex-wrap items-start justify-center">
                 {content.map((person, index) => (
                     <ContactCard
                         key={index}
diff --git a/frontend/src/app/(about)/partners/page.tsx b/frontend/src/app/(about)/partners/page.tsx
index 430d88e..0d8dbe6 100644
--- a/frontend/src/app/(about)/partners/page.tsx
+++ b/frontend/src/app/(about)/partners/page.tsx
@@ -39,7 +39,7 @@ export default async function PartnersPage() {
 
     return (
         <div className="flex flex-col items-center text-center">
-            <h1 className="text-3xl font-bold mb-10 mt-5">
+            <h1 className="mb-10 mt-5 text-3xl font-bold">
                 Partners and Collaborators
             </h1>
             {partnersData.map((partner) => {
@@ -57,7 +57,7 @@ export default async function PartnersPage() {
                         href={websiteUrl}
                         target="_blank"
                         key={partnerName}
-                        className="hover:transform hover:scale-105 transition-transform duration-300 ease-in-out w-full max-w-lg mx-auto"
+                        className="mx-auto w-full max-w-lg transition-transform duration-300 ease-in-out hover:scale-105 hover:transform"
                     >
                         <Card className="mb-6 bg-neutral-50">
                             <CardHeader>
diff --git a/frontend/src/app/(about)/team/page.tsx b/frontend/src/app/(about)/team/page.tsx
index 6867f6f..c9586ff 100644
--- a/frontend/src/app/(about)/team/page.tsx
+++ b/frontend/src/app/(about)/team/page.tsx
@@ -78,7 +78,7 @@ export default async function TeamPage() {
                 <div>There are no team members to show.</div>
             ) : (
                 <div>
-                    <h1 className="col-span-full text-3xl font-bold mb-10 mt-5">
+                    <h1 className="col-span-full mb-10 mt-5 text-3xl font-bold">
                         MEET THE TEAM
                     </h1>
                     {[
@@ -90,11 +90,11 @@ export default async function TeamPage() {
                         <div key={index} className="mb-8">
                             {" "}
                             {/* Add margin bottom */}
-                            <h1 className="mb-2 col-span-full text-xl font-bold">
+                            <h1 className="col-span-full mb-2 text-xl font-bold">
                                 {role}
                             </h1>{" "}
                             {/* Increase margin bottom and adjust font size */}
-                            <div className="grid grid-cols-2 gap-4 lg:max-w-4xl lg:mx-auto">
+                            <div className="grid grid-cols-2 gap-4 lg:mx-auto lg:max-w-4xl">
                                 {filterPeopleByRole(role || "").map(
                                     (person, index) => {
                                         const name =
@@ -113,16 +113,16 @@ export default async function TeamPage() {
                                                 href={employeeLink}
                                                 target="_blank"
                                                 key={name + index}
-                                                className="hover:transform hover:scale-105 transition-transform duration-300 ease-in-out"
+                                                className="transition-transform duration-300 ease-in-out hover:scale-105 hover:transform"
                                             >
-                                                <Card className="bg-neutral-50 w-full">
+                                                <Card className="w-full bg-neutral-50">
                                                     <CardHeader>
                                                         <CardTitle className="text-black">
                                                             <p>{name}</p>
                                                         </CardTitle>
                                                     </CardHeader>
                                                     <CardContent className="flex items-center">
-                                                        <Avatar className="w-16 h-16 mr-4">
+                                                        <Avatar className="mr-4 h-16 w-16">
                                                             <AvatarImage
                                                                 src={
                                                                     profilePictureURL
@@ -152,10 +152,10 @@ export default async function TeamPage() {
                 <div>There are no projects to show.</div>
             ) : (
                 <div className="overflow-x-auto">
-                    <h1 className="text-3xl font-bold mb-10 mt-5">
+                    <h1 className="mb-10 mt-5 text-3xl font-bold">
                         Ongoing PhD Projects
                     </h1>
-                    <Table className="w-full border border-collapse border-gray-400">
+                    <Table className="w-full border-collapse border border-gray-400">
                         <TableCaption>Ongoing PhD Projects</TableCaption>
                         <TableHeader>
                             <TableRow className="border-b">
diff --git a/frontend/src/app/blog/[articleSlug]/page.tsx b/frontend/src/app/blog/[articleSlug]/page.tsx
index 2ee4516..2cbab95 100644
--- a/frontend/src/app/blog/[articleSlug]/page.tsx
+++ b/frontend/src/app/blog/[articleSlug]/page.tsx
@@ -84,11 +84,11 @@ export default async function Page({
 
     return (
         <>
-            <div className="flex flex-col gap-4 items-center">
+            <div className="flex flex-col items-center gap-4">
                 <h1 className="text-4xl font-extrabold">
                     {article?.attributes?.title}
                 </h1>
-                <div className="flex flex-row justify-center gap-1 items-center">
+                <div className="flex flex-row items-center justify-center gap-1">
                     {avatarURL && (
                         <Avatar className="">
                             <AvatarImage src={avatarURL} />
diff --git a/frontend/src/app/blog/page.tsx b/frontend/src/app/blog/page.tsx
index 00f5ec3..fc75f79 100644
--- a/frontend/src/app/blog/page.tsx
+++ b/frontend/src/app/blog/page.tsx
@@ -70,13 +70,13 @@ export default async function BlogPage() {
     }
 
     return (
-        <div className="flex flex-col justify-center items-center">
+        <div className="flex flex-col items-center justify-center">
             <h1 className="text-4xl font-extrabold ">Blog</h1>
             <p className="text-sm text-muted-foreground">
                 News and other short stories about our activities are shown
                 here.
             </p>
-            <div className="flex flex-col gap-4 mt-4 justify-center items-center">
+            <div className="mt-4 flex flex-col items-center justify-center gap-4">
                 {graphqlData.data.articles.data.map((article) => {
                     let avatarURL =
                         article?.attributes?.author?.data?.attributes?.avatar
@@ -129,7 +129,7 @@ export default async function BlogPage() {
                                 <BlockRendererClient content={content} />
                             </CardContent>
                             <CardFooter>
-                                <div className="flex flex-row justify-center gap-1 items-center">
+                                <div className="flex flex-row items-center justify-center gap-1">
                                     {avatarURL && (
                                         <Avatar className="">
                                             <AvatarImage src={avatarURL} />
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index 32ade62..1967f48 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -22,7 +22,7 @@ export default function RootLayout({
 }>) {
     return (
         <html lang="en" suppressHydrationWarning>
-            <body className={cn("flex flex-col min-h-screen", inter.className)}>
+            <body className={cn("flex min-h-screen flex-col", inter.className)}>
                 <ApolloWrapper>
                     <ThemeProvider
                         attribute="class"
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 7e2ca27..0e6042d 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -21,14 +21,14 @@ export default function Home() {
 
             <ColoredSection
                 id="about-us"
-                className="flex flex-col items-center py-12 px-8"
+                className="flex flex-col items-center px-8 py-12"
             >
-                <div className="flex flex-col items-center text-center prose dark:prose-invert prose-img:rounded-xl">
+                <div className="prose flex flex-col items-center text-center dark:prose-invert prose-img:rounded-xl">
                     <h1>
                         Empowering Space Exploration One Satellite at a Time
                     </h1>
 
-                    <div className="relative w-[300px] h-[300px]">
+                    <div className="relative h-[300px] w-[300px]">
                         <Image
                             alt="Satellite in orbit"
                             src="/images/satellite.jpg"
@@ -36,7 +36,7 @@ export default function Home() {
                             layout="fill"
                         />
                     </div>
-                    <div className="flex flex-col gap-4 items-center col-span-2 lg:col-span-2 ">
+                    <div className="col-span-2 flex flex-col items-center gap-4 lg:col-span-2 ">
                         <div className=" self-center">
                             <p>
                                 NTNU Small Satellite Lab is an initiative to
@@ -55,7 +55,7 @@ export default function Home() {
                     </div>
                 </div>
             </ColoredSection>
-            <div className="pt-8 items-center text-center flex flex-col py-12 px-8">
+            <div className="flex flex-col items-center px-8 py-12 pt-8 text-center">
                 <div className="prose dark:prose-invert">
                     <h1 className="">Projects</h1>
                     <p className="">
@@ -75,10 +75,10 @@ export default function Home() {
                     </Link>
                 </div>
             </div>
-            <ColoredSection className="flex flex-col items-center py-12 px-8">
-                <div className="flex flex-col items-center text-center prose dark:prose-invert prose-img:rounded-xl">
+            <ColoredSection className="flex flex-col items-center px-8 py-12">
+                <div className="prose flex flex-col items-center text-center dark:prose-invert prose-img:rounded-xl">
                     <h1 className="">Most recent picture</h1>
-                    <div className="relative w-[300px] h-[300px]">
+                    <div className="relative h-[300px] w-[300px]">
                         <Image
                             alt="Satellite image of city"
                             src="/images/recent-image.jpg"
diff --git a/frontend/src/app/projects/[projectSlug]/page.tsx b/frontend/src/app/projects/[projectSlug]/page.tsx
index e5b13da..d30b6cf 100644
--- a/frontend/src/app/projects/[projectSlug]/page.tsx
+++ b/frontend/src/app/projects/[projectSlug]/page.tsx
@@ -77,7 +77,7 @@ export default async function Page({
     }
 
     return (
-        <div className="flex flex-col gap-4 items-center">
+        <div className="flex flex-col items-center gap-4">
             <h1 className="text-4xl font-extrabold">
                 {projects?.attributes?.title}
             </h1>
diff --git a/frontend/src/app/projects/page.tsx b/frontend/src/app/projects/page.tsx
index f9d82dc..9daa351 100644
--- a/frontend/src/app/projects/page.tsx
+++ b/frontend/src/app/projects/page.tsx
@@ -55,13 +55,13 @@ export default async function ProjectsPage() {
     }
 
     return (
-        <div className="flex flex-col justify-center items-center">
+        <div className="flex flex-col items-center justify-center">
             <h1 className="text-4xl font-extrabold ">Our Projects</h1>
             <p className="text-sm text-muted-foreground">
                 Information about our various projects are shown here.
             </p>
 
-            <div className="flex flex-col gap-4 mt-4 justify-center items-center">
+            <div className="mt-4 flex flex-col items-center justify-center gap-4">
                 {graphqlData.data.projects.data.map((project) => {
                     let coverImage =
                         project?.attributes?.coverImage?.data?.attributes?.url;
diff --git a/frontend/src/app/satellites/[satelliteSlug]/page.tsx b/frontend/src/app/satellites/[satelliteSlug]/page.tsx
index cc98921..61b4172 100644
--- a/frontend/src/app/satellites/[satelliteSlug]/page.tsx
+++ b/frontend/src/app/satellites/[satelliteSlug]/page.tsx
@@ -49,7 +49,7 @@ export default async function SatelliteInfoPage({
 
                 {graphqlData?.data?.satellites?.data.map((satellite) => (
                     <div key={satellite.id} className="w-1/2 text-center">
-                        <h1 className="text-4xl mb-4">
+                        <h1 className="mb-4 text-4xl">
                             {satellite?.attributes?.satelliteName}
                         </h1>
                         <div className="gap-1">
diff --git a/frontend/src/app/satellites/page.tsx b/frontend/src/app/satellites/page.tsx
index 57a57ab..f2c435d 100644
--- a/frontend/src/app/satellites/page.tsx
+++ b/frontend/src/app/satellites/page.tsx
@@ -50,7 +50,7 @@ export default async function Satellites() {
                     }
                     return (
                         <Card key={satellite.id}>
-                            <CardHeader className="flex flex-col justify-center items-center">
+                            <CardHeader className="flex flex-col items-center justify-center">
                                 <CardTitle>
                                     <Link
                                         href={
diff --git a/frontend/src/components/BlockRendererClient.tsx b/frontend/src/components/BlockRendererClient.tsx
index c98a1af..02c14da 100644
--- a/frontend/src/components/BlockRendererClient.tsx
+++ b/frontend/src/components/BlockRendererClient.tsx
@@ -31,23 +31,23 @@ export default function BlockRendererClient({
                     switch (level) {
                         case 1:
                             return (
-                                <h1 className="text-4xl mb-4">{children}</h1>
+                                <h1 className="mb-4 text-4xl">{children}</h1>
                             );
                         case 2:
                             return (
-                                <h2 className="text-3xl mb-2">{children}</h2>
+                                <h2 className="mb-2 text-3xl">{children}</h2>
                             );
                         case 3:
                             return (
-                                <h3 className="text-2xl mb-2">{children}</h3>
+                                <h3 className="mb-2 text-2xl">{children}</h3>
                             );
                         case 4:
-                            return <h4 className="text-xl mb-2">{children}</h4>;
+                            return <h4 className="mb-2 text-xl">{children}</h4>;
                         case 5:
-                            return <h5 className="text-lg mb-2">{children}</h5>;
+                            return <h5 className="mb-2 text-lg">{children}</h5>;
                         default:
                             return (
-                                <h1 className="text-4xl mb-4">{children}</h1>
+                                <h1 className="mb-4 text-4xl">{children}</h1>
                             );
                     }
                 },
diff --git a/frontend/src/components/ContactCard.tsx b/frontend/src/components/ContactCard.tsx
index dea1e19..1a7e4b1 100644
--- a/frontend/src/components/ContactCard.tsx
+++ b/frontend/src/components/ContactCard.tsx
@@ -25,7 +25,7 @@ export function ContactCard({
     externalUrl,
 }: ContactCardProps) {
     return (
-        <Card className="w-[350px] m-2">
+        <Card className="m-2 w-[350px]">
             <CardHeader>
                 <Avatar>
                     <AvatarImage src={imageUrl} alt={name} />
diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
index 53975a3..0316697 100644
--- a/frontend/src/components/Footer.tsx
+++ b/frontend/src/components/Footer.tsx
@@ -2,13 +2,13 @@ import NTNULogo from "./ntnu/NTNULogo";
 
 export default function Footer() {
     return (
-        <footer className="p-4 bg-background text-foreground flex flex-col items-center">
-            <div className="flex flex-row items-center justify-between w-full">
-                <div className="flex-1 flex justify-start">
+        <footer className="flex flex-col items-center bg-background p-4 text-foreground">
+            <div className="flex w-full flex-row items-center justify-between">
+                <div className="flex flex-1 justify-start">
                     <NTNULogo />
                 </div>
 
-                <div className="flex-1 flex justify-center">
+                <div className="flex flex-1 justify-center">
                     <div className="flex flex-col text-center">
                         <div className="flex flex-row gap-4">
                             <a href="#" className="hover:underline">
@@ -28,7 +28,7 @@ export default function Footer() {
                     </div>
                 </div>
 
-                <div className="flex-1 flex justify-end">
+                <div className="flex flex-1 justify-end">
                     <div className="flex flex-col text-right">
                         <span className="">NTNU Small Satellite Lab</span>
                         <span className="">Trondheim, Norway</span>
diff --git a/frontend/src/components/HeroWithAnimation.tsx b/frontend/src/components/HeroWithAnimation.tsx
index bc40936..e3999d2 100644
--- a/frontend/src/components/HeroWithAnimation.tsx
+++ b/frontend/src/components/HeroWithAnimation.tsx
@@ -39,7 +39,7 @@ export default function HeroWithAnimation() {
             description={"We launch satellites 🚀"}
             buttonText={"About us"}
             buttonLink=""
-            className="min-h-[calc(100vh-72px)] flex flex-col justify-center z-10"
+            className="z-10 flex min-h-[calc(100vh-72px)] flex-col justify-center"
             handleClick={handleClick}
         >
             {/* eslint-disable-next-line @next/next/no-img-element */}
diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
index 49f86ae..94d2e99 100644
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -38,24 +38,24 @@ export default function Navbar() {
     };
 
     return (
-        <nav className="flex items-center justify-between p-4 w-full bg-background border-b border-x-neutral-600 text-foreground">
+        <nav className="flex w-full items-center justify-between border-b border-x-neutral-600 bg-background p-4 text-foreground">
             <div className="flex-1">
                 <Link href="/">
-                    <h1 className="text-3xl font-bold flex flex-row">
+                    <h1 className="flex flex-row text-3xl font-bold">
                         <Icon
                             icon="twemoji:satellite"
                             width="36"
                             height="36"
                             className="mr-2"
                         />
-                        <span className="transition duration-300 underline decoration-transparent hover:decoration-white ">
+                        <span className="underline decoration-transparent transition duration-300 hover:decoration-white ">
                             SmallSatLab
                         </span>
                     </h1>
                 </Link>
             </div>
 
-            <div className="flex-1 flex justify-center">
+            <div className="flex flex-1 justify-center">
                 <div className="flex items-center gap-8">
                     <Link href="/blog">
                         <Button variant={getButtonVariant("/blog")}>
@@ -104,7 +104,7 @@ export default function Navbar() {
                 </div>
             </div>
 
-            <div className="flex-1 flex justify-end">
+            <div className="flex flex-1 justify-end">
                 <Button onClick={toggleTheme} variant={"ghost"}>
                     {isLightTheme ? (
                         <Icon
diff --git a/frontend/src/components/map/MyCustomMap.tsx b/frontend/src/components/map/MyCustomMap.tsx
index 1c23e4c..d6bdfd2 100644
--- a/frontend/src/components/map/MyCustomMap.tsx
+++ b/frontend/src/components/map/MyCustomMap.tsx
@@ -58,7 +58,7 @@ const MyCustomMap = () => {
         <>
             <div
                 ref={mapContainer}
-                className="relative aspect-square w-full dark:bg-neutral-700 bg-neutral-600"
+                className="relative aspect-square w-full bg-neutral-600 dark:bg-neutral-700"
             ></div>
         </>
     );
diff --git a/frontend/src/components/map/MyGlobe.tsx b/frontend/src/components/map/MyGlobe.tsx
index 1fe90da..e930d95 100644
--- a/frontend/src/components/map/MyGlobe.tsx
+++ b/frontend/src/components/map/MyGlobe.tsx
@@ -132,7 +132,7 @@ export default function MyGlobe({
                 <div
                     id="time-log"
                     ref={timeLogger}
-                    className="absolute top-0 bottom-0 z-50 text-white text-opacity-75"
+                    className="absolute bottom-0 top-0 z-50 text-white text-opacity-75"
                 ></div>
                 <div id="chart" ref={chart}></div>
             </div>
diff --git a/frontend/src/components/map/githubglobe/GHGlobe.tsx b/frontend/src/components/map/githubglobe/GHGlobe.tsx
index 07be921..c456106 100644
--- a/frontend/src/components/map/githubglobe/GHGlobe.tsx
+++ b/frontend/src/components/map/githubglobe/GHGlobe.tsx
@@ -238,7 +238,7 @@ export default function GHGlobe({ satDatas }: { satDatas: SatelliteData[] }) {
         <div>
             <canvas
                 id="gh-globe-canvas"
-                className="w-full min-h-[calc(100vh-72px)]"
+                className="min-h-[calc(100vh-72px)] w-full"
             ></canvas>
             <Tooltip id="tooltip-globe">TEST</Tooltip>
         </div>
diff --git a/frontend/src/components/map/githubglobe/tooltip.tsx b/frontend/src/components/map/githubglobe/tooltip.tsx
index 5bef45c..1467016 100644
--- a/frontend/src/components/map/githubglobe/tooltip.tsx
+++ b/frontend/src/components/map/githubglobe/tooltip.tsx
@@ -11,7 +11,7 @@ const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
             ref={ref}
             {...props}
             className={cn(
-                "absolute block z-50 p-2 bg-black bg-opacity-50 rounded-lg shadow-md text-sm",
+                "absolute z-50 block rounded-lg bg-black bg-opacity-50 p-2 text-sm shadow-md",
                 className,
             )}
         >
diff --git a/frontend/src/components/ui/dropdown-menu.tsx b/frontend/src/components/ui/dropdown-menu.tsx
index a4630f3..735295d 100644
--- a/frontend/src/components/ui/dropdown-menu.tsx
+++ b/frontend/src/components/ui/dropdown-menu.tsx
@@ -83,7 +83,7 @@ const DropdownMenuItem = React.forwardRef<
     <DropdownMenuPrimitive.Item
         ref={ref}
         className={cn(
-            "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+            "focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
             inset && "pl-8",
             className,
         )}
@@ -99,7 +99,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     <DropdownMenuPrimitive.CheckboxItem
         ref={ref}
         className={cn(
-            "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+            "focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
             className,
         )}
         checked={checked}
@@ -123,7 +123,7 @@ const DropdownMenuRadioItem = React.forwardRef<
     <DropdownMenuPrimitive.RadioItem
         ref={ref}
         className={cn(
-            "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+            "focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
             className,
         )}
         {...props}
diff --git a/frontend/src/components/ui/hero.tsx b/frontend/src/components/ui/hero.tsx
index 0453ca8..863197a 100644
--- a/frontend/src/components/ui/hero.tsx
+++ b/frontend/src/components/ui/hero.tsx
@@ -34,10 +34,10 @@ const Hero = React.forwardRef<HTMLDivElement, HeroProps>(
             <div className="container px-4 md:px-6">
                 <div className="flex flex-col items-center space-y-4 text-center">
                     <div className="space-y-2">
-                        <h1 className=" font-bold tracking-tighter text-6xl">
+                        <h1 className=" text-6xl font-bold tracking-tighter">
                             {title}
                         </h1>
-                        <p className="mx-auto max-w-[700px] text-gray-500 text-xl dark:text-gray-400">
+                        <p className="mx-auto max-w-[700px] text-xl text-gray-500 dark:text-gray-400">
                             {description}
                         </p>
                     </div>