diff --git a/app/Http/Controllers/FrontMemeController.php b/app/Http/Controllers/FrontMemeController.php
index 3c7cc56..d45dfb2 100644
--- a/app/Http/Controllers/FrontMemeController.php
+++ b/app/Http/Controllers/FrontMemeController.php
@@ -90,6 +90,22 @@ public function show(string $slug): Response
             ->limit(6)
             ->get();
 
+        // If we have less than 6 related memes, fill up with random ones
+        if ($relatedMemes->count() < 6) {
+            $excludeIds = $relatedMemes->pluck('id')->push($meme->id)->toArray();
+            $needed = 6 - $relatedMemes->count();
+
+            $randomMemes = MemeMedia::where('is_enabled', true)
+                ->whereNotIn('id', $excludeIds)
+                ->inRandomOrder()
+                ->limit($needed)
+                ->get();
+
+            $relatedMemes = $relatedMemes->merge($randomMemes);
+        }
+
+        //dd($meme);
+
         return Inertia::render('memes/show', [
             'meme' => $meme,
             'relatedMemes' => $relatedMemes,
diff --git a/app/Models/MemeMedia.php b/app/Models/MemeMedia.php
index f1f92a4..49fddc2 100644
--- a/app/Models/MemeMedia.php
+++ b/app/Models/MemeMedia.php
@@ -80,7 +80,7 @@ class MemeMedia extends Model
         'type',
         'sub_type',
         'original_id',
-        'description',
+        //'description',
         'mov_uuid',
         'webm_uuid',
         'gif_uuid',
@@ -98,7 +98,7 @@ class MemeMedia extends Model
     protected function ids(): Attribute
     {
         return Attribute::make(
-            get: fn ($value, $attributes) => hashids_encode($attributes['id']),
+            get: fn($value, $attributes) => hashids_encode($attributes['id']),
         );
     }
 }
diff --git a/resources/js/components/custom/meme-card.tsx b/resources/js/components/custom/meme-card.tsx
new file mode 100644
index 0000000..bdbb052
--- /dev/null
+++ b/resources/js/components/custom/meme-card.tsx
@@ -0,0 +1,89 @@
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/ui/card';
+import { KeywordBadge } from '@/components/ui/keyword-badge';
+import { Link } from '@inertiajs/react';
+import { Edit } from 'lucide-react';
+import { route } from 'ziggy-js';
+
+interface MemeMedia {
+    ids: string;
+    name: string;
+    description: string;
+    keywords: string[];
+    action_keywords: string[];
+    emotion_keywords: string[];
+    misc_keywords: string[];
+    mov_url: string;
+    webm_url: string;
+    gif_url: string;
+    webp_url: string;
+    slug: string;
+}
+
+interface MemeCardProps {
+    meme: MemeMedia;
+    showButton?: boolean;
+    showKeywords?: boolean;
+    className?: string;
+}
+
+export function MemeCard({ meme, showButton = true, showKeywords = true, className = '' }: MemeCardProps) {
+    return (
+        <Card className={`group flex flex-col overflow-hidden p-0 transition-shadow hover:shadow-lg ${className}`}>
+            <div 
+                className="relative aspect-[9/16] overflow-hidden"
+                style={{
+                    backgroundColor: '#ffffff',
+                    backgroundImage: `
+                        linear-gradient(45deg, #cccccc 25%, transparent 25%),
+                        linear-gradient(-45deg, #cccccc 25%, transparent 25%),
+                        linear-gradient(45deg, transparent 75%, #cccccc 75%),
+                        linear-gradient(-45deg, transparent 75%, #cccccc 75%)
+                    `,
+                    backgroundSize: '20px 20px',
+                    backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0px'
+                }}
+            >
+                <img
+                    src={meme.webp_url}
+                    alt={meme.name}
+                    className="h-full w-full object-cover transition-transform group-hover:scale-105"
+                />
+                <Link
+                    href={route('memes.show', meme.slug)}
+                    className="bg-opacity-0 absolute inset-0 flex items-center justify-center transition-all group-hover:opacity-40 hover:bg-black"
+                >
+                    <Edit className="h-8 w-8 text-white opacity-0 transition-opacity group-hover:opacity-100" />
+                </Link>
+            </div>
+            <div className="flex flex-grow flex-col px-4 pt-0 pb-4">
+                <h3 className="text-foreground mb-2 line-clamp-2 text-sm font-semibold">{meme.name}</h3>
+                {showKeywords && (
+                    <div className="mb-3 flex flex-wrap gap-1">
+                        {meme.keywords?.slice(0, 6).map((keyword, index) => (
+                            <KeywordBadge key={index} keyword={keyword} />
+                        ))}
+                        {meme.keywords && meme.keywords.length > 6 && (
+                            <Badge variant="secondary" className="text-xs">
+                                +{meme.keywords.length - 6} more
+                            </Badge>
+                        )}
+                    </div>
+                )}
+                {showButton && (
+                    <div className="mt-auto">
+                        <Link href={route('memes.show', meme.slug)}>
+                            <Button
+                                size="sm"
+                                className="w-full bg-gradient-to-r from-purple-600 to-pink-600 text-white hover:from-purple-700 hover:to-pink-700"
+                            >
+                                Use meme
+                            </Button>
+                        </Link>
+                    </div>
+                )}
+            </div>
+        </Card>
+    );
+}
\ No newline at end of file
diff --git a/resources/js/modules/editor/editor.jsx b/resources/js/modules/editor/editor.jsx
index 4ba0880..407be4b 100644
--- a/resources/js/modules/editor/editor.jsx
+++ b/resources/js/modules/editor/editor.jsx
@@ -173,7 +173,7 @@ const Editor = () => {
 
     return (
         <>
-            <div className="relative mx-auto flex min-h-[93vh] flex-col space-y-2 pt-4" style={{ width: `${responsiveWidth}px` }}>
+            <div className="relative mx-auto flex min-h-[88vh] flex-col space-y-2" style={{ width: `${responsiveWidth}px` }}>
                 <EditSidebar isOpen={isEditSidebarOpen} onClose={handleEditClose} />
                 <EditNavSidebar isOpen={isEditNavSidebarOpen} onClose={handleEditNavClose} />
                 <TextSidebar isOpen={isTextSidebarOpen} onClose={handleTextSidebarClose} />
diff --git a/resources/js/modules/editor/partials/editor-header.jsx b/resources/js/modules/editor/partials/editor-header.jsx
index bd483bf..8130514 100644
--- a/resources/js/modules/editor/partials/editor-header.jsx
+++ b/resources/js/modules/editor/partials/editor-header.jsx
@@ -1,4 +1,3 @@
-import BrandLogo from '@/pages/home/partials/BrandLogo';
 import { useMitt } from '@/plugins/MittContext';
 import useLocalSettingsStore from '@/stores/localSettingsStore';
 
@@ -12,7 +11,8 @@ const EditorHeader = ({ className = '', onNavClick = () => {}, isNavActive = fal
     };
 
     return (
-        <BrandLogo></BrandLogo>
+        <></>
+        // <BrandLogo></BrandLogo>
         // <div className={cn('flex w-full items-center justify-between rounded-xl bg-white p-2 shadow-sm dark:bg-neutral-800', className)}>
         //     <Button onClick={onNavClick} variant="outline" size="icon" className="invisible rounded">
         //         <Menu className="h-8 w-8" />
diff --git a/resources/js/pages/home/home.tsx b/resources/js/pages/home/home.tsx
index 1cedc64..877e0b5 100644
--- a/resources/js/pages/home/home.tsx
+++ b/resources/js/pages/home/home.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import BrandLogo from './partials/BrandLogo.jsx';
 import FAQDiscord from './partials/FAQDiscord.jsx';
 import Features from './partials/Features.jsx';
 import Footer from './partials/Footer.jsx';
@@ -19,7 +20,8 @@ const Home = ({ faqData }) => {
     }, []);
 
     return (
-        <div className="min-h-[100vh] bg-neutral-50 pb-10 dark:bg-black">
+        <div className="min-h-[100vh] space-y-0 bg-neutral-50 py-6 dark:bg-black">
+            <BrandLogo className="pb-2" />
             <div className="to-muted/10 w-full bg-gradient-to-b from-transparent dark:from-transparent dark:to-neutral-900">
                 {isClient && Editor ? (
                     <Editor />
@@ -29,7 +31,7 @@ const Home = ({ faqData }) => {
                     </div>
                 )}
             </div>
-            <div className="space-y-16 pt-6">
+            <div className="space-y-16">
                 <Hero />
                 <Features />
                 <FAQDiscord faqData={faqData} />
diff --git a/resources/js/pages/memes/index.tsx b/resources/js/pages/memes/index.tsx
index dfe3590..ba695a5 100644
--- a/resources/js/pages/memes/index.tsx
+++ b/resources/js/pages/memes/index.tsx
@@ -1,11 +1,13 @@
 import { Badge } from '@/components/ui/badge';
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { KeywordBadge } from '@/components/ui/keyword-badge';
+import { MemeCard } from '@/components/custom/meme-card';
 import Footer from '@/pages/home/partials/Footer';
 import { Link, router } from '@inertiajs/react';
-import { Edit, Search } from 'lucide-react';
+import { Search } from 'lucide-react';
 import { useState } from 'react';
 import { route } from 'ziggy-js';
 import BrandLogo from '../home/partials/BrandLogo';
@@ -75,6 +77,24 @@ export default function MemesIndex({ memes, popularKeywords, filters }: Props) {
             <div className="min-h-screen bg-neutral-50 pb-10 dark:bg-black">
                 <div className="container mx-auto px-4 pt-8 pb-0">
                     <BrandLogo className="py-3"></BrandLogo>
+                    
+                    {/* Breadcrumbs */}
+                    <Breadcrumb className="mb-6">
+                        <BreadcrumbList>
+                            <BreadcrumbItem>
+                                <BreadcrumbLink asChild>
+                                    <Link href={route('home')}>Home</Link>
+                                </BreadcrumbLink>
+                            </BreadcrumbItem>
+                            <BreadcrumbSeparator />
+                            <BreadcrumbItem>
+                                <BreadcrumbPage>
+                                    {filters.search ? `Search: ${filters.search}` : 'Meme Library'}
+                                </BreadcrumbPage>
+                            </BreadcrumbItem>
+                        </BreadcrumbList>
+                    </Breadcrumb>
+                    
                     {/* Header */}
                     <div className="mb-8 text-center">
                         <h1 className="text-foreground mb-4 text-4xl font-bold">Meme Library</h1>
@@ -142,42 +162,7 @@ export default function MemesIndex({ memes, popularKeywords, filters }: Props) {
                     {/* Memes Grid */}
                     <div className="xs:grid-cols-2 mb-8 grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
                         {memes.data.map((meme) => (
-                            <Card key={meme.ids} className="group flex flex-col overflow-hidden p-0 transition-shadow hover:shadow-lg">
-                                <div className="relative aspect-[9/16] overflow-hidden bg-[#00FF00]">
-                                    <img
-                                        src={meme.webp_url}
-                                        alt={meme.name}
-                                        className="h-full w-full object-cover transition-transform group-hover:scale-105"
-                                    />
-                                    <Link
-                                        href={route('memes.show', meme.slug)}
-                                        className="bg-opacity-0 absolute inset-0 flex items-center justify-center transition-all group-hover:opacity-40 hover:bg-black"
-                                    >
-                                        <Edit className="h-8 w-8 text-white opacity-0 transition-opacity group-hover:opacity-100" />
-                                    </Link>
-                                </div>
-                                <div className="flex flex-grow flex-col px-4 pt-0 pb-4">
-                                    <h3 className="text-foreground mb-2 line-clamp-2 text-sm font-semibold">{meme.name}</h3>
-                                    <div className="mb-3 flex flex-wrap gap-1">
-                                        {meme.keywords?.slice(0, 6).map((keyword, index) => <KeywordBadge key={index} keyword={keyword} />)}
-                                        {meme.keywords && meme.keywords.length > 6 && (
-                                            <Badge variant="secondary" className="text-xs">
-                                                +{meme.keywords.length - 6} more
-                                            </Badge>
-                                        )}
-                                    </div>
-                                    <div className="mt-auto">
-                                        <Link href={route('memes.show', meme.slug)}>
-                                            <Button
-                                                size="sm"
-                                                className="w-full bg-gradient-to-r from-purple-600 to-pink-600 text-white hover:from-purple-700 hover:to-pink-700"
-                                            >
-                                                Use meme
-                                            </Button>
-                                        </Link>
-                                    </div>
-                                </div>
-                            </Card>
+                            <MemeCard key={meme.ids} meme={meme} />
                         ))}
                     </div>
 
diff --git a/resources/js/pages/memes/show.tsx b/resources/js/pages/memes/show.tsx
index 68fa675..2f05500 100644
--- a/resources/js/pages/memes/show.tsx
+++ b/resources/js/pages/memes/show.tsx
@@ -1,174 +1,148 @@
-import { Head } from '@inertiajs/react';
-import { Button } from '@/components/ui/button';
+import { MemeCard } from '@/components/custom/meme-card';
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
-import { ArrowLeft, Play, Download, Share2 } from 'lucide-react';
+import { KeywordBadge } from '@/components/ui/keyword-badge';
+import { Spinner } from '@/components/ui/spinner';
+import Footer from '@/pages/home/partials/Footer';
 import { Link } from '@inertiajs/react';
+import { useEffect, useState } from 'react';
 import { route } from 'ziggy-js';
+import BrandLogo from '../home/partials/BrandLogo';
 
 interface MemeMedia {
-  ids: string;
-  name: string;
-  description: string;
-  keywords: string[];
-  action_keywords: string[];
-  emotion_keywords: string[];
-  misc_keywords: string[];
-  mov_url: string;
-  webm_url: string;
-  gif_url: string;
-  webp_url: string;
-  slug: string;
+    ids: string;
+    name: string;
+    description: string;
+    keywords: string[];
+    action_keywords: string[];
+    emotion_keywords: string[];
+    misc_keywords: string[];
+    mov_url: string;
+    webm_url: string;
+    gif_url: string;
+    webp_url: string;
+    slug: string;
 }
 
 interface Props {
-  meme: MemeMedia;
-  relatedMemes: MemeMedia[];
+    meme: MemeMedia;
+    relatedMemes: MemeMedia[];
 }
 
 export default function MemeShow({ meme, relatedMemes }: Props) {
-  const allKeywords = [
-    ...(meme.keywords || []),
-    ...(meme.action_keywords || []),
-    ...(meme.emotion_keywords || []),
-    ...(meme.misc_keywords || [])
-  ].filter(Boolean);
+    const [isClient, setIsClient] = useState(false);
+    const [Editor, setEditor] = useState(null);
 
-  return (
-    <>
-      <Head title={`${meme.name} - Meme Template`} />
-      <Head>
-        <meta name="description" content={meme.description} />
-        <meta name="keywords" content={allKeywords.join(', ')} />
-        <meta property="og:title" content={`${meme.name} - Meme Template`} />
-        <meta property="og:description" content={meme.description} />
-        <meta property="og:image" content={meme.webp_url} />
-        <meta property="og:type" content="video.other" />
-        <meta name="twitter:card" content="summary_large_image" />
-        <meta name="twitter:title" content={`${meme.name} - Meme Template`} />
-        <meta name="twitter:description" content={meme.description} />
-        <meta name="twitter:image" content={meme.webp_url} />
-      </Head>
-      
-      <div className="min-h-screen bg-gradient-to-br from-purple-50 to-pink-50">
-        <div className="container mx-auto px-4 py-8">
-          {/* Header */}
-          <div className="flex items-center gap-4 mb-8">
-            <Link href={route('memes.index')}>
-              <Button variant="outline" size="sm">
-                <ArrowLeft className="h-4 w-4 mr-2" />
-                Back to Memes
-              </Button>
-            </Link>
-            <div>
-              <h1 className="text-3xl font-bold text-gray-900">{meme.name}</h1>
-              <p className="text-gray-600 mt-2">{meme.description}</p>
-            </div>
-          </div>
+    useEffect(() => {
+        setIsClient(true);
+        // Dynamically import Editor only on client-side to avoid SSR issues with Konva
+        if (typeof window !== 'undefined') {
+            import('@/modules/editor/editor.jsx').then((module) => {
+                setEditor(() => module.default);
+            });
+        }
+    }, []);
 
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
-            {/* Main Content */}
-            <div className="lg:col-span-2">
-              <Card>
-                <CardContent className="p-6">
-                  {/* Video Preview */}
-                  <div className="aspect-[9/16] bg-black rounded-lg overflow-hidden mb-6 max-w-md mx-auto">
-                    <video
-                      src={meme.webm_url}
-                      poster={meme.webp_url}
-                      controls
-                      className="w-full h-full object-cover"
-                      preload="metadata"
-                    />
-                  </div>
+    const allKeywords = [
+        ...(meme.keywords || []),
+        ...(meme.action_keywords || []),
+        ...(meme.emotion_keywords || []),
+        ...(meme.misc_keywords || []),
+    ].filter(Boolean);
 
-                  {/* Action Buttons */}
-                  <div className="flex flex-wrap gap-3 justify-center">
-                    <Button className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700">
-                      <Play className="h-4 w-4 mr-2" />
-                      Create Meme
-                    </Button>
-                    <Button variant="outline">
-                      <Download className="h-4 w-4 mr-2" />
-                      Download
-                    </Button>
-                    <Button variant="outline">
-                      <Share2 className="h-4 w-4 mr-2" />
-                      Share
-                    </Button>
-                  </div>
-                </CardContent>
-              </Card>
-            </div>
+    return (
+        <>
+            <div className="space-y-0 bg-neutral-50 py-6 dark:bg-black">
+                <div className="container mx-auto px-4">
+                    <BrandLogo className="pb-2" />
 
-            {/* Sidebar */}
-            <div className="space-y-6">
-              {/* Keywords */}
-              <Card>
-                <CardHeader>
-                  <CardTitle className="text-lg">Keywords</CardTitle>
-                  <CardDescription>
-                    Related keywords for this meme template
-                  </CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <div className="flex flex-wrap gap-2">
-                    {meme.action_keywords?.map((keyword, index) => (
-                      <Badge key={`action-${index}`} variant="secondary" className="bg-blue-100 text-blue-800">
-                        {keyword}
-                      </Badge>
-                    ))}
-                    {meme.emotion_keywords?.map((keyword, index) => (
-                      <Badge key={`emotion-${index}`} variant="secondary" className="bg-green-100 text-green-800">
-                        {keyword}
-                      </Badge>
-                    ))}
-                    {meme.misc_keywords?.map((keyword, index) => (
-                      <Badge key={`misc-${index}`} variant="secondary" className="bg-gray-100 text-gray-800">
-                        {keyword}
-                      </Badge>
-                    ))}
-                  </div>
-                </CardContent>
-              </Card>
+                    {/* Breadcrumbs */}
+                    <Breadcrumb className="mb-6">
+                        <BreadcrumbList>
+                            <BreadcrumbItem>
+                                <BreadcrumbLink asChild>
+                                    <Link href={route('home')}>Home</Link>
+                                </BreadcrumbLink>
+                            </BreadcrumbItem>
+                            <BreadcrumbSeparator />
+                            <BreadcrumbItem>
+                                <BreadcrumbLink asChild>
+                                    <Link href={route('memes.index')}>Meme Library</Link>
+                                </BreadcrumbLink>
+                            </BreadcrumbItem>
+                            <BreadcrumbSeparator />
+                            <BreadcrumbItem>
+                                <BreadcrumbPage>{meme.name}</BreadcrumbPage>
+                            </BreadcrumbItem>
+                        </BreadcrumbList>
+                    </Breadcrumb>
+                </div>
 
-              {/* Related Memes */}
-              {relatedMemes.length > 0 && (
-                <Card>
-                  <CardHeader>
-                    <CardTitle className="text-lg">Related Memes</CardTitle>
-                    <CardDescription>
-                      Similar meme templates you might like
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent>
-                    <div className="grid grid-cols-2 gap-3">
-                      {relatedMemes.map((related) => (
-                        <Link
-                          key={related.ids}
-                          href={route('memes.show', related.slug)}
-                          className="block"
-                        >
-                          <div className="aspect-[9/16] bg-gray-100 rounded-lg overflow-hidden mb-2">
-                            <img
-                              src={related.webp_url}
-                              alt={related.name}
-                              className="w-full h-full object-cover hover:scale-105 transition-transform"
-                            />
-                          </div>
-                          <p className="text-sm font-medium text-gray-900 truncate">
-                            {related.name}
-                          </p>
-                        </Link>
-                      ))}
+                <div className="w-full">
+                    <div className="container mx-auto mb-6 space-y-2 px-4 text-center">
+                        <h1 className="text-foreground text-3xl font-bold">{meme.name} Meme</h1>
+                        <h2 className="text-muted-foreground">
+                            Use our video meme editor to customise your {meme.name} meme and save to a video in minutes!
+                        </h2>
                     </div>
-                  </CardContent>
-                </Card>
-              )}
+                    {isClient && Editor ? (
+                        <Editor />
+                    ) : (
+                        <div className="flex h-96 items-center justify-center text-center">
+                            <div className="space-y-2">
+                                <Spinner />
+                                <div className="text-muted-foreground" data-nosnippet>
+                                    Loading meme video editor...
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                </div>
+                <div className="container mx-auto grid justify-center gap-5 lg:grid-cols-1" id="more-info">
+                    <div className="">
+                        {/* Keywords */}
+                        <Card className="h-auto">
+                            <CardHeader>
+                                <CardTitle className="text-lg">Know Your Meme</CardTitle>
+                                <CardDescription>Learn more about {meme.name} meme!</CardDescription>
+                            </CardHeader>
+                            <CardContent>
+                                {meme.description && (
+                                    <div className="mb-4">
+                                        <p className="text-muted-foreground text-sm leading-relaxed">{meme.description}</p>
+                                    </div>
+                                )}
+                                <div className="flex flex-wrap gap-2">
+                                    {allKeywords.map((keyword, index) => (
+                                        <KeywordBadge key={index} keyword={keyword} />
+                                    ))}
+                                </div>
+                            </CardContent>
+                        </Card>
+                    </div>
+
+                    {/* Related Memes */}
+                    <div className="">
+                        {relatedMemes.length > 0 && (
+                            <Card>
+                                <CardHeader>
+                                    <CardTitle className="text-lg">Related Memes</CardTitle>
+                                    <CardDescription>Similar meme templates you might like</CardDescription>
+                                </CardHeader>
+                                <CardContent>
+                                    <div className="xs:grid-cols-2 mb-8 grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
+                                        {relatedMemes.map((related) => (
+                                            <MemeCard key={related.ids} meme={related} showKeywords={false} />
+                                        ))}
+                                    </div>
+                                </CardContent>
+                            </Card>
+                        )}
+                    </div>
+                </div>
+                <Footer />
+                {/* <AuthUser /> */}
             </div>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-}
\ No newline at end of file
+        </>
+    );
+}