diff --git a/src/components/theme-card.tsx b/src/components/theme-card.tsx
index 988bbce..3e29af1 100644
--- a/src/components/theme-card.tsx
+++ b/src/components/theme-card.tsx
@@ -3,7 +3,7 @@ import { getThemeAuthorLink, ZenTheme } from "@/lib/themes";
 import styled from "styled-components";
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";import { Button } from "./ui/button";
 
-const ThemeCardWrapepr = styled.div`
+const ThemeCardWrapper = styled.div`
 `;
 
 export default function ThemeCard({
@@ -12,7 +12,7 @@ export default function ThemeCard({
   theme: ZenTheme;
 }) {
   return (
-    <ThemeCardWrapepr onClick={(event) => {
+    <ThemeCardWrapper onClick={(event) => {
       if (event.target instanceof HTMLAnchorElement) return;
       window.open(`/themes/${theme.id}`, "_self");
     }} className="flex flex-col justify-start p-5 rounded-lg shadow-sm bg-muted dark:bg-muted/50 border border-grey-900 dark:border-muted w-full hover:shadow-lg transition duration-300 ease-in-out hover:bg-muted/100 hover:border-blue-500 cursor-pointer select-none ">
@@ -35,6 +35,6 @@ export default function ThemeCard({
         </a>
       </div>
       <p className="text-md mt-2 overflow-ellipsis text-muted-foreground text-start">{theme.description}</p>
-    </ThemeCardWrapepr>
+    </ThemeCardWrapper>
   );
 }