diff --git a/src/components/Datetime.tsx b/src/components/Datetime.tsx
index 4e28419..372b3ed 100644
--- a/src/components/Datetime.tsx
+++ b/src/components/Datetime.tsx
@@ -14,10 +14,12 @@ export default function Datetime({
   pubDatetime,
   modDatetime,
   size = "sm",
-  className,
+  className = "",
 }: Props) {
   return (
-    <div className={`flex items-center space-x-2 opacity-80 ${className}`}>
+    <div
+      className={`flex items-center space-x-2 opacity-80 ${className}`.trim()}
+    >
       <svg
         xmlns="http://www.w3.org/2000/svg"
         className={`${
diff --git a/src/components/LinkButton.astro b/src/components/LinkButton.astro
index 4f38fd5..e339269 100644
--- a/src/components/LinkButton.astro
+++ b/src/components/LinkButton.astro
@@ -7,13 +7,19 @@ export interface Props {
   disabled?: boolean;
 }
 
-const { href, className, ariaLabel, title, disabled = false } = Astro.props;
+const {
+  href,
+  className = "",
+  ariaLabel,
+  title,
+  disabled = false,
+} = Astro.props;
 ---
 
 {
   disabled ? (
     <span
-      class={`group inline-block ${className}`}
+      class:list={["group inline-block", className]}
       aria-label={ariaLabel}
       title={title}
       aria-disabled={disabled}
@@ -23,7 +29,7 @@ const { href, className, ariaLabel, title, disabled = false } = Astro.props;
   ) : (
     <a
       {href}
-      class={`group inline-block hover:text-skin-accent ${className}`}
+      class:list={["group inline-block hover:text-skin-accent", className]}
       aria-label={ariaLabel}
       title={title}
     >