diff --git a/package.json b/package.json
index 39e6a22..2f22cbd 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "@electron-toolkit/utils": "^2.0.0",
     "@prisma/client": "^5.3.1",
     "autoprefixer": "^10.4.16",
+    "daisyui": "^3.8.2",
     "electron-devtools-installer": "^3.2.0",
     "electron-updater": "^6.1.1",
     "postcss": "^8.4.30",
diff --git a/src/db/actions.ts b/src/db/actions.ts
index b89c440..1d9d251 100644
--- a/src/db/actions.ts
+++ b/src/db/actions.ts
@@ -1,4 +1,4 @@
-import { CrateSrc, FilesDirectory } from '@prisma/client'
+import { CrateSrc, FilesDirectory, Prisma } from '@prisma/client'
 import { DatabaseOperationResult } from '@src/types'
 import { prisma } from './prismaClient'
 
@@ -28,7 +28,12 @@ export const createFilesDirectory = async (
     console.log({ directory })
     return { success: true, data: directory }
   } catch (error) {
-    console.error({ error })
+    if (error instanceof Prisma.PrismaClientKnownRequestError) {
+      if (error.code === 'P2002') {
+        return { success: false, error: 'Directory already exists' }
+      }
+    }
+
     return { success: false, error: (error as { message: string }).message }
   }
 }
diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index ee2fc32..fa19107 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -6,7 +6,7 @@ import Duplicates from './components/Duplicates'
 function App(): JSX.Element {
   return (
     <MainProvider>
-      <div className="container">
+      <div data-theme="luxury">
         <CratesList />
         <DirectoriesList />
         <Duplicates />
diff --git a/src/renderer/src/assets/index.css b/src/renderer/src/assets/index.css
index ce07cc1..7a3aa11 100644
--- a/src/renderer/src/assets/index.css
+++ b/src/renderer/src/assets/index.css
@@ -26,185 +26,3 @@ body {
   margin: 0;
 }
 
-ul {
-  list-style: none;
-}
-
-code {
-  font-weight: 600;
-  padding: 3px 5px;
-  border-radius: 2px;
-  background-color: #26282e;
-  font-family:
-    ui-monospace,
-    SFMono-Regular,
-    SF Mono,
-    Menlo,
-    Consolas,
-    Liberation Mono,
-    monospace;
-  font-size: 85%;
-}
-
-a {
-  color: #9feaf9;
-  font-weight: 600;
-  cursor: pointer;
-  text-decoration: none;
-  outline: none;
-}
-
-a:hover {
-  border-bottom: 1px solid;
-}
-
-.container {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  max-width: 840px;
-  margin: 0 auto;
-  padding: 15px 30px 0 30px;
-}
-
-.versions {
-  margin: 0 auto;
-  float: none;
-  clear: both;
-  overflow: hidden;
-  font-family: 'Menlo', 'Lucida Console', monospace;
-  color: #c2f5ff;
-  line-height: 1;
-  transition: all 0.3s;
-}
-
-.versions li {
-  display: block;
-  float: left;
-  border-right: 1px solid rgba(194, 245, 255, 0.4);
-  padding: 0 20px;
-  font-size: 13px;
-  opacity: 0.8;
-}
-
-.versions li:last-child {
-  border: none;
-}
-
-.hero-logo {
-  margin-top: -0.4rem;
-  transition: all 0.3s;
-}
-
-@media (max-width: 840px) {
-  .versions {
-    display: none;
-  }
-
-  .hero-logo {
-    margin-top: -1.5rem;
-  }
-}
-
-.hero-text {
-  font-weight: 400;
-  color: #c2f5ff;
-  text-align: center;
-  margin-top: -0.5rem;
-  margin-bottom: 10px;
-}
-
-@media (max-width: 660px) {
-  .hero-logo {
-    display: none;
-  }
-
-  .hero-text {
-    margin-top: 20px;
-  }
-}
-
-.hero-tagline {
-  text-align: center;
-  margin-bottom: 14px;
-}
-
-.links {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 24px;
-  font-size: 18px;
-  font-weight: 500;
-}
-
-.links a {
-  font-weight: 500;
-}
-
-.links .link-item {
-  padding: 0 4px;
-}
-
-.features {
-  display: flex;
-  flex-wrap: wrap;
-  margin: -6px;
-}
-
-.features .feature-item {
-  width: 33.33%;
-  box-sizing: border-box;
-  padding: 6px;
-}
-
-.features article {
-  background-color: rgba(194, 245, 255, 0.1);
-  border-radius: 8px;
-  box-sizing: border-box;
-  padding: 12px;
-  height: 100%;
-}
-
-.features span {
-  color: #d4e8ef;
-  word-break: break-all;
-}
-
-.features .title {
-  font-size: 17px;
-  font-weight: 500;
-  color: #c2f5ff;
-  line-height: 22px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.features .detail {
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 22px;
-  margin-top: 6px;
-}
-
-@media (max-width: 660px) {
-  .features .feature-item {
-    width: 50%;
-  }
-}
-
-@media (max-width: 480px) {
-  .links {
-    flex-direction: column;
-    line-height: 32px;
-  }
-
-  .links .link-dot {
-    display: none;
-  }
-
-  .features .feature-item {
-    width: 100%;
-  }
-}
diff --git a/src/renderer/src/components/CratesList.tsx b/src/renderer/src/components/CratesList.tsx
index 9bbea05..f4c953b 100644
--- a/src/renderer/src/components/CratesList.tsx
+++ b/src/renderer/src/components/CratesList.tsx
@@ -58,7 +58,9 @@ function App(): JSX.Element {
 
   return (
     <div className="container">
-      <button onClick={openCrateDialog}>Set Crate Path</button>
+      <button className="btn btn-primary" onClick={openCrateDialog}>
+        Set Crate Path
+      </button>
       {(crates || []).map((crate) => (
         <div className="text-2xl" key={crate.id}>
           {crate.path}
diff --git a/src/renderer/src/components/DirectoriesList.tsx b/src/renderer/src/components/DirectoriesList.tsx
index fece25d..43bbbf7 100644
--- a/src/renderer/src/components/DirectoriesList.tsx
+++ b/src/renderer/src/components/DirectoriesList.tsx
@@ -33,7 +33,7 @@ export const useFetchDirectories = (): {
 
 function DirectoriesList(): JSX.Element {
   const { state, dispatch } = useMain()
-  const [error, setError] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null) // create directory error
 
   const { status, reset, fetchData, message } = useFetchDirectories()
   useIpcListener(NEW_FILES_DIRECTORY, (res: DatabaseOperationResult<FilesDirectory>) => {
@@ -61,10 +61,9 @@ function DirectoriesList(): JSX.Element {
       return <div>Loading...</div>
     }
 
-    if (status === 'error' || error) {
+    if (status === 'error') {
       return (
         <div>
-          {/* TODO: need to refactor as this try again calls wrong function */}
           <button onClick={reset}>Try again</button>
           <div>{message ?? error ?? ''}</div>
         </div>
@@ -84,6 +83,7 @@ function DirectoriesList(): JSX.Element {
     <div className="container">
       <button onClick={openFilesDirectoryDialog}>Set Directory Path</button>
       {renderList()}
+      {error && <div>{error}</div>}
     </div>
   )
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index f47e155..e290fd1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,8 +1,12 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./src/renderer/index.html', './src/renderer/src/**/*.{js,jsx,ts,tsx}'],
+  darkMode: 'class',
+  daisyui: {
+    themes: ['luxury']
+  },
   theme: {
     extend: {}
   },
-  plugins: []
+  plugins: [require('daisyui')]
 }
diff --git a/yarn.lock b/yarn.lock
index 5c1ca36..589519e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1364,6 +1364,11 @@ color-name@~1.1.4:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
+colord@^2.9:
+  version "2.9.3"
+  resolved "https://registry.yarnpkg.com/colord/-/colord-2.9.3.tgz#4f8ce919de456f1d5c1c368c307fe20f3e59fb43"
+  integrity sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==
+
 combined-stream@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
@@ -1430,6 +1435,14 @@ cross-spawn@^7.0.1, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
+css-selector-tokenizer@^0.8:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz#88267ef6238e64f2215ea2764b3e2cf498b845dd"
+  integrity sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==
+  dependencies:
+    cssesc "^3.0.0"
+    fastparse "^1.1.2"
+
 cssesc@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
@@ -1440,6 +1453,17 @@ csstype@^3.0.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
   integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
 
+daisyui@^3.8.2:
+  version "3.8.2"
+  resolved "https://registry.yarnpkg.com/daisyui/-/daisyui-3.8.2.tgz#196e2fb27a0dbf8a3957bbc1ae828c8a874dc9b0"
+  integrity sha512-Dxq4AzYPfUOhrqqs1wdKLE4GUVGc3mJf8asdY7AHoI5QVBgqItU3fsd1idpHDnOJNdaTHmZGo0jvQtXr5IOejw==
+  dependencies:
+    colord "^2.9"
+    css-selector-tokenizer "^0.8"
+    postcss "^8"
+    postcss-js "^4"
+    tailwindcss "^3"
+
 debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
@@ -2045,6 +2069,11 @@ fast-levenshtein@^2.0.6:
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
 
+fastparse@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.2.tgz#91728c5a5942eced8531283c79441ee4122c35a9"
+  integrity sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==
+
 fastq@^1.6.0:
   version "1.15.0"
   resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.15.0.tgz#d04d07c6a2a68fe4599fea8d2e103a937fae6b3a"
@@ -3332,7 +3361,7 @@ postcss-import@^15.1.0:
     read-cache "^1.0.0"
     resolve "^1.1.7"
 
-postcss-js@^4.0.1:
+postcss-js@^4, postcss-js@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.1.tgz#61598186f3703bab052f1c4f7d805f3991bee9d2"
   integrity sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==
@@ -3367,6 +3396,15 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
+postcss@^8:
+  version "8.4.31"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
+  integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
+  dependencies:
+    nanoid "^3.3.6"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 postcss@^8.4.23, postcss@^8.4.27, postcss@^8.4.30:
   version "8.4.30"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.30.tgz#0e0648d551a606ef2192a26da4cabafcc09c1aa7"
@@ -3918,7 +3956,7 @@ synckit@^0.8.5:
     "@pkgr/utils" "^2.3.1"
     tslib "^2.5.0"
 
-tailwindcss@^3.3.3:
+tailwindcss@^3, tailwindcss@^3.3.3:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.3.tgz#90da807393a2859189e48e9e7000e6880a736daf"
   integrity sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==