diff --git a/.gitignore b/.gitignore
index 405c92804..3571cf39e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -50,3 +50,6 @@ tests_output/
 
 # IDE
 .idea
+
+# create a drafts directory to store draft code/docs for later use
+drafts/
diff --git a/.node-version b/.node-version
new file mode 100644
index 000000000..dc0bb0f43
--- /dev/null
+++ b/.node-version
@@ -0,0 +1 @@
+v22.12.0
diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 000000000..dc0bb0f43
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+v22.12.0
diff --git a/src/components/Modals/LinkGeneratorModal.tsx b/src/components/Modals/LinkGeneratorModal.tsx
index 47951483b..4ae695c50 100644
--- a/src/components/Modals/LinkGeneratorModal.tsx
+++ b/src/components/Modals/LinkGeneratorModal.tsx
@@ -3,16 +3,13 @@ import {
   Modal,
   Text,
   Flex,
-  Divider,
-  TextInput,
   Group,
   Button,
   CopyButton,
   Paper,
 } from '@mantine/core'
-import { montserrat_heading, montserrat_paragraph } from 'fonts'
 import { IconCheck, IconCopy } from '@tabler/icons-react'
-import CustomSwitch from '~/components/Switches/CustomSwitch'
+import { Switch } from '@/components/shadcn/ui/switch'
 
 interface LinkGeneratorModalProps {
   opened: boolean
@@ -78,11 +75,7 @@ export const LinkGeneratorModal = ({
       opened={opened}
       onClose={onClose}
       title={
-        <Text
-          className={`${montserrat_heading.variable} font-montserratHeading`}
-          size="lg"
-          weight={700}
-        >
+        <Text size="lg" weight={700}>
           Generate Shareable Link
         </Text>
       }
@@ -115,11 +108,7 @@ export const LinkGeneratorModal = ({
       }}
     >
       <Flex direction="column" gap="xl">
-        <Text
-          className={`${montserrat_paragraph.variable} font-montserratParagraph`}
-          size="sm"
-          style={{ lineHeight: 1.5 }}
-        >
+        <Text size="sm" style={{ lineHeight: 1.5 }}>
           Configure AI behavior settings for your shareable link. These settings
           will enable specific behaviors when users access the chat through this
           link. Note: If a setting is enabled course-wide, enabling it here will
@@ -128,7 +117,11 @@ export const LinkGeneratorModal = ({
         </Text>
 
         <Flex direction="column" gap="md">
-          <CustomSwitch
+          <Switch
+            variant="labeled"
+            size="lg"
+            showLabels
+            showThumbIcon
             label="Guided Learning"
             tooltip={
               currentSettings.guidedLearning
@@ -136,12 +129,14 @@ export const LinkGeneratorModal = ({
                 : 'Enable guided learning mode for this link. The AI will encourage independent problem-solving by providing hints and questions instead of direct answers.'
             }
             checked={linkSettings.guidedLearning}
-            onChange={(checked) =>
-              handleSettingChange('guidedLearning')(checked)
-            }
+            onCheckedChange={handleSettingChange('guidedLearning')}
           />
 
-          <CustomSwitch
+          <Switch
+            variant="labeled"
+            size="lg"
+            showLabels
+            showThumbIcon
             label="Document-Based References Only"
             tooltip={
               currentSettings.documentsOnly
@@ -149,31 +144,27 @@ export const LinkGeneratorModal = ({
                 : "Restrict AI to only use information from provided documents. The AI will not use external knowledge or make assumptions beyond the documents' content."
             }
             checked={linkSettings.documentsOnly}
-            onChange={(checked) =>
-              handleSettingChange('documentsOnly')(checked)
-            }
+            onCheckedChange={handleSettingChange('documentsOnly')}
           />
 
-          <CustomSwitch
-            label="Bypass UIUC.chat's internal prompting"
+          <Switch
+            variant="labeled"
+            size="lg"
+            showLabels
+            showThumbIcon
+            label="Bypass Illinois Chat's internal prompting"
             tooltip={
               currentSettings.systemPromptOnly
                 ? 'This setting is currently enabled course-wide. Enabling it here will ensure it stays active even if course settings change.'
-                : "Use raw system prompt without additional internal prompting. This bypasses UIUC.chat's built-in prompts for citations and helpfulness."
+                : "Use raw system prompt without additional internal prompting. This bypasses Illinois Chat's built-in prompts for citations and helpfulness."
             }
             checked={linkSettings.systemPromptOnly}
-            onChange={(checked) =>
-              handleSettingChange('systemPromptOnly')(checked)
-            }
+            onCheckedChange={handleSettingChange('systemPromptOnly')}
           />
         </Flex>
 
         <Flex direction="column" gap="md">
-          <Text
-            size="sm"
-            weight={600}
-            className={`${montserrat_paragraph.variable} font-montserratParagraph`}
-          >
+          <Text size="sm" weight={600}>
             Generated Link
           </Text>
 
@@ -188,7 +179,7 @@ export const LinkGeneratorModal = ({
           >
             <Text
               size="sm"
-              className={`${montserrat_paragraph.variable} font-montserratParagraph text-[--modal-text]`}
+              className={`text-[--modal-text]`}
               style={{
                 lineHeight: 1.5,
               }}
@@ -204,7 +195,6 @@ export const LinkGeneratorModal = ({
                   variant="filled"
                   radius="md"
                   onClick={copy}
-                  className={`${montserrat_paragraph.variable} font-montserratParagraph`}
                   leftIcon={
                     copied ? <IconCheck size={16} /> : <IconCopy size={16} />
                   }
diff --git a/src/components/Switches/CustomSwitch.tsx b/src/components/Switches/DeprecatedCustomSwitch.tsx
similarity index 94%
rename from src/components/Switches/CustomSwitch.tsx
rename to src/components/Switches/DeprecatedCustomSwitch.tsx
index 3eacad730..29cc49526 100644
--- a/src/components/Switches/CustomSwitch.tsx
+++ b/src/components/Switches/DeprecatedCustomSwitch.tsx
@@ -1,3 +1,8 @@
+/* -------------------------------------------------------------------------- */
+/*                           WARNING: DEPRECATED!!!                           */
+/* -------------------------------------------------------------------------- */
+// Use components/shadcn/ui/switch instead
+
 import React, { useState } from 'react'
 import { Switch, Tooltip, Text } from '@mantine/core'
 import { IconCheck, IconInfoCircle, IconX } from '@tabler/icons-react'
@@ -133,11 +138,6 @@ const CustomSwitch: React.FC<CustomSwitchProps> = ({
         >
           <span
             className="ml-2 cursor-pointer transition-transform duration-200 ease-in-out"
-            style={
-              {
-                /*              transform: !disabled && isContainerHovered ? 'scale(1.1)' : 'scale(1)', */
-              }
-            }
             onClick={(e) => e.stopPropagation()}
           >
             <IconInfoCircle
diff --git a/src/components/UIUC-Components/BrandingForm.tsx b/src/components/UIUC-Components/BrandingForm.tsx
index 8e33b8a4f..0a6218d78 100644
--- a/src/components/UIUC-Components/BrandingForm.tsx
+++ b/src/components/UIUC-Components/BrandingForm.tsx
@@ -1,9 +1,11 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 
-import { Button, FileInput, Textarea } from '@mantine/core'
+import { Button } from '@/components/shadcn/ui/button'
+import { Spinner } from '@/components/shadcn/ui/spinner'
+import { Check, AlertCircle } from 'lucide-react'
 import { IconFileUpload } from '@tabler/icons-react'
 
-//import { montserrat_heading, montserrat_paragraph } from 'fonts'
+import { FormInput } from '@/components/shadcn/ui/form-input'
 
 import SetExampleQuestions from './SetExampleQuestions'
 
@@ -22,11 +24,32 @@ const BrandingForm = ({
   user_id: string
 }) => {
   const queryClient = useQueryClient()
-  const [introMessage, setIntroMessage] = useState('')
+
+  // Read initial cached data synchronously so child components mount with it
+  const cachedMetadata = queryClient.getQueryData([
+    'courseMetadata',
+    project_name,
+  ]) as CourseMetadata | undefined
+
+  const [introMessage, setIntroMessage] = useState(
+    cachedMetadata?.course_intro_message || '',
+  )
   const [isIntroMessageUpdated, setIsIntroMessageUpdated] = useState(false)
-  const [metadata, setMetadata] = useState<CourseMetadata | null>(null)
+  const [greetingSaved, setGreetingSaved] = useState(
+    !!cachedMetadata?.course_intro_message,
+  )
+  const [metadata, setMetadata] = useState<CourseMetadata | null>(
+    cachedMetadata ?? null,
+  )
+  const [logoFileName, setLogoFileName] = useState<string | null>(
+    cachedMetadata?.banner_image_s3 ? 'Logo uploaded' : null,
+  )
+  const [logoStatus, setLogoStatus] = useState<
+    'idle' | 'uploading' | 'success' | 'error'
+  >(cachedMetadata?.banner_image_s3 ? 'success' : 'idle')
+  const fileInputRef = useRef<HTMLInputElement>(null)
 
-  // Update local state when query data changes
+  // Subscribe to future query cache changes
   useEffect(() => {
     const unsubscribe = queryClient.getQueryCache().subscribe(() => {
       const latestData = queryClient.getQueryData([
@@ -45,29 +68,29 @@ const BrandingForm = ({
   }, [project_name, queryClient])
 
   const onUploadLogo = async (logo: File | null) => {
-    /*
-      lastModified: 1755022505000
-      name: "logo.png"
-      size: 9399
-      type: "image/png"
-      webkitRelativePath: ""
-      File Prototype
-    */
-
-    // Assuming the file is converted to a URL somewhere else
-    if (logo) {
-      console.log('Uploading to s3')
-
-      const banner_s3_image = await uploadToS3(
-        logo ?? null,
-        user_id,
-        project_name,
-      )
+    if (!logo) return
+
+    setLogoFileName(logo.name)
+    setLogoStatus('uploading')
+
+    const banner_s3_image = await uploadToS3(logo, user_id, project_name)
 
-      if (banner_s3_image && metadata) {
-        metadata.banner_image_s3 = banner_s3_image
-        await callSetCourseMetadata(project_name, metadata)
+    if (banner_s3_image && metadata) {
+      const updatedMetadata = {
+        ...metadata,
+        banner_image_s3: banner_s3_image,
       }
+      // Only update local state and cache — the S3 key will be
+      // persisted to the server on the next metadata save
+      // (greeting update, question save, etc.)
+      setMetadata(updatedMetadata)
+      queryClient.setQueryData(
+        ['courseMetadata', project_name],
+        updatedMetadata,
+      )
+      setLogoStatus('success')
+    } else {
+      setLogoStatus('error')
     }
   }
 
@@ -75,83 +98,56 @@ const BrandingForm = ({
     <>
       <div className="branding_form">
         <div className="set_greeting form-control relative">
-          <div className="mt-4 font-semibold">Greeting</div>
+          <div className="mb-3 font-semibold">Greeting</div>
 
-          <div className="-mx-3 mt-1 flex items-start gap-2">
-            <Textarea
-              autosize
+          <div className="flex flex-col gap-2">
+            <FormInput
+              as="textarea"
               minRows={2}
               maxRows={5}
               placeholder="Enter a greeting to help users get started with your bot, shown before they start chatting."
               className="w-full"
-              styles={{
-                input: {
-                  color: 'var(--foreground)',
-                  backgroundColor: 'var(--background)',
-                  borderColor: 'var(--dashboard-border)',
-                  padding: 'calc(var(--padding) * .75)',
-                  paddingRight: '7rem', //make room for the button
-
-                  '&:focus': {
-                    borderColor: 'var(--background-darker)',
-                  },
-                },
-              }}
               value={introMessage}
+              rightSlot={
+                greetingSaved && !isIntroMessageUpdated ? (
+                  <Check className="size-4 text-[--illinois-prairie]" />
+                ) : null
+              }
               onChange={(e) => {
                 setIntroMessage(e.target.value)
                 setIsIntroMessageUpdated(true)
+                setGreetingSaved(false)
               }}
             />
 
-            <Button
-              type="submit"
-              size={'xs'}
-              disabled={!isIntroMessageUpdated}
-              className="bg-[--dashboard-button] text-[--dashboard-button-foreground] hover:bg-[--dashboard-button-hover] disabled:bg-[--background-faded] disabled:text-[--foreground-faded] disabled:opacity-50"
-              onClick={async () => {
-                setIsIntroMessageUpdated(false)
-
-                if (metadata) {
-                  metadata.course_intro_message = introMessage
-                  // Update the courseMetadata object
-
-                  const resp = await callSetCourseMetadata(
-                    project_name,
-                    metadata,
-                  )
-
-                  if (!resp) {
-                    console.log(
-                      'Error upserting course metadata for course: ',
-                      project_name,
-                    )
-                  }
-                }
-              }}
-            >
-              Update
-            </Button>
-          </div>
-
-          {isIntroMessageUpdated && (
-            <>
+            <div>
               <Button
                 type="submit"
-                className="relative m-1 hidden w-[30%] self-end bg-[--dashboard-button] text-[--dashboard-button-foreground] hover:bg-[--dashboard-button-hover]"
+                variant="dashboard"
+                size="sm"
+                disabled={!isIntroMessageUpdated}
                 onClick={async () => {
                   setIsIntroMessageUpdated(false)
 
                   if (metadata) {
-                    metadata.course_intro_message = introMessage
-                    // Update the courseMetadata object
+                    const updatedMetadata = {
+                      ...metadata,
+                      course_intro_message: introMessage,
+                    }
 
                     const resp = await callSetCourseMetadata(
                       project_name,
-                      metadata,
+                      updatedMetadata,
                     )
 
-                    if (!resp) {
+                    if (resp) {
+                      setMetadata(updatedMetadata)
+                      queryClient.setQueryData(
+                        ['courseMetadata', project_name],
+                        updatedMetadata,
+                      )
+                      setGreetingSaved(true)
+                    } else {
                       console.log(
                         'Error upserting course metadata for course: ',
                         project_name,
@@ -162,48 +158,83 @@ const BrandingForm = ({
               >
                 Update
               </Button>
-            </>
-          )}
+            </div>
+          </div>
         </div>
 
         <div className="set_example_questions">
-          <div className="mt-4 font-semibold">Example questions</div>
-
-          <div className="-mx-3 mt-1">
-            <SetExampleQuestions
-              course_name={project_name}
-              course_metadata={metadata as CourseMetadataOptionalForUpsert}
-            />
+          <div className="mb-3 mt-6 font-semibold">Example questions</div>
+
+          <div>
+            {metadata && (
+              <SetExampleQuestions
+                course_name={project_name}
+                course_metadata={metadata as CourseMetadataOptionalForUpsert}
+              />
+            )}
           </div>
         </div>
 
         <div className="upload_logo form-control">
-          <div className="mt-4 font-semibold">Add a logo</div>
-
-          <div className="-mx-3 mt-1">
-            {/* TODO: maybe change this to a button to trigger the upload like the other inputs? */}
-            {/* TODO: show current logo and ability to remove logo */}
-            <FileInput
-              fileInputProps={{
-                accept: 'image/png,image/jpg,image/gif',
-                placeholder: 'Select the logo to upload (.png, .jpg, or .gif)',
-              }}
-              classNames={{
-                input:
-                  'text-[--foreground] border-[--dashboard-border] bg-[--background] focus:text-[#f00] hover:border-[--background-darker]',
-              }}
-              rightSection={
-                <IconFileUpload
-                  stroke={1}
-                  className="text-[--foreground-faded]"
-                />
-              }
-              onChange={onUploadLogo}
-            />
+          <div className="mt-6 font-semibold">Add a logo</div>
+          <div className="mb-3 text-sm text-[--foreground-faded]">
+            This logo will appear in the header of the chat window.
           </div>
 
-          <div className="text-sm text-[--foreground-faded]">
-            This logo will appear in the header of the chat window.
+          <div>
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept="image/png,image/jpg,image/gif"
+              className="hidden"
+              aria-label="Upload logo"
+              onChange={(e) => {
+                onUploadLogo(e.target.files?.[0] ?? null)
+                e.target.value = ''
+              }}
+            />
+            <button
+              type="button"
+              onClick={() => fileInputRef.current?.click()}
+              disabled={logoStatus === 'uploading'}
+              className={`flex w-full items-center rounded-md border bg-[--background] px-3 py-2 text-sm transition-colors disabled:pointer-events-none disabled:opacity-50 ${
+                logoStatus === 'error'
+                  ? 'border-[--error]'
+                  : 'border-[--dashboard-border] hover:border-[--foreground-faded]'
+              }`}
+            >
+              <span
+                className={
+                  logoStatus === 'error'
+                    ? 'text-[--error]'
+                    : logoFileName
+                      ? logoStatus === 'success'
+                        ? 'text-[--illinois-prairie]'
+                        : 'text-[--foreground]'
+                      : 'text-[--foreground-faded]'
+                }
+              >
+                {logoStatus === 'error'
+                  ? 'Upload failed — click to retry'
+                  : logoFileName ||
+                    'Select the logo to upload (.png, .jpg, or .gif)'}
+              </span>
+              <div className="ml-auto flex shrink-0 items-center pl-3">
+                {logoStatus === 'uploading' ? (
+                  <Spinner className="size-4 text-[--foreground-faded]" />
+                ) : logoStatus === 'success' ? (
+                  <Check className="size-4 text-[--illinois-prairie]" />
+                ) : logoStatus === 'error' ? (
+                  <AlertCircle className="size-4 text-[--error]" />
+                ) : (
+                  <IconFileUpload
+                    size={20}
+                    stroke={1}
+                    className="text-[--foreground-faded]"
+                  />
+                )}
+              </div>
+            </button>
           </div>
         </div>
       </div>
diff --git a/src/components/UIUC-Components/LargeDropzone.tsx b/src/components/UIUC-Components/LargeDropzone.tsx
index 3a13b800e..49aee842c 100644
--- a/src/components/UIUC-Components/LargeDropzone.tsx
+++ b/src/components/UIUC-Components/LargeDropzone.tsx
@@ -338,6 +338,7 @@ export function LargeDropzone({
           flexDirection: 'column',
         }}
       >
+        {/* TODO: fix large dropzone display across all screens */}
         <div
           className={classes.wrapper}
           style={{
@@ -346,7 +347,6 @@ export function LargeDropzone({
             justifyContent: 'center',
             alignItems: 'center',
             flexDirection: 'column',
-            paddingTop: rem(24),
           }}
         >
           <Dropzone
diff --git a/src/components/UIUC-Components/MakeNewCoursePage.tsx b/src/components/UIUC-Components/MakeNewCoursePage.tsx
index 330f7be28..a0afa80ff 100644
--- a/src/components/UIUC-Components/MakeNewCoursePage.tsx
+++ b/src/components/UIUC-Components/MakeNewCoursePage.tsx
@@ -1,7 +1,10 @@
 import Head from 'next/head'
+import { useRouter } from 'next/router'
 import React, { useMemo, useState } from 'react'
 
-import { Button, Card, Flex, Title } from '@mantine/core'
+import { Card, Flex, Title } from '@mantine/core'
+import { Button } from '@/components/shadcn/ui/button'
+import { LoaderCircle } from 'lucide-react'
 import { useDebouncedValue } from '@mantine/hooks'
 import { notifications } from '@mantine/notifications'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
@@ -33,6 +36,7 @@ const MakeNewCoursePage = ({
   project_description?: string
 }) => {
   const queryClient = useQueryClient()
+  const router = useRouter()
   const auth = useAuth()
   const user_id = auth.user?.profile.email || current_user_email
 
@@ -50,7 +54,7 @@ const MakeNewCoursePage = ({
   }, [])
 
   // Debounce project name input to avoid excessive API calls
-  const [debouncedProjectName] = useDebouncedValue(projectName, 500)
+  const [debouncedProjectName] = useDebouncedValue(projectName, 1000)
 
   // Check project name availability using React Query
   const { data: courseExists, isFetching: isCheckingAvailability } =
@@ -127,13 +131,13 @@ const MakeNewCoursePage = ({
           | undefined
       }
     />,
-    <StepLLM key="llm" project_name={projectName} />,
-    <StepPrompt key="prompt" project_name={projectName} />,
     <StepBranding
       key="branding"
       project_name={projectName}
       user_id={user_id}
     />,
+    <StepLLM key="llm" project_name={projectName} />,
+    <StepPrompt key="prompt" project_name={projectName} />,
     <StepSuccess key="success" project_name={projectName} />,
   ]
 
@@ -311,20 +315,21 @@ const MakeNewCoursePage = ({
       </Head>
       <main
         className="course-page-main min-w-screen flex min-h-screen flex-col items-center"
-        style={{
-          justifyContent: 'center',
-          alignItems: 'center',
-          minHeight: '100vh',
-          padding: '1rem',
-        }}
+        style={
+          {
+            justifyContent: 'center',
+            alignItems: 'center',
+            minHeight: '100vh',
+            padding: '1rem',
+          } as React.CSSProperties
+        }
       >
-        {/* TODO change wrapper and card mt- settings to not have to skip past the top header...will require change to global nav and page structure  */}
-        <div className="mt-12 flex w-full flex-1 flex-col items-center justify-start py-0 pb-20">
+        <div className="flex w-full flex-1 flex-col items-center justify-center pb-20 pt-16">
           <Card
             padding="none"
             withBorder={true}
-            radius="md"
-            className="mt-16 w-[96%] !border-[--dashboard-border] bg-[--background] p-8 text-[--foreground] md:w-[90%] lg:max-w-[860px]"
+            radius="lg"
+            className="my-8 w-[96%] !border-[--dashboard-border] bg-[--background] p-8 text-[--foreground] md:w-[90%] lg:max-w-[860px]"
           >
             <div className="step_container min-h-[16rem]">
               {allSteps[currentStep]}
@@ -341,9 +346,8 @@ const MakeNewCoursePage = ({
         <div className="fixed bottom-0 left-0 right-0 z-40 border-t border-[--dashboard-border] bg-[--background]">
           <div className="mx-auto flex max-w-[860px] items-center justify-between px-4 py-4">
             <Button
+              variant="outline"
               size="sm"
-              radius="sm"
-              classNames={componentClasses.button}
               onClick={goToPreviousStep}
               disabled={isFirstStep || shouldBlockNavigation}
             >
@@ -362,56 +366,91 @@ const MakeNewCoursePage = ({
               ))}
             </div>
 
-            <Button
-              size="sm"
-              radius="sm"
-              className={isLastStep ? 'opacity-0' : ''}
-              classNames={componentClasses.buttonPrimary}
-              onClick={async () => {
-                if (currentStep === 0) {
-                  if (!hasCreatedProject) {
-                    if (
-                      projectName === '' ||
-                      isLoading ||
-                      !isCourseAvailable ||
-                      isWaitingForAvailabilityCheck
-                    ) {
-                      return
+            <div className="flex items-center gap-3">
+              <Button
+                variant="dashboard"
+                size="sm"
+                className={isLastStep ? 'opacity-0' : ''}
+                onClick={async () => {
+                  if (currentStep === 0) {
+                    if (!hasCreatedProject) {
+                      if (
+                        projectName === '' ||
+                        isLoading ||
+                        !isCourseAvailable ||
+                        isWaitingForAvailabilityCheck
+                      ) {
+                        return
+                      }
+
+                      const isCreated = await handleSubmit(
+                        projectName,
+                        projectDescription,
+                        current_user_email,
+                        useIllinoisChatConfig,
+                      )
+
+                      if (!isCreated) {
+                        return
+                      }
+
+                      setHasCreatedProject(true)
                     }
+                  }
 
+                  if (!isLastStep) {
+                    goToNextStep()
+                  }
+                }}
+                disabled={
+                  isLastStep ||
+                  shouldBlockNavigation ||
+                  (currentStep === 0 &&
+                    !hasCreatedProject &&
+                    (projectName === '' ||
+                      !isCourseAvailable ||
+                      isLoading ||
+                      isWaitingForAvailabilityCheck))
+                }
+              >
+                {isLoading && currentStep === 0 && (
+                  <LoaderCircle className="size-4 animate-spin" />
+                )}
+                Continue
+              </Button>
+
+              <Button
+                variant="outline"
+                size="sm"
+                disabled={
+                  isLoading ||
+                  (projectName === '' && !hasCreatedProject) ||
+                  (!hasCreatedProject &&
+                    (!isCourseAvailable || isWaitingForAvailabilityCheck))
+                }
+                onClick={async () => {
+                  if (!hasCreatedProject) {
                     const isCreated = await handleSubmit(
                       projectName,
                       projectDescription,
                       current_user_email,
                       useIllinoisChatConfig,
                     )
-
-                    if (!isCreated) {
-                      return
+                    if (isCreated) {
+                      setHasCreatedProject(true)
+                      router.push(`/${projectName}/chat`)
                     }
-
-                    setHasCreatedProject(true)
+                  } else {
+                    router.push(`/${projectName}/chat`)
                   }
-                }
-
-                if (!isLastStep) {
-                  goToNextStep()
-                }
-              }}
-              disabled={
-                isLastStep ||
-                shouldBlockNavigation ||
-                (currentStep === 0 &&
-                  !hasCreatedProject &&
-                  (projectName === '' ||
-                    !isCourseAvailable ||
-                    isLoading ||
-                    isWaitingForAvailabilityCheck))
-              }
-              loading={isLoading && currentStep === 0}
-            >
-              Continue
-            </Button>
+                }}
+              >
+                {isLoading && !hasCreatedProject && (
+                  <LoaderCircle className="size-4 animate-spin" />
+                )}
+                Start Chatting
+              </Button>
+            </div>
           </div>
         </div>
       </main>
@@ -419,35 +458,4 @@ const MakeNewCoursePage = ({
   )
 }
 
-const componentClasses = {
-  button: {
-    root: `
-      !text-[#13294B]
-      bg-transparent
-      border-[#13294B]
-
-      hover:!text-[#13294B]
-      hover:bg-[#13294B]/10
-      hover:border-[#13294B]
-
-      disabled:bg-transparent
-      disabled:border-[--button-disabled]
-      disabled:!text-[--button-disabled-text-color]
-    `,
-  },
-
-  buttonPrimary: {
-    root: `
-      !text-white
-      bg-[#13294B]
-
-      hover:!text-white
-      hover:bg-[#13294B]/90
-
-      disabled:bg-[#13294B]/50
-      disabled:!text-white/50
-    `,
-  },
-}
-
 export default MakeNewCoursePage
diff --git a/src/components/UIUC-Components/MakeNewCoursePageSteps/HeaderStepNavigation.tsx b/src/components/UIUC-Components/MakeNewCoursePageSteps/HeaderStepNavigation.tsx
index 1b9d9de39..11a489177 100644
--- a/src/components/UIUC-Components/MakeNewCoursePageSteps/HeaderStepNavigation.tsx
+++ b/src/components/UIUC-Components/MakeNewCoursePageSteps/HeaderStepNavigation.tsx
@@ -1,3 +1,5 @@
+import { montserrat_heading } from 'fonts'
+
 const HeaderStepNavigation = ({
   project_name,
   title,
@@ -9,24 +11,27 @@ const HeaderStepNavigation = ({
 }) => {
   return (
     <>
-      <div className="step_header">
-        {project_name && (
+      <div className={`step_header mb-8`}>
+        {/* TODO: add new project name display */}
+        {/* {project_name && (
           <div className="-mx-8 -mt-8 mb-4">
             <div className="flex flex-wrap items-center gap-2 overflow-hidden text-ellipsis whitespace-nowrap rounded-t-md bg-[--background-faded] px-8 py-1">
               <div className="text-[--foreground-faded]">CHATBOT:</div>
               <div>{project_name}</div>
             </div>
           </div>
-        )}
+        )} */}
 
         {title && (
-          <h4 className="overflow-hidden text-ellipsis whitespace-nowrap text-xl font-semibold">
+          <h4
+            className={`${montserrat_heading.className} overflow-hidden text-ellipsis whitespace-nowrap text-2xl font-semibold`}
+          >
             {title}
           </h4>
         )}
 
         {description && (
-          <div className="mt-1 text-sm text-[--foreground-faded]">
+          <div className="mt-2 text-sm text-[--foreground-faded]">
             {description}
           </div>
         )}
diff --git a/src/components/UIUC-Components/MakeNewCoursePageSteps/StepCreate.tsx b/src/components/UIUC-Components/MakeNewCoursePageSteps/StepCreate.tsx
index 12835414d..f98b588cf 100644
--- a/src/components/UIUC-Components/MakeNewCoursePageSteps/StepCreate.tsx
+++ b/src/components/UIUC-Components/MakeNewCoursePageSteps/StepCreate.tsx
@@ -1,6 +1,17 @@
 import { useEffect, useState } from 'react'
 
-import { Loader, Textarea, TextInput } from '@mantine/core'
+import { CheckCircle, LoaderCircle, XCircle } from 'lucide-react'
+
+import {
+  FormInput,
+  type FormInputStatus,
+} from '@/components/shadcn/ui/form-input'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/shadcn/ui/tooltip'
 
 import HeaderStepNavigation from './HeaderStepNavigation'
 
@@ -36,40 +47,70 @@ const StepCreate = ({
     onUpdateDescription(projectDescription)
   }, [projectDescription])
 
+  const getNameStatus = (): FormInputStatus => {
+    if (!projectName) return 'default'
+    if (isCheckingAvailability) return 'loading'
+    if (isCourseAvailable) return 'success'
+    return 'error'
+  }
+
   return (
     <>
       <div className="step">
         <HeaderStepNavigation
           project_name="" //don't send project name for create page
           title="Create a new chatbot"
-          description="What’s it all about?"
+          description="What's it all about?"
         />
 
         <div className="step_content mt-6">
-          <TextInput
-            type="text"
-            value={projectName}
-            label="Name"
-            placeholder="example-project"
-            description="The name will be used as part of the unique url across the entire campus chatbots."
-            className="mt-4"
-            classNames={componentClasses.input}
-            autoComplete="off"
-            data-lpignore="true"
-            data-form-type="other"
-            disabled={!is_new_course}
-            radius={'md'}
-            size={'md'}
-            autoFocus
-            withAsterisk
-            onInput={(e) =>
-              setProjectName(
-                (e.target as HTMLInputElement).value.replaceAll(' ', '-'),
-              )
-            }
-          />
-
-          <div className="mt-1 min-h-[1.35rem] text-sm">
+          <TooltipProvider>
+            <Tooltip
+              open={
+                !isCheckingAvailability &&
+                isCourseAvailable === false &&
+                projectName.length > 0
+              }
+            >
+              <TooltipTrigger asChild>
+                <FormInput
+                  as="input"
+                  value={projectName}
+                  label="Name"
+                  required
+                  placeholder="example-project"
+                  description="The name will be used as part of the unique url across the entire campus chatbots."
+                  className="mt-4"
+                  autoComplete="off"
+                  disabled={!is_new_course}
+                  autoFocus
+                  status={getNameStatus()}
+                  rightSlot={
+                    isCheckingAvailability ? (
+                      <LoaderCircle className="size-4 animate-spin text-[--foreground-faded]" />
+                    ) : isCourseAvailable && projectName ? (
+                      <CheckCircle className="size-4 text-green-500" />
+                    ) : isCourseAvailable === false && projectName ? (
+                      <XCircle className="size-4 text-red-500" />
+                    ) : undefined
+                  }
+                  onInput={(e) =>
+                    setProjectName(
+                      (e.target as HTMLInputElement).value.replaceAll(' ', '-'),
+                    )
+                  }
+                />
+              </TooltipTrigger>
+              <TooltipContent
+                side="bottom"
+                className="border-red-500 bg-red-500 text-white"
+              >
+                This name is already taken. Please choose a different name.
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+
+          <div className="mt-1 hidden min-h-[1.35rem] text-sm">
             {projectName && (
               <div className="flex items-start gap-2">
                 {/* NOTE: assuming this is the best / proper way to get the current server url */}
@@ -79,7 +120,7 @@ const StepCreate = ({
 
                 {isCheckingAvailability && (
                   <div className="flex items-center gap-1 text-[--foreground-faded]">
-                    <Loader size="xs" />
+                    <LoaderCircle className="size-3 animate-spin" />
                     <span>(checking...)</span>
                   </div>
                 )}
@@ -98,15 +139,12 @@ const StepCreate = ({
 
           <div className="text-sm text-[--foreground-faded]"></div>
 
-          <Textarea
+          <FormInput
+            as="textarea"
             value={projectDescription}
             label="Description"
             placeholder="Describe your project, goals, expected impact etc...."
-            description=""
             className="mt-6"
-            classNames={componentClasses.input}
-            radius={'md'}
-            size={'md'}
             minRows={4}
             onChange={(e) => setProjectDescription(e.target.value)}
           />
@@ -116,22 +154,4 @@ const StepCreate = ({
   )
 }
 
-const componentClasses = {
-  input: {
-    label: 'font-semibold text-base text-[--foreground]',
-    wrapper: '-ml-3',
-    input: `
-      mt-2
-      px-3
-
-      placeholder:text-[--foreground-faded]
-      text-[--foreground] bg-[--background]
-
-      border-[--foreground-faded] focus:border-[--foreground]
-      overflow-ellipsis
-    `,
-    description: 'text-sm text-[--foreground-faded]',
-  },
-}
-
 export default StepCreate
diff --git a/src/components/UIUC-Components/MakeNewCoursePageSteps/StepLLM.tsx b/src/components/UIUC-Components/MakeNewCoursePageSteps/StepLLM.tsx
index b7e5cfde2..bec459f4f 100644
--- a/src/components/UIUC-Components/MakeNewCoursePageSteps/StepLLM.tsx
+++ b/src/components/UIUC-Components/MakeNewCoursePageSteps/StepLLM.tsx
@@ -1,7 +1,84 @@
+import { useEffect, useRef } from 'react'
+import { useQueryClient } from '@tanstack/react-query'
+import { useFetchLLMProviders } from '@/hooks/queries/useFetchLLMProviders'
+import { useUpdateProjectLLMProviders } from '@/hooks/queries/useUpdateProjectLLMProviders'
+import {
+  ProviderNames,
+  type AllLLMProviders,
+} from '~/utils/modelProviders/LLMProvider'
+import { NCSAHostedVLMModelID } from '~/utils/modelProviders/types/NCSAHostedVLM'
 import HeaderStepNavigation from './HeaderStepNavigation'
 import APIKeyInputForm from '../api-inputs/LLMsApiKeyInputForm'
 
+/**
+ * For new projects, disable all providers except NCSAHosted/NCSAHostedVLM
+ * and set Qwen 2.5 VL 72B as the default model.
+ */
+function applyNCSAOnlyDefaults(providers: AllLLMProviders): AllLLMProviders {
+  const modified = { ...providers }
+
+  for (const key of Object.keys(modified)) {
+    const providerName = key as ProviderNames
+    const provider = modified[providerName]
+    if (!provider) continue
+
+    if (
+      providerName === ProviderNames.NCSAHosted ||
+      providerName === ProviderNames.NCSAHostedVLM
+    ) {
+      continue
+    }
+
+    // Disable all other providers
+    ;(modified as any)[providerName] = { ...provider, enabled: false }
+  }
+
+  // Clear all default flags, then set Qwen 2.5 VL 72B as the default model
+  for (const key of Object.keys(modified)) {
+    const provider = modified[key as ProviderNames]
+    if (provider?.models) {
+      ;(provider as any).models = provider.models.map((m: any) => ({
+        ...m,
+        default:
+          key === ProviderNames.NCSAHostedVLM &&
+          m.id === NCSAHostedVLMModelID.QWEN2_5VL_72B_INSTRUCT,
+      }))
+    }
+  }
+
+  return modified
+}
+
 const StepLLM = ({ project_name }: { project_name: string }) => {
+  const queryClient = useQueryClient()
+  const { data: llmProviders } = useFetchLLMProviders({
+    projectName: project_name,
+  })
+  const mutation = useUpdateProjectLLMProviders(queryClient)
+  const hasAppliedDefaults = useRef(false)
+
+  useEffect(() => {
+    if (!llmProviders || hasAppliedDefaults.current) return
+
+    // Skip if defaults were already configured (user already visited this step)
+    const hasDefaultModel = Object.values(llmProviders).some((provider) =>
+      provider?.models?.some((m: any) => m.default),
+    )
+    if (hasDefaultModel) return
+
+    hasAppliedDefaults.current = true
+    const modified = applyNCSAOnlyDefaults(llmProviders)
+
+    // Update cache immediately so APIKeyInputForm renders with correct state
+    queryClient.setQueryData(['projectLLMProviders', project_name], modified)
+
+    // Persist to backend
+    mutation.mutate({
+      projectName: project_name,
+      llmProviders: modified,
+    })
+  }, [llmProviders])
+
   return (
     <>
       <div className="step">
diff --git a/src/components/UIUC-Components/MakeNewCoursePageSteps/StepPrompt.tsx b/src/components/UIUC-Components/MakeNewCoursePageSteps/StepPrompt.tsx
index 694d5f7e4..11065b973 100644
--- a/src/components/UIUC-Components/MakeNewCoursePageSteps/StepPrompt.tsx
+++ b/src/components/UIUC-Components/MakeNewCoursePageSteps/StepPrompt.tsx
@@ -1,5 +1,5 @@
 import HeaderStepNavigation from './HeaderStepNavigation'
-import PromptEditor from '../PromptEditor'
+import PromptEditorEmbed from '../PromptEditorEmbed'
 
 const StepPrompt = ({ project_name }: { project_name: string }) => {
   return (
@@ -12,7 +12,7 @@ const StepPrompt = ({ project_name }: { project_name: string }) => {
         />
 
         <div className="step_content">
-          <PromptEditor
+          <PromptEditorEmbed
             project_name={project_name}
             isEmbedded={true}
             showHeader={false}
diff --git a/src/components/UIUC-Components/MakeNewCoursePageSteps/StepSuccess.tsx b/src/components/UIUC-Components/MakeNewCoursePageSteps/StepSuccess.tsx
index fdc34cffc..f439f826e 100644
--- a/src/components/UIUC-Components/MakeNewCoursePageSteps/StepSuccess.tsx
+++ b/src/components/UIUC-Components/MakeNewCoursePageSteps/StepSuccess.tsx
@@ -1,7 +1,8 @@
-import { Button } from '@mantine/core'
 import { IconMessage, IconSettings } from '@tabler/icons-react'
 import router from 'next/router'
 
+import { Button } from '@/components/shadcn/ui/button'
+
 const StepSuccess = ({ project_name }: { project_name: string }) => {
   return (
     <>
@@ -15,26 +16,24 @@ const StepSuccess = ({ project_name }: { project_name: string }) => {
 
             <div className="mt-8 flex flex-wrap items-center justify-center gap-4">
               <Button
-                size="md"
-                radius="sm"
-                classNames={componentClasses.buttonPrimary}
-                leftIcon={<IconMessage size={18} />}
+                variant="dashboard"
+                size="default"
                 onClick={() => {
                   router.push(`/${project_name}/chat`)
                 }}
               >
+                <IconMessage size={18} />
                 Start chatting now
               </Button>
 
               <Button
-                size="md"
-                radius="sm"
-                classNames={componentClasses.button}
-                leftIcon={<IconSettings size={18} />}
+                variant="outline"
+                size="default"
                 onClick={() => {
                   router.push(`/${project_name}/dashboard`)
                 }}
               >
+                <IconSettings size={18} />
                 Fine-tune in settings
               </Button>
             </div>
@@ -45,34 +44,4 @@ const StepSuccess = ({ project_name }: { project_name: string }) => {
   )
 }
 
-const componentClasses = {
-  button: {
-    root: `
-      !text-[--foreground]
-      bg-transparent
-      border-[--foreground-faded]
-
-      hover:!text-[#13294B]
-      hover:bg-transparent
-      hover:border-[#13294B]
-
-      disabled:bg-transparent
-      disabled:border-[--button-disabled]
-      disabled:!text-[--button-disabled-text-color]
-    `,
-  },
-  buttonPrimary: {
-    root: `
-      !text-white
-      bg-[#13294B]
-
-      hover:!text-white
-      hover:bg-[#13294B]/90
-
-      disabled:bg-[#13294B]/50
-      disabled:!text-white/50
-    `,
-  },
-}
-
 export default StepSuccess
diff --git a/src/components/UIUC-Components/MakeNewCoursePageSteps/StepUpload.tsx b/src/components/UIUC-Components/MakeNewCoursePageSteps/StepUpload.tsx
index 355b3181b..21a339083 100644
--- a/src/components/UIUC-Components/MakeNewCoursePageSteps/StepUpload.tsx
+++ b/src/components/UIUC-Components/MakeNewCoursePageSteps/StepUpload.tsx
@@ -61,7 +61,7 @@ const StepUpload = ({
         {/* step content - core step information */}
         <div className="step_content">
           {/* Import section */}
-          <Text fw={600} size="md" className="mb-2 mt-4 text-[--foreground]">
+          <Text fw={600} size="md" className="mb-3 mt-6 text-[--foreground]">
             Import from URLs & Platforms
           </Text>
           <SimpleGrid
@@ -100,7 +100,7 @@ const StepUpload = ({
           </SimpleGrid>
 
           {/* Upload section */}
-          <Text fw={600} size="md" className="mb-2 mt-8 text-[--foreground]">
+          <Text fw={600} size="md" className="mb-3 mt-6 text-[--foreground]">
             Upload Files
           </Text>
           <LargeDropzone
diff --git a/src/components/UIUC-Components/PromptEditor.tsx b/src/components/UIUC-Components/PromptEditor.tsx
index 7871690bf..cbdff6ba3 100644
--- a/src/components/UIUC-Components/PromptEditor.tsx
+++ b/src/components/UIUC-Components/PromptEditor.tsx
@@ -42,7 +42,7 @@ import { v4 as uuidv4 } from 'uuid'
 import CustomCopyButton from '~/components/Buttons/CustomCopyButton'
 import { getModelLogo } from '~/components/Chat/ModelSelect'
 import { LinkGeneratorModal } from '~/components/Modals/LinkGeneratorModal'
-import CustomSwitch from '~/components/Switches/CustomSwitch'
+import { Switch } from '@/components/shadcn/ui/switch'
 import { findDefaultModel } from '~/components/UIUC-Components/api-inputs/LLMsApiKeyInputForm'
 import { type ChatBody } from '~/types/chat'
 import { type CourseMetadata } from '~/types/courseMetadata'
@@ -874,7 +874,8 @@ CRITICAL: The optimized prompt must:
         'Failed to optimize prompt. Please try again.',
         true,
       )
-      setIsOptimizing(false) // Keep this here for error cases
+    } finally {
+      setIsOptimizing(false)
     }
   }
 
@@ -918,7 +919,7 @@ CRITICAL: The optimized prompt must:
           <div className={`${isEmbedded ? '' : 'p-4'}`}>
             {/* Prompt Engineering Guide */}
             <Paper
-              className="w-full rounded-xl bg-[--dashboard-background-faded] px-4 sm:px-6 md:px-8"
+              className="w-full rounded-xl bg-[--dashboard-background-faded] px-6"
               p="md"
               sx={{
                 transition: 'all 0.2s ease',
@@ -931,7 +932,6 @@ CRITICAL: The optimized prompt must:
                 justify="space-between"
                 sx={{
                   cursor: 'pointer',
-                  padding: '4px 8px',
                   borderRadius: '8px',
                 }}
                 onClick={() => setInsightsOpen(!insightsOpen)}
@@ -943,13 +943,12 @@ CRITICAL: The optimized prompt must:
                       color: 'var(--dashboard-button)',
                     }}
                   />
-                  <Text
-                    size="md"
-                    weight={600}
-                    className={`${montserrat_paragraph.variable} select-text font-montserratParagraph text-[--dashboard-foreground]`}
+                  <Title
+                    className={`label ${montserrat_heading.variable} pl-1 pr-0 font-montserratHeading text-[--dashboard-foreground] md:pl-0 md:pr-2`}
+                    order={4}
                   >
                     Prompt Engineering Guide
-                  </Text>
+                  </Title>
                 </Flex>
                 <div
                   className="transition-transform duration-200"
@@ -1073,7 +1072,7 @@ CRITICAL: The optimized prompt must:
                 alignItems: 'center',
                 background: 'var(--dashboard-background-faded)',
               }}
-              className="mt-4 rounded-xl px-4 py-6 sm:px-6 sm:py-6 md:px-8"
+              className="mt-4 rounded-xl px-4 py-6 sm:p-6"
             >
               <div
                 style={{
@@ -1083,7 +1082,7 @@ CRITICAL: The optimized prompt must:
                 }}
               >
                 <Flex justify="space-between" align="center" mb="md">
-                  <Flex align="center" className="gap-4">
+                  <Flex align="center" className="-mt-2 gap-4">
                     <Title
                       className={`label ${montserrat_heading.variable} pl-1 pr-0 font-montserratHeading text-[--dashboard-foreground] md:pl-0 md:pr-2`}
                       order={4}
@@ -1207,7 +1206,7 @@ CRITICAL: The optimized prompt must:
                         input: {
                           color: 'var(--foreground)',
                           backgroundColor: 'var(--background)',
-                          border: 'none',
+                          borderColor: 'var(--button)',
                           '&:focus': {
                             borderColor: '#6e56cf',
                           },
@@ -1319,6 +1318,8 @@ CRITICAL: The optimized prompt must:
                           />
                         ) : null
                       }
+                      dropdownPosition="bottom"
+                      withinPortal
                     />
                     <Tooltip
                       label="The selected model will be used when Optimizing System Prompt"
@@ -1644,40 +1645,56 @@ CRITICAL: The optimized prompt must:
                 </Title>
 
                 <Flex direction="column" gap="md">
-                  <CustomSwitch
+                  <Switch
+                    size="lg"
+                    variant="labeled"
+                    showLabels
+                    showThumbIcon
                     label="Smart Document Search"
                     tooltip="Optimizes queries to better search through course materials."
                     checked={vectorSearchRewrite}
-                    onChange={(value: boolean) => {
+                    onCheckedChange={(value: boolean) => {
                       handleSettingChange({
                         vector_search_rewrite_disabled: !value,
                       })
                     }}
                   />
 
-                  <CustomSwitch
+                  <Switch
+                    size="lg"
+                    variant="labeled"
+                    showLabels
+                    showThumbIcon
                     label="Guided Learning"
                     tooltip="AI provides hints instead of direct answers to encourage learning."
                     checked={guidedLearning}
-                    onChange={(value: boolean) =>
+                    onCheckedChange={(value: boolean) =>
                       handleCheckboxChange({ guidedLearning: value })
                     }
                   />
 
-                  <CustomSwitch
+                  <Switch
+                    size="lg"
+                    variant="labeled"
+                    showLabels
+                    showThumbIcon
                     label="Document-Based References Only"
                     tooltip="Restricts AI to only use information from provided documents."
                     checked={documentsOnly}
-                    onChange={(value: boolean) =>
+                    onCheckedChange={(value: boolean) =>
                       handleCheckboxChange({ documentsOnly: value })
                     }
                   />
 
-                  <CustomSwitch
+                  <Switch
+                    size="lg"
+                    variant="labeled"
+                    showLabels
+                    showThumbIcon
                     label="Bypass Illinois Chat's internal prompting"
                     tooltip="Full control over bot behavior without internal prompting."
                     checked={systemPromptOnly}
-                    onChange={(value: boolean) =>
+                    onCheckedChange={(value: boolean) =>
                       handleCheckboxChange({ systemPromptOnly: value })
                     }
                   />
@@ -1978,11 +1995,14 @@ CRITICAL: The optimized prompt must:
                 </Indicator>
               </Flex>
 
-              <CustomSwitch
+              <Switch
+                variant="labeled"
+                showLabels
+                showThumbIcon
                 label="Smart Document Search"
                 tooltip="When enabled, Illinois Chat optimizes your queries to better search through course materials and find relevant content. Note: This only affects how documents are searched - your chat messages remain exactly as you write them."
                 checked={vectorSearchRewrite}
-                onChange={(value: boolean) => {
+                onCheckedChange={(value: boolean) => {
                   handleSettingChange({
                     vector_search_rewrite_disabled: !value,
                   })
@@ -2023,29 +2043,38 @@ CRITICAL: The optimized prompt must:
 
               <Flex direction="column" gap="md">
                 <div className="flex flex-col gap-1">
-                  <CustomSwitch
+                  <Switch
+                    variant="labeled"
+                    showLabels
+                    showThumbIcon
                     label="Guided Learning"
                     tooltip="When enabled course-wide, this setting applies to all students and cannot be disabled by them. The AI will encourage independent problem-solving by providing hints and questions instead of direct answers, while still finding and citing relevant course materials. This promotes critical thinking while ensuring students have access to proper resources."
                     checked={guidedLearning}
-                    onChange={(value: boolean) =>
+                    onCheckedChange={(value: boolean) =>
                       handleCheckboxChange({ guidedLearning: value })
                     }
                   />
 
-                  <CustomSwitch
+                  <Switch
+                    variant="labeled"
+                    showLabels
+                    showThumbIcon
                     label="Document-Based References Only"
                     tooltip="Restricts the AI to use only information from the provided documents. Useful for maintaining accuracy in fields like legal research where external knowledge could be problematic."
                     checked={documentsOnly}
-                    onChange={(value: boolean) =>
+                    onCheckedChange={(value: boolean) =>
                       handleCheckboxChange({ documentsOnly: value })
                     }
                   />
 
-                  <CustomSwitch
+                  <Switch
+                    variant="labeled"
+                    showLabels
+                    showThumbIcon
                     label="Bypass Illinois Chat's internal prompting"
                     tooltip="Internally, we prompt the model to (1) add citations and (2) always be as helpful as possible. You can bypass this for full un-modified control over your bot."
                     checked={systemPromptOnly}
-                    onChange={(value: boolean) =>
+                    onCheckedChange={(value: boolean) =>
                       handleCheckboxChange({ systemPromptOnly: value })
                     }
                   />
diff --git a/src/components/UIUC-Components/PromptEditorEmbed.tsx b/src/components/UIUC-Components/PromptEditorEmbed.tsx
new file mode 100644
index 000000000..5b47954b6
--- /dev/null
+++ b/src/components/UIUC-Components/PromptEditorEmbed.tsx
@@ -0,0 +1,2082 @@
+// PromptEditor.tsx - Shared component for prompt editing
+// Used by both prompt.tsx page and StepPrompt wizard step
+'use client'
+import React, { useEffect, useRef, useState } from 'react'
+import {
+  Collapse,
+  Divider,
+  Flex,
+  Group,
+  Image,
+  Indicator,
+  List,
+  MantineTheme,
+  Modal,
+  Paper,
+  Select,
+  Text,
+  Textarea,
+  Title,
+  Tooltip,
+  useMantineTheme,
+} from '@mantine/core'
+import { Button } from '@/components/shadcn/ui/button'
+import { useDisclosure, useMediaQuery } from '@mantine/hooks'
+import { notifications } from '@mantine/notifications'
+import {
+  IconAlertTriangle,
+  IconAlertTriangleFilled,
+  IconBook,
+  IconCheck,
+  IconChevronDown,
+  IconExternalLink,
+  IconInfoCircle,
+  IconLayoutSidebarRight,
+  IconLayoutSidebarRightExpand,
+  IconLink,
+  IconSparkles,
+} from '@tabler/icons-react'
+import { useDebouncedCallback } from 'use-debounce'
+import { v4 as uuidv4 } from 'uuid'
+import CustomCopyButton from '~/components/Buttons/CustomCopyButton'
+import { getModelLogo } from '~/components/Chat/ModelSelect'
+import { LinkGeneratorModal } from '~/components/Modals/LinkGeneratorModal'
+import { Switch } from '@/components/shadcn/ui/switch'
+import { findDefaultModel } from '~/components/UIUC-Components/api-inputs/LLMsApiKeyInputForm'
+import { type ChatBody } from '~/types/chat'
+import { type CourseMetadata } from '~/types/courseMetadata'
+import { callSetCourseMetadata, fetchCourseMetadata } from '~/utils/apiUtils'
+import {
+  DEFAULT_SYSTEM_PROMPT,
+  DOCUMENT_FOCUS_PROMPT,
+  GUIDED_LEARNING_PROMPT,
+} from '~/utils/app/const'
+import {
+  recommendedModelIds,
+  warningLargeModelIds,
+} from '~/utils/modelProviders/ConfigWebLLM'
+import {
+  BedrockProvider,
+  LLM_PROVIDER_ORDER,
+  ProviderNames,
+  ReasoningCapableModels,
+  type AllLLMProviders,
+  type AnySupportedModel,
+} from '~/utils/modelProviders/LLMProvider'
+import { type AnthropicModel } from '~/utils/modelProviders/types/anthropic'
+import { LoadingSpinner } from './LoadingSpinner'
+import { useQueryClient } from '@tanstack/react-query'
+
+interface PromptEditorProps {
+  project_name: string
+  isEmbedded?: boolean // When true, shows a more compact version for wizard
+  showHeader?: boolean // Whether to show the "Prompting / project_name" header
+  userEmail?: string // User email for API calls
+}
+
+type PartialCourseMetadata = {
+  [K in keyof CourseMetadata]?: CourseMetadata[K]
+}
+
+interface ModelOption {
+  group: ProviderNames
+  value: string
+  label: string
+  modelId: string
+  selectedModelId: string
+  modelType: string
+  downloadSize?: string
+  vram_required_MB?: number
+  extendedThinking?: boolean
+}
+
+const getProviderFromModel = (
+  modelId: string,
+  modelOptions: ModelOption[],
+): ProviderNames => {
+  if (!modelId || !modelOptions.length) return ProviderNames.OpenAI
+  const selectedOption = modelOptions.find((option) => option.value === modelId)
+  return selectedOption?.group || ProviderNames.OpenAI
+}
+
+const isApiKeyRequired = (provider: ProviderNames): boolean => {
+  const providersRequiringApiKey = [
+    ProviderNames.OpenAI,
+    ProviderNames.Anthropic,
+    ProviderNames.Azure,
+    ProviderNames.Gemini,
+    ProviderNames.Bedrock,
+  ]
+  return providersRequiringApiKey.includes(provider)
+}
+
+export const showPromptToast = (
+  theme: MantineTheme,
+  title: string,
+  message: string,
+  isError = false,
+  icon?: React.ReactNode,
+) => {
+  // Calculate duration based on message length (minimum 5 seconds, add 1 second for every 20 characters)
+  const baseDuration = 5000
+  const durationPerChar = 50 // 50ms per character
+  const duration = Math.max(
+    baseDuration,
+    Math.min(15000, message.length * durationPerChar),
+  )
+
+  notifications.show({
+    withCloseButton: true,
+    autoClose: duration,
+    title: title,
+    message: message,
+    icon: icon || (isError ? <IconAlertTriangle /> : <IconCheck />),
+    styles: {
+      root: {
+        backgroundColor: 'var(--notification)', // Dark background to match the page
+        borderColor: isError ? '#E53935' : 'var(--notification-border)', // Red for errors,  for success
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        borderRadius: '8px', // Added rounded corners
+      },
+      title: {
+        color: 'var(--notification-title)', // White text for the title
+        fontWeight: 600,
+      },
+      description: {
+        color: 'var(--notification-message)', // Light gray text for the message
+      },
+      closeButton: {
+        color: 'var(--notification-title)', // White color for the close button
+        borderRadius: '4px', // Added rounded corners to close button
+        '&:hover': {
+          backgroundColor: 'rgba(255, 255, 255, 0.1)', // Subtle hover effect
+        },
+      },
+      icon: {
+        backgroundColor: 'transparent', // Transparent background for the icon
+        color: isError ? '#E53935' : 'var(--notification-title)', // Icon color matches the border
+      },
+    },
+  })
+}
+
+export const showToastOnPromptUpdate = (
+  theme: MantineTheme,
+  was_error = false,
+  isReset = false,
+) => {
+  const title = was_error
+    ? 'Error Updating Prompt'
+    : isReset
+      ? 'Prompt Reset to Default'
+      : 'Prompt Updated Successfully'
+  const message = was_error
+    ? 'An error occurred while updating the prompt. Please try again.'
+    : isReset
+      ? 'The system prompt has been reset to default settings.'
+      : 'The system prompt has been updated.'
+  const isError = was_error
+
+  showPromptToast(theme, title, message, isError)
+}
+
+export const showToastNotification = (
+  title: string,
+  message: string,
+  isError = false,
+) => {
+  const baseDuration = 5000
+  const durationPerChar = 50
+  const duration = Math.max(
+    baseDuration,
+    Math.min(15000, message.length * durationPerChar),
+  )
+
+  notifications.show({
+    withCloseButton: true,
+    autoClose: duration,
+    title: title,
+    message: message,
+    icon: isError ? <IconAlertTriangle /> : <IconCheck />,
+    styles: {
+      root: {
+        backgroundColor: 'var(--notification)',
+        borderColor: isError ? '#E53935' : 'var(--notification-border)',
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        borderRadius: '8px',
+      },
+      title: {
+        color: 'var(--notification-title)',
+        fontWeight: 600,
+      },
+      description: {
+        color: 'var(--notification-message)',
+      },
+      closeButton: {
+        color: 'var(--notification-title)',
+        borderRadius: '4px',
+        '&:hover': {
+          backgroundColor: 'rgba(255, 255, 255, 0.1)',
+        },
+      },
+      icon: {
+        backgroundColor: 'transparent',
+        color: isError ? '#E53935' : 'var(--notification-title)',
+      },
+    },
+  })
+}
+
+const PromptEditor: React.FC<PromptEditorProps> = ({
+  project_name,
+  isEmbedded = false,
+  showHeader = true,
+  userEmail,
+}) => {
+  const theme = useMantineTheme()
+  const queryClient = useQueryClient()
+  const isSmallScreen = useMediaQuery('(max-width: 1280px)')
+
+  // State
+  const [isLoading, setIsLoading] = useState(true)
+  const [courseMetadata, setCourseMetadata] = useState<CourseMetadata | null>(
+    null,
+  )
+  const [baseSystemPrompt, setBaseSystemPrompt] = useState('')
+  const [isRightSideVisible, setIsRightSideVisible] = useState(!isEmbedded)
+  const [selectedModel, setSelectedModel] = useState<string>('')
+  const [opened, { close, open }] = useDisclosure(false)
+  const [resetModalOpened, { close: closeResetModal, open: openResetModal }] =
+    useDisclosure(false)
+  const [llmProviders, setLLMProviders] = useState<AllLLMProviders | null>(null)
+  const [
+    linkGeneratorOpened,
+    { open: openLinkGenerator, close: closeLinkGenerator },
+  ] = useDisclosure(false)
+  const [messages, setMessages] = useState<
+    Array<{ role: string; content: string }>
+  >([])
+  const [isOptimizing, setIsOptimizing] = useState(false)
+  const [insightsOpen, setInsightsOpen] = useState(false)
+
+  // Toggle states
+  const [guidedLearning, setGuidedLearning] = useState(false)
+  const [documentsOnly, setDocumentsOnly] = useState(false)
+  const [systemPromptOnly, setSystemPromptOnly] = useState(false)
+  const [vectorSearchRewrite, setVectorSearchRewrite] = useState(false)
+
+  const courseMetadataRef = useRef<CourseMetadata | null>(null)
+  const initialSwitchStateRef = useRef<{
+    guidedLearning: boolean
+    documentsOnly: boolean
+    systemPromptOnly: boolean
+    vectorSearchRewrite: boolean
+  }>({
+    guidedLearning: false,
+    documentsOnly: false,
+    systemPromptOnly: false,
+    vectorSearchRewrite: false,
+  })
+
+  const removeThinkSections = (text: string): string => {
+    const cleanedText = text.replace(/<think>[\s\S]*?<\/think>/g, '')
+    return cleanedText.replace(/<\/?think>/g, '').trim()
+  }
+
+  // Build model options from providers
+  const modelOptions = llmProviders
+    ? Object.entries(llmProviders as AllLLMProviders)
+        // Sort by LLM_PROVIDER_ORDER
+        .sort(([providerA], [providerB]) => {
+          const indexA = LLM_PROVIDER_ORDER.indexOf(providerA as ProviderNames)
+          const indexB = LLM_PROVIDER_ORDER.indexOf(providerB as ProviderNames)
+          // Providers not in the order list will be placed at the end
+          if (indexA === -1) return 1
+          if (indexB === -1) return -1
+          return indexA - indexB
+        })
+        .flatMap(([provider, config]) =>
+          config.enabled && config.models && provider !== 'WebLLM'
+            ? config.models
+                .filter((model: AnySupportedModel) => model.enabled)
+                .filter(
+                  (model: AnySupportedModel) =>
+                    model.id !== 'learnlm-1.5-pro-experimental',
+                )
+                .map((model: AnySupportedModel) => ({
+                  group: provider as ProviderNames,
+                  value: model.id,
+                  label: model.name,
+                  modelId: model.id,
+                  selectedModelId: selectedModel,
+                  modelType: provider,
+                  // @ts-ignore -- this being missing is fine
+                  downloadSize: model?.downloadSize,
+                  // @ts-ignore -- this being missing is fine
+                  vram_required_MB: model?.vram_required_MB,
+                  extendedThinking:
+                    (model as AnthropicModel)?.extendedThinking || false,
+                }))
+            : [],
+        )
+    : []
+
+  // Fetch course metadata and providers on mount
+  useEffect(() => {
+    const fetchData = async () => {
+      if (!project_name) return
+
+      try {
+        // Check React Query cache first
+        const cachedMetadata = queryClient.getQueryData([
+          'courseMetadata',
+          project_name,
+        ]) as CourseMetadata | undefined
+
+        let metadata: CourseMetadata | null = null
+        if (cachedMetadata) {
+          metadata = cachedMetadata
+        } else {
+          metadata = await fetchCourseMetadata(project_name)
+          if (metadata) {
+            queryClient.setQueryData(['courseMetadata', project_name], metadata)
+          }
+        }
+
+        if (metadata) {
+          setCourseMetadata(metadata)
+          setBaseSystemPrompt(
+            metadata.system_prompt ?? DEFAULT_SYSTEM_PROMPT ?? '',
+          )
+          setGuidedLearning(metadata.guidedLearning || false)
+          setDocumentsOnly(metadata.documentsOnly || false)
+          setSystemPromptOnly(metadata.systemPromptOnly || false)
+          setVectorSearchRewrite(!metadata.vector_search_rewrite_disabled)
+          courseMetadataRef.current = metadata
+          initialSwitchStateRef.current = {
+            guidedLearning: metadata.guidedLearning || false,
+            documentsOnly: metadata.documentsOnly || false,
+            systemPromptOnly: metadata.systemPromptOnly || false,
+            vectorSearchRewrite: !metadata.vector_search_rewrite_disabled,
+          }
+        }
+
+        // Fetch LLM providers
+        const response = await fetch('/api/models', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ projectName: project_name }),
+        })
+        if (response.ok) {
+          const providers = await response.json()
+          setLLMProviders(providers)
+        }
+      } catch (error) {
+        console.error('Error fetching data:', error)
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    fetchData()
+  }, [project_name, queryClient])
+
+  // Set default model when providers load
+  useEffect(() => {
+    if (llmProviders) {
+      const defaultModel = findDefaultModel(llmProviders)
+      if (defaultModel) {
+        setSelectedModel(defaultModel.id)
+      }
+    }
+  }, [llmProviders])
+
+  useEffect(() => {
+    courseMetadataRef.current = courseMetadata
+    if (courseMetadata) {
+      initialSwitchStateRef.current = {
+        guidedLearning: courseMetadata.guidedLearning || false,
+        documentsOnly: courseMetadata.documentsOnly || false,
+        systemPromptOnly: courseMetadata.systemPromptOnly || false,
+        vectorSearchRewrite: !courseMetadata.vector_search_rewrite_disabled,
+      }
+    }
+  }, [courseMetadata])
+
+  // Handle system prompt submission
+  const handleSystemPromptSubmit = async (
+    newSystemPrompt: string | undefined,
+  ) => {
+    let success = false
+    if (courseMetadata && project_name) {
+      const updatedCourseMetadata = {
+        ...courseMetadata,
+        system_prompt: newSystemPrompt, // Keep as is, whether it's an empty string or undefined
+        guidedLearning,
+        documentsOnly,
+        systemPromptOnly,
+      }
+      success = await callSetCourseMetadata(project_name, updatedCourseMetadata)
+      if (success) {
+        setCourseMetadata(updatedCourseMetadata)
+      }
+    }
+    if (!success) {
+      console.log('Error updating course metadata')
+      showToastOnPromptUpdate(theme, true)
+    } else {
+      showToastOnPromptUpdate(theme)
+    }
+  }
+
+  // Reset system prompt
+  const resetSystemPrompt = async () => {
+    if (courseMetadata && project_name) {
+      const updatedCourseMetadata = {
+        ...courseMetadata,
+        system_prompt: null, // Explicitly set to undefined
+        guidedLearning: false,
+        documentsOnly: false,
+        systemPromptOnly: false,
+      }
+      const success = await callSetCourseMetadata(
+        project_name,
+        updatedCourseMetadata,
+      )
+      if (!success) {
+        alert('Error resetting system prompt')
+        showToastOnPromptUpdate(theme, true, true)
+      } else {
+        setBaseSystemPrompt(DEFAULT_SYSTEM_PROMPT ?? '')
+        setCourseMetadata(updatedCourseMetadata)
+        setGuidedLearning(false)
+        setDocumentsOnly(false)
+        setSystemPromptOnly(false)
+        showToastOnPromptUpdate(theme, false, true)
+      }
+    } else {
+      alert('Error resetting system prompt')
+    }
+  }
+
+  // Update system prompt with toggle changes
+  const updateSystemPrompt = (updatedFields: Partial<CourseMetadata>) => {
+    let newPrompt = baseSystemPrompt
+
+    // Handle Guided Learning prompt
+    if (updatedFields.guidedLearning !== undefined) {
+      if (updatedFields.guidedLearning) {
+        if (!newPrompt.includes(GUIDED_LEARNING_PROMPT)) {
+          newPrompt += GUIDED_LEARNING_PROMPT
+        }
+      } else {
+        newPrompt = newPrompt.replace(GUIDED_LEARNING_PROMPT, '')
+      }
+    }
+
+    // Handle Documents Only prompt
+    if (updatedFields.documentsOnly !== undefined) {
+      if (updatedFields.documentsOnly) {
+        if (!newPrompt.includes(DOCUMENT_FOCUS_PROMPT)) {
+          newPrompt += DOCUMENT_FOCUS_PROMPT
+        }
+      } else {
+        newPrompt = newPrompt.replace(DOCUMENT_FOCUS_PROMPT, '')
+      }
+    }
+
+    return newPrompt
+  }
+
+  // Save settings with debounce
+  const saveSettings = async () => {
+    if (!courseMetadataRef.current || !project_name) return
+
+    const currentSwitchState = {
+      guidedLearning,
+      documentsOnly,
+      systemPromptOnly,
+      vectorSearchRewrite,
+    }
+
+    const initialSwitchState = initialSwitchStateRef.current
+
+    const hasChanges = (
+      Object.keys(currentSwitchState) as Array<keyof typeof currentSwitchState>
+    ).some((key) => currentSwitchState[key] !== initialSwitchState[key])
+
+    if (!hasChanges) {
+      return
+    }
+
+    const updatedMetadata = {
+      ...courseMetadataRef.current,
+      guidedLearning,
+      documentsOnly,
+      systemPromptOnly,
+      vector_search_rewrite_disabled: !vectorSearchRewrite,
+    } as CourseMetadata
+
+    try {
+      const success = await callSetCourseMetadata(project_name, updatedMetadata)
+      if (!success) {
+        showPromptToast(theme, 'Error', 'Failed to update settings', true)
+        return
+      }
+
+      setCourseMetadata(updatedMetadata)
+      initialSwitchStateRef.current = currentSwitchState
+
+      const changes: string[] = []
+      if (
+        initialSwitchState.vectorSearchRewrite !==
+        currentSwitchState.vectorSearchRewrite
+      ) {
+        changes.push(
+          `Smart Document Search ${currentSwitchState.vectorSearchRewrite ? 'enabled' : 'disabled'}`,
+        )
+      }
+      if (
+        initialSwitchState.guidedLearning !== currentSwitchState.guidedLearning
+      ) {
+        changes.push(
+          `Guided Learning ${currentSwitchState.guidedLearning ? 'enabled' : 'disabled'}`,
+        )
+      }
+      if (
+        initialSwitchState.documentsOnly !== currentSwitchState.documentsOnly
+      ) {
+        changes.push(
+          `Document-Based References Only ${currentSwitchState.documentsOnly ? 'enabled' : 'disabled'}`,
+        )
+      }
+      if (
+        initialSwitchState.systemPromptOnly !==
+        currentSwitchState.systemPromptOnly
+      ) {
+        changes.push(
+          `Bypass Illinois Chat's internal prompting ${currentSwitchState.systemPromptOnly ? 'enabled' : 'disabled'}`,
+        )
+      }
+
+      if (changes.length > 0) {
+        showPromptToast(
+          theme,
+          changes.join(' & '),
+          'Settings have been saved successfully',
+          false,
+        )
+      }
+    } catch (error) {
+      console.error('Error updating course settings:', error)
+      showPromptToast(theme, 'Error', 'Failed to update settings', true)
+    }
+  }
+
+  const debouncedSaveSettings = useDebouncedCallback(saveSettings, 500)
+
+  const handleCheckboxChange = async (updatedFields: PartialCourseMetadata) => {
+    if (!courseMetadata || !project_name) {
+      showPromptToast(theme, 'Error', 'Failed to update settings', true)
+      return
+    }
+
+    if ('guidedLearning' in updatedFields)
+      setGuidedLearning(updatedFields.guidedLearning!)
+    if ('documentsOnly' in updatedFields)
+      setDocumentsOnly(updatedFields.documentsOnly!)
+    if ('systemPromptOnly' in updatedFields)
+      setSystemPromptOnly(updatedFields.systemPromptOnly!)
+
+    const newSystemPrompt = updateSystemPrompt(updatedFields)
+    setBaseSystemPrompt(newSystemPrompt)
+
+    courseMetadataRef.current = {
+      ...courseMetadataRef.current!,
+      ...updatedFields,
+      system_prompt: newSystemPrompt,
+    } as CourseMetadata
+
+    debouncedSaveSettings()
+  }
+
+  const handleSettingChange = (updates: PartialCourseMetadata) => {
+    if (!courseMetadata) return
+
+    if ('vector_search_rewrite_disabled' in updates) {
+      setVectorSearchRewrite(!updates.vector_search_rewrite_disabled)
+    }
+
+    courseMetadataRef.current = {
+      ...courseMetadataRef.current!,
+      ...updates,
+    } as CourseMetadata
+
+    debouncedSaveSettings()
+  }
+
+  const handleCopyDefaultPrompt = async () => {
+    try {
+      const response = await fetch('/api/getDefaultPostPrompt')
+      if (!response.ok) {
+        const errorMessage = `Failed to fetch default prompt: ${response.status} ${response.statusText}`
+        console.error(errorMessage)
+        throw new Error(errorMessage)
+      }
+      const data = await response.json()
+      const defaultPostPrompt = data.prompt
+
+      navigator.clipboard
+        .writeText(defaultPostPrompt)
+        .then(() => {
+          showPromptToast(
+            theme,
+            'Copied',
+            'Default post prompt system prompt copied to clipboard',
+          )
+        })
+        .catch((err) => {
+          console.error('Could not copy text: ', err)
+          showPromptToast(
+            theme,
+            'Error Copying',
+            'Could not copy text to clipboard',
+            true,
+          )
+        })
+    } catch (error) {
+      console.error('Error fetching default prompt:', error)
+      showPromptToast(
+        theme,
+        'Error Fetching',
+        'Could not fetch default prompt',
+        true,
+      )
+    }
+  }
+
+  // Handle prompt optimization
+  const handleSubmitPromptOptimization = async (e: any) => {
+    e.preventDefault()
+    setIsOptimizing(true)
+    setMessages([])
+
+    try {
+      if (!llmProviders) {
+        showPromptToast(
+          theme,
+          'Configuration Error',
+          'The Optimize System Prompt feature requires provider configuration to be loaded. Please refresh the page and try again.',
+          true,
+        )
+        return
+      }
+
+      const provider = getProviderFromModel(selectedModel, modelOptions)
+      if (!llmProviders[provider]?.enabled) {
+        showPromptToast(
+          theme,
+          `${provider} Required`,
+          `The Optimize System Prompt feature requires ${provider} to be enabled. Please enable ${provider} on the LLM page in your course settings to use this feature.`,
+          true,
+        )
+        return
+      }
+
+      if (isApiKeyRequired(provider)) {
+        if (provider === 'Bedrock') {
+          const bedrockProvider = llmProviders[provider] as BedrockProvider
+          if (
+            !bedrockProvider?.accessKeyId ||
+            !bedrockProvider?.secretAccessKey ||
+            !bedrockProvider?.region
+          ) {
+            showPromptToast(
+              theme,
+              `${provider} Credentials Required`,
+              `The Optimize System Prompt feature requires AWS credentials (Access Key ID, Secret Access Key, and Region). Please add your AWS credentials on the LLM page in your course settings to use this feature.`,
+              true,
+            )
+            return
+          }
+        } else if (!llmProviders[provider]?.apiKey) {
+          showPromptToast(
+            theme,
+            `${provider} API Key Required`,
+            `The Optimize System Prompt feature requires a ${provider} API key. Please add your ${provider} API key on the LLM page in your course settings to use this feature.`,
+            true,
+          )
+          return
+        }
+      }
+      const systemPrompt = `You are an expert prompt engineer specializing in optimizing prompts with the ability to handle various different use cases. Your task is to analyze and enhance the provided system prompt while preserving its core functionality and improving its effectiveness.
+
+Key Objectives:
+
+1. Core Functionality Analysis:
+   - Identify the primary purpose and key behaviors specified in the prompt
+   - Determine if the prompt involves document/RAG interactions
+   - Recognize any special modes (e.g., guided learning, document-only)
+   - Map out any specific output format requirements
+
+2. Educational Enhancement:
+   - Strengthen pedagogical elements if present
+   - Add clear reasoning steps where appropriate
+   - Ensure explanations precede conclusions
+   - Maintain academic integrity guidelines if specified
+
+3. RAG Integration (OPTIONAL, ONLY IF APPLICABLE):
+   - Optimize document reference and citation patterns
+   - Enhance context retrieval instructions
+   - Improve document summarization guidelines
+   - Add safeguards against hallucination
+
+4. Prompt Structure Optimization:
+   - Organize instructions in a clear, logical flow
+   - Remove redundancy while preserving distinct requirements
+   - Add explicit step-by-step breakdowns where helpful
+   - Create smooth transitions between different behaviors
+
+5. Output Quality Assurance:
+   - Specify clear formatting requirements
+   - Add validation steps for responses
+   - Include error handling guidelines
+   - Define success criteria
+
+6. Behavioral Calibration:
+   - Adjust tone and formality to match educational context
+   - Balance helpfulness with academic integrity
+   - Maintain consistent personality throughout interactions
+   - Preserve any specific behavioral constraints
+
+7. Technical Requirements:
+   - Keep all special syntax and formatting intact
+   - Preserve any API-specific formatting
+   - Maintain compatibility with Illinois Chat's citation system (OPTIONAL, ONLY IF APPLICABLE and mentioned in the original prompt)
+   - Ensure proper handling of code blocks and markdown
+
+Output Format:
+Return ONLY the optimized system prompt with no additional commentary. The prompt should follow this structure:
+1. Core role and purpose statement
+2. Primary behavioral guidelines
+3. Document interaction rules (OPTIONAL, ONLY IF APPLICABLE)
+4. Step-by-step instruction flow
+5. Output format requirements
+6. Special mode handling (OPTIONAL, ONLY IF APPLICABLE)
+
+CRITICAL: The optimized prompt must:
+- Preserve ALL core functionality from the original
+- Enhance clarity and effectiveness
+- Maintain compatibility with Illinois Chat's features (OPTIONAL, ONLY IF APPLICABLE and mentioned in the original prompt)
+- Support both RAG and non-RAG interactions appropriately
+- Keep any existing citation or formatting requirements
+- SHOULD NOT MENTION SPECIAL MODE HANDLING OR OPTIONAL SECTIONS IF THEY ARE NOT EXPLICITLY PRESENT IN THE ORIGINAL PROMPT
+- be concise and NOT include any special mode handling or optional sections unless they are explicitly present in the original prompt`
+
+      const chatBody: ChatBody = {
+        conversation: {
+          id: uuidv4(),
+          name: 'Prompt Optimization',
+          messages: [
+            {
+              id: uuidv4(),
+              role: 'system',
+              content: systemPrompt,
+            },
+            {
+              id: uuidv4(),
+              role: 'user',
+              content: baseSystemPrompt,
+            },
+          ],
+          model: {
+            id: selectedModel || 'gpt-4',
+            name:
+              modelOptions.find((opt) => opt.value === selectedModel)?.label ||
+              'GPT-4',
+            tokenLimit: 8192,
+            enabled: true,
+            extendedThinking:
+              modelOptions.find((opt) => opt.value === selectedModel)
+                ?.extendedThinking || false,
+          },
+          prompt: baseSystemPrompt,
+          temperature: 0.1,
+          folderId: null,
+          userEmail: userEmail,
+        },
+        llmProviders: llmProviders,
+        course_name: project_name,
+        mode: 'optimize_prompt',
+        stream: true,
+        key: '',
+      }
+
+      const response = await fetch('/api/allNewRoutingChat', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(chatBody),
+      })
+
+      if (!response.ok) {
+        const errorData = await response.json()
+        showPromptToast(
+          theme,
+          'Error',
+          errorData.error || 'Failed to optimize prompt',
+          true,
+        )
+        return
+      }
+
+      const reader = response.body?.getReader()
+      if (!reader) {
+        throw new Error('No reader available')
+      }
+
+      let optimizedPrompt = ''
+      const decoder = new TextDecoder()
+      let isFirstChunk = true
+
+      while (true) {
+        const { done, value } = await reader.read()
+        if (done) break
+
+        const chunk = decoder.decode(value)
+        optimizedPrompt += chunk
+
+        // Open modal and update UI state on first chunk of content
+        if (isFirstChunk && chunk.trim()) {
+          isFirstChunk = false
+          open()
+          setIsOptimizing(false)
+        }
+
+        // Check if we're using a model that supports thinking tags
+        // Process the optimized prompt to remove <think> sections if using DeepSeek
+        const processedPrompt = ReasoningCapableModels.has(selectedModel as any)
+          ? removeThinkSections(optimizedPrompt)
+          : optimizedPrompt
+
+        // Update messages state for real-time display
+        setMessages([{ role: 'assistant', content: processedPrompt }])
+      }
+    } catch (error) {
+      console.error('Error optimizing prompt:', error)
+      showPromptToast(
+        theme,
+        'Error',
+        'Failed to optimize prompt. Please try again.',
+        true,
+      )
+    } finally {
+      setIsOptimizing(false)
+    }
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center p-8">
+        <Text className="text-[--foreground-faded]">Loading...</Text>
+      </div>
+    )
+  }
+
+  return (
+    <div className="prompt-editor">
+      <Flex direction={isSmallScreen || isEmbedded ? 'column' : 'row'}>
+        {/* Left Side - Main Content */}
+        <div
+          className={`min-h-full bg-[--background] ${
+            isEmbedded ? 'w-full' : 'flex-[1_1_60%]'
+          }`}
+        >
+          {showHeader && !isEmbedded && (
+            <div className="w-full px-4 py-3 sm:px-6 sm:py-4 md:px-8">
+              <div className="flex items-center gap-2">
+                <Title
+                  order={2}
+                  className={` text-lg text-[--foreground] sm:text-2xl`}
+                >
+                  Prompting
+                </Title>
+                <Text className="text-[--foreground]">/</Text>
+                <Title
+                  order={3}
+                  className={` text-base text-[--illinois-orange] sm:text-xl`}
+                >
+                  {project_name}
+                </Title>
+              </div>
+            </div>
+          )}
+
+          <div className={`${isEmbedded ? '' : 'p-4'}`}>
+            {/* Prompt Engineering Guide */}
+            <Paper
+              className="w-full rounded-xl bg-[--dashboard-background-faded] px-6"
+              p="md"
+              sx={{
+                transition: 'all 0.2s ease',
+              }}
+            >
+              <Flex
+                role="button"
+                tabIndex={0}
+                align="center"
+                justify="space-between"
+                sx={{
+                  cursor: 'pointer',
+                  borderRadius: '8px',
+                }}
+                onClick={() => setInsightsOpen(!insightsOpen)}
+              >
+                <Flex align="center" gap="md">
+                  <IconBook
+                    size={24}
+                    style={{
+                      color: 'var(--dashboard-button)',
+                    }}
+                  />
+                  <Title
+                    className={`label pl-1 pr-0 text-[--dashboard-foreground] md:pl-0 md:pr-2`}
+                    order={4}
+                  >
+                    Prompt Engineering Guide
+                  </Title>
+                </Flex>
+                <div
+                  className="transition-transform duration-200"
+                  style={{
+                    transform: insightsOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+                    color: 'var(--dashboard-foreground)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  }}
+                >
+                  <IconChevronDown size={24} />
+                </div>
+              </Flex>
+
+              <Collapse in={insightsOpen} transitionDuration={200}>
+                <div className="mt-4 px-2 text-[--dashboard-foreground]">
+                  <Text size="md" className={`select-text`}>
+                    For additional insights and best practices on prompt
+                    creation, please review:
+                    <List
+                      withPadding
+                      className="mt-2"
+                      spacing="sm"
+                      icon={
+                        <div
+                          style={{
+                            width: '6px',
+                            height: '6px',
+                            borderRadius: '50%',
+                            backgroundColor: 'var(--dashboard-foreground)',
+                            marginTop: '8px',
+                          }}
+                        />
+                      }
+                    >
+                      <List.Item>
+                        <a
+                          className={`text-sm text-[--dashboard-button] transition-colors duration-200 hover:text-[--dashboard-button-hover] `}
+                          href="https://platform.openai.com/docs/guides/prompt-engineering"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          The Official OpenAI Prompt Engineering Guide
+                          <IconExternalLink
+                            size={18}
+                            className="inline-block pl-1"
+                            style={{
+                              position: 'relative',
+                              top: '-2px',
+                            }}
+                          />
+                        </a>
+                      </List.Item>
+                      <List.Item>
+                        <a
+                          className={`text-sm text-[--dashboard-button] transition-colors duration-200 hover:text-[--dashboard-button-hover] `}
+                          href="https://docs.anthropic.com/claude/prompt-library"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          The Official Anthropic Prompt Library
+                          <IconExternalLink
+                            size={18}
+                            className="inline-block pl-1"
+                            style={{
+                              position: 'relative',
+                              top: '-2px',
+                            }}
+                          />
+                        </a>
+                      </List.Item>
+                    </List>
+                    <Text
+                      className={`label inline-block select-text`}
+                      size="md"
+                      style={{ marginTop: '1.5rem' }}
+                    >
+                      The System Prompt provides the foundation for every
+                      conversation in this project. It defines the model&apos;s
+                      role, tone, and behavior. Consider including:
+                      <List
+                        withPadding
+                        className="mt-2 text-[--dashboard-foreground]"
+                        spacing="xs"
+                        icon={
+                          <div
+                            style={{
+                              width: '6px',
+                              height: '6px',
+                              borderRadius: '50%',
+                              backgroundColor: 'var(--dashboard-foreground)',
+                              marginTop: '8px',
+                            }}
+                          />
+                        }
+                      >
+                        <List.Item>Key instructions or examples</List.Item>
+                        <List.Item>A warm welcome message</List.Item>
+                        <List.Item>
+                          Helpful links for further learning
+                        </List.Item>
+                      </List>
+                    </Text>
+                  </Text>
+                </div>
+              </Collapse>
+            </Paper>
+
+            {/* System Prompt Section */}
+            <div
+              style={{
+                width: '100%',
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                background: 'var(--dashboard-background-faded)',
+              }}
+              className="mt-4 rounded-xl px-4 py-6 sm:p-6"
+            >
+              <div
+                style={{
+                  width: '100%',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                }}
+              >
+                <Flex justify="space-between" align="center" mb="md">
+                  <Flex align="center" className="-mt-2 gap-4">
+                    <Title
+                      className={`label pl-1 pr-0 text-[--dashboard-foreground] md:pl-0 md:pr-2`}
+                      order={4}
+                    >
+                      System Prompt
+                    </Title>
+                    <Select
+                      placeholder="Select model"
+                      data={modelOptions}
+                      value={selectedModel}
+                      onChange={(value) => setSelectedModel(value || '')}
+                      searchable
+                      radius="md"
+                      maxDropdownHeight={280}
+                      itemComponent={(props: any) => (
+                        <div {...props}>
+                          <Group noWrap style={{ overflow: 'visible' }}>
+                            <div
+                              style={{
+                                width: '100%',
+                                paddingLeft: '4px',
+                                overflow: 'visible',
+                              }}
+                            >
+                              <div
+                                style={{
+                                  display: 'flex',
+                                  alignItems: 'center',
+                                  overflow: 'visible',
+                                }}
+                              >
+                                <Image
+                                  aria-hidden="true"
+                                  src={getModelLogo(props.modelType)}
+                                  alt={`${props.modelType} logo`}
+                                  width={20}
+                                  height={20}
+                                  style={{
+                                    minWidth: '20px',
+                                    borderRadius: '4px',
+                                    overflow: 'hidden',
+                                  }}
+                                />
+                                <Text size="sm" style={{ marginLeft: '12px' }}>
+                                  {props.label}
+                                </Text>
+                              </div>
+                              {props.downloadSize && (
+                                <div
+                                  style={{
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    marginTop: '4px',
+                                    marginLeft: '32px',
+                                  }}
+                                >
+                                  <Text size="xs" opacity={0.65}>
+                                    {props.downloadSize}
+                                  </Text>
+                                  {recommendedModelIds.includes(
+                                    props.label,
+                                  ) && (
+                                    <div
+                                      style={{
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                      }}
+                                    >
+                                      <IconSparkles
+                                        size="1rem"
+                                        style={{ marginLeft: '8px' }}
+                                      />
+                                      <Text
+                                        size="xs"
+                                        opacity={0.65}
+                                        style={{ marginLeft: '4px' }}
+                                      >
+                                        recommended
+                                      </Text>
+                                    </div>
+                                  )}
+                                  {warningLargeModelIds.includes(
+                                    props.label,
+                                  ) && (
+                                    <div
+                                      style={{
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                      }}
+                                    >
+                                      <IconAlertTriangleFilled
+                                        size="1rem"
+                                        style={{ marginLeft: '8px' }}
+                                      />
+                                      <Text
+                                        size="xs"
+                                        opacity={0.65}
+                                        style={{ marginLeft: '4px' }}
+                                      >
+                                        warning, requires large vRAM GPU
+                                      </Text>
+                                    </div>
+                                  )}
+                                </div>
+                              )}
+                            </div>
+                          </Group>
+                        </div>
+                      )}
+                      styles={(theme) => ({
+                        root: {
+                          width: '320px',
+                          '@media (max-width: 768px)': {
+                            width: '240px',
+                          },
+                          '@media (max-width: 480px)': {
+                            width: '220px',
+                          },
+                        },
+                        input: {
+                          color: 'var(--foreground)',
+                          backgroundColor: 'var(--background)',
+                          borderColor: 'var(--button)',
+                          '&:focus': {
+                            borderColor: '#6e56cf',
+                          },
+                          cursor: 'pointer',
+                          minWidth: 0,
+                          flex: '1 1 auto',
+                          height: '36px',
+                          fontSize: '0.9rem',
+                          paddingRight: '30px',
+                          paddingLeft: '36px',
+                          overflow: 'visible',
+                          '@media (max-width: 768px)': {
+                            fontSize: '0.85rem',
+                            height: '34px',
+                          },
+                          '@media (max-width: 480px)': {
+                            fontSize: '0.8rem',
+                            height: '32px',
+                          },
+                        },
+                        dropdown: {
+                          backgroundColor: 'var(--background)',
+                          border: '1px solid var(--background-dark)',
+                          borderRadius: theme.radius.md,
+                          marginTop: '2px',
+                          boxShadow: theme.shadows.xs,
+                          width: '100%',
+                          maxWidth: '100%',
+                          position: 'absolute',
+                          overflow: 'visible',
+                          '@media (max-width: 768px)': {
+                            width: 'auto',
+                            minWidth: '240px',
+                          },
+                        },
+                        item: {
+                          color: 'var(--foreground)',
+                          backgroundColor: 'var(--background)',
+                          borderRadius: theme.radius.md,
+                          margin: '2px',
+                          overflow: 'visible',
+                          '&[data-selected]': {
+                            color: 'var(--foreground)',
+                            backgroundColor: 'transparent',
+                            '&:hover': {
+                              color: 'var(--foreground)',
+                              backgroundColor: 'var(--foreground-faded)',
+                            },
+                          },
+                          '&[data-hovered]': {
+                            color: 'var(--foreground)',
+                            backgroundColor: 'var(--foreground-faded)',
+                          },
+                          cursor: 'pointer',
+                          whiteSpace: 'normal',
+                          lineHeight: 1.2,
+                          fontSize: '0.9rem',
+                          padding: '8px 12px',
+                          '@media (max-width: 768px)': {
+                            fontSize: '0.85rem',
+                            padding: '6px 10px',
+                          },
+                          '@media (max-width: 480px)': {
+                            fontSize: '0.8rem',
+                            padding: '6px 8px',
+                          },
+                        },
+                        rightSection: {
+                          pointerEvents: 'none',
+                          color: theme.colors.gray[5],
+                          width: '30px',
+                          '@media (max-width: 480px)': {
+                            width: '24px',
+                          },
+                        },
+                      })}
+                      rightSection={
+                        <IconChevronDown
+                          size={isSmallScreen ? 12 : 14}
+                          style={{ marginRight: '8px' }}
+                        />
+                      }
+                      icon={
+                        selectedModel ? (
+                          <Image
+                            aria-hidden="true"
+                            src={getModelLogo(
+                              modelOptions.find(
+                                (opt) => opt.value === selectedModel,
+                              )?.modelType || '',
+                            )}
+                            alt={`${
+                              modelOptions.find(
+                                (opt) => opt.value === selectedModel,
+                              )?.modelType || ''
+                            } logo`}
+                            width={20}
+                            height={20}
+                            style={{
+                              position: 'absolute',
+                              left: '8px',
+                              minWidth: '20px',
+                              borderRadius: '4px',
+                              overflow: 'hidden',
+                            }}
+                          />
+                        ) : null
+                      }
+                      dropdownPosition="bottom"
+                      withinPortal
+                    />
+                    <Tooltip
+                      label="The selected model will be used when Optimizing System Prompt"
+                      position="top"
+                      multiline
+                      withArrow
+                      arrowSize={10}
+                      offset={20}
+                      styles={(theme) => ({
+                        tooltip: {
+                          backgroundColor: theme.colors.dark[7],
+                          color: theme.white,
+                          fontSize: '0.875rem',
+                          padding: '0.5rem 0.75rem',
+                          maxWidth: '300px',
+                        },
+                        arrow: {
+                          backgroundColor: theme.colors.dark[7],
+                        },
+                      })}
+                    >
+                      <div>
+                        <IconInfoCircle
+                          size={18}
+                          className="text-[--foreground-faded] transition-colors duration-200 hover:text-[--foreground]"
+                          style={{ cursor: 'pointer' }}
+                        />
+                      </div>
+                    </Tooltip>
+                  </Flex>
+
+                  {!isEmbedded && (
+                    <>
+                      {isRightSideVisible ? (
+                        <Tooltip label="Close Prompt Builder" key="close">
+                          <div
+                            className="cursor-pointer p-0 pl-2"
+                            data-right-sidebar-icon
+                          >
+                            <IconLayoutSidebarRight
+                              tabIndex={0}
+                              aria-label="Close Prompt Builder"
+                              stroke={2}
+                              className="text-[--foreground-faded] transition-colors duration-200 hover:text-[--foreground]"
+                              onClick={() => setIsRightSideVisible(false)}
+                            />
+                          </div>
+                        </Tooltip>
+                      ) : (
+                        <Tooltip label="Open Prompt Builder" key="open">
+                          <div
+                            className="mr-2 cursor-pointer p-0"
+                            data-right-sidebar-icon
+                          >
+                            <IconLayoutSidebarRightExpand
+                              stroke={2}
+                              className="text-[--foreground-faded] transition-colors duration-200 hover:text-[--foreground]"
+                              onClick={() => setIsRightSideVisible(true)}
+                            />
+                          </div>
+                        </Tooltip>
+                      )}
+                    </>
+                  )}
+                </Flex>
+
+                <form className={``} onSubmit={handleSubmitPromptOptimization}>
+                  <Textarea
+                    autosize
+                    minRows={isEmbedded ? 4 : 3}
+                    maxRows={20}
+                    placeholder="Enter the system prompt..."
+                    className="px-1 pt-3 md:px-0"
+                    value={baseSystemPrompt}
+                    onChange={(e) => setBaseSystemPrompt(e.target.value)}
+                    style={{ width: '100%' }}
+                    styles={{
+                      input: {
+                        color: 'var(--foreground)',
+                        backgroundColor: 'var(--background)',
+                        '&:focus': { borderColor: 'var(--dashboard-button)' },
+                      },
+                    }}
+                  />
+
+                  <Group mt="md" spacing="sm">
+                    <Button
+                      variant="dashboard"
+                      type="button"
+                      onClick={() => handleSystemPromptSubmit(baseSystemPrompt)}
+                    >
+                      Update System Prompt
+                    </Button>
+
+                    <Button
+                      variant="dashboard"
+                      onClick={handleSubmitPromptOptimization}
+                      disabled={!llmProviders || isOptimizing}
+                    >
+                      {isOptimizing ? (
+                        <LoadingSpinner size="sm" />
+                      ) : (
+                        <IconSparkles size={16} stroke={1} />
+                      )}
+                      {isOptimizing
+                        ? 'Optimizing...'
+                        : 'Optimize System Prompt'}
+                    </Button>
+                  </Group>
+                </form>
+              </div>
+            </div>
+
+            {/* Optimization Modal */}
+            <Modal
+              opened={opened}
+              onClose={close}
+              size="xl"
+              title={
+                <Text className={``} size="lg" weight={700}>
+                  Optimized System Prompt
+                </Text>
+              }
+              className={`rounded-xl`}
+              centered
+              radius="lg"
+              styles={{
+                title: { marginBottom: '0' },
+                header: {
+                  backgroundColor: 'var(--modal)',
+                  borderBottom: '1px solid var(--modal-border)',
+                  padding: '20px 24px',
+                },
+                content: {
+                  color: 'var(--modal-text)',
+                  backgroundColor: 'var(--modal)',
+                  border: '1px solid #2D2F48',
+                },
+                body: {
+                  padding: '24px',
+                  marginTop: '2%',
+                  paddingTop: '4%',
+                  maxHeight: 'calc(85vh - 76px)',
+                  display: 'flex',
+                  flexDirection: 'column',
+                },
+                close: {
+                  color: 'var(--modal-text)',
+                  border: '0px',
+                  '&:hover': {
+                    color: 'var(--modal)',
+                    backgroundColor: 'var(--dashboard-button)',
+                  },
+                },
+              }}
+            >
+              <div
+                style={{
+                  flex: 1,
+                  minHeight: 0,
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: '24px',
+                }}
+              >
+                <Paper
+                  p="md"
+                  radius="md"
+                  style={{
+                    backgroundColor: 'var(--background-faded)',
+                    flex: 1,
+                    overflow: 'auto',
+                    minHeight: '200px',
+                    maxHeight: 'calc(85vh - 200px)',
+                    marginTop: '4px',
+                  }}
+                >
+                  {messages.map((message, i, { length }) => {
+                    if (length - 1 === i && message.role === 'assistant') {
+                      return (
+                        <div
+                          key={i}
+                          style={{
+                            padding: '16px',
+                            borderRadius: '8px',
+                            whiteSpace: 'pre-wrap',
+                            color: 'var(--modal-text)',
+                            lineHeight: '1.6',
+                            fontSize: '0.95rem',
+                          }}
+                          className={``}
+                        >
+                          {message.content}
+                        </div>
+                      )
+                    }
+                    return null
+                  })}
+                </Paper>
+
+                <Group position="right" spacing="sm">
+                  <Button variant="outline" onClick={close}>
+                    Cancel
+                  </Button>
+                  <Button
+                    variant="dashboard"
+                    onClick={() => {
+                      const lastMessage = messages[messages.length - 1]
+                      if (lastMessage && lastMessage.role === 'assistant') {
+                        const newSystemPrompt = lastMessage.content
+                        setBaseSystemPrompt(newSystemPrompt)
+                        handleSystemPromptSubmit(newSystemPrompt)
+                      }
+                      close()
+                    }}
+                  >
+                    Update System Prompt
+                  </Button>
+                </Group>
+              </div>
+            </Modal>
+
+            {/* Behavior Settings - shown inline when embedded */}
+            {isEmbedded && (
+              <div className="mt-6 rounded-xl bg-[--dashboard-background-faded] p-4 sm:p-6">
+                <Title order={4} className={`mb-4 text-[--foreground]`}>
+                  AI Behavior Settings
+                </Title>
+
+                <Flex direction="column" gap="md">
+                  <Switch
+                    size="lg"
+                    variant="labeled"
+                    showLabels
+                    showThumbIcon
+                    label="Smart Document Search"
+                    tooltip="Optimizes queries to better search through course materials."
+                    checked={vectorSearchRewrite}
+                    onCheckedChange={(value: boolean) => {
+                      handleSettingChange({
+                        vector_search_rewrite_disabled: !value,
+                      })
+                    }}
+                  />
+
+                  <Switch
+                    size="lg"
+                    variant="labeled"
+                    showLabels
+                    showThumbIcon
+                    label="Guided Learning"
+                    tooltip="AI provides hints instead of direct answers to encourage learning."
+                    checked={guidedLearning}
+                    onCheckedChange={(value: boolean) =>
+                      handleCheckboxChange({ guidedLearning: value })
+                    }
+                  />
+
+                  <Switch
+                    size="lg"
+                    variant="labeled"
+                    showLabels
+                    showThumbIcon
+                    label="Document-Based References Only"
+                    tooltip="Restricts AI to only use information from provided documents."
+                    checked={documentsOnly}
+                    onCheckedChange={(value: boolean) =>
+                      handleCheckboxChange({ documentsOnly: value })
+                    }
+                  />
+
+                  <Switch
+                    size="lg"
+                    variant="labeled"
+                    showLabels
+                    showThumbIcon
+                    label="Bypass Illinois Chat's internal prompting"
+                    tooltip="Full control over bot behavior without internal prompting."
+                    checked={systemPromptOnly}
+                    onCheckedChange={(value: boolean) =>
+                      handleCheckboxChange({ systemPromptOnly: value })
+                    }
+                  />
+
+                  {systemPromptOnly && (
+                    <div className="ml-[82px]">
+                      <CustomCopyButton
+                        label="Copy Illinois Chat's internal prompt"
+                        tooltip="Get our default internal prompting as a starting point."
+                        onClick={handleCopyDefaultPrompt}
+                      />
+                    </div>
+                  )}
+
+                  {/* Reset Modal for embedded mode */}
+                  <Modal
+                    opened={resetModalOpened}
+                    onClose={closeResetModal}
+                    title={
+                      <Text
+                        className={``}
+                        size="lg"
+                        weight={700}
+                        variant="gradient"
+                        gradient={{
+                          from: 'red',
+                          to: 'white',
+                          deg: 45,
+                        }}
+                      >
+                        Reset Prompting Settings
+                      </Text>
+                    }
+                    centered
+                    radius="md"
+                    size="md"
+                    styles={{
+                      header: {
+                        backgroundColor: '#15162c',
+                        borderBottom: '1px solid #2D2F48',
+                        padding: '20px 24px',
+                        marginBottom: '16px',
+                      },
+                      content: {
+                        backgroundColor: '#15162c',
+                        border: '1px solid #2D2F48',
+                      },
+                      body: {
+                        padding: '0 24px 24px 24px',
+                      },
+                      title: {
+                        marginBottom: '0',
+                      },
+                      close: {
+                        marginTop: '4px',
+                      },
+                    }}
+                  >
+                    <Flex
+                      direction="column"
+                      gap="xl"
+                      style={{ marginTop: '8px' }}
+                    >
+                      <Flex align="flex-start" gap="md">
+                        <IconAlertTriangle
+                          size={24}
+                          color={theme.colors.red[5]}
+                          style={{ marginTop: '2px' }}
+                        />
+                        <Text
+                          className={``}
+                          size="sm"
+                          weight={500}
+                          style={{
+                            color: 'white',
+                            lineHeight: 1.5,
+                          }}
+                        >
+                          Are you sure you want to reset your system prompt and
+                          all behavior settings to their default values?
+                        </Text>
+                      </Flex>
+
+                      <Divider
+                        style={{
+                          borderColor: 'rgba(255,255,255,0.1)',
+                        }}
+                      />
+
+                      <div>
+                        <Text
+                          size="sm"
+                          className={``}
+                          weight={600}
+                          style={{
+                            color: '#D1D1D1',
+                            marginBottom: '12px',
+                          }}
+                        >
+                          This action will:
+                        </Text>
+                        <List
+                          size="sm"
+                          spacing="sm"
+                          style={{ color: '#D1D1D1' }}
+                          icon={
+                            <div
+                              style={{
+                                width: '6px',
+                                height: '6px',
+                                borderRadius: '50%',
+                                backgroundColor: 'hsl(0,100%,70%)',
+                                marginTop: '8px',
+                              }}
+                            />
+                          }
+                        >
+                          <List.Item>
+                            Restore the system prompt to the default template
+                          </List.Item>
+                          <List.Item>
+                            Disable Guided Learning, Document-Only mode, and
+                            other custom settings
+                          </List.Item>
+                        </List>
+                      </div>
+
+                      <Text
+                        size="sm"
+                        style={{ color: '#D1D1D1' }}
+                        className={``}
+                      >
+                        This cannot be undone. Please confirm you wish to
+                        proceed.
+                      </Text>
+
+                      <Group position="right" mt="md">
+                        <Button variant="outline" onClick={closeResetModal}>
+                          Cancel
+                        </Button>
+                        <Button
+                          variant="danger"
+                          onClick={() => {
+                            resetSystemPrompt()
+                            closeResetModal()
+                          }}
+                        >
+                          Confirm
+                        </Button>
+                      </Group>
+                    </Flex>
+                  </Modal>
+
+                  {/* Action Buttons */}
+                  <Divider my="md" />
+                  <Flex direction="column" gap="md">
+                    <Button variant="danger" onClick={openResetModal}>
+                      <IconAlertTriangle size={16} />
+                      Reset Prompting Settings
+                    </Button>
+
+                    <Button variant="dashboard" onClick={openLinkGenerator}>
+                      <IconLink size={16} />
+                      Generate Share Link
+                    </Button>
+                  </Flex>
+
+                  {/* Link Generator Modal for embedded mode */}
+                  <LinkGeneratorModal
+                    opened={linkGeneratorOpened}
+                    onClose={closeLinkGenerator}
+                    course_name={project_name}
+                    currentSettings={{
+                      guidedLearning,
+                      documentsOnly,
+                      systemPromptOnly,
+                    }}
+                  />
+                </Flex>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Right Side - Settings Sidebar (not shown in embedded mode) */}
+        {!isEmbedded && isRightSideVisible && courseMetadata && (
+          <div
+            className="flex-[1_1_40%]"
+            style={{
+              padding: '1rem',
+              color: 'var(--dashboard-foreground)',
+              backgroundColor: 'var(--dashboard-sidebar-background)',
+              borderLeft: '1px solid var(--dashboard-border)',
+            }}
+          >
+            <Flex direction="column" m="1rem" gap="md">
+              <Flex align="flex-start">
+                <Title
+                  className={``}
+                  order={3}
+                  pl="md"
+                  pr="md"
+                  pb="xs"
+                  style={{ alignSelf: 'left', marginLeft: '-11px' }}
+                >
+                  Document Search Optimization
+                </Title>
+                <Indicator
+                  label={<Text className={``}>New</Text>}
+                  color="var(--dashboard-button)"
+                  size={13}
+                  styles={{
+                    indicator: {
+                      top: '-1.1rem !important',
+                      right: '.25rem !important',
+                    },
+                  }}
+                >
+                  <span className={``}></span>
+                </Indicator>
+              </Flex>
+
+              <Switch
+                variant="labeled"
+                showLabels
+                showThumbIcon
+                label="Smart Document Search"
+                tooltip="When enabled, Illinois Chat optimizes your queries to better search through course materials and find relevant content. Note: This only affects how documents are searched - your chat messages remain exactly as you write them."
+                checked={vectorSearchRewrite}
+                onCheckedChange={(value: boolean) => {
+                  handleSettingChange({
+                    vector_search_rewrite_disabled: !value,
+                  })
+                }}
+              />
+
+              <Divider />
+
+              <Flex align="center" style={{ paddingTop: '15px' }}>
+                <Title className={`label mr-[8px]`} order={3}>
+                  AI Behavior Settings
+                </Title>
+                <Indicator
+                  label={<Text className={``}>New</Text>}
+                  color="var(--dashboard-button)"
+                  size={13}
+                  styles={{
+                    indicator: {
+                      top: '-17px !important',
+                      right: '7px !important',
+                    },
+                  }}
+                >
+                  <span className={``}></span>
+                </Indicator>
+              </Flex>
+
+              <Flex direction="column" gap="md">
+                <div className="flex flex-col gap-1">
+                  <Switch
+                    variant="labeled"
+                    showLabels
+                    showThumbIcon
+                    label="Guided Learning"
+                    tooltip="When enabled course-wide, this setting applies to all students and cannot be disabled by them. The AI will encourage independent problem-solving by providing hints and questions instead of direct answers, while still finding and citing relevant course materials. This promotes critical thinking while ensuring students have access to proper resources."
+                    checked={guidedLearning}
+                    onCheckedChange={(value: boolean) =>
+                      handleCheckboxChange({ guidedLearning: value })
+                    }
+                  />
+
+                  <Switch
+                    variant="labeled"
+                    showLabels
+                    showThumbIcon
+                    label="Document-Based References Only"
+                    tooltip="Restricts the AI to use only information from the provided documents. Useful for maintaining accuracy in fields like legal research where external knowledge could be problematic."
+                    checked={documentsOnly}
+                    onCheckedChange={(value: boolean) =>
+                      handleCheckboxChange({ documentsOnly: value })
+                    }
+                  />
+
+                  <Switch
+                    variant="labeled"
+                    showLabels
+                    showThumbIcon
+                    label="Bypass Illinois Chat's internal prompting"
+                    tooltip="Internally, we prompt the model to (1) add citations and (2) always be as helpful as possible. You can bypass this for full un-modified control over your bot."
+                    checked={systemPromptOnly}
+                    onCheckedChange={(value: boolean) =>
+                      handleCheckboxChange({ systemPromptOnly: value })
+                    }
+                  />
+
+                  {systemPromptOnly && (
+                    <Flex
+                      mt="sm"
+                      direction="column"
+                      gap="xs"
+                      className="mt-[-4px] pl-[82px]"
+                    >
+                      <CustomCopyButton
+                        label="Copy Illinois Chat's internal prompt"
+                        tooltip="You can use and customize our default internal prompting to suit your needs. Note, only the specific citation formatting described will work with our citation 'find and replace' system. This provides a solid starting point for defining AI behavior in raw prompt mode."
+                        onClick={handleCopyDefaultPrompt}
+                      />
+                    </Flex>
+                  )}
+
+                  {/* Reset Modal */}
+                  <Modal
+                    opened={resetModalOpened}
+                    onClose={closeResetModal}
+                    title={
+                      <Text
+                        className={``}
+                        size="lg"
+                        weight={700}
+                        variant="gradient"
+                        gradient={{
+                          from: 'red',
+                          to: 'white',
+                          deg: 45,
+                        }}
+                      >
+                        Reset Prompting Settings
+                      </Text>
+                    }
+                    centered
+                    radius="md"
+                    size="md"
+                    styles={{
+                      header: {
+                        backgroundColor: '#15162c',
+                        borderBottom: '1px solid #2D2F48',
+                        padding: '20px 24px',
+                        marginBottom: '16px',
+                      },
+                      content: {
+                        backgroundColor: '#15162c',
+                        border: '1px solid #2D2F48',
+                      },
+                      body: {
+                        padding: '0 24px 24px 24px',
+                      },
+                      title: {
+                        marginBottom: '0',
+                      },
+                      close: {
+                        marginTop: '4px',
+                      },
+                    }}
+                  >
+                    <Flex
+                      direction="column"
+                      gap="xl"
+                      style={{ marginTop: '8px' }}
+                    >
+                      <Flex align="flex-start" gap="md">
+                        <IconAlertTriangle
+                          size={24}
+                          color={theme.colors.red[5]}
+                          style={{ marginTop: '2px' }}
+                        />
+                        <Text
+                          className={``}
+                          size="sm"
+                          weight={500}
+                          style={{
+                            color: 'white',
+                            lineHeight: 1.5,
+                          }}
+                        >
+                          Are you sure you want to reset your system prompt and
+                          all behavior settings to their default values?
+                        </Text>
+                      </Flex>
+
+                      <Divider
+                        style={{
+                          borderColor: 'rgba(255,255,255,0.1)',
+                        }}
+                      />
+
+                      <div>
+                        <Text
+                          size="sm"
+                          className={``}
+                          weight={600}
+                          style={{
+                            color: '#D1D1D1',
+                            marginBottom: '12px',
+                          }}
+                        >
+                          This action will:
+                        </Text>
+                        <List
+                          size="sm"
+                          spacing="sm"
+                          style={{ color: '#D1D1D1' }}
+                          icon={
+                            <div
+                              style={{
+                                width: '6px',
+                                height: '6px',
+                                borderRadius: '50%',
+                                backgroundColor: 'hsl(0,100%,70%)',
+                                marginTop: '8px',
+                              }}
+                            />
+                          }
+                        >
+                          <List.Item>
+                            Restore the system prompt to the default template
+                          </List.Item>
+                          <List.Item>
+                            Disable Guided Learning, Document-Only mode, and
+                            other custom settings
+                          </List.Item>
+                        </List>
+                      </div>
+
+                      <Text
+                        size="sm"
+                        style={{ color: '#D1D1D1' }}
+                        className={``}
+                      >
+                        This cannot be undone. Please confirm you wish to
+                        proceed.
+                      </Text>
+
+                      <Group position="right" mt="md">
+                        <Button variant="outline" onClick={closeResetModal}>
+                          Cancel
+                        </Button>
+                        <Button
+                          variant="danger"
+                          onClick={() => {
+                            resetSystemPrompt()
+                            closeResetModal()
+                          }}
+                        >
+                          Confirm
+                        </Button>
+                      </Group>
+                    </Flex>
+                  </Modal>
+
+                  {/* Reset and Share Link buttons */}
+                  <Flex
+                    direction="column"
+                    mt="md"
+                    justify="flex-start"
+                    gap="md"
+                  >
+                    <Button variant="danger" onClick={openResetModal}>
+                      <IconAlertTriangle size={16} />
+                      Reset Prompting Settings
+                    </Button>
+
+                    <Button variant="dashboard" onClick={openLinkGenerator}>
+                      <IconLink size={16} />
+                      Generate Share Link
+                    </Button>
+                  </Flex>
+                </div>
+
+                <LinkGeneratorModal
+                  opened={linkGeneratorOpened}
+                  onClose={closeLinkGenerator}
+                  course_name={project_name}
+                  currentSettings={{
+                    guidedLearning,
+                    documentsOnly,
+                    systemPromptOnly,
+                  }}
+                />
+              </Flex>
+            </Flex>
+          </div>
+        )}
+      </Flex>
+    </div>
+  )
+}
+
+export default PromptEditor
diff --git a/src/components/UIUC-Components/SetExampleQuestions.tsx b/src/components/UIUC-Components/SetExampleQuestions.tsx
index 9e46268f3..726045052 100644
--- a/src/components/UIUC-Components/SetExampleQuestions.tsx
+++ b/src/components/UIUC-Components/SetExampleQuestions.tsx
@@ -1,128 +1,390 @@
-import { TextInput, Button, Box } from '@mantine/core'
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef, useCallback } from 'react'
+import { Check, Trash2 } from 'lucide-react'
+
+import { FormInput } from '@/components/shadcn/ui/form-input'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/shadcn/ui/tooltip'
+import { Spinner } from '@/components/shadcn/ui/spinner'
+
+import { useQueryClient } from '@tanstack/react-query'
 import { type CourseMetadataOptionalForUpsert } from '~/types/courseMetadata'
 import { callSetCourseMetadata } from '~/utils/apiUtils'
 
+interface QuestionState {
+  value: string
+  status: 'idle' | 'saving' | 'saved' | 'error'
+  errorMessage?: string
+}
+
 export default function SetExampleQuestions({
   course_name,
   course_metadata,
+  onStepLeave,
 }: {
   course_name: string
   course_metadata: CourseMetadataOptionalForUpsert
+  onStepLeave?: (callback: () => Promise<void>) => void
 }) {
-  const example_questions = course_metadata?.example_questions || ['']
-  const [inputList, setInputList] = useState(
-    example_questions.length > 0 ? example_questions : [''],
+  const queryClient = useQueryClient()
+  const example_questions = course_metadata?.example_questions || []
+
+  const updateCache = useCallback(
+    (newQuestions: string[]) => {
+      queryClient.setQueryData(
+        ['courseMetadata', course_name],
+        (prev: CourseMetadataOptionalForUpsert | undefined) =>
+          prev ? { ...prev, example_questions: newQuestions } : prev,
+      )
+    },
+    [queryClient, course_name],
+  )
+  const [questions, setQuestions] = useState<QuestionState[]>(() => {
+    if (example_questions.length > 0) {
+      return [
+        ...example_questions.map((q) => ({
+          value: q,
+          status: 'saved' as const,
+        })),
+        // Always include an empty placeholder at the end
+        { value: '', status: 'idle' as const },
+      ]
+    }
+    return [{ value: '', status: 'idle' as const }]
+  })
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
+  const inputRefs = useRef<(HTMLInputElement | null)[]>([])
+
+  // Keep a ref to the latest questions so callbacks never read stale state
+  const questionsRef = useRef(questions)
+  questionsRef.current = questions
+
+  // Track original values to detect changes
+  const originalValuesRef = useRef<string[]>(
+    example_questions.length > 0 ? [...example_questions] : [],
+  )
+
+  // Register step leave callback
+  useEffect(() => {
+    const saveAllQuestions = async (): Promise<boolean> => {
+      const latestQuestions = questionsRef.current
+      const validQuestions = latestQuestions
+        .map((q) => q.value.trim())
+        .filter((q) => q !== '')
+
+      try {
+        const success = await callSetCourseMetadata(course_name, {
+          ...course_metadata,
+          example_questions: validQuestions,
+        })
+
+        if (success) {
+          originalValuesRef.current = validQuestions
+          updateCache(validQuestions)
+          setQuestions((prev) =>
+            prev.map((q) => ({
+              ...q,
+              status: q.value.trim() !== '' ? 'saved' : 'idle',
+              errorMessage: undefined,
+            })),
+          )
+          return true
+        } else {
+          throw new Error('Failed to save questions')
+        }
+      } catch (error) {
+        return false
+      }
+    }
+
+    const saveAllPendingQuestions = async () => {
+      const latestQuestions = questionsRef.current
+      const questionsToSave = latestQuestions.filter(
+        (q, i) =>
+          q.value.trim() !== '' &&
+          q.status !== 'saved' &&
+          q.value !== originalValuesRef.current[i],
+      )
+
+      if (questionsToSave.length > 0) {
+        await saveAllQuestions()
+      }
+    }
+
+    if (onStepLeave) {
+      onStepLeave(async () => {
+        await saveAllPendingQuestions()
+      })
+    }
+  }, [onStepLeave, course_name, course_metadata, updateCache])
+
+  const saveQuestion = useCallback(
+    async (index: number, currentValue?: string) => {
+      const latestQuestions = questionsRef.current
+      const question = latestQuestions[index]
+      if (!question) return
+
+      // Use the passed-in value (from the DOM) if provided, otherwise fall back to state
+      const trimmedValue = (currentValue ?? question.value).trim()
+
+      // Skip if empty or unchanged
+      if (
+        trimmedValue === '' ||
+        trimmedValue === originalValuesRef.current[index]
+      ) {
+        if (trimmedValue !== '' && question.status !== 'saved') {
+          setQuestions((prev) =>
+            prev.map((q, i) => (i === index ? { ...q, status: 'saved' } : q)),
+          )
+        }
+        return
+      }
+
+      // Set saving status
+      setQuestions((prev) =>
+        prev.map((q, i) =>
+          i === index ? { ...q, status: 'saving', errorMessage: undefined } : q,
+        ),
+      )
+
+      // Get all valid questions for the save, using the current value for this index
+      const allQuestions = latestQuestions
+        .map((q, i) => (i === index ? trimmedValue : q.value.trim()))
+        .filter((q) => q !== '')
+
+      try {
+        const success = await callSetCourseMetadata(course_name, {
+          ...course_metadata,
+          example_questions: allQuestions,
+        })
+
+        if (success) {
+          // Update original values ref
+          originalValuesRef.current = allQuestions
+          updateCache(allQuestions)
+          setQuestions((prev) =>
+            prev.map((q, i) =>
+              i === index
+                ? { ...q, status: 'saved', errorMessage: undefined }
+                : q,
+            ),
+          )
+        } else {
+          throw new Error('Failed to save question')
+        }
+      } catch (error) {
+        setQuestions((prev) =>
+          prev.map((q, i) =>
+            i === index
+              ? {
+                  ...q,
+                  status: 'error',
+                  errorMessage:
+                    error instanceof Error
+                      ? error.message
+                      : 'Failed to save question',
+                }
+              : q,
+          ),
+        )
+      }
+    },
+    [course_name, course_metadata, updateCache],
   )
-  const [isTyping, setIsTyping] = useState(false)
 
-  const handleInputChange = (
-    e: React.ChangeEvent<HTMLInputElement>,
+  const deleteQuestion = async (index: number) => {
+    const newQuestions = questionsRef.current.filter((_, i) => i !== index)
+    const validQuestions = newQuestions
+      .map((q) => q.value.trim())
+      .filter((q) => q !== '')
+
+    // Set the question being deleted to saving state
+    setQuestions((prev) =>
+      prev.map((q, i) => (i === index ? { ...q, status: 'saving' } : q)),
+    )
+
+    try {
+      const success = await callSetCourseMetadata(course_name, {
+        ...course_metadata,
+        example_questions: validQuestions,
+      })
+
+      if (success) {
+        originalValuesRef.current = validQuestions
+        updateCache(validQuestions)
+        // Keep at least one empty input field
+        setQuestions(
+          newQuestions.length > 0
+            ? newQuestions
+            : [{ value: '', status: 'idle' }],
+        )
+      } else {
+        throw new Error('Failed to delete question')
+      }
+    } catch (error) {
+      setQuestions((prev) =>
+        prev.map((q, i) =>
+          i === index
+            ? {
+                ...q,
+                status: 'error',
+                errorMessage:
+                  error instanceof Error
+                    ? error.message
+                    : 'Failed to delete question',
+              }
+            : q,
+        ),
+      )
+    }
+  }
+
+  const handleInputChange = (value: string, index: number) => {
+    setQuestions((prev) => {
+      const updated = prev.map((q, i) =>
+        i === index
+          ? { ...q, value, status: 'idle' as const, errorMessage: undefined }
+          : q,
+      )
+
+      // When user starts typing, ensure there's an empty input at the end
+      const hasEmptyAfter = updated
+        .slice(index + 1)
+        .some((q) => q.value.trim() === '')
+      if (value.trim() !== '' && !hasEmptyAfter) {
+        updated.push({ value: '', status: 'idle' as const })
+      }
+
+      return updated
+    })
+  }
+
+  const handleBlur = (
+    e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>,
     index: number,
   ) => {
-    const value = e.target.value
-    const list = [...inputList]
-    list[index] = value
-    setInputList(list)
-    if (index === inputList.length - 1 && value !== '') {
-      setIsTyping(true)
-    }
+    saveQuestion(index, e.target.value)
   }
 
-  const handleInputFocus = (index: number) => {
-    if (inputList.every((item) => item !== '')) {
-      setIsTyping(true)
+  const handleKeyDown = (
+    e: React.KeyboardEvent<HTMLInputElement>,
+    index: number,
+  ) => {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+
+      // Save current question, passing value directly from the DOM
+      saveQuestion(index, e.currentTarget.value)
+
+      // Focus the next input after React re-renders
+      setTimeout(() => {
+        inputRefs.current[index + 1]?.focus()
+      }, 0)
     }
   }
 
-  useEffect(() => {
-    if (isTyping) {
-      handleAddClick()
-      setIsTyping(false)
+  const renderRightSlot = (question: QuestionState, index: number) => {
+    // Show spinner when saving
+    if (question.status === 'saving') {
+      return <Spinner className="size-4 text-[--foreground-faded]" />
     }
-  }, [isTyping])
 
-  const handleAddClick = () => {
-    if (inputList[inputList.length - 1] !== '') {
-      setInputList([...inputList, ''])
+    // Show delete button on hover, otherwise show saved icon
+    if (hoveredIndex === index && question.value.trim() !== '') {
+      return (
+        <button
+          type="button"
+          onClick={(e) => {
+            e.preventDefault()
+            e.stopPropagation()
+            deleteQuestion(index)
+          }}
+          className="hover:bg-[--error]/10 flex size-5 items-center justify-center rounded-sm text-[--error] transition-colors"
+          aria-label="Delete question"
+        >
+          <Trash2 className="size-4" />
+        </button>
+      )
     }
-  }
 
-  const upsertCourseMetadata = async (example_questions: string[]) => {
-    if (!course_name || course_name.toString().trim() === '') {
-      alert('Course name is required')
-      return
+    // Show green check when saved
+    if (question.status === 'saved' && question.value.trim() !== '') {
+      return <Check className="size-4 text-[--illinois-prairie]" />
     }
 
-    const new_course_metadata = {
-      example_questions: example_questions,
-    } as CourseMetadataOptionalForUpsert
-
-    await callSetCourseMetadata(course_name, new_course_metadata)
-    // console.log("FINISHED SETTING THE EXAMPLE QUESTIONS")
+    return null
   }
 
   return (
-    <Box className="pl-1 pr-1">
-      <form
-        onSubmit={(event) => {
-          event.preventDefault()
-          upsertCourseMetadata(inputList.filter((item) => item !== ''))
-        }}
-      >
-        {inputList.map((value, i) => {
-          return (
-            <div className="flex items-center gap-2" key={i}>
-              <TextInput
-                // withAsterisk
-                aria-label={`Example question ${i + 1}`}
-                name="question"
+    <TooltipProvider>
+      <div className="flex flex-col gap-3">
+        {questions.map((question, index) => (
+          <div
+            key={index}
+            className="relative"
+            onMouseEnter={() => setHoveredIndex(index)}
+            onMouseLeave={() => setHoveredIndex(null)}
+          >
+            {question.status === 'error' && question.errorMessage ? (
+              <Tooltip open>
+                <TooltipTrigger asChild>
+                  <div>
+                    <FormInput
+                      as="input"
+                      name={`question-${index}`}
+                      placeholder="Add sample queries to illustrate usage of your AI."
+                      className="w-full"
+                      value={question.value}
+                      status="error"
+                      onChange={(e) => handleInputChange(e.target.value, index)}
+                      onBlur={(e) => handleBlur(e, index)}
+                      onKeyDown={(e) =>
+                        handleKeyDown(
+                          e as React.KeyboardEvent<HTMLInputElement>,
+                          index,
+                        )
+                      }
+                      ref={(el) => {
+                        inputRefs.current[index] = el as HTMLInputElement
+                      }}
+                      rightSlot={renderRightSlot(question, index)}
+                    />
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent
+                  side="top"
+                  className="border-[--error] bg-[--error] text-white"
+                >
+                  {question.errorMessage}
+                </TooltipContent>
+              </Tooltip>
+            ) : (
+              <FormInput
+                as="input"
+                name={`question-${index}`}
                 placeholder="Add sample queries to illustrate usage of your AI."
                 className="w-full"
-                styles={{
-                  input: {
-                    color: 'var(--foreground)',
-                    backgroundColor: 'var(--background)',
-                    borderColor: 'var(--dashboard-border)',
-                    padding: 'calc(var(--padding) * .75)',
-                    paddingRight: '6rem', //make room for button
-                    marginTop: '.25rem',
-
-                    '&:focus': {
-                      borderColor: 'var(--background-darker)',
-                    },
-                  },
+                value={question.value}
+                onChange={(e) => handleInputChange(e.target.value, index)}
+                onBlur={(e) => handleBlur(e, index)}
+                onKeyDown={(e) =>
+                  handleKeyDown(
+                    e as React.KeyboardEvent<HTMLInputElement>,
+                    index,
+                  )
+                }
+                ref={(el) => {
+                  inputRefs.current[index] = el as HTMLInputElement
                 }}
-                value={value}
-                onChange={(e) => handleInputChange(e, i)}
-                onFocus={() => handleInputFocus(i)}
-                // onBlur={() => handleInputBlur(i)} I couldn't get this working to remove boxes...
+                rightSlot={renderRightSlot(question, index)}
               />
-
-              <Button
-                type="submit"
-                size={'xs'}
-                disabled={value === ''}
-                className="bg-[--dashboard-button] text-[--dashboard-button-foreground] hover:bg-[--dashboard-button-hover] disabled:bg-[--background-faded] disabled:text-[--foreground-fadaed] disabled:opacity-50"
-                onClick={async () => {}}
-              >
-                Save
-              </Button>
-            </div>
-          )
-        })}
-        {/*
-        <Group position="right" mt="md">
-          <Button
-            tabIndex={0}
-            className="bg-[--dashboard-button] text-[--dashboard-button-foreground] hover:bg-[--dashboard-button-hover]"
-            type="submit"
-          >
-            Add
-          </Button>
-        </Group>
-*/}
-      </form>
-    </Box>
+            )}
+          </div>
+        ))}
+      </div>
+    </TooltipProvider>
   )
 }
diff --git a/src/components/UIUC-Components/UploadCard.tsx b/src/components/UIUC-Components/UploadCard.tsx
index 22ebaaa11..a52bc0c47 100644
--- a/src/components/UIUC-Components/UploadCard.tsx
+++ b/src/components/UIUC-Components/UploadCard.tsx
@@ -205,7 +205,7 @@ export const UploadCard = memo(function UploadCard({
             </div>
           </div>
 
-          <div className="px-4 pt-2 sm:px-6 sm:pt-2 md:px-8">
+          <div className="px-4 pt-8 sm:px-6 sm:pt-8 md:px-8">
             <LargeDropzone
               courseName={projectName}
               current_user_email={current_user_email as string}
diff --git a/src/components/UIUC-Components/UploadNotification.tsx b/src/components/UIUC-Components/UploadNotification.tsx
index 9a2e543de..e083a71b7 100644
--- a/src/components/UIUC-Components/UploadNotification.tsx
+++ b/src/components/UIUC-Components/UploadNotification.tsx
@@ -81,7 +81,7 @@ function UploadNotificationContent({
       return response.json()
     },
     staleTime: 10000,
-    enabled: !!projectName,
+    enabled: !!projectName && files.length > 0,
   })
   useEffect(() => {
     if (files && Array.isArray(files)) {
diff --git a/src/components/UIUC-Components/__tests__/SetExampleQuestions.test.tsx b/src/components/UIUC-Components/__tests__/SetExampleQuestions.test.tsx
index 0bed82e01..c1c175f31 100644
--- a/src/components/UIUC-Components/__tests__/SetExampleQuestions.test.tsx
+++ b/src/components/UIUC-Components/__tests__/SetExampleQuestions.test.tsx
@@ -7,95 +7,162 @@ import SetExampleQuestions from '../SetExampleQuestions'
 import { renderWithProviders } from '~/test-utils/renderWithProviders'
 
 vi.mock('~/utils/apiUtils', () => ({
-  callSetCourseMetadata: vi.fn(async () => undefined),
+  callSetCourseMetadata: vi.fn(async () => true),
 }))
 
 describe('SetExampleQuestions', () => {
-  it('adds a new empty input when typing into the last input', async () => {
+  it('renders prefilled questions from metadata with an empty placeholder', async () => {
     renderWithProviders(
       <SetExampleQuestions
         course_name="CS101"
-        course_metadata={{ example_questions: [''] } as any}
+        course_metadata={{ example_questions: ['Q1', 'Q2'] } as any}
       />,
     )
 
-    const inputs = screen.getAllByLabelText(/Example question/i)
-    expect(inputs).toHaveLength(1)
+    const inputs = screen.getAllByRole('textbox')
+    // 2 saved questions + 1 empty placeholder
+    expect(inputs).toHaveLength(3)
+    expect(inputs[0]).toHaveValue('Q1')
+    expect(inputs[1]).toHaveValue('Q2')
+    expect(inputs[2]).toHaveValue('')
+  })
+
+  it('submits filtered questions via callSetCourseMetadata on blur', async () => {
+    const user = userEvent.setup()
+    const { callSetCourseMetadata } = await import('~/utils/apiUtils')
+
+    renderWithProviders(
+      <SetExampleQuestions
+        course_name="CS101"
+        course_metadata={{ example_questions: [] } as any}
+      />,
+    )
+
+    const firstInput = screen.getAllByRole('textbox')[0]!
+    await user.type(firstInput, 'Q1')
+
+    // Blur triggers auto-save
+    fireEvent.blur(firstInput)
 
-    fireEvent.change(inputs[0]!, { target: { value: 'What is a monad?' } })
     await waitFor(() =>
-      expect(screen.getAllByLabelText(/Example question/i)).toHaveLength(2),
+      expect(vi.mocked(callSetCourseMetadata)).toHaveBeenCalledWith('CS101', {
+        example_questions: ['Q1'],
+      }),
     )
   })
 
-  it('adds an input on focus when all current questions are filled', async () => {
+  it('does not save empty questions on blur', async () => {
+    const { callSetCourseMetadata } = await import('~/utils/apiUtils')
+    vi.mocked(callSetCourseMetadata).mockClear()
+
     renderWithProviders(
       <SetExampleQuestions
         course_name="CS101"
-        course_metadata={{ example_questions: ['Q1', 'Q2'] } as any}
+        course_metadata={{ example_questions: [] } as any}
       />,
     )
 
-    const inputs = screen.getAllByLabelText(/Example question/i)
-    expect(inputs).toHaveLength(2)
+    const firstInput = screen.getAllByRole('textbox')[0]!
+    fireEvent.blur(firstInput)
 
-    fireEvent.focus(inputs[1]!)
-    await waitFor(() =>
-      expect(screen.getAllByLabelText(/Example question/i)).toHaveLength(3),
-    )
+    // Should not call API for empty input
+    expect(vi.mocked(callSetCourseMetadata)).not.toHaveBeenCalled()
   })
 
-  it('submits filtered questions via callSetCourseMetadata', async () => {
+  it('appends an empty input when user starts typing in the last input', async () => {
     const user = userEvent.setup()
-    const alertSpy = vi.spyOn(window, 'alert').mockImplementation(() => {})
-    const { callSetCourseMetadata } = await import('~/utils/apiUtils')
 
     renderWithProviders(
       <SetExampleQuestions
         course_name="CS101"
-        course_metadata={{ example_questions: [''] } as any}
+        course_metadata={{ example_questions: [] } as any}
       />,
     )
 
-    // Type a second question (the component appends an empty input when typing in the last).
-    const inputs = screen.getAllByLabelText(/Example question/i)
-    const firstInput = inputs[0]
-    if (!firstInput) throw new Error('Expected an example question input')
-    await user.type(firstInput, 'Q1')
-    await waitFor(() =>
-      expect(screen.getAllByLabelText(/Example question/i)).toHaveLength(2),
+    // Starts with one empty input
+    expect(screen.getAllByRole('textbox')).toHaveLength(1)
+
+    // Type into the first (and only) input
+    const firstInput = screen.getAllByRole('textbox')[0]!
+    await user.type(firstInput, 'H')
+
+    // A new empty input should have been appended
+    await waitFor(() => expect(screen.getAllByRole('textbox')).toHaveLength(2))
+
+    // The new input should be empty
+    const inputs = screen.getAllByRole('textbox')
+    expect(inputs[1]).toHaveValue('')
+  })
+
+  it('does not append a duplicate empty input if one already exists below', async () => {
+    const user = userEvent.setup()
+
+    renderWithProviders(
+      <SetExampleQuestions
+        course_name="CS101"
+        course_metadata={{ example_questions: [] } as any}
+      />,
     )
-    const secondInput = screen.getAllByLabelText(/Example question/i)[1]
-    if (!secondInput)
-      throw new Error('Expected a second example question input')
-    await user.type(secondInput, 'Q2')
 
-    const saveButton = screen.getAllByRole('button', { name: /Save/i })[0]
-    if (!saveButton) throw new Error('Expected a Save button')
-    fireEvent.click(saveButton)
+    const firstInput = screen.getAllByRole('textbox')[0]!
+    await user.type(firstInput, 'Hello')
 
-    await waitFor(() =>
-      expect(vi.mocked(callSetCourseMetadata)).toHaveBeenCalledWith('CS101', {
-        example_questions: ['Q1', 'Q2'],
-      }),
+    // Should have exactly 2 inputs (original + auto-appended)
+    await waitFor(() => expect(screen.getAllByRole('textbox')).toHaveLength(2))
+
+    // Continue typing — should still be 2, not 3
+    await user.type(firstInput, ' world')
+    expect(screen.getAllByRole('textbox')).toHaveLength(2)
+  })
+
+  it('focuses the next input when Enter is pressed', async () => {
+    const user = userEvent.setup()
+
+    renderWithProviders(
+      <SetExampleQuestions
+        course_name="CS101"
+        course_metadata={{ example_questions: [] } as any}
+      />,
     )
-    expect(alertSpy).not.toHaveBeenCalled()
+
+    const firstInput = screen.getAllByRole('textbox')[0]!
+    await user.type(firstInput, 'Question 1')
+
+    // A second input should have appeared
+    await waitFor(() => expect(screen.getAllByRole('textbox')).toHaveLength(2))
+
+    // Press Enter on the first input
+    await user.keyboard('{Enter}')
+
+    // The second input should now be focused
+    await waitFor(() => {
+      const inputs = screen.getAllByRole('textbox')
+      expect(inputs[1]).toHaveFocus()
+    })
   })
 
-  it('alerts and does not submit when course_name is empty', async () => {
-    const alertSpy = vi.spyOn(window, 'alert').mockImplementation(() => {})
-    const { callSetCourseMetadata } = await import('~/utils/apiUtils')
+  it('focuses the next input when Enter is pressed on a middle input', async () => {
+    const user = userEvent.setup()
 
     renderWithProviders(
       <SetExampleQuestions
-        course_name=""
-        course_metadata={{ example_questions: ['Q1'] } as any}
+        course_name="CS101"
+        course_metadata={{ example_questions: ['Q1', 'Q2', 'Q3'] } as any}
       />,
     )
 
-    fireEvent.click(screen.getByRole('button', { name: /Save/i }))
+    // 3 saved questions + 1 empty placeholder
+    expect(screen.getAllByRole('textbox')).toHaveLength(4)
 
-    expect(alertSpy).toHaveBeenCalledWith('Course name is required')
-    expect(vi.mocked(callSetCourseMetadata)).not.toHaveBeenCalled()
+    // Click into the second input and press Enter
+    const secondInput = screen.getAllByRole('textbox')[1]!
+    await user.click(secondInput)
+    await user.keyboard('{Enter}')
+
+    // The third input should now be focused
+    await waitFor(() => {
+      const inputs = screen.getAllByRole('textbox')
+      expect(inputs[2]).toHaveFocus()
+    })
   })
 })
diff --git a/src/components/UIUC-Components/api-inputs/LLMsApiKeyInputForm.tsx b/src/components/UIUC-Components/api-inputs/LLMsApiKeyInputForm.tsx
index 66bcb64f8..5371f2097 100644
--- a/src/components/UIUC-Components/api-inputs/LLMsApiKeyInputForm.tsx
+++ b/src/components/UIUC-Components/api-inputs/LLMsApiKeyInputForm.tsx
@@ -44,6 +44,7 @@ import {
   type WebLLMProvider,
 } from '~/utils/modelProviders/LLMProvider'
 import { useResponsiveCardWidth } from '~/utils/responsiveGrid'
+import { Skeleton } from '@/components/shadcn/ui/skeleton'
 import { GetCurrentPageName } from '../CanViewOnlyCourse'
 import GlobalFooter from '../GlobalFooter'
 import AnthropicProviderInput from './providers/AnthropicProviderInput'
@@ -94,7 +95,10 @@ export const APIKeyInput = ({
         id="API-key-input"
         label={placeholder}
         styles={{
-          label: { color: 'var(--dashboard-foreground-faded)' },
+          label: {
+            color: 'var(--dashboard-foreground-faded)',
+            marginBottom: '4px',
+          },
         }}
       >
         <div style={{ display: 'flex', alignItems: 'center' }}>
@@ -139,12 +143,12 @@ export const APIKeyInput = ({
         </div>
       </Input.Wrapper>
       <FieldInfo field={field} />
-      <div className="pt-1" />
       <div
         style={{
           display: 'flex',
           justifyContent: 'space-between',
           alignItems: 'center',
+          marginTop: '8px',
         }}
       >
         {error && (
@@ -217,7 +221,7 @@ const NewModelDropdown: React.FC<{
   return (
     <>
       <Select
-        className="menu z-[50] w-full"
+        className="menu z-[30] w-full"
         size="md"
         placeholder="Select a model"
         // searchable
@@ -611,26 +615,87 @@ export default function APIKeyInputForm({
           form.handleSubmit()
         }}
       >
-        <div
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 16,
-          }}
-        >
-          <Title
-            className={`${montserrat_heading.variable} mt-4 font-montserratHeading text-[--foreground]`}
-            order={4}
+        <div>
+          {/* Default Model Section */}
+          <div className="rounded-lg border border-[--dashboard-border] bg-[--dashboard-sidebar-background] p-4">
+            <h4 className="text-lg font-bold text-[--foreground]">
+              Default Model
+            </h4>
+            <p className="mb-3 text-sm text-[--foreground-faded]">
+              Choose the default model for your chatbot. Users can still
+              override this default.
+            </p>
+            <div className="flex justify-center">
+              {isLoadingLLMProviders ? (
+                <Skeleton className="h-10 w-full rounded-md bg-[--dashboard-background-faded]" />
+              ) : llmProviders ? (
+                <NewModelDropdown
+                  value={findDefaultModel(llmProviders) as AnySupportedModel}
+                  onChange={(newDefaultModel) => {
+                    const modelWithProvider = {
+                      ...newDefaultModel,
+                      provider:
+                        (newDefaultModel as any).provider ||
+                        findDefaultModel(llmProviders)?.provider,
+                    }
+                    setDefaultModelAndUpdateProviders(
+                      modelWithProvider as AnySupportedModel & {
+                        provider: ProviderNames
+                      },
+                    )
+                    return form.handleSubmit()
+                  }}
+                  llmProviders={llmProviders}
+                  isSmallScreen={isSmallScreen}
+                />
+              ) : null}
+            </div>
+          </div>
+
+          {/* Open source LLMs */}
+          <h4 className="mt-6 text-lg font-bold text-[--foreground]">
+            Open source LLMs
+          </h4>
+          <p className="mb-3 text-sm text-[--foreground-faded]">
+            Your weights, your rules.
+          </p>
+          <Flex
+            direction={{ base: 'column', '75rem': 'row' }}
+            wrap="wrap"
+            justify="flex-start"
+            align="flex-start"
+            className="gap-4"
+            w={'100%'}
           >
+            <NCSAHostedLLmsProviderInput
+              provider={llmProviders?.NCSAHosted as NCSAHostedProvider}
+              form={form}
+              isLoading={isLoadingLLMProviders}
+            />
+            <NCSAHostedVLMProviderInput
+              provider={llmProviders?.NCSAHostedVLM as NCSAHostedVLMProvider}
+              form={form}
+              isLoading={isLoadingLLMProviders}
+            />
+            <OllamaProviderInput
+              provider={llmProviders?.Ollama as OllamaProvider}
+              form={form}
+              isLoading={isLoadingLLMProviders}
+            />
+            <WebLLMProviderInput
+              provider={llmProviders?.WebLLM as WebLLMProvider}
+              form={form}
+              isLoading={isLoadingLLMProviders}
+            />
+          </Flex>
+
+          <h4 className="mt-6 text-lg font-bold text-[--foreground]">
             Closed source LLMs
-          </Title>
-          <Text
-            className={`${montserrat_paragraph.variable} font-montserratParagraph`}
-            size="sm"
-          >
+          </h4>
+          <p className="mb-3 text-sm text-[--foreground-faded]">
             The best performers, but you gotta pay their prices and follow their
             rules.
-          </Text>
+          </p>
           <Flex
             direction={{ base: 'column', '75rem': 'row' }}
             wrap="wrap"
@@ -670,87 +735,6 @@ export default function APIKeyInputForm({
               isLoading={isLoadingLLMProviders}
             />
           </Flex>
-          <Title
-            className={`-mb-3 ${montserrat_heading.variable} mt-4 font-montserratHeading text-[--foreground]`}
-            order={4}
-          >
-            Open source LLMs
-          </Title>
-          <Text
-            className={`${montserrat_paragraph.variable} font-montserratParagraph`}
-            size="sm"
-          >
-            Your weights, your rules.
-          </Text>
-          <Flex
-            direction={{ base: 'column', '75rem': 'row' }}
-            wrap="wrap"
-            justify="flex-start"
-            align="flex-start"
-            className="gap-4"
-            w={'100%'}
-          >
-            <NCSAHostedLLmsProviderInput
-              provider={llmProviders?.NCSAHosted as NCSAHostedProvider}
-              form={form}
-              isLoading={isLoadingLLMProviders}
-            />
-            <NCSAHostedVLMProviderInput
-              provider={llmProviders?.NCSAHostedVLM as NCSAHostedVLMProvider}
-              form={form}
-              isLoading={isLoadingLLMProviders}
-            />
-            <OllamaProviderInput
-              provider={llmProviders?.Ollama as OllamaProvider}
-              form={form}
-              isLoading={isLoadingLLMProviders}
-            />
-            <WebLLMProviderInput
-              provider={llmProviders?.WebLLM as WebLLMProvider}
-              form={form}
-              isLoading={isLoadingLLMProviders}
-            />
-          </Flex>
-
-          {/* Default Model Section */}
-          <div className="mt-6 rounded-lg border border-[--dashboard-border] bg-[--dashboard-sidebar-background] p-4">
-            <Title
-              className={`${montserrat_heading.variable} mb-2 font-montserratHeading text-[--foreground]`}
-              order={4}
-            >
-              Default Model
-            </Title>
-            <Text
-              className={`${montserrat_paragraph.variable} mb-4 font-montserratParagraph`}
-              size="sm"
-            >
-              Choose the default model for your chatbot. Users can still
-              override this default.
-            </Text>
-            <div className="flex justify-center">
-              {llmProviders && (
-                <NewModelDropdown
-                  value={findDefaultModel(llmProviders) as AnySupportedModel}
-                  onChange={(newDefaultModel) => {
-                    const modelWithProvider = {
-                      ...newDefaultModel,
-                      provider:
-                        (newDefaultModel as any).provider ||
-                        findDefaultModel(llmProviders)?.provider,
-                    }
-                    setDefaultModelAndUpdateProviders(
-                      modelWithProvider as AnySupportedModel & {
-                        provider: ProviderNames
-                      },
-                    )
-                    return form.handleSubmit()
-                  }}
-                  llmProviders={llmProviders}
-                  isSmallScreen={isSmallScreen}
-                />
-              )}
-            </div>
-          </div>
         </div>
       </form>
     </div>
@@ -857,7 +841,7 @@ export default function APIKeyInputForm({
                               prices and follow their rules.
                             </Text>
                             <Flex
-                              direction={{ base: 'column', '75rem': 'row' }}
+                              direction="row"
                               wrap="wrap"
                               justify="flex-start"
                               align="flex-start"
@@ -926,7 +910,7 @@ export default function APIKeyInputForm({
                               Your weights, your rules.
                             </Text>
                             <Flex
-                              direction={{ base: 'column', '75rem': 'row' }}
+                              direction="row"
                               wrap="wrap"
                               justify="flex-start"
                               align="flex-start"
@@ -1001,7 +985,9 @@ export default function APIKeyInputForm({
                         </Text>
                         <br />
                         <div className="flex justify-center">
-                          {llmProviders && (
+                          {isLoadingLLMProviders ? (
+                            <Skeleton className="h-10 w-full rounded-md bg-[--dashboard-background-faded]" />
+                          ) : llmProviders ? (
                             <NewModelDropdown
                               value={
                                 findDefaultModel(
@@ -1025,7 +1011,7 @@ export default function APIKeyInputForm({
                               llmProviders={llmProviders}
                               isSmallScreen={isSmallScreen}
                             />
-                          )}
+                          ) : null}
                         </div>
                         <div className="pt-6"></div>
                         {/* <div>
diff --git a/src/components/UIUC-Components/api-inputs/ModelToggles.tsx b/src/components/UIUC-Components/api-inputs/ModelToggles.tsx
index 0b152222d..f6c3292ff 100644
--- a/src/components/UIUC-Components/api-inputs/ModelToggles.tsx
+++ b/src/components/UIUC-Components/api-inputs/ModelToggles.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
-import { IconCheck, IconX } from '@tabler/icons-react'
-import { Switch, Stack } from '@mantine/core'
+import { Switch } from '@/components/shadcn/ui/switch'
 import { type LLMProvider } from '~/utils/modelProviders/LLMProvider'
 
 export function ModelToggles({
@@ -15,7 +14,7 @@ export function ModelToggles({
     : {}
 
   return (
-    <Stack mt="md">
+    <div className="mt-4 flex flex-col gap-2">
       {Object.entries(providerModels).map(
         ([modelId, modelData]: [string, any]) => (
           <form.Field
@@ -24,44 +23,22 @@ export function ModelToggles({
           >
             {(field: any) => (
               <Switch
+                variant="labeled"
+                showLabels
+                showThumbIcon
+                size="sm"
                 label={modelData.name}
                 checked={field.state.value}
-                onLabel="ON"
-                offLabel="OFF"
-                onChange={(event) => {
-                  field.handleChange(event.currentTarget.checked)
+                onCheckedChange={(checked) => {
+                  field.handleChange(checked)
                   // Trigger form submission
                   setTimeout(() => form.handleSubmit(), 0)
                 }}
-                thumbIcon={
-                  field.state.value ? (
-                    <IconCheck
-                      size="0.8rem"
-                      color="var(--dashboard-button)"
-                      stroke={3}
-                    />
-                  ) : (
-                    <IconX size="0.8rem" color="grey" stroke={3} />
-                  )
-                }
-                styles={{
-                  label: {
-                    color: 'var(--dashboard-foreground)',
-                  },
-                  track: {
-                    backgroundColor: field.state.value
-                      ? 'var(--dashboard-button) !important'
-                      : 'var(--dashboard-background-faded)',
-                    borderColor: field.state.value
-                      ? 'var(--dashboard-button) !important'
-                      : 'var(--dashboard-background-faded)',
-                  },
-                }}
               />
             )}
           </form.Field>
         ),
       )}
-    </Stack>
+    </div>
   )
 }
diff --git a/src/components/UIUC-Components/api-inputs/providers/AnthropicProviderInput.tsx b/src/components/UIUC-Components/api-inputs/providers/AnthropicProviderInput.tsx
index 68a58e1de..8dd5aac1e 100644
--- a/src/components/UIUC-Components/api-inputs/providers/AnthropicProviderInput.tsx
+++ b/src/components/UIUC-Components/api-inputs/providers/AnthropicProviderInput.tsx
@@ -1,13 +1,11 @@
 import React from 'react'
-import { Text, Switch, Card, Skeleton } from '@mantine/core'
-import { IconCheck, IconExternalLink, IconX } from '@tabler/icons-react'
 import { APIKeyInput } from '../LLMsApiKeyInputForm'
 import { ModelToggles } from '../ModelToggles'
 import {
   type AnthropicProvider,
   ProviderNames,
 } from '~/utils/modelProviders/LLMProvider'
-import { motion, AnimatePresence } from 'framer-motion'
+import ProviderCard from './ProviderCard'
 
 export default function AnthropicProviderInput({
   provider,
@@ -18,131 +16,21 @@ export default function AnthropicProviderInput({
   form: any
   isLoading: boolean
 }) {
-  if (isLoading) {
-    return <Skeleton height={200} width={330} radius={'lg'} />
-  }
   return (
-    <motion.div layout>
-      <Card
-        p="lg"
-        radius="lg"
-        className="max-w-[330px] bg-[--dashboard-background-faded] text-[--dashboard-foreground] md:w-[330px]"
-      >
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-          }}
-        >
-          <div>
-            <a
-              className="mb-3"
-              href="https://console.anthropic.com/settings/keys"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <div style={{ display: 'flex', alignItems: 'center' }}>
-                <Text
-                  size="lg"
-                  weight={500}
-                  mb="xs"
-                  style={{ paddingRight: '8px' }}
-                >
-                  Anthropic
-                </Text>
-                <IconExternalLink size={16} className="mb-3" />
-              </div>
-            </a>
-          </div>
-          <form.Field name={`providers.${ProviderNames.Anthropic}.enabled`}>
-            {(field: any) => (
-              <Switch
-                size="md"
-                labelPosition="left"
-                onLabel="ON"
-                offLabel="OFF"
-                aria-label="Enable Anthropic provider"
-                checked={field.state.value}
-                onChange={(event) => {
-                  event.preventDefault()
-                  field.handleChange(event.currentTarget.checked)
-                  form.handleSubmit()
-                }}
-                thumbIcon={
-                  field.state.value ? (
-                    <IconCheck
-                      size="0.8rem"
-                      color="var(--dashboard-button)"
-                      stroke={3}
-                    />
-                  ) : (
-                    <IconX size="0.8rem" color="grey" stroke={3} />
-                  )
-                }
-                styles={{
-                  track: {
-                    backgroundColor: field.state.value
-                      ? 'var(--dashboard-button) !important'
-                      : 'var(--dashboard-background-faded)',
-                    borderColor: field.state.value
-                      ? 'var(--dashboard-button) !important'
-                      : 'var(--dashboard-background-faded)',
-                  },
-                }}
-              />
-            )}
-          </form.Field>
-        </div>
-        {/* <Text size="sm" color="dimmed" mb="md">
-          Anthropic provides advanced AI models like Claude. Sign up on their
-          website to get an API key.
-        </Text> */}
-        {provider?.error &&
-          (form.state.values?.providers?.Anthropic?.enabled ||
-            provider.enabled) && (
-            <Text
-              size="sm"
-              color="red"
-              mb="md"
-              style={{
-                padding: '8px',
-                borderRadius: '4px',
-                backgroundColor: 'rgba(255, 0, 0, 0.1)',
-                border: '1px solid rgba(255, 0, 0, 0.2)',
-              }}
-            >
-              {provider.error}
-            </Text>
-          )}
-        <form.Field name={`providers.${ProviderNames.Anthropic}.enabled`}>
-          {(field: any) => (
-            <AnimatePresence>
-              {field.state.value && (
-                <motion.div
-                  initial={{ opacity: 0, height: 0 }}
-                  animate={{ opacity: 1, height: 'auto' }}
-                  exit={{ opacity: 0, height: 0 }}
-                  transition={{ duration: 0.3 }}
-                >
-                  <form.Field
-                    name={`providers.${ProviderNames.Anthropic}.apiKey`}
-                  >
-                    {(field: any) => (
-                      <APIKeyInput
-                        field={field}
-                        placeholder="Anthropic API Key"
-                        // onValidate={validateApiKey}
-                      />
-                    )}
-                  </form.Field>
-                  <ModelToggles form={form} provider={provider} />
-                </motion.div>
-              )}
-            </AnimatePresence>
-          )}
-        </form.Field>
-      </Card>
-    </motion.div>
+    <ProviderCard
+      providerName="Anthropic"
+      providerKey={ProviderNames.Anthropic}
+      provider={provider}
+      form={form}
+      isLoading={isLoading}
+      externalUrl="https://console.anthropic.com/settings/keys"
+    >
+      <form.Field name={`providers.${ProviderNames.Anthropic}.apiKey`}>
+        {(field: any) => (
+          <APIKeyInput field={field} placeholder="Anthropic API Key" />
+        )}
+      </form.Field>
+      <ModelToggles form={form} provider={provider} />
+    </ProviderCard>
   )
 }
diff --git a/src/components/UIUC-Components/api-inputs/providers/AzureProviderInput.tsx b/src/components/UIUC-Components/api-inputs/providers/AzureProviderInput.tsx
index c9d1a1040..180ff1a7b 100644
--- a/src/components/UIUC-Components/api-inputs/providers/AzureProviderInput.tsx
+++ b/src/components/UIUC-Components/api-inputs/providers/AzureProviderInput.tsx
@@ -1,13 +1,13 @@
 import React from 'react'
-import { Text, Switch, Card, TextInput, Skeleton } from '@mantine/core'
-import { IconCheck, IconExternalLink, IconX } from '@tabler/icons-react'
+import { Input } from '@/components/shadcn/ui/input'
+import { Label } from '@/components/shadcn/ui/label'
 import { APIKeyInput } from '../LLMsApiKeyInputForm'
 import { ModelToggles } from '../ModelToggles'
 import {
   type AzureProvider,
   ProviderNames,
 } from '~/utils/modelProviders/LLMProvider'
-import { motion, AnimatePresence } from 'framer-motion'
+import ProviderCard from './ProviderCard'
 
 export default function AzureProviderInput({
   provider,
@@ -18,160 +18,40 @@ export default function AzureProviderInput({
   form: any
   isLoading: boolean
 }) {
-  if (isLoading) {
-    return <Skeleton height={200} width={330} radius={'lg'} />
-  }
   return (
-    <motion.div layout>
-      <Card
-        p="lg"
-        radius="lg"
-        className="max-w-[330px] bg-[--dashboard-background-faded] text-[--dashboard-foreground] md:w-[330px]"
-      >
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-          }}
-        >
-          <div>
-            <a
-              className="mb-3"
-              href="https://azure.microsoft.com/en-us/products/cognitive-services/openai-service/"
-              target="_blank"
-              rel="noopener noreferrer"
+    <ProviderCard
+      providerName="Azure OpenAI"
+      providerKey={ProviderNames.Azure}
+      provider={provider}
+      form={form}
+      isLoading={isLoading}
+      externalUrl="https://azure.microsoft.com/en-us/products/cognitive-services/openai-service/"
+    >
+      <form.Field name={`providers.${ProviderNames.Azure}.apiKey`}>
+        {(field: any) => (
+          <APIKeyInput field={field} placeholder="Azure API Key" />
+        )}
+      </form.Field>
+      <form.Field name={`providers.${ProviderNames.Azure}.AzureEndpoint`}>
+        {(field: any) => (
+          <div className="mb-3">
+            <Label
+              htmlFor="azure-endpoint"
+              className="text-[--dashboard-foreground-faded]"
             >
-              <div style={{ display: 'flex', alignItems: 'center' }}>
-                <Text
-                  size="lg"
-                  weight={500}
-                  mb="xs"
-                  style={{ paddingRight: '8px' }}
-                >
-                  Azure OpenAI
-                </Text>
-                <IconExternalLink size={16} className="mb-3" />
-              </div>
-            </a>
+              Azure Endpoint
+            </Label>
+            <Input
+              id="azure-endpoint"
+              placeholder="https://your-resource-name.openai.azure.com/"
+              value={field.state.value}
+              onChange={(e) => field.handleChange(e.target.value)}
+              className="mt-1 bg-[--background] text-[--foreground]"
+            />
           </div>
-          <form.Field name={`providers.${ProviderNames.Azure}.enabled`}>
-            {(field: any) => (
-              <Switch
-                size="md"
-                labelPosition="left"
-                onLabel="ON"
-                offLabel="OFF"
-                aria-label="Enable Azure OpenAI provider"
-                checked={field.state.value}
-                onChange={(event) => {
-                  field.handleChange(event.currentTarget.checked)
-                  form.handleSubmit() // Trigger form submission
-                }}
-                thumbIcon={
-                  field.state.value ? (
-                    <IconCheck
-                      size="0.8rem"
-                      color="var(--dashboard-button)"
-                      stroke={3}
-                    />
-                  ) : (
-                    <IconX size="0.8rem" color="grey" stroke={3} />
-                  )
-                }
-                styles={{
-                  track: {
-                    backgroundColor: field.state.value
-                      ? 'var(--dashboard-button) !important'
-                      : 'var(--dashboard-background-faded)',
-                    borderColor: field.state.value
-                      ? 'var(--dashboard-button) !important'
-                      : 'var(--dashboard-background-faded)',
-                  },
-                }}
-              />
-            )}
-          </form.Field>
-        </div>
-        {/* <Text size="sm" color="dimmed" mb="md">
-          Azure OpenAI Service provides REST API access to OpenAI&apos;s
-          powerful language models with the security and enterprise promise of
-          Azure.
-        </Text> */}
-        {provider?.error &&
-          (form.state.values?.providers?.Azure?.enabled ||
-            provider.enabled) && (
-            <Text
-              size="sm"
-              color="red"
-              mb="md"
-              style={{
-                padding: '8px',
-                borderRadius: '4px',
-                backgroundColor: 'rgba(255, 0, 0, 0.1)',
-                border: '1px solid rgba(255, 0, 0, 0.2)',
-              }}
-            >
-              {provider.error}
-            </Text>
-          )}
-        <form.Field name={`providers.${ProviderNames.Azure}.enabled`}>
-          {(field: any) => (
-            <AnimatePresence>
-              {field.state.value && (
-                <motion.div
-                  initial={{ opacity: 0, height: 0 }}
-                  animate={{ opacity: 1, height: 'auto' }}
-                  exit={{ opacity: 0, height: 0 }}
-                  transition={{ duration: 0.3 }}
-                >
-                  <form.Field name={`providers.${ProviderNames.Azure}.apiKey`}>
-                    {(field: any) => (
-                      <APIKeyInput field={field} placeholder="Azure API Key" />
-                    )}
-                  </form.Field>
-                  <form.Field
-                    name={`providers.${ProviderNames.Azure}.AzureEndpoint`}
-                  >
-                    {(field: any) => (
-                      <TextInput
-                        label="Azure Endpoint"
-                        placeholder="https://your-resource-name.openai.azure.com/"
-                        styles={{
-                          label: { color: 'var(--dashboard-foreground-faded)' },
-                          input: {
-                            color: 'var(--foreground)',
-                            backgroundColor: 'var(--background)',
-                          },
-                        }}
-                        value={field.state.value}
-                        onChange={(event) =>
-                          field.handleChange(event.currentTarget.value)
-                        }
-                      />
-                    )}
-                  </form.Field>
-                  {/* <form.Field
-                    name={`providers.${ProviderNames.Azure}.AzureDeployment`}
-                  >
-                    {(field: any) => (
-                      <TextInput
-                        label="Azure Deployment"
-                        placeholder="your-deployment-name"
-                        value={field.state.value}
-                        onChange={(event) =>
-                          field.handleChange(event.currentTarget.value)
-                        }
-                      />
-                    )}
-                  </form.Field> */}
-                  <ModelToggles form={form} provider={provider} />
-                </motion.div>
-              )}
-            </AnimatePresence>
-          )}
-        </form.Field>
-      </Card>
-    </motion.div>
+        )}
+      </form.Field>
+      <ModelToggles form={form} provider={provider} />
+    </ProviderCard>
   )
 }
diff --git a/src/components/UIUC-Components/api-inputs/providers/BedrockProviderInput.tsx b/src/components/UIUC-Components/api-inputs/providers/BedrockProviderInput.tsx
index 8058485fb..ca2918ab8 100644
--- a/src/components/UIUC-Components/api-inputs/providers/BedrockProviderInput.tsx
+++ b/src/components/UIUC-Components/api-inputs/providers/BedrockProviderInput.tsx
@@ -1,98 +1,12 @@
 import React, { useState } from 'react'
-import {
-  Text,
-  Switch,
-  Card,
-  Skeleton,
-  Button,
-  TextInput,
-  Input,
-  ActionIcon,
-} from '@mantine/core'
-import { IconCheck, IconExternalLink, IconX } from '@tabler/icons-react'
-import { type FieldApi } from '@tanstack/react-form'
+import { Button } from '@/components/shadcn/ui/button'
 import { ModelToggles } from '../ModelToggles'
 import {
   type BedrockProvider,
   ProviderNames,
 } from '~/utils/modelProviders/LLMProvider'
-import { motion, AnimatePresence } from 'framer-motion'
-
-function FieldInfo({ field }: { field: FieldApi<any, any, any, any> }) {
-  return (
-    <>
-      {field.state.meta.isTouched && field.state.meta.errors.length ? (
-        <Text size="xs" color="red">
-          {field.state.meta.errors.join(', ')}
-        </Text>
-      ) : null}
-      {field.state.meta.isValidating ? (
-        <Text size="xs">Validating...</Text>
-      ) : null}
-    </>
-  )
-}
-
-const CredentialInput = ({
-  field,
-  placeholder,
-  onEnterPress,
-}: {
-  field: any
-  placeholder: string
-  onEnterPress: () => void
-}) => {
-  return (
-    <div style={{ position: 'relative', width: '100%', marginBottom: '1rem' }}>
-      <Input.Wrapper
-        id="credential-input"
-        label={placeholder}
-        styles={{
-          label: { color: 'var(--dashboard-foreground-faded)' },
-        }}
-      >
-        <div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
-          <TextInput
-            type="password"
-            placeholder={placeholder}
-            aria-label={placeholder}
-            value={field.state.value}
-            onChange={(e) => field.handleChange(e.target.value)}
-            styles={{
-              root: {
-                flex: 1,
-              },
-              label: { color: 'var(--dashboard-foreground-faded)' },
-              input: {
-                color: 'var(--foreground)',
-                backgroundColor: 'var(--background)',
-                padding: '8px',
-                borderRadius: '4px',
-                width: '100%',
-              },
-              wrapper: {
-                width: '100%',
-              },
-            }}
-          />
-          <ActionIcon
-            aria-label="Clear"
-            size="xs"
-            onClick={(e) => {
-              e.preventDefault()
-              field.handleChange('')
-            }}
-            className="text-[--foreground-faded] hover:bg-[--dashboard-button] hover:text-[--dashboard-button-foreground]"
-            style={{ marginLeft: '8px' }}
-          >
-            <IconX size={12} />
-          </ActionIcon>
-        </div>
-      </Input.Wrapper>
-      <FieldInfo field={field} />
-    </div>
-  )
-}
+import ProviderCard from './ProviderCard'
+import { CredentialInput } from './CredentialInput'
 
 export default function BedrockProviderInput({
   provider,
@@ -105,10 +19,6 @@ export default function BedrockProviderInput({
 }) {
   const [isSaving, setIsSaving] = useState(false)
 
-  if (isLoading) {
-    return <Skeleton height={200} width={330} radius={'lg'} />
-  }
-
   const handleSaveCredentials = async () => {
     setIsSaving(true)
     try {
@@ -119,167 +29,50 @@ export default function BedrockProviderInput({
   }
 
   return (
-    <motion.div layout>
-      <Card
-        p="lg"
-        radius="lg"
-        className="max-w-[330px] bg-[--dashboard-background-faded] text-[--dashboard-foreground] md:w-[330px]"
-      >
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-          }}
-        >
-          <div>
-            <a
-              className="mb-3"
-              href="https://aws.amazon.com/bedrock/"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <div style={{ display: 'flex', alignItems: 'center' }}>
-                <Text
-                  size="lg"
-                  weight={500}
-                  mb="xs"
-                  style={{ paddingRight: '8px' }}
-                >
-                  Amazon Bedrock
-                </Text>
-                <IconExternalLink size={16} className="mb-3" />
-              </div>
-            </a>
-          </div>
-          <form.Field name={`providers.${ProviderNames.Bedrock}.enabled`}>
-            {(field: any) => (
-              <Switch
-                size="md"
-                labelPosition="left"
-                onLabel="ON"
-                offLabel="OFF"
-                aria-label="Enable Bedrock provider"
-                checked={field.state.value}
-                onChange={(event) => {
-                  event.preventDefault()
-                  field.handleChange(event.currentTarget.checked)
-                  form.handleSubmit()
-                }}
-                thumbIcon={
-                  field.state.value ? (
-                    <IconCheck
-                      size="0.8rem"
-                      color="var(--dashboard-button)"
-                      stroke={3}
-                    />
-                  ) : (
-                    <IconX size="0.8rem" color="grey" stroke={3} />
-                  )
-                }
-                styles={{
-                  track: {
-                    backgroundColor: field.state.value
-                      ? 'var(--dashboard-button) !important'
-                      : 'var(--dashboard-background-faded)',
-                    borderColor: field.state.value
-                      ? 'var(--dashboard-button) !important'
-                      : 'var(--dashboard-background-faded)',
-                  },
-                }}
-              />
-            )}
-          </form.Field>
-        </div>
+    <ProviderCard
+      providerName="Amazon Bedrock"
+      providerKey={ProviderNames.Bedrock}
+      provider={provider}
+      form={form}
+      isLoading={isLoading}
+      externalUrl="https://aws.amazon.com/bedrock/"
+    >
+      <form.Field name={`providers.${ProviderNames.Bedrock}.accessKeyId`}>
+        {(field: any) => (
+          <CredentialInput field={field} placeholder="AWS Access Key ID" />
+        )}
+      </form.Field>
 
-        {provider?.error &&
-          (form.state.values?.providers?.Bedrock?.enabled ||
-            provider.enabled) && (
-            <Text
-              size="sm"
-              color="red"
-              mb="md"
-              style={{
-                padding: '8px',
-                borderRadius: '4px',
-                backgroundColor: 'rgba(255, 0, 0, 0.1)',
-                border: '1px solid rgba(255, 0, 0, 0.2)',
-              }}
-            >
-              {provider.error}
-            </Text>
-          )}
+      <form.Field name={`providers.${ProviderNames.Bedrock}.secretAccessKey`}>
+        {(field: any) => (
+          <CredentialInput field={field} placeholder="AWS Secret Access Key" />
+        )}
+      </form.Field>
 
-        <form.Field name={`providers.${ProviderNames.Bedrock}.enabled`}>
-          {(field: any) => (
-            <AnimatePresence>
-              {field.state.value && (
-                <motion.div
-                  initial={{ opacity: 0, height: 0 }}
-                  animate={{ opacity: 1, height: 'auto' }}
-                  exit={{ opacity: 0, height: 0 }}
-                  transition={{ duration: 0.3 }}
-                >
-                  <form.Field
-                    name={`providers.${ProviderNames.Bedrock}.accessKeyId`}
-                  >
-                    {(field: any) => (
-                      <CredentialInput
-                        field={field}
-                        placeholder="AWS Access Key ID"
-                        onEnterPress={handleSaveCredentials}
-                      />
-                    )}
-                  </form.Field>
+      <form.Field name={`providers.${ProviderNames.Bedrock}.region`}>
+        {(field: any) => (
+          <CredentialInput field={field} placeholder="AWS Region" />
+        )}
+      </form.Field>
 
-                  <form.Field
-                    name={`providers.${ProviderNames.Bedrock}.secretAccessKey`}
-                  >
-                    {(field: any) => (
-                      <CredentialInput
-                        field={field}
-                        placeholder="AWS Secret Access Key"
-                        onEnterPress={handleSaveCredentials}
-                      />
-                    )}
-                  </form.Field>
-
-                  <form.Field
-                    name={`providers.${ProviderNames.Bedrock}.region`}
-                  >
-                    {(field: any) => (
-                      <CredentialInput
-                        field={field}
-                        placeholder="AWS Region"
-                        onEnterPress={handleSaveCredentials}
-                      />
-                    )}
-                  </form.Field>
-
-                  <div className="mt-4 flex justify-start">
-                    <Button
-                      compact
-                      className="bg-[--dashboard-button] text-[--dashboard-button-foreground] hover:bg-[--dashboard-button-hover]"
-                      onClick={handleSaveCredentials}
-                      loading={isSaving}
-                    >
-                      Save
-                    </Button>
-                  </div>
+      <div className="mt-4 flex justify-start">
+        <Button
+          className="bg-[--dashboard-button] text-[--dashboard-button-foreground] hover:bg-[--dashboard-button-hover]"
+          size="sm"
+          onClick={handleSaveCredentials}
+          disabled={isSaving}
+        >
+          {isSaving ? 'Saving...' : 'Save'}
+        </Button>
+      </div>
 
-                  {form.state.values?.providers?.Bedrock?.accessKeyId &&
-                    form.state.values?.providers?.Bedrock?.secretAccessKey &&
-                    form.state.values?.providers?.Bedrock?.region && (
-                      <div className="mt-4">
-                        <ModelToggles form={form} provider={provider} />
-                      </div>
-                    )}
-                </motion.div>
-              )}
-            </AnimatePresence>
-          )}
-        </form.Field>
-      </Card>
-    </motion.div>
+      {form.state.values?.providers?.Bedrock?.accessKeyId &&
+        form.state.values?.providers?.Bedrock?.secretAccessKey &&
+        form.state.values?.providers?.Bedrock?.region && (
+          <div className="mt-4">
+            <ModelToggles form={form} provider={provider} />
+          </div>
+        )}
+    </ProviderCard>
   )
 }
diff --git a/src/components/UIUC-Components/api-inputs/providers/CredentialInput.tsx b/src/components/UIUC-Components/api-inputs/providers/CredentialInput.tsx
new file mode 100644
index 000000000..6b1006a23
--- /dev/null
+++ b/src/components/UIUC-Components/api-inputs/providers/CredentialInput.tsx
@@ -0,0 +1,60 @@
+import React from 'react'
+import { Input } from '@/components/shadcn/ui/input'
+import { Label } from '@/components/shadcn/ui/label'
+import { Button } from '@/components/shadcn/ui/button'
+import { IconX } from '@tabler/icons-react'
+import { type FieldApi } from '@tanstack/react-form'
+
+export function CredentialInput({
+  field,
+  placeholder,
+}: {
+  field: any
+  placeholder: string
+}) {
+  return (
+    <div className="mb-4 w-full">
+      <Label className="text-[--dashboard-foreground-faded]">
+        {placeholder}
+      </Label>
+      <div className="mt-1 flex items-center gap-2">
+        <Input
+          type="password"
+          placeholder={placeholder}
+          aria-label={placeholder}
+          value={field.state.value}
+          onChange={(e) => field.handleChange(e.target.value)}
+          className="flex-1 bg-[--background] text-[--foreground]"
+        />
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8 text-[--foreground-faded] hover:bg-[--dashboard-button] hover:text-[--dashboard-button-foreground]"
+          onClick={(e) => {
+            e.preventDefault()
+            field.handleChange('')
+          }}
+          aria-label="Clear"
+        >
+          <IconX size={12} />
+        </Button>
+      </div>
+      <FieldInfo field={field} />
+    </div>
+  )
+}
+
+function FieldInfo({ field }: { field: FieldApi<any, any, any, any> }) {
+  return (
+    <>
+      {field.state.meta.isTouched && field.state.meta.errors.length ? (
+        <p className="mt-1 text-xs text-red-500">
+          {field.state.meta.errors.join(', ')}
+        </p>
+      ) : null}
+      {field.state.meta.isValidating ? (
+        <p className="mt-1 text-xs">Validating...</p>
+      ) : null}
+    </>
+  )
+}
diff --git a/src/components/UIUC-Components/api-inputs/providers/GeminiProviderInput.tsx b/src/components/UIUC-Components/api-inputs/providers/GeminiProviderInput.tsx
index acd503948..aed945dc4 100644
--- a/src/components/UIUC-Components/api-inputs/providers/GeminiProviderInput.tsx
+++ b/src/components/UIUC-Components/api-inputs/providers/GeminiProviderInput.tsx
@@ -1,13 +1,11 @@
 import React from 'react'
-import { Text, Switch, Card, Skeleton } from '@mantine/core'
-import { IconCheck, IconExternalLink, IconX } from '@tabler/icons-react'
 import { APIKeyInput } from '../LLMsApiKeyInputForm'
 import { ModelToggles } from '../ModelToggles'
 import {
   type GeminiProvider,
   ProviderNames,
 } from '~/utils/modelProviders/LLMProvider'
-import { motion, AnimatePresence } from 'framer-motion'
+import ProviderCard from './ProviderCard'
 
 export default function GeminiProviderInput({
   provider,
@@ -18,125 +16,21 @@ export default function GeminiProviderInput({
   form: any
   isLoading: boolean
 }) {
-  if (isLoading) {
-    return <Skeleton height={200} width={330} radius={'lg'} />
-  }
-
   return (
-    <motion.div layout>
-      <Card
-        p="lg"
-        radius="lg"
-        className="max-w-[330px] bg-[--dashboard-background-faded] text-[--dashboard-foreground] md:w-[330px]"
-      >
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-          }}
-        >
-          <div>
-            <a
-              className="mb-3"
-              href="https://ai.google.dev/"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <div style={{ display: 'flex', alignItems: 'center' }}>
-                <Text
-                  size="lg"
-                  weight={500}
-                  mb="xs"
-                  style={{ paddingRight: '8px' }}
-                >
-                  Google Gemini
-                </Text>
-                <IconExternalLink size={16} className="mb-3" />
-              </div>
-            </a>
-          </div>
-          <form.Field name={`providers.${ProviderNames.Gemini}.enabled`}>
-            {(field: any) => (
-              <Switch
-                size="md"
-                labelPosition="left"
-                onLabel="ON"
-                offLabel="OFF"
-                aria-label="Enable Gemini provider"
-                checked={field.state.value}
-                onChange={(event) => {
-                  event.preventDefault()
-                  field.handleChange(event.currentTarget.checked)
-                  form.handleSubmit()
-                }}
-                thumbIcon={
-                  field.state.value ? (
-                    <IconCheck
-                      size="0.8rem"
-                      color="var(--dashboard-button)"
-                      stroke={3}
-                    />
-                  ) : (
-                    <IconX size="0.8rem" color="grey" stroke={3} />
-                  )
-                }
-                styles={{
-                  track: {
-                    backgroundColor: field.state.value
-                      ? 'var(--dashboard-button) !important'
-                      : 'var(--dashboard-background-faded)',
-                    borderColor: field.state.value
-                      ? 'var(--dashboard-button) !important'
-                      : 'var(--dashboard-background-faded)',
-                  },
-                }}
-              />
-            )}
-          </form.Field>
-        </div>
-
-        {provider?.error &&
-          (form.state.values?.providers?.Gemini?.enabled ||
-            provider.enabled) && (
-            <Text
-              size="sm"
-              color="red"
-              mb="md"
-              style={{
-                padding: '8px',
-                borderRadius: '4px',
-                backgroundColor: 'rgba(255, 0, 0, 0.1)',
-                border: '1px solid rgba(255, 0, 0, 0.2)',
-              }}
-            >
-              {provider.error}
-            </Text>
-          )}
-
-        <form.Field name={`providers.${ProviderNames.Gemini}.enabled`}>
-          {(field: any) => (
-            <AnimatePresence>
-              {field.state.value && (
-                <motion.div
-                  initial={{ opacity: 0, height: 0 }}
-                  animate={{ opacity: 1, height: 'auto' }}
-                  exit={{ opacity: 0, height: 0 }}
-                  transition={{ duration: 0.3 }}
-                >
-                  <form.Field name={`providers.${ProviderNames.Gemini}.apiKey`}>
-                    {(field: any) => (
-                      <APIKeyInput field={field} placeholder="Google API Key" />
-                    )}
-                  </form.Field>
-
-                  <ModelToggles form={form} provider={provider} />
-                </motion.div>
-              )}
-            </AnimatePresence>
-          )}
-        </form.Field>
-      </Card>
-    </motion.div>
+    <ProviderCard
+      providerName="Google Gemini"
+      providerKey={ProviderNames.Gemini}
+      provider={provider}
+      form={form}
+      isLoading={isLoading}
+      externalUrl="https://ai.google.dev/"
+    >
+      <form.Field name={`providers.${ProviderNames.Gemini}.apiKey`}>
+        {(field: any) => (
+          <APIKeyInput field={field} placeholder="Google API Key" />
+        )}
+      </form.Field>
+      <ModelToggles form={form} provider={provider} />
+    </ProviderCard>
   )
 }
diff --git a/src/components/UIUC-Components/api-inputs/providers/NCSAHostedProviderInput.tsx b/src/components/UIUC-Components/api-inputs/providers/NCSAHostedProviderInput.tsx
index de0172cc1..d36e78644 100644
--- a/src/components/UIUC-Components/api-inputs/providers/NCSAHostedProviderInput.tsx
+++ b/src/components/UIUC-Components/api-inputs/providers/NCSAHostedProviderInput.tsx
@@ -1,12 +1,10 @@
 import React from 'react'
-import { Text, Switch, Card, Skeleton } from '@mantine/core'
-import { IconCheck, IconExternalLink, IconX } from '@tabler/icons-react'
 import { ModelToggles } from '../ModelToggles'
 import {
   type NCSAHostedProvider,
   ProviderNames,
 } from '~/utils/modelProviders/LLMProvider'
-import { motion, AnimatePresence } from 'framer-motion'
+import ProviderCard from './ProviderCard'
 
 export default function NCSAHostedLLmsProviderInput({
   provider,
@@ -17,127 +15,22 @@ export default function NCSAHostedLLmsProviderInput({
   form: any
   isLoading: boolean
 }) {
-  if (isLoading) {
-    return <Skeleton height={200} width={330} radius={'lg'} />
-  }
   return (
-    <motion.div layout>
-      <Card
-        p="lg"
-        radius="lg"
-        className="max-w-[330px] bg-[--dashboard-background-faded] text-[--dashboard-foreground] md:w-[330px]"
-      >
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-          }}
-        >
-          <div>
-            <a
-              className="mb-3"
-              href="https://ai.ncsa.illinois.edu/"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <div style={{ display: 'flex', alignItems: 'center' }}>
-                <Text
-                  size="lg"
-                  weight={500}
-                  mb="xs"
-                  style={{ paddingRight: '8px' }}
-                >
-                  NCSA Hosted LLMs
-                </Text>
-                <IconExternalLink size={16} className="mb-3" />
-              </div>
-            </a>
-          </div>
-          <form.Field name={`providers.${ProviderNames.NCSAHosted}.enabled`}>
-            {(field: any) => (
-              <Switch
-                size="md"
-                labelPosition="left"
-                onLabel="ON"
-                offLabel="OFF"
-                aria-label="Enable NCSA Hosted LLMs provider"
-                checked={field.state.value}
-                onChange={(event) => {
-                  field.handleChange(event.currentTarget.checked)
-                  // Trigger form submission
-                  setTimeout(() => form.handleSubmit(), 0)
-                }}
-                thumbIcon={
-                  field.state.value ? (
-                    <IconCheck
-                      size="0.8rem"
-                      color="var(--dashboard-button)"
-                      stroke={3}
-                    />
-                  ) : (
-                    <IconX size="0.8rem" color="grey" stroke={3} />
-                  )
-                }
-                styles={{
-                  track: {
-                    backgroundColor: field.state.value
-                      ? 'var(--dashboard-button) !important'
-                      : 'var(--dashboard-background-faded)',
-                    borderColor: field.state.value
-                      ? 'var(--dashboard-button) !important'
-                      : 'var(--dashboard-background-faded)',
-                  },
-                }}
-              />
-            )}
-          </form.Field>
-        </div>
-        <Text size="sm" color="dimmed" mb="md">
+    <ProviderCard
+      providerName="NCSA Hosted LLMs"
+      providerKey={ProviderNames.NCSAHosted}
+      provider={provider}
+      form={form}
+      isLoading={isLoading}
+      externalUrl="https://ai.ncsa.illinois.edu/"
+      description={
+        <>
           These models are hosted by the Center for AI Innovation at the
           National Center for Supercomputing Applications. They&apos;re free.
-        </Text>
-        {provider?.error &&
-          (form.state.values?.providers?.NCSAHosted?.enabled ||
-            provider.enabled) && (
-            <motion.div
-              initial={{ opacity: 0, y: -10 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: -10 }}
-              transition={{ duration: 0.3 }}
-            >
-              <Text
-                size="sm"
-                color="red"
-                mb="md"
-                style={{
-                  padding: '8px',
-                  borderRadius: '4px',
-                  backgroundColor: 'rgba(255, 0, 0, 0.1)',
-                  border: '1px solid rgba(255, 0, 0, 0.2)',
-                }}
-              >
-                {provider.error}
-              </Text>
-            </motion.div>
-          )}
-        <form.Field name={`providers.${ProviderNames.NCSAHosted}.enabled`}>
-          {(field: any) => (
-            <AnimatePresence>
-              {field.state.value && (
-                <motion.div
-                  initial={{ opacity: 0, height: 0 }}
-                  animate={{ opacity: 1, height: 'auto' }}
-                  exit={{ opacity: 0, height: 0 }}
-                  transition={{ duration: 0.3 }}
-                >
-                  <ModelToggles form={form} provider={provider} />
-                </motion.div>
-              )}
-            </AnimatePresence>
-          )}
-        </form.Field>
-      </Card>
-    </motion.div>
+        </>
+      }
+    >
+      <ModelToggles form={form} provider={provider} />
+    </ProviderCard>
   )
 }
diff --git a/src/components/UIUC-Components/api-inputs/providers/NCSAHostedVLMProviderInput.tsx b/src/components/UIUC-Components/api-inputs/providers/NCSAHostedVLMProviderInput.tsx
index 33a06dbef..2e6f208cd 100644
--- a/src/components/UIUC-Components/api-inputs/providers/NCSAHostedVLMProviderInput.tsx
+++ b/src/components/UIUC-Components/api-inputs/providers/NCSAHostedVLMProviderInput.tsx
@@ -1,12 +1,10 @@
 import React from 'react'
-import { Text, Switch, Card, Skeleton } from '@mantine/core'
-import { IconCheck, IconExternalLink, IconX } from '@tabler/icons-react'
 import { ModelToggles } from '../ModelToggles'
 import {
   type NCSAHostedVLMProvider,
   ProviderNames,
 } from '~/utils/modelProviders/LLMProvider'
-import { motion, AnimatePresence } from 'framer-motion'
+import ProviderCard from './ProviderCard'
 
 export default function NCSAHostedVLMProviderInput({
   provider,
@@ -17,127 +15,17 @@ export default function NCSAHostedVLMProviderInput({
   form: any
   isLoading: boolean
 }) {
-  if (isLoading) {
-    return <Skeleton height={200} width={330} radius={'lg'} />
-  }
   return (
-    <motion.div layout>
-      <Card
-        p="lg"
-        radius="lg"
-        className="max-w-[330px] bg-[--dashboard-background-faded] text-[--dashboard-foreground] md:w-[330px]"
-      >
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-          }}
-        >
-          <div>
-            <a
-              className="mb-3"
-              href="https://ai.ncsa.illinois.edu/"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <div style={{ display: 'flex', alignItems: 'center' }}>
-                <Text
-                  size="lg"
-                  weight={500}
-                  mb="xs"
-                  style={{ paddingRight: '8px' }}
-                >
-                  NCSA Hosted VLMs
-                </Text>
-                <IconExternalLink size={16} className="mb-3" />
-              </div>
-            </a>
-          </div>
-          <form.Field name={`providers.${ProviderNames.NCSAHostedVLM}.enabled`}>
-            {(field: any) => (
-              <Switch
-                size="md"
-                labelPosition="left"
-                onLabel="ON"
-                offLabel="OFF"
-                aria-label="Enable NCSA Hosted VLMs provider"
-                checked={field.state.value}
-                onChange={(event) => {
-                  field.handleChange(event.currentTarget.checked)
-                  // Trigger form submission
-                  setTimeout(() => form.handleSubmit(), 0)
-                }}
-                thumbIcon={
-                  field.state.value ? (
-                    <IconCheck
-                      size="0.8rem"
-                      color="var(--dashboard-button)"
-                      stroke={3}
-                    />
-                  ) : (
-                    <IconX size="0.8rem" color="grey" stroke={3} />
-                  )
-                }
-                styles={{
-                  track: {
-                    backgroundColor: field.state.value
-                      ? 'var(--dashboard-button) !important'
-                      : 'var(--dashboard-background-faded)',
-                    borderColor: field.state.value
-                      ? 'var(--dashboard-button) !important'
-                      : 'var(--dashboard-background-faded)',
-                  },
-                }}
-              />
-            )}
-          </form.Field>
-        </div>
-        <Text size="sm" color="dimmed" mb="md">
-          Vision Language Models hosted by NCSA. These models can understand and
-          analyze images in addition to text. Free for UIUC students.
-        </Text>
-        {provider?.error &&
-          (form.state.values?.providers?.NCSAHostedVLM?.enabled ||
-            provider.enabled) && (
-            <motion.div
-              initial={{ opacity: 0, y: -10 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: -10 }}
-              transition={{ duration: 0.3 }}
-            >
-              <Text
-                size="sm"
-                color="red"
-                mb="md"
-                style={{
-                  padding: '8px',
-                  borderRadius: '4px',
-                  backgroundColor: 'rgba(255, 0, 0, 0.1)',
-                  border: '1px solid rgba(255, 0, 0, 0.2)',
-                }}
-              >
-                {provider.error}
-              </Text>
-            </motion.div>
-          )}
-        <form.Field name={`providers.${ProviderNames.NCSAHostedVLM}.enabled`}>
-          {(field: any) => (
-            <AnimatePresence>
-              {field.state.value && (
-                <motion.div
-                  initial={{ opacity: 0, height: 0 }}
-                  animate={{ opacity: 1, height: 'auto' }}
-                  exit={{ opacity: 0, height: 0 }}
-                  transition={{ duration: 0.3 }}
-                >
-                  <ModelToggles form={form} provider={provider} />
-                </motion.div>
-              )}
-            </AnimatePresence>
-          )}
-        </form.Field>
-      </Card>
-    </motion.div>
+    <ProviderCard
+      providerName="NCSA Hosted VLMs"
+      providerKey={ProviderNames.NCSAHostedVLM}
+      provider={provider}
+      form={form}
+      isLoading={isLoading}
+      externalUrl="https://ai.ncsa.illinois.edu/"
+      description="Vision Language Models hosted by NCSA. These models can understand and analyze images in addition to text. Free for UIUC students."
+    >
+      <ModelToggles form={form} provider={provider} />
+    </ProviderCard>
   )
 }
diff --git a/src/components/UIUC-Components/api-inputs/providers/OllamaProviderInput.tsx b/src/components/UIUC-Components/api-inputs/providers/OllamaProviderInput.tsx
index a8ca046c7..2fc255b79 100644
--- a/src/components/UIUC-Components/api-inputs/providers/OllamaProviderInput.tsx
+++ b/src/components/UIUC-Components/api-inputs/providers/OllamaProviderInput.tsx
@@ -1,12 +1,12 @@
 import React from 'react'
-import { Text, Switch, Card, TextInput, Skeleton } from '@mantine/core'
-import { IconCheck, IconExternalLink, IconX } from '@tabler/icons-react'
+import { Input } from '@/components/shadcn/ui/input'
+import { Label } from '@/components/shadcn/ui/label'
 import { ModelToggles } from '../ModelToggles'
 import {
   type OllamaProvider,
   ProviderNames,
 } from '~/utils/modelProviders/LLMProvider'
-import { motion, AnimatePresence } from 'framer-motion'
+import ProviderCard from './ProviderCard'
 
 export default function OllamaProviderInput({
   form,
@@ -17,150 +17,40 @@ export default function OllamaProviderInput({
   provider: OllamaProvider
   isLoading: boolean
 }) {
-  if (isLoading) {
-    return <Skeleton height={200} width={330} radius={'lg'} />
-  }
   return (
-    <motion.div layout>
-      <Card
-        p="lg"
-        radius="lg"
-        className="max-w-[330px] bg-[--dashboard-background-faded] text-[--dashboard-foreground] md:w-[330px]"
-      >
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-          }}
-        >
-          <div>
-            <a
-              className="mb-3"
-              href="https://ollama.ai/"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <div style={{ display: 'flex', alignItems: 'center' }}>
-                <Text
-                  size="lg"
-                  weight={500}
-                  mb="xs"
-                  style={{ paddingRight: '8px' }}
-                >
-                  Ollama
-                </Text>
-                <IconExternalLink size={16} className="mb-3" />
-              </div>
-            </a>
-          </div>
-          <form.Field name={`providers.${ProviderNames.Ollama}.enabled`}>
-            {(field: any) => (
-              <Switch
-                size="md"
-                labelPosition="left"
-                onLabel="ON"
-                offLabel="OFF"
-                aria-label="Enable Ollama provider"
-                checked={field.state.value}
-                onChange={(event) => {
-                  field.handleChange(event.currentTarget.checked)
-                  // Trigger form submission
-                  setTimeout(() => form.handleSubmit(), 0)
-                }}
-                thumbIcon={
-                  field.state.value ? (
-                    <IconCheck
-                      size="0.8rem"
-                      color="var(--dashboard-button)"
-                      stroke={3}
-                    />
-                  ) : (
-                    <IconX size="0.8rem" color="grey" stroke={3} />
-                  )
-                }
-                styles={{
-                  track: {
-                    backgroundColor: field.state.value
-                      ? 'var(--dashboard-button) !important'
-                      : 'var(--dashboard-background-faded)',
-                    borderColor: field.state.value
-                      ? 'var(--dashboard-button) !important'
-                      : 'var(--dashboard-background-faded)',
-                  },
-                }}
-              />
-            )}
-          </form.Field>
-        </div>
-        <Text size="sm" color="dimmed" mb="md">
+    <ProviderCard
+      providerName="Ollama"
+      providerKey={ProviderNames.Ollama}
+      provider={provider}
+      form={form}
+      isLoading={isLoading}
+      externalUrl="https://ollama.ai/"
+      description={
+        <>
           Ollama allows you easily self host LLMs. Set up Ollama on your machine
           and provide the base URL. Note that only the following models are
           supported, email us if you&apos;d like any others:{' '}
           <code>llama3.1:8b</code>, <code>llama3.1:70b</code>,{' '}
           <code>llama3.1:405b</code>.
-        </Text>
-        {provider?.error &&
-          (form.state.values?.providers?.Ollama?.enabled ||
-            provider.enabled) && (
-            <motion.div
-              initial={{ opacity: 0, y: -10 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: -10 }}
-              transition={{ duration: 0.3 }}
-            >
-              <Text
-                size="sm"
-                color="red"
-                mb="md"
-                style={{
-                  padding: '8px',
-                  borderRadius: '4px',
-                  backgroundColor: 'rgba(255, 0, 0, 0.1)',
-                  border: '1px solid rgba(255, 0, 0, 0.2)',
-                }}
-              >
-                {provider.error}
-              </Text>
-            </motion.div>
-          )}
-        <form.Field name={`providers.${ProviderNames.Ollama}.enabled`}>
-          {(field: any) => (
-            <AnimatePresence>
-              {field.state.value && (
-                <motion.div
-                  initial={{ opacity: 0, height: 0 }}
-                  animate={{ opacity: 1, height: 'auto' }}
-                  exit={{ opacity: 0, height: 0 }}
-                  transition={{ duration: 0.3 }}
-                >
-                  <form.Field
-                    name={`providers.${ProviderNames.Ollama}.baseUrl`}
-                  >
-                    {(field: any) => (
-                      <TextInput
-                        label="Base URL"
-                        placeholder="http://your-domain.com"
-                        value={field.state.value}
-                        styles={{
-                          input: {
-                            color: 'var(--foreground)',
-                            backgroundColor: 'var(--background)',
-                          },
-                        }}
-                        onChange={(event) =>
-                          field.handleChange(event.currentTarget.value)
-                        }
-                      />
-                    )}
-                  </form.Field>
-                  <ModelToggles form={form} provider={provider} />
-                </motion.div>
-              )}
-            </AnimatePresence>
-          )}
-        </form.Field>
-      </Card>
-    </motion.div>
+        </>
+      }
+    >
+      <form.Field name={`providers.${ProviderNames.Ollama}.baseUrl`}>
+        {(field: any) => (
+          <div className="mb-3">
+            <Label className="text-[--dashboard-foreground-faded]">
+              Base URL
+            </Label>
+            <Input
+              placeholder="http://your-domain.com"
+              value={field.state.value}
+              onChange={(e) => field.handleChange(e.target.value)}
+              className="mt-1 bg-[--background] text-[--foreground]"
+            />
+          </div>
+        )}
+      </form.Field>
+      <ModelToggles form={form} provider={provider} />
+    </ProviderCard>
   )
 }
diff --git a/src/components/UIUC-Components/api-inputs/providers/OpenAICompatibleProviderInput.tsx b/src/components/UIUC-Components/api-inputs/providers/OpenAICompatibleProviderInput.tsx
index 2ca548cc3..965b2c37a 100644
--- a/src/components/UIUC-Components/api-inputs/providers/OpenAICompatibleProviderInput.tsx
+++ b/src/components/UIUC-Components/api-inputs/providers/OpenAICompatibleProviderInput.tsx
@@ -1,13 +1,13 @@
 import React from 'react'
-import { Text, Switch, Card, Skeleton, TextInput } from '@mantine/core'
-import { IconCheck, IconX } from '@tabler/icons-react'
+import { Input } from '@/components/shadcn/ui/input'
+import { Label } from '@/components/shadcn/ui/label'
+import { APIKeyInput } from '../LLMsApiKeyInputForm'
 import { ModelToggles } from '../ModelToggles'
 import {
   type OpenAICompatibleProvider,
   ProviderNames,
 } from '~/utils/modelProviders/LLMProvider'
-import { motion, AnimatePresence } from 'framer-motion'
-import { APIKeyInput } from '../LLMsApiKeyInputForm'
+import ProviderCard from './ProviderCard'
 
 export default function OpenAICompatibleProviderInput({
   provider,
@@ -18,174 +18,64 @@ export default function OpenAICompatibleProviderInput({
   form: any
   isLoading: boolean
 }) {
-  if (isLoading) {
-    return <Skeleton height={200} width={330} radius={'lg'} />
-  }
-
   return (
-    <motion.div layout>
-      <Card
-        p="lg"
-        radius="lg"
-        className="max-w-[330px] bg-[--dashboard-background-faded] text-[--dashboard-foreground] md:w-[330px]"
-      >
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            width: '100%',
-          }}
-        >
-          <div>
-            <Text
-              size="lg"
-              weight={500}
-              mb="xs"
-              style={{ paddingRight: '8px' }}
+    <ProviderCard
+      providerName="OpenAI Compatible"
+      providerKey={ProviderNames.OpenAICompatible}
+      provider={provider}
+      form={form}
+      isLoading={isLoading}
+    >
+      <form.Field name={`providers.${ProviderNames.OpenAICompatible}.baseUrl`}>
+        {(baseUrlField: any) => (
+          <div className="mb-4">
+            <Label
+              htmlFor="openai-compatible-base-url"
+              className="text-[--dashboard-foreground-faded]"
             >
-              OpenAI Compatible
-            </Text>
-          </div>
-          <form.Field
-            name={`providers.${ProviderNames.OpenAICompatible}.enabled`}
-          >
-            {(field: any) => (
-              <Switch
-                size="md"
-                labelPosition="left"
-                onLabel="ON"
-                offLabel="OFF"
-                aria-label="Enable OpenAI Compatible provider"
-                checked={field.state.value}
-                onChange={(event) => {
-                  field.handleChange(event.currentTarget.checked)
-
-                  // Trigger form submission
-                  setTimeout(() => form.handleSubmit(), 0)
-                }}
-                thumbIcon={
-                  field.state.value ? (
-                    <IconCheck
-                      size="0.8rem"
-                      color="var(--dashboard-button)"
-                      stroke={3}
-                    />
-                  ) : (
-                    <IconX size="0.8rem" color="grey" stroke={3} />
+              Base URL
+            </Label>
+            <Input
+              id="openai-compatible-base-url"
+              placeholder="https://api.example.com/v1"
+              value={baseUrlField.state.value || ''}
+              onChange={(e) => {
+                const value = e.target.value
+                baseUrlField.handleChange(value)
+                if (value && !value.includes('/v1')) {
+                  form.setFieldValue(
+                    `providers.${ProviderNames.OpenAICompatible}.error`,
+                    'Base URL must include /v1',
+                  )
+                } else {
+                  form.setFieldValue(
+                    `providers.${ProviderNames.OpenAICompatible}.error`,
+                    undefined,
                   )
                 }
-                styles={{
-                  track: {
-                    backgroundColor: field.state.value
-                      ? 'var(--dashboard-button) !important'
-                      : 'var(--dashboard-background-faded)',
-                    borderColor: field.state.value
-                      ? 'var(--dashboard-button) !important'
-                      : 'var(--dashboard-background-faded)',
-                  },
-                }}
-              />
-            )}
-          </form.Field>
-        </div>
-        {provider?.error &&
-          (form.state.values?.providers?.OpenAICompatible?.enabled ||
-            provider.enabled) && (
-            <Text
-              size="sm"
-              color="red"
-              mb="md"
-              style={{
-                padding: '8px',
-                borderRadius: '4px',
-                backgroundColor: 'rgba(255, 0, 0, 0.1)',
-                border: '1px solid rgba(255, 0, 0, 0.2)',
               }}
-            >
-              {provider.error}
-            </Text>
-          )}
-        <form.Field
-          name={`providers.${ProviderNames.OpenAICompatible}.enabled`}
-        >
-          {(field: any) => (
-            <AnimatePresence>
-              {field.state.value && (
-                <motion.div
-                  initial={{ opacity: 0, height: 0 }}
-                  animate={{ opacity: 1, height: 'auto' }}
-                  exit={{ opacity: 0, height: 0 }}
-                  transition={{ duration: 0.3 }}
-                >
-                  <form.Field
-                    name={`providers.${ProviderNames.OpenAICompatible}.baseUrl`}
-                  >
-                    {(baseUrlField: any) => (
-                      <div style={{ marginBottom: '16px' }}>
-                        <TextInput
-                          label="Base URL"
-                          placeholder="https://api.example.com/v1"
-                          value={baseUrlField.state.value || ''}
-                          onChange={(e) => {
-                            const value = e.target.value
-                            baseUrlField.handleChange(value)
-                            // Validate on change
-                            if (value && !value.includes('/v1')) {
-                              // Set error in provider
-                              form.setFieldValue(
-                                `providers.${ProviderNames.OpenAICompatible}.error`,
-                                'Base URL must include /v1',
-                              )
-                            } else {
-                              // Clear error
-                              form.setFieldValue(
-                                `providers.${ProviderNames.OpenAICompatible}.error`,
-                                undefined,
-                              )
-                            }
-                          }}
-                          onBlur={() => {
-                            // Trigger form submission on blur to save
-                            setTimeout(() => form.handleSubmit(), 0)
-                          }}
-                          styles={{
-                            input: {
-                              color: 'var(--foreground)',
-                              backgroundColor: 'var(--background)',
-                              padding: '8px',
-                              borderRadius: '4px',
-                            },
-                            label: {
-                              color: 'var(--dashboard-foreground-faded)',
-                            },
-                          }}
-                        />
-                        {baseUrlField.state.value &&
-                          !baseUrlField.state.value.includes('/v1') && (
-                            <Text size="xs" color="red" mt="xs">
-                              Base URL must include /v1
-                            </Text>
-                          )}
-                      </div>
-                    )}
-                  </form.Field>
+              onBlur={() => {
+                form.handleSubmit()
+              }}
+              className="mt-1 bg-[--background] text-[--foreground]"
+            />
+            {baseUrlField.state.value &&
+              !baseUrlField.state.value.includes('/v1') && (
+                <p className="mt-1 text-xs text-red-500">
+                  Base URL must include /v1
+                </p>
+              )}
+          </div>
+        )}
+      </form.Field>
 
-                  <form.Field
-                    name={`providers.${ProviderNames.OpenAICompatible}.apiKey`}
-                  >
-                    {(apiKeyField: any) => (
-                      <APIKeyInput field={apiKeyField} placeholder="API Key" />
-                    )}
-                  </form.Field>
+      <form.Field name={`providers.${ProviderNames.OpenAICompatible}.apiKey`}>
+        {(apiKeyField: any) => (
+          <APIKeyInput field={apiKeyField} placeholder="API Key" />
+        )}
+      </form.Field>
 
-                  <ModelToggles form={form} provider={provider} />
-                </motion.div>
-              )}
-            </AnimatePresence>
-          )}
-        </form.Field>
-      </Card>
-    </motion.div>
+      <ModelToggles form={form} provider={provider} />
+    </ProviderCard>
   )
 }
diff --git a/src/components/UIUC-Components/api-inputs/providers/OpenAIProviderInput.tsx b/src/components/UIUC-Components/api-inputs/providers/OpenAIProviderInput.tsx
index 4bb1b6f6c..5b25509d7 100644
--- a/src/components/UIUC-Components/api-inputs/providers/OpenAIProviderInput.tsx
+++ b/src/components/UIUC-Components/api-inputs/providers/OpenAIProviderInput.tsx
@@ -1,13 +1,11 @@
 import React from 'react'
-import { Text, Switch, Card, Skeleton } from '@mantine/core'
-import { IconCheck, IconExternalLink, IconX } from '@tabler/icons-react'
+import { APIKeyInput } from '../LLMsApiKeyInputForm'
 import { ModelToggles } from '../ModelToggles'
 import {
   type OpenAIProvider,
   ProviderNames,
 } from '~/utils/modelProviders/LLMProvider'
-import { motion, AnimatePresence } from 'framer-motion'
-import { APIKeyInput } from '../LLMsApiKeyInputForm'
+import ProviderCard from './ProviderCard'
 
 export default function OpenAIProviderInput({
   provider,
@@ -18,134 +16,21 @@ export default function OpenAIProviderInput({
   form: any
   isLoading: boolean
 }) {
-  if (isLoading) {
-    return <Skeleton height={200} width={330} radius={'lg'} />
-  }
-  // TODO: display errors from provider.error
-
   return (
-    <motion.div layout>
-      <Card
-        p="lg"
-        radius="lg"
-        className="max-w-[330px] bg-[--dashboard-background-faded] text-[--dashboard-foreground] md:w-[330px]"
-      >
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            width: '100%',
-          }}
-        >
-          <div>
-            <a
-              className="mb-3"
-              href="https://platform.openai.com/account/api-keys"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <div style={{ display: 'flex', alignItems: 'center' }}>
-                <Text
-                  size="lg"
-                  weight={500}
-                  mb="xs"
-                  style={{ paddingRight: '8px' }}
-                >
-                  OpenAI
-                </Text>
-                <IconExternalLink size={16} className="mb-3" />
-              </div>
-            </a>
-          </div>
-          <form.Field name={`providers.${ProviderNames.OpenAI}.enabled`}>
-            {(field: any) => (
-              <Switch
-                size="md"
-                labelPosition="left"
-                onLabel="ON"
-                offLabel="OFF"
-                aria-label="Enable OpenAI provider"
-                checked={field.state.value}
-                onChange={(event) => {
-                  field.handleChange(event.currentTarget.checked)
-
-                  // Trigger form submission
-                  setTimeout(() => form.handleSubmit(), 0)
-                }}
-                thumbIcon={
-                  field.state.value ? (
-                    <IconCheck
-                      size="0.8rem"
-                      color="var(--dashboard-button)"
-                      stroke={3}
-                    />
-                  ) : (
-                    <IconX size="0.8rem" color="grey" stroke={3} />
-                  )
-                }
-                styles={{
-                  track: {
-                    backgroundColor: field.state.value
-                      ? 'var(--dashboard-button) !important'
-                      : 'var(--dashboard-background-faded)',
-                    borderColor: field.state.value
-                      ? 'var(--dashboard-button) !important'
-                      : 'var(--dashboard-background-faded)',
-                  },
-                }}
-              />
-            )}
-          </form.Field>
-        </div>
-        {/* <Text size="sm" color="dimmed" mb="md">
-          OpenAI offers powerful language models like GPT-3.5 and GPT-4. Get
-          your API key from the OpenAI platform.
-        </Text> */}
-        {provider?.error &&
-          (form.state.values?.providers?.OpenAI?.enabled ||
-            provider.enabled) && (
-            <Text
-              size="sm"
-              color="red"
-              mb="md"
-              style={{
-                padding: '8px',
-                borderRadius: '4px',
-                backgroundColor: 'rgba(255, 0, 0, 0.1)',
-                border: '1px solid rgba(255, 0, 0, 0.2)',
-              }}
-            >
-              {provider.error}
-            </Text>
-          )}
-        <form.Field name={`providers.${ProviderNames.OpenAI}.enabled`}>
-          {(field: any) => (
-            <AnimatePresence>
-              {field.state.value && (
-                <motion.div
-                  initial={{ opacity: 0, height: 0 }}
-                  animate={{ opacity: 1, height: 'auto' }}
-                  exit={{ opacity: 0, height: 0 }}
-                  transition={{ duration: 0.3 }}
-                >
-                  <form.Field name={`providers.${ProviderNames.OpenAI}.apiKey`}>
-                    {(apiKeyField: any) => (
-                      <APIKeyInput
-                        field={apiKeyField}
-                        placeholder="OpenAI API Key"
-                        // onValidate={validateApiKey}
-                      />
-                    )}
-                  </form.Field>
-
-                  <ModelToggles form={form} provider={provider} />
-                </motion.div>
-              )}
-            </AnimatePresence>
-          )}
-        </form.Field>
-      </Card>
-    </motion.div>
+    <ProviderCard
+      providerName="OpenAI"
+      providerKey={ProviderNames.OpenAI}
+      provider={provider}
+      form={form}
+      isLoading={isLoading}
+      externalUrl="https://platform.openai.com/account/api-keys"
+    >
+      <form.Field name={`providers.${ProviderNames.OpenAI}.apiKey`}>
+        {(field: any) => (
+          <APIKeyInput field={field} placeholder="OpenAI API Key" />
+        )}
+      </form.Field>
+      <ModelToggles form={form} provider={provider} />
+    </ProviderCard>
   )
 }
diff --git a/src/components/UIUC-Components/api-inputs/providers/ProviderCard.tsx b/src/components/UIUC-Components/api-inputs/providers/ProviderCard.tsx
new file mode 100644
index 000000000..b1e741607
--- /dev/null
+++ b/src/components/UIUC-Components/api-inputs/providers/ProviderCard.tsx
@@ -0,0 +1,153 @@
+import React, { type ReactNode } from 'react'
+import { Alert, AlertDescription } from '@/components/shadcn/ui/alert'
+import { Skeleton } from '@/components/shadcn/ui/skeleton'
+import { Switch } from '@/components/shadcn/ui/switch'
+import { IconExternalLink } from '@tabler/icons-react'
+import {
+  type LLMProvider,
+  type ProviderNames,
+} from '~/utils/modelProviders/LLMProvider'
+import { motion, AnimatePresence } from 'framer-motion'
+
+interface ProviderCardProps {
+  providerName: string
+  providerKey: ProviderNames
+  provider: LLMProvider
+  form: any
+  isLoading: boolean
+  externalUrl?: string
+  description?: ReactNode
+  children: ReactNode
+}
+
+export default function ProviderCard({
+  providerName,
+  providerKey,
+  provider,
+  form,
+  isLoading,
+  externalUrl,
+  description,
+  children,
+}: ProviderCardProps) {
+  const bgClass =
+    'w-full min-w-[min(330px,100%)] flex-[1_1_calc(50%_-_0.5rem)] rounded-md border-0 bg-[--dashboard-background-faded] p-5 text-[--dashboard-foreground] shadow-none'
+
+  if (isLoading || !provider) {
+    return <Skeleton className={`${bgClass} min-h-[200px]`} />
+  }
+
+  return (
+    <div className={bgClass}>
+      <div className="mb-3 flex items-center justify-between">
+        <ProviderTitle name={providerName} externalUrl={externalUrl} />
+        <form.Field className="mb-1" name={`providers.${providerKey}.enabled`}>
+          {(field: any) => (
+            <ProviderSwitch
+              checked={field.state.value}
+              onCheckedChange={(checked: boolean) => {
+                field.handleChange(checked)
+                form.handleSubmit()
+              }}
+              providerName={providerName}
+            />
+          )}
+        </form.Field>
+      </div>
+
+      {description && (
+        <p className="mb-2 text-sm text-[--dashboard-foreground-faded]">
+          {description}
+        </p>
+      )}
+
+      <ProviderError
+        error={provider?.error}
+        enabled={
+          form.state.values?.providers?.[providerKey]?.enabled ||
+          provider.enabled
+        }
+      />
+
+      <form.Field name={`providers.${providerKey}.enabled`}>
+        {(field: any) => (
+          <AnimatePresence>
+            {field.state.value && (
+              <motion.div
+                initial={{ opacity: 0, height: 0 }}
+                animate={{ opacity: 1, height: 'auto' }}
+                exit={{ opacity: 0, height: 0 }}
+                transition={{ duration: 0.3 }}
+              >
+                {children}
+              </motion.div>
+            )}
+          </AnimatePresence>
+        )}
+      </form.Field>
+    </div>
+  )
+}
+
+function ProviderTitle({
+  name,
+  externalUrl,
+}: {
+  name: string
+  externalUrl?: string
+}) {
+  if (externalUrl) {
+    return (
+      <a href={externalUrl} target="_blank" rel="noopener noreferrer">
+        <div className="flex items-center">
+          <span className="pr-2 text-lg font-medium">{name}</span>
+          <IconExternalLink size={16} />
+        </div>
+      </a>
+    )
+  }
+
+  return <span className="mb-1 pr-2 text-lg font-medium">{name}</span>
+}
+
+function ProviderSwitch({
+  checked,
+  onCheckedChange,
+  providerName,
+}: {
+  checked: boolean
+  onCheckedChange: (checked: boolean) => void
+  providerName: string
+}) {
+  return (
+    <Switch
+      variant="labeled"
+      showLabels
+      showThumbIcon
+      checked={checked}
+      onCheckedChange={onCheckedChange}
+      aria-label={`Enable ${providerName} provider`}
+    />
+  )
+}
+
+function ProviderError({
+  error,
+  enabled,
+}: {
+  error?: string
+  enabled?: boolean
+}) {
+  if (!error || !enabled) return null
+
+  return (
+    <Alert
+      variant="destructive"
+      className="mb-3 border-red-500/20 bg-red-500/10"
+    >
+      <AlertDescription className="text-sm text-red-500">
+        {error}
+      </AlertDescription>
+    </Alert>
+  )
+}
diff --git a/src/components/UIUC-Components/api-inputs/providers/SambaNovaProviderInput.tsx b/src/components/UIUC-Components/api-inputs/providers/SambaNovaProviderInput.tsx
index 73cc9106f..cfed58e4b 100644
--- a/src/components/UIUC-Components/api-inputs/providers/SambaNovaProviderInput.tsx
+++ b/src/components/UIUC-Components/api-inputs/providers/SambaNovaProviderInput.tsx
@@ -1,13 +1,11 @@
 import React from 'react'
-import { Text, Switch, Card, Skeleton } from '@mantine/core'
-import { IconCheck, IconExternalLink, IconX } from '@tabler/icons-react'
+import { APIKeyInput } from '../LLMsApiKeyInputForm'
 import { ModelToggles } from '../ModelToggles'
 import {
   type SambaNovaProvider,
   ProviderNames,
 } from '~/utils/modelProviders/LLMProvider'
-import { motion, AnimatePresence } from 'framer-motion'
-import { APIKeyInput } from '../LLMsApiKeyInputForm'
+import ProviderCard from './ProviderCard'
 
 export default function SambaNovaProviderInput({
   provider,
@@ -18,131 +16,23 @@ export default function SambaNovaProviderInput({
   form: any
   isLoading: boolean
 }) {
-  if (isLoading) {
-    return <Skeleton height={200} width={330} radius={'lg'} />
-  }
-
   return (
-    <motion.div layout>
-      <Card
-        p="lg"
-        radius="lg"
-        className="max-w-[330px] bg-[--dashboard-background-faded] text-[--dashboard-foreground] md:w-[330px] "
-      >
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            width: '100%',
-          }}
-        >
-          <div>
-            <a
-              className="mb-3"
-              href="https://sambanova.ai/api"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <div style={{ display: 'flex', alignItems: 'center' }}>
-                <Text
-                  size="lg"
-                  weight={500}
-                  mb="xs"
-                  style={{ paddingRight: '8px' }}
-                >
-                  SambaNova
-                </Text>
-                <IconExternalLink size={16} className="mb-3" />
-              </div>
-            </a>
-          </div>
-          <form.Field name={`providers.${ProviderNames.SambaNova}.enabled`}>
-            {(field: any) => (
-              <Switch
-                size="md"
-                labelPosition="left"
-                onLabel="ON"
-                offLabel="OFF"
-                aria-label="Enable SambaNova provider"
-                checked={field.state.value}
-                onChange={(event) => {
-                  event.preventDefault()
-                  field.handleChange(event.currentTarget.checked)
-                  form.handleSubmit()
-                }}
-                thumbIcon={
-                  field.state.value ? (
-                    <IconCheck
-                      size="0.8rem"
-                      color="var(--dashboard-button)"
-                      stroke={3}
-                    />
-                  ) : (
-                    <IconX size="0.8rem" color="grey" stroke={3} />
-                  )
-                }
-                styles={{
-                  track: {
-                    backgroundColor: field.state.value
-                      ? 'var(--dashboard-button) !important'
-                      : 'var(--dashboard-background-faded)',
-                    borderColor: field.state.value
-                      ? 'var(--dashboard-button) !important'
-                      : 'var(--dashboard-background-faded)',
-                  },
-                }}
-              />
-            )}
-          </form.Field>
-        </div>
-        {provider?.error &&
-          (form.state.values?.providers?.SambaNova?.enabled ||
-            provider.enabled) && (
-            <Text
-              size="sm"
-              color="red"
-              mb="md"
-              style={{
-                padding: '8px',
-                borderRadius: '4px',
-                backgroundColor: 'rgba(255, 0, 0, 0.1)',
-                border: '1px solid rgba(255, 0, 0, 0.2)',
-              }}
-            >
-              {provider.error}
-            </Text>
-          )}
-        <form.Field name={`providers.${ProviderNames.SambaNova}.enabled`}>
-          {(field: any) => (
-            <AnimatePresence>
-              {field.state.value && (
-                <motion.div
-                  initial={{ opacity: 0, height: 0 }}
-                  animate={{ opacity: 1, height: 'auto' }}
-                  exit={{ opacity: 0, height: 0 }}
-                  transition={{ duration: 0.3 }}
-                >
-                  <form.Field
-                    name={`providers.${ProviderNames.SambaNova}.apiKey`}
-                  >
-                    {(apiKeyField: any) => (
-                      <APIKeyInput
-                        field={apiKeyField}
-                        placeholder="SambaNova API Key"
-                      />
-                    )}
-                  </form.Field>
-
-                  {form.state.values?.providers?.SambaNova?.apiKey && (
-                    <ModelToggles form={form} provider={provider} />
-                  )}
-                </motion.div>
-              )}
-            </AnimatePresence>
-          )}
-        </form.Field>
-      </Card>
-    </motion.div>
+    <ProviderCard
+      providerName="SambaNova"
+      providerKey={ProviderNames.SambaNova}
+      provider={provider}
+      form={form}
+      isLoading={isLoading}
+      externalUrl="https://sambanova.ai/api"
+    >
+      <form.Field name={`providers.${ProviderNames.SambaNova}.apiKey`}>
+        {(apiKeyField: any) => (
+          <APIKeyInput field={apiKeyField} placeholder="SambaNova API Key" />
+        )}
+      </form.Field>
+      {form.state.values?.providers?.SambaNova?.apiKey && (
+        <ModelToggles form={form} provider={provider} />
+      )}
+    </ProviderCard>
   )
 }
diff --git a/src/components/UIUC-Components/api-inputs/providers/WebLLMProviderInput.tsx b/src/components/UIUC-Components/api-inputs/providers/WebLLMProviderInput.tsx
index 227193101..962d646a3 100644
--- a/src/components/UIUC-Components/api-inputs/providers/WebLLMProviderInput.tsx
+++ b/src/components/UIUC-Components/api-inputs/providers/WebLLMProviderInput.tsx
@@ -1,12 +1,10 @@
 import React from 'react'
-import { Text, Switch, Card, Skeleton } from '@mantine/core'
-import { IconCheck, IconExternalLink, IconX } from '@tabler/icons-react'
 import { ModelToggles } from '../ModelToggles'
 import {
   ProviderNames,
   type WebLLMProvider,
 } from '~/utils/modelProviders/LLMProvider'
-import { motion, AnimatePresence } from 'framer-motion'
+import ProviderCard from './ProviderCard'
 
 export default function WebLLMProviderInput({
   provider,
@@ -17,102 +15,17 @@ export default function WebLLMProviderInput({
   form: any
   isLoading: boolean
 }) {
-  if (isLoading) {
-    return <Skeleton height={200} width={330} radius={'lg'} />
-  }
   return (
-    <motion.div layout>
-      <Card
-        p="lg"
-        radius="lg"
-        className="max-w-[330px] bg-[--dashboard-background-faded] text-[--dashboard-foreground] md:w-[330px]"
-      >
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-          }}
-        >
-          <div>
-            <a
-              className="mb-3"
-              href="https://github.com/mlc-ai/web-llm"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <div style={{ display: 'flex', alignItems: 'center' }}>
-                <Text
-                  size="lg"
-                  weight={500}
-                  mb="xs"
-                  style={{ paddingRight: '8px' }}
-                >
-                  WebLLM
-                </Text>
-                <IconExternalLink size={16} className="mb-3" />
-              </div>
-            </a>
-          </div>
-          <form.Field name={`providers.${ProviderNames.WebLLM}.enabled`}>
-            {(field: any) => (
-              <Switch
-                size="md"
-                labelPosition="left"
-                onLabel="ON"
-                offLabel="OFF"
-                aria-label="Enable WebLLM provider"
-                checked={field.state.value}
-                onChange={(event) => {
-                  field.handleChange(event.currentTarget.checked)
-                  // Trigger form submission
-                  setTimeout(() => form.handleSubmit(), 0)
-                }}
-                thumbIcon={
-                  field.state.value ? (
-                    <IconCheck
-                      size="0.8rem"
-                      color="var(--dashboard-button)"
-                      stroke={3}
-                    />
-                  ) : (
-                    <IconX size="0.8rem" color="grey" stroke={3} />
-                  )
-                }
-                styles={{
-                  track: {
-                    backgroundColor: field.state.value
-                      ? 'var(--dashboard-button) !important'
-                      : 'var(--dashboard-background-faded)',
-                    borderColor: field.state.value
-                      ? 'var(--dashboard-button) !important'
-                      : 'var(--dashboard-background-faded)',
-                  },
-                }}
-              />
-            )}
-          </form.Field>
-        </div>
-        <Text size="sm" color="dimmed" mb="md">
-          WebLLM is a framework for building and deploying LLMs in the browser.
-        </Text>
-        <form.Field name={`providers.${ProviderNames.WebLLM}.enabled`}>
-          {(field: any) => (
-            <AnimatePresence>
-              {field.state.value && (
-                <motion.div
-                  initial={{ opacity: 0, height: 0 }}
-                  animate={{ opacity: 1, height: 'auto' }}
-                  exit={{ opacity: 0, height: 0 }}
-                  transition={{ duration: 0.3 }}
-                >
-                  <ModelToggles form={form} provider={provider} />
-                </motion.div>
-              )}
-            </AnimatePresence>
-          )}
-        </form.Field>
-      </Card>
-    </motion.div>
+    <ProviderCard
+      providerName="WebLLM"
+      providerKey={ProviderNames.WebLLM}
+      provider={provider}
+      form={form}
+      isLoading={isLoading}
+      externalUrl="https://github.com/mlc-ai/web-llm"
+      description="WebLLM is a framework for building and deploying LLMs in the browser."
+    >
+      <ModelToggles form={form} provider={provider} />
+    </ProviderCard>
   )
 }
diff --git a/src/components/UIUC-Components/api-inputs/providers/__tests__/BedrockProviderInput.test.tsx b/src/components/UIUC-Components/api-inputs/providers/__tests__/BedrockProviderInput.test.tsx
index 835111755..8274b2f73 100644
--- a/src/components/UIUC-Components/api-inputs/providers/__tests__/BedrockProviderInput.test.tsx
+++ b/src/components/UIUC-Components/api-inputs/providers/__tests__/BedrockProviderInput.test.tsx
@@ -103,7 +103,7 @@ describe('BedrockProviderInput', () => {
 
     // Switch change triggers submit
     await user.click(
-      screen.getByRole('switch', { name: /Enable Bedrock provider/i }),
+      screen.getByRole('switch', { name: /Enable Amazon Bedrock provider/i }),
     )
     expect(onSubmit).toHaveBeenCalled()
   })
diff --git a/src/components/UIUC-Components/api-inputs/providers/__tests__/MoreProviderInputs.test.tsx b/src/components/UIUC-Components/api-inputs/providers/__tests__/MoreProviderInputs.test.tsx
index f5abe7077..a8461f75e 100644
--- a/src/components/UIUC-Components/api-inputs/providers/__tests__/MoreProviderInputs.test.tsx
+++ b/src/components/UIUC-Components/api-inputs/providers/__tests__/MoreProviderInputs.test.tsx
@@ -224,7 +224,7 @@ describe('Provider inputs (coverage)', () => {
       screen.getByRole('switch', { name: /Enable Azure OpenAI provider/i }),
     )
     await user.click(
-      screen.getByRole('switch', { name: /Enable Gemini provider/i }),
+      screen.getByRole('switch', { name: /Enable Google Gemini provider/i }),
     )
     expect(onSubmit).toHaveBeenCalled()
   })
diff --git a/src/components/shadcn/ui/button.tsx b/src/components/shadcn/ui/button.tsx
index c6db19990..bb8b64f83 100644
--- a/src/components/shadcn/ui/button.tsx
+++ b/src/components/shadcn/ui/button.tsx
@@ -18,10 +18,14 @@ const buttonVariants = cva(
           'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
+        danger:
+          'bg-red-600 text-white font-semibold hover:bg-red-700 disabled:bg-red-600/50 disabled:text-white/50',
+        dashboard:
+          'bg-[--dashboard-button] font-semibold text-sm text-[--dashboard-button-foreground] hover:bg-[--dashboard-button-hover] disabled:bg-[--background-faded] disabled:text-[--foreground-faded]',
       },
       size: {
         default: 'h-10 px-4 py-2',
-        sm: 'h-9 rounded-md px-3',
+        sm: 'h-8 rounded-md px-3 text-xs',
         lg: 'h-11 rounded-md px-8',
         icon: 'h-10 w-10',
       },
diff --git a/src/components/shadcn/ui/form-input.tsx b/src/components/shadcn/ui/form-input.tsx
new file mode 100644
index 000000000..4fb4b4920
--- /dev/null
+++ b/src/components/shadcn/ui/form-input.tsx
@@ -0,0 +1,218 @@
+'use client'
+
+import * as React from 'react'
+import { useEffect, useRef, useCallback } from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/components/shadcn/lib/utils'
+
+const formInputGroupVariants = cva(
+  [
+    'flex w-full items-center rounded-md border bg-[--background] transition-colors',
+    'has-[>textarea]:items-stretch',
+  ],
+  {
+    variants: {
+      status: {
+        default:
+          'border-[--dashboard-border] focus-within:border-[--foreground]',
+        success:
+          'border-[--dashboard-border] focus-within:border-[--foreground]',
+        error: 'border-[--error]',
+        loading:
+          'border-[--foreground-faded] focus-within:border-[--foreground]',
+      },
+    },
+    defaultVariants: {
+      status: 'default',
+    },
+  },
+)
+
+type FormInputStatus = NonNullable<
+  VariantProps<typeof formInputGroupVariants>['status']
+>
+
+interface FormInputProps {
+  as?: 'input' | 'textarea'
+  label?: string
+  required?: boolean
+  description?: string
+  status?: FormInputStatus
+  errorMessage?: string
+  successMessage?: string
+  rightSlot?: React.ReactNode
+  disabled?: boolean
+  autoFocus?: boolean
+  placeholder?: string
+  value?: string
+  onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>
+  onInput?: React.FormEventHandler<HTMLInputElement | HTMLTextAreaElement>
+  onFocus?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>
+  onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>
+  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>
+  name?: string
+  autoComplete?: string
+  minRows?: number
+  maxRows?: number
+  className?: string
+  inputClassName?: string
+}
+
+const LINE_HEIGHT = 22 // approximate line-height in px for text-sm/md
+
+const FormInput = React.forwardRef<
+  HTMLInputElement | HTMLTextAreaElement,
+  FormInputProps
+>(
+  (
+    {
+      as = 'input',
+      label,
+      required,
+      description,
+      status = 'default',
+      errorMessage,
+      successMessage,
+      rightSlot,
+      disabled,
+      autoFocus,
+      placeholder,
+      value,
+      onChange,
+      onInput,
+      onFocus,
+      onBlur,
+      onKeyDown,
+      name,
+      autoComplete,
+      minRows = 2,
+      maxRows,
+      className,
+      inputClassName,
+    },
+    forwardedRef,
+  ) => {
+    const internalRef = useRef<HTMLTextAreaElement>(null)
+
+    const textareaRef =
+      (forwardedRef as React.Ref<HTMLTextAreaElement>) ?? internalRef
+
+    const adjustHeight = useCallback(() => {
+      const el =
+        typeof textareaRef === 'object' && textareaRef !== null
+          ? textareaRef.current
+          : null
+      if (!el || as !== 'textarea') return
+
+      el.style.height = 'auto'
+      const minH = minRows * LINE_HEIGHT
+      const maxH = maxRows ? maxRows * LINE_HEIGHT : Infinity
+      const scrollH = el.scrollHeight
+      el.style.height = `${Math.min(Math.max(scrollH, minH), maxH)}px`
+      el.style.overflowY = scrollH > maxH ? 'auto' : 'hidden'
+    }, [as, minRows, maxRows, textareaRef])
+
+    useEffect(() => {
+      adjustHeight()
+    }, [value, adjustHeight])
+
+    const sharedClasses = cn(
+      'w-full bg-transparent px-3 py-2 text-sm text-[--foreground] placeholder:text-[--foreground-faded]',
+      'outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0',
+      'disabled:cursor-not-allowed disabled:opacity-50',
+      inputClassName,
+    )
+
+    const statusMessage =
+      status === 'error'
+        ? errorMessage
+        : status === 'success'
+          ? successMessage
+          : undefined
+
+    const statusTextColor =
+      status === 'error'
+        ? 'text-[--error]'
+        : status === 'success'
+          ? 'text-[--illinois-prairie]'
+          : ''
+
+    return (
+      <div className={cn('flex flex-col gap-1', className)}>
+        {label && (
+          <label className="text-base font-semibold text-[--foreground]">
+            {label}
+            {required && <span className="ml-0.5 text-[--error]">*</span>}
+          </label>
+        )}
+
+        {description && (
+          <p className="text-sm text-[--foreground-faded]">{description}</p>
+        )}
+
+        <div
+          className={cn(formInputGroupVariants({ status }))}
+          data-disabled={disabled || undefined}
+        >
+          {as === 'textarea' ? (
+            <textarea
+              ref={textareaRef}
+              className={cn(sharedClasses, 'resize-none')}
+              style={{ minHeight: minRows * LINE_HEIGHT }}
+              disabled={disabled}
+              autoFocus={autoFocus}
+              placeholder={placeholder}
+              value={value}
+              onChange={
+                onChange as React.ChangeEventHandler<HTMLTextAreaElement>
+              }
+              onInput={(e) => {
+                adjustHeight()
+                ;(onInput as React.FormEventHandler<HTMLTextAreaElement>)?.(e)
+              }}
+              onFocus={onFocus as React.FocusEventHandler<HTMLTextAreaElement>}
+              onBlur={onBlur as React.FocusEventHandler<HTMLTextAreaElement>}
+              onKeyDown={
+                onKeyDown as React.KeyboardEventHandler<HTMLTextAreaElement>
+              }
+              name={name}
+              autoComplete={autoComplete}
+            />
+          ) : (
+            <input
+              ref={forwardedRef as React.Ref<HTMLInputElement>}
+              type="text"
+              className={sharedClasses}
+              disabled={disabled}
+              autoFocus={autoFocus}
+              placeholder={placeholder}
+              value={value}
+              onChange={onChange as React.ChangeEventHandler<HTMLInputElement>}
+              onInput={onInput as React.FormEventHandler<HTMLInputElement>}
+              onFocus={onFocus as React.FocusEventHandler<HTMLInputElement>}
+              onBlur={onBlur as React.FocusEventHandler<HTMLInputElement>}
+              onKeyDown={
+                onKeyDown as React.KeyboardEventHandler<HTMLInputElement>
+              }
+              name={name}
+              autoComplete={autoComplete}
+            />
+          )}
+
+          {rightSlot && (
+            <div className="flex shrink-0 items-center pr-3">{rightSlot}</div>
+          )}
+        </div>
+
+        {statusMessage && (
+          <p className={cn('text-sm', statusTextColor)}>{statusMessage}</p>
+        )}
+      </div>
+    )
+  },
+)
+
+FormInput.displayName = 'FormInput'
+
+export { FormInput, type FormInputProps, type FormInputStatus }
diff --git a/src/components/shadcn/ui/switch.tsx b/src/components/shadcn/ui/switch.tsx
index 54ff49d77..055aa3a23 100644
--- a/src/components/shadcn/ui/switch.tsx
+++ b/src/components/shadcn/ui/switch.tsx
@@ -2,28 +2,255 @@
 
 import * as React from 'react'
 import * as SwitchPrimitives from '@radix-ui/react-switch'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { IconCheck, IconX, IconInfoCircle } from '@tabler/icons-react'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/shadcn/ui/tooltip'
 
 import { cn } from '@/components/shadcn/lib/utils'
 
+const switchVariants = cva(
+  'peer relative inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-white/15',
+        labeled:
+          'data-[state=checked]:border-[var(--dashboard-button)] data-[state=checked]:bg-[var(--dashboard-button)] data-[state=unchecked]:border-[var(--dashboard-background-darker)] data-[state=unchecked]:bg-[var(--dashboard-background-dark)] dark:data-[state=unchecked]:border-white/25 dark:data-[state=unchecked]:bg-white/15',
+      },
+      size: {
+        sm: 'h-5 w-10',
+        default: 'h-6 w-12',
+        lg: 'h-7 w-14',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+const switchThumbVariants = cva(
+  'pointer-events-none flex items-center justify-center rounded-full bg-white shadow-[0_2px_4px_rgba(0,0,0,0.2)] dark:shadow-[0_2px_6px_rgba(0,0,0,0.4)] ring-0 transition-all duration-300',
+  {
+    variants: {
+      size: {
+        sm: 'h-4 w-4 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
+        default:
+          'h-5 w-5 data-[state=checked]:translate-x-6 data-[state=unchecked]:translate-x-0',
+        lg: 'h-[24px] w-[24px] data-[state=checked]:translate-x-7 data-[state=unchecked]:translate-x-0',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  },
+)
+
+const switchTrackLabelVariants = cva(
+  'absolute font-semibold transition-opacity duration-200',
+  {
+    variants: {
+      size: {
+        sm: 'text-[6px]',
+        default: 'text-[9px]',
+        lg: 'text-[9px]',
+      },
+      position: {
+        on: 'left-1.5',
+        off: 'right-1',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+      position: 'on',
+    },
+  },
+)
+
+const switchContainerVariants = cva(
+  'flex items-center rounded-lg p-2 transition-all duration-200 ease-in-out',
+  {
+    variants: {
+      disabled: {
+        true: 'opacity-60',
+        false: 'cursor-pointer hover:bg-white/10',
+      },
+    },
+    defaultVariants: {
+      disabled: false,
+    },
+  },
+)
+
+interface SwitchProps
+  extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>,
+    VariantProps<typeof switchVariants> {
+  /** Show ON/OFF labels on track */
+  showLabels?: boolean
+  /** Custom on label text */
+  onLabel?: string
+  /** Custom off label text */
+  offLabel?: string
+  /** Show check/x icons in thumb */
+  showThumbIcon?: boolean
+  /** Text label displayed next to switch */
+  label?: string
+  /** Tooltip text for the info icon */
+  tooltip?: string
+}
+
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
->(({ className, ...props }, ref) => (
-  <SwitchPrimitives.Root
-    className={cn(
-      'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+  SwitchProps
+>(
+  (
+    {
       className,
-    )}
-    {...props}
-    ref={ref}
-  >
-    <SwitchPrimitives.Thumb
-      className={cn(
-        'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
-      )}
-    />
-  </SwitchPrimitives.Root>
-))
+      variant,
+      size,
+      showLabels = false,
+      onLabel = 'ON',
+      offLabel = 'OFF',
+      showThumbIcon = false,
+      label,
+      tooltip,
+      disabled,
+      checked,
+      onCheckedChange,
+      ...props
+    },
+    ref,
+  ) => {
+    // Only wrap in container when there's actually a label or tooltip to show
+    const hasLabelOrTooltip = !!(label || tooltip)
+
+    const switchElement = (
+      <SwitchPrimitives.Root
+        className={cn(switchVariants({ variant, size }), className)}
+        disabled={disabled}
+        checked={checked}
+        onCheckedChange={onCheckedChange}
+        onClick={(e) => e.stopPropagation()}
+        {...props}
+        ref={ref}
+      >
+        {/* Track Labels */}
+        {showLabels && (
+          <>
+            <span
+              className={cn(
+                switchTrackLabelVariants({ size, position: 'on' }),
+                checked
+                  ? 'text-white opacity-100 dark:text-[var(--illinois-blue)]'
+                  : 'opacity-0',
+              )}
+            >
+              {onLabel}
+            </span>
+            <span
+              className={cn(
+                switchTrackLabelVariants({ size, position: 'off' }),
+                !checked
+                  ? 'text-gray-400 opacity-100 dark:text-gray-300'
+                  : 'opacity-0',
+              )}
+            >
+              {offLabel}
+            </span>
+          </>
+        )}
+
+        <SwitchPrimitives.Thumb className={cn(switchThumbVariants({ size }))}>
+          {showThumbIcon &&
+            (checked ? (
+              <IconCheck
+                size={12}
+                className={cn(
+                  'stroke-[3] dark:text-[var(--illinois-blue)]',
+                  disabled
+                    ? 'text-gray-400'
+                    : 'text-[var(--dashboard-button,hsl(var(--primary)))]',
+                )}
+              />
+            ) : (
+              <IconX size={12} className="stroke-[3] text-gray-400" />
+            ))}
+        </SwitchPrimitives.Thumb>
+      </SwitchPrimitives.Root>
+    )
+
+    // Return just the switch if no label/tooltip
+    if (!hasLabelOrTooltip) {
+      return switchElement
+    }
+
+    // Return switch with label and optional tooltip
+    return (
+      <div
+        className={cn(
+          switchContainerVariants({ disabled: !!disabled }),
+          'group',
+        )}
+        onClick={(e) => {
+          if (disabled) return
+          e.preventDefault()
+          onCheckedChange?.(!checked)
+        }}
+      >
+        {switchElement}
+
+        {label && (
+          <span
+            className={cn(
+              'ml-3 flex items-center text-sm transition-colors duration-200 ease-in-out',
+              'text-[var(--dashboard-foreground,hsl(var(--foreground)))]',
+            )}
+          >
+            {label}
+
+            {tooltip && (
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <span
+                      className="ml-2 cursor-pointer transition-transform duration-200 ease-in-out"
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      <IconInfoCircle
+                        size={16}
+                        className="text-gray-400 transition-all duration-200 ease-in-out group-hover:text-gray-500 dark:text-gray-300 dark:group-hover:text-gray-200"
+                      />
+                    </span>
+                  </TooltipTrigger>
+                  <TooltipContent
+                    side="bottom"
+                    className="max-w-[220px] bg-[var(--tooltip-background,hsl(var(--popover)))] text-[var(--tooltip,hsl(var(--popover-foreground)))] shadow-lg"
+                  >
+                    <p className="text-sm">{tooltip}</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            )}
+          </span>
+        )}
+      </div>
+    )
+  },
+)
 Switch.displayName = SwitchPrimitives.Root.displayName
 
-export { Switch }
+export {
+  Switch,
+  switchVariants,
+  switchThumbVariants,
+  switchTrackLabelVariants,
+  switchContainerVariants,
+}
+export type { SwitchProps }
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 1a4e5f95d..394645343 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -224,7 +224,7 @@
   --dashboard-background-faded: color-mix(
     in srgb,
     var(--dashboard-background),
-    black 5%
+    black 3%
   );
   --dashboard-background-dark: #ddd; /* color-mix(in srgb, var(--illinois-background-dark), white 5%); */
   --dashboard-background-darker: color-mix(
@@ -242,7 +242,7 @@
   ); /* var(--dashboard-background-faded); */
 
   --dashboard-button-foreground: var(--illinois-white);
-  --dashboard-button: var(--illinois-orange);
+  --dashboard-button: var(--illinois-blue);
   --dashboard-button-hover: color-mix(
     in srgb,
     var(--dashboard-button),
@@ -357,6 +357,19 @@
     black 20%
   );
 
+  --dashboard-button-foreground: var(--illinois-blue);
+  --dashboard-button: var(--illinois-white);
+  --dashboard-button-hover: color-mix(
+    in srgb,
+    var(--dashboard-button),
+    var(--illinois-blue) 20%
+  );
+  --dashboard-table-selected: color-mix(
+    in srgb,
+    var(--dashboard-button),
+    white 20%
+  );
+
   --dashboard-border: color-mix(
     in srgb,
     var(--dashboard-background),