diff --git a/client/app/(home)/layout.jsx b/client/app/(home)/layout.jsx
new file mode 100644
index 0000000..ee8181e
--- /dev/null
+++ b/client/app/(home)/layout.jsx
@@ -0,0 +1,17 @@
+'use client';
+
+import { motion, AnimatePresence } from 'framer-motion';
+
+export default function Layout({ children }) {
+  return (
+    <AnimatePresence mode='wait'>
+      <motion.div
+        initial={{ y: 20, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{ ease: 'easeInOut', duration: 0.3 }}
+      >
+        {children}
+      </motion.div>
+    </AnimatePresence>
+  );
+}
diff --git a/client/app/(home)/page.jsx b/client/app/(home)/page.jsx
new file mode 100644
index 0000000..1d41dbc
--- /dev/null
+++ b/client/app/(home)/page.jsx
@@ -0,0 +1,58 @@
+import Link from 'next/link';
+import Image from 'next/image';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import Post from '@/components/app/Post';
+
+const post = {
+  created_at: { T: 1726319475 },
+  updated_at: { T: 1726319475 },
+  author: {
+    id: '66e4c26822421e10603c9d71',
+    created_at: { T: 1726268008, I: 0 },
+    role: 'user',
+    display_name: 'emirhan',
+    username: 'larei',
+    about: 'ben bir copl.uk kullanıcısıyım.',
+    points: 0
+  },
+  content:
+    'Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore voluptatum, doloribus velit rem a quo delectus temporibus cumque similique odio corrupti excepturi veniam explicabo ullam nesciunt ea aliquid nisi aliquam!',
+  likes: [0, 1, 2, 3, 4, 5, 7, 8, 9, 10],
+  comments: 3
+};
+
+export default function Page() {
+  return (
+    <div className='h-screen flex flex-col max-w-screen-xl mx-auto px-5'>
+      <nav className='py-5 flex justify-between items-center'>
+        <Image src='/copluk.svg' alt='logo' width={128} height={128} />
+        <div className='gap-3'>
+          <Button variant='ghost' asChild>
+            <Link href='/login'>oturum aç</Link>
+          </Button>
+          <Button>
+            <Link href='/register'>kayıt ol</Link>
+          </Button>
+        </div>
+      </nav>
+      <div className='h-full mb-10 py-20 bg-gradient-to-b from-zinc-900 rounded-2xl px-5'>
+        <div className='text-center'>
+          <Badge variant='outline' className='mb-5'>
+            copl.uk
+          </Badge>
+          <h1 className='text-5xl font-black'>zihin çöplüğün, kafana göre.</h1>
+          <p className='text-muted-foreground font-medium mt-3'>
+            copl.uk; düşüncelerini, fikirlerini ve notlarını paylaşabileceğin
+            yazı tabanlı bir sosyal medya platformudur.
+          </p>
+        </div>
+        <div className='mt-20 flex justify-center'>
+          <div className='pointer-events-none w-[35rem]'>
+            <Post post={post} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/client/components/ui/badge.jsx b/client/components/ui/badge.jsx
new file mode 100644
index 0000000..5a27c34
--- /dev/null
+++ b/client/components/ui/badge.jsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+        outline: 'text-foreground'
+      }
+    },
+    defaultVariants: {
+      variant: 'default'
+    }
+  }
+);
+
+function Badge({ className, variant, ...props }) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };
diff --git a/client/styles/main.css b/client/styles/main.css
index a6cc947..b49ff22 100644
--- a/client/styles/main.css
+++ b/client/styles/main.css
@@ -4,27 +4,35 @@
 .md {
   @apply text-zinc-400 text-sm leading-relaxed break-words;
 }
+
 .md a {
   @apply underline;
 }
+
 .md h1 {
   @apply text-3xl font-bold my-2;
 }
+
 .md h2 {
   @apply text-2xl font-bold my-2;
 }
+
 .md h3 {
   @apply text-xl font-bold my-2;
 }
+
 .md pre {
   @apply bg-card text-primary p-5 my-4 rounded-lg overflow-x-scroll;
 }
+
 .md code {
   @apply text-primary;
 }
+
 .md ul {
   @apply list-disc pl-5 my-2;
 }
+
 .md ol {
   @apply list-decimal pl-5 my-2;
 }
@@ -32,3 +40,7 @@
 input[type='file']::file-selector-button {
   @apply text-white;
 }
+
+::selection {
+  @apply bg-background text-primary;
+}
\ No newline at end of file