diff --git a/app/layout.tsx b/app/layout.tsx
index 8410a5f..2df34e0 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -53,7 +53,8 @@ export default async function RootLayout({
   children: React.ReactNode
 }) {
   const config = await getConfig()
-  const hasCustomFont = config.settings.advanced.customCSS.includes('font-family')
+  const customCSS = config.settings.advanced?.customCSS || ''
+  const hasCustomFont = typeof customCSS === 'string' ? customCSS.includes('font-family') : false
 
   if (config.settings.appearance.favicon) {
     metadata.icons = {
@@ -79,7 +80,7 @@ export default async function RootLayout({
   }
 
   return (
-    <html lang="en" data-theme={userTheme ?? config.settings.appearance.systemThemes} suppressHydrationWarning>
+    <html lang="en" data-theme={userTheme ?? config.settings.appearance.theme} suppressHydrationWarning>
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -90,14 +91,14 @@ export default async function RootLayout({
       <body suppressHydrationWarning className={`${!hasCustomFont ? inter.variable + ' font-sans' : ''} min-h-screen flex flex-col`}>
         <ThemeProvider
           attribute="class"
-          defaultTheme={config.settings.appearance.systemThemes}
+          defaultTheme={config.settings.appearance.systemThemes as string | undefined}
           enableSystem
           disableTransitionOnChange
         >
           <ThemeProviderWrapper
             initialUserTheme={userTheme}
             initialUserColors={userCustomColors}
-            systemTheme={config.settings.appearance.systemThemes}
+            systemTheme={config.settings.appearance.theme}
             systemColors={config.settings.appearance.customColors}
           >
             <Snowfall />
diff --git a/packages/lib/config/index.ts b/packages/lib/config/index.ts
index 4e2c8a7..92201be 100644
--- a/packages/lib/config/index.ts
+++ b/packages/lib/config/index.ts
@@ -143,6 +143,7 @@ export const DEFAULT_CONFIG: EmberlyConfig = {
         input: '217.2 32.6% 17.5%',
         ring: '212.7 26.8% 83.9%',
       },
+      systemThemes: {},
     },
     advanced: {
       customCSS: '',
diff --git a/packages/lib/embeds/metadata.ts b/packages/lib/embeds/metadata.ts
index f75cd2c..a5a72e9 100644
--- a/packages/lib/embeds/metadata.ts
+++ b/packages/lib/embeds/metadata.ts
@@ -63,13 +63,17 @@ export async function buildRichMetadata({
 
   // Build thumbnail/preview URL
   // For images, use the raw URL to show full quality image
-  // For videos, use the thumbnail endpoint/poster
+  // For videos: if rich embeds disabled, use raw video (Discord plays it inline)
+  //             if rich embeds enabled, use thumbnail (og:video tag will handle playback)
   let imageUrl: string | undefined
   try {
     if (classification.isImage) {
       imageUrl = rawUrl
     } else if (classification.isVideo) {
-      imageUrl = new URL(`/api/files/${fileId}/thumbnail`, baseUrl).toString()
+      // When rich embeds disabled, use raw video URL so Discord can play it directly
+      imageUrl = enableRich 
+        ? new URL(`/api/files/${fileId}/thumbnail`, baseUrl).toString()
+        : rawUrl
     } else {
       // For other file types, try to get a generic preview
       imageUrl = new URL(`/api/files/${fileId}/thumbnail`, baseUrl).toString()
@@ -120,7 +124,7 @@ export async function buildRichMetadata({
           alt: classification.isImage ? 'Preview image' : 'File preview',
         }
       ] : undefined,
-      videos: classification.isVideo && videoUrl ? [
+      videos: classification.isVideo && videoUrl && enableRich ? [
         {
           url: videoUrl,
           secureUrl: videoUrl,
@@ -129,7 +133,7 @@ export async function buildRichMetadata({
           height: 720,
         },
       ] : undefined,
-      audio: classification.isAudio ? [
+      audio: classification.isAudio && enableRich ? [
         {
           url: rawUrl,
           type: mimeType || 'audio/mpeg',
