diff --git a/packages/ui/components/index.ts b/packages/ui/components/index.ts
index 8f4052d423..18cb5ac874 100644
--- a/packages/ui/components/index.ts
+++ b/packages/ui/components/index.ts
@@ -32,3 +32,4 @@ export type { TopBannerProps } from "./top-banner";
 export { AnimatedPopover } from "./popover/index";
 export { TableActions, DropdownActions } from "./table/TableActions";
 export type { ActionType } from "./table/TableActions";
+export { Skeleton, SkeletonAvatar, SkeletonButton, SkeletonContainer, SkeletonText } from "./skeleton";
diff --git a/packages/ui/v2/core/skeleton/index.tsx b/packages/ui/components/skeleton/index.tsx
similarity index 100%
rename from packages/ui/v2/core/skeleton/index.tsx
rename to packages/ui/components/skeleton/index.tsx
diff --git a/packages/ui/components/skeleton/skeleton.stories.mdx b/packages/ui/components/skeleton/skeleton.stories.mdx
new file mode 100644
index 0000000000..d563d8c6e4
--- /dev/null
+++ b/packages/ui/components/skeleton/skeleton.stories.mdx
@@ -0,0 +1,36 @@
+import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
+import { Examples, Example, Note, Title, VariantsTable, VariantColumn, RowTitles, CustomArgsTable} from '@calcom/storybook/components'
+import { Icon } from "@calcom/ui";
+
+import {  Skeleton, SkeletonAvatar, SkeletonText, SkeletonButton, SkeletonContainer } from './';
+
+<Meta title="UI/Skeleton" component={Skeleton} />
+
+<Title title="Skeleton" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022"/>
+
+
+## Definition
+Skeletons are used as a placeholder to the content while the content is being loaded. It is used to improve the user experience by providing a visual cue that the content is loading.
+
+## Structure
+
+<CustomArgsTable of={Skeleton} />
+
+
+<Examples title="Skeleton Avatar" >
+  <Example title="Primary">
+    <SkeletonAvatar className="h-8 w-8" />
+  </Example>
+</Examples>
+
+<Examples title="Skeleton Text" >
+  <Example title="Primary">
+    <SkeletonText className="h-4 w-32"/>
+  </Example>
+</Examples>
+
+<Examples title="Skeleton Button" >
+  <Example title="Primary">
+    <SkeletonButton className="h-8 w-32"/>
+  </Example>
+</Examples>
diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx
index 29f3a2a27e..f137c4429d 100644
--- a/packages/ui/index.tsx
+++ b/packages/ui/index.tsx
@@ -29,6 +29,11 @@ export {
   SelectField,
   SelectWithValidation,
   TableActions,
+  Skeleton,
+  SkeletonAvatar,
+  SkeletonText,
+  SkeletonButton,
+  SkeletonContainer,
   DropdownActions,
 } from "./components";
 export type { ActionType } from "./components";
