diff --git a/components/home/component-api.server.vue b/components/home/ComponentApi.server.vue
similarity index 88%
rename from components/home/component-api.server.vue
rename to components/home/ComponentApi.server.vue
index 0bc4373..2d8d6c5 100644
--- a/components/home/component-api.server.vue
+++ b/components/home/ComponentApi.server.vue
@@ -1,24 +1,59 @@
+<script setup lang="ts">
+import { chakra, useColorModeValue } from '@chakra-ui/vue-next';
+import AccessibilityIcon from '../icons/accessibility-icon';
+import ComposableIcon from '../icons/composable-icon';
+import ThemeIcon from '../icons/theme-icon';
+import StateMachineIcon from '../icons/state-machine-icon';
+
+const features = [
+  {
+    icon: AccessibilityIcon,
+    title: 'Accessibility',
+    description:
+      'Chakra UI strictly follows WAI-ARIA standards for all components.'
+  },
+  {
+    icon: ThemeIcon,
+    title: 'Design System friendly',
+    description:
+      'Customize any part of our components to match your design needs.'
+  },
+  {
+    icon: StateMachineIcon,
+    title: 'State Machine Driven',
+    description:
+      'Built with UI state machines for predictable and reliable UI. Powered by Zag.js'
+  },
+  {
+    icon: ComposableIcon,
+    title: 'Composable',
+    description:
+      'Designed with composition in mind. Compose new components with ease.'
+  }
+];
+</script>
+
 <template>
-  <c-container max-w="8xl" my="20">
-    <c-grid :template-columns="{ base: '1fr', sm: '1.5fr 1fr' }" max-w="50%">
-      <c-stack spacing="5">
+  <CContainer max-w="8xl" mt="10" mb="20">
+    <CGrid :template-columns="{ base: '1fr', sm: '1.5fr 1fr' }" max-w="50%">
+      <CStack spacing="5">
         <chakra.p
           :color="useColorModeValue('emerald.600', 'emerald.50').value"
           font-weight="bold"
           >Powerful Developer Experience</chakra.p
         >
-        <c-heading> Develop with an open, extendable API </c-heading>
+        <CHeading> Develop with an open, extendable API </CHeading>
         <chakra.p>
           Chakra UI Vue components can be customized at any level - whether it's
           at the component level, or the theme level. You can also extend the
           components to add new features, or override existing ones.
         </chakra.p>
-        <c-grid
+        <CGrid
           gap="4"
           :w="{ base: 'full', sm: 'fit-content' }"
           :template-columns="{ base: 'repeat(1, 1fr)', sm: 'repeat(4, auto)' }"
         >
-          <c-stack
+          <CStack
             v-for="(feature, i) in features"
             :key="i"
             :border="
@@ -57,45 +92,10 @@
             <chakra.p>
               {{ feature.description }}
             </chakra.p>
-          </c-stack>
-        </c-grid>
-      </c-stack>
-      <c-center />
-    </c-grid>
-  </c-container>
+          </CStack>
+        </CGrid>
+      </CStack>
+      <CCenter />
+    </CGrid>
+  </CContainer>
 </template>
-
-<script setup lang="ts">
-import { chakra, useColorModeValue } from '@chakra-ui/vue-next';
-import AccessibilityIcon from '../icons/accessibility-icon';
-import ComposableIcon from '../icons/composable-icon';
-import ThemeIcon from '../icons/theme-icon';
-import StateMachineIcon from '../icons/state-machine-icon';
-
-const features = [
-  {
-    icon: AccessibilityIcon,
-    title: 'Accessibility',
-    description:
-      'Chakra UI strictly follows WAI-ARIA standards for all components.'
-  },
-  {
-    icon: ThemeIcon,
-    title: 'Design System friendly',
-    description:
-      'Customize any part of our components to match your design needs.'
-  },
-  {
-    icon: StateMachineIcon,
-    title: 'State Machine Driven',
-    description:
-      'Built with UI state machines for predictable and reliable UI. Powered by Zag.js'
-  },
-  {
-    icon: ComposableIcon,
-    title: 'Composable',
-    description:
-      'Designed with composition in mind. Compose new components with ease.'
-  }
-];
-</script>
diff --git a/components/home/DiscordHero.server.vue b/components/home/DiscordHero.server.vue
index b84286a..36ab3f6 100644
--- a/components/home/DiscordHero.server.vue
+++ b/components/home/DiscordHero.server.vue
@@ -12,7 +12,7 @@ import { chakra, CBox, CButton, CFlex, CIcon } from '@chakra-ui/vue-next';
     color="white"
     bg="discord.accessible"
     :h="['auto', 'auto', 'auto', 40]"
