diff --git a/src/components/DiffIntro/DiffIntro.tsx b/src/components/DiffIntro/DiffIntro.tsx
index 7acd4eda..3ed5053e 100644
--- a/src/components/DiffIntro/DiffIntro.tsx
+++ b/src/components/DiffIntro/DiffIntro.tsx
@@ -80,6 +80,7 @@ const DiffIntro = forwardRef<DiffIntroProps, "h2">(
                     <Halfs
                         left={
                             <SpecBox
+                                id="A"
                                 packageName={aName}
                                 packageVersion={aVersion}
                             />
@@ -92,6 +93,7 @@ const DiffIntro = forwardRef<DiffIntroProps, "h2">(
                         }
                         right={
                             <SpecBox
+                                id="B"
                                 packageName={bName}
                                 packageVersion={bVersion}
                             />
diff --git a/src/components/DiffIntro/SpecBox.tsx b/src/components/DiffIntro/SpecBox.tsx
index 09d8b0ce..e7e3407e 100644
--- a/src/components/DiffIntro/SpecBox.tsx
+++ b/src/components/DiffIntro/SpecBox.tsx
@@ -1,25 +1,116 @@
-import { Box, BoxProps, Code, forwardRef, Text } from "@chakra-ui/react";
+import {
+    Box,
+    BoxProps,
+    Code,
+    forwardRef,
+    Spinner,
+    Text,
+} from "@chakra-ui/react";
+import { useState } from "react";
+import {
+    useNpmCombobox,
+    UseNpmComboboxProps,
+} from "^/lib/npm-combobox/useNpmCombobox";
+import {
+    ComboboxBox,
+    ComboboxInput,
+    ComboboxSuggestion,
+    ComboboxSuggestionList,
+    ComboboxWrapper,
+} from "../Landing/MainForm/SpecInput/Combobox";
+import Suggestion from "../Landing/MainForm/SpecInput/Suggestion";
 import ServiceLinks from "./ServiceLinks";
 
-interface SpecBoxProps extends BoxProps {
-    packageName: string;
-    packageVersion: string;
-}
+const SuggestionListText = ({
+    children,
+    error = false,
+}: {
+    children: string;
+    error?: boolean;
+}) => (
+    <Text padding="2em" align="center" color={error ? "red.500" : "gray.500"}>
+        {children}
+    </Text>
+);
+
+type SpecBoxProps = BoxProps &
+    Pick<UseNpmComboboxProps, "id"> & {
+        packageName: string;
+        packageVersion: string;
+    };
 
 const SpecBox = forwardRef<SpecBoxProps, "div">(
-    ({ packageName, packageVersion, ...props }, ref) => (
-        <Box {...props} ref={ref}>
-            <Code>
-                {packageName}@{packageVersion}
-            </Code>
-            <Box>
-                <ServiceLinks
-                    packageName={packageName}
-                    packageVersion={packageVersion}
-                />
+    ({ packageName, packageVersion, id, ...props }, ref) => {
+        const [inputValue, onInputValueChange] = useState(
+            `${packageName}@${packageVersion}`,
+        );
+
+        const {
+            getInputProps,
+            getItemProps,
+            getMenuProps,
+            highlightedIndex,
+            isOpen,
+            items,
+            loading,
+            error,
+        } = useNpmCombobox({
+            id,
+            fallback: [],
+            inputValue,
+            onInputValueChange,
+        });
+
+        return (
+            <Box {...props} ref={ref}>
+                <ComboboxWrapper>
+                    <ComboboxBox size="xs">
+                        <ComboboxInput isOpen={isOpen} {...getInputProps()} />
+                    </ComboboxBox>
+                    <ComboboxSuggestionList {...getMenuProps()}>
+                        {isOpen ? (
+                            <>
+                                {error ? (
+                                    <SuggestionListText error={true}>
+                                        Something went wrong.
+                                    </SuggestionListText>
+                                ) : items.length === 0 ? (
+                                    <SuggestionListText>
+                                        No suggestions
+                                    </SuggestionListText>
+                                ) : (
+                                    items.map((item, index) => (
+                                        <ComboboxSuggestion
+                                            key={item.value}
+                                            highlighted={
+                                                index === highlightedIndex
+                                            }
+                                            {...getItemProps({ item, index })}
+                                        >
+                                            <Suggestion item={item} />
+                                        </ComboboxSuggestion>
+                                    ))
+                                )}
+                                {loading ? (
+                                    <Spinner
+                                        position="absolute"
+                                        right={2}
+                                        bottom={2}
+                                    />
+                                ) : null}
+                            </>
+                        ) : null}
+                    </ComboboxSuggestionList>
+                </ComboboxWrapper>
+                <Box>
+                    <ServiceLinks
+                        packageName={packageName}
+                        packageVersion={packageVersion}
+                    />
+                </Box>
             </Box>
-        </Box>
-    ),
+        );
+    },
 );
 
 export default SpecBox;