diff --git a/public/locales/en/Home.json b/public/locales/en/Home.json
new file mode 100644
index 0000000..e69de29
diff --git a/public/locales/en/Navbar.json b/public/locales/en/Navbar.json
new file mode 100644
index 0000000..e69de29
diff --git a/public/locales/est/Footer.json b/public/locales/est/Footer.json
new file mode 100644
index 0000000..e69de29
diff --git a/public/locales/est/Home.json b/public/locales/est/Home.json
new file mode 100644
index 0000000..e69de29
diff --git a/public/locales/est/Navbar.json b/public/locales/est/Navbar.json
new file mode 100644
index 0000000..e69de29
diff --git a/src/app.css b/src/app.css
index 7600bd8..5e57d80 100644
--- a/src/app.css
+++ b/src/app.css
@@ -98,30 +98,6 @@ body {
   font-size: var(--fs-lg);
 }
 
-/* Container pattern */
-.container {
-  width: 100%;
-  max-width: var(--content-max);
-
-  padding-left: var(--site-padding);
-  padding-right: var(--site-padding);
-}
-
-/* Responsive helpers - mobile by default; desktop media queries adjust naturally */
-@media (min-width: 768px) {
-  .container {
-    padding-left: calc(var(--site-padding) * 1.2);
-    padding-right: calc(var(--site-padding) * 1.2);
-  }
-}
-@media (min-width: 1024px) {
-  .container {
-    padding-left: calc(var(--site-padding) * 1.5);
-    padding-right: calc(var(--site-padding) * 1.5);
-  }
-}
-
-
 /* Basic link & button defaults that components inherit */
 a {
   color: var(--color-primary);
@@ -154,30 +130,6 @@ button:focus {
   outline-offset: 2px;
 }
 
-/* Card pattern components can use .card */
-.card {
-  background: var(--card-bg);
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-1);
-  border: 1px solid var(--color-border);
-  padding: var(--space-4);
-}
-
-/* Stacking helpers: use .stack to avoid writing margins for children */
-.stack {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-3);
-}
-.stack--tight {
-  gap: var(--space-2);
-}
-.inline {
-  display: inline-flex;
-  gap: var(--space-2);
-  align-items: center;
-}
-
 /* Simple responsive grid that adapts to available width */
 .grid {
   display: grid;
diff --git a/src/components/Button.svelte b/src/components/Button.svelte
index 5ad8933..27207d3 100644
--- a/src/components/Button.svelte
+++ b/src/components/Button.svelte
@@ -1,39 +1,22 @@
 <script>
   export let onClick = () => {};
-  export let border = false;
-  export let textAlign = "left";
-  export let whiteSpace = "nowrap";
-  export let borderRadius = "8px";
+  export let buttonHoverStyle = "";
+
+  let isHovered = false;
 </script>
 
-<button 
-  onclick={onClick} 
-  class="btn" 
-  class:borderless={!border} 
-  style={`text-align: ${textAlign}; white-space: ${whiteSpace}; border-radius: ${borderRadius};`}
-  {...$$restProps}
+<button
+  on:click={onClick}
+  on:mouseenter={() => (isHovered = true)}
+  on:mouseleave={() => (isHovered = false)}
+  class={`btn border-[1.5px] px-5 py-2.5 font-medium cursor-pointer flex items-center gap-2 whitespace-nowrap ${$$restProps.class}`}
+  style={isHovered && buttonHoverStyle ? buttonHoverStyle : null}
 >
   <slot />
 </button>
 
 <style>
   .btn {
-    background: var(--white);
-    color: var(--black);
-    border: 1.5px solid transparent;
-    padding: 0.6em 1.2em;
-    font-weight: 500;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: 0.5em;
-  }
-
-  .btn:not(.borderless) {
-    border-color: var(--orange);
-  }
-
-  .btn:hover {
-    background: var(--orange);
+    transition: background-color 0.2s ease, color 0.2s ease;
   }
 </style>
diff --git a/src/components/Dropdown.svelte b/src/components/Dropdown.svelte
index 41499e0..d22f471 100644
--- a/src/components/Dropdown.svelte
+++ b/src/components/Dropdown.svelte
@@ -2,8 +2,9 @@
   import Button from "./Button.svelte";
 
   export let name = "";
-  export let border = false;
-  export let borderRadius = "8px";
+  export let buttonClass = "";
+  export let panelClassName = "";
+  export let buttonHoverStyle = "";
 
   let isOpen = false;
 
@@ -21,7 +22,7 @@
 </script>
 
 <div class="relative inline-block" on:focusout={handleFocusOut}>
-  <Button borderRadius={borderRadius} onClick={toggle} border={border}>
+  <Button onClick={toggle} class={buttonClass} {buttonHoverStyle}>
     {name}
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -41,10 +42,11 @@
   </Button>
 
   <div
-    class="absolute mt-2 rounded-md shadow-lg bg-white ring-1 ring-black/5 overflow-hidden flex flex-col"
-    style="border-radius: {borderRadius}"
+    class="{panelClassName} absolute mt-2 rounded-md shadow-lg overflow-visible flex flex-col"
     style:visibility={isOpen ? "visible" : "hidden"}
   >
-    <slot />
+    <div>
+      <slot />
+    </div>
   </div>
 </div>
diff --git a/src/components/FeatureCard.svelte b/src/components/FeatureCard.svelte
deleted file mode 100644
index 502abd9..0000000
--- a/src/components/FeatureCard.svelte
+++ /dev/null
@@ -1,146 +0,0 @@
-<script>
-  export let title = "";
-  export let description = "";
-  export let icon = null;
-  export let href = "";
-  export let variant = "default"; // 'default' | 'elevated' | 'bordered' | 'glass'
-  export let iconColor = "var(--orange)";
-  export let className = "";
-
-  const variantClasses = {
-    default: "card-default",
-    elevated: "card-elevated",
-    bordered: "card-bordered",
-    glass: "card-glass",
-  };
-</script>
-
-{#if href}
-  <a {href} class={`feature-card ${variantClasses[variant]} ${className}`}>
-    {#if icon}
-      <div class="feature-icon" style="color: {iconColor}">
-        <svelte:component this={icon} size={32} strokeWidth={1.5} />
-      </div>
-    {/if}
-    {#if title}
-      <h3 class="feature-title">{title}</h3>
-    {/if}
-    {#if description}
-      <p class="feature-description">{description}</p>
-    {/if}
-    <div class="feature-content">
-      <slot />
-    </div>
-  </a>
-{:else}
-  <div class={`feature-card ${variantClasses[variant]} ${className}`}>
-    {#if icon}
-      <div class="feature-icon" style="color: {iconColor}">
-        <svelte:component this={icon} size={32} strokeWidth={1.5} />
-      </div>
-    {/if}
-    {#if title}
-      <h3 class="feature-title">{title}</h3>
-    {/if}
-    {#if description}
-      <p class="feature-description">{description}</p>
-    {/if}
-    <div class="feature-content">
-      <slot />
-    </div>
-  </div>
-{/if}
-
-<style>
-  .feature-card {
-    position: relative;
-    padding: var(--space-5);
-    border-radius: var(--radius-lg);
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    display: block;
-    text-decoration: none;
-    color: inherit;
-  }
-
-  .feature-card:hover {
-    transform: translateY(-4px);
-  }
-
-  a.feature-card:hover {
-    text-decoration: none;
-  }
-
-  .card-default {
-    background: var(--white);
-    border: 1px solid var(--gray-200);
-  }
-
-  .card-default:hover {
-    box-shadow: var(--shadow-2);
-    border-color: var(--orange);
-  }
-
-  .card-elevated {
-    background: var(--white);
-    box-shadow: var(--shadow-2);
-    border: 1px solid transparent;
-  }
-
-  .card-elevated:hover {
-    box-shadow: var(--shadow-3);
-    border-color: var(--orange);
-  }
-
-  .card-bordered {
-    background: transparent;
-    border: 2px solid var(--gray-200);
-  }
-
-  .card-bordered:hover {
-    border-color: var(--orange);
-    background: var(--gray-50);
-  }
-
-  .card-glass {
-    background: rgba(255, 255, 255, 0.7);
-    backdrop-filter: blur(10px);
-    border: 1px solid rgba(255, 255, 255, 0.3);
-  }
-
-  .card-glass:hover {
-    background: rgba(255, 255, 255, 0.9);
-    box-shadow: var(--shadow-glow);
-  }
-
-  .feature-icon {
-    margin-bottom: var(--space-3);
-    display: inline-flex;
-  }
-
-  .feature-title {
-    font-size: var(--fs-xl);
-    font-weight: 700;
-    margin-bottom: var(--space-2);
-    color: var(--black);
-  }
-
-  .feature-description {
-    color: var(--gray-800);
-    line-height: 1.6;
-    margin-bottom: var(--space-3);
-  }
-
-  .feature-content {
-    margin-top: var(--space-3);
-  }
-
-  @media (max-width: 768px) {
-    .feature-card {
-      padding: var(--space-4);
-    }
-
-    .feature-title {
-      font-size: var(--fs-lg);
-    }
-  }
-</style>
diff --git a/src/components/index.js b/src/components/index.js
index 8b4d356..69128f0 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -4,8 +4,6 @@ export { default as Stack } from './layout/Stack.svelte'
 export { default as Grid } from './layout/Grid.svelte'
 export { default as Center } from './layout/Center.svelte'
 export { default as Section } from './layout/Section.svelte'
-export { default as FullWidthBanner } from './layout/FullWidthBanner.svelte'
 
 export { default as Button } from './Button.svelte'
 export { default as Dropdown } from './Dropdown.svelte'
-export { default as FeatureCard } from './FeatureCard.svelte'
diff --git a/src/components/layout/Card.svelte b/src/components/layout/Card.svelte
index 2e2a0d1..e1f2e90 100644
--- a/src/components/layout/Card.svelte
+++ b/src/components/layout/Card.svelte
@@ -1,12 +1,88 @@
-<!--
-A simple presentational container that renders a `div` with the `card` class.
--->
-
 <script>
+  export let href = "";
+  export let variant = "default"; // 'default' | 'animated' | 'animated-neutral' | 'glass'
   export let className = "";
-  export let background = "var(--off-white)";
+
+  const variantClasses = {
+    default: "card-default",
+    animated: "card-animated",
+    "animated-neutral": "card-animated-neutral",
+    glass: "card-glass",
+  };
 </script>
 
-<div class={`card ${className}`} style="background: {background}">
-  <slot />
-</div>
+{#if href}
+  <a {href} class={`card ${variantClasses[variant]} ${className}`}>
+    <slot />
+  </a>
+{:else}
+  <div class={`card ${variantClasses[variant]} ${className}`}>
+    <slot />
+  </div>
+{/if}
+
+<style>
+  .card {
+    position: relative;
+    padding: var(--space-5);
+    border-radius: var(--radius-lg);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    display: block;
+    text-decoration: none;
+    color: inherit;
+  }
+
+  .card:hover {
+    transform: translateY(-4px);
+  }
+
+  a.card:hover {
+    text-decoration: none;
+  }
+
+  .card-default {
+    background: var(--white);
+    border: 2px solid var(--gray-200);
+  }
+
+  .card-default:hover {
+    transform: none;
+  }
+
+  .card-animated {
+    background: transparent;
+    border: 2px solid var(--gray-200);
+  }
+
+  .card-animated:hover {
+    border-color: var(--orange);
+    background: var(--gray-50);
+  }
+
+  .card-animated-neutral {
+    background: transparent;
+    border: 2px solid var(--gray-200);
+  }
+
+  .card-animated-neutral:hover {
+    background: var(--gray-50);
+  }
+
+  .card-glass {
+    background: rgba(255, 255, 255, 0.85);
+    backdrop-filter: blur(20px) saturate(180%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.12);
+  }
+
+  .card-glass:hover {
+    transform: none;
+  }
+
+  @media (max-width: 768px) {
+    .card {
+      padding: var(--space-4);
+    }
+  }
+</style>
diff --git a/src/components/layout/Container.svelte b/src/components/layout/Container.svelte
index 8c6e8bb..e1410f2 100644
--- a/src/components/layout/Container.svelte
+++ b/src/components/layout/Container.svelte
@@ -7,9 +7,10 @@ projected via the default slot.
 
 <script>
   export let maxWidth = false; // true removes max-width
+  export let center = true; // false prevents centering and removes horizontal padding
   export let className = "";
 </script>
 
-<div class={`container ${maxWidth ? "container--fluid" : ""} ${className}`}>
+<div class="w-full {center ? 'px-4 md:px-6 lg:px-8' : ''} {maxWidth ? '' : 'max-w-[1200px]'} {center ? 'mx-auto' : ''} {className}">
   <slot />
 </div>
diff --git a/src/components/layout/FullWidthBanner.svelte b/src/components/layout/FullWidthBanner.svelte
deleted file mode 100644
index 29fa42e..0000000
--- a/src/components/layout/FullWidthBanner.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<!--
-Full-width colored section with configurable background and padding.
-Content is projected via the default slot.
--->
-
-<script>
-  export let background = "var(--orange)";
-  export let paddingX = "var(--site-padding)";
-  export let paddingY = "var(--space-4)";
-  export let className = "";
-</script>
-
-<div
-  class="w-screen relative left-1/2 right-1/2 -ml-[50vw] -mr-[50vw] flex justify-center {className}"
-  style="background: {background}; padding: {paddingY} {paddingX};"
->
-  <slot />
-</div>
\ No newline at end of file
diff --git a/src/components/layout/Grid.svelte b/src/components/layout/Grid.svelte
index 4dc0d51..d9b6e59 100644
--- a/src/components/layout/Grid.svelte
+++ b/src/components/layout/Grid.svelte
@@ -11,8 +11,8 @@ spacing. Content is projected into the default slot.
 </script>
 
 <div
-  class={`grid ${className}`}
-  style={`grid-template-columns: repeat(auto-fit, minmax(${min}, 1fr)); gap: ${gap};`}
+  class="grid {className}"
+  style="grid-template-columns: repeat(auto-fit, minmax({min}, 1fr)); gap: {gap};"
 >
   <slot />
 </div>
diff --git a/src/components/layout/Section.svelte b/src/components/layout/Section.svelte
index b0f7f4c..9d68af1 100644
--- a/src/components/layout/Section.svelte
+++ b/src/components/layout/Section.svelte
@@ -7,9 +7,9 @@
 
   const paddingClasses = {
     none: "py-0",
-    small: "py-section-sm",
-    normal: "py-section",
-    large: "py-section-lg",
+    small: "py-8",
+    normal: "py-12 max-md:py-8",
+    large: "py-[clamp(3rem,8vw,6rem)] max-md:py-12",
   };
 
   // Convert background to appropriate CSS value
@@ -26,59 +26,10 @@
 
 <section
   {id}
-  class={`section ${paddingClasses[padding]} ${className}`}
+  class="w-full relative {paddingClasses[padding]} {className}"
   style={backgroundStyle ? `background: ${backgroundStyle};` : ""}
 >
-  <div class="section-inner" class:full-width={fullWidth}>
+  <div class="{fullWidth ? '' : 'max-w-[1200px]'} mx-auto px-(--site-padding)">
     <slot />
   </div>
 </section>
-
-<style>
-  .section {
-    width: 100%;
-    position: relative;
-  }
-
-  .section-inner {
-    max-width: var(--content-max);
-    margin: 0 auto;
-    padding: 0 var(--site-padding);
-  }
-
-  .section-inner.full-width {
-    max-width: none;
-  }
-
-  .py-0 {
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-
-  .py-section-sm {
-    padding-top: var(--space-5);
-    padding-bottom: var(--space-5);
-  }
-
-  .py-section {
-    padding-top: var(--space-6);
-    padding-bottom: var(--space-6);
-  }
-
-  .py-section-lg {
-    padding-top: clamp(3rem, 8vw, 6rem);
-    padding-bottom: clamp(3rem, 8vw, 6rem);
-  }
-
-  @media (max-width: 768px) {
-    .py-section {
-      padding-top: var(--space-5);
-      padding-bottom: var(--space-5);
-    }
-
-    .py-section-lg {
-      padding-top: var(--space-6);
-      padding-bottom: var(--space-6);
-    }
-  }
-</style>
diff --git a/src/components/layout/Stack.svelte b/src/components/layout/Stack.svelte
index 90d8e62..3eb4465 100644
--- a/src/components/layout/Stack.svelte
+++ b/src/components/layout/Stack.svelte
@@ -8,6 +8,6 @@ A simple stack/column layout that stacks children vertically.
   export let className = "";
 </script>
 
-<div class={`stack ${className}`} style={`gap: ${gap}; align-items: ${align};`}>
+<div class="flex flex-col {className}" style="gap: {gap}; align-items: {align};">
   <slot />
 </div>
diff --git a/src/layout/Footer.svelte b/src/layout/Footer.svelte
index 5f45e84..48ba319 100644
--- a/src/layout/Footer.svelte
+++ b/src/layout/Footer.svelte
@@ -8,24 +8,49 @@ import {
 
 </script>
 
-<Section padding="small">
-    <h3 class="text-3xl" style="font-weight: 300; padding-left: var(--site-padding); padding-bottom: var(--space-4);">MTÜ Lapikud</h3>
+<Section background="off-black" className="text-white">
     <Grid>
-        <Container maxWidth={true}>
-            <address class="not-italic">
-                Aadress: <a style="color: var(--orange)" href="https://maps.app.goo.gl/1pCDMVNaMD29G7y78">Akadeemia tee 5, 12616 Tallinn, Eesti</a>
-                <br/>
-                E-post: <a style="color: var(--orange)" href="mailto:lapikud@lapikud.ee">lapikud@lapikud.ee</a>
-                <br/>
-                Tel: <a style="color: var(--orange)" href="tel:+37258160799">+372 58 160 799</a>
-                <br/>
-                Messenger: <a style="color: var(--orange)" href="https://m.me/Lapikud" target="_blank" rel="noopener noreferrer">m.me/Lapikud</a>
-            </address>
-            <p>
-
-            </p>
+        <div>
+            <h3 class="text-3xl font-light" style="padding-bottom: var(--space-4);">MTÜ Lapikud</h3>
+            <Container center={false}>
+                <address class="not-italic" style="padding-bottom: var(--space-4);">
+                    Aadress: <a href="https://maps.app.goo.gl/1pCDMVNaMD29G7y78" style="color: var(--orange)">Akadeemia tee 5, 12616 Tallinn, Eesti</a>
+                    <br/>
+                    E-post: <a href="mailto:lapikud@lapikud.ee" style="color: var(--orange)">lapikud@lapikud.ee</a>
+                    <br/>
+                    Tel: <a href="tel:+37258160799" style="color: var(--orange)">+372 58 160 799</a>
+                    <br/>
+                    Messenger: <a href="https://m.me/Lapikud" target="_blank" rel="noopener noreferrer" style="color: var(--orange)">m.me/Lapikud</a>
+                </address>
+                <div>
+                    Reg. kood: <a href="https://ariregister.rik.ee/est/company/80167145/" style="color: var(--orange)">80167145</a>
+                    <br/>
+                    Swedbank EE812200221019551756
+                </div>
+            </Container>
+        </div>
+        <div>
+        <Container>
+            <h3 class="text-3xl font-light flex justify-center" style="padding-bottom: var(--space-4);">Sotsiaalmeedia</h3>
+            <div class="flex items-center justify-center" style="gap: var(--space-4);">
+                <a href="https://www.instagram.com/lapikud/" target="_blank" rel="noopener noreferrer" aria-label="Instagram" class="transition-opacity duration-200">
+                    <svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
+                    </svg>
+                </a>
+                <a href="https://www.facebook.com/Lapikud" target="_blank" rel="noopener noreferrer" aria-label="Facebook" class="transition-opacity duration-200">
+                    <svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
+                    </svg>
+                </a>
+                <a href="https://github.com/lapikud" target="_blank" rel="noopener noreferrer" aria-label="GitHub" class="transition-opacity duration-200">
+                    <svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+                    </svg>
+                </a>
+            </div>
         </Container>
-        <Container></Container>
+        </div>
     </Grid>
     <Center><small style="color: var(--orange); padding-top: var(--space-6);">© 2026 MTÜ Lapikud</small></Center>
 </Section>
\ No newline at end of file
diff --git a/src/layout/Navbar.svelte b/src/layout/Navbar.svelte
index 1d2fac0..78481dc 100644
--- a/src/layout/Navbar.svelte
+++ b/src/layout/Navbar.svelte
@@ -18,47 +18,54 @@
   import Trophy from "lucide-svelte/icons/trophy";
 </script>
 
-<Section padding="small">
+<Section className="text-white" background="off-black" padding="small">
   <Grid>
     <nav class="z-10 flex gap-4 justify-end text-xl">
-        <Dropdown borderRadius="4px" name={$text.nav.about} variant="borderless">
-          <Button borderRadius="4px" onClick={() => navigate("/mis-teeme")}
+        <Dropdown
+          name={$text.nav.about}
+          buttonClass="rounded-[5px]"
+          buttonHoverStyle="background-color:var(--orange); color:var(--black)"
+          panelClassName="bg-[var(--off-black)]"
+        >
+          <Button class="rounded-[5px] bg-transparent" buttonHoverStyle="color:var(--orange)" onClick={() => navigate("/mis-teeme")}
             >{$text.nav.aboutPages.info}</Button
           >
-          <Button borderRadius="4px" onClick={() => navigate("/liitu-meiega")}
+          <Button class="rounded-[5px] bg-transparent" buttonHoverStyle="color:var(--orange)" onClick={() => navigate("/liitu-meiega")}
             ><Bot />{$text.nav.aboutPages.join}</Button
           >
-          <Button borderRadius="4px" onClick={() => navigate("/mentorid")}
+          <Button class="rounded-[5px] bg-transparent" buttonHoverStyle="color:var(--orange)" onClick={() => navigate("/mentorid")}
             ><HandHeart />{$text.nav.aboutPages.mentors}</Button
           >
-          <Button borderRadius="4px" onClick={() => navigate("/juhatus")}
+          <Button class="rounded-[5px] bg-transparent" buttonHoverStyle="color:var(--orange)" onClick={() => navigate("/juhatus")}
             ><Lectern />{$text.nav.aboutPages.board}</Button
           >
         </Dropdown>
-        <Dropdown borderRadius="4px" name={$text.nav.events} variant="borderless">
-          <Button borderRadius="4px" onClick={() => navigate("/kalender")}
+        <Dropdown
+          name={$text.nav.events}
+          buttonClass="rounded-[5px]"
+          buttonHoverStyle="background-color:var(--orange); color:var(--black)"
+          panelClassName="bg-[var(--off-black)]"
+        >
+          <Button class="rounded-[5px] bg-transparent" buttonHoverStyle="color:var(--orange)" onClick={() => navigate("/kalender")}
             ><CalendarClock />{$text.nav.eventsPages.calendar}</Button
           >
-          <Button borderRadius="4px"
-            onClick={() => navigate("https://asikarikas.ee/", { external: true })}
+          <Button class="rounded-[5px] bg-transparent" buttonHoverStyle="color:var(--orange)" onClick={() => navigate("https://asikarikas.ee/", { external: true })}
             ><Trophy />ASI Karikas</Button
           >
-          <Button borderRadius="4px" onClick={() => navigate("/mentorid")}
+          <Button class="rounded-[5px] bg-transparent" buttonHoverStyle="color:var(--orange)" onClick={() => navigate("/mentorid")}
             ><Presentation />{$text.nav.eventsPages.workshops}</Button
           >
-          <Button borderRadius="4px" onClick={() => navigate("/rebased")}
+          <Button class="rounded-[5px] bg-transparent" buttonHoverStyle="color:var(--orange)" onClick={() => navigate("/rebased")}
             ><Swords />{$text.nav.eventsPages.fresh}</Button
           >
-          <Button borderRadius="4px"
-            onClick={() =>
-              navigate("https://remondikohvik.lapikud.ee/", { external: true })}
+          <Button class="rounded-[5px] bg-transparent" buttonHoverStyle="color:var(--orange)" onClick={() => navigate("https://remondikohvik.lapikud.ee/", { external: true })}
             ><Coffee />{$text.nav.eventsPages.repair}</Button
           >
         </Dropdown>
-        <Button borderRadius="4px" onClick={() => navigate("/kontakt")}
+        <Button buttonHoverStyle="background-color:var(--orange); color:var(--black)" class="rounded-[5px]" onClick={() => navigate("/kontakt")}
           >{$text.nav.contact}
         </Button>
-        <Button borderRadius="4px" onClick={() => navigate("/helpdesk")}
+        <Button buttonHoverStyle="background-color:var(--orange); color:var(--black)" class="rounded-[5px]" onClick={() => navigate("/helpdesk")}
           >{$text.nav.helpdesk}
         </Button>
     </nav>
diff --git a/src/routes/Home.svelte b/src/routes/Home.svelte
index e067756..9e4cd6b 100644
--- a/src/routes/Home.svelte
+++ b/src/routes/Home.svelte
@@ -1,13 +1,11 @@
 <script>
   import {
-    Button,
     Section,
     Grid,
     Card,
     Center,
-    FeatureCard,
+    Container,
   } from "$components";
-  import { navigate } from "$lib";
   import { onMount } from "svelte";
   
   // Import Lucide icons
@@ -40,55 +38,55 @@
 
 <Section>
   <Grid gap="var(--space-5)">
-    <FeatureCard
-      variant="bordered"
-      href="/liitu-meiega"
-      icon={Users}
-      iconColor="var(--orange)"
-      title="Tudengile"
-      description="Tule arenda oma oskuseid ja saa ägedaid sõpru! Omanda praktilist kogemust reaalsetest projektidest."
-    >
+    <Card variant="animated-neutral" href="/liitu-meiega">
+      <div class="feature-icon" style="color: var(--orange)">
+        <Users size={32} strokeWidth={1.5} />
+      </div>
+      <h3 class="feature-title">Tudengile</h3>
+      <p class="feature-description">
+        Tule arenda oma oskuseid ja saa ägedaid sõpru! Omanda praktilist kogemust reaalsetest projektidest.
+      </p>
       <div style="color: var(--orange)" class="mt-4 font-semibold flex items-center gap-2">
         Liitu meiega <ArrowRight size={16} />
       </div>
-    </FeatureCard>
+    </Card>
 
-    <FeatureCard
-      variant="bordered"
-      href="/helpdesk"
-      icon={Wrench}
-      iconColor="var(--orange)"
-      title="Helpdesk"
-      description="HELPDESK on MTÜ Lapikute poolt pakutav arvutiabiteenus. Teenus on suunatud tudengitele, õppejõududele ning kõikidele huvilistele."
-    >
+    <Card variant="animated-neutral" href="/helpdesk">
+      <div class="feature-icon" style="color: var(--orange)">
+        <Wrench size={32} strokeWidth={1.5} />
+      </div>
+      <h3 class="feature-title">Helpdesk</h3>
+      <p class="feature-description">
+        HELPDESK on MTÜ Lapikute poolt pakutav arvutiabiteenus. Teenus on suunatud tudengitele, õppejõududele ning kõikidele huvilistele.
+      </p>
       <div style="color: var(--orange)" class="mt-4 font-semibold flex items-center gap-2">
         Vaata teenuseid <ArrowRight size={16} />
       </div>
-    </FeatureCard>
+    </Card>
 
-    <FeatureCard
-      variant="bordered"
-      href="/ourwork"
-      icon={HeartHandshake}
-      iconColor="var(--orange)"
-      title="Ettevõttele"
-      description="Aitame sinu ideed ellu viia! Meie kogenud tudengid on valmis teie projekte realiseerima."
-    >
+    <Card variant="animated-neutral" href="/ourwork">
+      <div class="feature-icon" style="color: var(--orange)">
+        <HeartHandshake size={32} strokeWidth={1.5} />
+      </div>
+      <h3 class="feature-title">Ettevõttele</h3>
+      <p class="feature-description">
+        Aitame sinu ideed ellu viia! Meie kogenud tudengid on valmis teie projekte realiseerima.
+      </p>
       <div style="color: var(--orange)" class="mt-4 font-semibold flex items-center gap-2">
         Tehtud tööd <ArrowRight size={16} />
       </div>
-    </FeatureCard>
+    </Card>
   </Grid>
 </Section>
 
 <!-- What We Do Section -->
 <Section>
   <Grid gap="var(--space-4)">
-    <Card>
+    <Card variant="glass">
       <h2 class="pb-4 text-4xl font-bold">Mida me loome</h2>
       <p>Meie põhieesmärgiks on Tallinna Tehnikaülikooli IT tudengitele erialase lisandväärtuse loomine. Kaasame tudengeid praktilistesse lahendustesse, kus saab ideid reaalselt ellu viia ja oma oskusi päriselt kasutada. Meie projektidest kasvavad välja huvitavad ja tarvilikud lõputööd, millel on selge praktiline väärtus.</p>
     </Card>
-    <Card>
+    <Card variant="glass">
       <h2 class="pb-4 text-4xl font-bold">Keda ja kuidas kaasame</h2>
       <p>Pakume nutikatele ja motiveeritud tudengitele võimalust saada meie juures esimene töökogemus ning arendada end meeskonnas töötades. Lapikud ei ole ainult IT-tudengite organisatsioon, kaasame projektidesse ka majandusteaduskonna tudengeid, et tehniliste lahenduste kõrval oleks esindatud ka äriline vaade.</p>
     </Card>
@@ -98,12 +96,12 @@
 <!-- Partners Section -->
 <Section>
   <div class="text-center mb-12">
-    <h2 class="text-3xl">
+    <h2 class="text-5xl">
       Koostööpartnerid
     </h2>
   </div>
   
-  <Grid gap="var(--space-4)">
+  <Center className="flex-wrap">
     {#each partners as partner}
       {#if partner.url}
         <a href={partner.url} target="_blank" rel="noopener noreferrer" class="partner-item" title={partner.name}>
@@ -123,19 +121,36 @@
         </div>
       {/if}
     {/each}
-  </Grid>
+  </Center>
 </Section>
 
 <style>
+  .feature-icon {
+    margin-bottom: var(--space-3);
+    display: inline-flex;
+  }
+
+  .feature-title {
+    font-size: var(--fs-xl);
+    font-weight: 700;
+    margin-bottom: var(--space-2);
+    color: var(--black);
+  }
+
+  .feature-description {
+    color: var(--gray-800);
+    line-height: 1.6;
+    margin-bottom: var(--space-3);
+  }
+
   .partner-item {
     display: flex;
     align-items: center;
     justify-content: center;
+    text-decoration: none;
     padding: var(--space-3);
     transition: all 0.3s ease;
-    text-decoration: none;
-    width: 100%;
-    height: 100px;
+    height: 170px;
   }
 
   a.partner-item:hover {
@@ -143,9 +158,9 @@
   }
 
   .partner-item img {
-    max-width: 100%;
-    max-height: 60px;
+    width: auto;
     object-fit: contain;
+    max-height: 150px;
     transition: all 0.3s ease;
   }