-    :px="[4, 10, 12]"
+    :px="[8, 20, 24]"
     :mt="[4, 10, 10]"
   >
     <CFlex
@@ -52,6 +52,9 @@ import { chakra, CBox, CButton, CFlex, CIcon } from '@chakra-ui/vue-next';
         bg="white"
         shadow="lg"
         :w="{ base: '100%', lg: 'auto' }"
+        :_hover="{
+          backgroundColor: 'whiteAlpha.900'
+        }"
       >
         Join the #Chakra Discord!
       </CButton>
diff --git a/layouts/default.vue b/layouts/default.vue
index e31d70f..90dd542 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -14,19 +14,20 @@ const color = useColorModeValue('gray.700', 'white');
     <TopNavigation />
     <chakra.div max-w="8xl" mx="auto" d="flex">
       <!-- Sidebar Navigation -->
-      <chakra.div :display="{ base: 'none', lg: 'block' }" position="fixed" z-index="30" bottom="0" top="6rem"
+      <chakra.div
+        :display="{ base: 'none', lg: 'block' }" position="fixed" z-index="30" bottom="0" top="6rem"
         left="max(0px, calc(50% - 45rem))" right="auto" width="19.5rem" pb="10" px="8" overflow-y="auto"
         overscroll-behavior="contain">
-        <sidebar />
+        <Sidebar />
       </chakra.div>
       <chakra.main :pl="{ base: 4, lg: '19.5rem' }" pt="4" pb="24" :pr="{ base: 4, xl: 16 }" class="chakra-prose">
         <chakra.div :mr="{ xl: '15.5rem' }" :pl="{ base: 2, lg: '1rem' }">
           <slot />
 
-          <c-h-stack align-items="center" mt="6">
-            <c-icon name="info" />
+          <CHStack align-items="center" mt="6">
+            <CIcon name="info" />
             <p>Edit this page on GitHub</p>
-          </c-h-stack>
+          </CHStack>
         </chakra.div>
         <!-- <table-of-contents /> -->
       </chakra.main>
diff --git a/pages/index.vue b/pages/index.vue
index f11887f..efb0dc2 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -2,19 +2,16 @@
 import { chakra } from '@chakra-ui/vue-next';
 import StartHero from '../components/home/StartHero.server.vue';
 import { siteDescription, siteName } from '~/config/site-config';
+
+const ComponentApi = defineAsyncComponent(
+  () => import('../components/home/ComponentApi.server.vue')
+);
 const DiscordHero = defineAsyncComponent(
   () => import('../components/home/DiscordHero.server.vue')
 );
 const Footer = defineAsyncComponent(
   () => import('../components/home/Footer.server.vue')
 );
-const HomeFeatures = defineAsyncComponent(
-  () => import('../components/home/features.server.vue')
-);
-
-const ComponentApi = defineAsyncComponent(
-  () => import('../components/home/component-api.server.vue')
-);
 
 definePageMeta({
   layout: 'home'
@@ -34,7 +31,6 @@ useHead({
 <template>
   <chakra.main :min-h="['auto', 'auto', '100vh']" w="100%">
     <StartHero />
-    <HomeFeatures />
     <ComponentApi />
     <DiscordHero />
     <Footer />