diff --git a/app/tools/page.tsx b/app/tools/page.tsx
index ddb51fa..5904741 100644
--- a/app/tools/page.tsx
+++ b/app/tools/page.tsx
@@ -6,7 +6,7 @@ export default function ToolsPage() {
   return (
     <div className="max-w-2xl mx-auto py-10 px-4">
       <h1 className="text-2xl font-bold mb-6 text-neutral-900 dark:text-white">Tools</h1>
-      <div className="bg-white dark:bg-neutral-900 p-6 rounded-xl border border-neutral-200 dark:border-neutral-800">
+      <div className="bg-white dark:bg-neutral-900 p-6 rounded-2xl border border-neutral-200 dark:border-neutral-800">
         <h2 className="text-lg font-semibold mb-4 text-neutral-900 dark:text-white">UTM Campaign Builder</h2>
         <UtmBuilder />
       </div>
diff --git a/components/dashboard/Campaigns.tsx b/components/dashboard/Campaigns.tsx
index 97dd753..5bee4ee 100644
--- a/components/dashboard/Campaigns.tsx
+++ b/components/dashboard/Campaigns.tsx
@@ -3,7 +3,7 @@
 import { useState, useEffect } from 'react'
 import Link from 'next/link'
 import { formatNumber } from '@/lib/utils/format'
-import { Modal, ArrowRightIcon } from '@ciphera-net/ui'
+import { Modal, ArrowRightIcon, Button } from '@ciphera-net/ui'
 import { getCampaigns, CampaignStat } from '@/lib/api/stats'
 import { FaBullhorn } from 'react-icons/fa'
 import { PlusIcon } from '@radix-ui/react-icons'
@@ -70,21 +70,23 @@ export default function Campaigns({ siteId, dateRange }: CampaignsProps) {
           <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
             Campaigns
           </h3>
-          <div className="flex items-center gap-3">
-            <button
+          <div className="flex items-center gap-2">
+            <Button
+              variant="ghost"
               onClick={() => setIsBuilderOpen(true)}
-              className="flex items-center gap-1.5 text-xs font-medium text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white transition-colors"
+              className="h-8 px-3 text-xs gap-1.5"
             >
               <PlusIcon className="w-3.5 h-3.5" />
               Build URL
-            </button>
+            </Button>
             {showViewAll && (
-              <button
+              <Button
+                variant="ghost"
                 onClick={() => setIsModalOpen(true)}
-                className="text-xs font-medium text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white transition-colors"
+                className="h-8 px-3 text-xs"
               >
                 View All
-              </button>
+              </Button>
             )}
           </div>
         </div>
diff --git a/components/tools/UtmBuilder.tsx b/components/tools/UtmBuilder.tsx
index 37c3710..f4b1593 100644
--- a/components/tools/UtmBuilder.tsx
+++ b/components/tools/UtmBuilder.tsx
@@ -3,7 +3,7 @@
 import { useState, useEffect } from 'react'
 import { CopyIcon, CheckIcon } from '@radix-ui/react-icons'
 import { listSites, Site } from '@/lib/api/sites'
-import { Select } from '@ciphera-net/ui'
+import { Select, Input, Button } from '@ciphera-net/ui'
 
 interface UtmBuilderProps {
   initialSiteId?: string
@@ -132,62 +132,58 @@ export default function UtmBuilder({ initialSiteId }: UtmBuilderProps) {
         )}
 
         <div>
-          <label className="block text-sm font-medium mb-1 text-neutral-900 dark:text-white">Website URL *</label>
+          <label className="block text-sm font-medium mb-1.5 text-neutral-900 dark:text-white">Website URL *</label>
           {selectedSite ? (
-            <div className="flex rounded-xl shadow-sm">
-              <span className="inline-flex items-center px-3 rounded-l-xl border border-r-0 border-neutral-200 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-800 text-neutral-500 text-sm">
+            <div className="flex rounded-xl shadow-sm transition-all duration-200 focus-within:ring-4 focus-within:ring-brand-orange/10 focus-within:border-brand-orange hover:border-brand-orange/50 border border-neutral-200 dark:border-neutral-800">
+              <span className="inline-flex items-center px-4 rounded-l-xl border-r border-neutral-200 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-900 text-neutral-500 text-sm select-none">
                 https://{selectedSite.domain}
               </span>
               <input
                 type="text"
-                className="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-r-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50/50 dark:bg-neutral-900/50 focus:ring-2 focus:ring-brand-orange/20 outline-none transition-all text-neutral-900 dark:text-white sm:text-sm"
+                className="flex-1 min-w-0 block w-full px-4 py-3 rounded-none rounded-r-xl bg-neutral-50/50 dark:bg-neutral-900/50 outline-none transition-all text-neutral-900 dark:text-white text-sm placeholder:text-neutral-400"
                 placeholder="/blog/post-1"
                 value={getCurrentPath()}
                 onChange={handlePathChange}
               />
             </div>
           ) : (
-            <input
+            <Input
               name="url"
               placeholder="https://example.com/landing-page"
-              className="w-full p-2 rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50/50 dark:bg-neutral-900/50 focus:ring-2 focus:ring-brand-orange/20 outline-none transition-all text-neutral-900 dark:text-white"
               value={values.url}
               onChange={handleChange}
             />
           )}
-          <p className="text-xs text-neutral-500 mt-1">
+          <p className="text-xs text-neutral-500 mt-1.5">
             You can add specific paths (e.g., /blog/post-1) to the URL above.
           </p>
         </div>
 
         <div className="grid grid-cols-2 gap-4">
           <div>
-            <label className="block text-sm font-medium mb-1 text-neutral-900 dark:text-white">Source *</label>
-            <input
+            <label className="block text-sm font-medium mb-1.5 text-neutral-900 dark:text-white">Source *</label>
+            <Input
               name="source"
               placeholder="google, newsletter"
-              className="w-full p-2 rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50/50 dark:bg-neutral-900/50 focus:ring-2 focus:ring-brand-orange/20 outline-none transition-all text-neutral-900 dark:text-white"
               value={values.source}
               onChange={handleChange}
             />
           </div>
           <div>
-            <label className="block text-sm font-medium mb-1 text-neutral-900 dark:text-white">Medium *</label>
-            <input
+            <label className="block text-sm font-medium mb-1.5 text-neutral-900 dark:text-white">Medium *</label>
+            <Input
               name="medium"
               placeholder="cpc, email"
-              className="w-full p-2 rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50/50 dark:bg-neutral-900/50 focus:ring-2 focus:ring-brand-orange/20 outline-none transition-all text-neutral-900 dark:text-white"
               value={values.medium}
               onChange={handleChange}
             />
           </div>
         </div>
         <div>
-          <label className="block text-sm font-medium mb-1 text-neutral-900 dark:text-white">Campaign Name *</label>
-          <input
+          <label className="block text-sm font-medium mb-1.5 text-neutral-900 dark:text-white">Campaign Name *</label>
+          <Input
             name="campaign"
             placeholder="spring_sale"
-            className="w-full p-2 rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50/50 dark:bg-neutral-900/50 focus:ring-2 focus:ring-brand-orange/20 outline-none transition-all text-neutral-900 dark:text-white"
             value={values.campaign}
             onChange={handleChange}
           />
@@ -197,13 +193,14 @@ export default function UtmBuilder({ initialSiteId }: UtmBuilderProps) {
       {generatedUrl && (
         <div className="mt-6 p-4 bg-neutral-50 dark:bg-neutral-900 rounded-xl border border-neutral-200 dark:border-neutral-800 flex items-center justify-between group">
           <code className="text-sm break-all text-brand-orange font-mono">{generatedUrl}</code>
-          <button
+          <Button
+            variant="secondary"
             onClick={copyToClipboard}
-            className="ml-2 p-2 hover:bg-neutral-200 dark:hover:bg-neutral-800 rounded-lg transition-colors text-neutral-500 hover:text-neutral-900 dark:hover:text-white"
+            className="ml-4 shrink-0 h-9 w-9 p-0 rounded-lg"
             title="Copy to clipboard"
           >
-            {copied ? <CheckIcon className="w-5 h-5 text-green-500" /> : <CopyIcon className="w-5 h-5" />}
-          </button>
+            {copied ? <CheckIcon className="w-4 h-4 text-green-500" /> : <CopyIcon className="w-4 h-4" />}
+          </Button>
         </div>
       )}
     </div>