diff --git a/React/comp_library/package-lock.json b/React/comp_library/package-lock.json
index d8bf350..37b6b93 100644
--- a/React/comp_library/package-lock.json
+++ b/React/comp_library/package-lock.json
@@ -8,6 +8,7 @@
       "name": "storybook",
       "version": "0.1.0",
       "dependencies": {
+        "@chakra-ui/icons": "^2.1.1",
         "@chakra-ui/react": "^2.8.2",
         "@emotion/react": "^11.13.0",
         "@emotion/styled": "^11.13.0",
@@ -28,7 +29,6 @@
         "@storybook/addon-essentials": "^8.2.8",
         "@storybook/addon-interactions": "^8.2.8",
         "@storybook/addon-links": "^8.2.8",
-        "@storybook/addon-onboarding": "^8.2.8",
         "@storybook/blocks": "^8.2.8",
         "@storybook/preset-create-react-app": "^8.2.8",
         "@storybook/react": "^8.2.8",
@@ -2445,6 +2445,18 @@
         "react": ">=18"
       }
     },
+    "node_modules/@chakra-ui/icons": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/icons/-/icons-2.1.1.tgz",
+      "integrity": "sha512-3p30hdo4LlRZTT5CwoAJq3G9fHI0wDc0pBaMHj4SUn0yomO+RcDRlzhdXqdr5cVnzax44sqXJVnf3oQG0eI+4g==",
+      "dependencies": {
+        "@chakra-ui/icon": "3.2.0"
+      },
+      "peerDependencies": {
+        "@chakra-ui/system": ">=2.0.0",
+        "react": ">=18"
+      }
+    },
     "node_modules/@chakra-ui/image": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/@chakra-ui/image/-/image-2.1.0.tgz",
@@ -6330,22 +6342,6 @@
         "storybook": "^8.2.8"
       }
     },
