diff --git a/public/images/logo.svg b/public/images/logo.svg
new file mode 100644
index 0000000..8fc8f0c
--- /dev/null
+++ b/public/images/logo.svg
@@ -0,0 +1,11 @@
+<svg width="5533" height="5533" viewBox="0 0 5533 5533" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2618.77 521.189C2673.42 389.782 2859.58 389.782 2914.23 521.189L3416.81 1729.53C3439.85 1784.93 3491.95 1822.78 3551.76 1827.58L4856.27 1932.16C4998.13 1943.53 5055.66 2120.57 4947.57 2213.16L3953.67 3064.54C3908.1 3103.57 3888.2 3164.82 3902.13 3223.18L4205.78 4496.16C4238.8 4634.6 4088.2 4744.01 3966.74 4669.83L2849.9 3987.67C2798.7 3956.39 2734.3 3956.39 2683.1 3987.67L1566.26 4669.83C1444.8 4744.01 1294.2 4634.6 1327.22 4496.16L1630.87 3223.18C1644.8 3164.82 1624.9 3103.57 1579.33 3064.54L585.431 2213.16C477.345 2120.57 534.869 1943.53 676.733 1932.16L1981.24 1827.58C2041.05 1822.78 2093.15 1784.93 2116.19 1729.53L2618.77 521.189Z" fill="url(#paint0_linear_343_6)"/>
+<path d="M1774 2843H2219.19L2370.29 2510.5L2508.35 3258.5L2734.46 2018L2951.57 3258.5L3106.14 2843H3850" stroke="white" stroke-width="111" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_343_6" x1="1161" y1="1236" x2="4026.5" y2="3487" gradientUnits="userSpaceOnUse">
+<stop offset="0.0451061" stop-color="#0271F3"/>
+<stop offset="0.506652" stop-color="#2596B5"/>
+<stop offset="0.956682" stop-color="#48BB78"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/components/AiResults/AiResults.tsx b/src/components/AiResults/AiResults.tsx
deleted file mode 100644
index 3caa2e1..0000000
--- a/src/components/AiResults/AiResults.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import {
-  Flex,
-  Pagination,
-  Textarea,
-  Small,
-  H3,
-  Grid,
-} from '@bigcommerce/big-design';
-import React, { type SetStateAction, type ChangeEvent, useState } from 'react';
-import { StyledFlex } from './styled';
-
-export interface Result {
-  description: string;
-  promptAttributes: string;
-}
-
-interface AiResultsProps {
-  results: Result[];
-  onChange(index: number, description: string): void;
-}
-
-export default function AiResults({ results, onChange }: AiResultsProps) {
-  const [page, setPage] = useState(results.length);
-
-  const currentResult = results.at(page - 1);
-
-  if (!currentResult) {
-    return null;
-  }
-
-  const handlePageChange = (newPage: SetStateAction<number>) => {
-    const page = Number(newPage);
-    setPage(page);
-    onChange(page - 1, results.at(page - 1)?.description || '');
-  };
-  const handleValueChange = (event: ChangeEvent<HTMLTextAreaElement>) =>
-    onChange(page - 1, event.target.value);
-
-  return (
-    <Flex marginTop="large" flexDirection="column">
-      <Grid gridColumns="1fr 4fr" marginBottom="medium" gridColumnGap="0">
-        <Flex flexDirection="row" alignItems="center">
-          <H3 marginBottom="none">Results</H3>
-        </Flex>
-        <Flex
-          alignItems="flex-end"
-          justifyContent="flex-end"
-          flexDirection="row"
-        >
-          <Pagination
-            currentPage={page}
-            itemsPerPage={1}
-            itemsPerPageOptions={[page]}
-            onItemsPerPageChange={() => null}
-            onPageChange={handlePageChange}
-            totalItems={results.length}
-          />
-        </Flex>
-      </Grid>
-      <StyledFlex>
-        <Textarea
-          onChange={handleValueChange}
-          value={currentResult.description}
-        />
-      </StyledFlex>
-      <Small marginTop="medium">{currentResult.promptAttributes}</Small>
-    </Flex>
-  );
-}
diff --git a/src/components/AiResults/styled.ts b/src/components/AiResults/styled.ts
deleted file mode 100644
index a9f3cb1..0000000
--- a/src/components/AiResults/styled.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Flex } from '@bigcommerce/big-design';
-import styled from 'styled-components';
-
-export const StyledFlex = styled(Flex)`
-  & > div:first-child {
-    width: 100%;
-  }
-  textarea {
-    height: ${({ theme }) => theme.helpers.remCalc(300)};
-    max-height: ${({ theme }) => theme.helpers.remCalc(500)};
-    min-height: ${({ theme }) => theme.helpers.remCalc(150)};
-  }
-`;
diff --git a/src/components/PromptForm/CustomPromptForm.tsx b/src/components/PromptForm/CustomPromptForm.tsx
deleted file mode 100644
index 048df56..0000000
--- a/src/components/PromptForm/CustomPromptForm.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import {
-  Checkbox,
-  CheckboxLabel,
-  FormControlLabel,
-  FormGroup,
-  Textarea,
-} from '@bigcommerce/big-design';
-import React, { type ChangeEvent } from 'react';
-import { InputLabel } from '~/components/PromptForm/InputLabel';
-import { type CustomAttributes } from '~/context/PromptAttributesContext';
-interface CustomFormProps {
-  attributes: CustomAttributes;
-  onChange(attributes: CustomAttributes): void;
-}
-
-export const CustomPromptForm = ({ attributes, onChange }: CustomFormProps) => (
-  <>
-    <FormGroup>
-      <Textarea
-        label={
-          <FormControlLabel>
-            <InputLabel
-              bold={true}
-              text="Instructions"
-              tooltip="Try and provide as much information as possible. You can also try asking the AI to write in the voice of a famous person, like Shakespeare or Hemingway, or assume a profession, like interior designer or chef."
-            />
-          </FormControlLabel>
-        }
-        onChange={(event: ChangeEvent<HTMLTextAreaElement>) =>
-          onChange({ ...attributes, customPrompt: event.target.value })
-        }
-        rows={4}
-        value={attributes.customPrompt}
-      />
-    </FormGroup>
-    <FormGroup>
-      <Checkbox
-        checked={attributes.includeProductAttributes}
-        label={
-          <CheckboxLabel>
-            <InputLabel
-              bold={false}
-              text="Include product information"
-              tooltip="If checked, the description will feature information from the product page for this product. This includes: product name, product type, brand, dimensions and weight, categories and condition."
-            />
-          </CheckboxLabel>
-        }
-        onChange={() =>
-          onChange({
-            ...attributes,
-            includeProductAttributes: !attributes.includeProductAttributes,
-          })
-        }
-      />
-    </FormGroup>
-  </>
-);
diff --git a/src/components/PromptForm/GuidedPromptForm.tsx b/src/components/PromptForm/GuidedPromptForm.tsx
deleted file mode 100644
index ed3c228..0000000
--- a/src/components/PromptForm/GuidedPromptForm.tsx
+++ /dev/null
@@ -1,189 +0,0 @@
-'use client';
-
-import React, { useState } from 'react';
-import {
-  Checkbox,
-  Collapse,
-  Counter,
-  FormGroup,
-  Input,
-  Select,
-  CheckboxLabel,
-  FormControlLabel,
-  Flex,
-  Grid,
-} from '@bigcommerce/big-design';
-import { InputLabel } from '~/components/PromptForm/InputLabel';
-import { theme } from '@bigcommerce/big-design-theme';
-import { STYLE_OPTIONS } from '~/constants';
-import { type GuidedAttributes } from '~/context/PromptAttributesContext';
-
-type InputFieldValue = string | number | boolean | undefined;
-
-interface GuidedPromptForm {
-  attributes: GuidedAttributes;
-  onChange(attributes: GuidedAttributes): void;
-}
-
-export function GuidedPromptForm({ attributes, onChange }: GuidedPromptForm) {
-  const [collapseTitle, setCollapseTitle] = useState('Show more');
-
-  const handleCollapseChange = (isOpen: boolean) =>
-    setCollapseTitle(isOpen ? 'Show less' : 'Show more');
-
-  const handleInputChange = (
-    value: InputFieldValue,
-    fieldName: keyof GuidedAttributes
-  ) => onChange({ ...attributes, [fieldName]: value });
-
-  return (
-    <>
-      <Grid gridColumns="2fr 1fr 2fr" gridColumnGap={theme.spacing.large}>
-        <FormGroup>
-          <Select
-            label="Style"
-            maxHeight={300}
-            onOptionChange={(value) => handleInputChange(value, 'style')}
-            options={STYLE_OPTIONS}
-            placement="bottom-start"
-            required
-            value={attributes.style}
-          />
-        </FormGroup>
-        <FormGroup>
-          <Counter
-            label="Word limit"
-            max={1000}
-            min={10}
-            step={10}
-            onCountChange={(value) => handleInputChange(value, 'wordCount')}
-            value={attributes.wordCount}
-            required
-          />
-        </FormGroup>
-        <FormGroup>
-          <Flex flexDirection="row" alignItems="center" marginTop="medium">
-            <Checkbox
-              checked={attributes.optimizedForSeo}
-              label={
-                <CheckboxLabel>
-                  <InputLabel
-                    text="Optimised for SEO"
-                    tooltip="If checked, the description will include words and phrases that shoppers typically use when searching for similar products online. This may improve the visibility of the product in search results and drive more traffic to your storefront."
-                    bold={false}
-                  />
-                </CheckboxLabel>
-              }
-              onChange={() =>
-                handleInputChange(
-                  !attributes.optimizedForSeo,
-                  'optimizedForSeo'
-                )
-              }
-            />
-          </Flex>
-        </FormGroup>
-      </Grid>
-
-      <Collapse onCollapseChange={handleCollapseChange} title={collapseTitle}>
-        <Grid
-          gridColumns="repeat(1, 1fr)"
-          gridRowGap={theme.spacing.xxSmall}
-          marginTop="xSmall"
-          marginBottom="large"
-        >
-          <FormGroup>
-            <Flex flexDirection="row" alignItems="center">
-              <Checkbox
-                checked={attributes.includeProductAttributes}
-                label={
-                  <CheckboxLabel>
-                    <InputLabel
-                      bold={false}
-                      text="Include product information"
-                      tooltip="Checking this box will include product information from the control panel in the description. For example, product name and weight."
-                    />
-                  </CheckboxLabel>
-                }
-                onChange={() =>
-                  handleInputChange(
-                    !attributes.includeProductAttributes,
-                    'includeProductAttributes'
-                  )
-                }
-              />
-            </Flex>
-          </FormGroup>
-          <FormGroup>
-            <Input
-              value={attributes.brandVoice}
-              label={
-                <FormControlLabel>
-                  <InputLabel
-                    bold={true}
-                    text="Brand voice"
-                    tooltip="Describe how your brand views itself. For example, “upbeat and confident” or “friendly and conversational.”"
-                  />
-                </FormControlLabel>
-              }
-              onChange={(event) =>
-                handleInputChange(event.target.value, 'brandVoice')
-              }
-            />
-          </FormGroup>
-          <FormGroup>
-            <Input
-              value={attributes.additionalAttributes}
-              label={
-                <FormControlLabel>
-                  <InputLabel
-                    bold={true}
-                    text="Additional attributes"
-                    tooltip="Additional attributes are key-value pairs that provide more information and improve search engine rankings. For example, “organic, recycled cotton” or “sports, running.”"
-                  />
-                </FormControlLabel>
-              }
-              onChange={(event) =>
-                handleInputChange(event.target.value, 'additionalAttributes')
-              }
-            />
-          </FormGroup>
-          <FormGroup>
-            <Input
-              value={attributes.keywords}
-              label={
-                <FormControlLabel>
-                  <InputLabel
-                    bold={true}
-                    text="Additional keywords"
-                    tooltip="Additional keywords are words or phrases that provide more information and improve search engine rankings. For example, “blue,” “shirt,” “clothing” and “women.”"
-                  />
-                </FormControlLabel>
-              }
-              onChange={(event) =>
-                handleInputChange(event.target.value, 'keywords')
-              }
-            />
-          </FormGroup>
-          <FormGroup>
-            <Input
-              value={attributes.instructions}
-              label={
-                <FormControlLabel>
-                  <InputLabel
-                    bold={true}
-                    text="Special instructions "
-                    tooltip="If you have any special instructions, you can enter them here. For example, words to avoid, words to be sure and include or special formatting requirements."
-                  />
-                </FormControlLabel>
-              }
-              onChange={(event) =>
-                handleInputChange(event.target.value, 'instructions')
-              }
-            />
-          </FormGroup>
-        </Grid>
-      </Collapse>
-    </>
-  );
-}
diff --git a/src/components/PromptForm/InputLabel.tsx b/src/components/PromptForm/InputLabel.tsx
deleted file mode 100644
index 2181206..0000000
--- a/src/components/PromptForm/InputLabel.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Flex, Text, Tooltip } from '@bigcommerce/big-design';
-import { BaselineHelpIcon } from '@bigcommerce/big-design-icons';
-import React from 'react';
-
-interface InputLabelProps {
-  text: string;
-  tooltip: string;
-  bold: boolean;
-}
-
-export const InputLabel = ({ text, tooltip, bold }: InputLabelProps) => (
-  <Flex flexDirection="row" marginBottom="xxSmall" alignItems="center">
-    <Text as="span" bold={bold} marginBottom="none" marginRight="xxSmall">
-      {text}
-    </Text>
-    <Tooltip
-      placement="right"
-      trigger={<BaselineHelpIcon color="secondary50" size="large" />}
-    >
-      {tooltip}
-    </Tooltip>
-  </Flex>
-);
diff --git a/src/components/PromptForm/styled.ts b/src/components/PromptForm/styled.ts
deleted file mode 100644
index 62b42b9..0000000
--- a/src/components/PromptForm/styled.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import styled from 'styled-components';
-
-export const StyledButton = styled.button<{ isActive: boolean }>`
-  align-items: center;
-  appearance: none;
-  background-color: ${({ isActive, theme }) =>
-    isActive ? theme.colors.primary20 : theme.colors.white};
-  border-top: ${({ theme }) => theme.border.box};
-  border-left: ${({ theme }) => theme.border.box};
-  border-bottom: ${({ theme }) => theme.border.box};
-  border-color: ${({ isActive, theme }) =>
-    isActive ? theme.colors.primary30 : theme.colors.secondary30};
-  border-right: 0;
-  border-radius: 0;
-  color: ${({ isActive, theme }) =>
-    isActive ? theme.colors.primary60 : theme.colors.secondary60};
-  cursor: pointer;
-  display: inline-flex;
-  flex: none;
-  font-size: ${({ theme }) => theme.typography.fontSize.medium};
-  font-weight: ${({ theme }) => theme.typography.fontWeight.regular};
-  justify-content: center;
-  line-height: ${({ theme }) => theme.lineHeight.xLarge};
-  outline: none;
-  padding: ${({ theme }) => `0 ${theme.spacing.medium}`};
-  position: relative;
-  text-align: center;
-  text-decoration: none;
-  user-select: none;
-  vertical-align: middle;
-  white-space: nowrap;
-  width: auto;
-
-  &:focus {
-    outline: none;
-  }
-
-  &:first-child {
-    border-top-left-radius: ${({ theme }) => theme.borderRadius.normal};
-    border-bottom-left-radius: ${({ theme }) => theme.borderRadius.normal};
-  }
-
-  &:last-child {
-    border-top-right-radius: ${({ theme }) => theme.borderRadius.normal};
-    border-bottom-right-radius: ${({ theme }) => theme.borderRadius.normal};
-    border-right: ${({ theme }) => theme.border.box};
-    border-right-color: ${({ isActive, theme }) =>
-      isActive ? theme.colors.primary30 : theme.colors.secondary30};
-  }
-
-  ${({ isActive, theme }) =>
-    isActive &&
-    `
-        + button {
-            border-left-color: ${theme.colors.primary30};
-        }
-    `}
-`;
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
deleted file mode 100644
index 3c307b7..0000000
--- a/src/hooks/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './useLocalStorage';
-export * from './useDescriptionsHistory';
diff --git a/src/hooks/useDescriptionsHistory.ts b/src/hooks/useDescriptionsHistory.ts
deleted file mode 100644
index 8ca5ee7..0000000
--- a/src/hooks/useDescriptionsHistory.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { type Result } from '~/components/AiResults/AiResults';
-import { useLocalStorage } from './useLocalStorage';
-import { serializePromptAttributes } from '~/utils/utils';
-import { type PromptAttributes } from '~/context/PromptAttributesContext';
-
-const MAX_LOCAL_STORAGE_RESULTS = 20;
-const STORAGE_KEY = 'ai-product-descriptions:history:product';
-
-export const useDescriptionsHistory = (productId: number) => {
-  const [results, setResults] = useLocalStorage<Result[]>(
-    `${STORAGE_KEY}:${productId}`,
-    []
-  );
-
-  const setResultsWrapper = ({
-    description,
-    promptAttributes,
-  }: {
-    description: string;
-    promptAttributes: PromptAttributes;
-  }) => {
-    const result = {
-      description,
-      promptAttributes: serializePromptAttributes(promptAttributes),
-    };
-    setResults([
-      ...results.slice(-(MAX_LOCAL_STORAGE_RESULTS - 1)),
-      ...[result],
-    ]);
-  };
-
-  const handleDescriptionChange = (index: number, description: string) => {
-    setResults((prevResults: Result[]) => {
-      if (index < 0 || index >= prevResults.length) {
-        return prevResults;
-      }
-
-      const updatedResults = [...prevResults];
-
-      updatedResults[index] = {
-        promptAttributes: updatedResults[index]?.promptAttributes || '',
-        description: description,
-      };
-
-      return updatedResults;
-    });
-  };
-
-  return {
-    results,
-    handleDescriptionChange,
-    setResults: setResultsWrapper,
-  };
-};
diff --git a/src/hooks/useLocalStorage.ts b/src/hooks/useLocalStorage.ts
deleted file mode 100644
index 46f7fae..0000000
--- a/src/hooks/useLocalStorage.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { useState } from 'react';
-
-export const useLocalStorage = <T>(key: string, initVal: T) => {
-  const [storedValue, setStoredValue] = useState<T>((): T => {
-    try {
-      const item = window.localStorage.getItem(key);
-
-      if (item) {
-        const val: unknown = JSON.parse(item);
-
-        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-        return (val ?? initVal) as T;
-      }
-
-      return initVal;
-    } catch (error) {
-      return initVal;
-    }
-  });
-
-  const setValue = (value: T | ((args: T) => T)) => {
-    const freshValue =
-      typeof value === 'function'
-        ? (value as (args: T) => T)(storedValue)
-        : value;
-
-    setStoredValue(freshValue);
-    window.localStorage.setItem(key, JSON.stringify(freshValue));
-  };
-
-  return [storedValue, setValue] as const;
-};