diff --git a/components/footer.tsx b/components/footer.tsx
index 9ab6926..1843e70 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -10,9 +10,9 @@ export function SiteFooter({ className }: React.HTMLAttributes<HTMLElement>) {
   return (
     <footer className={cn(className)}>
       <div className="z-50 w-full border-y bg-background/5 py-10 backdrop-blur">
-        <div className="container flex flex-col items-center justify-between md:h-24 md:flex-row md:py-0">
+        <div className="container flex flex-col items-center justify-between gap-8 md:h-24 md:flex-row md:py-0">
           <Link
-            className="flex flex-col gap-4 md:gap-2 md:px-0"
+            className="flex flex-col md:gap-2 md:px-0"
             href="https://havelsan.com.tr"
             target="_blank"
           >
diff --git a/components/home/contact.tsx b/components/home/contact.tsx
index 50a1d91..9b4efad 100644
--- a/components/home/contact.tsx
+++ b/components/home/contact.tsx
@@ -8,7 +8,7 @@ export default function ContactSection() {
   return (
     <section id="contact" className="border-t">
       <div className="container py-12">
-        <div className="grid grid-cols-5 gap-8">
+        <div className="grid-cols-5 gap-8 md:grid">
           <div className="col-span-2 flex flex-col justify-center">
             <h5
               className={cn(
@@ -20,12 +20,15 @@ export default function ContactSection() {
               iletişime geçin
             </h5>
 
-            <p className="mt-6 leading-relaxed text-muted-foreground">
+            <p className="mb-5 mt-6 leading-relaxed text-muted-foreground md:mb-0">
               Ücretsiz Demo İsteyin! BT süreçlerinizde aksaklığa sebep olmadan
               kavram ispat çalışması sunuyoruz. Sistem yönetimi projenizin ilk
               adımını risk almadan Liman Merkezi Yönetim Sistemi ile
               başlayabilirsiniz. Kavram ispat çalışması sonrası 30 gün ücretsiz
-              deneme sürümünü sizler de test edebilirsiniz. <br /> <br />
+              deneme sürümünü sizler de test edebilirsiniz.
+            </p>
+
+            <p className="mt-6 hidden leading-relaxed text-muted-foreground lg:block">
               Liman Merkezi Yönetim Sistemi halihazırda bulunan sisteminize
               kesinti yaşatmadan entegre olabilmektedir. Bileşen olarak Cihaz
               Yöneticisi, Ağ Keşif, Ağ İzleme, Domain Yöneticisi ve
@@ -36,8 +39,8 @@ export default function ContactSection() {
           </div>
           <div className="col-span-3">
             <Card className="shadow shadow-accent">
-              <CardContent className="p-8">
-                <div className="mb-5 font-semibold leading-none tracking-tight text-foreground">
+              <CardContent className="p-4 md:p-6 lg:p-8">
+                <div className="mb-5 font-semibold tracking-tight text-foreground">
                   Aşağıdaki formu doldurun ve takımımız sizinle iletişime
                   geçsin.
                 </div>
diff --git a/components/home/hero.tsx b/components/home/hero.tsx
index 68a62d3..f324318 100644
--- a/components/home/hero.tsx
+++ b/components/home/hero.tsx
@@ -41,7 +41,7 @@ export default function Hero() {
             Açık Kaynak
             <br /> Merkezi Yönetim Sistemi.
           </h1>
-          <p className="mt-6 max-w-[42rem] leading-normal text-muted-foreground sm:text-xl sm:leading-8">
+          <p className="mt-6 max-w-[42rem] text-base leading-normal text-muted-foreground sm:text-xl sm:leading-8">
             <b>Liman Merkezi Yönetim Sistemi</b> bilgi teknolojisi
             süreçlerinizde bulunan <b>sunucu</b>, <b>istemci</b> (Windows,
             Linux), <b>ağ cihazları</b> (router, switch) ve
@@ -49,7 +49,7 @@ export default function Hero() {
             yöntemler ile merkezi olarak yönetmenizi sağlar.
           </p>
 
-          <AppWindow className="relative mt-10">
+          <AppWindow className="relative -m-5 mt-10">
             <Image
               src={HeroPictureWhite}
               className="block dark:hidden"
diff --git a/components/home/showcase.tsx b/components/home/showcase.tsx
index 7256714..ff881fb 100644
--- a/components/home/showcase.tsx
+++ b/components/home/showcase.tsx
@@ -163,11 +163,11 @@ export default function Showcase() {
     <motion.div variants={variants} initial="in" animate="inactive" exit="out">
       <section
         id="showcase"
-        className="relative overflow-hidden border-t bg-background bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px] pb-28 pt-20 sm:py-32"
+        className="relative overflow-hidden border-t bg-background bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px] py-16 sm:py-32"
       >
         <ShowcaseGradient />
         <div className="container relative px-4 sm:px-6 lg:px-8">
-          <div className="flex max-w-2xl flex-col items-center justify-center md:mx-auto md:text-center xl:max-w-none">
+          <div className="flex max-w-2xl flex-col items-center justify-center text-center md:mx-auto xl:max-w-none">
             <h2
               className={cn(
                 "bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text font-heading text-3xl text-transparent sm:text-4xl md:text-5xl",
@@ -176,7 +176,7 @@ export default function Showcase() {
             >
               Eklentilerimiz
             </h2>
-            <p className="mt-6 max-w-4xl text-lg font-medium tracking-tight text-muted-foreground">
+            <p className="mt-6 max-w-4xl font-medium tracking-tight text-muted-foreground md:text-lg">
               Liman Merkezi Yönetim Sistemi&apos;nin genişletilebilir yapısı
               sayesinde birçok eklenti geliştirilmiştir. Bu eklentileri
               kullanarak Liman&apos;ı istediğiniz gibi genişletebilirsiniz.
@@ -184,7 +184,7 @@ export default function Showcase() {
               aşağıdadır.
             </p>
           </div>
-          <div className="mt-16 grid grid-cols-1 items-center gap-y-2 pt-10 sm:gap-y-6 md:mt-20 lg:grid-cols-12 lg:pt-0">
+          <div className="mt-4 grid grid-cols-1 items-center gap-y-2 pt-10 sm:mt-14 sm:gap-y-6 md:mt-20 lg:grid-cols-12 lg:pt-0">
             <div className="-mx-4 flex overflow-x-auto pb-4 sm:mx-0 sm:overflow-visible sm:pb-0 lg:col-span-5">
               <div className="relative flex gap-x-4 whitespace-nowrap px-4 sm:mx-auto sm:px-0 lg:mx-0 lg:block lg:gap-x-0 lg:gap-y-1 lg:whitespace-normal">
                 {ShowcaseItems.map((item, i) => (
@@ -199,7 +199,7 @@ export default function Showcase() {
               </div>
             </div>
             <div className="lg:col-span-7">
-              <div className="relative z-20 -ml-1 mt-10 w-[45rem] rounded-md shadow-xl shadow-blue-900/10 sm:w-auto lg:mt-0 lg:w-[67.8125rem]">
+              <div className="relative z-20 -ml-1 w-[45rem] rounded-md shadow-xl shadow-blue-900/10 sm:w-auto lg:mt-0 lg:w-[67.8125rem]">
                 <AppWindow>{ShowcaseItems[active].content}</AppWindow>
               </div>
             </div>
@@ -226,7 +226,7 @@ function ShowcaseMenuItem({
       className={cn(
         "group relative px-4 py-1 transition-all lg:p-6",
         active &&
-          "rounded-full bg-foreground lg:rounded-l-xl lg:rounded-r-none lg:bg-accent/50 lg:ring-1 lg:ring-inset lg:ring-foreground/10",
+          "rounded-full bg-foreground/20 lg:rounded-l-xl lg:rounded-r-none lg:bg-accent/50 lg:ring-1 lg:ring-inset lg:ring-foreground/10",
         !active && "hover:rounded-l-xl hover:bg-accent/30"
       )}
       onClick={onClick}
@@ -234,12 +234,12 @@ function ShowcaseMenuItem({
       <h3>
         <button
           className={cn(
-            "ui-not-focus-visible:outline-none font-heading text-lg font-semibold tracking-wide",
+            "ui-not-focus-visible:outline-none font-heading font-semibold tracking-wide md:text-lg",
             fontHeading.variable
           )}
           type="button"
         >
-          <span className="absolute inset-0 rounded-full lg:rounded-l-xl lg:rounded-r-none" />
+          <span className="absolute inset-0 rounded-full  lg:rounded-l-xl lg:rounded-r-none" />
           {title}
         </button>
       </h3>
diff --git a/components/main-nav.tsx b/components/main-nav.tsx
index 1dc6018..ed50307 100644
--- a/components/main-nav.tsx
+++ b/components/main-nav.tsx
@@ -19,7 +19,7 @@ export function MainNav({ items }: MainNavProps) {
         <Logo className="h-7 w-auto" />
       </Link>
       {items?.length ? (
-        <nav className="flex gap-6">
+        <nav className="hidden gap-6 md:flex">
           {items?.map(
             (item, index) =>
               item.href && (
diff --git a/components/ui/window.tsx b/components/ui/window.tsx
index 18592cf..f28cf16 100644
--- a/components/ui/window.tsx
+++ b/components/ui/window.tsx
@@ -16,7 +16,7 @@ export default function AppWindow({
         className
       )}
     >
-      <div className="flex h-8 items-center gap-2 border-b bg-foreground/5">
+      <div className="flex h-5 items-center gap-2 border-b bg-foreground/5 sm:h-8">
         <div className="ml-1"></div>
         <div className="h-3 w-3 rounded-full bg-red-500 transition-all hover:bg-red-600"></div>
         <div className="h-3 w-3 rounded-full bg-yellow-500 transition-all hover:bg-yellow-600"></div>
diff --git a/tailwind.config.js b/tailwind.config.js
index 9c6744a..911c289 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,7 +7,13 @@ module.exports = {
   theme: {
     container: {
       center: true,
-      padding: "2rem",
+      padding: {
+        DEFAULT: "1rem",
+        sm: "1.4rem",
+        lg: "2rem",
+        xl: "2.5rem",
+        "2xl": "3.5rem",
+      },
       screens: {
         "2xl": "1400px",
       },