diff --git a/src/app/(main)/account/login/page.tsx b/src/app/(main)/account/login/page.tsx
index 26e3275..1370f52 100644
--- a/src/app/(main)/account/login/page.tsx
+++ b/src/app/(main)/account/login/page.tsx
@@ -75,7 +75,7 @@ export default function LoginPage() {
                   required
                   value={email}
                   onChange={e => setEmail(e.target.value)}
-                  className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-zinc-700 placeholder-gray-500 dark:placeholder-zinc-400 text-gray-900 dark:text-white bg-white dark:bg-zinc-800 rounded-t-md focus:outline-none focus:ring-primary-500 focus:border-primary-500 focus:z-10 sm:text-sm"
+                  className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-zinc-700 placeholder-gray-500 dark:placeholder-zinc-400 text-gray-900 dark:text-white bg-white dark:bg-zinc-800 rounded-t-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
                   placeholder="Email address"
                   disabled={loading}
                 />
@@ -92,7 +92,7 @@ export default function LoginPage() {
                   required
                   value={password}
                   onChange={e => setPassword(e.target.value)}
-                  className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-zinc-700 placeholder-gray-500 dark:placeholder-zinc-400 text-gray-900 dark:text-white bg-white dark:bg-zinc-800 rounded-b-md focus:outline-none focus:ring-primary-500 focus:border-primary-500 focus:z-10 sm:text-sm"
+                  className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-zinc-700 placeholder-gray-500 dark:placeholder-zinc-400 text-gray-900 dark:text-white bg-white dark:bg-zinc-800 rounded-b-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
                   placeholder="Password"
                   disabled={loading}
                 />
@@ -151,7 +151,7 @@ export default function LoginPage() {
               <button
                 type="button"
                 onClick={handleGoogle}
-                className="btn btn-outline flex justify-center items-center py-2 px-4 border border-gray-300 dark:border-zinc-700 rounded-md shadow-sm bg-white dark:bg-zinc-800 text-sm font-medium text-gray-500 dark:text-zinc-300 hover:bg-gray-50 dark:hover:bg-zinc-700 transition"
+                className="flex justify-center items-center py-2 px-4 border border-gray-300 dark:border-zinc-700 rounded-md shadow-sm bg-white dark:bg-zinc-800 text-sm font-medium text-gray-500 dark:text-zinc-300 hover:bg-gray-50 dark:hover:bg-zinc-700 transition"
                 disabled={loading}
               >
                 <span className="sr-only">Sign in with Google</span>
diff --git a/src/app/(main)/build/page.tsx b/src/app/(main)/build/page.tsx
index d03e5a2..89f093d 100644
--- a/src/app/(main)/build/page.tsx
+++ b/src/app/(main)/build/page.tsx
@@ -408,7 +408,7 @@ export default function BuildPage() {
                 <div className="text-sm text-gray-500">Total Cost</div>
               </div>
               <button
-                className="btn btn-outline btn-error ml-0 md:ml-4"
+                className="border border-red-300 hover:bg-red-50 text-red-700 ml-0 md:ml-4 px-4 py-2 rounded-md transition-colors"
                 onClick={() => setShowClearModal(true)}
               >
                 Clear Build
@@ -429,13 +429,13 @@ export default function BuildPage() {
             </Dialog.Description>
             <div className="flex justify-end gap-2">
               <button
-                className="btn btn-sm btn-ghost"
+                className="text-gray-700 hover:bg-gray-100 px-3 py-1 rounded-md text-sm transition-colors"
                 onClick={() => setShowClearModal(false)}
               >
                 Cancel
               </button>
               <button
-                className="btn btn-sm btn-error"
+                className="bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded-md text-sm transition-colors"
                 onClick={() => {
                   clearBuild();
                   setShowClearModal(false);
@@ -717,7 +717,7 @@ export default function BuildPage() {
                               <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                 {selected ? (
                                   <button
-                                    className="btn btn-outline btn-sm"
+                                    className="border border-gray-300 hover:bg-gray-50 text-gray-700 px-3 py-1 rounded-md text-sm font-medium transition-colors"
                                     onClick={() => removePartForComponent(component.id)}
                                   >
                                     Remove
diff --git a/src/app/(main)/parts/page.tsx b/src/app/(main)/parts/page.tsx
index 3b27fa7..66e2bd2 100644
--- a/src/app/(main)/parts/page.tsx
+++ b/src/app/(main)/parts/page.tsx
@@ -159,7 +159,7 @@ const Dropdown = ({
                   key={optionIdx}
                   className={({ active }) =>
                     `relative cursor-default select-none py-2 pl-10 pr-4 ${
-                      active ? 'bg-primary-100 text-primary-900' : 'text-zinc-900'
+                      active ? 'bg-blue-100 text-blue-900' : 'text-zinc-900'
                     }`
                   }
                   value={option.value}
@@ -720,7 +720,7 @@ export default function Home() {
                           key={optionIdx}
                           className={({ active }) =>
                             `relative cursor-default select-none py-2 pl-10 pr-4 ${
-                              active ? 'bg-primary-100 text-primary-900' : 'text-zinc-900'
+                              active ? 'bg-blue-100 text-blue-900' : 'text-zinc-900'
                             }`
                           }
                           value={option.value}
@@ -731,7 +731,7 @@ export default function Home() {
                                 {option.label}
                               </span>
                               {selected ? (
-                                <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-primary-600">
+                                <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-blue-600">
                                   <CheckIcon className="h-4 w-4" aria-hidden="true" />
                                 </span>
                               ) : null}
@@ -782,9 +782,9 @@ export default function Home() {
           <div className="text-sm text-zinc-700">
             {loading ? 'Loading...' : `Showing ${startIndex + 1}-${Math.min(endIndex, sortedParts.length)} of ${sortedParts.length} parts`}
             {hasActiveFilters && !loading && (
-              <span className="ml-2 text-primary-600">
-                (filtered)
-              </span>
+                          <span className="ml-2 text-blue-600">
+              (filtered)
+            </span>
             )}
             {error && <span className="ml-2 text-red-500">{error}</span>}
           </div>
@@ -792,16 +792,16 @@ export default function Home() {
           {/* View Toggle */}
           <div className="flex items-center gap-2">
             <span className="text-sm text-zinc-600">View:</span>
-            <div className="btn-group">
+            <div className="flex">
               <button 
-                className={`btn btn-sm ${viewMode === 'table' ? 'btn-active' : ''}`}
+                className={`px-3 py-1 text-sm border rounded-l ${viewMode === 'table' ? 'bg-blue-600 text-white border-blue-600' : 'border-gray-300 hover:bg-gray-50'}`}
                 onClick={() => setViewMode('table')}
                 aria-label="Table view"
               >
                 <TableCellsIcon className="h-5 w-5" />
               </button>
               <button 
-                className={`btn btn-sm ${viewMode === 'cards' ? 'btn-active' : ''}`}
+                className={`px-3 py-1 text-sm border border-l-0 rounded-r ${viewMode === 'cards' ? 'bg-blue-600 text-white border-blue-600' : 'border-gray-300 hover:bg-gray-50'}`}
                 onClick={() => setViewMode('cards')}
                 aria-label="Card view"
               >
@@ -846,13 +846,13 @@ export default function Home() {
                           <Image src={Array.isArray(part.images) && (part.images as string[]).length > 0 ? (part.images as string[])[0] : '/window.svg'} alt={part.name} width={48} height={48} className="object-contain w-12 h-12" />
                         </div>
                         <div className="max-w-md break-words whitespace-normal">
-                          <Link href={`/products/${part.slug}`} className="text-sm font-semibold text-primary hover:underline">
+                          <Link href={`/products/${part.slug}`} className="text-sm font-semibold text-blue-600 hover:underline">
                             {part.name}
                           </Link>
                         </div>
                       </td>
                       <td className="px-6 py-4 whitespace-nowrap">
-                        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-800">
+                        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                           {part.category.name}
                         </span>
                       </td>
@@ -875,7 +875,7 @@ export default function Home() {
                           if (selectedComponentId) {
                             return (
                               <button
-                                className="btn btn-outline btn-sm"
+                                className="border border-gray-300 hover:bg-gray-50 text-gray-700 px-3 py-1 rounded-md text-sm font-medium transition-colors"
                                 onClick={() => removePartForComponent(selectedComponentId)}
                               >
                                 Remove
@@ -884,7 +884,7 @@ export default function Home() {
                           } else if (matchingComponent && !selectedParts[matchingComponent.id]) {
                             return (
                               <button
-                                className="btn btn-neutral btn-sm flex items-center gap-1"
+                                className="bg-gray-600 hover:bg-gray-700 text-white px-3 py-1 rounded-md text-sm font-medium transition-colors flex items-center gap-1"
                                 onClick={() => {
                                   selectPartForComponent(matchingComponent.id, {
                                     id: part.id,
diff --git a/src/app/(main)/products/[slug]/page.tsx b/src/app/(main)/products/[slug]/page.tsx
index f806650..7ed23d1 100644
--- a/src/app/(main)/products/[slug]/page.tsx
+++ b/src/app/(main)/products/[slug]/page.tsx
@@ -213,7 +213,7 @@ export default function ProductDetailsPage() {
 
           {/* Price Range */}
           <div className="flex items-center gap-4">
-            <div className="text-3xl font-bold text-primary-600">
+            <div className="text-3xl font-bold text-blue-600">
               ${lowestPrice.toFixed(2)}
             </div>
             {lowestPrice !== highestPrice && (
@@ -236,10 +236,10 @@ export default function ProductDetailsPage() {
 
           {/* Add to Build Button */}
           <div className="flex gap-4">
-            <button className="btn btn-primary flex-1" onClick={handleAddToBuild}>
+            <button className="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition-colors flex-1" onClick={handleAddToBuild}>
               Add to Current Build
             </button>
-            <button className="btn btn-outline">
+            <button className="border border-gray-300 hover:bg-gray-50 text-gray-700 font-medium py-2 px-4 rounded-md transition-colors">
               Save for Later
             </button>
           </div>
@@ -278,7 +278,7 @@ export default function ProductDetailsPage() {
                   </div>
                   <div className="flex items-center gap-4">
                     <div className="text-right">
-                      <div className="text-2xl font-bold text-primary-600">
+                      <div className="text-2xl font-bold text-blue-600">
                         ${offer.price.toFixed(2)}
                       </div>
                       {offer.inStock !== undefined && (
@@ -291,7 +291,7 @@ export default function ProductDetailsPage() {
                       href={offer.url} 
                       target="_blank" 
                       rel="noopener noreferrer"
-                      className="btn btn-primary"
+                      className="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition-colors"
                     >
                       View Deal
                     </a>