From 49dcf4e0b72053a8c0feb5983a0f5eec663832c4 Mon Sep 17 00:00:00 2001
From: buchananwill <139961977+buchananwill@users.noreply.github.com>
Date: Fri, 29 Mar 2024 23:30:25 +0000
Subject: [PATCH] Changing every btn to Button.

---
 app/build-metrics/[schedule]/page.tsx         | 55 +++++++++++--------
 .../class-hierarchy/[yearGroup]/page.tsx      |  2 +-
 .../[yearGroup]/bundles/bundle-editor.tsx     | 16 ++++--
 .../[yearGroup]/bundles/page.tsx              |  2 +-
 .../add-new-curriculum-model-card.tsx         | 19 ++++---
 .../curriculum-delivery-model.tsx             | 19 +++----
 app/generic/components/buttons/pagination.tsx | 16 +++++-
 .../components/buttons/two-stage-click.tsx    | 20 ++++---
 .../calendar/range/choose-calendar-range.tsx  | 37 +++++++------
 .../disclosure-that-grows-open.tsx            |  9 +--
 .../components/dropdown/filter-dropdown.tsx   |  1 -
 .../components/dropdown/tuple-selector.tsx    | 12 ++--
 .../components/overlays/deleted-overlay.tsx   | 13 +++--
 .../selective-context-range-slider.tsx        | 21 ++++---
 .../components/tab-layouts/tab-styled.tsx     | 16 ++++--
 .../components/tables/big-table-card.tsx      |  2 +-
 .../rating/rated-element-row-header.tsx       | 10 ++--
 .../tool-card/right-hand-tool-card.tsx        |  2 +-
 .../components/tool-card/tool-card.tsx        |  2 +-
 .../components/graph-view-options.tsx         |  9 +--
 .../components/node-detail-wrapper.tsx        | 43 ++++++++-------
 .../curriculum-delivery-graph.tsx             |  2 +-
 app/navbar/protected-navigation.tsx           | 20 +++----
 app/playground/page.tsx                       |  2 +-
 .../some-button-to-control-gary.tsx           |  6 +-
 .../apply-search-params.tsx                   |  1 -
 .../asset-suitability-table-wrapper.tsx       |  2 +-
 app/premises/classroom-suitability/page.tsx   |  2 +-
 .../search-params-filter-group.tsx            |  2 +-
 .../add-teacher-form/add-teacher-form.tsx     | 17 +++---
 .../teachers/skills/skill-table-wrapper.tsx   |  2 +-
 .../color-context-button.tsx                  | 14 +++--
 .../knowledge-domain-dependencies.tsx         |  8 +--
 .../knowledge-domain-name-cell.tsx            |  5 +-
 .../knowledge-domain-table-editor.tsx         |  4 +-
 .../new-knowledge-domain-button.tsx           | 21 ++++---
 .../knowledge-level-dependencies.tsx          |  8 +--
 .../knowledge-level-name-cell.tsx             |  5 +-
 .../knowledge-level-table-editor.tsx          |  2 +-
 .../new-knowledge-level-button.tsx            |  9 ++-
 .../[schedule]/data-not-found-card.tsx        |  4 +-
 tailwind.config.ts                            |  2 +-
 42 files changed, 266 insertions(+), 198 deletions(-)

diff --git a/app/build-metrics/[schedule]/page.tsx b/app/build-metrics/[schedule]/page.tsx
index 3d7697a..09f2a86 100644
--- a/app/build-metrics/[schedule]/page.tsx
+++ b/app/build-metrics/[schedule]/page.tsx
@@ -1,4 +1,5 @@
-import { Button, Card, Text, Title } from '@tremor/react';
+import { Button, Text, Title } from '@tremor/react';
+import { Card, CardBody } from '@nextui-org/react';
 import { BuildMetricsChart } from './buildMetricsChart';
 import MetricsContextProvider from './metrics-context-provider';
 
