diff --git a/frontend/public/images/api-support.png b/frontend/public/images/api-support.png
new file mode 100644
index 0000000..4f744b0
Binary files /dev/null and b/frontend/public/images/api-support.png differ
diff --git a/frontend/public/images/auto-dag-data.png b/frontend/public/images/auto-dag-data.png
new file mode 100644
index 0000000..108ca2f
Binary files /dev/null and b/frontend/public/images/auto-dag-data.png differ
diff --git a/frontend/public/images/auto-drive-npm.png b/frontend/public/images/auto-drive-npm.png
new file mode 100644
index 0000000..fa593c6
Binary files /dev/null and b/frontend/public/images/auto-drive-npm.png differ
diff --git a/frontend/public/images/drag-drop-or-select-files-folders.png.png b/frontend/public/images/drag-drop-or-select-files-folders.png.png
new file mode 100644
index 0000000..00a73b0
Binary files /dev/null and b/frontend/public/images/drag-drop-or-select-files-folders.png.png differ
diff --git a/frontend/public/images/share.png b/frontend/public/images/share.png
new file mode 100644
index 0000000..d0ecf69
Binary files /dev/null and b/frontend/public/images/share.png differ
diff --git a/frontend/public/images/upload-with-encryption-or-without.png b/frontend/public/images/upload-with-encryption-or-without.png
new file mode 100644
index 0000000..1b66e24
Binary files /dev/null and b/frontend/public/images/upload-with-encryption-or-without.png differ
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 3e40199..e91415e 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -6,7 +6,9 @@ export default function App() {
 }
 
 export const metadata: Metadata = {
-  title: 'Auto-Drive',
+  title: 'Auto Drive',
   description:
-    'Store, share, and download your files securely with autonomys decentralized permanent storage.',
+    'Store, share, and download your files securely with Autonomys Network decentralized permanent storage.',
+  keywords:
+    'autonomys, auto-drive, decentralized storage, permanent storage, autonomys network, file storage, file sharing, secure storage, blockchain storage, distributed storage, cloud storage alternative, web3 storage, peer-to-peer storage, encrypted storage, data persistence',
 };
diff --git a/frontend/src/components/common/LandingHeader/index.tsx b/frontend/src/components/common/LandingHeader/index.tsx
index 886dbc3..8cb053f 100644
--- a/frontend/src/components/common/LandingHeader/index.tsx
+++ b/frontend/src/components/common/LandingHeader/index.tsx
@@ -3,7 +3,7 @@
 import { HelpCircleIcon, HomeIcon } from 'lucide-react';
 import { usePathname } from 'next/navigation';
 import { useCallback } from 'react';
