diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
new file mode 100644
index 0000000..f63d1c3
--- /dev/null
+++ b/src/app/login/page.tsx
@@ -0,0 +1,62 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+
+export default function LoginPage() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const handleLogin = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log("Login requested for:", email);
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="expand-hover"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="rounded"
+      contentWidth="mediumSmall"
+      sizing="largeSmallSizeMediumTitles"
+      background="blurBottom"
+      cardStyle="solid"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="medium"
+    >
+      <NavbarLayoutFloatingInline
+        navItems={[
+          { name: "Home", id: "/" },
+          { name: "Login", id: "/login" },
+        ]}
+        brandName="DocSecure"
+      />
+      <div className="min-h-screen flex items-center justify-center p-8">
+        <form onSubmit={handleLogin} className="w-full max-w-md p-8 bg-card rounded-lg shadow-xl">
+          <h1 className="text-2xl font-bold mb-6">Login</h1>
+          <input
+            type="email"
+            placeholder="Email"
+            className="w-full p-3 mb-4 border rounded"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+          />
+          <input
+            type="password"
+            placeholder="Password"
+            className="w-full p-3 mb-6 border rounded"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+          />
+          <button type="submit" className="w-full p-3 bg-primary text-white rounded">
+            Sign In
+          </button>
+        </form>
+      </div>
+    </ThemeProvider>
+  );
+}
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index eda434b..ddaa450 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -9,7 +9,8 @@ import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDash
 import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
 import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import { ShieldCheck, FileText, Server, Cpu } from "lucide-react";
+import { ShieldCheck, FileText, Server, Cpu, Download } from "lucide-react";
+import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
 
 export default function LandingPage() {
   return (
@@ -32,6 +33,7 @@ export default function LandingPage() {
               { name: "Home", id: "hero" },
               { name: "About", id: "about" },
               { name: "Features", id: "features" },
+              { name: "Downloads", id: "downloads" },
               { name: "Technology", id: "metrics" },
               { name: "Contact", id: "contact" },
             ]}
@@ -83,6 +85,19 @@ export default function LandingPage() {
           />
         </div>
 
+        <div id="downloads" data-section="downloads">
+           <FeatureCardSix 
+             title="Document Management"
+             description="Securely access and download your verified academic records anytime."
+             textboxLayout="default"
+             useInvertedBackground={true}
+             features={[
+               { title: "Academic Transcript", description: "Official seal verified transcript", buttons: [{ text: "Download", onClick: () => window.open('#'), icon: Download }], imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3ttzi6" },
+               { title: "Degree Certificate", description: "Original verified degree certificate", buttons: [{ text: "Download", onClick: () => window.open('#'), icon: Download }], imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3ttzi6" }
+             ]}
+           />
+        </div>
+
         <div id="metrics" data-section="metrics">
           <MetricCardTwo
             title="Technological Stack"
@@ -103,7 +118,8 @@ export default function LandingPage() {
           <ContactText
             text="Ready to secure your institution's future? Get in touch with our team today."
             background={{ variant: "animated-grid" }}
-            buttons={[{ text: "Book a Consultation" }]}
+            buttons={[{ text: "Book a Consultation" }]
+            }
             useInvertedBackground={true}
           />
         </div>