diff --git a/ui/src/components/core/color-picker/color-picker.tsx b/ui/src/components/core/color-picker/color-picker.tsx
index 3e4cb05..37a6c9a 100644
--- a/ui/src/components/core/color-picker/color-picker.tsx
+++ b/ui/src/components/core/color-picker/color-picker.tsx
@@ -44,10 +44,7 @@ export const ColorPicker: React.FC<ColorPickerProps> = ({
           {/* TODO crate color picker component */}
           <Button
             leftIcon={
-              <Icon
-                name="square"
-                css={{ color: `${logoColor || '#000000'}` }}
-              />
+              <Icon name="square" css={{ color: `${logoColor || '$black'}` }} />
             }
             rightIcon={
               <Icon name="chevron-down" css={{ fontSize: '0.625rem' }} />
diff --git a/ui/src/components/layout/nav-bar/nav-bar.styles.ts b/ui/src/components/layout/nav-bar/nav-bar.styles.ts
index 0ccacba..eb0370f 100644
--- a/ui/src/components/layout/nav-bar/nav-bar.styles.ts
+++ b/ui/src/components/layout/nav-bar/nav-bar.styles.ts
@@ -11,7 +11,7 @@ export abstract class NavBarStyles {
     right: 0,
     display: 'flex',
     alignItems: 'center',
-    backgroundColor: 'black',
+    backgroundColor: '$black',
     zIndex: '$sticky',
     height: '$22',
   });
diff --git a/ui/src/components/nfa-card/nfa-card.styles.ts b/ui/src/components/nfa-card/nfa-card.styles.ts
index 9e3ca44..11cca30 100644
--- a/ui/src/components/nfa-card/nfa-card.styles.ts
+++ b/ui/src/components/nfa-card/nfa-card.styles.ts
@@ -34,7 +34,7 @@ export const NFACardStyles = {
     padding: '$3 $4',
     gap: '$2',
     borderTop: '1px solid $slate6',
-    backgroundColor: 'black', // TODO: are we going to add black as theme color?
+    backgroundColor: '$black',
   }),
   Badge: styled('span', {
     height: 'fit-content',
diff --git a/ui/src/theme/themes.ts b/ui/src/theme/themes.ts
index 21a9c49..c42f9c7 100644
--- a/ui/src/theme/themes.ts
+++ b/ui/src/theme/themes.ts
@@ -59,6 +59,7 @@ export const createDripStitches = <
     },
     theme: {
       colors: {
+        black: '#000000',
         ...darkColors, // TODO: replace with light colors once it's done the light mode
         ...(theme?.colors || {}),
       },
diff --git a/ui/src/views/explore/explore.tsx b/ui/src/views/explore/explore.tsx
index 0f6236e..c36872e 100644
--- a/ui/src/views/explore/explore.tsx
+++ b/ui/src/views/explore/explore.tsx
@@ -1,6 +1,6 @@
 import { Explore as ES } from './explore.styles';
 import { Header } from './header';
-import { ListNfas } from './list-nfas/list-nfas';
+import { ListNfas } from './list-nfas';
 
 export const Explore: React.FC = () => {
   return (
diff --git a/ui/src/views/explore/list-nfas/index.ts b/ui/src/views/explore/list-nfas/index.ts
index e69de29..acea138 100644
--- a/ui/src/views/explore/list-nfas/index.ts
+++ b/ui/src/views/explore/list-nfas/index.ts
@@ -0,0 +1 @@
+export * from './list-nfas';