diff --git a/modules/desktop/src/components/CategorizedPackages/CategorizedPackages.svelte b/modules/desktop/src/components/CategorizedPackages/CategorizedPackages.svelte
index f88ffe3..82c5b46 100644
--- a/modules/desktop/src/components/CategorizedPackages/CategorizedPackages.svelte
+++ b/modules/desktop/src/components/CategorizedPackages/CategorizedPackages.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import PanelHeader from '@tea/ui/PanelHeader/PanelHeader.svelte';
-	import MiniPackageCard from '@tea/ui/MiniPackageCard/MiniPackageCard.svelte';
+	import PanelHeader from '@tea/ui/panel-header/panel-header.svelte';
+	import MiniPackageCard from '@tea/ui/mini-package-card/mini-package-card.svelte';
 	import type { Category } from '$libs/types';
 	import { onMount } from 'svelte';
 	import { getCategorizedPackages } from '@api';
diff --git a/modules/desktop/src/components/EssentialWorkshops/EssentialWorkshops.svelte b/modules/desktop/src/components/EssentialWorkshops/EssentialWorkshops.svelte
index 786082c..aabc0c2 100644
--- a/modules/desktop/src/components/EssentialWorkshops/EssentialWorkshops.svelte
+++ b/modules/desktop/src/components/EssentialWorkshops/EssentialWorkshops.svelte
@@ -2,7 +2,7 @@
 	import '$appcss';
 	import type { AirtablePost } from '@tea/ui/types';
 	import Posts from '@tea/ui/Posts/Posts.svelte';
-	import PanelHeader from '@tea/ui/PanelHeader/PanelHeader.svelte';
+	import PanelHeader from '@tea/ui/panel-header/panel-header.svelte';
 	import Preloader from '@tea/ui/Preloader/Preloader.svelte';
 	import { postsStore } from '$libs/stores';
 
diff --git a/modules/desktop/src/components/InstalledPackages/InstalledPackages.svelte b/modules/desktop/src/components/InstalledPackages/InstalledPackages.svelte
index bc21028..e040e1c 100644
--- a/modules/desktop/src/components/InstalledPackages/InstalledPackages.svelte
+++ b/modules/desktop/src/components/InstalledPackages/InstalledPackages.svelte
@@ -2,9 +2,9 @@
 	import '$appcss';
 	import type { GUIPackage } from '$libs/types';
 	import { PackageStates } from '$libs/types';
-	import PanelHeader from '@tea/ui/PanelHeader/PanelHeader.svelte';
+	import PanelHeader from '@tea/ui/panel-header/panel-header.svelte';
 	import { packagesStore } from '$libs/stores';
-	import MiniPackageCard from '@tea/ui/MiniPackageCard/MiniPackageCard.svelte';
+	import MiniPackageCard from '@tea/ui/mini-package-card/mini-package-card.svelte';
 	import Preloader from '@tea/ui/Preloader/Preloader.svelte';
 	let packages: GUIPackage[] = [];
 
diff --git a/modules/desktop/src/components/News/News.svelte b/modules/desktop/src/components/News/News.svelte
index eab21a8..47a2fdb 100644
--- a/modules/desktop/src/components/News/News.svelte
+++ b/modules/desktop/src/components/News/News.svelte
@@ -3,7 +3,7 @@
 	import { postsStore } from '$libs/stores';
 	import type { AirtablePost } from '@tea/ui/types';
 	import Posts from '@tea/ui/Posts/Posts.svelte';
-	import PanelHeader from '@tea/ui/PanelHeader/PanelHeader.svelte';
+	import PanelHeader from '@tea/ui/panel-header/panel-header.svelte';
 	import Preloader from '@tea/ui/Preloader/Preloader.svelte';
 
 	let news: AirtablePost[] = [];
diff --git a/modules/desktop/src/components/PackageBanner/PackageBanner.svelte b/modules/desktop/src/components/PackageBanner/PackageBanner.svelte
index 58afcab..cd2089b 100644
--- a/modules/desktop/src/components/PackageBanner/PackageBanner.svelte
+++ b/modules/desktop/src/components/PackageBanner/PackageBanner.svelte
@@ -3,7 +3,7 @@
 	import '@tea/ui/icons/icons.css';
 	import type { Package, Bottle } from '@tea/ui/types';
 	import Button from '@tea/ui/Button/Button.svelte';