-
+import Link from 'next/link';
 export const LandingHeader = () => {
   const pathname = usePathname();
 
@@ -19,16 +19,16 @@ export const LandingHeader = () => {
   return (
     <div className='flex w-full flex-row justify-center gap-2 bg-transparent px-[20%] py-2'>
       <ul className='flex flex-row gap-4'>
-        <a className='content' href='/'>
+        <Link className='content' href='/'>
           <li className={getLinkClass('/')}>
             <HomeIcon className='h-4 w-4' />
           </li>
-        </a>
-        <a className='content' href='/faqs'>
+        </Link>
+        <Link className='content' href='/faqs'>
           <li className={getLinkClass('/faqs')}>
             <HelpCircleIcon className='h-4 w-4' />
           </li>
-        </a>
+        </Link>
       </ul>
     </div>
   );
diff --git a/frontend/src/views/Home/index.tsx b/frontend/src/views/Home/index.tsx
index c9a403f..aa13c43 100644
--- a/frontend/src/views/Home/index.tsx
+++ b/frontend/src/views/Home/index.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import Link from 'next/link';
 import Footer from '../../components/Footer';
 import { LandingHeader } from '../../components/common/LandingHeader';
 import { SigningInButtons } from './SignInButtons';
@@ -11,8 +12,8 @@ export const Home = () => {
       <LandingHeader />
       <div className='mt-5 flex min-h-[50vh] w-[90%] flex-col items-center justify-center gap-4 overflow-hidden rounded-3xl rounded-xl bg-white py-8 md:w-[60%] md:flex-row md:gap-0 md:py-0'>
         <div className='flex h-full w-full flex-col items-center justify-center gap-4 rounded-3xl bg-white px-4'>
-          <h1 className='margin-0 bg-gradient-to-b from-backgroundDarkest to-backgroundDark bg-clip-text text-4xl font-semibold text-transparent'>
-            Auto-Drive
+          <h1 className='margin-0 bg-gradient-to-b from-backgroundDarkest to-backgroundDark bg-clip-text text-4xl font-semibold text-transparent text-center'>
+            Auto Drive
           </h1>
           <p className='text-gray max-w-[75%] text-center text-lg font-light'>
             Store, share, and download your files securely with Autonomys
@@ -30,6 +31,172 @@ export const Home = () => {
           />
         </div>
       </div>
+      <h2 className="text-center text-4xl font-bold text-backgroundDarker my-8">
+        Upload Once, Access Forever.
+      </h2>
+      <div className='mt-5 flex min-h-[50vh] w-[90%] flex-col items-center justify-center gap-4 overflow-hidden rounded-3xl rounded-xl bg-white py-8 md:w-[60%] md:flex-row md:gap-0 md:py-0'>
+        <div className='flex h-full w-full grow flex-col items-center justify-center gap-4 rounded-3xl bg-white px-4'>
+          <Image
+            className='w-full rounded-3xl border-2 border-gray-200'
+            src='/images/drag-drop-or-select-files-folders.png.png'
+            alt='Drag and drop files and folders'
+            width={420}
+            height={272}
+          />
+        </div>
+        <div className='flex h-full w-full flex-col items-center justify-center gap-4 rounded-3xl bg-white px-4'>
+          <h1 className='margin-0 bg-gradient-to-b from-backgroundDarkest to-backgroundDark bg-clip-text text-4xl font-semibold text-transparent text-center'>
+            Upload Files & Folders
+          </h1>
+          <p className='text-gray max-w-[75%] text-center text-lg font-light'>
+            Upload files and folders to Autonomys Network decentralized permanent storage, by simply dragging and dropping them into the upload area. Or select files and folders from your computer.
+          </p>
+        </div>
+      </div>
+      <h2 className="text-center text-4xl font-bold text-backgroundDarker my-8">
+        Your Drive into Permanent Decentralized Storage.
+      </h2>
+      <div className='mt-5 flex min-h-[50vh] w-[90%] flex-col items-center justify-center gap-4 overflow-hidden rounded-3xl rounded-xl bg-white py-8 md:w-[60%] md:flex-row md:gap-0 md:py-0'>
+        <div className='flex h-full w-full flex-col items-center justify-center gap-4 rounded-3xl bg-white px-4'>
+          <h1 className='margin-0 bg-gradient-to-b from-backgroundDarkest to-backgroundDark bg-clip-text text-4xl font-semibold text-transparent text-center'>
+            Secure End-to-End Encryption (E2EE)
+          </h1>
+          <p className='text-gray max-w-[75%] text-center text-lg font-light leading-relaxed'>
+            Secure your data with optional end-to-end encryption on Autonomys Network. Choose between setting a global encryption key for all files, customizing keys per file, or uploading without encryption - putting you in complete control of your data security.
+          </p>
+        </div>
+        <div className='flex h-full w-full grow flex-col items-center justify-center gap-4 rounded-3xl bg-white px-4'>
+          <Image
+            className='w-full rounded-3xl border-2 border-gray-200'
+            src='/images/upload-with-encryption-or-without.png'
+            alt='Upload with encryption or without'
+            width={420}
+            height={272}
+          />
+        </div>
+      </div>
+      <h2 className="text-center text-4xl font-bold text-backgroundDarker my-8">
+        Seamless Integration & Developer-Friendly
+      </h2>
+      <div className='mt-5 flex min-h-[50vh] w-[90%] flex-col items-center justify-center gap-4 overflow-hidden rounded-3xl rounded-xl bg-white py-8 md:w-[60%] md:flex-row md:gap-0 md:py-0'>
+        <div className='flex h-full w-full grow flex-col items-center justify-center gap-4 rounded-3xl bg-white px-4'>
+          <Image
+            className='w-full rounded-3xl border-2 border-gray-200'
+            src='/images/api-support.png'
+            alt='API Support'
+            width={420}
+            height={272}
+          />
+        </div>
+        <div className='flex h-full w-full flex-col items-center justify-center gap-4 rounded-3xl bg-white px-4'>
+          <h1 className='margin-0 bg-gradient-to-b from-backgroundDarkest to-backgroundDark bg-clip-text text-4xl font-semibold text-transparent text-center'>
+            Create API Keys
+          </h1>
+          <p className='text-gray max-w-[75%] text-center text-lg font-light'>
+            Create API keys to access Autonomys Network decentralized permanent storage, through our API.
+          </p>
+        </div>
+      </div>
+      <h2 className="text-center text-4xl font-bold text-backgroundDarker my-8">
+        TypeScript & JavaScript Support with Full Type Safety
+      </h2>
+      <div className='mt-5 flex min-h-[50vh] w-[90%] flex-col items-center justify-center gap-4 overflow-hidden rounded-3xl rounded-xl bg-white py-8 md:w-[60%] md:flex-row md:gap-0 md:py-0'>
+        <div className='flex h-full w-full flex-col items-center justify-center gap-4 rounded-3xl bg-white px-4'>
+          <h1 className='margin-0 bg-gradient-to-b from-backgroundDarkest to-backgroundDark bg-clip-text text-4xl font-semibold text-transparent text-center'>
+            @autonomys/auto-drive
+          </h1>
+          <p className='text-gray max-w-[75%] text-center text-lg font-light'>
+            Implement Auto-Drive&apos;s powerful permanent decentralized storage capabilities into your own applications using our official NPM package. Get started quickly with a familiar JavaScript/TypeScript interface and comprehensive documentation.
+            <br />
+            <br />
+            <Link
+              href='https://www.npmjs.com/package/@autonomys/auto-drive'
+              className='text-accent'
+              target='_blank'
+              rel='noreferrer'
+            >
+              npm install auto-drive
+            </Link>
+            <br />
+            <Link
+              href='https://www.npmjs.com/package/@autonomys/auto-drive'
+              className='text-accent'
+              target='_blank'
+              rel='noreferrer'
+            >
+              yarn add auto-drive
+            </Link>
+          </p>
+        </div>
+        <div className='flex h-full w-full grow flex-col items-center justify-center gap-4 rounded-3xl bg-white px-4'>
+          <Link
+            href='https://www.npmjs.com/package/@autonomys/auto-drive'
+            className='text-accent'
+            target='_blank'
+            rel='noreferrer'
+          >
+            <Image
+              className='w-full rounded-3xl border-2 border-gray-200'
+              src='/images/auto-drive-npm.png'
+              alt='Auto-Drive NPM Package'
+              width={420}
+              height={272}
+            />
+          </Link>
+        </div>
+      </div>
+      <h2 className="text-center text-4xl font-bold text-backgroundDarker my-8">
+        Scalable Data Structure for Decentralized Storage
+      </h2>
+      <div className='mt-5 flex min-h-[50vh] w-[90%] flex-col items-center justify-center gap-4 overflow-hidden rounded-3xl rounded-xl bg-white py-8 md:w-[60%] md:flex-row md:gap-0 md:py-0'>
+        <div className='flex h-full w-full grow flex-col items-center justify-center gap-4 rounded-3xl bg-white px-4'>
+          <Link
+            href='https://www.npmjs.com/package/@autonomys/auto-dag-data'
+            className='text-accent'
+            target='_blank'
+            rel='noreferrer'
+          >
+            <Image
+              className='w-full rounded-3xl border-2 border-gray-200'
+              src='/images/auto-dag-data.png'
+              alt='Auto-DAG Data Structure'
+              width={420}
+              height={272}
+            />
+          </Link>
+        </div>
+        <div className='flex h-full w-full flex-col items-center justify-center gap-4 rounded-3xl bg-white px-4'>
+          <h1 className='margin-0 bg-gradient-to-b from-backgroundDarkest to-backgroundDark bg-clip-text text-4xl font-semibold text-transparent text-center'>
+            Auto-DAG Data Structure
+          </h1>
+          <p className='text-gray max-w-[75%] text-center text-lg font-light leading-relaxed'>
+            Autonomys Network uses the Auto-DAG data structure, which store your data on chain in small chunks to fit the block size limit of Autonomys Network and to ensure the integrity and authenticity of your data.
+          </p>
+        </div>
+      </div>
+      <h2 className="text-center text-4xl font-bold text-backgroundDarker my-8">
+        Join Us Today and Experience the Future of Storage!
+      </h2>
+      <div className='mt-5 flex min-h-[50vh] w-[90%] flex-col items-center justify-center gap-4 overflow-hidden rounded-3xl rounded-xl bg-white py-8 md:w-[60%] md:flex-row md:gap-0 md:py-0'>
+        <div className='flex h-full w-full grow flex-col items-center justify-center gap-4 rounded-3xl bg-white px-4'>
+          <Image
+            className='w-full rounded-3xl border-2 border-gray-200'
+            src='/preview.png'
+            alt='Home Hero'
+            width={420}
+            height={272}
+          />
+        </div>
+        <div className='flex h-full w-full flex-col items-center justify-center gap-4 rounded-3xl bg-white px-4'>
+          <h1 className='margin-0 bg-gradient-to-b from-backgroundDarkest to-backgroundDark bg-clip-text text-4xl font-semibold text-transparent text-center'>
+            Auto Drive
+          </h1>
+          <p className='text-gray max-w-[75%] text-center text-lg font-light'>
+            Sign in now to store, share, and download your files securely with Autonomys Network decentralized permanent storage.
+          </p>
+          <SigningInButtons />
+        </div>
+      </div>
       <Footer />
     </div>
   );