diff --git a/components/Footer.tsx b/components/Footer.tsx
index 549049d..5619d7e 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -1,8 +1,8 @@
 import Link from 'next/link'
 import React, {ReactNode} from 'react'
 import {OuterContainer, InnerContainer} from './Container'
-import {SpotifyPlayer} from './SpotifyPlayer'
-import {SocialLink} from '@/components/SocialLink'
+import {SpotifyPlayer} from './ui/SpotifyPlayer'
+import {SocialLink} from '@/components/ui/SocialLink'
 import {GitHubIcon, LinkedInIcon, TwitterIcon} from '@/components/icons/SocialIcons'
 
 function NavLink({href, children}: { href: string, children: ReactNode }) {
diff --git a/components/Header.tsx b/components/Header.tsx
index 3b1784c..b9edc8d 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -5,7 +5,7 @@ import {Fragment, useEffect, useRef} from 'react'
 import {Popover, Transition} from '@headlessui/react'
 import clsx from 'clsx'
 import {Container} from './Container'
-import {MobileNavItem} from './MobileNavItem'
+import {MobileNavItem} from './ui/MobileNavItem'
 import {CloseIcon} from './icons/CloseIcon'
 import {ChevronDownIcon} from './icons/ChevronDownIcon'
 import {MoonIcon} from './icons/MoonIcon'
diff --git a/components/layouts/ArticleLayout.tsx b/components/layouts/ArticleLayout.tsx
index da20ac4..24725e3 100644
--- a/components/layouts/ArticleLayout.tsx
+++ b/components/layouts/ArticleLayout.tsx
@@ -3,8 +3,8 @@ import Head from 'next/head'
 import {usePathname} from 'next/navigation'
 import {Container} from '@/components/Container'
 import {formatDate} from '@/lib/formatDate'
-import {Prose} from '@/components/Prose'
-import {Views} from '@/components/Views'
+import {Prose} from '@/components/ui/Prose'
+import {Views} from '@/components/ui/Views'
 
 type ArticleLayout = {
     children?: ReactNode
diff --git a/components/Button.tsx b/components/ui/Button.tsx
similarity index 100%
rename from components/Button.tsx
rename to components/ui/Button.tsx
diff --git a/components/Card.tsx b/components/ui/Card.tsx
similarity index 100%
rename from components/Card.tsx
rename to components/ui/Card.tsx
diff --git a/components/CardGroup.tsx b/components/ui/CardGroup.tsx
similarity index 100%
rename from components/CardGroup.tsx
rename to components/ui/CardGroup.tsx
diff --git a/components/Cta.tsx b/components/ui/Cta.tsx
similarity index 100%
rename from components/Cta.tsx
rename to components/ui/Cta.tsx
diff --git a/components/InlineLink.tsx b/components/ui/InlineLink.tsx
similarity index 100%
rename from components/InlineLink.tsx
rename to components/ui/InlineLink.tsx
diff --git a/components/MobileNavItem.tsx b/components/ui/MobileNavItem.tsx
similarity index 100%
rename from components/MobileNavItem.tsx
rename to components/ui/MobileNavItem.tsx
diff --git a/components/Prose.tsx b/components/ui/Prose.tsx
similarity index 100%
rename from components/Prose.tsx
rename to components/ui/Prose.tsx
diff --git a/components/Resume.tsx b/components/ui/Resume.tsx
similarity index 97%
rename from components/Resume.tsx
rename to components/ui/Resume.tsx
index db5957d..0672d54 100644
--- a/components/Resume.tsx
+++ b/components/ui/Resume.tsx
@@ -1,7 +1,7 @@
 import {BriefcaseIcon} from '@/components/icons/BriefcaseIcon'
 import {ArrowDownIcon} from '@/components/icons/ArrowDownIcon'
-import {Button} from '@/components/Button'
-import {Cta} from '@/components/Cta'
+import {Button} from './Button'
+import {Cta} from './Cta'
 
 type Work = {
     company: string
diff --git a/components/Section.jsx b/components/ui/Section.jsx
similarity index 100%
rename from components/Section.jsx
rename to components/ui/Section.jsx
diff --git a/components/SocialLink.tsx b/components/ui/SocialLink.tsx
similarity index 100%
rename from components/SocialLink.tsx
rename to components/ui/SocialLink.tsx
diff --git a/components/SpotifyPlayer.tsx b/components/ui/SpotifyPlayer.tsx
similarity index 100%
rename from components/SpotifyPlayer.tsx
rename to components/ui/SpotifyPlayer.tsx
diff --git a/components/Subscribe.tsx b/components/ui/Subscribe.tsx
similarity index 95%
rename from components/Subscribe.tsx
rename to components/ui/Subscribe.tsx
index ac037ad..de47f88 100644
--- a/components/Subscribe.tsx
+++ b/components/ui/Subscribe.tsx
@@ -1,6 +1,6 @@
 import {useRef, SyntheticEvent, MutableRefObject, useState} from 'react'
-import {Cta} from '@/components/Cta'
-import {Button} from '@/components/Button'
+import {Cta} from '@/components/ui/Cta'
+import {Button} from '@/components/ui/Button'
 import {InboxIcon} from '@/components/icons/InboxIcon'
 
 export function Subscribe() {
diff --git a/components/Views.tsx b/components/ui/Views.tsx
similarity index 100%
rename from components/Views.tsx
rename to components/ui/Views.tsx
diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
index dff24c7..e4aec2f 100644
--- a/pages/dashboard.tsx
+++ b/pages/dashboard.tsx
@@ -3,8 +3,8 @@ import Head from 'next/head'
 import {GetStaticProps} from 'next'
 import useSWR from 'swr'
 import {SimpleLayout} from '@/components/layouts/SimpleLayout'
-import {Card} from '@/components/Card'
-import {CardGroup} from '@/components/CardGroup'
+import {Card} from '@/components/ui/Card'
+import {CardGroup} from '@/components/ui/CardGroup'
 import {numberFormat} from '@/lib/numberFormat'
 import {getDashboardData} from '@/lib/dashboard'
 import fetcher from '@/lib/fetcher'
diff --git a/pages/index.tsx b/pages/index.tsx
index 0579195..2dfbcf0 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,16 +1,16 @@
 import React from 'react'
 import Head from 'next/head'
 import {GetStaticProps} from 'next'
-import {Card} from '@/components/Card'
-import {Resume} from '@/components/Resume'
+import {Card} from '@/components/ui/Card'
+import {Resume} from '@/components/ui/Resume'
 import {Container} from '@/components/Container'
 import {
     GitHubIcon,
     LinkedInIcon,
     TwitterIcon
 } from '@/components/icons/SocialIcons'
-import {SocialLink} from '@/components/SocialLink'
-import {Views} from '@/components/Views'
+import {SocialLink} from '@/components/ui/SocialLink'
+import {Views} from '@/components/ui/Views'
 import {formatDate} from '@/lib/formatDate'
 import {generateRssFeed} from '@/lib/generateRssFeed'
 import {generateSitemap} from '@/lib/generateSitemap'
diff --git a/pages/projects.tsx b/pages/projects.tsx
index f097d6d..5ae61b2 100644
--- a/pages/projects.tsx
+++ b/pages/projects.tsx
@@ -1,6 +1,6 @@
 import {GetStaticProps} from 'next'
 import Head from 'next/head'
-import {Card} from '@/components/Card'
+import {Card} from '@/components/ui/Card'
 import {SimpleLayout} from '@/components/layouts/SimpleLayout'
 import {SparklesIcon} from '@/components/icons/SparklesIcon'
 import {ShareIcon} from '@/components/icons/ShareIcon'
diff --git a/pages/uses.jsx b/pages/uses.jsx
index c8c1291..69ae9ec 100644
--- a/pages/uses.jsx
+++ b/pages/uses.jsx
@@ -1,7 +1,7 @@
 import Head from 'next/head'
 
-import {Card} from '@/components/Card'
-import {Section} from '@/components/Section'
+import {Card} from '@/components/ui/Card'
+import {Section} from '@/components/ui/Section'
 import {SimpleLayout} from '@/components/layouts/SimpleLayout'
 
 function ToolsSection({children, ...props}) {
diff --git a/pages/writing/index.tsx b/pages/writing/index.tsx
index 2a54013..44b2277 100644
--- a/pages/writing/index.tsx
+++ b/pages/writing/index.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
 import {GetStaticProps} from 'next'
 import Head from 'next/head'
-import {Card} from '@/components/Card'
+import {Card} from '@/components/ui/Card'
 import {SimpleLayout} from '@/components/layouts/SimpleLayout'
-import {Views} from '@/components/Views'
+import {Views} from '@/components/ui/Views'
 import {getAllArticles} from '@/lib/getAllArticles'
 import {formatDate} from '@/lib/formatDate'
 import {Article} from 'types'