-	import StarRating from '@tea/ui/StarRating/StarRating.svelte';
+	import StarRating from '@tea/ui/star-rating/star-rating.svelte';
 	import { onMount } from 'svelte';
 	import { getPackageBottles } from '@api';
 
diff --git a/modules/desktop/src/components/PackageReviews/PackageReviews.svelte b/modules/desktop/src/components/PackageReviews/PackageReviews.svelte
index 8f9e65c..69e9a45 100644
--- a/modules/desktop/src/components/PackageReviews/PackageReviews.svelte
+++ b/modules/desktop/src/components/PackageReviews/PackageReviews.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import '$appcss';
 	import { afterUpdate } from 'svelte';
-	import ReviewCard from '@tea/ui/ReviewCard/ReviewCard.svelte';
+	import ReviewCard from '@tea/ui/review-card/review-card.svelte';
 
 	import type { Review } from '@tea/ui/types';
 	export let reviews: Review[];
diff --git a/modules/desktop/src/components/Packages/Packages.svelte b/modules/desktop/src/components/Packages/Packages.svelte
index 5ab991e..e66caf1 100644
--- a/modules/desktop/src/components/Packages/Packages.svelte
+++ b/modules/desktop/src/components/Packages/Packages.svelte
@@ -3,7 +3,7 @@
 	import type { GUIPackage } from '$libs/types';
 	import { PackageStates } from '$libs/types';
 	import Preloader from '@tea/ui/Preloader/Preloader.svelte';
-	import PackageCard from '@tea/ui/PackageCard/PackageCard.svelte';
+	import PackageCard from '@tea/ui/package-card/package-card.svelte';
 	import { packagesStore } from '$libs/stores';
 
 	// TODO: replace with getting foundation essentials
diff --git a/modules/desktop/src/components/SearchPackages/SearchPackages.svelte b/modules/desktop/src/components/SearchPackages/SearchPackages.svelte
index 7593716..22e0b3c 100644
--- a/modules/desktop/src/components/SearchPackages/SearchPackages.svelte
+++ b/modules/desktop/src/components/SearchPackages/SearchPackages.svelte
@@ -4,8 +4,8 @@
 	import SortingButtons from './SortingButtons.svelte';
 	import type { GUIPackage } from '$libs/types';
 	import { PackageStates } from '$libs/types';
-	import PackageCard from '@tea/ui/PackageCard/PackageCard.svelte';
-	import SearchInput from '@tea/ui/SearchInput/SearchInput.svelte';
+	import PackageCard from '@tea/ui/package-card/package-card.svelte';
+	import SearchInput from '@tea/ui/search-input/search-input.svelte';
 	import Preloader from '@tea/ui/Preloader/Preloader.svelte';
 
 	import { installPackage } from '@api';
diff --git a/modules/desktop/src/components/SearchPopupResults/SearchPopupResults.svelte b/modules/desktop/src/components/SearchPopupResults/SearchPopupResults.svelte
index c616793..f10d553 100644
--- a/modules/desktop/src/components/SearchPopupResults/SearchPopupResults.svelte
+++ b/modules/desktop/src/components/SearchPopupResults/SearchPopupResults.svelte
@@ -2,7 +2,7 @@
 	import { searchStore } from '$libs/stores';
 	import type { GUIPackage } from '$libs/types';
 	import Preloader from '@tea/ui/Preloader/Preloader.svelte';
-	import PackageCard from '@tea/ui/PackageCard/PackageCard.svelte';
+	import PackageCard from '@tea/ui/package-card/package-card.svelte';
 	import { PackageStates } from '$libs/types';
 	import Posts from '@tea/ui/Posts/Posts.svelte';
 
diff --git a/modules/desktop/src/components/SuggestedPackages/SuggestedPackages.svelte b/modules/desktop/src/components/SuggestedPackages/SuggestedPackages.svelte
index 3ac5d73..feb2b2e 100644
--- a/modules/desktop/src/components/SuggestedPackages/SuggestedPackages.svelte
+++ b/modules/desktop/src/components/SuggestedPackages/SuggestedPackages.svelte
@@ -4,7 +4,7 @@
 	import type { Package } from '@tea/ui/types';
 	import { PackageStates } from '$libs/types';
 	import Preloader from '@tea/ui/Preloader/Preloader.svelte';
