diff --git a/index.html b/index.html
index c4f7c68..0bf2a42 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,9 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Know Nepal</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet" />
   </head>
   <body>
     <div id="root"></div>
diff --git a/src/components/app/footer.tsx b/src/components/app/footer.tsx
index e85caa7..636b293 100644
--- a/src/components/app/footer.tsx
+++ b/src/components/app/footer.tsx
@@ -1,14 +1,11 @@
-/**
- *
- */
 export default function AppFooter() {
   return (
-    <footer className="px-2 py-5 md:p-10">
-      <div className="mb-5 w-full border-b border-gray-300" />
-
-      <p className="text-center">
-        © {new Date().getFullYear()} Know Nepal. All rights reserved.
-      </p>
+    <footer className="border-t border-white/5 px-4 py-8 md:px-8">
+      <div className="mx-auto max-w-7xl">
+        <p className="text-center text-sm text-gray-600">
+          © {new Date().getFullYear()} Know Nepal. All rights reserved.
+        </p>
+      </div>
     </footer>
   );
 }
diff --git a/src/components/app/navbar.tsx b/src/components/app/navbar.tsx
index 34d7b5e..15ea094 100644
--- a/src/components/app/navbar.tsx
+++ b/src/components/app/navbar.tsx
@@ -1,28 +1,39 @@
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
+
+const navLinks = [
+  { to: "/tech-companies", label: "Tech Companies" },
+  { to: "/government-websites", label: "Government Websites" },
+];
 
