diff --git a/frontend/src/components/MiningLiveCounter.tsx b/frontend/src/components/MiningLiveCounter.tsx
new file mode 100644
index 0000000..80e1926
--- /dev/null
+++ b/frontend/src/components/MiningLiveCounter.tsx
@@ -0,0 +1,83 @@
+import React, { useState, useEffect } from 'react';
+import * as icon from '@mdi/js';
+import BaseIcon from './BaseIcon';
+import { useAppSelector } from '../stores/hooks';
+
+interface MiningLiveCounterProps {
+  initialBalance?: number;
+  hashrate?: number;
+  isActive?: boolean;
+}
+
+const MiningLiveCounter = ({ initialBalance = 0, hashrate = 42.5, isActive = true }: MiningLiveCounterProps) => {
+  const [balance, setBalance] = useState(initialBalance);
+  const iconsColor = useAppSelector((state) => state.style.iconsColor);
+
+  useEffect(() => {
+    if (!isActive) return;
+
+    const interval = setInterval(() => {
+      // Simulate mining increment: balance increases slightly every second
+      // 0.00000001 BTC (1 Satoshi) per tick roughly
+      setBalance((prev) => prev + 0.000000012);
+    }, 2000);
+
+    return () => clearInterval(interval);
+  }, [isActive]);
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+      <div className="bg-white dark:bg-dark-900 border border-gray-100 dark:border-dark-700 rounded-3xl p-6 shadow-sm">
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center space-x-3">
+            <div className="p-3 bg-emerald-100 dark:bg-emerald-900/30 rounded-2xl">
+              <BaseIcon path={icon.mdiBitcoin} className="text-emerald-600 dark:text-emerald-400" size={24} />
+            </div>
+            <div>
+              <p className="text-sm text-gray-500 dark:text-gray-400 font-medium">Available Balance</p>
+              <h3 className="text-2xl font-bold font-mono">
+                {balance.toFixed(8)} <span className="text-sm text-emerald-500">BTC</span>
+              </h3>
+            </div>
+          </div>
+          <div className="text-right">
+            <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${isActive ? 'bg-emerald-100 text-emerald-800 animate-pulse' : 'bg-gray-100 text-gray-800'}`}>
+              {isActive ? '● LIVE MINING' : 'OFFLINE'}
+            </span>
+          </div>
+        </div>
+        <div className="flex items-center justify-between text-xs text-gray-400">
+          <span>Est. Daily: 0.000512 BTC</span>
+          <span>Next Payout: 0.005 BTC</span>
+        </div>
+      </div>
+
+      <div className="bg-white dark:bg-dark-900 border border-gray-100 dark:border-dark-700 rounded-3xl p-6 shadow-sm">
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center space-x-3">
+            <div className="p-3 bg-blue-100 dark:bg-blue-900/30 rounded-2xl">
+              <BaseIcon path={icon.mdiSpeedometer} className="text-blue-600 dark:text-blue-400" size={24} />
+            </div>
+            <div>
+              <p className="text-sm text-gray-500 dark:text-gray-400 font-medium">Network Hashrate</p>
+              <h3 className="text-2xl font-bold font-mono">
+                {hashrate.toFixed(1)} <span className="text-sm text-blue-500">TH/s</span>
+              </h3>
+            </div>
+          </div>
+          <div className="w-24 h-8 bg-gray-50 dark:bg-dark-800 rounded-lg flex items-end justify-between px-1 py-1 space-x-0.5">
+            {[40, 70, 45, 90, 65, 80, 50, 85].map((h, i) => (
+              <div key={i} className="bg-blue-400/50 w-full rounded-sm" style={{ height: `${h}%` }}></div>
+            ))}
+          </div>
+        </div>
+        <div className="flex items-center justify-between text-xs text-gray-400">
+          <span>Uptime: 99.9%</span>
+          <span>Efficiency: 0.22 J/GH</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MiningLiveCounter;
diff --git a/frontend/src/components/NavBarItem.tsx b/frontend/src/components/NavBarItem.tsx
index eb155e3..1986306 100644
--- a/frontend/src/components/NavBarItem.tsx
+++ b/frontend/src/components/NavBarItem.tsx
@@ -1,6 +1,5 @@
-import React, {useEffect, useRef} from 'react'
+import React, {useEffect, useRef, useState} from 'react'
 import Link from 'next/link'
-import { useState } from 'react'
 import { mdiChevronUp, mdiChevronDown } from '@mdi/js'
 import BaseDivider from './BaseDivider'
 import BaseIcon from './BaseIcon'
@@ -129,4 +128,4 @@ export default function NavBarItem({ item }: Props) {
   }
 
   return <div className={componentClass} ref={excludedRef}>{NavBarItemComponentContents}</div>
-}
+}
\ No newline at end of file
diff --git a/frontend/src/layouts/Authenticated.tsx b/frontend/src/layouts/Authenticated.tsx
index 1b9907d..2a694cc 100644
--- a/frontend/src/layouts/Authenticated.tsx
+++ b/frontend/src/layouts/Authenticated.tsx
@@ -1,5 +1,4 @@
-import React, { ReactNode, useEffect } from 'react'
-import { useState } from 'react'
+import React, { ReactNode, useEffect, useState } from 'react'
 import jwt from 'jsonwebtoken';
 import { mdiForwardburger, mdiBackburger, mdiMenu } from '@mdi/js'
 import menuAside from '../menuAside'
@@ -52,7 +51,7 @@ export default function LayoutAuthenticated({
   useEffect(() => {
     dispatch(findMe());
     if (!isTokenValid()) {
-      dispatch(logoutUser());
+      dispatch(dispatch(logoutUser()));
       router.push('/login');
     }
   }, [token, localToken]);
@@ -126,4 +125,4 @@ export default function LayoutAuthenticated({
       </div>
     </div>
   )
-}
+}
\ No newline at end of file
diff --git a/frontend/src/pages/dashboard.tsx b/frontend/src/pages/dashboard.tsx
index c2fe6e9..677f56c 100644
--- a/frontend/src/pages/dashboard.tsx
+++ b/frontend/src/pages/dashboard.tsx
@@ -9,6 +9,7 @@ import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton
 import BaseIcon from "../components/BaseIcon";
 import { getPageTitle } from '../config'
 import Link from "next/link";
+import MiningLiveCounter from '../components/MiningLiveCounter';
 
 import { hasPermission } from "../helpers/userPermissions";
 import { fetchWidgets } from '../stores/roles/rolesSlice';
@@ -16,6 +17,7 @@ import { WidgetCreator } from '../components/WidgetCreator/WidgetCreator';
 import { SmartWidget } from '../components/SmartWidget/SmartWidget';
 
 import { useAppDispatch, useAppSelector } from '../stores/hooks';
+
 const Dashboard = () => {
     const dispatch = useAppDispatch();
     const iconsColor = useAppSelector((state) => state.style.iconsColor);
@@ -40,7 +42,10 @@ const Dashboard = () => {
     const [api_jobs, setApi_jobs] = React.useState(loadingMessage);
     const [audit_events, setAudit_events] = React.useState(loadingMessage);
 
-    
+    const [userBalance, setUserBalance] = React.useState(0);
+    const [userHashrate, setUserHashrate] = React.useState(42.5);
+    const [isMining, setIsMining] = React.useState(true);
+
     const [widgetsRole, setWidgetsRole] = React.useState({
         role: { value: '', label: '' },
     });
@@ -74,6 +79,26 @@ const Dashboard = () => {
                 }
             });
         });
+
+        if (hasPermission(currentUser, 'READ_BALANCES')) {
+            axios.get('/balances').then(res => {
+                if (res.data.rows?.length > 0) {
+                    setUserBalance(parseFloat(res.data.rows[0].available_btc || 0));
+                }
+            });
+        }
+        if (hasPermission(currentUser, 'READ_MINING_SESSIONS')) {
+            axios.get('/mining_sessions').then(res => {
+                const runningSession = res.data.rows?.find((s: any) => s.state === 'running');
+                if (runningSession) {
+                    setUserHashrate(parseFloat(runningSession.avg_hashrate_ths || 42.5));
+                    setIsMining(true);
+                } else {
+                    setUserHashrate(0);
+                    setIsMining(false);
+                }
+            });
+        }
     }
   
     async function getWidgets(roleId) {
@@ -100,10 +125,12 @@ const Dashboard = () => {
       <SectionMain>
         <SectionTitleLineWithButton
             icon={icon.mdiChartTimelineVariant}
-            title='Overview'
+            title='Bitcine Mining Center'
             main>
           {''}
         </SectionTitleLineWithButton>
+
+        <MiningLiveCounter initialBalance={userBalance} hashrate={userHashrate} isActive={isMining} />
         
         {hasPermission(currentUser, 'CREATE_ROLES') && <WidgetCreator
             currentUser={currentUser}
@@ -552,4 +579,4 @@ Dashboard.getLayout = function getLayout(page: ReactElement) {
   return <LayoutAuthenticated>{page}</LayoutAuthenticated>
 }
 
-export default Dashboard
+export default Dashboard
\ No newline at end of file
diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx
index 438b9b2..e71b1f0 100644
--- a/frontend/src/pages/index.tsx
+++ b/frontend/src/pages/index.tsx
@@ -12,150 +12,100 @@ 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 * as icon from '@mdi/js';
+import BaseIcon from '../components/BaseIcon';
 
 
 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 = 'Bitcoin Mining Dashboard'
-
-    // 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 title = 'Bitcine'
 
   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',
-                  }
-                  : {}
-          }
-      >
+      <div className="bg-slate-950 text-white min-h-screen overflow-hidden selection:bg-emerald-500/30">
       <Head>
-        <title>{getPageTitle('Starter Page')}</title>
+        <title>{getPageTitle('Bitcine - Auto Mining 24/7')}</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 Bitcoin Mining Dashboard app!"/>
-        
-            <div className="space-y-3">
-                <p className='text-center '>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 '>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'
-                />
+      {/* Hero Section */}
+      <section className="relative pt-20 pb-32 flex flex-col items-center justify-center overflow-hidden">
+        {/* Animated Background Elements */}
+        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[1000px] h-[600px] bg-emerald-500/10 blur-[120px] rounded-full -z-10"></div>
+        <div className="absolute bottom-0 right-0 w-[500px] h-[500px] bg-blue-500/5 blur-[100px] rounded-full -z-10"></div>
 
-            </BaseButtons>
-        </CardBox>
+        <div className="container mx-auto px-6 text-center z-10">
+          <div className="inline-flex items-center space-x-2 bg-emerald-500/10 border border-emerald-500/20 px-4 py-2 rounded-full mb-8 animate-bounce">
+            <span className="flex h-2 w-2 rounded-full bg-emerald-500"></span>
+            <span className="text-emerald-400 text-sm font-medium uppercase tracking-wider">System Live & Mining</span>
+          </div>
+          
+          <h1 className="text-5xl md:text-7xl font-extrabold mb-6 tracking-tight">
+            Next-Gen <span className="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-cyan-400">Bitcoin Mining</span>
+            <br />Auto-Pilot Efficiency
+          </h1>
+          
+          <p className="text-lg md:text-xl text-slate-400 max-w-2xl mx-auto mb-10 leading-relaxed">
+            Experience the world&apos;s most advanced 24/7 autonomous mining platform. 
+            Real-time hashrate monitoring, instant payouts, and zero-config hardware integration.
+          </p>
+
+          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+            <Link href="/register">
+              <button className="px-8 py-4 bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold rounded-2xl transition-all hover:scale-105 shadow-[0_0_20px_rgba(16,185,129,0.3)]">
+                Start Mining Now
+              </button>
+            </Link>
+            <Link href="/login">
+              <button className="px-8 py-4 bg-slate-900/50 border border-slate-800 hover:bg-slate-800 text-white font-bold rounded-2xl transition-all">
+                Access Dashboard
+              </button>
+            </Link>
+          </div>
         </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>
 
+        {/* Feature Grid */}
+        <div className="container mx-auto px-6 mt-32 grid grid-cols-1 md:grid-cols-3 gap-8">
+          <div className="bg-slate-900/40 border border-slate-800 p-8 rounded-3xl hover:border-emerald-500/30 transition-colors group">
+            <div className="p-3 bg-emerald-500/10 rounded-2xl w-fit mb-6 group-hover:bg-emerald-500/20">
+              <BaseIcon path={icon.mdiAutorenew} className="text-emerald-400" size={32} />
+            </div>
+            <h3 className="text-xl font-bold mb-3 text-emerald-50">24/7 Auto-Mining</h3>
+            <p className="text-slate-400 text-sm leading-relaxed">
+              Our autonomous algorithms optimize hashrate allocation 24/7, ensuring you never miss a block.
+            </p>
+          </div>
+
+          <div className="bg-slate-900/40 border border-slate-800 p-8 rounded-3xl hover:border-cyan-500/30 transition-colors group">
+            <div className="p-3 bg-cyan-500/10 rounded-2xl w-fit mb-6 group-hover:bg-cyan-500/20">
+              <BaseIcon path={icon.mdiWalletOutline} className="text-cyan-400" size={32} />
+            </div>
+            <h3 className="text-xl font-bold mb-3 text-cyan-50">Instant Payouts</h3>
+            <p className="text-slate-400 text-sm leading-relaxed">
+              Direct wallet integration with zero waiting time. Move your earnings to any Bitcoin wallet instantly.
+            </p>
+          </div>
+
+          <div className="bg-slate-900/40 border border-slate-800 p-8 rounded-3xl hover:border-amber-500/30 transition-colors group">
+            <div className="p-3 bg-amber-500/10 rounded-2xl w-fit mb-6 group-hover:bg-amber-500/20">
+              <BaseIcon path={icon.mdiSecurity} className="text-amber-400" size={32} />
+            </div>
+            <h3 className="text-xl font-bold mb-3 text-amber-50">Advanced Security</h3>
+            <p className="text-slate-400 text-sm leading-relaxed">
+              Military-grade encryption for your private keys and withdrawal requests. Your BTC is safe.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Simple Footer */}
+      <footer className="border-t border-slate-900 py-10">
+        <div className="container mx-auto px-6 flex flex-col md:flex-row justify-between items-center opacity-60 hover:opacity-100 transition-opacity">
+          <p className="text-sm">© 2026 <span className="font-bold text-emerald-500">{title}</span>. Built for the future of finance.</p>
+          <div className="flex space-x-6 mt-4 md:mt-0">
+            <Link className="text-sm hover:text-emerald-400" href="/privacy-policy/">Privacy</Link>
+            <Link className="text-sm hover:text-emerald-400" href="/terms-of-use/">Terms</Link>
+          </div>
+        </div>
+      </footer>
     </div>
   );
 }