-	import PackageCard from '@tea/ui/PackageCard/PackageCard.svelte';
+	import PackageCard from '@tea/ui/package-card/package-card.svelte';
 	import { onMount } from 'svelte';
 	import { installPackage } from '@api';
 	import { packagesStore } from '$libs/stores';
diff --git a/modules/desktop/src/components/TopBar/TopBar.svelte b/modules/desktop/src/components/TopBar/TopBar.svelte
index dc76a70..59cd89a 100644
--- a/modules/desktop/src/components/TopBar/TopBar.svelte
+++ b/modules/desktop/src/components/TopBar/TopBar.svelte
@@ -2,7 +2,7 @@
 	import { page } from '$app/stores';
 	import { beforeUpdate } from 'svelte';
 	import { searchStore } from '$libs/stores';
-	import SearchInput from '@tea/ui/SearchInput/SearchInput.svelte';
+	import SearchInput from '@tea/ui/search-input/search-input.svelte';
 	import { navStore } from '$libs/stores';
 
 	import ProfileNavButton from './ProfileNavButton.svelte';
diff --git a/modules/desktop/src/components/top-packages/top-packages.svelte b/modules/desktop/src/components/top-packages/top-packages.svelte
index 2de8ca0..529eabc 100644
--- a/modules/desktop/src/components/top-packages/top-packages.svelte
+++ b/modules/desktop/src/components/top-packages/top-packages.svelte
@@ -1,7 +1,7 @@
 <!-- home / discover / welcome page -->
 <script lang="ts">
 	import '$appcss';
-	import ListAction from '@tea/ui/ListAction/ListAction.svelte';
+	import ListAction from '@tea/ui/list-action/list-action.svelte';
   import type { ListActionItem } from '@tea/ui/types';
   import { packagesStore } from '$libs/stores';
 
diff --git a/modules/desktop/src/components/top-scripts/top-scripts.svelte b/modules/desktop/src/components/top-scripts/top-scripts.svelte
index d96a878..303db89 100644
--- a/modules/desktop/src/components/top-scripts/top-scripts.svelte
+++ b/modules/desktop/src/components/top-scripts/top-scripts.svelte
@@ -2,7 +2,7 @@
 <script lang="ts">
 	import '$appcss';
   import type { ListActionItem } from '@tea/ui/types';
