diff --git a/app/src/client/App.tsx b/app/src/client/App.tsx
index 245eb068..18ff9812 100644
--- a/app/src/client/App.tsx
+++ b/app/src/client/App.tsx
@@ -130,7 +130,7 @@ export default function App({ children }: { children: ReactNode }) {
         ) : (
           <div className='relative flex flex-col min-h-screen justify-between'>
             {shouldDisplayAppNavBar && <AppNavBar />}
-            <div className='mx-auto max-w-7xl sm:px-6 lg:px-8 w-full'>
+            <div className='mx-auto max-w-7xl sm:px-6 lg:px-8 w-full z-10'>
               {isError ? (
                 children
               ) : isLoading ? (
diff --git a/app/src/client/Main.css b/app/src/client/Main.css
index b040569f..c5b69b4f 100644
--- a/app/src/client/Main.css
+++ b/app/src/client/Main.css
@@ -97,10 +97,10 @@ code {
 
 /* When the checkbox is checked, add a blue background */
 .toc-marketing-checkbox-wrapper .checkbox-container input:checked ~ .checkmark {
-  background-color: #6faabc;
+  background-color: #0080FF;
 }
 .toc-marketing-checkbox-wrapper.light .checkbox-container input:checked ~ .checkmark {
-  background-color: #fff;
+  background-color: #0080FF;
 }
 
 /* Create the checkmark/indicator (hidden when not checked) */
diff --git a/app/src/client/app/AccountPage.tsx b/app/src/client/app/AccountPage.tsx
index 1c4d08ef..01f7986d 100644
--- a/app/src/client/app/AccountPage.tsx
+++ b/app/src/client/app/AccountPage.tsx
@@ -11,38 +11,38 @@ const AccountPage = ({ user }: { user: User }) => {
   return (
     <div className='mt-10 px-6'>
       <div className='overflow-hidden border border-airt-primary shadow-lg sm:rounded-lg lg:m-8 dark:border-gray-100/10'>
-        <div className='px-4 py-5 sm:px-6 lg:px-8'>
-          <h3 className='text-base font-semibold leading-6 text-airt-font-base dark:text-white'>Account Information</h3>
+        <div className='px-4 py-5 sm:px-6 lg:px-8 bg-airt-font-base'>
+          <h3 className='text-base font-semibold leading-6 text-airt-dark-blue dark:text-white'>Account Information</h3>
         </div>
-        <div className='border-t border-airt-primary dark:border-gray-100/10 px-4 py-5 sm:p-0'>
+        <div className='border-t border-airt-primary bg-airt-font-base dark:border-gray-100/10 px-4 py-5 sm:p-0'>
           <dl className=' sm:dark:divide-gray-100/10'>
             {!!user.email && (
               <div className='py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6'>
-                <dt className='text-sm font-medium text-airt-font-base dark:text-white'>Email address</dt>
-                <dd className='mt-1 text-sm text-airt-font-base dark:text-airt-font-base sm:col-span-2 sm:mt-0'>
+                <dt className='text-sm font-medium text-airt-dark-blue dark:text-white'>Email address</dt>
+                <dd className='mt-1 text-sm text-airt-dark-blue dark:text-airt-dark-blue sm:col-span-2 sm:mt-0'>
                   {user.email}
                 </dd>
               </div>
             )}
             {!!user.username && (
               <div className='py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6'>
-                <dt className='text-sm font-medium text-airt-font-base dark:text-white'>Username</dt>
-                <dd className='mt-1 text-sm text-airt-font-base dark:text-airt-font-base sm:col-span-2 sm:mt-0'>
+                <dt className='text-sm font-medium text-airt-dark-blue dark:text-white'>Username</dt>
+                <dd className='mt-1 text-sm text-airt-dark-blue dark:text-airt-dark-blue sm:col-span-2 sm:mt-0'>
                   {user.username}
                 </dd>
               </div>
             )}
             {/* <div className='py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6'>
-              <dt className='text-sm font-medium text-airt-font-base dark:text-white '>Subscription status</dt>
+              <dt className='text-sm font-medium text-airt-dark-blue dark:text-white '>Subscription status</dt>
               {user.hasPaid ? (
                 <>
                   {user.subscriptionStatus !== 'past_due' ? (
-                    <dd className='mt-1 text-sm font-medium text-airt-font-base dark:text-white sm:col-span-1 sm:mt-0'>
+                    <dd className='mt-1 text-sm font-medium text-airt-dark-blue dark:text-white sm:col-span-1 sm:mt-0'>
 
                       Active
                     </dd>
                   ) : (
-                    <dd className='mt-1 text-sm text-airt-font-base dark:text-airt-font-base sm:col-span-1 sm:mt-0'>
+                    <dd className='mt-1 text-sm text-airt-dark-blue dark:text-airt-dark-blue sm:col-span-1 sm:mt-0'>
                       Your Account is Past Due! Please Update your Payment Information
                     </dd>
                   )}
@@ -50,7 +50,7 @@ const AccountPage = ({ user }: { user: User }) => {
                 </>
               ) : (
                 <>
-                  <dd className='mt-1 text-sm font-medium text-airt-font-base dark:text-white sm:col-span-1 sm:mt-0'>
+                  <dd className='mt-1 text-sm font-medium text-airt-dark-blue dark:text-white sm:col-span-1 sm:mt-0'>
                     N/A
                   </dd>
                   <div className='flex items-center justify-left -mt-2'>
@@ -60,7 +60,7 @@ const AccountPage = ({ user }: { user: User }) => {
               )}
             </div> */}
             <div className='py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6'>
-              <dt className='text-sm font-medium text-airt-font-base'>I agree to receiving marketing emails</dt>
+              <dt className='text-sm font-medium text-airt-dark-blue'>I agree to receiving marketing emails</dt>
               <>
                 <MarketingEmailPreferenceSwitcher
                   hasSubscribedToMarketingEmails={user.hasSubscribedToMarketingEmails}
@@ -70,7 +70,7 @@ const AccountPage = ({ user }: { user: User }) => {
           </dl>
         </div>
       </div>
-      <div className='inline-flex w-full justify-end'>
+      <div className='inline-flex w-full justify-end mb-5 pr-8'>
         <Button onClick={logout} label='logout' />
       </div>
     </div>
@@ -96,7 +96,7 @@ function BuyMoreButton() {
 //     <div className='ml-4 flex-shrink-0 sm:col-span-1 sm:mt-0'>
 //       <button
 //         onClick={handleClick}
-//         className='font-medium text-sm text-airt-font-base dark:text-white hover:underline dark:text-indigo-400 dark:hover:text-indigo-300'
+//         className='font-medium text-sm text-airt-dark-blue dark:text-white hover:underline dark:text-indigo-400 dark:hover:text-indigo-300'
 //       >
 //         Manage Subscription
 //       </button>
diff --git a/app/src/client/app/PlayGroundPage.tsx b/app/src/client/app/PlayGroundPage.tsx
index e324e906..688e3aec 100644
--- a/app/src/client/app/PlayGroundPage.tsx
+++ b/app/src/client/app/PlayGroundPage.tsx
@@ -182,7 +182,7 @@ const PlayGroundPage = ({ user }: { user: User }) => {
           <div className='flex-1 overflow-hidden'>
             {conversations && conversations.length > 0 ? (
               <>
-                <p className='text-center text-lg font-bold bg-airt-primary text-airt-font-base'>
+                <p className='text-center text-lg font-bold bg-airt-dark-blue text-airt-font-base'>
                   Chatting with{' '}
                   <a className='text-airt-secondary hover:underline hover:cursor-pointer' onClick={handleTeamClick}>
                     {currentChatDetails.selectedTeam}
diff --git a/app/src/client/app/PricingPage.tsx b/app/src/client/app/PricingPage.tsx
index 21dd83a9..17b08b9c 100644
--- a/app/src/client/app/PricingPage.tsx
+++ b/app/src/client/app/PricingPage.tsx
@@ -62,8 +62,8 @@ const PricingPage = () => {
       <div className='mx-auto max-w-7xl px-6 lg:px-8'>
         <div id='pricing' className='mx-auto max-w-4xl text-center'>
           <h2 className='mt-2 text-4xl font-bold tracking-tight text-airt-font-base sm:text-5xl dark:airt-font-base'>
-            <span className='text-airt-primary'>Coming soon,</span>{' '}
-            <span className='px-2 py-1 bg-airt-primary rounded-md text-airt-font-base'>
+            <span className='text-airt-font-base'>Coming soon,</span>{' '}
+            <span className='px-2 py-1 bg-airt-dark-blue rounded-md text-airt-font-base'>
               everything is free for now!
             </span>
           </h2>
diff --git a/app/src/client/app/PrivacyPage.tsx b/app/src/client/app/PrivacyPage.tsx
index 43f24b3c..635927c2 100644
--- a/app/src/client/app/PrivacyPage.tsx
+++ b/app/src/client/app/PrivacyPage.tsx
@@ -111,7 +111,7 @@ export default function PrivacyPage() {
                 // href="https://myaccount.google.com/permissions‍"
                 href='https://myaccount.google.com/connections'
                 target='_black'
-                className='no-underline hover:underline text-airt-primary'
+                className='no-underline hover:underline text-airt-dark-blue'
               >
                 https://myaccount.google.com/permissions‍
               </a>
@@ -126,7 +126,7 @@ export default function PrivacyPage() {
               <a
                 href='https://developers.google.com/terms/api-services-user-data-policy'
                 target='_blank'
-                className='no-underline hover:underline text-airt-primary'
+                className='no-underline hover:underline text-airt-dark-blue'
               >
                 Google API Services User Data Policy
               </a>
@@ -147,7 +147,7 @@ export default function PrivacyPage() {
                 <a
                   href='https://developers.google.com/analytics/devguides/config/admin/v1'
                   target='_blank'
-                  className='no-underline hover:underline text-airt-primary'
+                  className='no-underline hover:underline text-airt-dark-blue'
                 >
                   https://developers.google.com/analytics/devguides/config/admin/v1
                 </a>{' '}
@@ -159,7 +159,7 @@ export default function PrivacyPage() {
                 <a
                   href='https://developers.google.com/google-ads/api/docs/oauth/internals'
                   target='_blank'
-                  className='no-underline hover:underline text-airt-primary'
+                  className='no-underline hover:underline text-airt-dark-blue'
                 >
                   https://developers.google.com/google-ads/api/docs/oauth/internals
                 </a>{' '}
@@ -170,7 +170,7 @@ export default function PrivacyPage() {
                 <a
                   href='https://developers.google.com/webmaster-tools/v1/sites/get'
                   target='_blank'
-                  className='no-underline hover:underline text-airt-primary'
+                  className='no-underline hover:underline text-airt-dark-blue'
                 >
                   https://developers.google.com/webmaster-tools/v1/sites/get
                 </a>{' '}
@@ -248,7 +248,7 @@ export default function PrivacyPage() {
               <a
                 href='https://learn.microsoft.com/en-us/azure/compliance/'
                 target='_blank'
-                className='no-underline hover:underline text-airt-primary'
+                className='no-underline hover:underline text-airt-dark-blue'
               >
                 https://learn.microsoft.com/en-us/azure/compliance/
               </a>
@@ -367,7 +367,7 @@ export default function PrivacyPage() {
             <h2 className='text-xl font-semibold mb-2'>Contact Us</h2>
             <p className='mb-4'>
               In order to receive further information regarding use of the Site, please contact us at:{' '}
-              <a href='mailto:support@fastagency.ai' className='no-underline hover:underline text-airt-primary'>
+              <a href='mailto:support@fastagency.ai' className='no-underline hover:underline text-airt-dark-blue'>
                 support@fastagency.ai
               </a>
               .
diff --git a/app/src/client/app/TocPage.tsx b/app/src/client/app/TocPage.tsx
index 23b051ee..ce2c2565 100644
--- a/app/src/client/app/TocPage.tsx
+++ b/app/src/client/app/TocPage.tsx
@@ -72,7 +72,7 @@ export default function TocPage() {
             <p className='mb-4'>
               If you have any questions about your FastAgency Studio subscription or these terms, please reach out to us
               at{' '}
-              <a href='mailto:support@fastagency.ai' className='no-underline hover:underline text-airt-primary'>
+              <a href='mailto:support@fastagency.ai' className='no-underline hover:underline text-airt-dark-blue'>
                 support@fastagency.ai
               </a>
               .
@@ -185,7 +185,7 @@ export default function TocPage() {
             <h2 className='text-xl font-semibold mb-2'>Contact Us</h2>
             <p className='mb-4'>
               In order to receive further information regarding use of the Site, please contact us at:{' '}
-              <a href='mailto:support@fastagency.ai' className='no-underline hover:underline text-airt-primary'>
+              <a href='mailto:support@fastagency.ai' className='no-underline hover:underline text-airt-dark-blue'>
                 support@fastagency.ai
               </a>
               .
diff --git a/app/src/client/app/TutorialPage.tsx b/app/src/client/app/TutorialPage.tsx
index fac08464..7ef62830 100644
--- a/app/src/client/app/TutorialPage.tsx
+++ b/app/src/client/app/TutorialPage.tsx
@@ -45,7 +45,7 @@ export default function TutorialPage() {
   return (
     <ChakraProvider>
       <div className='mx-auto max-w-7xl pl-10 pr-10 text-airt-font-base pt-10 pb-24 sm:pb-32 lg:gap-x-8 lg:py-5 lg:px-8'>
-        <h1 className='text-title-md2 font-semibold text-airt-primary dark:text-white my-4'>Tutorials</h1>
+        <h1 className='text-title-md2 font-semibold text-airt-font-base dark:text-white my-4'>Tutorials</h1>
         <div className='rounded-lg border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark min-h-[300px] sm:min-h-[600px]'>
           <div className='p-10'>
             <div className='grid grid-cols-1 md:grid-cols-3 gap-8'>
diff --git a/app/src/client/auth/LoginSignupForm.tsx b/app/src/client/auth/LoginSignupForm.tsx
index f3529cf6..7dbf20d7 100644
--- a/app/src/client/auth/LoginSignupForm.tsx
+++ b/app/src/client/auth/LoginSignupForm.tsx
@@ -170,7 +170,7 @@ export const LoginSignupForm = ({
           {loginFlow === State.Login ? "Don't have an account? " : 'Already have an account? '}
           <Link
             to={loginFlow === State.Login ? '/signup' : '/login'}
-            className='no-underline hover:underline cursor-pointer text-airt-secondary'
+            className='no-underline hover:underline cursor-pointer text-airt-light-red'
           >
             {loginFlow === State.Login ? 'Sign up' : 'Sign in'}
           </Link>
diff --git a/app/src/client/auth/authWrapper.tsx b/app/src/client/auth/authWrapper.tsx
index 672abf56..7aa5fb6c 100644
--- a/app/src/client/auth/authWrapper.tsx
+++ b/app/src/client/auth/authWrapper.tsx
@@ -4,7 +4,7 @@ export function AuthWrapper({ children }: { children: ReactNode }) {
   return (
     <div className='flex min-h-full flex-col justify-center pt-10 sm:px-6 lg:px-8'>
       <div className='sm:mx-auto sm:w-full sm:max-w-md p-4'>
-        <div className='bg-airt-primary p-8 shadow-xl rounded-lg sm:px-7 sm:py-7 dark:bg-white text-airt-font-base'>
+        <div className='bg-airt-font-base p-8 shadow-xl rounded-lg sm:px-7 sm:py-7 dark:bg-white text-airt-dark-blue'>
           <div className='-mt-8'>{children}</div>
         </div>
       </div>
diff --git a/app/src/client/components/ChatForm.tsx b/app/src/client/components/ChatForm.tsx
index f59e407a..0c46bf92 100644
--- a/app/src/client/components/ChatForm.tsx
+++ b/app/src/client/components/ChatForm.tsx
@@ -88,7 +88,7 @@ export default function ChatForm({ handleFormSubmit, currentChatDetails, trigger
             placeholder='Enter your message...'
             minRows={1}
             maxRows={4}
-            className='w-full p-3 text-sm text-white bg-airt-primary rounded-lg focus:outline-none focus:ring-0'
+            className='w-full p-3 text-sm text-airt-dark-blue bg-airt-font-base rounded-lg focus:outline-none focus:ring-0'
             style={{ resize: 'none', lineHeight: '1.5' }}
           />
           <button
@@ -97,12 +97,12 @@ export default function ChatForm({ handleFormSubmit, currentChatDetails, trigger
             className={`absolute right-2 p-1.5 rounded-lg ${
               isInputDisabled() || !message.trim()
                 ? 'bg-gray-300 cursor-not-allowed'
-                : 'bg-secondary hover:opacity-90 cursor-pointer'
+                : 'bg-airt-dark-blue hover:opacity-90 cursor-pointer'
             }`}
             aria-label='Send message'
           >
             <span className=''>
-              <svg width='24' height='24' viewBox='0 0 24 24' fill='none' className='text-airt-primary'>
+              <svg width='24' height='24' viewBox='0 0 24 24' fill='none' className='text-airt-font-base'>
                 <path
                   d='M7 11L12 6L17 11M12 18V7'
                   stroke='currentColor'
diff --git a/app/src/client/components/ChatSidebar.tsx b/app/src/client/components/ChatSidebar.tsx
index ee50d230..e7477ad7 100644
--- a/app/src/client/components/ChatSidebar.tsx
+++ b/app/src/client/components/ChatSidebar.tsx
@@ -99,7 +99,7 @@ const ChatSidebar = ({ sidebarOpen, setSidebarOpen, refetchAllChatDetails }: Cha
   return (
     <aside
       ref={sidebar}
-      className={` border-airt-font-base border-r absolute left-0 top-0 z-9999 flex h-screen w-75 flex-col overflow-y-hidden bg-airt-primary duration-300 ease-linear dark:bg-airt-primary lg:static lg:translate-x-0 ${
+      className={` border-airt-dark-blue border-r absolute left-0 top-0 z-9999 flex h-screen w-75 flex-col overflow-y-hidden bg-airt-font-base duration-300 ease-linear dark:bg-airt-font-base lg:static lg:translate-x-0 ${
         sidebarOpen ? 'translate-x-0' : '-translate-x-full'
       }`}
     >
@@ -130,7 +130,7 @@ const ChatSidebar = ({ sidebarOpen, setSidebarOpen, refetchAllChatDetails }: Cha
       <div>
         <Link
           to='#'
-          className='no-underline mt-7 my-1 mx-4 mb-10 flex items-center justify-left gap-2.5 rounded-md bg-airt-secondary py-4 px-4 text-center font-medium text-airt-primary hover:bg-opacity-90'
+          className='no-underline mt-7 my-1 mx-4 mb-10 flex items-center justify-left gap-2.5 rounded-md bg-airt-dark-blue py-4 px-4 text-center font-medium text-airt-font-base hover:bg-opacity-90'
           onClick={handleCreateNewChat}
         >
           <span>
@@ -176,8 +176,8 @@ const ChatSidebar = ({ sidebarOpen, setSidebarOpen, refetchAllChatDetails }: Cha
                         pathname === '/' && 'bg-gray-700 dark:bg-meta-4'
                       } ${
                         chat.uuid === activeChat
-                          ? 'bg-airt-secondary text-airt-primary hover:bg-airt-font-base hover:text-airt-primary'
-                          : 'text-airt-font-base hover:bg-airt-secondary hover:text-airt-primary'
+                          ? 'bg-airt-dark-blue text-airt-font-base hover:bg-airt-font-base hover:text-airt-dark-blue'
+                          : 'text-airt-dark-blue hover:bg-airt-dark-blue hover:text-airt-font-base'
                       }`}
                     >
                       <svg
diff --git a/app/src/client/components/ConversationList.tsx b/app/src/client/components/ConversationList.tsx
index 2b4e33ae..cbe097a2 100644
--- a/app/src/client/components/ConversationList.tsx
+++ b/app/src/client/components/ConversationList.tsx
@@ -8,7 +8,7 @@ import LetterByLetterDisplay from './LetterByLetterDisplay';
 import RetryConversation from './RetryConversation';
 import AgentConversationHistory from './AgentConversationHistory';
 import AnimatedCharacterLoader from './AnimatedCharacterLoader';
-import logo from '../static/logo.svg';
+import logo from '../static/fa-small-logo.svg';
 
 type ConversationsListProps = {
   conversations: Conversation[];
@@ -35,15 +35,15 @@ export default function ConversationsList({
     <div data-testid='conversations-wrapper' className='w-full'>
       {conversations.map((conversation, idx) => {
         const isUserConversation = conversation.role === 'user';
-        const conversationBgColor = isUserConversation ? 'airt-secondary' : 'airt-primary';
-        const conversationTextColor = isUserConversation ? 'airt-primary' : 'airt-font-base';
+        const conversationBgColor = isUserConversation ? 'airt-font-base' : 'airt-dark-blue';
+        const conversationTextColor = isUserConversation ? 'airt-dark-blue' : 'airt-font-base';
         const conversationLogo = isUserConversation ? (
           <span
             style={{
               alignItems: 'center',
-              background: '#fff',
+              background: '#0080FF',
               borderRadius: '50%',
-              color: '#003257',
+              color: '#FFF',
               display: 'flex',
               flexBasis: '40px',
               flexGrow: '0',
@@ -60,10 +60,7 @@ export default function ConversationsList({
             <span className='inline-block'>You</span>
           </span>
         ) : (
-          <span
-            className='inline-block bg-airt-font-base'
-            style={{ borderRadius: '50%', width: '93%', height: '93%', paddingTop: '3px' }}
-          >
+          <span className='inline-block'>
             <img
               alt='FastAgency Studio logo'
               className='w-full h-full'
@@ -125,13 +122,13 @@ export default function ConversationsList({
                       {!currentChatDetails.isChatTerminated && !currentChatDetails.isExceptionOccured && (
                         <div className='flex'>
                           <button
-                            className='bg-airt-secondary text-airt-primary hover:opacity-90 font-medium rounded-lg text-sm px-3 py-2 m-1 inline-block whitespace-nowrap'
+                            className='bg-airt-font-base text-airt-dark-blue hover:opacity-90 font-medium rounded-lg text-sm px-3 py-2 m-1 inline-block whitespace-nowrap'
                             onClick={() => handleFormSubmit('')}
                           >
                             Auto reply
                           </button>
                           <button
-                            className='bg-airt-secondary text-airt-primary hover:opacity-90 font-medium rounded-lg text-sm px-3 py-2 m-1 inline-block whitespace-nowrap ml-2'
+                            className='bg-airt-font-base text-airt-dark-blue hover:opacity-90 font-medium rounded-lg text-sm px-3 py-2 m-1 inline-block whitespace-nowrap ml-2'
                             onClick={() => handleFormSubmit('exit')}
                           >
                             Exit
diff --git a/app/src/client/components/CustomBreadcrumb.tsx b/app/src/client/components/CustomBreadcrumb.tsx
index 098f3524..a92aa77a 100644
--- a/app/src/client/components/CustomBreadcrumb.tsx
+++ b/app/src/client/components/CustomBreadcrumb.tsx
@@ -31,7 +31,7 @@ const CustomBreadcrumb: React.FC<BreadcrumbProps> = ({
 
   return (
     <div className='px-8 pt-3 pb-5 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between'>
-      <h2 className='text-title-xl font-semibold text-airt-font-base dark:text-white'>{pageName}</h2>
+      <h2 className='text-title-xl font-semibold text-airt-font-base dark:text-white py-3'>{pageName}</h2>
       {propertiesInStack.length > 1 && (
         <Breadcrumb separator='>'>
           {propertiesInStack.map((property, index) => (
@@ -52,7 +52,7 @@ const CustomBreadcrumb: React.FC<BreadcrumbProps> = ({
         </Breadcrumb>
       )}
       {propertiesInStack.length === 0 && (
-        <div className={`${false ? 'hidden' : ''} flex justify-end w-full px-1 py-3`}>
+        <div className={`${false ? 'hidden' : ''} flex justify-end w-full`}>
           <Button onClick={addProperty} label={`Add ${propertyName}`} />
         </div>
       )}
diff --git a/app/src/client/components/Footer.tsx b/app/src/client/components/Footer.tsx
index 71014327..32d33045 100644
--- a/app/src/client/components/Footer.tsx
+++ b/app/src/client/components/Footer.tsx
@@ -6,7 +6,7 @@ import SocialMediaIcons from './SocialMediaIcons';
 
 export default function Footer() {
   return (
-    <div>
+    <div className='z-10'>
       <section className='relative'>
         <div className='w-full'>
           <hr className='border-t border-airt-font-base border-opacity-20 border-t-1' />
diff --git a/app/src/client/components/MarketingEmailPreferenceSwitcher.tsx b/app/src/client/components/MarketingEmailPreferenceSwitcher.tsx
index 66e6dd25..7c46e7e3 100644
--- a/app/src/client/components/MarketingEmailPreferenceSwitcher.tsx
+++ b/app/src/client/components/MarketingEmailPreferenceSwitcher.tsx
@@ -68,7 +68,7 @@ export function MarketingEmailPreferenceSwitcher({
         <button
           onClick={() => handleClick(status)}
           disabled={!hasChanged}
-          className={`mt-4 md:-mt-10 no-underline rounded-md px-3.5 py-2.5 text-sm text-airt-font-base ring-1 ring-inset ring-gray-200  shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:text-airt-font-base bg-airt-primary hover:bg-opacity-85 ${
+          className={`mt-4 md:-mt-10 no-underline rounded-md px-3.5 py-2.5 text-sm text-airt-font-base ring-1 ring-inset ring-gray-200  shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:text-airt-font-base bg-airt-dark-blue hover:bg-opacity-85 ${
             !hasChanged ? 'opacity-40 cursor-not-allowed' : ''
           }`}
         >
diff --git a/app/src/client/components/NotificationBox.tsx b/app/src/client/components/NotificationBox.tsx
index 55f83d4e..bca8e4f8 100644
--- a/app/src/client/components/NotificationBox.tsx
+++ b/app/src/client/components/NotificationBox.tsx
@@ -14,16 +14,14 @@ const NotificationBox: React.FC<NotificationBoxProps> = ({ type, message, onClic
   const isSuccess = type === 'success';
 
   return (
-    <div className='fixed inset-0 flex items-center justify-center z-50 p-16 backdrop-blur-sm bg-airt-font-base/30'>
-      <div className='bg-airt-primary rounded-lg shadow-lg p-8 m-4 max-w-sm mx-auto'>
-        <h2 className='text-xl font-bold mb-4 text-airt-font-base'>{isSuccess ? 'Success' : 'Error'}</h2>
-        <p className='text-airt-font-base'>{message}</p>
+    <div className='fixed inset-0 flex items-center justify-center z-50 p-16 backdrop-blur-sm bg-airt-primary/30'>
+      <div className='bg-airt-font-base rounded-lg shadow-lg p-8 m-4 max-w-sm mx-auto'>
+        <h2 className='text-xl font-bold mb-4 text-airt-dark-blue'>{isSuccess ? 'Success' : 'Error'}</h2>
+        <p className='text-airt-dark-blue'>{message}</p>
         <div className='mt-4 text-right'>
           <button
             onClick={onClick}
-            className={`py-2 px-4 rounded text-airt-font-base focus:outline-none hover:bg-opacity-85 ${
-              isSuccess ? 'bg-airt-secondary' : 'bg-airt-error'
-            }`}
+            className={`py-2 px-4 rounded text-airt-font-base focus:outline-none hover:bg-opacity-85 bg-airt-dark-blue`}
             ref={notificationCancelBtnRef}
           >
             OK
diff --git a/app/src/client/components/SelectTeamToChat.tsx b/app/src/client/components/SelectTeamToChat.tsx
index aaebf9f7..bf7514db 100644
--- a/app/src/client/components/SelectTeamToChat.tsx
+++ b/app/src/client/components/SelectTeamToChat.tsx
@@ -75,12 +75,10 @@ const SelectTeamToChat = ({ userTeams }: any) => {
   return (
     <div className='lg:mx-auto max-w-screen-2xl p-4 md:p-6 2xl:p-10'>
       <div className='w-full lg:min-w-[700px] 2xl:min-w-[1200px]'>
-        <h2 className='mb-6 text-title-md2 font-semibold text-airt-primary'>Enter details to start new chat</h2>
+        <h2 className='mb-6 text-title-md2 font-semibold text-airt-font-base'>Enter details to start new chat</h2>
         <div className='rounded-lg border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark min-h-[300px] sm:min-h-[420px] pt-7'>
           <form onSubmit={handleSubmit} className='px-6.5 py-2'>
-            <label className='text-airt-primary' htmlFor='selectTeam'>
-              Select Team
-            </label>
+            <label htmlFor='selectTeam'>Select Team</label>
             <SelectInput
               id='selectTeam'
               value={team}
@@ -91,7 +89,7 @@ const SelectTeamToChat = ({ userTeams }: any) => {
               isRequired={true}
             />
             {formError.team && <div style={{ color: 'red' }}>{formError.team}</div>}
-            <label className='mt-2  text-airt-primary inline-block' htmlFor='setSystemMessage'>
+            <label className='mt-2 inline-block' htmlFor='setSystemMessage'>
               Message
             </label>
             <TextareaAutosize
@@ -102,7 +100,7 @@ const SelectTeamToChat = ({ userTeams }: any) => {
                 resize: 'none',
               }}
               id='setSystemMessage'
-              className='block rounded w-full h-12 text-sm text-airt-primary bg-airt-font-base focus:outline-none focus:ring-0 focus:border-captn-light-blue'
+              className='block rounded w-full h-12 text-sm bg-airt-font-base focus:outline-none focus:ring-0 focus:border-captn-light-blue'
               placeholder=''
               value={message}
               onChange={handleMessageChange}
@@ -119,7 +117,7 @@ const SelectTeamToChat = ({ userTeams }: any) => {
               </div>
             )}
             <button
-              className='rounded-md mt-2 px-3.5 py-2.5 text-sm bg-airt-primary text-airt-font-base hover:bg-opacity-85 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
+              className='rounded-md mt-2 px-3.5 py-2.5 text-sm bg-airt-dark-blue text-airt-font-base hover:bg-opacity-85 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
               type='submit'
               disabled={isSubmitting || isRedirecting.current}
             >
diff --git a/app/src/client/components/TerminalDisplay.tsx b/app/src/client/components/TerminalDisplay.tsx
index 0b231a72..54cec08b 100644
--- a/app/src/client/components/TerminalDisplay.tsx
+++ b/app/src/client/components/TerminalDisplay.tsx
@@ -55,13 +55,13 @@ const TerminalDisplay: React.FC<TerminalDisplayProps> = ({
   return (
     <div className={`accordion-wrapper terminal ${isMinimized ? 'minimized' : ''}`}>
       <div
-        className={`relative terminal-header ${
-          isMinimized ? 'rounded-lg' : 'rounded-t-lg'
-        } text-airt-font-base p-1 text-right bg-airt-secondary hover:cursor-pointer`}
+        className={`relative terminal-header ${isMinimized ? 'rounded-lg' : 'rounded-t-lg'} ${
+          isModelDeploymentTheme ? 'text-airt-font-base bg-airt-dark-blue' : 'bg-airt-font-base text-airt-dark-blue'
+        }  p-1 text-right hover:cursor-pointer`}
         onClick={() => setIsMinimized(!isMinimized)}
       >
-        <p className='accordion-title text-sm text-left text-airt-primary'>{title}</p>
-        <button className={`absolute right-4 top-4 ${isMinimized ? '' : 'open'} text-sm text-airt-primary `}>
+        <p className='accordion-title text-sm text-left '>{title}</p>
+        <button className={`absolute right-4 top-4 ${isMinimized ? '' : 'open'} text-sm text-font-base `}>
           {isMinimized ? (
             <svg
               xmlns='http://www.w3.org/2000/svg'
@@ -91,12 +91,12 @@ const TerminalDisplay: React.FC<TerminalDisplayProps> = ({
           )}
         </button>
       </div>
-      <div className={`accordion-item rounded-b-lg ${isMinimized ? '' : 'collapsed'}`}>
+      <div className={`accordion-item rounded-b-lg ${isMinimized ? '' : ' border collapsed'}`}>
         <div
           ref={containerRef}
           onScroll={handleUserScroll}
           className={`${
-            isModelDeploymentTheme ? 'text-airt-font-base bg-airt-primary' : 'bg-airt-font-base text-airt-primary'
+            isModelDeploymentTheme ? 'text-airt-dark-blue bg-airt-font-base' : 'bg-airt-font-base text-airt-dark-blue'
           } accordion-content scroll-container p-4 font-mono text-xs overflow-y-auto overflow-x-hidden ${
             isMinimized ? 'hidden' : ''
           }`}
diff --git a/app/src/client/components/TosAndMarketingEmails.tsx b/app/src/client/components/TosAndMarketingEmails.tsx
index a6fd3dc6..55e57d08 100644
--- a/app/src/client/components/TosAndMarketingEmails.tsx
+++ b/app/src/client/components/TosAndMarketingEmails.tsx
@@ -11,8 +11,8 @@ export const Message = styled('div', {
 });
 
 export const MessageError = styled(Message, {
-  background: '#fff',
-  color: '#003257',
+  background: '#0080FF',
+  color: '#FFF',
 });
 
 interface TosAndMarketingEmailsProps {
@@ -30,15 +30,15 @@ const TosAndMarketingEmails: React.FC<TosAndMarketingEmailsProps> = ({
   handleMarketingEmailsChange,
   errorMessage,
 }) => (
-  <div className='toc-marketing-checkbox-wrapper text-airt-font-base'>
+  <div className='toc-marketing-checkbox-wrapper text-airt-dark-blue'>
     <div className='mt-4'>
       <label className='checkbox-container text-sm mb-2' htmlFor='toc'>
         I agree to the{' '}
-        <Link to='/toc' className='no-underline hover:underline text-airt-secondary' target='_blank'>
+        <Link to='/toc' className='no-underline hover:underline text-airt-primary' target='_blank'>
           Terms & Conditions
         </Link>{' '}
         and{' '}
-        <Link to='/privacy' className='no-underline hover:underline text-airt-secondary' target='_blank'>
+        <Link to='/privacy' className='no-underline hover:underline text-airt-primary' target='_blank'>
           Privacy Policy
         </Link>
         <input type='checkbox' id='toc' checked={tocChecked} onChange={handleTocChange} />
diff --git a/app/src/client/components/buildPage/BuildPageTab.tsx b/app/src/client/components/buildPage/BuildPageTab.tsx
index b33e998d..6ad61eda 100644
--- a/app/src/client/components/buildPage/BuildPageTab.tsx
+++ b/app/src/client/components/buildPage/BuildPageTab.tsx
@@ -34,6 +34,7 @@ export const BuildPageTab = ({
     const index = navLinkItems.findIndex((item) => item.componentName === activeProperty);
     setActiveTab(index);
   }, [activeProperty]);
+
   return (
     <Box position='relative' marginBottom='40px'>
       <Tabs size='lg' variant='unstyled' index={activeTab} onChange={setActiveTab}>
diff --git a/app/src/client/components/buildPage/DynamicForm.tsx b/app/src/client/components/buildPage/DynamicForm.tsx
index 30fba07c..fff6cb8f 100644
--- a/app/src/client/components/buildPage/DynamicForm.tsx
+++ b/app/src/client/components/buildPage/DynamicForm.tsx
@@ -165,7 +165,7 @@ export const DynamicForm: React.FC<DynamicFormProps> = ({
             <div className='col-span-full mt-7'>
               <div className='float-right'>
                 <button
-                  className='rounded-md px-3.5 py-2.5 text-sm border border-airt-error text-airt-primary hover:bg-opacity-10 hover:bg-airt-error shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
+                  className='rounded-md px-3.5 py-2.5 text-sm border border-airt-dark-blue text-airt-dark-blue hover:bg-opacity-10 hover:bg-airt-dark-blue shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
                   type='reset'
                   onClick={() => handleCtaAction('cancel')}
                   ref={cancelButtonRef}
@@ -176,7 +176,7 @@ export const DynamicForm: React.FC<DynamicFormProps> = ({
                 <button
                   data-testid='form-submit-button'
                   type='submit'
-                  className={`ml-3 rounded-md px-3.5 py-2.5 text-sm bg-airt-primary text-airt-font-base hover:bg-opacity-85 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 ${
+                  className={`ml-3 rounded-md px-3.5 py-2.5 text-sm bg-airt-dark-blue text-airt-font-base hover:bg-opacity-85 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 ${
                     !canSubmit ? 'cursor-not-allowed disabled' : ''
                   }`}
                   disabled={!canSubmit}
@@ -187,7 +187,7 @@ export const DynamicForm: React.FC<DynamicFormProps> = ({
               {parser?.getFlow() === 'update_model' && (
                 <button
                   type='button'
-                  className='float-left rounded-md px-3.5 py-2.5 text-sm border bg-airt-error text-airt-font-base hover:bg-opacity-80 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
+                  className='float-left rounded-md px-3.5 py-2.5 text-sm border bg-airt-primary text-airt-font-base hover:bg-opacity-80 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
                   disabled={isSubmitting}
                   data-testid='form-cancel-button'
                   onClick={() => handleCtaAction('delete')}
diff --git a/app/src/client/components/buildPage/UserProperty.tsx b/app/src/client/components/buildPage/UserProperty.tsx
index 08a205fd..1247aa88 100644
--- a/app/src/client/components/buildPage/UserProperty.tsx
+++ b/app/src/client/components/buildPage/UserProperty.tsx
@@ -137,7 +137,7 @@ export const UserProperty = memo(
                 ) : (
                   <div className='flex flex-col w-full gap-9 mb-20'>
                     <div className='flex flex-col gap-5.5 px-6.5'>
-                      <h2 className='text-lg font-semibold text-airt-primary mt-6 '>{`${title}`}</h2>
+                      <h2 className='text-lg font-semibold text-airt-dark-blue mt-6 '>{`${title}`}</h2>
                       <div className='relative z-20 bg-white dark:bg-form-input'>
                         {flow === Flow.ADD_MODEL && <ModelSelector parser={parser} updateFormStack={updateFormStack} />}
                         <DynamicForm
diff --git a/app/src/client/components/buildPage/usePropertyManager.ts b/app/src/client/components/buildPage/usePropertyManager.ts
index 3800fdd7..8464dd6e 100644
--- a/app/src/client/components/buildPage/usePropertyManager.ts
+++ b/app/src/client/components/buildPage/usePropertyManager.ts
@@ -167,6 +167,7 @@ export const usePropertyManager = (
   };
 
   const handleCtaAction = async (ctaAction: ctaAction) => {
+    console.log('inside handleCtaAction');
     if (ctaAction === 'cancel') {
       resetAndPopFromStack();
     } else {
diff --git a/app/src/client/static/fa-small-logo.svg b/app/src/client/static/fa-small-logo.svg
new file mode 100644
index 00000000..9215062c
--- /dev/null
+++ b/app/src/client/static/fa-small-logo.svg
@@ -0,0 +1,31 @@
+<svg width="690" height="1000" viewBox="0 0 690 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group" filter="url(#filter0_d_1_3)">
+<g id="Layer 3">
+<g id="Group_2">
+<path id="Vector" d="M683.543 469.8C702.943 656.9 566.943 824.4 379.843 843.8C192.743 863.2 25.2426 727.2 5.84261 540.1C-13.5574 353 122.443 185.5 309.543 166.1C496.643 146.7 664.143 282.7 683.543 469.8Z" fill="black"/>
+<path id="Vector_2" d="M380.043 427.2L428.943 121.4L448.343 0L395.743 111.1L185.143 556.2L171.843 584.3L202.843 581.1L318.643 569.1L271.343 871.8L252.643 991.2L304.543 882L514.443 440.1L527.843 411.9L380.043 427.2Z" fill="black"/>
+<path id="Vector_3" d="M253.443 802.1C228.843 794.6 205.143 784 183.043 770.6C156.043 754.3 131.743 734 110.743 710.4C67.2426 661.4 40.6426 600.9 33.8426 535.4C29.5426 493.5 33.4426 451.9 45.7426 411.9C57.5426 373.2 76.5426 337.7 102.143 306.2C127.743 274.7 158.643 248.9 193.943 229.4C230.543 209.2 270.443 196.8 312.343 192.4C314.143 192.2 315.943 192 317.743 191.9L353.043 188.9L162.643 591.2L312.343 575.7L275.843 808.8L253.443 802V802.1Z" fill="#FFFBD9"/>
+<path id="Vector_4" d="M128.743 615.3L140.443 590.6L319.543 212.2C317.843 212.3 316.143 212.5 314.443 212.7C275.243 216.8 237.943 228.4 203.743 247.2C170.643 265.4 141.743 289.6 117.843 319C93.9426 348.4 76.2427 381.7 65.1427 417.8C53.7427 455.2 49.9427 494 54.0427 533.2C60.3427 594.4 85.2426 650.9 125.943 696.7C145.543 718.8 168.243 737.7 193.543 753C214.243 765.5 236.343 775.4 259.343 782.4L288.143 598.6L128.743 615.1V615.3Z" fill="#FFC800"/>
+<path id="Vector_5" d="M342.343 817.7L538.443 404.8L387.743 420.4L423.043 199.8L445.943 207.7C469.243 215.7 491.643 226.5 512.443 239.8C538.343 256.3 561.643 276.5 581.643 299.8C623.143 348.1 648.543 407.3 655.143 470.9C659.443 512.8 655.443 554.4 643.243 594.4C631.443 633.1 612.443 668.6 586.943 700.1C561.343 731.6 530.443 757.4 495.143 776.9C459.043 796.8 419.843 809.1 378.643 813.7L342.343 817.7ZM591.043 389.1L579.043 414.3L411.743 766.5C433.943 760.9 455.243 752.4 475.443 741.3C506.243 724.4 533.043 701.9 555.343 674.5C577.543 647.1 594.043 616.2 604.343 582.6C614.943 547.9 618.443 511.7 614.643 475.3C611.543 445.1 603.543 416.1 591.043 389.2V389.1ZM455.543 255.3L436.443 374.5L575.443 360.1C568.143 348.3 559.943 337.1 550.743 326.5C533.343 306.2 513.043 288.7 490.543 274.3C479.343 267.1 467.543 260.8 455.443 255.3H455.543Z" fill="#FFFBD9"/>
+<path id="Vector_6" d="M634.943 473.1C628.743 413.6 605.043 358.3 566.243 313.2C547.543 291.4 525.743 272.5 501.543 257.1C482.043 244.6 461.143 234.6 439.343 227.1L412.043 397.6L545.143 383.8L572.343 381L560.643 405.7L376.343 793.6C414.943 789.4 451.543 777.8 485.243 759.2C518.343 741 547.243 716.8 571.143 687.4C595.043 658 612.743 624.7 623.843 588.6C635.243 551.2 639.043 512.4 634.943 473.2" fill="#FFC800"/>
+<path id="Vector_7" d="M344.443 543.4L207.943 557.6L402.643 146L353.943 450.6L491.543 436.4L297.243 845.3L344.443 543.4Z" fill="#E23A2D"/>
+<path id="Vector_8" d="M402.643 146L277.043 527.8L353.943 450.6L402.643 146Z" fill="#F25C49"/>
+<path id="Vector_9" d="M491.543 436.4L353.943 450.6L277.043 527.8L491.543 436.4Z" fill="#F28D86"/>
+<path id="Vector_10" d="M491.543 436.4L409.243 471.5L297.243 845.3L491.543 436.4Z" fill="#F25C49"/>
+<path id="Vector_11" d="M409.243 471.5L344.443 543.4L207.943 557.6L409.243 471.5Z" fill="#C62118"/>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_1_3" x="0" y="0" width="689.385" height="999.2" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1_3"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1_3" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/app/src/shared/constants.ts b/app/src/shared/constants.ts
index 5b0b3cdd..ff606dd6 100644
--- a/app/src/shared/constants.ts
+++ b/app/src/shared/constants.ts
@@ -9,7 +9,7 @@ import { z } from 'zod';
 export const DOCS_URL = 'https://docs.opensaas.sh';
 export const BLOG_URL = 'https://docs.opensaas.sh/blog';
 export const DISCORD_URL = 'https://discord.gg/kJjSGWrknU';
-export const GITHUB_URL = 'https://github.com/airtai/fastagency';
+export const GITHUB_URL = 'https://github.com/airtai/fastagency-studio';
 
 const isDevEnv = process.env.NODE_ENV !== 'production';
 // const customerPortalTestUrl = 'https://billing.stripe.com/p/login/test_4gw7vg40I7vt00wbII'; // TODO: find your test url at https://dashboard.stripe.com/test/settings/billing/portal