diff --git a/src/app/page.tsx b/src/app/page.tsx
index 4a3837af..f3f46a6f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,20 +1,45 @@
 'use client';
 import Link from 'next/link';
-import type { NextPage } from 'next';
 
-const Home: NextPage = () => {
+const Home = () => {
   return (
-    <div className="container mx-auto p-4">
-      <h1 className="text-4xl font-bold text-center mb-8">
-        Welcome to the Dashboard
-      </h1>
-      <div className="text-center">
-        <Link href="/dashboard" className="btn btn-primary mr-4">
-          Go to Dashboard
-        </Link>
-        <Link href="/api-docs" className="btn btn-secondary">
-          API Documentation
-        </Link>
+    <div className="bg-white py-6 sm:py-8 lg:py-12">
+      <div className="mx-auto max-w-screen-2xl px-4 md:px-8">
+        <div className="mx-auto flex max-w-xl flex-col items-center text-center">
+          <p className="mb-4 font-semibold text-indigo-500 md:mb-6 md:text-lg xl:text-xl">
+            Proud to introduce
+          </p>
+          <h1 className="mb-8 text-3xl font-bold text-black sm:text-4xl md:mb-12 md:text-5xl">
+            Revolutionary way to build the web
+          </h1>
+          <p className="mb-8 text-lg text-gray-700 md:mb-12 md:text-xl">
+            Welcome to DocDoc, the ultimate knowledge sharing platform. Create
+            and share articles effortlessly, collaborate with peers, and enjoy
+            automatic text linting for flawless writing. With our AI-powered
+            local LLM, you can review and refine your content like never before.
+            Join us and experience the future of content creation.
+          </p>
+          <div className="flex w-full flex-col gap-2.5 sm:flex-row sm:justify-center">
+            <Link
+              href="/dashboard"
+              className="inline-block rounded-lg bg-indigo-500 px-8 py-3 text-center text-sm font-semibold text-white outline-none ring-indigo-300 transition duration-100 hover:bg-indigo-600 focus-visible:ring active:bg-indigo-700 md:text-base"
+            >
+              Start now
+            </Link>
+            <Link
+              href="/tour"
+              className="inline-block rounded-lg bg-gray-200 px-8 py-3 text-center text-sm font-semibold text-gray-500 outline-none ring-indigo-300 transition duration-100 hover:bg-gray-300 focus-visible:ring active:text-gray-700 md:text-base"
+            >
+              Take a tour
+            </Link>
+            <Link
+              href="/api-docs"
+              className="inline-block rounded-lg bg-gray-200 px-8 py-3 text-center text-sm font-semibold text-gray-500 outline-none ring-indigo-300 transition duration-100 hover:bg-gray-300 focus-visible:ring active:text-gray-700 md:text-base"
+            >
+              API Docs
+            </Link>
+          </div>
+        </div>
       </div>
     </div>
   );
diff --git a/src/app/tour/page.tsx b/src/app/tour/page.tsx
new file mode 100644
index 00000000..f29f594d
--- /dev/null
+++ b/src/app/tour/page.tsx
@@ -0,0 +1,20 @@
+'use client';
+
+const Tour = () => {
+  return (
+    <div className="bg-white py-6 sm:py-8 lg:py-12">
+      <div className="mx-auto max-w-screen-2xl px-4 md:px-8">
+        <div className="mx-auto flex max-w-xl flex-col items-center text-center">
+          <h1 className="mb-8 text-3xl font-bold text-black sm:text-4xl md:mb-12 md:text-5xl">
+            Take a Tour
+          </h1>
+          <p className="mb-4 text-gray-500 md:mb-6 md:text-lg xl:text-xl">
+            This is the tour page. More content will be added here.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Tour;