diff --git a/.storybook/main.ts b/.storybook/main.ts
index 70ef005..c77ca56 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -4,7 +4,7 @@ import path from "path";
 const config: StorybookConfig = {
   stories: [
     "../components/**/*.stories.@(js|jsx|mjs|ts|tsx)",
-    "../app/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+    "../docs/*.stories.mdx",
   ],
   addons: [
     "@storybook/addon-links",
@@ -13,6 +13,7 @@ const config: StorybookConfig = {
     "@storybook/addon-a11y",
     "@storybook/addon-designs",
   ],
+  staticDirs: ["../public", "../docs/assets"],
   webpackFinal: async (config) => {
     if (config && config.resolve && config.resolve.alias) {
       config.resolve.alias = {
diff --git a/.storybook/manager.ts b/.storybook/manager.ts
index 6acebf6..cce8129 100644
--- a/.storybook/manager.ts
+++ b/.storybook/manager.ts
@@ -6,7 +6,6 @@ const theme = create({
 
   // Brand assets
   brandTitle: "NomadHair",
-  // TODO: Replace with real url.
   brandUrl: "https://nomadhair.co/",
   brandImage:
     "https://res.cloudinary.com/dtsdpcbcv/image/upload/v1712891768/logo-light-lg_pmi0xn.svg",
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 3eb96e6..c9e7def 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -48,6 +48,18 @@ const preview: Preview = {
         ...MINIMAL_VIEWPORTS,
       },
     },
+    options: {
+      storySort: {
+        method: "",
+        order: [
+          "Getting Started",
+          "Style Guide",
+          "Atoms",
+          "Molecules",
+          "Organisms",
+        ],
+      },
+    },
   },
 };
 
diff --git a/app/(protected)/my-appointments/components/appointmentDateTimePicker/appointmentDateTimePicker.tsx b/app/(protected)/my-appointments/components/appointmentDateTimePicker/appointmentDateTimePicker.tsx
index ee83d64..b05e959 100644
--- a/app/(protected)/my-appointments/components/appointmentDateTimePicker/appointmentDateTimePicker.tsx
+++ b/app/(protected)/my-appointments/components/appointmentDateTimePicker/appointmentDateTimePicker.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Calendar } from "@/components/atoms/calendar";
+import { Calendar } from "@/components/molecules/calendar";
 import React, { useState } from "react";
 import useSWR, { mutate } from "swr";
 import AppointmentTimeslots from "./appointmentTimeslots";
diff --git a/components/atoms/avatar/avatar.stories.tsx b/components/atoms/avatar/avatar.stories.tsx
index 7fe256f..dfaa146 100644
--- a/components/atoms/avatar/avatar.stories.tsx
+++ b/components/atoms/avatar/avatar.stories.tsx
@@ -1,6 +1,9 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { Avatar, AvatarImage, AvatarFallback } from "./avatar";
 
+/**
+ * Avatar component is used to represent a user, and display the profile picture, initials or fallback icon.
+ */
 const meta: Meta<typeof Avatar> = {
   title: "Atoms/Avatar",
   component: Avatar,
diff --git a/components/atoms/avatar/avatar.tsx b/components/atoms/avatar/avatar.tsx
index 469947f..c227c02 100644
--- a/components/atoms/avatar/avatar.tsx
+++ b/components/atoms/avatar/avatar.tsx
@@ -6,7 +6,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "@/lib/utils";
 
-const avatarVariatnts = cva(
+const avatarVariants = cva(
   "relative flex shrink-0 overflow-hidden rounded-full",
   {
     variants: {
@@ -24,7 +24,7 @@ const avatarVariatnts = cva(
 
 export interface AvatarProps
   extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,
-    VariantProps<typeof avatarVariatnts> {}
+    VariantProps<typeof avatarVariants> {}
 
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,
@@ -32,7 +32,7 @@ const Avatar = React.forwardRef<
 >(({ className, size, ...props }, ref) => (
   <AvatarPrimitive.Root
     ref={ref}
-    className={cn(avatarVariatnts({ size }), className)}
+    className={cn(avatarVariants({ size }), className)}
     {...props}
   />
 ));
diff --git a/components/atoms/button/button.stories.tsx b/components/atoms/button/button.stories.tsx
index 6a81675..49271b5 100644
--- a/components/atoms/button/button.stories.tsx
+++ b/components/atoms/button/button.stories.tsx
@@ -1,6 +1,11 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { Button } from "./button";
-import { PlusIcon, icons } from "lucide-react";
+import { PlusIcon } from "lucide-react";
+
+/**
+ * Button allows users to take action, and make choices, with a single step.
+ * The component can be used as native `<button>` element or can embed `<a>` to redirect user to new page.
+ */
 
 const meta: Meta<typeof Button> = {
   title: "Atoms/Button",
@@ -20,7 +25,7 @@ const meta: Meta<typeof Button> = {
   },
   argTypes: {
     intent: {
-      options: ["primary", "secondary", "tertiary", "danger"],
+      options: ["primary", "secondary", "danger"],
       control: { type: "radio" },
     },
     variant: {
diff --git a/components/atoms/button/button.tsx b/components/atoms/button/button.tsx
index 6e6ab76..6aef252 100644
--- a/components/atoms/button/button.tsx
+++ b/components/atoms/button/button.tsx
@@ -11,7 +11,6 @@ const buttonVariants = cva(
       intent: {
         primary: "bg-primary-100 text-white hover:bg-primary-100/90",
         secondary: "bg-secondary-100 text-neutral-90 hover:bg-secondary-100/90",
-        tertiary: "bg-tertiary-100 text-neutral-90 hover:bg-tertiary-100/90",
         danger: "bg-danger-100 text-white hover:bg-danger-100/90",
       },
       variant: {
@@ -40,11 +39,6 @@ const buttonVariants = cva(
         variant: ["outline", "ghost"],
         className: "text-secondary-100 hover:bg-secondary-100/5",
       },
-      {
-        intent: "tertiary",
-        variant: ["outline", "ghost"],
-        className: "text-tertiary-100 hover:bg-tertiary-100/5",
-      },
       {
         intent: "danger",
         variant: ["outline", "ghost"],
@@ -60,11 +54,6 @@ const buttonVariants = cva(
         variant: "link",
         className: "text-secondary-100",
       },
-      {
-        intent: "tertiary",
-        variant: "link",
-        className: "text-tertiary-100",
-      },
       {
         intent: "danger",
         variant: "link",
diff --git a/components/atoms/skeleton/skeleton.stories.tsx b/components/atoms/skeleton/skeleton.stories.tsx
index 3d92491..e662f80 100644
--- a/components/atoms/skeleton/skeleton.stories.tsx
+++ b/components/atoms/skeleton/skeleton.stories.tsx
@@ -12,18 +12,12 @@ type Story = StoryObj<typeof Skeleton>;
 
 export const Default: Story = {
   render: () => (
-    <>
-      <Card>
-        <div className="flex w-full items-center gap-4">
-          <Skeleton className="h-10 w-10 rounded-full" />
-          <Skeleton className="h-8 w-20 flex-grow" />
-        </div>
-        <CardContent className="flex flex-col gap-2">
-          <Skeleton className="h-6 w-full " />
-          <Skeleton className="h-6 w-full " />
-          <Skeleton className="h-6 w-full " />
-        </CardContent>
-      </Card>
-    </>
+    <div className="flex w-full items-center gap-4">
+      <Skeleton className="h-10 w-10 rounded-full" />
+      <div>
+        <Skeleton className="mb-2 h-4 w-32 flex-grow" />
+        <Skeleton className="h-4 w-32 flex-grow" />
+      </div>
+    </div>
   ),
 };
diff --git a/components/atoms/calendar/calendar.stories.tsx b/components/molecules/calendar/calendar.stories.tsx
similarity index 96%
rename from components/atoms/calendar/calendar.stories.tsx
rename to components/molecules/calendar/calendar.stories.tsx
index 9053228..9fb8ff1 100644
--- a/components/atoms/calendar/calendar.stories.tsx
+++ b/components/molecules/calendar/calendar.stories.tsx
@@ -3,7 +3,7 @@ import { Calendar } from "./calendar";
 import { useState } from "react";
 
 const meta: Meta<typeof Calendar> = {
-  title: "Atoms/Calendar",
+  title: "Molecules/Calendar",
   component: Calendar,
   parameters: {
     layout: "centered",
diff --git a/components/atoms/calendar/calendar.tsx b/components/molecules/calendar/calendar.tsx
similarity index 98%
rename from components/atoms/calendar/calendar.tsx
rename to components/molecules/calendar/calendar.tsx
index b1eca1f..e84a620 100644
--- a/components/atoms/calendar/calendar.tsx
+++ b/components/molecules/calendar/calendar.tsx
@@ -5,7 +5,7 @@ import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons";
 import { DayPicker } from "react-day-picker";
 
 import { cn } from "@/lib/utils";
-import { buttonVariants } from "../button";
+import { buttonVariants } from "../../atoms/button";
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 
diff --git a/components/atoms/calendar/index.ts b/components/molecules/calendar/index.ts
similarity index 100%
rename from components/atoms/calendar/index.ts
rename to components/molecules/calendar/index.ts
diff --git a/components/molecules/card/card.stories.tsx b/components/molecules/card/card.stories.tsx
index 907c90e..6b3954c 100644
--- a/components/molecules/card/card.stories.tsx
+++ b/components/molecules/card/card.stories.tsx
@@ -9,23 +9,14 @@ const meta: Meta<typeof Card> = {
   parameters: {
     layout: "centered",
   },
-  args: {
-    intent: "neutral",
-  },
-  argTypes: {
-    intent: {
-      options: ["primary", "secondary", "tertiary", "neutral"],
-      control: { type: "radio" },
-    },
-  },
 };
 
 export default meta;
 type Story = StoryObj<typeof Card>;
 
 export const Default: Story = {
-  render: ({ intent }) => (
-    <Card className="w-96" intent={intent}>
+  render: () => (
+    <Card className="w-96">
       <CardContent>
         “Lorem ipsum dolor sit amet, consec tetur adi piscing elit. Praesent
         tellus leo, vesti bulum a ipsum sed, suscipit sodales ex. Vestibulum id
@@ -36,8 +27,8 @@ export const Default: Story = {
 };
 
 export const WithHeader: Story = {
-  render: ({ intent }) => (
-    <Card className="w-96" intent={intent}>
+  render: () => (
+    <Card className="w-96">
       <CardHeader headingLevel={2} title="Title" subheader="subheading" />
       <CardContent>
         “Lorem ipsum dolor sit amet, consec tetur adi piscing elit. Praesent
@@ -49,8 +40,8 @@ export const WithHeader: Story = {
 };
 
 export const WithAvatar: Story = {
-  render: ({ intent }) => (
-    <Card className="w-96" intent={intent}>
+  render: () => (
+    <Card className="w-96">
       <CardHeader
         avatar={
           <Avatar>
@@ -71,8 +62,8 @@ export const WithAvatar: Story = {
 };
 
 export const WithAction: Story = {
-  render: ({ intent }) => (
-    <Card className="w-96" intent={intent}>
+  render: () => (
+    <Card className="w-96">
       <CardContent>
         “Lorem ipsum dolor sit amet, consec tetur adi piscing elit. Praesent
         tellus leo, vesti bulum a ipsum sed, suscipit sodales ex. Vestibulum id
diff --git a/components/molecules/card/card.tsx b/components/molecules/card/card.tsx
index 37275d6..a7d4938 100644
--- a/components/molecules/card/card.tsx
+++ b/components/molecules/card/card.tsx
@@ -1,38 +1,22 @@
 import { cn } from "@/lib/utils";
 import React, { forwardRef } from "react";
-import { cva, type VariantProps } from "class-variance-authority";
 
-const cardVariants = cva(
-  "flex min-w-56 flex-col gap-4 p-6 shadow-md rounded-2xl",
-  {
-    variants: {
-      intent: {
-        primary: "bg-primary-90 text-neutral-10",
-        secondary: "bg-secondary-90 text-neutral-90",
-        tertiary: "bg-tertiary-90 text-neutral-90",
-        neutral: "bg-white text-neutral-90",
-      },
-    },
-    defaultVariants: {
-      intent: "neutral",
-    },
+const Card = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex min-w-56 flex-col gap-4 rounded-2xl bg-white p-6 text-neutral-90 shadow-md",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
   },
 );
-
-const Card = forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof cardVariants>
->(({ className, intent, children, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      className={cn(cardVariants({ intent }), className)}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-});
 Card.displayName = "Card";
 
 interface CardHeader extends React.HTMLAttributes<HTMLDivElement> {
diff --git a/components/molecules/carousel/carousel.stories.tsx b/components/molecules/carousel/carousel.stories.tsx
deleted file mode 100644
index 3f457f4..0000000
--- a/components/molecules/carousel/carousel.stories.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-} from "./carousel";
-import { Container } from "@/components/templates/container";
-
-const meta: Meta<typeof Carousel> = {
-  title: "Molecules/Carousel",
-  component: Carousel,
-  parameters: {
-    layout: "centered",
-  },
-  args: {
-    orientation: "horizontal",
-  },
-  argTypes: {
-    orientation: {
-      options: ["horizontal", "vertical"],
-      control: { type: "radio" },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Carousel>;
-
-export const Default: Story = {
-  render: ({ orientation }) => (
-    <Container>
-      <Carousel orientation={orientation} className="w-full max-w-md">
-        <CarouselContent>
-          {Array.from({ length: 5 }).map((_, index) => (
-            <CarouselItem key={index}>
-              <div className="flex aspect-square items-center justify-center rounded-lg bg-primary-90 p-6 text-white">
-                {index}
-              </div>
-            </CarouselItem>
-          ))}
-        </CarouselContent>
-        <CarouselPrevious />
-        <CarouselNext />
-      </Carousel>
-    </Container>
-  ),
-};
-
-export const Responsive: Story = {
-  render: ({ orientation }) => (
-    <Container>
-      <Carousel orientation={orientation} className="w-full max-w-md">
-        <CarouselContent className="-ml-4 p-2">
-          {Array.from({ length: 5 }).map((_, index) => (
-            <CarouselItem
-              key={index}
-              className="pl-4 md:basis-1/2 lg:basis-1/3"
-            >
-              <div className="flex aspect-square items-center justify-center rounded-lg bg-primary-90 p-6 text-white">
-                {index}
-              </div>
-            </CarouselItem>
-          ))}
-        </CarouselContent>
-        <CarouselPrevious />
-        <CarouselNext />
-      </Carousel>
-    </Container>
-  ),
-};
-
-export const Vertical: Story = {
-  args: {
-    orientation: "vertical",
-  },
-  render: ({ orientation }) => (
-    <Container>
-      <Carousel orientation={orientation} className="w-full max-w-md">
-        <CarouselContent className="-ml-4 p-2">
-          {Array.from({ length: 5 }).map((_, index) => (
-            <CarouselItem
-              key={index}
-              className="pl-4 md:basis-1/2 lg:basis-1/3"
-            >
-              <div className="flex aspect-square items-center justify-center rounded-lg bg-primary-90 p-6 text-white">
-                {index}
-              </div>
-            </CarouselItem>
-          ))}
-        </CarouselContent>
-        <CarouselPrevious />
-        <CarouselNext />
-      </Carousel>
-    </Container>
-  ),
-};
diff --git a/components/molecules/carousel/carousel.tsx b/components/molecules/carousel/carousel.tsx
deleted file mode 100644
index ca523cf..0000000
--- a/components/molecules/carousel/carousel.tsx
+++ /dev/null
@@ -1,260 +0,0 @@
-"use client";
-
-import * as React from "react";
-import useEmblaCarousel, {
-  type UseEmblaCarouselType,
-} from "embla-carousel-react";
-import { ArrowLeft, ArrowRight } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-import { Button } from "@/components/atoms/button";
-
-type CarouselApi = UseEmblaCarouselType[1];
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
-type CarouselOptions = UseCarouselParameters[0];
-type CarouselPlugin = UseCarouselParameters[1];
-
-type CarouselProps = {
-  opts?: CarouselOptions;
-  plugins?: CarouselPlugin;
-  orientation?: "horizontal" | "vertical";
-  setApi?: (api: CarouselApi) => void;
-};
-
-type CarouselContextProps = {
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
-  api: ReturnType<typeof useEmblaCarousel>[1];
-  scrollPrev: () => void;
-  scrollNext: () => void;
-  canScrollPrev: boolean;
-  canScrollNext: boolean;
-} & CarouselProps;
-
-const CarouselContext = React.createContext<CarouselContextProps | null>(null);
-
-function useCarousel() {
-  const context = React.useContext(CarouselContext);
-
-  if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />");
-  }
-
-  return context;
-}
-
-const Carousel = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & CarouselProps
->(
-  (
-    {
-      orientation = "horizontal",
-      opts,
-      setApi,
-      plugins,
-      className,
-      children,
-      ...props
-    },
-    ref,
-  ) => {
-    const [carouselRef, api] = useEmblaCarousel(
-      {
-        ...opts,
-        axis: orientation === "horizontal" ? "x" : "y",
-      },
-      plugins,
-    );
-    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
-    const [canScrollNext, setCanScrollNext] = React.useState(false);
-
-    const onSelect = React.useCallback((api: CarouselApi) => {
-      if (!api) {
-        return;
-      }
-
-      setCanScrollPrev(api.canScrollPrev());
-      setCanScrollNext(api.canScrollNext());
-    }, []);
-
-    const scrollPrev = React.useCallback(() => {
-      api?.scrollPrev();
-    }, [api]);
-
-    const scrollNext = React.useCallback(() => {
-      api?.scrollNext();
-    }, [api]);
-
-    const handleKeyDown = React.useCallback(
-      (event: React.KeyboardEvent<HTMLDivElement>) => {
-        if (event.key === "ArrowLeft") {
-          event.preventDefault();
-          scrollPrev();
-        } else if (event.key === "ArrowRight") {
-          event.preventDefault();
-          scrollNext();
-        }
-      },
-      [scrollPrev, scrollNext],
-    );
-
-    React.useEffect(() => {
-      if (!api || !setApi) {
-        return;
-      }
-
-      setApi(api);
-    }, [api, setApi]);
-
-    React.useEffect(() => {
-      if (!api) {
-        return;
-      }
-
-      onSelect(api);
-      api.on("reInit", onSelect);
-      api.on("select", onSelect);
-
-      return () => {
-        api?.off("select", onSelect);
-      };
-    }, [api, onSelect]);
-
-    return (
-      <CarouselContext.Provider
-        value={{
-          carouselRef,
-          api: api,
-          opts,
-          orientation:
-            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
-          scrollPrev,
-          scrollNext,
-          canScrollPrev,
-          canScrollNext,
-        }}
-      >
-        <div
-          ref={ref}
-          onKeyDownCapture={handleKeyDown}
-          className={cn("relative", className)}
-          role="region"
-          aria-roledescription="carousel"
-          {...props}
-        >
-          {children}
-        </div>
-      </CarouselContext.Provider>
-    );
-  },
-);
-Carousel.displayName = "Carousel";
-
-const CarouselContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const { carouselRef, orientation } = useCarousel();
-
-  return (
-    <div ref={carouselRef} className="overflow-hidden">
-      <div
-        ref={ref}
-        className={cn(
-          "flex",
-          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-          className,
-        )}
-        {...props}
-      />
-    </div>
-  );
-});
-CarouselContent.displayName = "CarouselContent";
-
-const CarouselItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const { orientation } = useCarousel();
-
-  return (
-    <div
-      ref={ref}
-      role="group"
-      aria-roledescription="slide"
-      className={cn(
-        "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-CarouselItem.displayName = "CarouselItem";
-
-const CarouselPrevious = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(({ className, variant = "ghost", size = "icon", ...props }, ref) => {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
-
-  return (
-    <Button
-      aria-label="Previous slide"
-      ref={ref}
-      variant={variant}
-      icon={<ArrowLeft />}
-      size="sm"
-      className={cn(
-        "absolute",
-        orientation === "horizontal"
-          ? "-left-2 top-1/2 -translate-y-1/2 md:-left-12"
-          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-        className,
-      )}
-      disabled={!canScrollPrev}
-      onClick={scrollPrev}
-      {...props}
-    />
-  );
-});
-CarouselPrevious.displayName = "CarouselPrevious";
-
-const CarouselNext = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(({ className, variant = "ghost", size = "icon", ...props }, ref) => {
-  const { orientation, scrollNext, canScrollNext } = useCarousel();
-
-  return (
-    <Button
-      aria-label="Next slide"
-      ref={ref}
-      variant={variant}
-      icon={<ArrowRight />}
-      size="sm"
-      className={cn(
-        "absolute",
-        orientation === "horizontal"
-          ? "-right-2 top-1/2 -translate-y-1/2 md:-right-12"
-          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-        className,
-      )}
-      disabled={!canScrollNext}
-      onClick={scrollNext}
-      {...props}
-    />
-  );
-});
-CarouselNext.displayName = "CarouselNext";
-
-export {
-  type CarouselApi,
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselPrevious,
-  CarouselNext,
-};
diff --git a/components/molecules/carousel/index.ts b/components/molecules/carousel/index.ts
deleted file mode 100644
index 5a7aa56..0000000
--- a/components/molecules/carousel/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import {
-  type CarouselApi,
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselPrevious,
-  CarouselNext,
-} from "./carousel";
-
-export {
-  type CarouselApi,
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselPrevious,
-  CarouselNext,
-};
diff --git a/docs/assets/figma-banner.png b/docs/assets/figma-banner.png
new file mode 100644
index 0000000..e6d1467
Binary files /dev/null and b/docs/assets/figma-banner.png differ
diff --git a/docs/assets/github.svg b/docs/assets/github.svg
new file mode 100644
index 0000000..f34395a
--- /dev/null
+++ b/docs/assets/github.svg
@@ -0,0 +1,10 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_120_2)">
+<path d="M14 0.346558C6.265 0.346558 0 6.61506 0 14.3466C0 20.5334 4.011 25.7799 9.5725 27.6291C10.2725 27.7609 10.5292 27.3281 10.5292 26.9559C10.5292 26.6234 10.5175 25.7426 10.5117 24.5759C6.61733 25.4206 5.796 22.6976 5.796 22.6976C5.159 21.0817 4.2385 20.6501 4.2385 20.6501C2.97033 19.7821 4.3365 19.7996 4.3365 19.7996C5.74233 19.8976 6.48083 21.2416 6.48083 21.2416C7.72917 23.3824 9.758 22.7641 10.5583 22.4059C10.6843 21.5006 11.0448 20.8834 11.445 20.5334C8.33583 20.1834 5.068 18.9794 5.068 13.6151C5.068 12.0867 5.6105 10.8384 6.50883 9.85839C6.35133 9.50489 5.87883 8.08156 6.63133 6.15306C6.63133 6.15306 7.80383 5.77739 10.4813 7.58806C11.6013 7.27656 12.7913 7.12256 13.9813 7.11556C15.1713 7.12256 16.3613 7.27656 17.4813 7.58806C20.1413 5.77739 21.3138 6.15306 21.3138 6.15306C22.0663 8.08156 21.5938 9.50489 21.4538 9.85839C22.3463 10.8384 22.8888 12.0867 22.8888 13.6151C22.8888 18.9934 19.6163 20.1776 16.5013 20.5217C16.9913 20.9417 17.4463 21.8004 17.4463 23.1117C17.4463 24.9854 17.4288 26.4904 17.4288 26.9454C17.4288 27.3129 17.6738 27.7504 18.3913 27.6104C23.9925 25.7741 28 20.5241 28 14.3466C28 6.61506 21.7315 0.346558 14 0.346558Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_120_2">
+<rect width="28" height="28" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/docs/assets/nomadhair-banner.png b/docs/assets/nomadhair-banner.png
new file mode 100644
index 0000000..8e2f1c2
Binary files /dev/null and b/docs/assets/nomadhair-banner.png differ
diff --git a/docs/assets/ui-library-banner.png b/docs/assets/ui-library-banner.png
new file mode 100644
index 0000000..c2fe775
Binary files /dev/null and b/docs/assets/ui-library-banner.png differ
diff --git a/docs/assets/x-twitter.svg b/docs/assets/x-twitter.svg
new file mode 100644
index 0000000..40d0de6
--- /dev/null
+++ b/docs/assets/x-twitter.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.901 1.15295H22.581L14.541 10.343L24 22.846H16.594L10.794 15.262L4.156 22.846H0.474L9.074 13.016L0 1.15395H7.594L12.837 8.08595L18.901 1.15295ZM17.61 20.644H19.649L6.486 3.23995H4.298L17.61 20.644Z" fill="black"/>
+</svg>
diff --git a/docs/colors.stories.mdx b/docs/colors.stories.mdx
new file mode 100644
index 0000000..aca587c
--- /dev/null
+++ b/docs/colors.stories.mdx
@@ -0,0 +1,65 @@
+import { Meta, ColorPalette, ColorItem } from "@storybook/blocks";
+
+<Meta title="Style Guide/Colors" />
+# Colors
+<br />
+<ColorPalette>
+  <ColorItem
+    title="Primary"
+    subtitle="Gun Powder"
+    colors={{
+      Primary110: "#323145",
+      Primary100: "#3f3d56",
+      Primary90: "#636176",
+      Primary15: "#bdbcc6",
+      Primary10: "#e1e1e6",
+    }}
+  />
+  <ColorItem
+    title="Secondary"
+    subtitle="Chrome Yellow"
+    colors={{
+      Primary110: "#c7861e",
+      Primary100: "#f9a826",
+      Primary90: "#fab951",
+      Primary15: "#ffd288",
+      Primary10: "#fefbf6",
+    }}
+  />
+  <ColorItem
+    title="Success"
+    subtitle="Celadon Green"
+    colors={{
+      Primary110: "#0d6a5e",
+      Primary100: "#108575",
+      Primary90: "#70b6ac",
+      Primary15: "#b7dad6",
+      Primary10: "#cfe7e3",
+    }}
+  />
+  <ColorItem
+    title="Danger"
+    subtitle="Jasper"
+    colors={{
+      Primary110: "#af2e2e",
+      Primary100: "#db3939",
+      Primary90: "#e26161",
+      Primary15: "#f4c4c4",
+      Primary10: "#f8d7d7",
+    }}
+  />
+  <ColorItem
+    title="Neutral"
+    subtitle="Greyscale"
+    colors={{
+      Black: "#000000",
+      Neutral100: "#060609",
+      Neutral90: "#13121a",
+      Neutral80: "#262534",
+      Neutral70: "#3f3d56",
+      Neutral15: "#cfcfd6",
+      Neutral10: "#f3f3f6",
+      White: "#ffffff",
+    }}
+  />
+</ColorPalette>
diff --git a/docs/introduction.stories.mdx b/docs/introduction.stories.mdx
new file mode 100644
index 0000000..c3d06fe
--- /dev/null
+++ b/docs/introduction.stories.mdx
@@ -0,0 +1,96 @@
+import { Meta } from "@storybook/blocks";
+import banner from "./assets/nomadhair-banner.png";
+
+<Meta title="Getting Started/Introduction" />
+
+<style>
+  {`
+  .link-list {
+    display: grid;
+    grid-template-column: 1fr;
+    gap: 1rem;
+  }
+  .link-item {
+    padding: 1rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    border: 1px solid #f3f3f6;
+    border-radius: 0.5rem;
+    transition: box-shadow 250ms ease, border-color 250ms ease, transform 250ms ease-in-out;
+    color: #555555;
+  }
+  .link-item:hover, .link-item:active {
+    border-color: #cfcfd6;
+    box-shadow: 5px 10px 20px #f3f3f6;
+    transform: translateY(-0.25rem);
+  }
+  .link-item strong {
+    display: block;
+  }
+  .link-item img {
+    border-radius: 0.5rem;
+  }
+
+  @media(min-width: 768px) {
+    .link-list {
+      grid-template-columns: 1fr 1fr;
+
+    }
+  }
+`}
+</style>
+
+# Welcome to the Component Library
+
+The source of truth for style and components when building product for NomadHair.
+Use this library as your development environment, documentation, and testing tools.
+
+<img src="/ui-library-banner.png" alt="ui library banner" />
+
+<br />
+### Check this out
+<br />
+<div className="link-list">
+  <a className="link-item" href="https://www.nomadhair.co" target="_blank">
+    <img src="/nomadhair-banner.png" width={128} alt="nomadhair banner" />
+    <span>
+      <strong>NomadHair app</strong>
+      Schedule your appointment today!
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://www.figma.com/design/cURR8cW2EUkTgpHLf5RiVW/NomadHair?node-id=1506-3194&t=t05Bq0jbqZLCBvss-1"
+    target="_blank"
+  >
+    <img src="/figma-banner.png" width={128} alt="figma banner" />
+    <span>
+      <strong>Figma design</strong>
+      Designed by Luke (Taek) Nam
+    </span>
+  </a>
+</div>
+
+<br />
+### Follow me for updates!
+<br />
+
+<div className="link-list">
+  <a className="link-item" href="https://x.com/luketbnam" target="_blank">
+    <img src="/x-twitter.svg" width={48} alt="x twitter" />
+    <span>
+      <strong>Twitter</strong>
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://github.com/tnamdevnote/nomadhair"
+    target="_blank"
+  >
+    <img src="/github.svg" width={48} alt="github" />
+    <span>
+      <strong>Github</strong>
+    </span>
+  </a>
+</div>
diff --git a/docs/typography.stories.mdx b/docs/typography.stories.mdx
new file mode 100644
index 0000000..264f99e
--- /dev/null
+++ b/docs/typography.stories.mdx
@@ -0,0 +1,53 @@
+import { Meta, Typeset } from "@storybook/blocks";
+
+<Meta title="Style Guide/Typography" />
+
+export const typography = {
+  type: {
+    heading: "'Montserrat'",
+    body: "'Quicksand'",
+  },
+  weight: {},
+  size: {
+    xs: 12,
+    sm: 14,
+    base: 16,
+    lg: 24,
+    xl: 36,
+    "2xl": 56,
+  },
+};
+
+export const SampleText =
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
+
+# Typography
+
+<br />
+## Heading
+
+**Font:** Montserrat
+
+<Typeset
+  fontSizes={[
+    Number(typography.size.lg),
+    Number(typography.size.xl),
+    Number(typography.size["2xl"]),
+  ]}
+  sampleText={SampleText}
+  fontFamily={typography.type.heading}
+/>
+
+## Body
+
+**Font:** Quicksand
+
+<Typeset
+  fontSizes={[
+    Number(typography.size.xs),
+    Number(typography.size.sm),
+    Number(typography.size.base),
+  ]}
+  sampleText={SampleText}
+  fontFamily={typography.type.body}
+/>