diff --git a/components/ui/Text/Body/Body.tsx b/components/ui/Text/Body/Body.tsx
index f8332092..3dedad95 100644
--- a/components/ui/Text/Body/Body.tsx
+++ b/components/ui/Text/Body/Body.tsx
@@ -1,10 +1,9 @@
 import React from "react";
 import classnames from "classnames";
 import { TextProps } from "../Text";
-import Styles from "../Text.module.css";
 
 const Body: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames(Styles["text--body"], props?.className, props?.color);
+  const classes = classnames("text-lg leading-relaxed text-gray-900 dark:text-white");
 
   return <p className={classes}>{props.children}</p>;
 };
diff --git a/components/ui/Text/Caption/Caption.tsx b/components/ui/Text/Caption/Caption.tsx
index 4dadc57c..95a34054 100644
--- a/components/ui/Text/Caption/Caption.tsx
+++ b/components/ui/Text/Caption/Caption.tsx
@@ -1,10 +1,9 @@
 import React from "react";
 import classnames from "classnames";
 import { TextProps } from "../Text";
-import Styles from "../Text.module.css";
 
 const Caption: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames(Styles["text--caption"], props?.className, props?.color);
+  const classes = classnames("text-sm text-gray-500 dark:text-white leading-tight");
 
   return <p className={classes}>{props.children}</p>;
 };
diff --git a/components/ui/Text/Caption2/Caption2.tsx b/components/ui/Text/Caption2/Caption2.tsx
index ca02e615..ffee176b 100644
--- a/components/ui/Text/Caption2/Caption2.tsx
+++ b/components/ui/Text/Caption2/Caption2.tsx
@@ -1,10 +1,9 @@
 import React from "react";
 import classnames from "classnames";
 import { TextProps } from "../Text";
-import Styles from "../Text.module.css";
 
 const Caption2: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames(Styles["text--caption2"], props?.className, props?.color);
+  const classes = classnames("text-xs italic text-gray-500 dark:text-white leading-tight");
 
   return <p className={classes}>{props.children}</p>;
 };
diff --git a/components/ui/Text/Footnote/Footnote.tsx b/components/ui/Text/Footnote/Footnote.tsx
index 3beda4fa..adf789be 100644
--- a/components/ui/Text/Footnote/Footnote.tsx
+++ b/components/ui/Text/Footnote/Footnote.tsx
@@ -3,7 +3,7 @@ import classnames from "classnames";
 import { TextProps } from "../Text";
 
 const Footnote: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames("text--footnote", props?.className, props?.color);
+  const classes = classnames("text-base font-normal text-gray-900 dark:text-white");
 
   return <p className={classes}>{props.children}</p>;
 };
diff --git a/components/ui/Text/Headline/Headline.tsx b/components/ui/Text/Headline/Headline.tsx
index a7b531a9..7b52dd0e 100644
--- a/components/ui/Text/Headline/Headline.tsx
+++ b/components/ui/Text/Headline/Headline.tsx
@@ -1,10 +1,9 @@
 import React from "react";
 import classnames from "classnames";
 import { TextProps } from "../Text";
-import Styles from "../Text.module.css";
 
 const Headline: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames(Styles["text--headline"], props?.className, props?.color);
+  const classes = classnames("text-xl font-bold text-gray-900 dark:text-white");
 
   return <h1 className={classes}>{props.children}</h1>;
 };
diff --git a/components/ui/Text/Largetitle/Largetitle.tsx b/components/ui/Text/Largetitle/Largetitle.tsx
index 8b0c3271..0451cf4d 100644
--- a/components/ui/Text/Largetitle/Largetitle.tsx
+++ b/components/ui/Text/Largetitle/Largetitle.tsx
@@ -1,10 +1,9 @@
 import React from "react";
 import classnames from "classnames";
 import { TextProps } from "../Text";
-import Styles from "../Text.module.css";
 
 const Largetitle: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames(Styles["text--largetitle"], props?.className, props?.color);
+  const classes = classnames("text-2xl font-normal text-gray-900 dark:text-white");
 
   return <p className={classes}>{props.children}</p>;
 };
diff --git a/components/ui/Text/Overline/Overline.tsx b/components/ui/Text/Overline/Overline.tsx
index 82003351..94196a7b 100644
--- a/components/ui/Text/Overline/Overline.tsx
+++ b/components/ui/Text/Overline/Overline.tsx
@@ -1,10 +1,11 @@
 import React from "react";
 import classnames from "classnames";
 import { TextProps } from "../Text";
-import Styles from "../Text.module.css";
 
 const Overline: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames(Styles["text--overline"], props?.className, props?.color);
+  const classes = classnames(
+    "text-sm uppercase font-semibold leading-snug tracking-wide text-gray-900 dark:text-white"
+  );
 
   return <p className={classes}>{props.children}</p>;
 };