-	import ListAction from '@tea/ui/ListAction/ListAction.svelte';
+	import ListAction from '@tea/ui/list-action/list-action.svelte';
 
   const items: ListActionItem[] = [
     {
diff --git a/modules/desktop/src/routes/packages/[slug]/+page.svelte b/modules/desktop/src/routes/packages/[slug]/+page.svelte
index 9a8a662..362b064 100644
--- a/modules/desktop/src/routes/packages/[slug]/+page.svelte
+++ b/modules/desktop/src/routes/packages/[slug]/+page.svelte
@@ -10,9 +10,9 @@
 	import type { Tab } from '@tea/ui/types';
 	import Bottles from '@tea/ui/Bottles/Bottles.svelte';
 	import { getPackageBottles } from '@api';
-	import PackageMetas from '@tea/ui/PackageMetas/PackageMetas.svelte';
-	import Markdown from '@tea/ui/Markdown/Markdown.svelte';
-	import PackageSnippets from '@tea/ui/PackageSnippets/PackageSnippets.svelte';
+	import PackageMetas from '@tea/ui/package-metas/package-metas.svelte';
+	import Markdown from '@tea/ui/markdown/markdown.svelte';
+	import PackageSnippets from '@tea/ui/package-snippets/package-snippets.svelte';
 
 	/** @type {import('./$types').PageData} */
 	export let data;
diff --git a/modules/gui/src/components/CategorizedPackages/CategorizedPackages.svelte b/modules/gui/src/components/CategorizedPackages/CategorizedPackages.svelte
index f88ffe3..82c5b46 100644
--- a/modules/gui/src/components/CategorizedPackages/CategorizedPackages.svelte
+++ b/modules/gui/src/components/CategorizedPackages/CategorizedPackages.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import PanelHeader from '@tea/ui/PanelHeader/PanelHeader.svelte';
-	import MiniPackageCard from '@tea/ui/MiniPackageCard/MiniPackageCard.svelte';
+	import PanelHeader from '@tea/ui/panel-header/panel-header.svelte';
+	import MiniPackageCard from '@tea/ui/mini-package-card/mini-package-card.svelte';
 	import type { Category } from '$libs/types';
 	import { onMount } from 'svelte';
 	import { getCategorizedPackages } from '@api';
diff --git a/modules/gui/src/components/EssentialWorkshops/EssentialWorkshops.svelte b/modules/gui/src/components/EssentialWorkshops/EssentialWorkshops.svelte
index 786082c..aabc0c2 100644
--- a/modules/gui/src/components/EssentialWorkshops/EssentialWorkshops.svelte
+++ b/modules/gui/src/components/EssentialWorkshops/EssentialWorkshops.svelte
@@ -2,7 +2,7 @@
 	import '$appcss';
 	import type { AirtablePost } from '@tea/ui/types';
 	import Posts from '@tea/ui/Posts/Posts.svelte';
-	import PanelHeader from '@tea/ui/PanelHeader/PanelHeader.svelte';
+	import PanelHeader from '@tea/ui/panel-header/panel-header.svelte';
 	import Preloader from '@tea/ui/Preloader/Preloader.svelte';
 	import { postsStore } from '$libs/stores';
 
diff --git a/modules/gui/src/components/InstalledPackages/InstalledPackages.svelte b/modules/gui/src/components/InstalledPackages/InstalledPackages.svelte
index bc21028..e040e1c 100644
--- a/modules/gui/src/components/InstalledPackages/InstalledPackages.svelte
+++ b/modules/gui/src/components/InstalledPackages/InstalledPackages.svelte
@@ -2,9 +2,9 @@
 	import '$appcss';
 	import type { GUIPackage } from '$libs/types';
 	import { PackageStates } from '$libs/types';
-	import PanelHeader from '@tea/ui/PanelHeader/PanelHeader.svelte';
+	import PanelHeader from '@tea/ui/panel-header/panel-header.svelte';
 	import { packagesStore } from '$libs/stores';
-	import MiniPackageCard from '@tea/ui/MiniPackageCard/MiniPackageCard.svelte';
+	import MiniPackageCard from '@tea/ui/mini-package-card/mini-package-card.svelte';
 	import Preloader from '@tea/ui/Preloader/Preloader.svelte';
 	let packages: GUIPackage[] = [];
 
diff --git a/modules/gui/src/components/News/News.svelte b/modules/gui/src/components/News/News.svelte
index eab21a8..47a2fdb 100644
--- a/modules/gui/src/components/News/News.svelte
+++ b/modules/gui/src/components/News/News.svelte
@@ -3,7 +3,7 @@
 	import { postsStore } from '$libs/stores';
 	import type { AirtablePost } from '@tea/ui/types';
 	import Posts from '@tea/ui/Posts/Posts.svelte';
-	import PanelHeader from '@tea/ui/PanelHeader/PanelHeader.svelte';
+	import PanelHeader from '@tea/ui/panel-header/panel-header.svelte';
 	import Preloader from '@tea/ui/Preloader/Preloader.svelte';
 
 	let news: AirtablePost[] = [];
diff --git a/modules/gui/src/components/PackageBanner/PackageBanner.svelte b/modules/gui/src/components/PackageBanner/PackageBanner.svelte
index f1e7dd4..8883a28 100644
--- a/modules/gui/src/components/PackageBanner/PackageBanner.svelte
+++ b/modules/gui/src/components/PackageBanner/PackageBanner.svelte
@@ -3,7 +3,7 @@
 	import '@tea/ui/icons/icons.css';
 	import type { Package, Bottle } from '@tea/ui/types';
 	import Button from '@tea/ui/Button/Button.svelte';
-	import StarRating from '@tea/ui/StarRating/StarRating.svelte';
+	import StarRating from '@tea/ui/star-rating/star-rating.svelte';
 	import { onMount } from 'svelte';
 	import { getPackageBottles } from '@api';
 
diff --git a/modules/gui/src/components/PackageReviews/PackageReviews.svelte b/modules/gui/src/components/PackageReviews/PackageReviews.svelte
index 8f9e65c..69e9a45 100644
--- a/modules/gui/src/components/PackageReviews/PackageReviews.svelte
+++ b/modules/gui/src/components/PackageReviews/PackageReviews.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import '$appcss';
 	import { afterUpdate } from 'svelte';
-	import ReviewCard from '@tea/ui/ReviewCard/ReviewCard.svelte';
+	import ReviewCard from '@tea/ui/review-card/review-card.svelte';
 
 	import type { Review } from '@tea/ui/types';
 	export let reviews: Review[];
diff --git a/modules/gui/src/components/Packages/Packages.svelte b/modules/gui/src/components/Packages/Packages.svelte
index cbb8d37..ce508bc 100644
--- a/modules/gui/src/components/Packages/Packages.svelte
+++ b/modules/gui/src/components/Packages/Packages.svelte
@@ -3,7 +3,7 @@
 	import type { GUIPackage } from '$libs/types';
 	import { PackageStates } from '$libs/types';
 	import Preloader from '@tea/ui/Preloader/Preloader.svelte';
-	import PackageCard from '@tea/ui/PackageCard/PackageCard.svelte';
+	import PackageCard from '@tea/ui/package-card/package-card.svelte';
 	import { onMount } from 'svelte';
 
 	// TODO: replace with getting foundation essentials
diff --git a/modules/gui/src/components/SearchPackages/SearchPackages.svelte b/modules/gui/src/components/SearchPackages/SearchPackages.svelte
index 7593716..22e0b3c 100644
--- a/modules/gui/src/components/SearchPackages/SearchPackages.svelte
+++ b/modules/gui/src/components/SearchPackages/SearchPackages.svelte
@@ -4,8 +4,8 @@
 	import SortingButtons from './SortingButtons.svelte';
 	import type { GUIPackage } from '$libs/types';
 	import { PackageStates } from '$libs/types';
-	import PackageCard from '@tea/ui/PackageCard/PackageCard.svelte';
-	import SearchInput from '@tea/ui/SearchInput/SearchInput.svelte';
+	import PackageCard from '@tea/ui/package-card/package-card.svelte';
+	import SearchInput from '@tea/ui/search-input/search-input.svelte';
 	import Preloader from '@tea/ui/Preloader/Preloader.svelte';
 
 	import { installPackage } from '@api';
diff --git a/modules/gui/src/components/SearchPopupResults/SearchPopupResults.svelte b/modules/gui/src/components/SearchPopupResults/SearchPopupResults.svelte
index c616793..f10d553 100644
--- a/modules/gui/src/components/SearchPopupResults/SearchPopupResults.svelte
+++ b/modules/gui/src/components/SearchPopupResults/SearchPopupResults.svelte
@@ -2,7 +2,7 @@
 	import { searchStore } from '$libs/stores';
 	import type { GUIPackage } from '$libs/types';
 	import Preloader from '@tea/ui/Preloader/Preloader.svelte';
-	import PackageCard from '@tea/ui/PackageCard/PackageCard.svelte';
+	import PackageCard from '@tea/ui/package-card/package-card.svelte';
 	import { PackageStates } from '$libs/types';
 	import Posts from '@tea/ui/Posts/Posts.svelte';
 
diff --git a/modules/gui/src/components/SuggestedPackages/SuggestedPackages.svelte b/modules/gui/src/components/SuggestedPackages/SuggestedPackages.svelte
index 3ac5d73..feb2b2e 100644
--- a/modules/gui/src/components/SuggestedPackages/SuggestedPackages.svelte
+++ b/modules/gui/src/components/SuggestedPackages/SuggestedPackages.svelte
@@ -4,7 +4,7 @@
 	import type { Package } from '@tea/ui/types';
 	import { PackageStates } from '$libs/types';
 	import Preloader from '@tea/ui/Preloader/Preloader.svelte';
-	import PackageCard from '@tea/ui/PackageCard/PackageCard.svelte';
+	import PackageCard from '@tea/ui/package-card/package-card.svelte';
 	import { onMount } from 'svelte';
 	import { installPackage } from '@api';
 	import { packagesStore } from '$libs/stores';
diff --git a/modules/gui/src/components/TopBar/TopBar.svelte b/modules/gui/src/components/TopBar/TopBar.svelte
index dc76a70..59cd89a 100644
--- a/modules/gui/src/components/TopBar/TopBar.svelte
+++ b/modules/gui/src/components/TopBar/TopBar.svelte
@@ -2,7 +2,7 @@
 	import { page } from '$app/stores';
 	import { beforeUpdate } from 'svelte';
 	import { searchStore } from '$libs/stores';
-	import SearchInput from '@tea/ui/SearchInput/SearchInput.svelte';
+	import SearchInput from '@tea/ui/search-input/search-input.svelte';
 	import { navStore } from '$libs/stores';
 
 	import ProfileNavButton from './ProfileNavButton.svelte';
diff --git a/modules/gui/src/routes/+page.svelte b/modules/gui/src/routes/+page.svelte
index 8852286..480c15b 100644
--- a/modules/gui/src/routes/+page.svelte
+++ b/modules/gui/src/routes/+page.svelte
@@ -7,7 +7,7 @@
 	import News from '$components/News/News.svelte';
 
 	import HeaderCard from '@tea/ui/HeaderCard/HeaderCard.svelte';
-	import ListAction from '@tea/ui/ListAction/ListAction.svelte';
+	import ListAction from '@tea/ui/list-action/list-action.svelte';
 </script>
 
 <div>
diff --git a/modules/gui/src/routes/packages/[slug]/+page.svelte b/modules/gui/src/routes/packages/[slug]/+page.svelte
index 8cba314..149bc3b 100644
--- a/modules/gui/src/routes/packages/[slug]/+page.svelte
+++ b/modules/gui/src/routes/packages/[slug]/+page.svelte
@@ -10,9 +10,9 @@
 	import type { Tab } from '@tea/ui/types';
 	import Bottles from '@tea/ui/Bottles/Bottles.svelte';
 	import { getPackageBottles } from '@api';
-	import PackageMetas from '@tea/ui/PackageMetas/PackageMetas.svelte';
-	import Markdown from '@tea/ui/Markdown/Markdown.svelte';
-	import PackageSnippets from '@tea/ui/PackageSnippets/PackageSnippets.svelte';
+	import PackageMetas from '@tea/ui/package-metas/package-metas.svelte';
+	import Markdown from '@tea/ui/markdown/markdown.svelte';
+	import PackageSnippets from '@tea/ui/package-snippets/package-snippets.svelte';
 
 	/** @type {import('./$types').PageData} */
 	export let data;
diff --git a/modules/ui/src/Button/Button.stories.ts b/modules/ui/src/Button/Button.stories.ts
index 8342b48..c1f5b7f 100644
--- a/modules/ui/src/Button/Button.stories.ts
+++ b/modules/ui/src/Button/Button.stories.ts
@@ -1,4 +1,4 @@
-import Button from "./ButtonView.svelte";
+import Button from "./button-view.svelte";
 
 // More on how to set up stories at: https://storybook.js.org/docs/7.0/svelte/writing-stories/introduction
 export default {
diff --git a/modules/ui/src/Gallery/Gallery.svelte b/modules/ui/src/Gallery/Gallery.svelte
index d687732..b53eb19 100644
--- a/modules/ui/src/Gallery/Gallery.svelte
+++ b/modules/ui/src/Gallery/Gallery.svelte
@@ -3,7 +3,7 @@
 	import { onDestroy, onMount } from "svelte";
 	import { watchResize } from "svelte-watch-resize";
 	import Preloader from "../Preloader/Preloader.svelte";
-	import GalleryItem from "./GalleryItem.svelte";
+	import GalleryItem from "./gallery-item.svelte";
 
 	export let title = "";
 	export let linkTarget = "";
diff --git a/modules/ui/src/Button/ButtonView.svelte b/modules/ui/src/button/button-view.svelte
similarity index 100%
rename from modules/ui/src/Button/ButtonView.svelte
rename to modules/ui/src/button/button-view.svelte
diff --git a/modules/ui/src/Gallery/GalleryItem.svelte b/modules/ui/src/gallery/gallery-item.svelte
similarity index 95%
rename from modules/ui/src/Gallery/GalleryItem.svelte
rename to modules/ui/src/gallery/gallery-item.svelte
index 1d8ec9b..ceb0238 100644
--- a/modules/ui/src/Gallery/GalleryItem.svelte
+++ b/modules/ui/src/gallery/gallery-item.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import "../app.css";
-	import ImgLoader from "../ImgLoader/ImgLoader.svelte";
+	import ImgLoader from "../img-loader/img-loader.svelte";
 
 	export let width = 0;
 	export let imageUrl = "";
diff --git a/modules/ui/src/Header/header.css b/modules/ui/src/header/header.css
similarity index 100%
rename from modules/ui/src/Header/header.css
rename to modules/ui/src/header/header.css
diff --git a/modules/ui/src/ImgLoader/ImgLoader.stories.ts b/modules/ui/src/img-loader/img-loader.stories.ts
similarity index 100%
rename from modules/ui/src/ImgLoader/ImgLoader.stories.ts
rename to modules/ui/src/img-loader/img-loader.stories.ts
diff --git a/modules/ui/src/ImgLoader/ImgLoader.svelte b/modules/ui/src/img-loader/img-loader.svelte
similarity index 100%
rename from modules/ui/src/ImgLoader/ImgLoader.svelte
rename to modules/ui/src/img-loader/img-loader.svelte
diff --git a/modules/ui/src/ListAction/ListAction.svelte b/modules/ui/src/list-action/list-action.svelte
similarity index 96%
rename from modules/ui/src/ListAction/ListAction.svelte
rename to modules/ui/src/list-action/list-action.svelte
index 04cd872..d8aa136 100644
--- a/modules/ui/src/ListAction/ListAction.svelte
+++ b/modules/ui/src/list-action/list-action.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Button from "../Button/Button.svelte";
-	import ImgLoader from "../ImgLoader/ImgLoader.svelte";
+	import ImgLoader from "../img-loader/img-loader.svelte";
 	import type { ListActionItem } from "../types";
 
 	export let title: string;
diff --git a/modules/ui/src/Markdown/sample.ts b/modules/ui/src/markdown/sample.ts
similarity index 100%
rename from modules/ui/src/Markdown/sample.ts
rename to modules/ui/src/markdown/sample.ts
diff --git a/modules/ui/src/Markdown/styles.css b/modules/ui/src/markdown/styles.css
similarity index 100%
rename from modules/ui/src/Markdown/styles.css
rename to modules/ui/src/markdown/styles.css
diff --git a/modules/ui/src/MiniPackageCard/MiniPackageCard.stories.ts b/modules/ui/src/mini-package-card/mini-package-card.stories.ts
similarity index 100%
rename from modules/ui/src/MiniPackageCard/MiniPackageCard.stories.ts
rename to modules/ui/src/mini-package-card/mini-package-card.stories.ts
diff --git a/modules/ui/src/MiniPackageCard/MiniPackageCard.svelte b/modules/ui/src/mini-package-card/mini-package-card.svelte
similarity index 96%
rename from modules/ui/src/MiniPackageCard/MiniPackageCard.svelte
rename to modules/ui/src/mini-package-card/mini-package-card.svelte
index 9cdb040..4e9c3a5 100644
--- a/modules/ui/src/MiniPackageCard/MiniPackageCard.svelte
+++ b/modules/ui/src/mini-package-card/mini-package-card.svelte
@@ -2,7 +2,7 @@
 	import "../app.css";
 	import type { Package } from "../types";
 
-	import ImgLoader from "../ImgLoader/ImgLoader.svelte";
+	import ImgLoader from "../img-loader/img-loader.svelte";
 
 	export let pkg: Package;
 	export let ctaLabel: string;
diff --git a/modules/ui/src/PackageCard/PackageCard.stories.ts b/modules/ui/src/package-card/package-card.stories.ts
similarity index 100%
rename from modules/ui/src/PackageCard/PackageCard.stories.ts
rename to modules/ui/src/package-card/package-card.stories.ts
diff --git a/modules/ui/src/PackageCard/PackageCard.svelte b/modules/ui/src/package-card/package-card.svelte
similarity index 97%
rename from modules/ui/src/PackageCard/PackageCard.svelte
rename to modules/ui/src/package-card/package-card.svelte
index 8cdcd4a..22bb31b 100644
--- a/modules/ui/src/PackageCard/PackageCard.svelte
+++ b/modules/ui/src/package-card/package-card.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import "../app.css";
 	import type { Package } from "../types";
-	import ImgLoader from "../ImgLoader/ImgLoader.svelte";
+	import ImgLoader from "../img-loader/img-loader.svelte";
 
 	export let pkg: Package;
 	export let link: string;
diff --git a/modules/ui/src/PackageMetas/PackageMetas.svelte b/modules/ui/src/package-metas/package-metas.svelte
similarity index 100%
rename from modules/ui/src/PackageMetas/PackageMetas.svelte
rename to modules/ui/src/package-metas/package-metas.svelte
diff --git a/modules/ui/src/PackageSnippets/Code.svelte b/modules/ui/src/package-snippets/code.svelte
similarity index 100%
rename from modules/ui/src/PackageSnippets/Code.svelte
rename to modules/ui/src/package-snippets/code.svelte
diff --git a/modules/ui/src/PackageSnippets/PackageSnippet.svelte b/modules/ui/src/package-snippets/package-snippet.svelte
similarity index 94%
rename from modules/ui/src/PackageSnippets/PackageSnippet.svelte
rename to modules/ui/src/package-snippets/package-snippet.svelte
index b87d46a..d1e21e9 100644
--- a/modules/ui/src/PackageSnippets/PackageSnippet.svelte
+++ b/modules/ui/src/package-snippets/package-snippet.svelte
@@ -2,8 +2,8 @@
 	import "../app.css";
 	import { onMount } from "svelte";
 	import type { Snippet, Tab } from "../types";
-	import Tabs from "../Tabs/Tabs.svelte";
-	import Code from "./Code.svelte";
+	import Tabs from "../tabs/tabs.svelte";
+	import Code from "./code.svelte";
 
 	export let snippet: Snippet;
 
diff --git a/modules/ui/src/PackageSnippets/PackageSnippets.svelte b/modules/ui/src/package-snippets/package-snippets.svelte
similarity index 80%
rename from modules/ui/src/PackageSnippets/PackageSnippets.svelte
rename to modules/ui/src/package-snippets/package-snippets.svelte
index 30d2287..d91c82f 100644
--- a/modules/ui/src/PackageSnippets/PackageSnippets.svelte
+++ b/modules/ui/src/package-snippets/package-snippets.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { snippets } from "./sample";
-	import PackageSnippet from "./PackageSnippet.svelte";
+	import PackageSnippet from "./package-snippet.svelte";
 </script>
 
 <ul class="bg-black">
diff --git a/modules/ui/src/PackageSnippets/sample.ts b/modules/ui/src/package-snippets/sample.ts
similarity index 100%
rename from modules/ui/src/PackageSnippets/sample.ts
rename to modules/ui/src/package-snippets/sample.ts
diff --git a/modules/ui/src/PanelHeader/PanelHeader.stories.ts b/modules/ui/src/panel-header/panel-header.stories.ts
similarity index 100%
rename from modules/ui/src/PanelHeader/PanelHeader.stories.ts
rename to modules/ui/src/panel-header/panel-header.stories.ts
diff --git a/modules/ui/src/PanelHeader/PanelHeader.svelte b/modules/ui/src/panel-header/panel-header.svelte
similarity index 100%
rename from modules/ui/src/PanelHeader/PanelHeader.svelte
rename to modules/ui/src/panel-header/panel-header.svelte
diff --git a/modules/ui/src/ReviewCard/ReviewCard.stories.ts b/modules/ui/src/review-card/review-card.stories.ts
similarity index 100%
rename from modules/ui/src/ReviewCard/ReviewCard.stories.ts
rename to modules/ui/src/review-card/review-card.stories.ts
diff --git a/modules/ui/src/ReviewCard/ReviewCard.svelte b/modules/ui/src/review-card/review-card.svelte
similarity index 100%
rename from modules/ui/src/ReviewCard/ReviewCard.svelte
rename to modules/ui/src/review-card/review-card.svelte
diff --git a/modules/ui/src/SearchInput/SearchInput.stories.ts b/modules/ui/src/search-input/search-input.stories.ts
similarity index 100%
rename from modules/ui/src/SearchInput/SearchInput.stories.ts
rename to modules/ui/src/search-input/search-input.stories.ts
diff --git a/modules/ui/src/SearchInput/SearchInput.svelte b/modules/ui/src/search-input/search-input.svelte
similarity index 100%
rename from modules/ui/src/SearchInput/SearchInput.svelte
rename to modules/ui/src/search-input/search-input.svelte
diff --git a/modules/ui/src/StarRating/StarRating.svelte b/modules/ui/src/star-rating/star-rating.svelte
similarity index 100%
rename from modules/ui/src/StarRating/StarRating.svelte
rename to modules/ui/src/star-rating/star-rating.svelte
diff --git a/modules/ui/src/StarRating/StartRating.stories.ts b/modules/ui/src/star-rating/start-rating.stories.ts
similarity index 100%
rename from modules/ui/src/StarRating/StartRating.stories.ts
rename to modules/ui/src/star-rating/start-rating.stories.ts