diff --git a/app/Home.tsx b/app/Home.tsx
index 2f4677e..f050fb4 100644
--- a/app/Home.tsx
+++ b/app/Home.tsx
@@ -8,19 +8,19 @@ export default function Home() {
     <div className="space-y-10">
       {/* <Header /> */}
       <div className="mx-auto bg-surfacePrimary max-w-7xl px-4 sm:px-6 lg:px-8 pt-20 pb-16 text-center lg:pt-32">
-        <p className="mx-auto -mt-4 max-w-2xl text-lg tracking-tight text-white-700 sm:mt-6">Welcome to
-          <span className="border-b border-dotted border-slate-300"></span>
+        <p className="mx-auto -mt-4 max-w-2xl text-lg tracking-tight text-gray-200 sm:mt-6">Welcome to
+          {/* <span className="border-b border-dotted border-slate-300 ml-2 text-white">ClipJS</span> */}
         </p>
 
-        <h1 className="mx-auto max-w-4xl font-display text-5xl font-medium tracking-tight text-white-900 sm:text-7xl">
+        <h1 className="mx-auto max-w-4xl font-display text-5xl font-medium tracking-tight text-white sm:text-7xl">
           <span className="inline-block">Clip
-            <span className="relative whitespace-nowrap text-white-600">
+            <span className="relative whitespace-nowrap text-yellow-300">
               <svg aria-hidden="true" viewBox="0 0 418 42" className="absolute top-2/3 left-0 h-[0.58em] w-full fill-yellow-300/70" preserveAspectRatio="none"><path d="M203.371.916c-26.013-2.078-76.686 1.963-124.73 9.946L67.3 12.749C35.421 18.062 18.2 21.766 6.004 25.934 1.244 27.561.828 27.778.874 28.61c.07 1.214.828 1.121 9.595-1.176 9.072-2.377 17.15-3.92 39.246-7.496C123.565 7.986 157.869 4.492 195.942 5.046c7.461.108 19.25 1.696 19.17 2.582-.107 1.183-7.874 4.31-25.75 10.366-21.992 7.45-35.43 12.534-36.701 13.884-2.173 2.308-.202 4.407 4.442 4.734 2.654.187 3.263.157 15.593-.78 35.401-2.686 57.944-3.488 88.365-3.143 46.327.526 75.721 2.23 130.788 7.584 19.787 1.924 20.814 1.98 24.557 1.332l.066-.011c1.201-.203 1.53-1.825.399-2.335-2.911-1.31-4.893-1.604-22.048-3.261-57.509-5.556-87.871-7.36-132.059-7.842-23.239-.254-33.617-.116-50.627.674-11.629.54-42.371 2.494-46.696 2.967-2.359.259 8.133-3.625 26.504-9.81 23.239-7.825 27.934-10.149 28.304-14.005.417-4.348-3.529-6-16.878-7.066Z"></path></svg>
               <span className="relative">JS</span></span>
           </span>
         </h1>
 
-        <p className="mx-auto mt-9 max-w-2xl text-lg tracking-tight text-white-700 sm:mt-6">
+        <p className="mx-auto mt-9 max-w-2xl text-lg tracking-tight text-white sm:mt-6">
           <span className="inline-block">Edit your videos from your PC or phone no downloads, no registration, no watermarks.</span>
           <span className="inline-block">Online, Free and Open Source</span>
         </p>
@@ -44,7 +44,7 @@ export default function Home() {
             </Link>
           </div>
           <Link href="https://github.com/mohyware/clip.js" target="_blank"
-            className="rounded-full bg-black border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
+            className="rounded-full bg-black border border-solid border-transparent transition-colors flex items-center justify-center text-white gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -62,7 +62,7 @@ export default function Home() {
       </div>
       {/* Features Section */}
       <div className="space-y-10">
-        <h2 className="mx-auto max-w-4xl text-center font-display text-5xl font-medium tracking-tight text-white-900 sm:text-4xl">
+        <h2 className="mx-auto max-w-4xl text-center font-display text-5xl font-medium tracking-tight text-white sm:text-4xl">
           <span className="inline-block">What Can it do?</span>
         </h2>
 
@@ -82,8 +82,8 @@ export default function Home() {
                 />
               </figure>
               <div className="flex flex-col items-start gap-1">
-                <h5 className="text-base md:text-lg font-medium">{title}</h5>
-                <p className="text-pretty text-sm md:text-base text-text-secondary dark:text-dark-text-secondary">
+                <h5 className="text-base md:text-lg font-medium text-white">{title}</h5>
+                <p className="text-pretty text-sm md:text-base text-gray-300">
                   {description}
                 </p>
               </div>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 3f258c1..4656c46 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -16,6 +16,12 @@ const config: Config = {
       colors: {
         surfacePrimary: "oklch(.141 .005 285.823)",
         darkSurfacePrimary: "oklch(.141 .005 285.823)",
+        'text-primary': '#ffffff',
+        'dark-text-primary': '#ffffff',
+        'text-secondary': '#e2e2e2',
+        'dark-text-secondary': '#e2e2e2',
+        'surface-secondary': '#2a2a2a',
+        'dark-surface-secondary': '#2a2a2a',
       },
       border: {
         DEFAULT: "rgba(128, 128, 128, 0.5)",