diff --git a/public/index.html b/public/index.html
index 89e08a8..e372c68 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="dark">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
@@ -7,7 +7,7 @@
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <title>React App</title>
   </head>
-  <body>
+  <body class="dark:bg-gray-800">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
   </body>
diff --git a/src/App.tsx b/src/App.tsx
index 3d1d69c..cf14b69 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,7 +3,7 @@ import FileBrowser from "./components/FileBrowser"
 
 const App: React.FC = () => {
 	return (
-		<div className="container">
+		<div>
 			<FileBrowser/>
 		</div>
 	)
diff --git a/src/components/Breadcrum.tsx b/src/components/Breadcrum.tsx
index c0d9250..789d6c4 100644
--- a/src/components/Breadcrum.tsx
+++ b/src/components/Breadcrum.tsx
@@ -11,7 +11,7 @@ const Breadcrum: React.FC<Props> = (props) => {
 	const parts = props.path.split("/").filter(e=>e.length > 0)
 
 	return (
-		<ul className="flex text-gray-500 text-lg">
+		<ul className="flex text-gray-500 dark:text-gray-400  text-lg">
 			<li className="inline-flex items-center cursor-pointer">
 				<a onClick={()=>{
 					props.onDirClick?.("/")
diff --git a/src/components/FileBrowser.tsx b/src/components/FileBrowser.tsx
index a1c0349..f3370bc 100644
--- a/src/components/FileBrowser.tsx
+++ b/src/components/FileBrowser.tsx
@@ -101,7 +101,7 @@ const FileBrowser: React.FC = () => {
 	}
 
 	return (
-		<div>
+		<div className="dark:text-gray-300">
 			<FileBrowserContextMenu
 				onSelect={onContextSelect}
 				pasteActive={!!srcID}
@@ -137,14 +137,14 @@ const FileBrowser: React.FC = () => {
 						<div>Loading...</div> // TODO: center
 					}
 					<table className="w-full">
-						<thead className="border-b-2">
+						<thead className="border-b-2 dark:border-gray-900">
 							<tr>
 								<th className="text-left">Name</th>
 								<th className="text-left">Last Modified</th>
 								<th className="text-left">Size</th>
 							</tr>
 						</thead>
-						<tbody className="divide-y">
+						<tbody className="divide-y dark:divide-gray-900">
 
 							{ data?.directorys.map(v => (<FileBrowserElement
 								key={v?.id}
diff --git a/src/components/FileBrowserContextMenu.tsx b/src/components/FileBrowserContextMenu.tsx
index a86cf3f..1356a23 100644
--- a/src/components/FileBrowserContextMenu.tsx
+++ b/src/components/FileBrowserContextMenu.tsx
@@ -28,14 +28,14 @@ const FileBrowserContextMenu: React.FC<Props> = (props) => {
 
 	return (
 		<>
-			<Menu id={CONTEXT_MENU_FILE} animation={false}>
+			<Menu id={CONTEXT_MENU_FILE} animation={false} className="dark:bg-gray-400">
 				<Item onClick={onClick} data={Action.FileDelete} >Delete</Item>
 				<Item onClick={onClick} data={Action.FileCopy} >Copy</Item>
 				<Item onClick={onClick} data={Action.FileMove} >Move</Item>
 				<Separator />
 				<Item onClick={onClick} data={Action.FilePaste} disabled={!props.pasteActive}>Paste</Item>
 			</Menu>
-			<Menu id={CONTEXT_MENU_DIR} animation={false}>
+			<Menu id={CONTEXT_MENU_DIR} animation={false} className="dark:bg-gray-400">
 				<Item onClick={onClick} data={Action.DirDelete} >Delete</Item>
 				<Item onClick={onClick}  >Item 2</Item>
 				<Separator />
diff --git a/src/components/FileBrowserElement.tsx b/src/components/FileBrowserElement.tsx
index b22ba58..c2c3606 100644
--- a/src/components/FileBrowserElement.tsx
+++ b/src/components/FileBrowserElement.tsx
@@ -14,7 +14,7 @@ interface Props {
 const FileBrowserElement: React.FC<Props> = (props) => {
 	return (
 		<tr 
-			className="hover:bg-gray-100 text-lg"
+			className="hover:bg-gray-100 dark:hover:bg-gray-900 text-lg"
 			onClick={()=>{
 				if(props.file){
 					props.onClick?.(props.file)
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index bd2c366..4520b37 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -10,11 +10,11 @@ const Modal: React.FC<Props> = (props) => {
 		<div 
 			className={`${!props.show?"hidden":"" } 
 			fixed z-10 left-0 top-0 w-full h-full 
-			flex justify-center items-center bg-white bg-opacity-80`}
+			flex justify-center items-center bg-white bg-opacity-80  dark:bg-gray-900 dark:bg-opacity-80`}
 			onClick={()=>{
 				props.onCloseClick?.()
 			}}>
-			<div className="bg-white mx-auto p-5 border-2 w-10/12 overflow-hidden max-h-full" onClick={(e)=>{
+			<div className="bg-white dark:bg-gray-800 mx-auto p-5 border-2 dark:border-gray-800 w-10/12 overflow-hidden max-h-full" onClick={(e)=>{
 				e.stopPropagation()
 			}}>
 				{props.children}
diff --git a/tailwind.config.js b/tailwind.config.js
index dfbe2b0..2f97e6e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,6 @@
 module.exports = {
 	purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
-	darkMode: false, // or 'media' or 'class'
+	darkMode: "class", // or 'media' or 'class'
 	theme: {
 		extend: {},
 	},
