diff --git a/backend/src/index.js b/backend/src/index.js
index fcfa43c..22c461c 100644
--- a/backend/src/index.js
+++ b/backend/src/index.js
@@ -111,7 +111,13 @@ app.use('/api/templates', passport.authenticate('jwt', {session: false}), templa
 
 app.use('/api/assets', passport.authenticate('jwt', {session: false}), assetsRoutes);
 
-app.use('/api/news_cards', passport.authenticate('jwt', {session: false}), news_cardsRoutes);
+// Custom logic for news_cards to allow public /scrape
+app.use('/api/news_cards', (req, res, next) => {
+  if (req.path === '/scrape' && req.method === 'POST') {
+    return next();
+  }
+  return passport.authenticate('jwt', {session: false})(req, res, next);
+}, news_cardsRoutes);
 
 app.use('/api/jobs', passport.authenticate('jwt', {session: false}), jobsRoutes);
 
diff --git a/backend/src/routes/news_cards.js b/backend/src/routes/news_cards.js
index d3e2fd4..1a79ab0 100644
--- a/backend/src/routes/news_cards.js
+++ b/backend/src/routes/news_cards.js
@@ -1,4 +1,3 @@
-
 const express = require('express');
 
 const News_cardsService = require('../services/news_cards');
@@ -15,6 +14,30 @@ const {
     checkCrudPermissions,
 } = require('../middlewares/check-permissions');
 
+/**
+ * @swagger
+ * /api/news_cards/scrape:
+ *   post:
+ *     tags: [News_cards]
+ *     summary: Scrape news metadata from URL
+ *     requestBody:
+ *       required: true
+ *       content:
+ *         application/json:
+ *           schema:
+ *             properties:
+ *               url:
+ *                 type: string
+ *     responses:
+ *       200:
+ *         description: Metadata successfully scraped
+ */
+router.post('/scrape', wrapAsync(async (req, res) => {
+    const { url } = req.body;
+    const metadata = await News_cardsService.scrapeUrl(url);
+    res.status(200).send(metadata);
+}));
+
 router.use(checkCrudPermissions('news_cards'));
 
 
@@ -433,4 +456,4 @@ router.get('/:id', wrapAsync(async (req, res) => {
 
 router.use('/', require('../helpers').commonErrorHandler);
 
-module.exports = router;
+module.exports = router;
\ No newline at end of file
diff --git a/backend/src/services/news_cards.js b/backend/src/services/news_cards.js
index 17d6032..de82276 100644
--- a/backend/src/services/news_cards.js
+++ b/backend/src/services/news_cards.js
@@ -7,10 +7,6 @@ const axios = require('axios');
 const config = require('../config');
 const stream = require('stream');
 
-
-
-
-
 module.exports = class News_cardsService {
   static async create(data, currentUser) {
     const transaction = await db.sequelize.transaction();
@@ -30,6 +26,33 @@ module.exports = class News_cardsService {
     }
   };
 
+  static async scrapeUrl(url) {
+    try {
+      const response = await axios.get(url, {
+        headers: {
+          'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36'
+        },
+        timeout: 5000
+      });
+      const html = response.data;
+      
+      // Basic extraction using regex for speed and simplicity without new dependencies
+      const titleMatch = html.match(/<meta property="og:title" content="([^"]+)"/) || 
+                         html.match(/<title>([^<]+)<\/title>/);
+      const imageMatch = html.match(/<meta property="og:image" content="([^"]+)"/);
+      
+      return {
+        title: titleMatch ? titleMatch[1].trim() : 'No title found',
+        imageUrl: imageMatch ? imageMatch[1] : null,
+        date: new Date().toLocaleDateString('en-GB', { day: '2-digit', month: 'long', year: 'numeric' }),
+        url
+      };
+    } catch (error) {
+      console.error('Scraping error:', error.message);
+      throw new Error('Failed to fetch news metadata');
+    }
+  }
+
   static async bulkImport(req, res, sendInvitationEmails = true, host) {
     const transaction = await db.sequelize.transaction();
 
@@ -133,6 +156,4 @@ module.exports = class News_cardsService {
   }
 
   
-};
-
-
+};
\ No newline at end of file
diff --git a/frontend/src/components/News_cards/NewsCardPreview.tsx b/frontend/src/components/News_cards/NewsCardPreview.tsx
new file mode 100644
index 0000000..000cab4
--- /dev/null
+++ b/frontend/src/components/News_cards/NewsCardPreview.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+
+interface NewsCardPreviewProps {
+  title: string;
+  date: string;
+  imageUrl?: string;
+  logoUrl?: string;
+}
+
+const NewsCardPreview: React.FC<NewsCardPreviewProps> = ({ title, date, imageUrl, logoUrl }) => {
+  return (
+    <div className="relative w-full aspect-square max-w-[540px] mx-auto overflow-hidden rounded-lg shadow-2xl bg-gray-900 font-sans">
+      {/* Background Image */}
+      {imageUrl ? (
+        <img
+          src={imageUrl}
+          alt="News background"
+          className="absolute inset-0 w-full h-full object-cover"
+        />
+      ) : (
+        <div className="absolute inset-0 bg-gradient-to-br from-slate-800 to-slate-900 flex items-center justify-center">
+          <span className="text-slate-700 text-6xl font-bold uppercase tracking-widest opacity-20">News Card</span>
+        </div>
+      )}
+
+      {/* Dark Overlay */}
+      <div className="absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-black via-black/70 to-transparent" />
+
+      {/* Logo */}
+      <div className="absolute top-6 left-6">
+        {logoUrl ? (
+          <img src={logoUrl} alt="Logo" className="w-16 h-16 object-contain" />
+        ) : (
+          <div className="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold text-2xl shadow-lg border-2 border-white/20">
+            N
+          </div>
+        )}
+      </div>
+
+      {/* Content */}
+      <div className="absolute bottom-10 left-8 right-8 text-white">
+        <div className="mb-2 text-sm font-medium tracking-wider text-blue-400 uppercase">
+          {date}
+        </div>
+        <h2 className="text-2xl md:text-3xl font-bold leading-tight line-clamp-3 drop-shadow-md">
+          {title}
+        </h2>
+      </div>
+
+      {/* Bottom Border Accent */}
+      <div className="absolute bottom-0 inset-x-0 h-1.5 bg-blue-600" />
+    </div>
+  );
+};
+
+export default NewsCardPreview;
diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx
index 4362b9e..98fc3e6 100644
--- a/frontend/src/pages/index.tsx
+++ b/frontend/src/pages/index.tsx
@@ -1,4 +1,3 @@
-
 import React, { useEffect, useState } from 'react';
 import type { ReactElement } from 'react';
 import Head from 'next/head';
@@ -12,155 +11,179 @@ import BaseButtons from '../components/BaseButtons';
 import { getPageTitle } from '../config';
 import { useAppSelector } from '../stores/hooks';
 import CardBoxComponentTitle from "../components/CardBoxComponentTitle";
-import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
+import NewsCardPreview from '../components/News_cards/NewsCardPreview';
+import axios from 'axios';
 
+export default function LandingPage() {
+    const [url, setUrl] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [cardData, setCardData] = useState({
+        title: 'Your News Title Will Appear Here',
+        date: new Date().toLocaleDateString('en-GB', { day: '2-digit', month: 'long', year: 'numeric' }),
+        imageUrl: '',
+    });
+    const [error, setError] = useState('');
 
-export default function Starter() {
-    const [illustrationImage, setIllustrationImage] = useState({
-        src: undefined,
-        photographer: undefined,
-        photographer_url: undefined,
-    })
-    const [illustrationVideo, setIllustrationVideo] = useState({video_files: []})
-    const [contentType, setContentType] = useState('video');
-    const [contentPosition, setContentPosition] = useState('right');
     const textColor = useAppSelector((state) => state.style.linkColor);
 
-    const title = 'App Draft'
-
-    // Fetch Pexels image/video
-    useEffect(() => {
-        async function fetchData() {
-            const image = await getPexelsImage();
-            const video = await getPexelsVideo();
-            setIllustrationImage(image);
-            setIllustrationVideo(video);
-        }
-        fetchData();
-    }, []);
-
-    const imageBlock = (image) => (
-        <div
-            className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'
-            style={{
-                backgroundImage: `${
-                    image
-                        ? `url(${image?.src?.original})`
-                        : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
-                }`,
-                backgroundSize: 'cover',
-                backgroundPosition: 'left center',
-                backgroundRepeat: 'no-repeat',
-            }}
-        >
-            <div className='flex justify-center w-full bg-blue-300/20'>
-                <a
-                    className='text-[8px]'
-                    href={image?.photographer_url}
-                    target='_blank'
-                    rel='noreferrer'
-                >
-                    Photo by {image?.photographer} on Pexels
-                </a>
-            </div>
-        </div>
-    );
-
-    const videoBlock = (video) => {
-        if (video?.video_files?.length > 0) {
-            return (
-                <div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'>
-                    <video
-                        className='absolute top-0 left-0 w-full h-full object-cover'
-                        autoPlay
-                        loop
-                        muted
-                    >
-                        <source src={video?.video_files[0]?.link} type='video/mp4'/>
-                        Your browser does not support the video tag.
-                    </video>
-                    <div className='flex justify-center w-full bg-blue-300/20 z-10'>
-                        <a
-                            className='text-[8px]'
-                            href={video?.user?.url}
-                            target='_blank'
-                            rel='noreferrer'
-                        >
-                            Video by {video.user.name} on Pexels
-                        </a>
-                    </div>
-                </div>)
+    const handleScrape = async () => {
+        if (!url) return;
+        setLoading(true);
+        setError('');
+        try {
+            const response = await axios.post('/news_cards/scrape', { url });
+            setCardData(response.data);
+        } catch (err) {
+            console.error(err);
+            setError('Failed to fetch news. Please check the URL and try again.');
+        } finally {
+            setLoading(false);
         }
     };
 
-  return (
-      <div
-          style={
-              contentPosition === 'background'
-                  ? {
-                      backgroundImage: `${
-                          illustrationImage
-                              ? `url(${illustrationImage.src?.original})`
-                              : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
-                      }`,
-                      backgroundSize: 'cover',
-                      backgroundPosition: 'left center',
-                      backgroundRepeat: 'no-repeat',
-                  }
-                  : {}
-          }
-      >
-      <Head>
-        <title>{getPageTitle('Starter Page')}</title>
-      </Head>
+    return (
+        <div className="min-h-screen bg-slate-50 font-sans text-slate-900">
+            <Head>
+                <title>{getPageTitle('News Card Generator')}</title>
+            </Head>
 
-      <SectionFullScreen bg='violet'>
-      <div
-          className={`flex ${
-              contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'
-          } min-h-screen w-full`}
-      >
-          {contentType === 'image' && contentPosition !== 'background'
-              ? imageBlock(illustrationImage)
-              : null}
-          {contentType === 'video' && contentPosition !== 'background'
-              ? videoBlock(illustrationVideo)
-              : null}
-          <div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
-        <CardBox className='w-full md:w-3/5 lg:w-2/3'>
-            <CardBoxComponentTitle title="Welcome to your App Draft app!"/>
-        
-            <div className="space-y-3">
-                <p className='text-center text-gray-500'>This is a React.js/Node.js app generated by the <a className={`${textColor}`} href="https://flatlogic.com/generator">Flatlogic Web App Generator</a></p>
-                <p className='text-center text-gray-500'>For guides and documentation please check
-                    your local README.md and the <a className={`${textColor}`} href="https://flatlogic.com/documentation">Flatlogic documentation</a></p>
-            </div>
-        
-            <BaseButtons>
-                <BaseButton
-                    href='/login'
-                    label='Login'
-                    color='info'
-                    className='w-full'
-                />
+            {/* Navigation */}
+            <nav className="flex items-center justify-between px-6 py-4 bg-white border-b border-slate-200 sticky top-0 z-50">
+                <div className="flex items-center space-x-2">
+                    <div className="w-8 h-8 bg-blue-600 rounded flex items-center justify-center text-white font-bold">N</div>
+                    <span className="text-xl font-bold tracking-tight">NewsCard AI</span>
+                </div>
+                <div className="flex items-center space-x-4">
+                    <Link href="/login" className="text-sm font-medium text-slate-600 hover:text-blue-600 transition-colors">
+                        Login
+                    </Link>
+                    <BaseButton
+                        href="/login"
+                        label="Get Started"
+                        color="info"
+                        className="text-sm"
+                    />
+                </div>
+            </nav>
 
-            </BaseButtons>
-        </CardBox>
+            {/* Hero Section */}
+            <section className="px-6 py-16 md:py-24 bg-gradient-to-b from-white to-slate-50 overflow-hidden">
+                <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center">
+                    <div className="space-y-8">
+                        <div className="space-y-4">
+                            <h1 className="text-5xl md:text-6xl font-extrabold leading-tight tracking-tight">
+                                Transform News URLs into <span className="text-blue-600">Beautiful Cards</span>
+                            </h1>
+                            <p className="text-xl text-slate-600 max-w-xl leading-relaxed">
+                                Instantly generate professional, branded news cards for social media. Just paste a link and let our AI do the magic.
+                            </p>
+                        </div>
+
+                        <div className="space-y-4 max-w-lg">
+                            <div className="flex p-1 bg-white border border-slate-200 rounded-xl shadow-sm focus-within:ring-2 focus-within:ring-blue-500 transition-all">
+                                <input
+                                    type="text"
+                                    placeholder="Paste news article URL here..."
+                                    className="flex-grow px-4 py-3 bg-transparent outline-none text-slate-900"
+                                    value={url}
+                                    onChange={(e) => setUrl(e.target.value)}
+                                    onKeyPress={(e) => e.key === 'Enter' && handleScrape()}
+                                />
+                                <button
+                                    onClick={handleScrape}
+                                    disabled={loading || !url}
+                                    className="px-6 py-3 bg-blue-600 text-white font-bold rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                                >
+                                    {loading ? 'Fetching...' : 'Generate'}
+                                </button>
+                            </div>
+                            {error && <p className="text-red-500 text-sm font-medium">{error}</p>}
+                            <p className="text-xs text-slate-400">Try pasting a link from BBC, CNN, or any news outlet.</p>
+                        </div>
+
+                        <div className="flex items-center space-x-8 pt-4">
+                            <div className="flex -space-x-2">
+                                {[1, 2, 3, 4].map((i) => (
+                                    <div key={i} className="w-10 h-10 rounded-full border-2 border-white bg-slate-200 flex items-center justify-center overflow-hidden">
+                                        <img src={`https://i.pravatar.cc/100?img=${i + 10}`} alt="user" />
+                                    </div>
+                                ))}
+                            </div>
+                            <p className="text-sm text-slate-500 font-medium">Joined by <span className="text-slate-900 font-bold">500+</span> editors this week</p>
+                        </div>
+                    </div>
+
+                    {/* Preview Component */}
+                    <div className="relative">
+                        <div className="absolute -top-20 -right-20 w-64 h-64 bg-blue-200 rounded-full blur-3xl opacity-30 animate-pulse"></div>
+                        <div className="absolute -bottom-20 -left-20 w-64 h-64 bg-indigo-200 rounded-full blur-3xl opacity-30 animate-pulse"></div>
+                        
+                        <div className="relative z-10 transition-transform duration-500 hover:scale-[1.02]">
+                            <NewsCardPreview 
+                                title={cardData.title}
+                                date={cardData.date}
+                                imageUrl={cardData.imageUrl}
+                            />
+                            
+                            {/* Floating Action Badge */}
+                            <div className="absolute -bottom-6 -right-6 bg-white p-4 rounded-2xl shadow-xl border border-slate-100 flex items-center space-x-3 animate-bounce">
+                                <div className="w-10 h-10 bg-green-100 text-green-600 rounded-full flex items-center justify-center">
+                                    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
+                                    </svg>
+                                </div>
+                                <div>
+                                    <p className="text-xs text-slate-400 font-medium uppercase tracking-wider">Status</p>
+                                    <p className="text-sm font-bold text-slate-900">Ready to Share</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            {/* Features Section */}
+            <section className="px-6 py-20 bg-white">
+                <div className="max-w-7xl mx-auto text-center space-y-16">
+                    <div className="space-y-4">
+                        <h2 className="text-3xl md:text-4xl font-bold tracking-tight">Features designed for modern newsrooms</h2>
+                        <p className="text-lg text-slate-500 max-w-2xl mx-auto">Everything you need to automate your social media visuals.</p>
+                    </div>
+
+                    <div className="grid md:grid-cols-3 gap-8">
+                        {[
+                            { title: 'AI Powered', desc: 'Our AI extracts the most impactful headline and image from any article automatically.', icon: '⚡' },
+                            { title: 'Custom Branding', desc: 'Add your logo and choose colors that match your news organization brand.', icon: '🎨' },
+                            { title: 'High Res Export', desc: 'Export cards in high resolution ready for Instagram, Facebook, and Twitter.', icon: '📸' }
+                        ].map((f, i) => (
+                            <div key={i} className="p-8 rounded-2xl border border-slate-100 bg-slate-50 hover:bg-white hover:shadow-xl hover:border-blue-100 transition-all text-left space-y-4">
+                                <div className="text-4xl">{f.icon}</div>
+                                <h3 className="text-xl font-bold">{f.title}</h3>
+                                <p className="text-slate-600 leading-relaxed">{f.desc}</p>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </section>
+
+            {/* Footer */}
+            <footer className="bg-slate-900 text-white py-12 px-6">
+                <div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center space-y-6 md:space-y-0">
+                    <div className="flex items-center space-x-2">
+                        <div className="w-8 h-8 bg-blue-600 rounded flex items-center justify-center text-white font-bold">N</div>
+                        <span className="text-xl font-bold tracking-tight italic">NewsCard AI</span>
+                    </div>
+                    <p className="text-slate-400 text-sm italic">© 2026 NewsCard AI. Powered by Flatlogic.</p>
+                    <div className="flex space-x-6 text-sm font-medium text-slate-400">
+                        <Link href="/privacy-policy" className="hover:text-white transition-colors">Privacy</Link>
+                        <Link href="/terms" className="hover:text-white transition-colors">Terms</Link>
+                    </div>
+                </div>
+            </footer>
         </div>
-      </div>
-      </SectionFullScreen>
-      <div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
-        <p className='py-6 text-sm'>© 2026 <span>{title}</span>. All rights reserved</p>
-        <Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
-            Privacy Policy
-        </Link>
-      </div>
-
-    </div>
-  );
+    );
 }
 
-Starter.getLayout = function getLayout(page: ReactElement) {
-  return <LayoutGuest>{page}</LayoutGuest>;
-};
-
+LandingPage.getLayout = function getLayout(page: ReactElement) {
+    return <LayoutGuest>{page}</LayoutGuest>;
+};
\ No newline at end of file