diff --git a/components/ui/Text/Subheadline/Subheadline.tsx b/components/ui/Text/Subheadline/Subheadline.tsx
index 550a955f..535ac74e 100644
--- a/components/ui/Text/Subheadline/Subheadline.tsx
+++ b/components/ui/Text/Subheadline/Subheadline.tsx
@@ -1,10 +1,9 @@
 import React from "react";
 import classnames from "classnames";
 import { TextProps } from "../Text";
-import Styles from "../Text.module.css";
 
 const Subheadline: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames(Styles["text--subheadline"], props?.className, props?.color);
+  const classes = classnames("text-xl text-gray-500 dark:text-white leading-relaxed");
 
   return <p className={classes}>{props.children}</p>;
 };
diff --git a/components/ui/Text/Subtitle/Subtitle.tsx b/components/ui/Text/Subtitle/Subtitle.tsx
index 11065651..302d21f4 100644
--- a/components/ui/Text/Subtitle/Subtitle.tsx
+++ b/components/ui/Text/Subtitle/Subtitle.tsx
@@ -1,10 +1,9 @@
 import React from "react";
 import classnames from "classnames";
 import { TextProps } from "../Text";
-import Styles from "../Text.module.css";
 
 const Subtitle: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames(Styles["text--subtitle"], props?.className, props?.color);
+  const classes = classnames("ext-sm text-neutral-500 dark:text-white");
 
   return <p className={classes}>{props.children}</p>;
 };
diff --git a/components/ui/Text/Text.module.css b/components/ui/Text/Text.module.css
deleted file mode 100644
index c850000e..00000000
--- a/components/ui/Text/Text.module.css
+++ /dev/null
@@ -1,52 +0,0 @@
-/* strong {
-  @apply font-medium;
-} */
-
-.text--body {
-  @apply text-lg leading-relaxed;
-}
-
-.text--overline {
-  @apply text-sm uppercase font-semibold leading-snug tracking-wide;
-}
-
-.text--caption {
-  @apply text-sm text-gray-500 leading-tight;
-}
-
-.text--caption2 {
-  @apply text-xs italic text-gray-500 leading-tight;
-}
-
-.text--footnote {
-  @apply text-base  font-normal;
-}
-
-.text--headline {
-  /* @apply text-base  font-normal; */
-  @apply text-3xl leading-8 font-semibold tracking-tight text-gray-900 sm:text-4xl;
-}
-
-.text--subheadline {
-  @apply text-xl text-gray-500 leading-relaxed;
-}
-
-.text--largetitle {
-  @apply text-2xl  font-normal;
-}
-
-.text--subtitle {
-  @apply text-base  font-normal;
-}
-
-.text--title {
-  @apply text-base  font-normal;
-}
-
-.text--title2 {
-  @apply text-base  font-normal;
-}
-
-.text--title3 {
-  @apply text-xs font-semibold leading-tight;
-}
diff --git a/components/ui/Text/Title/Title.tsx b/components/ui/Text/Title/Title.tsx
index 7ebb409b..1cfd91bb 100644
--- a/components/ui/Text/Title/Title.tsx
+++ b/components/ui/Text/Title/Title.tsx
@@ -1,10 +1,9 @@
 import React from "react";
 import classnames from "classnames";
 import { TextProps } from "../Text";
-import Styles from "../Text.module.css";
 
 const Title: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames(Styles["text--title"], props?.className, props?.color);
+  const classes = classnames("font-medium text-neutral-900 dark:text-white");
 
   return <p className={classes}>{props.children}</p>;
 };
diff --git a/components/ui/Text/Title2/Title2.tsx b/components/ui/Text/Title2/Title2.tsx
index 3534c02e..e2bcd121 100644
--- a/components/ui/Text/Title2/Title2.tsx
+++ b/components/ui/Text/Title2/Title2.tsx
@@ -1,10 +1,9 @@
 import React from "react";
 import classnames from "classnames";
 import { TextProps } from "../Text";
-import Styles from "../Text.module.css";
 
 const Title2: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames(Styles["text--title2"], props?.className, props?.color);
+  const classes = classnames("text-base font-normal text-gray-900 dark:text-white");
 
   return <p className={classes}>{props.children}</p>;
 };
diff --git a/components/ui/Text/Title3/Title3.tsx b/components/ui/Text/Title3/Title3.tsx
index 6f60baed..1b35651b 100644
--- a/components/ui/Text/Title3/Title3.tsx
+++ b/components/ui/Text/Title3/Title3.tsx
@@ -1,10 +1,9 @@
 import React from "react";
 import classnames from "classnames";
 import { TextProps } from "../Text";
-import Styles from "../Text.module.css";
 
 const Title3: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames(Styles["text--title3"], props?.className, props?.color);
+  const classes = classnames("text-xs font-semibold leading-tight text-gray-900 dark:text-white");
 
   return <p className={classes}>{props.children}</p>;
 };