diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index eb0d7ef60..70833e450 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -87,7 +87,7 @@ const AdminPage = async () => {
         </div>
         <Link href="/admin/course/add-course">
           {' '}
-          <Button className='bg-gradient-to-b from-blue-400 to-blue-700 hover:bg-blue-900'>
+          <Button variant={'branding'}>
             {' '}
             <PlusCircle className="mr-2 h-4 w-4 text-white" />
             <p className='text-white'>New course</p>
diff --git a/src/components/admin-dashboard/ClassAssignmentCard.tsx b/src/components/admin-dashboard/ClassAssignmentCard.tsx
index 1db5735e2..07ef031e9 100644
--- a/src/components/admin-dashboard/ClassAssignmentCard.tsx
+++ b/src/components/admin-dashboard/ClassAssignmentCard.tsx
@@ -107,7 +107,8 @@ const ClassAssignmentCard: React.FC<ClassAssignmentCardProps> = ({ data, type })
       </div>
       <div className='flex flex-col gap-y-4'>
         <Button
-          className="mt-2 w-full rounded-md px-4 py-2 transition-colors duration-200 bg-gradient-to-b from-blue-400 to-blue-700 dark:text-white"
+          variant={'branding'}
+          className="mt-2"
           onClick={() => setIsModalOpen(true)}
         >
           View Details
@@ -115,7 +116,8 @@ const ClassAssignmentCard: React.FC<ClassAssignmentCardProps> = ({ data, type })
         <div>
           {type === 'assignment' && (
             <Button
-              className="w-full rounded-md px-4 py-2 transition-colors duration-200 bg-gradient-to-b from-blue-400 to-blue-700 dark:text-white"
+              variant={'branding'}
+              className="w-full"
               onClick={() => router.push(`/admin/assignment/${data.id}`)}
             >
               View Submissions
@@ -123,7 +125,8 @@ const ClassAssignmentCard: React.FC<ClassAssignmentCardProps> = ({ data, type })
           )}
           {type === 'class' && 'meetingLink' in data && (
             <Button
-              className="w-full rounded-md px-4 py-2 transition-colors duration-200 bg-gradient-to-b from-blue-400 to-blue-700 dark:text-white"
+              variant={'branding'}
+              className="w-full"
               onClick={() =>
                 window.open(`https://${data.meetingLink}`, '_blank')
               }
diff --git a/src/components/admin-dashboard/Header.tsx b/src/components/admin-dashboard/Header.tsx
index 01d8ca5ca..904fca82b 100644
--- a/src/components/admin-dashboard/Header.tsx
+++ b/src/components/admin-dashboard/Header.tsx
@@ -15,7 +15,8 @@ const Header: React.FC<HeaderProps> = ({ title }) => {
         {title}
       </h1>
       <Button
-        className="mt-2 rounded-md px-4 py-2 bg-gradient-to-b from-blue-400 to-blue-700 dark:text-white"
+        variant={'branding'}
+        className="mt-2"
         onClick={() => setIsModalOpen(true)}
       >
         + Add new {title.toLocaleLowerCase()}