-/**
- *
- */
 export default function AppNavbar() {
-  return (
-    <nav className="flex justify-between px-2 py-7 md:px-10">
-      <Link to="/" className="font-sans text-xl uppercase">
-        <div className="flex items-center">
-          <img src="/knowNepalLogo.png" alt="" className="mr-2 h-8 w-8" />
-          Know Nepal
-        </div>
-      </Link>
+  const { pathname } = useLocation();
 
-      <div className="flex gap-x-5">
-        <Link to="/tech-companies" className="group">
-          <p>Tech Companies</p>
-          <div className="mt-[2px] w-0 border-b-2 border-highlight transition-all duration-300 group-hover:w-full" />
+  return (
+    <nav className="sticky top-0 z-50 border-b border-white/5 bg-[#0F0913]/90 backdrop-blur-xl">
+      <div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-4 md:px-8">
+        <Link
+          to="/"
+          className="flex items-center gap-2.5 font-display text-lg font-semibold tracking-tight"
+        >
+          <img src="/knowNepalLogo.png" alt="Know Nepal" className="h-8 w-8" />
+          <span>Know Nepal</span>
         </Link>
 
-        <Link to="/government-websites" className="group">
-          <p>Government Websites</p>
-          <div className="mt-[2px] w-0 border-b-2 border-highlight transition-all duration-300 group-hover:w-full" />
-        </Link>
+        <div className="flex items-center gap-1">
+          {navLinks.map(({ to, label }) => (
+            <Link
+              key={to}
+              to={to}
+              className={`rounded-lg px-4 py-2 text-sm font-medium transition-all duration-200 ${
+                pathname === to
+                  ? "bg-primary-300/40 text-primary-100"
+                  : "text-gray-400 hover:bg-white/5 hover:text-gray-100"
+              }`}
+            >
+              {label}
+            </Link>
+          ))}
+        </div>
       </div>
     </nav>
   );
diff --git a/src/index.css b/src/index.css
index 5ace8e0..e2202b1 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,6 +2,26 @@
 @tailwind components;
 @tailwind utilities;
 
-body {
-  @apply bg-[#0F0913] text-[#EFEDEF];
+@layer base {
+  body {
+    @apply bg-[#0F0913] font-sans text-[#EFEDEF] antialiased;
+  }
+}
+
+@layer components {
+  .card {
+    @apply rounded-xl border border-white/5 bg-primary-400 p-5 shadow-card transition-all duration-300 hover:scale-[1.01] hover:border-primary-200/20 hover:shadow-card-hover;
+  }
+
+  .search-input {
+    @apply w-full max-w-lg rounded-full border border-white/10 bg-white/5 px-5 py-3 text-gray-200 placeholder:text-gray-500 transition-all duration-200 focus:border-primary-200/30 focus:bg-white/10 focus:outline-none focus:ring-2 focus:ring-primary-200/20;
+  }
+
+  .btn-highlight {
+    @apply inline-flex items-center rounded-full bg-highlight px-5 py-2.5 text-sm font-semibold text-gray-900 transition-all duration-200 hover:scale-105 hover:bg-yellow-300 active:scale-95;
+  }
+
+  .btn-outline {
+    @apply inline-flex items-center rounded-full border border-white/10 px-5 py-2.5 text-sm font-medium text-gray-300 transition-all duration-200 hover:border-white/20 hover:text-white;
+  }
 }
diff --git a/src/layouts/default.layout.tsx b/src/layouts/default.layout.tsx
index 5007909..8c8ba48 100644
--- a/src/layouts/default.layout.tsx
+++ b/src/layouts/default.layout.tsx
@@ -1,21 +1,17 @@
 import { Outlet } from "react-router-dom";
 
-//
 import AppNavbar from "../components/app/navbar";
 import AppFooter from "../components/app/footer";
 
-/**
- *
- */
 export default function DefaultLayout() {
   return (
-    <div className="flex h-screen flex-col overflow-y-auto overflow-x-hidden">
+    <div className="flex min-h-screen flex-col overflow-x-hidden">
       <AppNavbar />
-
-      <section className="flex-grow px-2 md:px-10">
-        <Outlet />
-      </section>
-
+      <main className="flex-grow">
+        <div className="mx-auto max-w-7xl px-4 md:px-8">
+          <Outlet />
+        </div>
+      </main>
       <AppFooter />
     </div>
   );
diff --git a/src/pages/government-websites.tsx b/src/pages/government-websites.tsx
index 7a6ed48..2bdf7a1 100644
--- a/src/pages/government-websites.tsx
+++ b/src/pages/government-websites.tsx
@@ -1,12 +1,53 @@
 import { useQuery } from "@tanstack/react-query";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import Fuse from "fuse.js";
-//
+import { HiSearch, HiExternalLink } from "react-icons/hi";
+
 import { getGovernmentWebsites } from "../utils/apis";
 
-/**
- *
- */
+function getCategory(name: string): string {
+  const n = name.toLowerCase();
+  if (n.includes("ministry") || n.includes("mantralaya")) return "Ministries";
+  if (
+    n.includes("municipality") ||
+    n.includes("metropolitan") ||
+    n.includes("rural municipality") ||
+    n.includes("sub-metropolitan")
+  )
+    return "Local Government";
+  if (n.includes("pradesh") || n.includes("province"))
+    return "Province Government";
+  if (n.includes("police") || n.includes("army") || n.includes("armed"))
+    return "Security & Defense";
+  if (n.includes("court") || n.includes("judiciary")) return "Judiciary";
+  if (
+    n.includes("university") ||
+    n.includes("education") ||
+    n.includes("college") ||
+    n.includes("school") ||
+    n.includes("institute") ||
+    n.includes("hospital") ||
+    n.includes("health")
+  )
+    return "Education & Health";
+  if (
+    n.includes("bank") ||
+    n.includes("finance") ||
+    n.includes("revenue") ||
+    n.includes("customs") ||
+    n.includes("tax")
+  )
+    return "Finance & Revenue";
+  if (
+    n.includes("commission") ||
+    n.includes("parliament") ||
+    n.includes("election") ||
+    n.includes("sansad")
+  )
+    return "Constitutional Bodies";
+  return "Other Bodies";
+}
+
 export default function GovernmentWebsitesPage() {
   const { data } = useQuery({
     queryKey: ["get-government-websites"],
@@ -17,70 +58,123 @@ export default function GovernmentWebsitesPage() {
   });
 
   const [searchQuery, setSearchQuery] = useState("");
-  const fuseOptions = {
-    keys: ["name"],
-    threshold: 0.3,
-    ignoreLocation: true,
-  };
+  const [activeCategory, setActiveCategory] = useState("All");
+
+  const allItems = data || [];
 
-  const fuse = new Fuse(data, fuseOptions);
+  const allCategories = useMemo(
+    () => [...new Set(allItems.map((item) => getCategory(item.name)))].sort(),
+    [allItems],
+  );
+
+  const fuse = useMemo(
+    () =>
+      new Fuse(allItems, {
+        keys: ["name"],
+        threshold: 0.3,
+        ignoreLocation: true,
+      }),
+    [allItems],
+  );
 
-  const searchWebsites = (query: string) => {
-    const results = fuse.search(query);
-    const filteredData = results.map((result) => result.item);
-    return filteredData;
-  };
+  const afterSearch = searchQuery
+    ? fuse.search(searchQuery).map((r) => r.item)
+    : allItems;
 
-  const filteredData = searchQuery ? searchWebsites(searchQuery) : data || [];
+  const filteredData =
+    activeCategory === "All"
+      ? afterSearch
+      : afterSearch.filter((item) => getCategory(item.name) === activeCategory);
 
   return (
-    <div>
-      <p className="text-center text-3xl">Government Websites in Nepal</p>
-      <div className="my-10 flex justify-center">
-        <input
-          type="text"
-          placeholder="Search for government website..."
-          value={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
-          className="focus:ring-hightlght w-full max-w-lg rounded-sm bg-gray-800 px-3 py-2 text-gray-200 placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-highlight"
-        />
+    <div className="py-10">
+      <div className="mb-10 text-center">
+        <h1 className="font-display text-4xl font-bold tracking-tight">
+          Government Websites in Nepal
+        </h1>
+        {filteredData.length > 0 && (
+          <p className="mt-2 text-sm text-gray-500">
+            {filteredData.length}{" "}
+            {searchQuery || activeCategory !== "All"
+              ? "results found"
+              : "websites listed"}
+          </p>
+        )}
       </div>
 
-      <div className="mt-10 grid grid-cols-1 gap-2 md:grid-cols-3 md:gap-5 lg:grid-cols-4 lg:gap-10">
+      <div className="flex justify-center">
+        <div className="relative w-full max-w-lg">
+          <HiSearch
+            size={18}
+            className="pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-gray-500"
+          />
+          <input
+            type="text"
+            aria-label="Search for government website"
+            placeholder="Search for government website..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="search-input pl-11"
+          />
+        </div>
+      </div>
+
+      {/* Category tabs */}
+      <div className="mt-6 flex flex-wrap justify-center gap-2">
+        {["All", ...allCategories].map((cat) => (
+          <button
+            key={cat}
+            onClick={() => setActiveCategory(cat)}
+            className={`rounded-full border px-4 py-1.5 text-sm font-medium transition-all duration-200 ${
+              activeCategory === cat
+                ? "border-primary-200/30 bg-primary-300/40 text-primary-100"
+                : "border-white/10 text-gray-500 hover:border-white/20 hover:text-gray-300"
+            }`}
+          >
+            {cat}
+          </button>
+        ))}
+      </div>
+
+      <div className="mt-8 grid grid-cols-1 gap-4 md:grid-cols-3 lg:grid-cols-4">
         {filteredData.map((govWebsite) => (
           <div
             key={govWebsite.name}
-            className="group col-span-1 flex flex-col justify-between rounded-sm bg-primary-400 p-3 transition-all duration-200 hover:scale-[1.02] hover:bg-primary-300"
+            className="card flex flex-col items-center justify-between text-center"
           >
-            <div>
-              <div className="flex justify-center">
+            <div className="flex flex-col items-center">
+              <div className="overflow-hidden rounded-full ring-1 ring-white/10">
                 <img
                   src="/nepalLogo.png"
-                  width={96}
-                  height={96}
-                  className="h-24 w-24 rounded-full object-cover"
+                  alt={`${govWebsite.name} logo`}
+                  width={80}
+                  height={80}
+                  className="h-20 w-20 object-cover"
                 />
               </div>
 
-              <p className="my-3 flex cursor-pointer justify-center text-center text-lg group-hover:underline">
+              <span className="mt-3 rounded-full border border-white/5 bg-white/5 px-2.5 py-0.5 text-xs text-gray-500">
+                {getCategory(govWebsite.name)}
+              </span>
+
+              <h2 className="mt-2 font-display text-base font-semibold">
                 {govWebsite.name}
-              </p>
+              </h2>
 
-              <p className="my-5 text-center text-sm">
+              <p className="mt-3 text-sm leading-relaxed text-gray-400">
                 {govWebsite.description}
               </p>
             </div>
 
-            <p className="mb-3 mt-10 text-center">
-              <a
-                href={govWebsite.url}
-                rel="noopener"
-                target="_blank"
-                className="rounded-sm bg-highlight px-3 py-2 text-gray-900"
-              >
-                Visit website
-              </a>
-            </p>
+            <a
+              href={govWebsite.url}
+              rel="noopener"
+              target="_blank"
+              className="btn-highlight mt-6"
+            >
+              Visit website
+              <HiExternalLink className="ml-1.5" size={14} />
+            </a>
           </div>
         ))}
       </div>
diff --git a/src/pages/homepage.tsx b/src/pages/homepage.tsx
index 18eab9c..1ed8714 100644
--- a/src/pages/homepage.tsx
+++ b/src/pages/homepage.tsx
@@ -1,6 +1,86 @@
-/**
- *
- */
+import { Link } from "react-router-dom";
+import { HiArrowRight } from "react-icons/hi";
+import { BsBuilding, BsGlobe } from "react-icons/bs";
+
 export default function HomePage() {
-  return <p>Intro about Know Nepal</p>;
+  return (
+    <div>
+      {/* Hero */}
+      <div className="relative flex flex-col items-center py-24 text-center md:py-36">
+        <div
+          className="pointer-events-none absolute inset-0 -z-10"
+          style={{
+            background:
+              "radial-gradient(ellipse 80% 60% at 50% -10%, rgba(20,89,107,0.5) 0%, transparent 70%)",
+          }}
+        />
+
+        <span className="mb-6 inline-flex items-center rounded-full border border-primary-200/20 bg-primary-400/30 px-4 py-1.5 text-xs font-medium tracking-wide text-primary-100">
+          Your guide to Nepal's digital landscape
+        </span>
+
+        <h1 className="font-display text-5xl font-bold tracking-tight md:text-7xl">
+          Know <span className="text-primary-200">Nepal</span>
+        </h1>
+
+        <p className="mt-6 max-w-lg text-lg leading-relaxed text-gray-400">
+          Discover Nepal's tech companies and government websites — all in one
+          place, searchable and up to date.
+        </p>
+
+        <div className="mt-10 flex flex-wrap justify-center gap-4">
+          <Link to="/tech-companies" className="btn-highlight">
+            Explore Tech Companies
+            <HiArrowRight className="ml-2" />
+          </Link>
+          <Link to="/government-websites" className="btn-outline">
+            Government Websites
+          </Link>
+        </div>
+      </div>
+
+      {/* Feature cards */}
+      <div className="grid grid-cols-1 gap-5 pb-24 md:grid-cols-2">
+        <Link to="/tech-companies" className="card group">
+          <div className="flex items-start gap-4">
+            <div className="flex-shrink-0 rounded-xl bg-primary-300/30 p-3">
+              <BsBuilding size={22} className="text-primary-200" />
+            </div>
+            <div>
+              <h2 className="font-display text-xl font-semibold">
+                Tech Companies
+              </h2>
+              <p className="mt-2 text-sm leading-relaxed text-gray-400">
+                Browse Nepal's growing tech sector — from startups to
+                established firms, with contact details and social links.
+              </p>
+            </div>
+          </div>
+          <div className="mt-5 flex items-center gap-1.5 text-sm font-medium text-primary-200 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
+            Explore <HiArrowRight size={14} />
+          </div>
+        </Link>
+
+        <Link to="/government-websites" className="card group">
+          <div className="flex items-start gap-4">
+            <div className="flex-shrink-0 rounded-xl bg-primary-300/30 p-3">
+              <BsGlobe size={22} className="text-primary-200" />
+            </div>
+            <div>
+              <h2 className="font-display text-xl font-semibold">
+                Government Websites
+              </h2>
+              <p className="mt-2 text-sm leading-relaxed text-gray-400">
+                Find official Nepali government portals and services — quickly
+                navigate to the resources you need.
+              </p>
+            </div>
+          </div>
+          <div className="mt-5 flex items-center gap-1.5 text-sm font-medium text-primary-200 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
+            Explore <HiArrowRight size={14} />
+          </div>
+        </Link>
+      </div>
+    </div>
+  );
 }
diff --git a/src/pages/tech-companies.tsx b/src/pages/tech-companies.tsx
index 771fd34..6c8ddaf 100644
--- a/src/pages/tech-companies.tsx
+++ b/src/pages/tech-companies.tsx
@@ -2,7 +2,6 @@ import Fuse from "fuse.js";
 import { useEffect, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 
-//
 import {
   BsGlobe,
   BsFillTelephoneFill,
@@ -14,22 +13,15 @@ import { GrFacebook } from "react-icons/gr";
 import { FaXTwitter } from "react-icons/fa6";
 import { FiInstagram } from "react-icons/fi";
 import { MdOutlineAlternateEmail } from "react-icons/md";
-import { HiOutlineLocationMarker } from "react-icons/hi";
+import { HiOutlineLocationMarker, HiSearch } from "react-icons/hi";
 
-//
 import { getTechCompanies } from "../utils/apis";
-
-//
 import type { IApiTechCompany } from "../types/apis.types";
 
-/**
- *
- */
 export default function TechCompaniesPage() {
   const [searchTerm, setSearchTerm] = useState<string>("");
   const [filteredItems, setFilteredItems] = useState<IApiTechCompany[]>([]);
 
-  //
   const { data: companiesData } = useQuery({
     queryKey: ["get-companies-list"],
     queryFn: async () => {
@@ -38,7 +30,6 @@ export default function TechCompaniesPage() {
     initialData: [],
   });
 
-  //
   useEffect(() => {
     const fuseList = new Fuse(companiesData, {
       keys: ["name"],
@@ -53,156 +44,187 @@ export default function TechCompaniesPage() {
     setFilteredItems(finalItemList);
   }, [companiesData, searchTerm]);
 
-  //
   return (
-    <div>
-      <p className="text-center text-3xl">Tech companies in Nepal</p>
-
-      <div className="my-10 flex justify-center">
-        <input
-          value={searchTerm}
-          onChange={(e) => setSearchTerm(e.target.value)}
-          placeholder="Search for tech company"
-          className="focus:ring-hightlght w-full max-w-lg rounded-sm bg-gray-800 px-3 py-2 text-gray-200 placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-highlight"
-        />
+    <div className="py-10">
+      <div className="mb-10 text-center">
+        <h1 className="font-display text-4xl font-bold tracking-tight">
+          Tech Companies in Nepal
+        </h1>
+        {filteredItems.length > 0 && (
+          <p className="mt-2 text-sm text-gray-500">
+            {filteredItems.length}{" "}
+            {searchTerm ? "results found" : "companies listed"}
+          </p>
+        )}
+      </div>
+
+      <div className="flex justify-center">
+        <div className="relative w-full max-w-lg">
+          <HiSearch
+            size={18}
+            className="pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-gray-500"
+          />
+          <input
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            aria-label="Search for tech company"
+            placeholder="Search for tech company"
+            className="search-input pl-11"
+          />
+        </div>
       </div>
 
-      <div className="mt-10 grid grid-cols-1 gap-2 md:grid-cols-3 md:gap-5 lg:grid-cols-4 lg:gap-10">
+      <div className="mt-10 grid grid-cols-1 gap-4 md:grid-cols-3 lg:grid-cols-4">
         {filteredItems.map((company) => (
           <div
             key={company.name}
-            className="col-span-1 flex flex-col justify-between rounded-sm bg-primary-400 p-3 transition-all duration-200 hover:scale-[1.02] hover:bg-primary-300"
+            className="card flex flex-col justify-between"
           >
             <div>
               <div className="flex justify-center">
-                <img
-                  src={`https://raw.githubusercontent.com/Know-Nepal/tech-companies/main/logos/${company.logoName}`}
-                  width={96}
-                  height={96}
-                  className="h-24 w-24 rounded object-cover"
-                  onError={({ currentTarget }) => {
-                    currentTarget.onerror = null;
-                    currentTarget.src = `https://ui-avatars.com/api/?bold=true&background=random&color=ffffff&name=${company.name}`;
-                  }}
-                />
+                <div className="overflow-hidden rounded-xl ring-1 ring-white/10">
+                  <img
+                    src={`https://raw.githubusercontent.com/Know-Nepal/tech-companies/main/logos/${company.logoName}`}
+                    alt={`${company.name} logo`}
+                    width={96}
+                    height={96}
+                    className="h-24 w-24 object-cover"
+                    onError={({ currentTarget }) => {
+                      currentTarget.onerror = null;
+                      currentTarget.src = `https://ui-avatars.com/api/?bold=true&background=random&color=ffffff&name=${company.name}`;
+                    }}
+                  />
+                </div>
               </div>
 
-              {/*  */}
-              <p className="mb-7 mt-3 cursor-default text-center text-lg underline">
+              <p className="mb-6 mt-4 cursor-default text-center font-display text-base font-semibold">
                 {company.name}
               </p>
 
-              {/* Address */}
-              <div className="my-3 flex gap-x-2 text-sm">
-                <HiOutlineLocationMarker size={20} className="flex-shrink-0" />
-                <p>{company.location}</p>
-              </div>
-
-              {/* Website */}
-              <div className="my-3 flex gap-x-2 text-sm">
-                <BsGlobe size={18} className="flex-shrink-0" />
-                <a
-                  rel="noopener"
-                  target="_blank"
-                  href={company.website}
-                  className="hover:underline"
-                >
-                  {company.website}
-                </a>
-              </div>
-
-              {/* Email */}
-              <div className="my-3 flex gap-x-2 text-sm">
-                <MdOutlineAlternateEmail size={20} className="flex-shrink-0" />
-                <a href={`mailto:${company.email}`} className="hover:underline">
-                  {company.email}
-                </a>
-              </div>
-
-              {/* Phone */}
-              <div className="my-3 flex gap-x-2 text-sm">
-                <BsFillTelephoneFill size={18} className="flex-shrink-0" />
-                <a href={`tel:${company.phone}`} className="hover:underline">
-                  {company.phone}
-                </a>
-              </div>
-            </div>
-
-            {/* Socials */}
-            <div className="mb-3 mt-7 flex flex-wrap justify-center gap-5">
-              {company.socials.facebook && (
-                <a
-                  href={company.socials.facebook}
-                  target="_blank"
-                  rel="noopener"
-                >
-                  <GrFacebook
-                    size={24}
-                    className="hover:scale-110 hover:text-highlight"
-                  />
-                </a>
-              )}
-
-              {company.socials.github && (
-                <a href={company.socials.github} target="_blank" rel="noopener">
-                  <BsGithub
-                    size={24}
-                    className="hover:scale-110 hover:text-highlight"
-                  />
-                </a>
-              )}
-
-              {company.socials.instagram && (
-                <a
-                  href={company.socials.instagram}
-                  target="_blank"
-                  rel="noopener"
-                >
-                  <FiInstagram
-                    size={24}
-                    className="hover:scale-110 hover:text-highlight"
+              <div className="space-y-2.5">
+                <div className="flex items-start gap-2 text-sm text-gray-400">
+                  <HiOutlineLocationMarker
+                    size={15}
+                    className="mt-0.5 flex-shrink-0 text-gray-600"
                   />
-                </a>
-              )}
-
-              {company.socials.linkedin && (
-                <a
-                  href={company.socials.linkedin}
-                  target="_blank"
-                  rel="noopener"
-                >
-                  <BsLinkedin
-                    size={24}
-                    className="hover:scale-110 hover:text-highlight"
+                  <span>{company.location}</span>
+                </div>
+
+                <div className="flex items-start gap-2 text-sm">
+                  <BsGlobe
+                    size={13}
+                    className="mt-0.5 flex-shrink-0 text-gray-600"
                   />
-                </a>
-              )}
-
-              {company.socials.twitter && (
-                <a
-                  href={company.socials.twitter}
-                  target="_blank"
-                  rel="noopener"
-                >
-                  <FaXTwitter
-                    size={24}
-                    className="hover:scale-110 hover:text-highlight"
+                  <a
+                    rel="noopener"
+                    target="_blank"
+                    href={company.website}
+                    className="truncate text-primary-100 hover:underline"
+                  >
+                    {company.website?.replace(/^https?:\/\//, "")}
+                  </a>
+                </div>
+
+                <div className="flex items-start gap-2 text-sm">
+                  <MdOutlineAlternateEmail
+                    size={14}
+                    className="mt-0.5 flex-shrink-0 text-gray-600"
                   />
-                </a>
-              )}
-
-              {company.socials.youtube && (
-                <a
-                  href={company.socials.youtube}
-                  target="_blank"
-                  rel="noopener"
-                >
-                  <BsYoutube
-                    size={24}
-                    className="hover:scale-110 hover:text-highlight"
+                  <a
+                    href={`mailto:${company.email}`}
+                    className="truncate text-primary-100 hover:underline"
+                  >
+                    {company.email}
+                  </a>
+                </div>
+
+                <div className="flex items-start gap-2 text-sm text-gray-400">
+                  <BsFillTelephoneFill
+                    size={12}
+                    className="mt-0.5 flex-shrink-0 text-gray-600"
                   />
-                </a>
-              )}
+                  <a href={`tel:${company.phone}`} className="hover:underline">
+                    {company.phone}
+                  </a>
+                </div>
+              </div>
+            </div>
+
+            <div className="mt-6 border-t border-white/5 pt-4">
+              <div className="flex flex-wrap justify-center gap-4">
+                {company.socials.facebook && (
+                  <a
+                    href={company.socials.facebook}
+                    target="_blank"
+                    rel="noopener"
+                  >
+                    <GrFacebook
+                      size={17}
+                      className="text-gray-500 transition-all hover:scale-110 hover:text-highlight"
+                    />
+                  </a>
+                )}
+                {company.socials.github && (
+                  <a
+                    href={company.socials.github}
+                    target="_blank"
+                    rel="noopener"
+                  >
+                    <BsGithub
+                      size={17}
+                      className="text-gray-500 transition-all hover:scale-110 hover:text-highlight"
+                    />
+                  </a>
+                )}
+                {company.socials.instagram && (
+                  <a
+                    href={company.socials.instagram}
+                    target="_blank"
+                    rel="noopener"
+                  >
+                    <FiInstagram
+                      size={17}
+                      className="text-gray-500 transition-all hover:scale-110 hover:text-highlight"
+                    />
+                  </a>
+                )}
+                {company.socials.linkedin && (
+                  <a
+                    href={company.socials.linkedin}
+                    target="_blank"
+                    rel="noopener"
+                  >
+                    <BsLinkedin
+                      size={17}
+                      className="text-gray-500 transition-all hover:scale-110 hover:text-highlight"
+                    />
+                  </a>
+                )}
+                {company.socials.twitter && (
+                  <a
+                    href={company.socials.twitter}
+                    target="_blank"
+                    rel="noopener"
+                  >
+                    <FaXTwitter
+                      size={17}
+                      className="text-gray-500 transition-all hover:scale-110 hover:text-highlight"
+                    />
+                  </a>
+                )}
+                {company.socials.youtube && (
+                  <a
+                    href={company.socials.youtube}
+                    target="_blank"
+                    rel="noopener"
+                  >
+                    <BsYoutube
+                      size={17}
+                      className="text-gray-500 transition-all hover:scale-110 hover:text-highlight"
+                    />
+                  </a>
+                )}
+              </div>
             </div>
           </div>
         ))}
diff --git a/tailwind.config.js b/tailwind.config.js
index 85153f9..461cc30 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,6 +3,10 @@ export default {
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
     extend: {
+      fontFamily: {
+        sans: ["Inter", "system-ui", "sans-serif"],
+        display: ["'Space Grotesk'", "system-ui", "sans-serif"],
+      },
       colors: {
         gold: {
           100: "#FFFBA4",
@@ -15,9 +19,24 @@ export default {
           200: "#33B6D8",
           300: "#14596B",
           400: "#0C3640",
+          500: "#071F26",
         },
         highlight: "#FEEA00",
       },
+      boxShadow: {
+        card: "0 0 0 1px rgba(255,255,255,0.06), 0 4px 20px rgba(0,0,0,0.4)",
+        "card-hover":
+          "0 0 0 1px rgba(51,182,216,0.2), 0 8px 32px rgba(0,0,0,0.5)",
+      },
+      animation: {
+        "fade-in": "fadeIn 0.4s ease-out",
+      },
+      keyframes: {
+        fadeIn: {
+          from: { opacity: "0", transform: "translateY(8px)" },
+          to: { opacity: "1", transform: "translateY(0)" },
+        },
+      },
     },
   },
   plugins: [],