@@ -50,10 +55,6 @@ export {
   HorizontalTabs,
   SettingsToggle,
   showToast,
-  SkeletonAvatar,
-  SkeletonButton,
-  SkeletonContainer,
-  SkeletonText,
   Swatch,
   Switch,
   Card,
@@ -108,7 +109,6 @@ export { List, ListItem, ListItemText, ListItemTitle, ListLinkItem } from "./v2/
 export { default as MeetingTimeInTimezones } from "./v2/core/MeetingTimeInTimezones";
 export { default as Meta, MetaProvider } from "./v2/core/Meta";
 export { MobileNavigationMoreItems, ShellSubHeading } from "./v2/core/Shell";
-export { Skeleton } from "./v2/core/skeleton";
 export { StepCard } from "./v2/core/StepCard";
 export { default as Stepper } from "./v2/core/Stepper";
 export { Steps } from "./v2/core/Steps";
diff --git a/packages/ui/v2/core/Shell.tsx b/packages/ui/v2/core/Shell.tsx
index 0f65de5c8f..9cd239513d 100644
--- a/packages/ui/v2/core/Shell.tsx
+++ b/packages/ui/v2/core/Shell.tsx
@@ -38,9 +38,9 @@ import {
 import ErrorBoundary from "../../ErrorBoundary";
 import { KBarContent, KBarRoot, KBarTrigger } from "../../Kbar";
 import Logo from "../../Logo";
+import { SkeletonText } from "../../components/skeleton";
 import Credits from "./Credits";
 import HeadSeo from "./head-seo";
-import { SkeletonText } from "./skeleton";
 
 /* TODO: Migate this */
 
diff --git a/packages/ui/v2/core/apps/Categories.tsx b/packages/ui/v2/core/apps/Categories.tsx
index 28f662e867..3d2b9184f2 100644
--- a/packages/ui/v2/core/apps/Categories.tsx
+++ b/packages/ui/v2/core/apps/Categories.tsx
@@ -3,7 +3,7 @@ import Link from "next/link";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Icon } from "@calcom/ui";
 
-import { SkeletonText } from "../skeleton";
+import { SkeletonText } from "../../../components/skeleton";
 import Slider from "./Slider";
 
 export default function AppStoreCategories({
diff --git a/packages/ui/v2/core/apps/SkeletonLoader.tsx b/packages/ui/v2/core/apps/SkeletonLoader.tsx
index f9c56e2615..2538d31ab7 100644
--- a/packages/ui/v2/core/apps/SkeletonLoader.tsx
+++ b/packages/ui/v2/core/apps/SkeletonLoader.tsx
@@ -1,6 +1,6 @@
+import { SkeletonText } from "../../../components/skeleton";
 import Meta from "../Meta";
 import { ShellSubHeading } from "../Shell";
-import { SkeletonText } from "../skeleton";
 
 function SkeletonLoader({
   className,
diff --git a/packages/ui/v2/core/apps/Slider.tsx b/packages/ui/v2/core/apps/Slider.tsx
index 143e809489..21d8bb4889 100644
--- a/packages/ui/v2/core/apps/Slider.tsx
+++ b/packages/ui/v2/core/apps/Slider.tsx
@@ -6,7 +6,7 @@ import { useEffect, useRef } from "react";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
 import { Icon } from "../../..";
-import { SkeletonText } from "../skeleton";
+import { SkeletonText } from "../../../components/skeleton";
 
 const Slider = <T extends string | unknown>({
   title = "",
diff --git a/packages/ui/v2/core/index.ts b/packages/ui/v2/core/index.ts
index 4665f51dc5..776cbee152 100644
--- a/packages/ui/v2/core/index.ts
+++ b/packages/ui/v2/core/index.ts
@@ -39,7 +39,6 @@ export { Portal } from "./Portal";
 export { Segment, SegmentOption } from "./Segment";
 export { default as SettingsToggle } from "./SettingsToggle";
 export { default as Shell } from "./Shell";
-export { Skeleton, SkeletonAvatar, SkeletonButton, SkeletonContainer, SkeletonText } from "./skeleton";
 export { default as Stepper } from "./Stepper";
 export { default as Swatch } from "./Swatch";
 export { default as Switch } from "./Switch";
diff --git a/packages/ui/v2/core/navigation/tabs/HorizontalTabItem.tsx b/packages/ui/v2/core/navigation/tabs/HorizontalTabItem.tsx
index 1a432078c8..7df96b8fdd 100644
--- a/packages/ui/v2/core/navigation/tabs/HorizontalTabItem.tsx
+++ b/packages/ui/v2/core/navigation/tabs/HorizontalTabItem.tsx
@@ -6,7 +6,7 @@ import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { SVGComponent } from "@calcom/types/SVGComponent";
 
-import { SkeletonText } from "../../skeleton";
+import { SkeletonText } from "../../../../components/skeleton";
 
 export type HorizontalTabItemProps = {
   name: string;
diff --git a/packages/ui/v2/core/navigation/tabs/VerticalTabItem.tsx b/packages/ui/v2/core/navigation/tabs/VerticalTabItem.tsx
index 66717b40fe..6fcd0678c1 100644
--- a/packages/ui/v2/core/navigation/tabs/VerticalTabItem.tsx
+++ b/packages/ui/v2/core/navigation/tabs/VerticalTabItem.tsx
@@ -7,7 +7,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { SVGComponent } from "@calcom/types/SVGComponent";
 
 import { Icon } from "../../../..";
-import { Skeleton } from "../../skeleton";
+import { Skeleton } from "../../../../components/skeleton";
 
 export type VerticalTabItemProps = {
   name: string;