diff --git a/components/layout/footer.tsx b/components/layout/footer.tsx
index fd2e9f947..0c690f251 100644
--- a/components/layout/footer.tsx
+++ b/components/layout/footer.tsx
@@ -8,14 +8,16 @@ import { getMenu } from 'lib/shopify';
 import { Menu } from 'lib/shopify/types';
 
 export default async function Footer() {
+  const currentYear = new Date().getFullYear();
+  const copyrightDate = 2023 + (currentYear > 2023 ? `-${currentYear}` : '');
   const menu = await getMenu('next-js-frontend-footer-menu');
 
   return (
-    <footer className="border-t border-gray-700 bg-white text-black dark:bg-black dark:text-white">
-      <div className="mx-auto w-full max-w-7xl px-6">
-        <div className="grid grid-cols-1 gap-8 border-b border-gray-700 py-12 transition-colors duration-150 lg:grid-cols-12">
+    <footer className="text-black bg-white border-t border-gray-700 dark:bg-black dark:text-white">
+      <div className="w-full px-6 mx-auto max-w-7xl">
+        <div className="grid grid-cols-1 gap-8 py-12 transition-colors duration-150 border-b border-gray-700 lg:grid-cols-12">
           <div className="col-span-1 lg:col-span-3">
-            <a className="flex flex-initial items-center font-bold md:mr-24" href="/">
+            <a className="flex items-center flex-initial font-bold md:mr-24" href="/">
               <span className="mr-2">
                 <LogoIcon className="h-8" />
               </span>
@@ -44,8 +46,10 @@ export default async function Footer() {
             </a>
           </div>
         </div>
-        <div className="flex flex-col items-center justify-between space-y-4 pb-10 pt-6 text-sm md:flex-row">
-          <p>&copy; 2023 {SITE_NAME}. All rights reserved.</p>
+        <div className="flex flex-col items-center justify-between pt-6 pb-10 space-y-4 text-sm md:flex-row">
+          <p>
+            &copy; {copyrightDate} {SITE_NAME}. All rights reserved.
+          </p>
           <div className="flex items-center text-sm text-white dark:text-black">
             <span className="text-black dark:text-white">Created by</span>
             <a
@@ -55,7 +59,7 @@ export default async function Footer() {
               target="_blank"
               className="text-black dark:text-white"
             >
-              <VercelIcon className="ml-3 inline-block h-6" />
+              <VercelIcon className="inline-block h-6 ml-3" />
             </a>
           </div>
         </div>