diff --git a/src/components/home/JoinUsStrip.tsx b/src/components/home/JoinUsStrip.tsx
index bf1ef4599..fc3cedc4d 100644
--- a/src/components/home/JoinUsStrip.tsx
+++ b/src/components/home/JoinUsStrip.tsx
@@ -32,7 +32,7 @@ const JoinUsStrip: React.FC = () => {
                 {t('joinUs.stripTitle')}
               </span>
             </div>
-            <span className='hidden md:inline text-sm text-orange-100'>
+            <span className='hidden lg:inline text-sm text-orange-100'>
               {t('joinUs.stripSubtitle')}
             </span>
           </div>
diff --git a/src/components/home/ServicesSection.tsx b/src/components/home/ServicesSection.tsx
index 150fe632a..14cc14332 100644
--- a/src/components/home/ServicesSection.tsx
+++ b/src/components/home/ServicesSection.tsx
@@ -48,8 +48,8 @@ const ServicesSection: React.FC = () => {
   return (
     <section className='py-12 bg-white'>
       <div className='container mx-auto px-4'>
-        <div className='text-center mb-12'>
-          <h2 className='text-2xl md:text-3xl font-bold text-gray-900 mb-4'>
+        <div className='flex flex-col gap-4 text-center mb-12'>
+          <h2 className='text-2xl md:text-3xl font-bold text-gray-900'>
             {t('services.governmentServices')}
           </h2>
           <p className='text-gray-800 max-w-2xl mx-auto'>
@@ -64,25 +64,26 @@ const ServicesSection: React.FC = () => {
               hoverable
               className='border-t-4 border-primary-500'
             >
-              <CardContent className='flex flex-col h-full p-6'>
-                <div className='flex gap-2'>
-                  <div className='bg-primary-100 text-primary-600 p-3 rounded-md mb-4 self-start'>
+              <CardContent className='flex flex-col h-full gap-4'>
+                <div className='flex gap-2 items-center'>
+                  <div className='bg-primary-100 text-primary-600 p-3 rounded-md'>
                     {getIcon(category.category)}
                   </div>
-
-                  <h3 className='text-lg font-semibold mb-4 text-gray-900'>
-                    {category.category}
-                  </h3>
+                  <Link to={`/services?category=${category.slug}`}>
+                    <h3 className='text-lg font-semibold text-gray-900 hover:text-primary-600'>
+                      {category.category}
+                    </h3>
+                  </Link>
                 </div>
 
-                <ul className='space-y-2 mb-6 grow'>
+                <ul className='space-y-2 flex-grow'>
                   {category.subcategories.slice(0, 3).map(subcategory => (
                     <li key={subcategory.slug}>
                       <Link
                         to={`/services?category=${category.slug}&subcategory=${subcategory.slug}`}
-                        className='text-gray-800 hover:text-primary-600 transition-colors text-md flex items-center'
+                        className='flex items-center gap-2 text-gray-800 text-md hover:text-primary-600 hover:underline transition-colors'
                       >
-                        <span className='w-1.5 h-1.5 bg-gray-300 rounded-full mr-2'></span>
+                        <span className='flex-shrink-0 w-1.5 h-1.5 bg-gray-300 rounded-full'></span>
                         {subcategory.name}
                       </Link>
                     </li>
@@ -91,10 +92,10 @@ const ServicesSection: React.FC = () => {
 
                 <Link
                   to={`/services?category=${category.slug}`}
-                  className='mt-auto text-primary-600 hover:text-primary-700 font-medium transition-colors inline-flex items-center'
+                  className='mt-auto text-primary-600 hover:text-primary-700 font-medium transition-colors inline-flex items-center self-end gap-1'
                 >
-                  {t('services.viewAllCategory')} {category.category}
-                  <LucideIcons.ArrowRight className='ml-1 h-4 w-4' />
+                  {t('services.viewAllCategory')}
+                  <LucideIcons.ArrowRight className='h-4 w-4' />
                 </Link>
               </CardContent>
             </Card>
@@ -104,7 +105,7 @@ const ServicesSection: React.FC = () => {
         <div className='text-center mt-8'>
           <Link
             to='/services'
-            className='inline-flex items-center justify-center rounded-md font-medium transition-colors px-6 py-3 bg-primary-500 text-white hover:bg-primary-600 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 shadow-xs'
+            className='inline-flex items-center justify-center rounded-md font-medium transition-colors px-6 py-3 bg-primary-500 text-white hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 shadow-sm'
           >
             {t('services.viewAll')}
           </Link>
diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx
index 42e4c2aed..da7d990a3 100644
--- a/src/components/layout/Navbar.tsx
+++ b/src/components/layout/Navbar.tsx
@@ -32,7 +32,7 @@ const Navbar: React.FC = () => {
   };
 
   return (
-    <nav className='bg-white shadow-xs sticky top-0 z-50'>
+    <nav className='bg-white shadow-sm sticky top-0 z-50'>
       {/* Top bar with language switcher and additional links */}
       <div className='border-b border-gray-200'>
         <div className='container mx-auto px-4 flex justify-end items-center h-10'>
@@ -43,6 +43,12 @@ const Navbar: React.FC = () => {
             >
               🚀 Join Us
             </Link>
+            <Link
+              to='/ideas'
+              className='text-xs text-gray-800 hover:text-primary-600 transition-colors'
+            >
+              Project Ideas
+            </Link>
             <a
               href='https://www.gov.ph'
               className='text-xs text-gray-800 hover:text-primary-600 transition-colors'
@@ -62,7 +68,7 @@ const Navbar: React.FC = () => {
               <select
                 value={i18n.language}
                 onChange={e => changeLanguage(e.target.value as LanguageType)}
-                className='text-xs border border-gray-300 rounded-sm px-2 py-1 bg-white text-gray-700 hover:border-primary-600 focus:outline-hidden focus:ring-1 focus:ring-primary-600 focus:border-primary-600'
+                className='text-xs border border-gray-300 rounded px-2 py-1 bg-white text-gray-700 hover:border-primary-600 focus:outline-none focus:ring-1 focus:ring-primary-600 focus:border-primary-600'
               >
                 {Object.entries(LANGUAGES).map(([code, lang]) => (
                   <option key={code} value={code}>
@@ -77,8 +83,8 @@ const Navbar: React.FC = () => {
 
       {/* Main navigation */}
       <div className='container mx-auto px-4'>
-        <div className='flex justify-between items-center py-4'>
-          <div className='flex items-center'>
+        <div className='flex justify-between items-center py-4 gap-8'>
+          <div className='flex items-center gap-6'>
             <Link to='/' className='flex items-center'>
               <img
                 src='/logos/svg/BetterGov_Icon-Primary.svg'
@@ -92,45 +98,46 @@ const Navbar: React.FC = () => {
                 </div>
               </div>
             </Link>
-          </div>
 
-          {/* Desktop navigation */}
-          <div className='hidden lg:flex items-center space-x-8 pr-24'>
-            {mainNavigation.map(item => (
-              <div key={item.label} className='relative group'>
-                <Link
-                  to={item.href}
-                  className='flex items-center text-gray-700 hover:text-primary-600 font-medium transition-colors'
-                >
-                  {t(`navbar.${item.label.toLowerCase()}`)}
+            {/* Desktop navigation */}
+            <div className='hidden lg:flex items-center lg:gap-8'>
+              {mainNavigation.map(item => (
+                <div key={item.label} className='relative group'>
+                  <Link
+                    to={item.href}
+                    className='flex items-center text-gray-700 hover:text-primary-600 font-medium transition-colors'
+                  >
+                    {t(`navbar.${item.label.toLowerCase()}`)}
+                    {item.children && (
+                      <ChevronDown className='ml-1 h-4 w-4 text-gray-800 group-hover:text-primary-600 transition-colors' />
+                    )}
+                  </Link>
                   {item.children && (
-                    <ChevronDown className='ml-1 h-4 w-4 text-gray-800 group-hover:text-primary-600 transition-colors' />
-                  )}
-                </Link>
-                {item.children && (
-                  <div className='absolute left-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black/5 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50'>
-                    <div
-                      className='py-1'
-                      role='menu'
-                      aria-orientation='vertical'
-                    >
-                      {item.children.map(child => (
-                        <Link
-                          key={child.label}
-                          to={child.href}
-                          className='text-left block px-4 py-2 text-sm text-gray-700 hover:bg-primary-50 hover:text-primary-600'
-                          role='menuitem'
-                        >
-                          {child.label}
-                        </Link>
-                      ))}
+                    <div className='absolute left-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50'>
+                      <div
+                        className='py-1'
+                        role='menu'
+                        aria-orientation='vertical'
+                      >
+                        {item.children.map(child => (
+                          <Link
+                            key={child.label}
+                            to={child.href}
+                            className='text-left block px-4 py-2 text-sm text-gray-700 hover:bg-primary-50 hover:text-primary-600'
+                            role='menuitem'
+                          >
+                            {child.label}
+                          </Link>
+                        ))}
+                      </div>
                     </div>
-                  </div>
-                )}
-              </div>
-            ))}
+                  )}
+                </div>
+              ))}
+            </div>
           </div>
-          <div className='hidden lg:flex items-center space-x-6'>
+
+          <div className='hidden lg:flex items-center gap-6'>
             <Link
               to='/about'
               className='flex items-center text-gray-700 hover:text-primary-600 font-medium transition-colors'
@@ -139,9 +146,9 @@ const Navbar: React.FC = () => {
             </Link>
             <Link
               to='/search'
-              className='flex items-center text-gray-700 hover:text-primary-600 font-medium transition-colors'
+              className='flex gap-1 items-center text-gray-700 hover:text-primary-600 font-medium transition-colors'
             >
-              <Search className='h-4 w-4 mr-1' />
+              <Search className='h-4 w-4' />
               Search
             </Link>
             {/* <Link
@@ -156,7 +163,7 @@ const Navbar: React.FC = () => {
           <div className='lg:hidden flex items-center'>
             <button
               onClick={toggleMenu}
-              className='inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:text-primary-500 hover:bg-gray-100 focus:outline-hidden focus:ring-2 focus:ring-inset focus:ring-primary-500'
+              className='inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:text-primary-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-500'
             >
               <span className='sr-only'>Open main menu</span>
               {isOpen ? (
@@ -237,7 +244,7 @@ const Navbar: React.FC = () => {
               <select
                 value={i18n.language}
                 onChange={e => changeLanguage(e.target.value as LanguageType)}
-                className='text-sm border border-gray-300 rounded-sm px-2 py-1 bg-white text-gray-700 hover:border-primary-600 focus:outline-hidden focus:ring-1 focus:ring-primary-600 focus:border-primary-600'
+                className='text-sm border border-gray-300 rounded px-2 py-1 bg-white text-gray-700 hover:border-primary-600 focus:outline-none focus:ring-1 focus:ring-primary-600 focus:border-primary-600'
               >
                 {Object.entries(LANGUAGES).map(([code, lang]) => (
                   <option key={code} value={code}>