@@ -27,34 +28,40 @@ export default async function BuildMetricsOverview({
   const buildMetricDto = buildMetricDtoResponse.data;
   if (buildMetricDto === undefined) {
     console.log(buildMetricDtoResponse.message);
-    return <Card>No data found!</Card>;
+    return (
+      <Card>
+        <CardBody>No data found!</CardBody>
+      </Card>
+    );
   }
 
   return (
     <MetricsContextProvider buildMetricDto={buildMetricDto}>
       <Card>
-        <div className="flex items-center">
-          <Title className="mr-2">
-            Build Metric Overview, Schedule {scheduleId}
-          </Title>
-          <DropdownParam
-            paramOptions={filteredIds}
-            currentSelection={schedule}
-          />
-          <Link href={`/build-metrics/lesson-cycles/${scheduleId}`}>
-            <Button
-              color="gray"
-              className="ml-2 hover:bg-gray-400 outline-0 border-0"
-            >
-              Lesson Cycles
-            </Button>
-          </Link>
-        </div>
-        <Text>
-          Total allocation loops: {buildMetricDto.totalAllocationLoops}
-        </Text>
-        <Text>Final State: {buildMetricDto.finalState}</Text>
-        <BuildMetricsChart buildMetricData={buildMetricDto} />
+        <CardBody>
+          <div className="flex items-center">
+            <Title className="mr-2">
+              Build Metric Overview, Schedule {scheduleId}
+            </Title>
+            <DropdownParam
+              paramOptions={filteredIds}
+              currentSelection={schedule}
+            />
+            <Link href={`/build-metrics/lesson-cycles/${scheduleId}`}>
+              <Button
+                color="gray"
+                className="ml-2 hover:bg-gray-400 outline-0 border-0"
+              >
+                Lesson Cycles
+              </Button>
+            </Link>
+          </div>
+          <Text>
+            Total allocation loops: {buildMetricDto.totalAllocationLoops}
+          </Text>
+          <Text>Final State: {buildMetricDto.finalState}</Text>
+          <BuildMetricsChart buildMetricData={buildMetricDto} />
+        </CardBody>
       </Card>
     </MetricsContextProvider>
   );
diff --git a/app/curriculum/class-hierarchy/[yearGroup]/page.tsx b/app/curriculum/class-hierarchy/[yearGroup]/page.tsx
index f135e71..0e3cc55 100644
--- a/app/curriculum/class-hierarchy/[yearGroup]/page.tsx
+++ b/app/curriculum/class-hierarchy/[yearGroup]/page.tsx
@@ -4,7 +4,7 @@ import {
   getOrganizationGraphByOrganizationType,
   getSchemasByIdList
 } from '../../../api/actions/curriculum-delivery-model';
-import { Card } from '@tremor/react';
+import { Card } from '@nextui-org/react';
 
 import ForceGraphPage from '../../../graphing/force-graph-page';
 
diff --git a/app/curriculum/delivery-models/[yearGroup]/bundles/bundle-editor.tsx b/app/curriculum/delivery-models/[yearGroup]/bundles/bundle-editor.tsx
index ec449e5..db6a685 100644
--- a/app/curriculum/delivery-models/[yearGroup]/bundles/bundle-editor.tsx
+++ b/app/curriculum/delivery-models/[yearGroup]/bundles/bundle-editor.tsx
@@ -39,6 +39,7 @@ import {
   UnsavedBundleEdits
 } from '../../../../selective-context/keys/work-series-schema-bundle-keys';
 import { RenameModalWrapperContextKey } from '../../../../selective-context/keys/modal-keys';
+import { Button } from '@nextui-org/react';
 
 function bundleSort(
   bun1: WorkSeriesSchemaBundleLeanDto,
@@ -215,11 +216,11 @@ export function BundleEditor({
       <div className={'w-full flex items-center pb-2'}>
         <Title>Current Tab: </Title>
         <RenameButton
-          onClick={handleOpen}
+          onPress={handleOpen}
           currentName={nameOfBundle}
           className={'mx-2 '}
         />
-        <TwoStageClick onClick={() => deleteBundle(activeBundleAndId.id)}>
+        <TwoStageClick onPress={() => deleteBundle(activeBundleAndId.id)}>
           <TrashIcon className={'h-4 w-4'}></TrashIcon>
         </TwoStageClick>
         <span className={'grow'}></span>
@@ -258,12 +259,15 @@ export function BundleEditor({
             </div>
           </Tab.List>
 
-          <button
-            className={` btn btn-sm btn-outline px-0 w-[50px] `}
-            onClick={handleNewBundle}
+          <Button
+            className={`  px-0 w-[50px] `}
+            onPress={handleNewBundle}
+            variant={'ghost'}
+            size={'sm'}
+            color={'primary'}
           >
             <PlusCircleIcon className={'h-5 w-5'}></PlusCircleIcon>
-          </button>
+          </Button>
         </div>
         <Tab.Panels>
           {sortedBundleList.map(({ id }, index) => (
diff --git a/app/curriculum/delivery-models/[yearGroup]/bundles/page.tsx b/app/curriculum/delivery-models/[yearGroup]/bundles/page.tsx
index 4bbc471..9bb52fb 100644
--- a/app/curriculum/delivery-models/[yearGroup]/bundles/page.tsx
+++ b/app/curriculum/delivery-models/[yearGroup]/bundles/page.tsx
@@ -3,7 +3,7 @@ import {
   getCurriculumDeliveryModelSchemasByKnowledgeLevel
 } from '../../../../api/actions/curriculum-delivery-model';
 import { normalizeQueryParamToNumber } from '../../../../api/utils';
-import { Card } from '@tremor/react';
+import { Card } from '@nextui-org/react';
 import { BundleEditor } from './bundle-editor';
 import { BundleItemsContextProvider } from '../../contexts/bundle-items-context-provider';
 import { BundleAssignmentsProvider } from '../../contexts/bundle-assignments-provider';
diff --git a/app/curriculum/delivery-models/add-new-curriculum-model-card.tsx b/app/curriculum/delivery-models/add-new-curriculum-model-card.tsx
index f566e7a..06eee38 100644
--- a/app/curriculum/delivery-models/add-new-curriculum-model-card.tsx
+++ b/app/curriculum/delivery-models/add-new-curriculum-model-card.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { Card } from '@tremor/react';
+import { Button, Card } from '@nextui-org/react';
 import { PlusCircleIcon } from '@heroicons/react/24/outline';
 import React, { useMemo, useState } from 'react';
 
@@ -28,6 +28,7 @@ import {
   useModal
 } from '../../generic/components/modals/confirm-action-modal';
 import TupleSelector from '../../generic/components/dropdown/tuple-selector';
+import { isNotNull } from '../../api/main';
 
 const noTaskType: NameIdStringTuple = { name: 'No Type Selected', id: 'n/a' };
 
@@ -55,7 +56,8 @@ export function AddNewCurriculumModelCard({
   const { isOpen, closeModal, openModal } = useModal();
   const { workTaskTypeMap } = useWorkTaskTypeContext();
   const { dispatch, curriculumModelsMap } = useCurriculumModelContext();
-  const [newModelTaskType, setNewModelTaskType] = useState(noTaskType);
+  const [newModelTaskType, setNewModelTaskType] =
+    useState<NameIdStringTuple | null>(null);
   const [nextModelId, setNextModelId] = useState(crypto.randomUUID());
   const [revertUnsaved, setRevertUnsaved] = useState(true);
   const appRouterInstance = useRouter();
@@ -99,12 +101,13 @@ export function AddNewCurriculumModelCard({
     }
     setNextModelId(crypto.randomUUID());
     setNewModelTaskType(
-      taskTypeSelectionList.length > 0 ? taskTypeSelectionList[0] : noTaskType
+      taskTypeSelectionList.length > 0 ? taskTypeSelectionList[0] : null
     );
     closeModal();
   };
 
   const handleAddNewModel = () => {
+    if (!isNotNull(newModelTaskType)) return;
     const unsavedModel: WorkProjectSeriesSchemaDto = {
       ...curriculumModelsMap[nextModelId],
       id: nextModelId,
@@ -129,12 +132,14 @@ export function AddNewCurriculumModelCard({
   return (
     <>
       <Card className={'p-4'}>
-        <button
-          className={'btn btn-primary w-full h-full btn-outline'}
-          onClick={handleOpen}
+        <Button
+          className={' w-full h-full '}
+          variant={'ghost'}
+          color={'primary'}
+          onPress={handleOpen}
         >
           Add New Model <PlusCircleIcon className={'w-8 h-8'}></PlusCircleIcon>
-        </button>
+        </Button>
       </Card>
       <ConfirmActionModal
         show={isOpen}
diff --git a/app/curriculum/delivery-models/curriculum-delivery-model.tsx b/app/curriculum/delivery-models/curriculum-delivery-model.tsx
index 3b9a8ce..db06c32 100644
--- a/app/curriculum/delivery-models/curriculum-delivery-model.tsx
+++ b/app/curriculum/delivery-models/curriculum-delivery-model.tsx
@@ -21,6 +21,7 @@ import { TwoStageClick } from '../../generic/components/buttons/two-stage-click'
 import { TabStyled } from '../../generic/components/tab-layouts/tab-styled';
 import { TabPanelStyled } from '../../generic/components/tab-layouts/tab-panel-styled';
 import { RenameModal } from '../../generic/components/modals/rename-modal';
+import { Button } from '@nextui-org/react';
 
 const allocationSizes = [1, 2];
 
@@ -49,23 +50,19 @@ export function CurriculumDeliveryModel({
       <Tab.Group>
         <div className={'grid grid-cols-4 mb-2 items-center gap-0.5'}>
           <div className={'col-span-2 flex items-center gap-1'}>
-            <TwoStageClick
-              className={'btn-sm'}
-              standardAppearance={'btn-ghost'}
-              onClick={handleDelete}
-            >
+            <TwoStageClick standardAppearance={'light'} onPress={handleDelete}>
               {' '}
               <TrashIcon className={'h-4 w-4'}></TrashIcon>
             </TwoStageClick>
-            <button
-              className={
-                'btn btn-ghost btn-sm w-3/4 flex overflow-hidden flex-nowrap'
-              }
-              onClick={openModal}
+            <Button
+              className={'w-3/4 flex overflow-hidden flex-nowrap'}
+              onPress={openModal}
+              size={'sm'}
+              variant={'light'}
             >
               <span className={'truncate ... w-3/4'}>{model.name}</span>
               <PencilSquareIcon className={'h-4 w-4 grow'}></PencilSquareIcon>
-            </button>
+            </Button>
           </div>
           <Tab.List className={'grid col-span-2 grow grid-cols-2'}>
             <TabStyled>Periods</TabStyled>
diff --git a/app/generic/components/buttons/pagination.tsx b/app/generic/components/buttons/pagination.tsx
index dc06f46..fd8962e 100644
--- a/app/generic/components/buttons/pagination.tsx
+++ b/app/generic/components/buttons/pagination.tsx
@@ -10,7 +10,9 @@ import { useEffect, useState, useTransition } from 'react';
 import ProtectedNavigation from '../../../navbar/protected-navigation';
 
 import { zeroIndexToOneIndex } from '../../../api/utils';
-const buttonClassName = 'btn  relative btn-primary btn-outline';
+import { ButtonProps } from '@nextui-org/react';
+const buttonClassName = ' relative ';
+
 const svgClassName = 'h-5 w-5 ';
 
 /**
@@ -72,6 +74,9 @@ export function Pagination({
     <div className={'my-2 gap-x-1 flex'}>
       {!!lastPage && (
         <ProtectedNavigation
+          variant={'ghost'}
+          isIconOnly
+          color={'primary'}
           className={`${buttonClassName}`}
           disabled={first || pending}
           onConfirm={toFirstPage}
@@ -85,6 +90,9 @@ export function Pagination({
         </ProtectedNavigation>
       )}
       <ProtectedNavigation
+        variant={'ghost'}
+        isIconOnly
+        color={'primary'}
         className={`${buttonClassName}`}
         disabled={first || pending}
         onConfirm={() => handleClick(false)}
@@ -95,6 +103,9 @@ export function Pagination({
         <ArrowLeftIcon className={svgClassName}></ArrowLeftIcon>
       </ProtectedNavigation>
       <ProtectedNavigation
+        variant={'ghost'}
+        isIconOnly
+        color={'primary'}
         className={`${buttonClassName}`}
         onConfirm={() => handleClick(true)}
         disabled={last || pending}
@@ -106,6 +117,9 @@ export function Pagination({
       </ProtectedNavigation>
       {!!lastPage && (
         <ProtectedNavigation
+          variant={'ghost'}
+          isIconOnly
+          color={'primary'}
           className={`${buttonClassName}`}
           disabled={last || pending}
           onConfirm={toLastPage}
diff --git a/app/generic/components/buttons/two-stage-click.tsx b/app/generic/components/buttons/two-stage-click.tsx
index 91e0f1d..8a0f6f5 100644
--- a/app/generic/components/buttons/two-stage-click.tsx
+++ b/app/generic/components/buttons/two-stage-click.tsx
@@ -2,11 +2,13 @@ import React, { useRef, useState } from 'react';
 import { Badge } from '@tremor/react';
 import { offset, useFloating } from '@floating-ui/react';
 import { GenericButtonProps } from './rename-button';
-import { Button } from '@nextui-org/react';
+import { Button, ButtonProps } from '@nextui-org/react';
+import { PressEvent } from '@react-types/shared';
+import { isNotUndefined } from '../../../api/main';
 
 export function TwoStageClick({
   children,
-  onClick,
+  onPress,
   standardAppearance = 'ghost',
   primedAppearance = 'danger',
   primedMessage = 'Confirm delete?',
@@ -16,7 +18,7 @@ export function TwoStageClick({
   standardAppearance?: 'light' | 'ghost';
   primedAppearance?: 'danger' | 'primary';
   primedMessage?: string;
-} & GenericButtonProps) {
+} & ButtonProps) {
   const [clickPrimed, setClickPrimed] = useState(false);
   const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
   const { refs, floatingStyles } = useFloating({
@@ -24,9 +26,9 @@ export function TwoStageClick({
     middleware: [offset({ mainAxis: 10 })]
   });
 
-  const guardClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    if (clickPrimed && onClick) {
-      onClick(e);
+  const guardClick = (e: PressEvent) => {
+    if (clickPrimed && isNotUndefined(onPress)) {
+      onPress(e);
       setClickPrimed(false);
       if (timeoutRef.current !== undefined) clearTimeout(timeoutRef.current);
     } else {
@@ -43,7 +45,7 @@ export function TwoStageClick({
         color={clickPrimed ? primedAppearance : 'default'}
         variant={standardAppearance}
         size={'sm'}
-        onClick={guardClick}
+        onPress={guardClick}
       >
         {children}
       </Button>
@@ -51,9 +53,9 @@ export function TwoStageClick({
         <div
           ref={refs.setFloating}
           style={floatingStyles}
-          className={'bg-white bg-opacity-100 w-fit h-fit rounded-md'}
+          className={'bg-white bg-opacity-100 w-fit h-fit rounded-md z-10'}
         >
-          <Badge color={'red'} onClick={guardClick}>
+          <Badge color={'red'} className={''}>
             {primedMessage}
           </Badge>
         </div>
diff --git a/app/generic/components/calendar/range/choose-calendar-range.tsx b/app/generic/components/calendar/range/choose-calendar-range.tsx
index 1370cce..4341a4f 100644
--- a/app/generic/components/calendar/range/choose-calendar-range.tsx
+++ b/app/generic/components/calendar/range/choose-calendar-range.tsx
@@ -17,6 +17,7 @@ import { ChevronLeftIcon } from '@heroicons/react/24/solid';
 import ZoomBothAxes from '../../zoom/zoom-both-axes';
 import { Tooltip, TooltipTrigger } from '../../tooltips/tooltip';
 import { StandardTooltipContent } from '../../tooltips/standard-tooltip-content';
+import { Button } from '@nextui-org/react';
 type TooltipOptions =
   | 'minusWeek'
   | 'minusDay'
@@ -87,21 +88,23 @@ export function ChooseCalendarRange() {
           <div className=" flex justify-center">
             <div className="flex items-center ">
               <LocalToolTip option={'minusWeek'}>
-                <button
-                  className="btn-sm btn m-2"
-                  onClick={() => handleRangeUpdate(-7)}
+                <Button
+                  className="m-2"
+                  size={'sm'}
+                  onPress={() => handleRangeUpdate(-7)}
                 >
                   <ArrowLeftIcon className="h-4 w-4 m-0"></ArrowLeftIcon>Week
-                </button>
+                </Button>
               </LocalToolTip>
 
               <LocalToolTip option={'minusDay'}>
-                <button
-                  className="btn-sm btn m-2"
-                  onClick={() => handleRangeUpdate(-1)}
+                <Button
+                  className="m-2"
+                  size={'sm'}
+                  onPress={() => handleRangeUpdate(-1)}
                 >
                   <ArrowLeftIcon className="h-4 w-4 m-0"></ArrowLeftIcon>Day
-                </button>
+                </Button>
               </LocalToolTip>
               <LocalToolTip option={'adjustRange'}>
                 <Disclosure.Button className="mb-2 inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2">
@@ -124,20 +127,22 @@ export function ChooseCalendarRange() {
               </LocalToolTip>
               <div className="ml-4"></div>
               <LocalToolTip option={'plusDay'}>
-                <button
-                  className="btn btn-sm m-2"
-                  onClick={() => handleRangeUpdate(1)}
+                <Button
+                  className="m-2"
+                  size={'sm'}
+                  onPress={() => handleRangeUpdate(1)}
                 >
                   Day<ArrowRightIcon className="h-4 w-4"></ArrowRightIcon>
-                </button>
+                </Button>
               </LocalToolTip>
               <LocalToolTip option={'plusWeek'}>
-                <button
-                  className="btn btn-sm m-2"
-                  onClick={() => handleRangeUpdate(7)}
+                <Button
+                  className="m-2"
+                  size={'sm'}
+                  onPress={() => handleRangeUpdate(7)}
                 >
                   Week<ArrowRightIcon className="h-4 w-4"></ArrowRightIcon>
-                </button>
+                </Button>
               </LocalToolTip>
             </div>
           </div>
diff --git a/app/generic/components/disclosures/disclosure-that-grows-open.tsx b/app/generic/components/disclosures/disclosure-that-grows-open.tsx
index 105b9e3..71e153b 100644
--- a/app/generic/components/disclosures/disclosure-that-grows-open.tsx
+++ b/app/generic/components/disclosures/disclosure-that-grows-open.tsx
@@ -1,5 +1,6 @@
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
 import { PropsWithChildren, useState } from 'react';
+import { Button } from '@nextui-org/react';
 
 export function DisclosureThatGrowsOpen({
   children,
@@ -15,9 +16,9 @@ export function DisclosureThatGrowsOpen({
 
   return (
     <div className={`flex flex-col w-96 `}>
-      <button
-        className={`btn ${showSliders ? 'btn-primary' : ''}`}
-        onClick={() => setShowSliders(!showSliders)}
+      <Button
+        color={`${showSliders ? 'primary' : 'default'}`}
+        onPress={() => setShowSliders(!showSliders)}
       >
         {label}
         <ChevronDownIcon
@@ -25,7 +26,7 @@ export function DisclosureThatGrowsOpen({
             !showSliders ? 'rotate-90 transform' : ''
           } transition-transform duration-500`}
         ></ChevronDownIcon>
-      </button>
+      </Button>
 
       <div
         className={`mt-2 rounded-lg border-slate-300 ${
diff --git a/app/generic/components/dropdown/filter-dropdown.tsx b/app/generic/components/dropdown/filter-dropdown.tsx
index 1219254..55b1f24 100644
--- a/app/generic/components/dropdown/filter-dropdown.tsx
+++ b/app/generic/components/dropdown/filter-dropdown.tsx
@@ -75,7 +75,6 @@ export function FilterDropdown({
         by="URI"
         onChange={handleOnChange}
         multiple
-        // className={`btn bg-${color}-400 hover:bg-${color}-500 normal-case text-xs w-fit h-min min-h-0 p-2 my-0 mx-2`}
       >
         <div className=" relative mt-1">
           <Listbox.Button
diff --git a/app/generic/components/dropdown/tuple-selector.tsx b/app/generic/components/dropdown/tuple-selector.tsx
index 37a968d..7eca4b6 100644
--- a/app/generic/components/dropdown/tuple-selector.tsx
+++ b/app/generic/components/dropdown/tuple-selector.tsx
@@ -4,6 +4,7 @@ import React, { Fragment } from 'react';
 import { CheckIcon, XCircleIcon } from '@heroicons/react/20/solid';
 import { NameIdStringTuple } from '../../../api/dtos/NameIdStringTupleSchema';
 import { isNotNull } from '../../../api/main';
+import { Button } from '@nextui-org/react';
 
 export type OptionTransformer = React.FC<OptionTransformerProps>;
 
@@ -62,11 +63,14 @@ export default function TupleSelector({
             </span>
             <span></span>
           </Listbox.Button>
-          <button
-            className={`btn btn-ghost p-0 rounded-full btn-square  btn-sm ${
+          <Button
+            variant={'light'}
+            size={'sm'}
+            isIconOnly
+            className={`p-0 rounded-full ${
               isNotNull(selectedState) ? '' : 'opacity-0'
             }`}
-            onClick={() => updateSelectedState(null)}
+            onPress={() => updateSelectedState(null)}
             disabled={!isNotNull(selectedState)}
           >
             <XCircleIcon
@@ -74,7 +78,7 @@ export default function TupleSelector({
                 isNotNull(selectedState) ? '' : 'opacity-0'
               }`}
             ></XCircleIcon>
-          </button>
+          </Button>
           <span className="pointer-events-none flex items-center pr-2">
             <ChevronUpDownIcon
               className="h-5 w-5 text-gray-400"
diff --git a/app/generic/components/overlays/deleted-overlay.tsx b/app/generic/components/overlays/deleted-overlay.tsx
index 8f3aef1..51993ff 100644
--- a/app/generic/components/overlays/deleted-overlay.tsx
+++ b/app/generic/components/overlays/deleted-overlay.tsx
@@ -1,5 +1,6 @@
 import { XMarkIcon } from '@heroicons/react/24/outline';
 import { Overlay } from './overlay';
+import { Button } from '@nextui-org/react';
 
 export function DeletedOverlay({
   show,
@@ -12,14 +13,16 @@ export function DeletedOverlay({
     <>
       {show && (
         <Overlay>
-          <button
+          <Button
             className={
-              'w-full h-full btn-outline transition-colors duration-500'
+              'w-full h-full transition-colors duration-500 rounded-none border-0 place-content-center p-2'
             }
-            onClick={handleUnDelete}
+            onPress={handleUnDelete}
+            variant={'ghost'}
+            isIconOnly
           >
-            <XMarkIcon className={'h-full w-full opacity-50'}></XMarkIcon>
-          </button>
+            <XMarkIcon className={'h-full  opacity-50'}></XMarkIcon>
+          </Button>
         </Overlay>
       )}
     </>
diff --git a/app/generic/components/range-input/selective-context-range-slider.tsx b/app/generic/components/range-input/selective-context-range-slider.tsx
index a1c41b6..65a5652 100644
--- a/app/generic/components/range-input/selective-context-range-slider.tsx
+++ b/app/generic/components/range-input/selective-context-range-slider.tsx
@@ -1,6 +1,7 @@
 'use client';
 import React from 'react';
 import { useSelectiveContextControllerNumber } from '../../../selective-context/components/typed/selective-context-manager-number';
+import { Slider } from '@nextui-org/react';
 
 export function SelectiveContextRangeSlider({
   contextKey,
@@ -22,19 +23,25 @@ export function SelectiveContextRangeSlider({
   });
 
   return (
-    <input
+    <Slider
+      className={'max-w-[50%]'}
+      hideValue={false}
+      showTooltip={true}
+      hideThumb
+      size={'md'}
       name={contextKey}
       id={contextKey}
-      type={'range'}
-      min={minValue}
-      max={maxValue}
+      minValue={minValue}
+      maxValue={maxValue}
       value={currentState}
-      onChange={(event) => {
+      onChange={(value) => {
+        const singleValue = Array.isArray(value) ? value[0] : value;
+
         dispatchUpdate({
           contextKey: contextKey,
-          value: parseInt(event.target.value)
+          value: singleValue
         });
       }}
-    ></input>
+    ></Slider>
   );
 }
diff --git a/app/generic/components/tab-layouts/tab-styled.tsx b/app/generic/components/tab-layouts/tab-styled.tsx
index 3e39f52..26c7326 100644
--- a/app/generic/components/tab-layouts/tab-styled.tsx
+++ b/app/generic/components/tab-layouts/tab-styled.tsx
@@ -1,17 +1,21 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { Tab } from '@headlessui/react';
+import { Button } from '@nextui-org/react';
+import { isFragment } from 'preact/compat';
 
 export function TabStyled({ children }: { children: string }) {
   return (
-    <Tab as={'div'} className={'w-full p-0.5 rounded-lg overflow-hidden'}>
-      {({ selected }) => (
-        <button
-          className={`w-full btn btn-sm btn-outline py-0 text-xs   ${
+    <Tab as={Fragment}>
+      {({ selected, ...props }) => (
+        <Button
+          className={`w-full py-0 text-xs p-0.5 rounded-lg overflow-hidden  ${
             selected ? '' : 'opacity-25'
           }`}
+          variant={'ghost'}
+          size={'sm'}
         >
           <span className={'truncate ...'}>{children}</span>
-        </button>
+        </Button>
       )}
     </Tab>
   );
diff --git a/app/generic/components/tables/big-table-card.tsx b/app/generic/components/tables/big-table-card.tsx
index a34830c..16070f5 100644
--- a/app/generic/components/tables/big-table-card.tsx
+++ b/app/generic/components/tables/big-table-card.tsx
@@ -1,4 +1,4 @@
-import { Card } from '@tremor/react';
+import { Card } from '@nextui-org/react';
 import React from 'react';
 
 export default function BigTableCard({
diff --git a/app/generic/components/tables/rating/rated-element-row-header.tsx b/app/generic/components/tables/rating/rated-element-row-header.tsx
index eb706b5..2ba2236 100644
--- a/app/generic/components/tables/rating/rated-element-row-header.tsx
+++ b/app/generic/components/tables/rating/rated-element-row-header.tsx
@@ -7,6 +7,7 @@ import { EmptyArray, isNotUndefined } from '../../../../api/main';
 import { useUnsavedListContext } from '../../../../selective-context/hooks/derived/use-unsaved-list-context';
 import { RatingStepper } from '../../buttons/rating-stepper';
 import { ArrowRightIcon, PencilSquareIcon } from '@heroicons/react/20/solid';
+import { Button } from '@nextui-org/react';
 
 export function RatedElementRowHeader<R, E>({
   elementWithRating
@@ -57,17 +58,18 @@ export function RatedElementRowHeader<R, E>({
 
   return (
     <>
-      <button
+      <Button
         className={
-          'btn rounded-none w-full h-full px-1 btn-xs text-left flex justify-between focus-visible:outline-offset-0 focus-visible:outline-1'
+          'rounded-none w-full h-full m-0 border-0 px-1 text-left focus:outline-offset-0 flex justify-between focus-visible:outline-offset-0 outline-offset-0 focus-visible:outline-1 data-[focus-visible=true]:outline-offset-0'
         }
-        onClick={() =>
+        onPress={() =>
           triggerModal({ elementWithRating, rating: currentState[0] })
         }
+        // size={'md'}
       >
         {elementLabelAccessor(elementWithRating)}
         <ArrowRightIcon className={'w-4 h-4 '}></ArrowRightIcon>
-      </button>
+      </Button>
       <ConfirmActionModal
         show={show}
         onClose={onClose}
diff --git a/app/generic/components/tool-card/right-hand-tool-card.tsx b/app/generic/components/tool-card/right-hand-tool-card.tsx
index df23e89..e551902 100644
--- a/app/generic/components/tool-card/right-hand-tool-card.tsx
+++ b/app/generic/components/tool-card/right-hand-tool-card.tsx
@@ -1,4 +1,4 @@
-import { Card } from '@tremor/react';
+import { Card } from '@nextui-org/react';
 import React from 'react';
 
 interface Props {
diff --git a/app/generic/components/tool-card/tool-card.tsx b/app/generic/components/tool-card/tool-card.tsx
index 69da0f7..0d63491 100644
--- a/app/generic/components/tool-card/tool-card.tsx
+++ b/app/generic/components/tool-card/tool-card.tsx
@@ -1,4 +1,4 @@
-import { Card } from '@tremor/react';
+import { Card } from '@nextui-org/react';
 import React from 'react';
 
 interface Props {
diff --git a/app/graphing/components/graph-view-options.tsx b/app/graphing/components/graph-view-options.tsx
index 3390de1..fd20d86 100644
--- a/app/graphing/components/graph-view-options.tsx
+++ b/app/graphing/components/graph-view-options.tsx
@@ -10,6 +10,7 @@ import { GraphContext } from '../graph/graph-context-creator';
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
 import { StandardTooltipContent } from '../../generic/components/tooltips/standard-tooltip-content';
 import { DefaultGraphZoom, MaxGraphZoom } from '../graph/graph';
+import { Button } from '@nextui-org/react';
 
 const graphToggles: GraphToggleProps[] = [
   {
@@ -52,9 +53,9 @@ export default function GraphViewOptions() {
   }, [showSliders]);
   return (
     <>
-      <button
-        className={`btn ${showSliders ? 'btn-primary' : ''}`}
-        onClick={() => setShowSliders(!showSliders)}
+      <Button
+        color={`${showSliders ? 'primary' : 'default'}`}
+        onPress={() => setShowSliders(!showSliders)}
       >
         View Options
         <ChevronDownIcon
@@ -62,7 +63,7 @@ export default function GraphViewOptions() {
             !showSliders ? 'rotate-90 transform' : ''
           } transition-transform duration-500`}
         ></ChevronDownIcon>
-      </button>
+      </Button>
       <div
         className={`mt-2 h-fit w-fit flex flex-col gap-1 items-center transition-opacity duration-500 ${
           showSliders ? 'opacity-100' : 'opacity-0 -z-10 '
diff --git a/app/graphing/components/node-detail-wrapper.tsx b/app/graphing/components/node-detail-wrapper.tsx
index e26e8a5..2e168b7 100644
--- a/app/graphing/components/node-detail-wrapper.tsx
+++ b/app/graphing/components/node-detail-wrapper.tsx
@@ -1,5 +1,5 @@
 'use client';
-import React, { PropsWithChildren } from 'react';
+import React, { Fragment, PropsWithChildren } from 'react';
 import { Disclosure } from '@headlessui/react';
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
 import { DataNode } from '../../api/zod-mods';
@@ -11,6 +11,7 @@ import {
 import { StarIcon as StarIconOutline } from '@heroicons/react/24/outline';
 import { StarIcon } from '@heroicons/react/24/solid';
 import { HasNumberIdDto } from '../../api/dtos/HasNumberIdDtoSchema';
+import { Button } from '@nextui-org/react';
 
 export function NodeDetailWrapper<T extends HasNumberIdDto>({
   label,
@@ -29,17 +30,18 @@ export function NodeDetailWrapper<T extends HasNumberIdDto>({
         <>
           <div className={'p-0.5'}>
             <SelectionOutline showOutline={isSelected}>
-              <div className={'flex w-full'}>
-                <button
-                  onClick={() => handleDispatch()}
-                  className={'btn border-0 m-0'}
+              <div className={'flex w-full items-center'}>
+                <Button
+                  onPress={() => handleDispatch()}
+                  className={'border-0 m-0'}
+                  isIconOnly
                 >
                   {isSelected ? (
                     <StarIcon className={'h-4 w-4 fill-amber-300'}></StarIcon>
                   ) : (
                     <StarIconOutline className={'h-4 w-4'}></StarIconOutline>
                   )}
-                </button>
+                </Button>
                 <StandardDisclosureButton
                   open={open}
                   label={label}
@@ -63,19 +65,22 @@ function StandardDisclosureButton({
   label: string;
 }) {
   return (
-    <Disclosure.Button
-      className={`btn ${
-        open ? 'btn-primary' : ''
-      } max-w-full w-[300px] grow flex justify-between`}
-    >
-      <span className={'w-5/6 h-fit leading-6 text-left truncate ...'}>
-        {label}
-      </span>
-      <ChevronDownIcon
-        className={`w-6 h-6 ${
-          !open ? 'rotate-90 transform' : ''
-        } transition-transform duration-500`}
-      ></ChevronDownIcon>
+    <Disclosure.Button as={Fragment}>
+      {({ open }) => (
+        <Button
+          color={`${open ? 'primary' : 'default'}`}
+          className={`max-w-full w-[300px] grow flex justify-between`}
+        >
+          <span className={'w-5/6 h-fit leading-6 text-left truncate ...'}>
+            {label}
+          </span>
+          <ChevronDownIcon
+            className={`w-6 h-6 ${
+              !open ? 'rotate-90 transform' : ''
+            } transition-transform duration-500`}
+          ></ChevronDownIcon>
+        </Button>
+      )}
     </Disclosure.Button>
   );
 }
diff --git a/app/graphing/graph-types/organization/curriculum-delivery-graph.tsx b/app/graphing/graph-types/organization/curriculum-delivery-graph.tsx
index 763cb0e..6c3e356 100644
--- a/app/graphing/graph-types/organization/curriculum-delivery-graph.tsx
+++ b/app/graphing/graph-types/organization/curriculum-delivery-graph.tsx
@@ -5,7 +5,7 @@ import {
   GraphDtoPutRequestBody
 } from '../../../api/zod-mods';
 import React, { PropsWithChildren, useEffect, useMemo } from 'react';
-import { Card } from '@tremor/react';
+import { Card } from '@nextui-org/react';
 import CurriculumDeliveryDetails from './curriculum-delivery-details';
 import { NodePayload } from '../../force-graph-page';
 import { WorkSeriesBundleDeliveryDto } from '../../../api/dtos/WorkSeriesBundleDeliveryDtoSchema';
diff --git a/app/navbar/protected-navigation.tsx b/app/navbar/protected-navigation.tsx
index 8150c06..f307882 100644
--- a/app/navbar/protected-navigation.tsx
+++ b/app/navbar/protected-navigation.tsx
@@ -11,14 +11,11 @@ import {
   useSelectiveContextDispatchBoolean,
   useSelectiveContextListenerBoolean
 } from '../selective-context/components/typed/selective-context-manager-boolean';
+import { Button, ButtonProps } from '@nextui-org/react';
 
 const paginationUnsavedListenerKey = ':pagination';
 
-export interface ProtectedNavigationProps
-  extends React.DetailedHTMLProps<
-    React.ButtonHTMLAttributes<HTMLButtonElement>,
-    HTMLButtonElement
-  > {
+export interface ProtectedNavigationProps extends ButtonProps {
   onConfirm: () => void;
   children: ReactNode;
   isActive?: boolean;
@@ -49,7 +46,8 @@ const ProtectedNavigation = forwardRef<
     unsavedContextKey,
     unsavedListenerKey: listenerKeyProp,
     className,
-    disabled
+    disabled,
+    ...buttonProps
   } = props;
   let [isOpen, setIsOpen] = useState(false);
 
@@ -86,9 +84,9 @@ const ProtectedNavigation = forwardRef<
 
   return (
     <>
-      <button
-        type="button"
-        onClick={
+      <Button
+        {...buttonProps}
+        onPress={
           requestConfirmation || protectionActive
             ? openModal
             : () => {
@@ -97,10 +95,10 @@ const ProtectedNavigation = forwardRef<
         }
         className={finalClassNames}
         aria-current={isActive ? 'page' : undefined}
-        disabled={disabled}
+        isDisabled={disabled}
       >
         {children}
-      </button>
+      </Button>
 
       <Transition appear show={isOpen} as={Fragment}>
         <Dialog as="div" className="relative z-50" onClose={closeModal}>
diff --git a/app/playground/page.tsx b/app/playground/page.tsx
index 2e68368..4f0276e 100644
--- a/app/playground/page.tsx
+++ b/app/playground/page.tsx
@@ -1,5 +1,5 @@
 import SomeComponent from './some-component';
-import { Card } from '@tremor/react';
+import { Card } from '@nextui-org/react';
 import SelectiveContextManagerGlobal from '../selective-context/components/global/selective-context-manager-global';
 import SomeButtonToControlGary from './some-button-to-control-gary';
 import SomeComponentInterestedInGary from './some-component-interested-in-gary';
diff --git a/app/playground/some-button-to-control-gary.tsx b/app/playground/some-button-to-control-gary.tsx
index 46f5d6e..2ed788b 100644
--- a/app/playground/some-button-to-control-gary.tsx
+++ b/app/playground/some-button-to-control-gary.tsx
@@ -3,6 +3,7 @@ import { useSelectiveContextAnyDispatch } from '../selective-context/components/
 import { NameIdStringTuple } from '../api/dtos/NameIdStringTupleSchema';
 import { ObjectPlaceholder } from '../selective-context/components/typed/selective-context-manager-function';
 import { parseTen } from '../api/date-and-time';
+import { Button } from '@nextui-org/react';
 
 export default function SomeButtonToControlGary() {
   const { dispatchWithoutControl, currentState } =
@@ -13,8 +14,7 @@ export default function SomeButtonToControlGary() {
     });
 
   return (
-    <button
-      className={'btn '}
+    <Button
       onClick={() =>
         dispatchWithoutControl({
           ...currentState,
@@ -23,6 +23,6 @@ export default function SomeButtonToControlGary() {
       }
     >
       Increment Id
-    </button>
+    </Button>
   );
 }
diff --git a/app/premises/classroom-suitability/apply-search-params.tsx b/app/premises/classroom-suitability/apply-search-params.tsx
index 36db651..a20e283 100644
--- a/app/premises/classroom-suitability/apply-search-params.tsx
+++ b/app/premises/classroom-suitability/apply-search-params.tsx
@@ -34,7 +34,6 @@ export function ApplySearchParams({
   return (
     <ProtectedNavigation
       onConfirm={handleApplyParams}
-      className={'btn'}
       unsavedContextKey={unsavedContextKey}
       unsavedListenerKey={'apply-params'}
     >
diff --git a/app/premises/classroom-suitability/asset-suitability-table-wrapper.tsx b/app/premises/classroom-suitability/asset-suitability-table-wrapper.tsx
index 96b7ec2..6cc482e 100644
--- a/app/premises/classroom-suitability/asset-suitability-table-wrapper.tsx
+++ b/app/premises/classroom-suitability/asset-suitability-table-wrapper.tsx
@@ -4,7 +4,7 @@ import { IdStringFromNumberAccessor } from './rating-table-accessor-functions';
 import { useWorkTaskTypeContext } from '../../curriculum/delivery-models/contexts/use-work-task-type-context';
 import { useSelectiveContextControllerNumberList } from '../../selective-context/components/typed/selective-context-manager-number-list';
 import { useAssetStringMapContext } from '../asset-string-map-context-creator';
-import { Card } from '@tremor/react';
+import { Card } from '@nextui-org/react';
 import { RatingTableBody } from '../../generic/components/tables/rating/rating-table-body';
 import { useMemoizedSelectionFromListAndStringMap } from './use-memoized-selection-from-list-and-string-map';
 import { EmptyArray } from '../../api/main';
diff --git a/app/premises/classroom-suitability/page.tsx b/app/premises/classroom-suitability/page.tsx
index 3dd1e3f..e704ac1 100644
--- a/app/premises/classroom-suitability/page.tsx
+++ b/app/premises/classroom-suitability/page.tsx
@@ -6,7 +6,7 @@ import {
   getPremises,
   getPremisesWithRoot
 } from '../../api/actions/premises';
-import { Card } from '@tremor/react';
+import { Card } from '@nextui-org/react';
 import { AssetSuitabilityTableWrapper } from './asset-suitability-table-wrapper';
 import { getWorkTaskTypes } from '../../api/actions/work-task-types';
 import { isNotUndefined } from '../../api/main';
diff --git a/app/premises/classroom-suitability/search-params-filter-group.tsx b/app/premises/classroom-suitability/search-params-filter-group.tsx
index a50f3f1..95cd4bf 100644
--- a/app/premises/classroom-suitability/search-params-filter-group.tsx
+++ b/app/premises/classroom-suitability/search-params-filter-group.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { Card } from '@tremor/react';
+import { Card } from '@nextui-org/react';
 import { AccessorFunction } from '../../generic/components/tables/rating/rating-table';
 import SearchParamsContextProvider from '../../contexts/string-map-context/search-params-context-provider';
 import { ApplySearchParams } from './apply-search-params';
diff --git a/app/staffroom/add-teacher-form/add-teacher-form.tsx b/app/staffroom/add-teacher-form/add-teacher-form.tsx
index 59dce13..9fc3357 100644
--- a/app/staffroom/add-teacher-form/add-teacher-form.tsx
+++ b/app/staffroom/add-teacher-form/add-teacher-form.tsx
@@ -24,6 +24,7 @@ import { createTeacher } from '../../api/actions/provider-roles';
 import { useServiceCategoryContext } from '../../work-types/lessons/use-service-category-context';
 import { useProviderRoleStringMapContext } from '../contexts/providerRoles/provider-role-string-map-context-creator';
 import { Overlay } from '../../generic/components/overlays/overlay';
+import { Button, Card, CardBody, CardFooter } from '@nextui-org/react';
 
 const partyData: PersonDto[] = [
   {
@@ -110,10 +111,10 @@ export default function AddTeacherForm() {
     );
   }
   return (
-    <>
+    <Card className={'overflow-visible'}>
       {!serverAvailable && <Overlay>Server not available.</Overlay>}
       <form onSubmit={handleSubmit(onSubmit)}>
-        <div className={'flex flex-col gap-y-4'}>
+        <CardBody className={'flex flex-col gap-y-4 overflow-visible'}>
           <Title className={'py-2'}>Form to add a teacher.</Title>
           <div>
             <div>Use existing person:</div>
@@ -261,7 +262,7 @@ export default function AddTeacherForm() {
                   </Listbox.Button>
                   <Listbox.Options
                     className={
-                      'absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm '
+                      'absolute mt-1 max-h-60 w-full z-20 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm '
                     }
                   >
                     {domainArray.map((knowledgeDomain) => (
@@ -294,11 +295,11 @@ export default function AddTeacherForm() {
               )}
             />
           </div>
-          <div className={'flex justify-center'}>
-            <button className={'btn btn-primary'}>Submit</button>
-          </div>
-        </div>
+        </CardBody>
+        <CardFooter className={'flex justify-center'}>
+          <Button color={'primary'}>Submit</Button>
+        </CardFooter>
       </form>
-    </>
+    </Card>
   );
 }
diff --git a/app/staffroom/teachers/skills/skill-table-wrapper.tsx b/app/staffroom/teachers/skills/skill-table-wrapper.tsx
index 6c6ea46..7381adb 100644
--- a/app/staffroom/teachers/skills/skill-table-wrapper.tsx
+++ b/app/staffroom/teachers/skills/skill-table-wrapper.tsx
@@ -2,7 +2,7 @@
 import RatingTable from '../../../generic/components/tables/rating/rating-table';
 import { RatingTableBody } from '../../../generic/components/tables/rating/rating-table-body';
 import { IdStringFromNumberAccessor } from '../../../premises/classroom-suitability/rating-table-accessor-functions';
-import { Card } from '@tremor/react';
+import { Card } from '@nextui-org/react';
 import { useProviderRoleStringMapContext } from '../../contexts/providerRoles/provider-role-string-map-context-creator';
 import { useSelectiveContextControllerNumberList } from '../../../selective-context/components/typed/selective-context-manager-number-list';
 import { ProviderRoleSelectionList } from '../provider-role-disclosure-list-panel/provider-role-button-cluster';
diff --git a/app/staffroom/workshop-job-modal/color-context-button.tsx b/app/staffroom/workshop-job-modal/color-context-button.tsx
index 8fc15f0..b02790f 100644
--- a/app/staffroom/workshop-job-modal/color-context-button.tsx
+++ b/app/staffroom/workshop-job-modal/color-context-button.tsx
@@ -2,9 +2,9 @@
 import { ButtonHTMLAttributes, useContext } from 'react';
 import { RunnableContext } from './runnable-context';
 import { ColorCoding } from '../../generic/components/color/color-coding-context';
+import { Button, ButtonProps } from '@nextui-org/react';
 
-interface ColorContextButtonProps
-  extends ButtonHTMLAttributes<HTMLButtonElement> {
+interface ColorContextButtonProps extends ButtonProps {
   contextKey: string;
 }
 
@@ -20,14 +20,16 @@ export function ColorContextButton({
   const hue = colorCodingContextElement?.hue;
   const id = hue?.id || 'gray';
   return (
-    <button
-      className={`btn btn-xs btn-outline text-${id}-600 hover:bg-${id}-600 hover:border-${id}-600 leading-[0px] ${
+    <Button
+      size={'sm'}
+      variant={'ghost'}
+      className={`text-${id}-600 hover:bg-${id}-600 hover:border-${id}-600 leading-[0px] ${
         className ? className : ''
       }`}
       {...otherProps}
-      onClick={callback}
+      onPress={callback}
     >
       {children}
-    </button>
+    </Button>
   );
 }
diff --git a/app/teaching-categories/[categoryIdentifier]/knowledge-domain/knowledge-domain-dependencies.tsx b/app/teaching-categories/[categoryIdentifier]/knowledge-domain/knowledge-domain-dependencies.tsx
index d84e3e6..9c8f163 100644
--- a/app/teaching-categories/[categoryIdentifier]/knowledge-domain/knowledge-domain-dependencies.tsx
+++ b/app/teaching-categories/[categoryIdentifier]/knowledge-domain/knowledge-domain-dependencies.tsx
@@ -20,10 +20,9 @@ export function KnowledgeDomainDependencies({
           workTaskTypeCount
         )
       }
-      standardAppearance={'btn-ghost'}
-      primedAppearance={'btn-primary'}
+      standardAppearance={'light'}
+      primedAppearance={'primary'}
       primedMessage={'Go to dependencies?'}
-      className={'btn-sm'}
     >
       {workTaskTypeCount}
     </TwoStageClick>
@@ -32,8 +31,7 @@ export function KnowledgeDomainDependencies({
       onClick={() => {
         deleteKnowledgeDomain(kd).then(() => appRouterInstance.refresh());
       }}
-      standardAppearance={'btn-ghost'}
-      className={'btn-sm'}
+      standardAppearance={'light'}
     >
       {workTaskTypeCount}
     </TwoStageClick>
diff --git a/app/teaching-categories/[categoryIdentifier]/knowledge-domain/knowledge-domain-name-cell.tsx b/app/teaching-categories/[categoryIdentifier]/knowledge-domain/knowledge-domain-name-cell.tsx
index 1d3210f..d6f8024 100644
--- a/app/teaching-categories/[categoryIdentifier]/knowledge-domain/knowledge-domain-name-cell.tsx
+++ b/app/teaching-categories/[categoryIdentifier]/knowledge-domain/knowledge-domain-name-cell.tsx
@@ -9,6 +9,7 @@ import { useRouter } from 'next/navigation';
 import { useValidationUniqueNonEmpty } from '../knowledge-level/knowledge-level-name-cell';
 import { useModal } from '../../../generic/components/modals/confirm-action-modal';
 import { RenameModal } from '../../../generic/components/modals/rename-modal';
+import { Button } from '@nextui-org/react';
 
 export function KnowledgeDomainNameCell({
   kd,
@@ -43,9 +44,9 @@ export function KnowledgeDomainNameCell({
 
   return (
     <>
-      <button onClick={openModal} className={'btn btn-ghost btn-sm'}>
+      <Button onPress={openModal} size={'sm'} variant={'light'}>
         <PencilSquareIcon className={'w-4 h-4'} />{' '}
-      </button>
+      </Button>
       <span className={'px-2'}>{name}</span>
       <RenameModal
         title={`Rename ${name}`}
diff --git a/app/teaching-categories/[categoryIdentifier]/knowledge-domain/knowledge-domain-table-editor.tsx b/app/teaching-categories/[categoryIdentifier]/knowledge-domain/knowledge-domain-table-editor.tsx
index ccb8c41..a5da5aa 100644
--- a/app/teaching-categories/[categoryIdentifier]/knowledge-domain/knowledge-domain-table-editor.tsx
+++ b/app/teaching-categories/[categoryIdentifier]/knowledge-domain/knowledge-domain-table-editor.tsx
@@ -43,14 +43,14 @@ export default async function KnowledgeDomainTableEditor({
           {category.knowledgeDomainDescriptor}
           <NewKnowledgeDomainButton
             className={
-              'flex btn btn-outline btn-xs ml-2 relative overflow-hidden'
+              'flex relative m-0 p-0 min-h-fit max-h-fit h-6 leading-none overflow-hidden'
             }
             serviceCategory={category}
             knowledgeDomainServiceCategoryNameList={nameList}
           />
         </KnowledgeCategoryTableHeaderCell>
         <KnowledgeCategoryTableHeaderCell>
-          Work Task Types
+          <div className={'h-full'}>Work Task Types</div>
         </KnowledgeCategoryTableHeaderCell>
       </KnowledgeCategoryTableHeader>
       <KnowledgeCategoryTableBody>
diff --git a/app/teaching-categories/[categoryIdentifier]/knowledge-domain/new-knowledge-domain-button.tsx b/app/teaching-categories/[categoryIdentifier]/knowledge-domain/new-knowledge-domain-button.tsx
index bf9423c..28fef0b 100644
--- a/app/teaching-categories/[categoryIdentifier]/knowledge-domain/new-knowledge-domain-button.tsx
+++ b/app/teaching-categories/[categoryIdentifier]/knowledge-domain/new-knowledge-domain-button.tsx
@@ -23,10 +23,11 @@ import {
   ConfirmActionModal,
   useModal
 } from '../../../generic/components/modals/confirm-action-modal';
+import { Button, ButtonProps } from '@nextui-org/react';
 
 const NewKnowledgeDomainContextKey = 'new-knowledge-domain-name';
 
-type NewKnowledgeDomainButtonProps = Omit<GenericButtonProps, 'onClick'> & {
+type NewKnowledgeDomainButtonProps = Omit<ButtonProps, 'onClick'> & {
   serviceCategory: ServiceCategoryDto;
   knowledgeDomainServiceCategoryNameList: string[];
 };
@@ -70,7 +71,8 @@ function NewKnowledgeDomainPanel({
 export function NewKnowledgeDomainButton({
   serviceCategory,
   className,
-  knowledgeDomainServiceCategoryNameList
+  knowledgeDomainServiceCategoryNameList,
+  ...buttonProps
 }: NewKnowledgeDomainButtonProps) {
   const [pending, startTransition] = useTransition();
   const appRouterInstance = useRouter();
@@ -133,20 +135,25 @@ export function NewKnowledgeDomainButton({
 
   return (
     <>
-      <button
+      <Button
+        {...buttonProps}
         className={className}
-        onClick={() => {
+        onPress={() => {
           setConfirmWithoutName({
             contextKey: NewKnowledgeDomainContextKey,
             value: false
           });
           openModal();
         }}
-        disabled={pending}
+        isDisabled={pending}
+        size={'sm'}
+        variant={'ghost'}
+        color={'primary'}
       >
         <PendingOverlay pending={pending} />
-        <PlusCircleIcon className={'h-4 w-4'}></PlusCircleIcon>New
-      </button>
+        <PlusCircleIcon className={'h-4 w-4'}></PlusCircleIcon>
+        New
+      </Button>
       <ConfirmActionModal
         show={isOpen}
         onClose={closeModal}
diff --git a/app/teaching-categories/[categoryIdentifier]/knowledge-level/knowledge-level-dependencies.tsx b/app/teaching-categories/[categoryIdentifier]/knowledge-level/knowledge-level-dependencies.tsx
index 1a8612e..35786be 100644
--- a/app/teaching-categories/[categoryIdentifier]/knowledge-level/knowledge-level-dependencies.tsx
+++ b/app/teaching-categories/[categoryIdentifier]/knowledge-level/knowledge-level-dependencies.tsx
@@ -13,10 +13,9 @@ export function KnowledgeLevelDependencies({ kl }: { kl: KnowledgeLevelDto }) {
       onClick={() =>
         console.log('Number of tasks associated:', workTaskTypeCount)
       }
-      standardAppearance={'btn-ghost'}
-      primedAppearance={'btn-primary'}
+      standardAppearance={'light'}
+      primedAppearance={'primary'}
       primedMessage={'Go to dependencies?'}
-      className={'btn-sm'}
     >
       {workTaskTypeCount}
     </TwoStageClick>
@@ -25,8 +24,7 @@ export function KnowledgeLevelDependencies({ kl }: { kl: KnowledgeLevelDto }) {
       onClick={() => {
         deleteKnowledgeLevel(kl).then(() => appRouterInstance.refresh());
       }}
-      standardAppearance={'btn-ghost'}
-      className={'btn-sm'}
+      standardAppearance={'light'}
     >
       {workTaskTypeCount}
     </TwoStageClick>
diff --git a/app/teaching-categories/[categoryIdentifier]/knowledge-level/knowledge-level-name-cell.tsx b/app/teaching-categories/[categoryIdentifier]/knowledge-level/knowledge-level-name-cell.tsx
index d511624..39c9a08 100644
--- a/app/teaching-categories/[categoryIdentifier]/knowledge-level/knowledge-level-name-cell.tsx
+++ b/app/teaching-categories/[categoryIdentifier]/knowledge-level/knowledge-level-name-cell.tsx
@@ -10,6 +10,7 @@ import { ServiceCategoryDto } from '../../../api/dtos/ServiceCategoryDtoSchema';
 import { useEffect, useState } from 'react';
 import { useModal } from '../../../generic/components/modals/confirm-action-modal';
 import { RenameModal } from '../../../generic/components/modals/rename-modal';
+import { Button } from '@nextui-org/react';
 
 export function useValidationUniqueNonEmpty(
   proposedName: string,
@@ -62,9 +63,9 @@ export function KnowledgeLevelNameCell({
 
   return (
     <div className={'flex items-center px-2'}>
-      <button onClick={openModal} className={'btn btn-ghost btn-sm'}>
+      <Button onPress={openModal} size={'sm'} variant={'light'}>
         <PencilSquareIcon className={'w-4 h-4'} />{' '}
-      </button>
+      </Button>
       <span className={'px-2'}>{name}</span>
       <RenameModal
         title={`Rename ${name}`}
diff --git a/app/teaching-categories/[categoryIdentifier]/knowledge-level/knowledge-level-table-editor.tsx b/app/teaching-categories/[categoryIdentifier]/knowledge-level/knowledge-level-table-editor.tsx
index d1a4252..e520c75 100644
--- a/app/teaching-categories/[categoryIdentifier]/knowledge-level/knowledge-level-table-editor.tsx
+++ b/app/teaching-categories/[categoryIdentifier]/knowledge-level/knowledge-level-table-editor.tsx
@@ -39,7 +39,7 @@ export default async function KnowledgeLevelTableEditor({
         <KnowledgeCategoryTableHeaderCell>
           {category.knowledgeLevelDescriptor}
           <NewKnowledgeLevelButton
-            className={'flex btn btn-outline btn-xs ml-2'}
+            className={'flex  ml-2'}
             serviceCategory={category}
             knowledgeLevelNameList={nameList}
           />
diff --git a/app/teaching-categories/[categoryIdentifier]/knowledge-level/new-knowledge-level-button.tsx b/app/teaching-categories/[categoryIdentifier]/knowledge-level/new-knowledge-level-button.tsx
index fb5d0b9..437ca29 100644
--- a/app/teaching-categories/[categoryIdentifier]/knowledge-level/new-knowledge-level-button.tsx
+++ b/app/teaching-categories/[categoryIdentifier]/knowledge-level/new-knowledge-level-button.tsx
@@ -22,6 +22,7 @@ import {
   ConfirmActionModal,
   useModal
 } from '../../../generic/components/modals/confirm-action-modal';
+import { Button } from '@nextui-org/react';
 
 const NewKnowledgeLevelContextKey = 'new-knowledge-Level-name';
 
@@ -154,20 +155,22 @@ export function NewKnowledgeLevelButton({
 
   return (
     <>
-      <button
+      <Button
         className={className}
-        onClick={() => {
+        onPress={() => {
           setConfirmWithoutName({
             contextKey: NewKnowledgeLevelContextKey,
             value: false
           });
           openModal();
         }}
+        size={'sm'}
+        variant={'ghost'}
         disabled={pending}
       >
         <PendingOverlay pending={pending} />
         <PlusCircleIcon className={'h-4 w-4'}></PlusCircleIcon>New
-      </button>
+      </Button>
       <ConfirmActionModal
         show={isOpen}
         onClose={closeModal}
diff --git a/app/timetables/students/[schedule]/data-not-found-card.tsx b/app/timetables/students/[schedule]/data-not-found-card.tsx
index 261f1e5..21e3f1a 100644
--- a/app/timetables/students/[schedule]/data-not-found-card.tsx
+++ b/app/timetables/students/[schedule]/data-not-found-card.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
-import { Card } from '@tremor/react';
+import { Card } from '@nextui-org/react';
 
 export function DataNotFoundCard({ children }: { children: ReactNode }) {
   return <Card>{children}</Card>;
-}
\ No newline at end of file
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index ee63674..5f6f63a 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -54,7 +54,7 @@ export default {
           },
           content: {
             subtle: '#9ca3af', // gray-400
-            DEFAULT: '#d6d6d6',
+            DEFAULT: '#989898',
             emphasis: '#374151', // gray-700
             strong: '#111827', // gray-900
             inverted: '#ffffff' // white