-    "node_modules/@storybook/addon-onboarding": {
-      "version": "8.2.8",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-onboarding/-/addon-onboarding-8.2.8.tgz",
-      "integrity": "sha512-fKy3uwggIZKFQL9qo4niVYnAhMAdO/xBsEzJNj2ueTaWoJYO6c0jDWhVQW3pxlMw6yq/WdYT6tW/lsbHKFBUVQ==",
-      "dev": true,
-      "dependencies": {
-        "react-confetti": "^6.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      },
-      "peerDependencies": {
-        "storybook": "^8.2.8"
-      }
-    },
     "node_modules/@storybook/addon-outline": {
       "version": "8.2.8",
       "resolved": "https://registry.npmjs.org/@storybook/addon-outline/-/addon-outline-8.2.8.tgz",
diff --git a/React/comp_library/package.json b/React/comp_library/package.json
index 223eec5..a175504 100644
--- a/React/comp_library/package.json
+++ b/React/comp_library/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@chakra-ui/icons": "^2.1.1",
     "@chakra-ui/react": "^2.8.2",
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
diff --git a/React/comp_library/src/components/Button.tsx b/React/comp_library/src/components/Button.tsx
deleted file mode 100644
index 5ab22f4..0000000
--- a/React/comp_library/src/components/Button.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import * as React from 'react';
-
-interface ButtonProps {
-  /**
-   * Is this the principal call to action on the page?
-   */
-  primary?: boolean;
-  /**
-   * What background color to use
-   */
-  backgroundColor?: string;
-  /**
-   * How large should the button be?
-   */
-  size?: 'small' | 'medium' | 'large';
-  /**
-   * Button contents
-   */
-  label: string;
-  /**
-   * Optional click handler
-   */
-  onClick?: () => void;
-}
-
-export const Button: React.FC<ButtonProps> = ({
-  primary = false,
-  size = 'medium',
-  backgroundColor,
-  label,
-  onClick,
-  ...props
-}) => {
-  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
-  return (
-    <button
-      type="button"
-      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
-      style={backgroundColor ? { backgroundColor } : {}}
-      onClick={onClick}
-      {...props}
-    >
-      {label}
-    </button>
-  );
-};
\ No newline at end of file
diff --git a/React/comp_library/src/components/CaseStudy.tsx b/React/comp_library/src/components/CaseStudy.tsx
new file mode 100644
index 0000000..cd28733
--- /dev/null
+++ b/React/comp_library/src/components/CaseStudy.tsx
@@ -0,0 +1,55 @@
+import { Box, Fade, Heading, Image, Text } from "@chakra-ui/react";
+import { motion } from "framer-motion";
+import React from "react";
+
+const MotionHeading = motion(Heading);
+const MotionText = motion(Text);
+
+type SectionType = {
+  heading: string;
+  content: string;}
+
+const CaseStudy = ({ sections }: { sections: SectionType[] }) => {
+  return (
+    <Box
+      backgroundSize="cover"
+      backgroundPosition="center"
+      minHeight="100vh"
+      display="flex"
+      flexDirection="column"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <Image
+        src={"https://picsum.photos/600/200"}
+        alt="Illustration"
+        width="600px"
+        mb={10}
+      />
+
+      {sections.map((section, index) => (
+        <Fade key={index} in>
+          <Box maxW="600px" p={6} bgColor="white" shadow="lg" mb={6}>
+            <MotionHeading
+              mb={4}
+              fontSize="xl"
+              textAlign="center"
+              whileHover={{ y: -5 }}
+            >
+              {section.heading}
+            </MotionHeading>
+            <MotionText
+              fontSize="md"
+              textAlign="justify"
+              whileHover={{ y: -3 }}
+            >
+              {section.content}
+            </MotionText>
+          </Box>
+        </Fade>
+      ))}
+    </Box>
+  );
+};
+
+export default CaseStudy;
diff --git a/React/comp_library/src/components/ColorModeToggle.tsx b/React/comp_library/src/components/ColorModeToggle.tsx
new file mode 100644
index 0000000..476ae7d
--- /dev/null
+++ b/React/comp_library/src/components/ColorModeToggle.tsx
@@ -0,0 +1,46 @@
+import { MoonIcon, SunIcon } from "@chakra-ui/icons";
+import {
+  AbsoluteCenter,
+  FormControl,
+  FormLabel,
+  Switch,
+  useColorMode,
+  useColorModeValue,
+} from "@chakra-ui/react";
+import * as React from "react";
+
+export default function ColorModeToggle() {
+  const { colorMode, toggleColorMode } = useColorMode();
+  const icon_color = useColorModeValue(
+    "colors.brand.secondary.900",
+    "colors.brand.primary.900",
+  );
+  return (
+    <FormControl paddingInline={2} maxW={20} color={icon_color}>
+      <FormLabel htmlFor="colorMode" display={"none"} />
+      <Switch
+        id="colorMode"
+        colorScheme="colors.brand.primary"
+        onChange={toggleColorMode}
+        title=""
+        size={"lg"}
+        cursor={"pointer"}
+        aria-label="Toggle color mode"
+      >
+        <AbsoluteCenter>
+          {colorMode === "light" ? (
+            <MoonIcon
+              position={"relative"}
+              // boxSize={4}
+              left={-4}
+              // ml={-6}
+              userSelect={"none"}
+            />
+          ) : (
+            <SunIcon position={"relative"} right={-2} userSelect={"none"} />
+          )}
+        </AbsoluteCenter>
+      </Switch>
+    </FormControl>
+  );
+}
diff --git a/React/comp_library/src/components/ContactForm.tsx b/React/comp_library/src/components/ContactForm.tsx
new file mode 100644
index 0000000..655a5f0
--- /dev/null
+++ b/React/comp_library/src/components/ContactForm.tsx
@@ -0,0 +1,95 @@
+import {
+  Box,
+  Button,
+  FormControl,
+  FormLabel,
+  Heading,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  Textarea,
+  VStack,
+} from "@chakra-ui/react";
+import React from "react";
+import { BsPerson } from "react-icons/bs/index.js";
+import { MdOutlineEmail } from "react-icons/md/index.js";
+
+export default function ContactForm() {
+  return (
+    <VStack>
+      <Heading >Contact Us</Heading>
+    <form
+      name="contact_form"
+      method="POST"
+      data-netlify="true"
+      data-netlify-recaptcha="true"
+      // action="/pages/success/" //netlify not allowing me to redirect properly; need further investigaion
+      // @ts-expect-error: 'netlify' prop is not on 'form' but required for netlify form-detection
+      netlify={"true"}
+    >
+      <FormControl id="subject" isRequired>
+        <Input
+          type="hidden"
+          name="subject"
+          value="New lead from TenKSolutions.com"
+        />
+      </FormControl>
+      <Input type="hidden" name="form-name" value="contact_form" />
+      {/**
+       * Hi, My name is *Name*, working at *company* as the *title*; We would like to *issues*. Contact me at *email/phone* 
+       */}
+      <VStack spacing={5} color="black">
+        <FormControl id="name" isRequired>
+          <FormLabel>Your Name</FormLabel>
+          <InputGroup borderColor="#E0E1E7">
+            <InputLeftElement
+              pointerEvents="none"
+              children={<BsPerson color="gray.800" />}
+            />
+            <Input type="text" size="md" name="name" autoComplete="name" />
+          </InputGroup>
+        </FormControl>
+        <FormControl id="email" isRequired>
+          <FormLabel>E-Mail</FormLabel>
+          <InputGroup borderColor="#E0E1E7">
+            <InputLeftElement
+              pointerEvents="none"
+              children={<MdOutlineEmail color="gray.800" />}
+            />
+            <Input type="email" size="md" name="email" autoComplete="email" />
+          </InputGroup>
+          {/* <FormHelperText>
+                  We'll never share your email.
+                </FormHelperText> */}
+        </FormControl>
+        <FormControl id="message" isRequired>
+          <FormLabel>Message</FormLabel>
+          <Textarea
+            borderColor="gray.300"
+            _hover={{
+              borderRadius: "gray.300",
+            }}
+            placeholder="I'd like to ..."
+            name="message"
+            autoComplete="off"
+          />
+        </FormControl>
+        <Box data-netlify-recaptcha="true" />
+        <FormControl id="submit" float="right">
+          <Button
+            w="100%"
+            variant="solid"
+            bg="#0D74FF"
+            color="white"
+            _hover={{}}
+            type="submit"
+            title="Contact TenK Solutions"
+          >
+            Send Message
+          </Button>
+        </FormControl>
+      </VStack>
+    </form>
+    </VStack>
+  );
+}
diff --git a/React/comp_library/src/components/FeaturesCard.tsx b/React/comp_library/src/components/FeaturesCard.tsx
new file mode 100644
index 0000000..d7b81c4
--- /dev/null
+++ b/React/comp_library/src/components/FeaturesCard.tsx
@@ -0,0 +1,133 @@
+import {
+  Accordion,
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+  As,
+  Box,
+  Button,
+  Flex,
+  Heading,
+  Icon,
+  Link,
+  ListItem,
+  Stack,
+  Text,
+  UnorderedList,
+  useColorModeValue,
+} from "@chakra-ui/react";
+import React from "react";
+
+export type FCardProps = [
+  heading: string,
+  description: string,
+  icon: undefined | As,
+  features: string[],
+  img: string,
+  cta: string
+];
+
+export const FeaturesCard = ({
+  heading,
+  description,
+  icon,
+  features,
+  image,
+  cta,
+}: {
+  heading: FCardProps[0];
+  description: FCardProps[1];
+  icon: FCardProps[2];
+  features: FCardProps[3];
+  image: FCardProps[4];
+  cta: FCardProps[5];
+}) => {
+  const color_gray = useColorModeValue("gray.100", "gray.700");
+  const color_primary = useColorModeValue(
+    "colors.brand.primary.100",
+    "colors.brand.primary.900",
+  );
+  const accordion_button_text = useColorModeValue(
+    "colors.brand.secondary.900",
+    "colors.brand.secondary.50",
+  );
+  const feature_gradient = useColorModeValue(
+    "linear(colors.brand.primary.900,white 7em)",
+    "linear(colors.brand.primary.200,black 7em)",
+  );
+  const feature_color_mode = useColorModeValue("screen", "multiply");
+  return (
+    <Box
+      w={300}
+      borderWidth="1px"
+      borderRadius="md"
+      borderColor={color_primary}
+      overflow="hidden"
+      p={5}
+      alignItems={"center"}
+      backgroundSize={"contain"}
+      //[screen, lighten, hard-light, color-dodge, luminosity]
+      backgroundBlendMode={feature_color_mode}
+      bgGradient={`${feature_gradient}, url(${image})`}
+    >
+      <Stack align={"center"} spacing={4}>
+        <Flex
+          w={16}
+          h={16}
+          align={"center"}
+          justify={"center"}
+          rounded={"full"}
+          bg={color_gray}
+        >
+          <Icon as={icon} boxSize={10} />
+        </Flex>
+        <Heading as={"h2"} size="md" textAlign={"center"} h={10}>
+          {heading}
+        </Heading>
+        <Box>
+          <Text
+            mt={1}
+            fontSize={"sm"}
+            textAlign={"left"}
+            alignContent={"center"}
+            pb={3}
+            h={{ base: 200 }}
+          >
+            {description}
+          </Text>
+          <Accordion allowMultiple defaultIndex={[0,1,2]}>
+            <AccordionItem >
+              <AccordionButton
+                justifyContent={"space-between"}
+                color={accordion_button_text}
+                bg={color_gray}
+              >
+                <Heading pl={2} size="xs">
+                  Offered Services:
+                </Heading>
+                <AccordionIcon />
+              </AccordionButton>
+              <AccordionPanel pb={3} pr={0}>
+                <UnorderedList>
+                  {features.map((feature, i) => (
+                    <ListItem key={i}>
+                      <Heading as="h3" fontSize={12}>
+                        {feature}
+                      </Heading>
+                    </ListItem>
+                  ))}
+                </UnorderedList>
+              </AccordionPanel>
+            </AccordionItem>
+          </Accordion>
+        </Box>
+        <Link href={"/contact-us"} title="Contact TenK Solutions, LLC">
+          <Button size={"sm"} mt={3} title="Contact TenK Solutions, LLC">
+            {cta}
+          </Button>
+        </Link>
+      </Stack>
+    </Box>
+  );
+};
diff --git a/React/comp_library/src/components/Header.tsx b/React/comp_library/src/components/Header.tsx
deleted file mode 100644
index 101bd34..0000000
--- a/React/comp_library/src/components/Header.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import * as React from 'react';
-import { Button } from './Button';
-
-interface User {
- name: string;
-}
-
-interface HeaderProps {
- user: User | null;
- onLogin: () => void;
- onLogout: () => void;
- onCreateAccount: () => void;
-}
-
-export const Header: React.FC<HeaderProps> = ({
- user,
- onLogin,
- onLogout,
- onCreateAccount,
-}) => (
- <header>
-   <div className="storybook-header">
-     <div>
-       <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
-         <g fill="none" fillRule="evenodd">
-           <path
-             d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
-             fill="#FFF"
-           />
-           <path
-             d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
-             fill="#555AB9"
-           />
-           <path
-             d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
-             fill="#91BAF8"
-           />
-         </g>
-       </svg>
-       <h1>Acme</h1>
-     </div>
-     <div>
-       {user ? (
-         <>
-           <span className="welcome">
-             Welcome, <b>{user.name}</b>!
-           </span>
-           <Button size="small" onClick={onLogout} label="Log out" />
-         </>
-       ) : (
-         <>
-           <Button size="small" onClick={onLogin} label="Log in" />
-           <Button primary size="small" onClick={onCreateAccount} label="Sign up" />
-         </>
-       )}
-     </div>
-   </div>
- </header>
-);
\ No newline at end of file
diff --git a/React/comp_library/src/components/Page.tsx b/React/comp_library/src/components/Page.tsx
deleted file mode 100644
index abca779..0000000
--- a/React/comp_library/src/components/Page.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import * as React from "react";
-
-import { Header } from "./Header";
-import "./page.css";
-
-interface User {
-  name: string;
-}
-
-export const Page: React.FC = () => {
-  const [user, setUser] = React.useState<User | null>(null);
-
-  return (
-    <article>
-      <Header
-        user={user}
-        onLogin={() => setUser({ name: "Jane Doe" })}
-        onLogout={() => setUser(null)}
-        onCreateAccount={() => setUser({ name: "Jane Doe" })}
-      />
-
-      <section className="storybook-page">
-        <h2>Pages in Storybook</h2>
-        <p>
-          We recommend building UIs with a{" "}
-          <a
-            href="https://componentdriven.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <strong>component-driven</strong>
-          </a>{" "}
-          process starting with atomic components and ending with pages.
-        </p>
-        <p>
-          Render pages with mock data. This makes it easy to build and review
-          page states without needing to navigate to them in your app. Here are
-          some handy patterns for managing page data in Storybook:
-        </p>
-        <ul>
-          <li>
-            Use a higher-level connected component. Storybook helps you compose
-            such data from the "args" of child component stories
-          </li>
-          <li>
-            Assemble data in the page component from your services. You can mock
-            these services out using Storybook.
-          </li>
-        </ul>
-        <p>
-          Get a guided tutorial on component-driven development at{" "}
-          <a
-            href="https://storybook.js.org/tutorials/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Storybook tutorials
-          </a>
-          . Read more in the{" "}
-          <a
-            href="https://storybook.js.org/docs"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            docs
-          </a>
-          .
-        </p>
-        <div className="tip-wrapper">
-          <span className="tip">Tip</span> Adjust the width of the canvas with
-          the{" "}
-          <svg
-            width="10"
-            height="10"
-            viewBox="0 0 12 12"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <g fill="none" fillRule="evenodd">
-              <path
-                d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
-                id="a"
-                fill="#999"
-              />
-            </g>
-          </svg>
-          Viewports addon in the toolbar
-        </div>
-      </section>
-    </article>
-  );
-};
diff --git a/React/comp_library/src/components/PartnerCard.tsx b/React/comp_library/src/components/PartnerCard.tsx
new file mode 100644
index 0000000..e70d720
--- /dev/null
+++ b/React/comp_library/src/components/PartnerCard.tsx
@@ -0,0 +1,56 @@
+import { Box, Flex, Link, useColorModeValue } from "@chakra-ui/react";
+import React from "react";
+
+export const PartnerCard = ({
+  name,
+  logo,
+  website,
+}: {
+  name?: string;
+  logo: string;
+  website: string;
+}) => {
+  const bgColor = useColorModeValue("white", "#1A202C");
+  const blendMode = useColorModeValue("luminosity", "exclusion");
+  return (
+    <Link
+      href={website}
+      isExternal
+      _hover={{ textDecoration: "none" }}
+      title={website}
+    >
+      <Flex
+        direction="column"
+        align="center"
+        justify="center"
+        p={4}
+        borderRadius="md"
+      >
+        {/* <Image src={logo} alt={`${name} Logo`} maxH="80px" mb={4} backgroundColor="black"/> */}
+        <Box
+          backgroundImage={logo}
+          borderRadius={"md"}
+          w={{ base: "150px", md: "200px" }}
+          h={{ base: "50px", md: "80px" }}
+          role="img"
+          aria-roledescription={name}
+          aria-label={name}
+          transition="all 0.3s"
+          _hover={{
+            transform: "scale(1.05)",
+            bgColor: "whiteAlpha.300",
+            mixBlendMode: "normal",
+          }}
+          mixBlendMode={blendMode}
+          backgroundColor={bgColor}
+          backgroundSize={"contain"}
+          backgroundRepeat={"no-repeat"}
+          backgroundPosition={"center"}
+          opacity={0.6}
+          // border={"1px solid red"}
+          boxShadow={"2xl"}
+        />
+      </Flex>
+    </Link>
+  );
+};
diff --git a/React/comp_library/src/components/PriceCard.tsx b/React/comp_library/src/components/PriceCard.tsx
new file mode 100644
index 0000000..e8542f6
--- /dev/null
+++ b/React/comp_library/src/components/PriceCard.tsx
@@ -0,0 +1,116 @@
+import {
+  Box,
+  Button,
+  Link,
+  List,
+  ListIcon,
+  ListItem,
+  Text,
+  VStack,
+  useColorModeValue,
+} from "@chakra-ui/react";
+import React, { ReactNode } from "react";
+import { IconType } from "react-icons";
+function PriceWrapper({ children }: { children: ReactNode }) {
+  const borderColorValue = useColorModeValue("gray.200", "gray.500");
+  return (
+    <Box
+      minWidth={300}
+      mb={4}
+      shadow="base"
+      borderWidth="1px"
+      alignSelf={"center"}
+      borderColor={borderColorValue}
+      borderRadius={"xl"}
+      textAlign={'center'}
+    >
+      {children}
+    </Box>
+  );
+}
+
+export function PriceCard({
+  isFeatured,
+  title,
+  // price,
+  // period,
+  items,
+  cta,
+}: {
+  isFeatured: boolean | undefined;
+  title: string;
+  price?: number;
+  period?: string;
+  items:
+    | { icon: IconType; item: string }[]
+    | { item: string; icon: IconType }[];
+  cta: string;
+}): React.JSX.Element {
+  const textBGColorValue = useColorModeValue("red.300", "red.700");
+  const textColorValue = useColorModeValue("gray.900", "gray.300");
+  const stackColorValue = useColorModeValue("gray.50", "gray.700");
+  return (
+    <PriceWrapper>
+      <Box position="relative" 
+        >
+        {isFeatured && (
+          <Box
+            position="absolute"
+            top="-16px"
+            left="50%"
+            style={{ transform: "translate(-50%)" }}
+          >
+            <Text
+              textTransform="uppercase"
+              bg={textBGColorValue}
+              px={3}
+              py={1}
+              color={textColorValue}
+              fontSize="sm"
+              fontWeight="600"
+              rounded="xl"
+            >
+              Most Popular
+            </Text>
+          </Box>
+        )}
+      </Box>
+      <Box py={4} px={6}>
+        <Text fontWeight="500" fontSize="2xl">
+          {title}
+        </Text>
+        {/* <HStack justifyContent="center">
+          <Text fontSize="x-small" fontWeight="600">
+            starting at
+          </Text>
+          <Text fontSize="3xl" fontWeight="600">
+            $
+          </Text>
+          <Text fontSize="5xl" fontWeight="900">
+            {price}
+          </Text>
+          <Text fontSize="xl" color="gray.500">
+            {period}
+          </Text>
+        </HStack> */}
+      </Box>
+      <VStack bg={stackColorValue} py={4} borderBottomRadius={"xl"}>
+        <List spacing={3} textAlign="start" px={6}>
+          {items.map(({ icon, item }, i) => (
+            <ListItem key={i}>
+              <ListIcon as={icon} color="colors.brand.accent.500" />
+              <Text as={"span"}>{item}</Text>
+            </ListItem>
+          ))}
+        </List>
+        <Box w="80%" pt={7}>
+          <Link href={"/contact-us"} title="Contact TenK Solutions">
+            <Button w="full" title={`TenK Solutions + ${cta}`}>
+              {cta}
+            </Button>
+          </Link>
+        </Box>
+      </VStack>
+    </PriceWrapper>
+  );
+}
diff --git a/React/comp_library/src/components/button.css b/React/comp_library/src/components/button.css
deleted file mode 100644
index dc91dc7..0000000
--- a/React/comp_library/src/components/button.css
+++ /dev/null
@@ -1,30 +0,0 @@
-.storybook-button {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-weight: 700;
-  border: 0;
-  border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
-  line-height: 1;
-}
-.storybook-button--primary {
-  color: white;
-  background-color: #1ea7fd;
-}
-.storybook-button--secondary {
-  color: #333;
-  background-color: transparent;
-  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
-}
-.storybook-button--small {
-  font-size: 12px;
-  padding: 10px 16px;
-}
-.storybook-button--medium {
-  font-size: 14px;
-  padding: 11px 20px;
-}
-.storybook-button--large {
-  font-size: 16px;
-  padding: 12px 24px;
-}
diff --git a/React/comp_library/src/components/header.css b/React/comp_library/src/components/header.css
deleted file mode 100644
index d9a7052..0000000
--- a/React/comp_library/src/components/header.css
+++ /dev/null
@@ -1,32 +0,0 @@
-.storybook-header {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  padding: 15px 20px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.storybook-header svg {
-  display: inline-block;
-  vertical-align: top;
-}
-
-.storybook-header h1 {
-  font-weight: 700;
-  font-size: 20px;
-  line-height: 1;
-  margin: 6px 0 6px 10px;
-  display: inline-block;
-  vertical-align: top;
-}
-
-.storybook-header button + button {
-  margin-left: 10px;
-}
-
-.storybook-header .welcome {
-  color: #333;
-  font-size: 14px;
-  margin-right: 10px;
-}
diff --git a/React/comp_library/src/components/page.css b/React/comp_library/src/components/page.css
deleted file mode 100644
index 098dad1..0000000
--- a/React/comp_library/src/components/page.css
+++ /dev/null
@@ -1,69 +0,0 @@
-.storybook-page {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-size: 14px;
-  line-height: 24px;
-  padding: 48px 20px;
-  margin: 0 auto;
-  max-width: 600px;
-  color: #333;
-}
-
-.storybook-page h2 {
-  font-weight: 700;
-  font-size: 32px;
-  line-height: 1;
-  margin: 0 0 4px;
-  display: inline-block;
-  vertical-align: top;
-}
-
-.storybook-page p {
-  margin: 1em 0;
-}
-
-.storybook-page a {
-  text-decoration: none;
-  color: #1ea7fd;
-}
-
-.storybook-page ul {
-  padding-left: 30px;
-  margin: 1em 0;
-}
-
-.storybook-page li {
-  margin-bottom: 8px;
-}
-
-.storybook-page .tip {
-  display: inline-block;
-  border-radius: 1em;
-  font-size: 11px;
-  line-height: 12px;
-  font-weight: 700;
-  background: #e7fdd8;
-  color: #66bf3c;
-  padding: 4px 12px;
-  margin-right: 10px;
-  vertical-align: top;
-}
-
-.storybook-page .tip-wrapper {
-  font-size: 13px;
-  line-height: 20px;
-  margin-top: 40px;
-  margin-bottom: 40px;
-}
-
-.storybook-page .tip-wrapper svg {
-  display: inline-block;
-  height: 12px;
-  width: 12px;
-  margin-right: 4px;
-  vertical-align: top;
-  margin-top: 3px;
-}
-
-.storybook-page .tip-wrapper svg path {
-  fill: #1ea7fd;
-}
diff --git a/React/comp_library/src/stories/Button.stories.tsx b/React/comp_library/src/stories/Button.stories.tsx
deleted file mode 100644
index 654d26a..0000000
--- a/React/comp_library/src/stories/Button.stories.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { Button } from '@chakra-ui/react';
-import { fn } from '@storybook/test';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-export default {
-  title: 'components/Button',
-  component: Button,
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
-  },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
-  args: { onClick: fn() },
-};
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Primary = {
-  args: {
-    variant: 'outline',
-    children: 'Button',
-  },
-};
-
-export const Secondary = {
-  args: {
-    children: 'Button',
-  },
-};
-
-export const Large = {
-  args: {
-    size: 'lg',
-    children: 'Button',
-  },
-};
-
-export const Small = {
-  args: {
-    size: 'sm',
-    children: 'Button',
-  },
-};
diff --git a/React/comp_library/src/stories/CaseStudy.stories.tsx b/React/comp_library/src/stories/CaseStudy.stories.tsx
new file mode 100644
index 0000000..feab103
--- /dev/null
+++ b/React/comp_library/src/stories/CaseStudy.stories.tsx
@@ -0,0 +1,25 @@
+// CaseStudy.stories.tsx
+import { StoryFn } from '@storybook/react/*';
+import React from 'react';
+import CaseStudy from '../components/CaseStudy';
+
+export default {
+  title: 'Components/CaseStudy',
+  component: CaseStudy,
+}
+
+const Template: StoryFn<typeof CaseStudy> = (args) => <CaseStudy {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  sections: [
+    {
+      heading: 'Section 1',
+      content: 'This is the content for section 1.',
+    },
+    {
+      heading: 'Section 2',
+      content: 'This is the content for section 2.',
+    },
+  ],
+};
diff --git a/React/comp_library/src/stories/ColorModeToggle.stories.tsx b/React/comp_library/src/stories/ColorModeToggle.stories.tsx
new file mode 100644
index 0000000..25d4958
--- /dev/null
+++ b/React/comp_library/src/stories/ColorModeToggle.stories.tsx
@@ -0,0 +1,20 @@
+import { ChakraProvider } from '@chakra-ui/react';
+import { Meta, StoryFn } from '@storybook/react';
+import React from 'react';
+import ColorModeToggle from '../components/ColorModeToggle';
+
+export default {
+  title: 'Components/ColorModeToggle',
+  component: ColorModeToggle,
+  decorators: [
+    (Story) => (
+      <ChakraProvider>
+        <Story />
+      </ChakraProvider>
+    ),
+  ],
+} as Meta;
+
+const Template: StoryFn = () => <ColorModeToggle />;
+
+export const Default = Template.bind({});
diff --git a/React/comp_library/src/stories/FeaturesCard.stories.tsx b/React/comp_library/src/stories/FeaturesCard.stories.tsx
new file mode 100644
index 0000000..9b11442
--- /dev/null
+++ b/React/comp_library/src/stories/FeaturesCard.stories.tsx
@@ -0,0 +1,50 @@
+
+import { ChakraProvider, theme } from '@chakra-ui/react';
+import { Meta, StoryFn } from '@storybook/react';
+import React from 'react';
+import { FaChartLine, FaLaptopCode, FaRocket } from 'react-icons/fa';
+import { FeaturesCard } from '../components/FeaturesCard';
+
+export default {
+  title: 'Components/FeaturesCard',
+  component: FeaturesCard,
+  decorators: [
+    (Story) => (
+      <ChakraProvider theme={theme}>
+        <Story />
+      </ChakraProvider>
+    ),
+  ],
+} as Meta;
+
+const Template: StoryFn<typeof FeaturesCard> = (args) => <FeaturesCard {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  heading: 'Web Development',
+  description: 'We build modern, responsive, and user-friendly websites using the latest technologies.',
+  icon: FaLaptopCode,
+  features: ['React', 'Angular', 'Vue', 'Node.js', 'Express'],
+  image: 'https://picsum.photos/300/200',
+  cta: 'Get a Quote',
+};
+
+export const Analytics = Template.bind({});
+Analytics.args = {
+  heading: 'Data Analytics',
+  description: 'We help businesses make data-driven decisions by analyzing and visualizing their data.',
+  icon: FaChartLine,
+  features: ['Python', 'R', 'SQL', 'Tableau', 'Power BI'],
+  image: 'https://picsum.photos/300/200',
+  cta: 'Learn More',
+};
+
+export const DevOps = Template.bind({});
+DevOps.args = {
+  heading: 'DevOps Solutions',
+  description: 'We streamline software development and deployment processes with our DevOps expertise.',
+  icon: FaRocket,
+  features: ['CI/CD', 'Containerization', 'Kubernetes', 'Monitoring', 'Automation'],
+  image: 'https://picsum.photos/300/200',
+  cta: 'Get Started',
+};
diff --git a/React/comp_library/src/stories/Header.stories.tsx b/React/comp_library/src/stories/Header.stories.tsx
deleted file mode 100644
index 072b68b..0000000
--- a/React/comp_library/src/stories/Header.stories.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { fn } from '@storybook/test';
-import { Header } from '../components/Header';
-
-export default {
-  title: 'components/Header',
-  component: Header,
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-  parameters: {
-    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-    layout: 'fullscreen',
-  },
-  args: {
-    onLogin: fn(),
-    onLogout: fn(),
-    onCreateAccount: fn(),
-  },
-};
-
-export const LoggedIn = {
-  args: {
-    user: {
-      name: 'Jane Doe',
-    },
-  },
-};
-
-export const LoggedOut = {};
diff --git a/React/comp_library/src/stories/Page.stories.tsx b/React/comp_library/src/stories/Page.stories.tsx
deleted file mode 100644
index bd08649..0000000
--- a/React/comp_library/src/stories/Page.stories.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { expect, userEvent, within } from "@storybook/test";
-
-import { Page } from "../components/Page";
-
-export default {
-  title: "components/Page",
-  component: Page,
-  parameters: {
-    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-    layout: "fullscreen",
-  },
-};
-
-export const LoggedOut = {};
-
-// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
-export const LoggedIn = {
-  play: async ({ canvasElement }: { canvasElement: any }) => {
-    const canvas = within(canvasElement);
-    const loginButton = canvas.getByRole("button", { name: /Log in/i });
-    await expect(loginButton).toBeInTheDocument();
-    await userEvent.click(loginButton);
-    await expect(loginButton).not.toBeInTheDocument();
-
-    const logoutButton = canvas.getByRole("button", { name: /Log out/i });
-    await expect(logoutButton).toBeInTheDocument();
-  },
-};