diff --git a/.gitmodules b/.gitmodules
new file mode 100644
index 0000000..3963e6d
--- /dev/null
+++ b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "static/img/icons/catppuccin-icons"]
+	path = static/img/icons/catppuccin-icons
+	url = https://github.com/catppuccin/vscode-icons/
diff --git a/src/components/Directory/Directory.tsx b/src/components/Directory/Directory.tsx
index 2358c9e..b061b3e 100644
--- a/src/components/Directory/Directory.tsx
+++ b/src/components/Directory/Directory.tsx
@@ -1,9 +1,5 @@
 {/* <img src='/img/icons/folder.svg' alt="" /> */ }
 
-import { default as FolderIcon } from '@site/static/img/icons/folder.svg'
-import { default as FileIcon } from '@site/static/img/icons/file.svg'
-import { default as EnvIcon } from '@site/static/img/icons/env.svg'
-
 type HighlightProp = { highlight: boolean }
 
 interface DirectoryProps {
@@ -17,10 +13,45 @@ interface FolderProps extends HighlightProp {
 
 interface FileProps extends HighlightProp {
   name: string
+  icon?: string
 }
 
 const iconSize = 20
 
+const STATIC_FILENAME_ICON = {
+  ".gitignore": "git",
+  ".gitmodules": "git",
+  ".gitkeep": "git",
+  "package-lock.json": "package-json.svg",
+  "README": "readme",
+  "README.md": "readme"
+}
+
+const EXT_FILENAME_ICON = {
+  "js": "javascript",
+  "py": "python",
+  "json": "json",
+  "png": "image",
+  "html": "html",
+  "css": "css",
+  "env": "env"
+}
+
+function getIconFromName(name: string) {
+  if(STATIC_FILENAME_ICON[name]) return STATIC_FILENAME_ICON[name]
+
+  const ext = name.split(".").pop()
+  if(EXT_FILENAME_ICON[ext]) return EXT_FILENAME_ICON[ext]
+
+  return "_file"
+}
+
+function Icon({ name, width, height }) {
+  return (
+    <img width={width} height={height} src={require(`@site/static/img/icons/catppuccin-icons/icons/mocha/${name}.svg`).default} />
+  )
+}
+
 function Directory({ children }: DirectoryProps) {
   return (
     <div className="w-full sm:max-w-[220px] py-2 overflow-hidden border-2 rounded-2xl border-solid border-ctp-surface0 bg-ctp-mantle text-ctp-text text-sm [&_svg]:fill-ctp-text">
@@ -41,7 +72,7 @@ function Folder({ name, children, highlight = false }: FolderProps) {
   return (
     <div className={`flex flex-col w-full`}>
       <div className={`w-full flex items-center gap-2 px-4 ${!highlight ? 'pt-1' : ''}`}>
-        <FolderIcon width={iconSize} height={iconSize} />
+        <Icon name={children ? "_folder_open" : "_folder"} width={iconSize} height={iconSize} />
         <span>{name}</span>
         {highlight && <HighlightIcon />}
       </div>
@@ -54,10 +85,10 @@ function Folder({ name, children, highlight = false }: FolderProps) {
   )
 }
 
-function File({ name, highlight = false }: FileProps) {
+function File({ name, icon, highlight = false }: FileProps) {
   return (
     <div className={`flex flex-1 items-center gap-2 px-4 ${!highlight ? 'py-1' : ''}`}>
-      <FileIcon width={iconSize} height={iconSize} />
+      <Icon name={icon || getIconFromName(name)} width={iconSize} height={iconSize} />
       <span>{name}</span>
       {highlight && <HighlightIcon />}
     </div>
@@ -67,7 +98,7 @@ function File({ name, highlight = false }: FileProps) {
 function Env({ highlight = false }: HighlightProp) {
   return (
     <div className={`flex flex-1 items-center gap-2 px-4 ${!highlight ? 'py-1' : ''}`}>
-      <EnvIcon width={iconSize} height={iconSize} />
+      <Icon name="env" width={iconSize} height={iconSize} />
       <span>.env</span>
       {highlight && <HighlightIcon />}
     </div>
diff --git a/src/css/custom.css b/src/css/custom.css
index e869904..59e6361 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -15,6 +15,8 @@
   @apply ctp-latte;
   --ifm-font-family-base: 'Inter';
 
+  --vscode-ctp-text: var(--ctp-text);
+
   background-color: rgb(var(--ctp-base));
   
   --ctp-accent: var(--ctp-green);
diff --git a/static/img/icons/catppuccin-icons b/static/img/icons/catppuccin-icons
new file mode 160000
index 0000000..eef1b75
--- /dev/null
+++ b/static/img/icons/catppuccin-icons
@@ -0,0 +1 @@
+Subproject commit eef1b75d45cae179fce6041a62eb70db253c8b3a