diff --git a/apps/shinkai-visor/src/components/create-job/create-job.tsx b/apps/shinkai-visor/src/components/create-job/create-job.tsx
index 84cd35693..f6c4bb82a 100644
--- a/apps/shinkai-visor/src/components/create-job/create-job.tsx
+++ b/apps/shinkai-visor/src/components/create-job/create-job.tsx
@@ -206,6 +206,18 @@ export const CreateJob = () => {
                 </FormItem>
               )}
             />
+            {query.has('context') && (
+              <div className="my-4">
+                <blockquote className="border-l-4 border-gray-200 bg-gray-300 py-2.5 pl-3 pr-3">
+                  <span className="text-gray-80 font-medium">
+                    Your selected text
+                  </span>
+                  <p className="line-clamp-2 h-full text-white">
+                    {query.get('context')}
+                  </p>
+                </blockquote>
+              </div>
+            )}
 
             <FormField
               control={form.control}
@@ -216,23 +228,14 @@ export const CreateJob = () => {
                     <FormattedMessage id="message.one" />
                   </FormLabel>
                   <FormControl>
-                    <div className="flex flex-col space-y-1">
-                      {query.has('context') && (
-                        <blockquote className="bg-secondary-600 mb-5 max-h-28 overflow-hidden border-l-4 border-gray-300 p-4 dark:border-gray-500 dark:bg-gray-800">
-                          <p className="h-full truncate italic dark:text-white">
-                            {query.get('context')}
-                          </p>
-                        </blockquote>
-                      )}
-                      <Textarea
-                        autoFocus
-                        className="resize-none"
-                        placeholder={intl.formatMessage({
-                          id: 'tmwtd',
-                        })}
-                        {...field}
-                      />
-                    </div>
+                    <Textarea
+                      autoFocus
+                      className="resize-none"
+                      placeholder={intl.formatMessage({
+                        id: 'tmwtd',
+                      })}
+                      {...field}
+                    />
                   </FormControl>
 
                   <FormMessage />
diff --git a/apps/shinkai-visor/src/components/edit-inbox-name-dialog/edit-inbox-name-dialog.tsx b/apps/shinkai-visor/src/components/edit-inbox-name-dialog/edit-inbox-name-dialog.tsx
index 7bc344789..7e4d66861 100644
--- a/apps/shinkai-visor/src/components/edit-inbox-name-dialog/edit-inbox-name-dialog.tsx
+++ b/apps/shinkai-visor/src/components/edit-inbox-name-dialog/edit-inbox-name-dialog.tsx
@@ -104,7 +104,7 @@ export const EditInboxNameDialog = ({
               />
             </div>
             <DialogFooter>
-              <div className="flex flex-col gap-2 pt-4">
+              <div className="flex gap-2 pt-4">
                 <Button
                   className="flex-1"
                   onClick={cancel}
diff --git a/apps/shinkai-visor/src/components/iframe-embeder/installed-popup.tsx b/apps/shinkai-visor/src/components/iframe-embeder/installed-popup.tsx
index e929d0836..aa5640b53 100644
--- a/apps/shinkai-visor/src/components/iframe-embeder/installed-popup.tsx
+++ b/apps/shinkai-visor/src/components/iframe-embeder/installed-popup.tsx
@@ -46,7 +46,7 @@ const root = createRoot(container);
 root.render(
   <React.StrictMode>
     <IntlProvider locale={locale} messages={langMessages}>
-      <div className="font-inter bg-secondary-600 bg-app-gradient h-full w-full overflow-hidden p-3 shadow-xl">
+      <div className="font-inter h-full w-full overflow-hidden bg-gray-500 p-3 shadow-xl">
         <InstalledPopup />
       </div>
     </IntlProvider>
diff --git a/apps/shinkai-visor/src/components/installed-popup copy/installed-popup.tsx b/apps/shinkai-visor/src/components/installed-popup copy/installed-popup.tsx
index e929d0836..aa5640b53 100644
--- a/apps/shinkai-visor/src/components/installed-popup copy/installed-popup.tsx	
+++ b/apps/shinkai-visor/src/components/installed-popup copy/installed-popup.tsx	
@@ -46,7 +46,7 @@ const root = createRoot(container);
 root.render(
   <React.StrictMode>
     <IntlProvider locale={locale} messages={langMessages}>
-      <div className="font-inter bg-secondary-600 bg-app-gradient h-full w-full overflow-hidden p-3 shadow-xl">
+      <div className="font-inter h-full w-full overflow-hidden bg-gray-500 p-3 shadow-xl">
         <InstalledPopup />
       </div>
     </IntlProvider>
diff --git a/apps/shinkai-visor/src/components/installed-popup/installed-popup.tsx b/apps/shinkai-visor/src/components/installed-popup/installed-popup.tsx
index 6396052bc..ab61e5ac9 100644
--- a/apps/shinkai-visor/src/components/installed-popup/installed-popup.tsx
+++ b/apps/shinkai-visor/src/components/installed-popup/installed-popup.tsx
@@ -46,7 +46,7 @@ const root = createRoot(container);
 root.render(
   <React.StrictMode>
     <IntlProvider locale={locale} messages={langMessages}>
-      <div className="font-inter bg-secondary-600 bg-app-gradient h-full w-full overflow-hidden p-3 shadow-xl">
+      <div className="font-inter h-full w-full overflow-hidden bg-gray-500 p-3 shadow-xl">
         <InstalledPopup />
       </div>
     </IntlProvider>
diff --git a/apps/shinkai-visor/src/components/welcome/welcome.tsx b/apps/shinkai-visor/src/components/welcome/welcome.tsx
index 437ac7235..3a071cbc0 100644
--- a/apps/shinkai-visor/src/components/welcome/welcome.tsx
+++ b/apps/shinkai-visor/src/components/welcome/welcome.tsx
@@ -1,4 +1,5 @@
-import { Button } from '@shinkai_network/shinkai-ui';
+import { Button, Checkbox } from '@shinkai_network/shinkai-ui';
+import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router';
 
@@ -7,8 +8,11 @@ import { srcUrlResolver } from '../../helpers/src-url-resolver';
 
 export default function Welcome() {
   const history = useHistory();
+  const [acceptedTermsAndContidions, setAcceptedTermsAndContidions] = useState<
+    boolean | 'indeterminate'
+  >(false);
   return (
-    <div className="flex h-full flex-col justify-between">
+    <div className="flex h-full flex-col justify-between gap-3">
       <div>
         <div className="grid place-content-center ">
           <img
@@ -18,7 +22,7 @@ export default function Welcome() {
             src={srcUrlResolver(logo)}
           />
         </div>
-        <div className="-ml-6 -mr-6 pb-6 pt-3">
+        <div className="-ml-6 -mr-6 pt-1">
           <img
             alt="shinkai logo"
             className="animate-spin-slow w-full"
@@ -30,7 +34,41 @@ export default function Welcome() {
           <FormattedMessage id="welcome" />
         </p>
       </div>
+      <div className="flex items-start space-x-2">
+        <Checkbox
+          checked={acceptedTermsAndContidions}
+          id="terms"
+          onCheckedChange={setAcceptedTermsAndContidions}
+        />
+        <label
+          className="inline-block cursor-pointer text-xs leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+          htmlFor="terms"
+        >
+          <span className={'leading-4 tracking-wide'}>
+            By continuing, you agree to our{' '}
+            <a
+              className={'text-blue-400 underline'}
+              href={'https://www.shinkai.com/terms-of-service'}
+              rel="noreferrer"
+              target={'_blank'}
+            >
+              Terms of Service{' '}
+            </a>
+            and{' '}
+            <a
+              className={'block text-blue-400 underline'}
+              href={'https://www.shinkai.com/privacy-policy'}
+              rel="noreferrer"
+              target={'_blank'}
+            >
+              Privacy Policy
+            </a>
+          </span>
+        </label>
+      </div>
+
       <Button
+        disabled={!acceptedTermsAndContidions}
         onClick={() => history.replace('/nodes/connect/method/quick-start')}
       >
         <FormattedMessage id="setup" />
diff --git a/apps/shinkai-visor/src/theme/styles.css b/apps/shinkai-visor/src/theme/styles.css
index 2ecc1df8b..fbfb6a3a1 100644
--- a/apps/shinkai-visor/src/theme/styles.css
+++ b/apps/shinkai-visor/src/theme/styles.css
@@ -14,66 +14,8 @@
       U+2215, U+FEFF, U+FFFD;
   }
 
-  :host,body {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
-
-    --radius: 0.5rem;
-
-    .dark {
-      --background: 222.2 84% 4.9%;
-      --foreground: 210 40% 98%;
-
-      --card: 222.2 84% 4.9%;
-      --card-foreground: 210 40% 98%;
-
-      --popover: 222.2 84% 4.9%;
-      --popover-foreground: 210 40% 98%;
-
-      --primary: 210 40% 98%;
-      --primary-foreground: 222.2 47.4% 11.2%;
-
-      --secondary: 217.2 32.6% 17.5%;
-      --secondary-foreground: 210 40% 98%;
-
-      --muted: 217.2 32.6% 17.5%;
-      --muted-foreground: 215 20.2% 65.1%;
-
-      --accent: 217.2 32.6% 17.5%;
-      --accent-foreground: 210 40% 98%;
-
-      --destructive: 0 62.8% 30.6%;
-      --destructive-foreground: 210 40% 98%;
-
-      --border: 217.2 32.6% 17.5%;
-      --input: 217.2 32.6% 17.5%;
-      --ring: 212.7 26.8% 83.9%;
-    }
+  :host,
+  body {
     .wmde-markdown-var[data-color-mode*='dark'] {
       --color-canvas-default: var(--background);
       --color-fg-default: theme('colors.white');
@@ -82,10 +24,8 @@
   }
 }
 @layer base {
-  * {
-    @apply border-border;
-  }
-  :host, body {
-    @apply bg-background text-foreground;
+  :host,
+  body {
+    @apply bg-gray-500 text-white;
   }
 }
diff --git a/libs/shinkai-ui/src/components/input.tsx b/libs/shinkai-ui/src/components/input.tsx
index b79fe6dc5..597d0fe5c 100644
--- a/libs/shinkai-ui/src/components/input.tsx
+++ b/libs/shinkai-ui/src/components/input.tsx
@@ -13,7 +13,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           'h-input peer w-full rounded-lg border border-gray-200 bg-gray-400 px-4 py-3 pt-8 text-sm font-medium text-white placeholder-transparent outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-gray-200 focus:border focus:border-gray-100 focus:outline-0 disabled:border-0 disabled:bg-gray-300 disabled:text-gray-100',
           className,
         )}
-        placeholder=""
+        placeholder=" "
         ref={ref}
         type={type}
         {...props}
diff --git a/libs/shinkai-ui/src/shinkai-preset.js b/libs/shinkai-ui/src/shinkai-preset.js
index 0be38438e..ad67d5906 100644
--- a/libs/shinkai-ui/src/shinkai-preset.js
+++ b/libs/shinkai-ui/src/shinkai-preset.js
@@ -5,16 +5,12 @@ const defaultTheme = require('tailwindcss/defaultTheme');
 module.exports = {
   content: [],
   darkMode: ['class'],
-
   theme: {
     container: {
       center: true,
       padding: '2rem',
-      screens: {
-        '2xl': '1400px',
-      },
+      screens: { '2xl': '1400px' },
     },
-
     extend: {
       height: {
         input: '59px',
@@ -35,7 +31,7 @@ module.exports = {
         red: {
           DEFAULT: 'hsla(0, 63%, 51%, 1)',
         },
-        // TODO: remove
+        // TODO: remove tray
         primary: {
           600: '#FF7E7F',
           700: '#FF5E5F',
@@ -46,31 +42,6 @@ module.exports = {
         },
         foreground: '#FFFFFF',
         'muted-foreground': '#c7c7c7',
-        // TODO: remove visor
-        destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))',
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
-        },
-        popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))',
-        },
-        card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))',
-        },
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        background: 'hsl(var(--background))',
       },
       border: {
         input: 'hsl(var(--input))',