diff --git a/_tests_/components/search/result.test.tsx b/_tests_/components/search/result.test.tsx
new file mode 100644
index 0000000..c795025
--- /dev/null
+++ b/_tests_/components/search/result.test.tsx
@@ -0,0 +1,29 @@
+import { render, screen } from "@testing-library/react";
+import Result from "../../../src/components/search/result";
+
+describe("Result Component", () => {
+  const mockProps = {
+    transactionId: "123",
+    definition: "Test definition",
+    category: "Test category",
+    term: "Test term"
+  };
+
+  it("renders the result component with all props", () => {
+    render(<Result {...mockProps} />);
+    
+    const container = screen.getByTitle("search-result-content");
+    expect(container).toBeInTheDocument();
+    expect(screen.getByText("Test term")).toBeInTheDocument();
+    expect(screen.getByText("Test definition")).toBeInTheDocument();
+    expect(screen.getByText("Test category")).toBeInTheDocument();
+  });
+
+  it("renders with missing props", () => {
+    render(<Result term="Test term" />);
+    
+    const container = screen.getByTitle("search-result-content");
+    expect(container).toBeInTheDocument();
+    expect(screen.getByText("Test term")).toBeInTheDocument();
+  });
+}); 
\ No newline at end of file
diff --git a/_tests_/components/search/unavailable-result.test.tsx b/_tests_/components/search/unavailable-result.test.tsx
new file mode 100644
index 0000000..5913eca
--- /dev/null
+++ b/_tests_/components/search/unavailable-result.test.tsx
@@ -0,0 +1,38 @@
+import { render, screen } from "@testing-library/react";
+import UnavailableResult from "../../../src/components/search/unavailable-result";
+import { useTranslation } from "next-i18next";
+
+// Mock next-i18next
+jest.mock("next-i18next", () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}));
+
+describe("UnavailableResult Component", () => {
+  it("renders the unavailable result component", () => {
+    const term = "nonexistent-term";
+    render(<UnavailableResult term={term} />);
+    
+    const container = screen.getByTitle("unavailable-search-result");
+    expect(container).toBeInTheDocument();
+    expect(screen.getByText(term)).toBeInTheDocument();
+    expect(screen.getByText("twitter")).toBeInTheDocument();
+    expect(screen.getByText("gitHubIssueText")).toBeInTheDocument();
+  });
+
+  it("generates correct twitter link", () => {
+    const term = "test-term";
+    render(<UnavailableResult term={term} />);
+    
+    const twitterLink = screen.getByText("twitter").closest("a");
+    expect(twitterLink).toHaveAttribute(
+      "href",
+      expect.stringContaining("Glossetadotcom")
+    );
+    expect(twitterLink).toHaveAttribute(
+      "href",
+      expect.stringContaining(term)
+    );
+  });
+}); 
\ No newline at end of file
diff --git a/_tests_/pages/search/index.test.tsx b/_tests_/pages/search/index.test.tsx
new file mode 100644
index 0000000..4b652fd
--- /dev/null
+++ b/_tests_/pages/search/index.test.tsx
@@ -0,0 +1,50 @@
+import { render, screen } from "@testing-library/react";
+import SearchPage from "../../../src/pages/search";
+
+// Mock matchMedia
+beforeAll(() => {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation(query => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: jest.fn(),
+      removeListener: jest.fn(),
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: jest.fn(),
+    })),
+  });
+});
+
+// Mock next/router
+jest.mock('next/router', () => ({
+  useRouter() {
+    return {
+      route: '/',
+      pathname: '',
+      query: '',
+      asPath: '',
+      push: jest.fn(),
+    };
+  },
+}));
+
+describe("Search Page", () => {
+  it("renders the search page", () => {
+    render(<SearchPage />);
+    
+    // Test for main components that should be present
+    expect(screen.getByRole("main")).toBeInTheDocument();
+    expect(screen.getByTitle("glosseta-search-fallback-page")).toBeInTheDocument();
+  });
+
+  it("displays loading skeleton", () => {
+    render(<SearchPage />);
+    
+    // Test for skeleton loading elements using class name
+    const skeletons = document.getElementsByClassName("chakra-skeleton");
+    expect(skeletons.length).toBeGreaterThan(0);
+  });
+}); 
\ No newline at end of file
diff --git a/_tests_/pages/search/term/[id].test.jsx b/_tests_/pages/search/term/[id].test.jsx
index c2eb16d..db9a18c 100644
--- a/_tests_/pages/search/term/[id].test.jsx
+++ b/_tests_/pages/search/term/[id].test.jsx
@@ -3,7 +3,15 @@ import { render, screen } from "@testing-library/react";
 import SearchResults from "../../../../src/pages/search/term/[id]";
 
 jest.mock("react-i18next", () => ({
-  useTranslation: () => ({ t: (key) => key }),
+  useTranslation: () => ({
+    t: (key) => ({
+      definition: 'definition',
+      unavailableSearchResultDescription: 'unavailableSearchResultDescription',
+      apiFetchErrorText: 'apiFetchErrorText',
+      requestThisTerm: 'requestThisTerm',
+      // Add other keys as needed
+    }[key] || key),
+  }),
 }));
 
 jest.spyOn(require("next/router"), "useRouter").mockImplementation(() => ({
@@ -30,18 +38,24 @@ describe("Search Results - Success", () => {
       />
     );
 
-    const searchBarInput = screen.getByTitle("search-bar-input");
-    const resultContainer = screen.getByTitle("search-result-content");
-    const resultUnavailableContainer = screen.queryByTitle(
-      "unavailable-search-result"
+    // Check for the term heading
+    const termHeading = screen.getByRole('heading', { name: term.toUpperCase() });
+    expect(termHeading).toBeInTheDocument();
+
+    // Check for definition section
+    const definitionHeading = screen.getByRole('heading', { name: 'definition' });
+    expect(definitionHeading).toBeInTheDocument();
+    
+    // Use getAllByText and check the specific one we want
+    const definitionTexts = screen.getAllByText(definition);
+    const definitionContent = definitionTexts.find(
+      element => element.tagName.toLowerCase() === 'p'
     );
-    const apiErrorContainer = screen.queryByTitle("api-error-result");
+    expect(definitionContent).toBeInTheDocument();
 
-    expect(searchBarInput).toBeInTheDocument();
-    expect(resultUnavailableContainer).not.toBeInTheDocument();
-    expect(apiErrorContainer).not.toBeInTheDocument();
-
-    expect(resultContainer).toBeInTheDocument();
+    // Check that error and unavailable content is not present
+    expect(screen.queryByText('unavailableSearchResultDescription')).not.toBeInTheDocument();
+    expect(screen.queryByText('apiFetchErrorText')).not.toBeInTheDocument();
   });
 });
 
@@ -65,21 +79,15 @@ describe("Search Results - Not found", () => {
       />
     );
 
-    const searchBarInput = screen.getByTitle("search-bar-input");
-    const resultContainer = screen.queryByTitle("search-result-content");
-    const resultUnavailableContainer = screen.getByTitle(
-      "unavailable-search-result"
-    );
-    const apiErrorContainer = screen.queryByTitle("api-error-result");
-
-    expect(searchBarInput).toBeInTheDocument();
-    expect(resultContainer).not.toBeInTheDocument();
-    expect(apiErrorContainer).not.toBeInTheDocument();
+    // Check for unavailable content
+    const termHeading = screen.getByRole('heading', { name: term.toUpperCase() });
+    expect(termHeading).toBeInTheDocument();
+    
+    expect(screen.getByText('unavailableSearchResultDescription')).toBeInTheDocument();
+    expect(screen.getByText('requestThisTerm')).toBeInTheDocument();
 
-    expect(resultUnavailableContainer).toBeInTheDocument();
-    expect(resultUnavailableContainer).toHaveTextContent(
-      "unavailableSearchResultDescription"
-    );
+    // Check that success content is not present
+    expect(screen.queryByRole('heading', { name: 'definition' })).not.toBeInTheDocument();
   });
 });
 
@@ -103,18 +111,11 @@ describe("Search Results - Error", () => {
       />
     );
 
-    const searchBarInput = screen.getByTitle("search-bar-input");
-    const resultContainer = screen.queryByTitle("search-result-content");
-    const resultUnavailableContainer = screen.queryByTitle(
-      "unavailable-search-result"
-    );
-    const apiErrorContainer = screen.getByTitle("api-error-result");
-
-    expect(searchBarInput).toBeInTheDocument();
-    expect(resultContainer).not.toBeInTheDocument();
-    expect(resultUnavailableContainer).not.toBeInTheDocument();
+    // Check for error content
+    expect(screen.getByText('apiFetchErrorText')).toBeInTheDocument();
 
-    expect(apiErrorContainer).toBeInTheDocument();
-    expect(apiErrorContainer).toHaveTextContent("apiFetchErrorText");
+    // Check that success and unavailable content is not present
+    expect(screen.queryByRole('heading', { name: term.toUpperCase() })).not.toBeInTheDocument();
+    expect(screen.queryByText('unavailableSearchResultDescription')).not.toBeInTheDocument();
   });
 });
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 5514be9..a554756 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -14,12 +14,21 @@
     "searchIconAriaLabel" : "Magnifying glass image",
     "searchInputAriaLabel" : "Search web3 terms here",
     "searchTermNotFoundInFilter" : "Term not found",
+    "copy" : "Copy",
+    "share" : "Share",
+    "moreLearningMaterials" : "More Learning Materials",
+    "definition" : "Definition",
+    "comingSoon" : "Coming soon! We're working on bringing you additional learning resources and related terms to enhance your understanding.",
+    "unavailableSearchResultDescription" : "We couldn't find this term in our glossary yet. Would you like to request it be added?",
+    "back" : "Back",
+    "searchForAnotherTerm" : "Search for Another Term",
 
+    "requestThisTerm" : "Request This Term",
     "searchResultContentSourceHeading" : "Content Source",
     "searchResultContentSourceDescription" : "The definition you see above is stored on the Arweave network which is a protocol for storing data permanently in a decentralized manner among network users who have storage to spare. As a result, this definition will live forever on the Arweave network.",
     "searchResultContentSourceTransactionLinkText" : "Click here to view the Arweave transaction for this definition",
-    
     "glossaryPageHeading" : "Glossary",
+    "glossaryPageDescription" : "Explore the comprehensive glossary of web3 terms, including definitions, explanations, and related concepts. Whether you're a beginner or an expert, our glossary provides a detailed overview of the terminology used in blockchain, NFTs, and cryptocurrency.",
     "somethingMissingHeading" : "Something missing?",
     "twitterTermRequestDescription" : "If there's a specific term you were looking for but didn't see above, please let us know and we'll get it added.  Give us a shout on ",
     "glossaryTermFetchErrorHeading": "Error",
diff --git a/src/components/glossary/scroll-to-top-button.tsx b/src/components/glossary/scroll-to-top-button.tsx
index 65d0b4a..a073c07 100644
--- a/src/components/glossary/scroll-to-top-button.tsx
+++ b/src/components/glossary/scroll-to-top-button.tsx
@@ -26,16 +26,25 @@ export const ScrollToTopButton = ({
         title="glossary-scroll-to-top-button"
         onClick={scrollToTheTop}
         position="fixed"
-        bottom="20px"
-        right="30px"
+        bottom="6"
+        right="6"
         zIndex="99"
-        backgroundColor="#A3A3A3"
-        fontSize="18px"
-        textColor="black"
-        cursor="pointer"
-        _hover={{ backgroundColor: "#BABABA" }}
+        colorScheme="blackAlpha"
+        size="lg"
+        rounded="full"
+        shadow="lg"
+        aria-label={t("scrollToTheTopButton")}
+        _hover={{
+          transform: "translateY(-2px)",
+          shadow: "xl"
+        }}
+        _active={{
+          transform: "translateY(0)",
+          shadow: "md"
+        }}
+        transition="all 0.2s"
       >
-        <ArrowUpIcon />
+        <ArrowUpIcon boxSize={6} />
         <span className={styles.visuallyhidden}>
           {t("scrollToTheTopButton")}
         </span>
diff --git a/src/components/input/search-bar.tsx b/src/components/input/search-bar.tsx
index ba55954..aaf8ad0 100644
--- a/src/components/input/search-bar.tsx
+++ b/src/components/input/search-bar.tsx
@@ -16,16 +16,16 @@ import Trie from "../../filter/trie";
 import AutocompleteFilter from "../../filter/autocomplete";
 
 const SearchBar = ({
-  baseWidth,
-  smWidth,
-  mdWidth,
-  lgWidth,
+  baseWidth = "280px",
+  smWidth = "320px",
+  mdWidth = "400px",
+  lgWidth = "480px",
   filterItems,
 }: {
-  baseWidth: string;
-  smWidth: string;
-  mdWidth: string;
-  lgWidth: string;
+  baseWidth?: string;
+  smWidth?: string;
+  mdWidth?: string;
+  lgWidth?: string;
   filterItems: any[];
 }): JSX.Element => {
   const [searchTerm, setSearchTerm] = useState("");
@@ -131,7 +131,7 @@ const SearchBar = ({
                   <SearchIcon
                     aria-label={t("searchIconAriaLabel")}
                     className="SearchIcon"
-                    color="gray.300"
+                    color="gray.500"
                   />
                 </InputLeftElement>
                 <Input
@@ -139,25 +139,36 @@ const SearchBar = ({
                   aria-expanded={showSuggestions}
                   aria-owns="filter-list"
                   autoComplete={"off"}
-                  variant="outline"
+                  variant="filled"
                   aria-label={t("searchInputAriaLabel")}
-                  backgroundColor="white"
-                  color="black"
-                  rounded="lg"
+                  backgroundColor="gray.50"
+                  color="gray.900"
+                  rounded="xl"
+                  shadow="sm"
                   onChange={handleSearchTermChange}
+                  borderColor="black"
                   width={{
                     base: baseWidth,
                     sm: smWidth,
                     md: mdWidth,
                     lg: lgWidth,
                   }}
+                  maxWidth="100%"
                   type="search"
                   id="search"
                   placeholder="Search for a word i.e. web3"
                   _placeholder={{
-                    color: "gray.500",
+                    color: "gray.400",
                     fontSize: { base: "sm", sm: "md" },
                   }}
+                  _hover={{
+                    backgroundColor: "gray.100"
+                  }}
+                  _focus={{
+                    backgroundColor: "white",
+                    borderColor: "blue.400",
+                    shadow: "md"
+                  }}
                   onClick={(event) => {
                     event.currentTarget.scrollIntoView(false);
                   }}
@@ -173,54 +184,63 @@ const SearchBar = ({
           <List
             id="filter-list"
             role={"listbox"}
-            spacing={3}
+            spacing={1}
             padding={2}
             background="white"
-            color="black"
-            rounded="lg"
+            color="gray.900"
+            rounded="xl"
+            shadow="lg"
             width={{
               base: baseWidth,
               sm: smWidth,
               md: mdWidth,
               lg: lgWidth,
             }}
+            maxWidth="100%"
           >
             {filteredSuggestions.length > 0 &&
-              filteredSuggestions.map((suggestion, index) => {
-                return (
-                  <>
-                    <ListItem
-                      role={"option"}
-                      color={"black"}
-                      key={suggestion}
-                      aria-selected={index === activeSuggestion ? true : false}
-                      onClick={(event) => {
-                        setSearchTerm(event.currentTarget.innerText);
-                        setFilteredSuggestions([]);
-                        setShowSuggestions(false);
-                        setActiveSuggestion(0);
-                        location.assign(
-                          `/search/term/${event.currentTarget.innerText
-                            .trim()
-                            .toLowerCase()}`
-                        );
-                      }}
-                      background={
-                        index === activeSuggestion ? "darkgray" : "white"
-                      }
-                      padding={1}
-                    >
-                      <ListIcon as={SearchIcon} color="gray.300" />
-                      {suggestion}
-                    </ListItem>
-                  </>
-                );
-              })}
+              filteredSuggestions.map((suggestion, index) => (
+                <ListItem
+                  key={`suggestion-${index}`}
+                  role={"option"}
+                  aria-selected={index === activeSuggestion ? true : false}
+                  onClick={(event) => {
+                    setSearchTerm(event.currentTarget.innerText);
+                    setFilteredSuggestions([]);
+                    setShowSuggestions(false);
+                    setActiveSuggestion(0);
+                    location.assign(
+                      `/search/term/${event.currentTarget.innerText
+                        .trim()
+                        .toLowerCase()}`
+                    );
+                  }}
+                  background={
+                    index === activeSuggestion ? "blue.50" : "white"
+                  }
+                  color={index === activeSuggestion ? "blue.700" : "gray.700"}
+                  padding={3}
+                  rounded="md"
+                  cursor="pointer"
+                  _hover={{
+                    background: "blue.50",
+                    color: "blue.700"
+                  }}
+                  transition="all 0.2s"
+                >
+                  <ListIcon as={SearchIcon} color={index === activeSuggestion ? "blue.500" : "gray.400"} />
+                  {suggestion}
+                </ListItem>
+              ))}
 
             {filteredSuggestions.length === 0 && (
               <>
-                <ListItem key="unknown" color={"black"}>
-                  <ListIcon as={SearchIcon} color="gray.300" />
+                <ListItem 
+                  key="unknown" 
+                  color="gray.500"
+                  padding={3}
+                >
+                  <ListIcon as={SearchIcon} color="gray.400" />
                   {t("searchTermNotFoundInFilter")}
                 </ListItem>
               </>
diff --git a/src/components/layout/page/index.tsx b/src/components/layout/page/index.tsx
index c2c11fe..beac365 100644
--- a/src/components/layout/page/index.tsx
+++ b/src/components/layout/page/index.tsx
@@ -8,13 +8,13 @@ const PageLayout = ({ children }: { children?: object }): JSX.Element => {
     <>
       <Nav />
       <Stack
-        spacing={10}
-        padding={1}
-        display="flex"
-        justifyContent="center"
-        flexDirection="column"
+        spacing={8}
+        px={{ base: 4, md: 8 }}
+        py={{ base: 6, md: 10 }}
+        flex="1"
+        width="100%"
         alignItems="center"
-        minHeight="100vh"
+        minH="100vh"
       >
         {children}
       </Stack>
diff --git a/src/components/search/result-box.tsx b/src/components/search/result-box.tsx
index 750b4a9..7191644 100644
--- a/src/components/search/result-box.tsx
+++ b/src/components/search/result-box.tsx
@@ -5,23 +5,45 @@ export const ResultBox = ({ definition, category, term }: any): JSX.Element => {
     <>
       <Box
         width="100%"
-        background="#2C3539"
-        borderWidth="1px"
-        borderColor="black"
+        background="white" 
+        borderRadius="xl"
+        boxShadow="lg"
+        overflow="hidden"
+        transition="all 0.2s"
+        _hover={{
+          transform: "translateY(-2px)",
+          boxShadow: "xl"
+        }}
       >
-        <VStack padding={3}>
+        <VStack 
+          spacing={4}
+          align="stretch"
+          padding={6}
+        >
           <Heading
             as="h1"
-            padding={2}
-            color="white"
-            fontSize={{ base: "md", sm: "xl" }}
+            color="gray.800"
+            fontSize={{ base: "lg", sm: "2xl" }}
+            fontWeight="bold"
+            lineHeight="tight"
           >
             {term}
           </Heading>
-          <Tag variant="solid" colorScheme="blackAlpha" size={"sm"}>
-            <TagLabel color="white">{category}</TagLabel>
+          <Tag
+            variant="subtle"
+            colorScheme="blue"
+            size="md"
+            borderRadius="full"
+            paddingX={4}
+            paddingY={1}
+          >
+            <TagLabel fontWeight="medium">{category}</TagLabel>
           </Tag>
-          <Text padding={2} fontSize={{ base: "xs", sm: "md" }} color="white">
+          <Text 
+            fontSize={{ base: "sm", sm: "md" }}
+            color="gray.600"
+            lineHeight="tall"
+          >
             {definition}
           </Text>
         </VStack>
diff --git a/src/components/search/result.tsx b/src/components/search/result.tsx
index 3b416e0..d0c0944 100644
--- a/src/components/search/result.tsx
+++ b/src/components/search/result.tsx
@@ -9,14 +9,12 @@ export const Result = ({
   term,
 }: any): JSX.Element => {
   return (
-    <>
-      <Container title="search-result-content" maxW={{ base: "sm", sm: "xl" }}>
-        <VStack spacing={5}>
-          <ResultBox definition={definition} category={category} term={term} />
-          <ContentSourceBox transactionId={transactionId} />
-        </VStack>
-      </Container>
-    </>
+    <Container title="search-result-content" maxW={{ base: "sm", sm: "xl" }}>
+      <VStack spacing={5}>
+        <ResultBox definition={definition} category={category} term={term} />
+        <ContentSourceBox transactionId={transactionId} />
+      </VStack>
+    </Container>
   );
 };
 
diff --git a/src/components/search/unavailable-result.tsx b/src/components/search/unavailable-result.tsx
index 35899a7..b2fafcc 100644
--- a/src/components/search/unavailable-result.tsx
+++ b/src/components/search/unavailable-result.tsx
@@ -9,46 +9,44 @@ export const UnavailableResult = ({ term }: any): JSX.Element => {
   const github_issue_href = 'https://github.com/narbs91/glosseta/issues/new?assignees=&labels=definition&template=definition-request.yml&title=%5BDefinition+Request%5D%3A+';
 
   return (
-    <>
-      <Container title="unavailable-search-result" maxW={{ base: "sm", sm: "xl" }}>
-        <Box
-          width="100%"
-          background="#2C3539"
-          borderWidth="1px"
-          borderColor="black"
-        >
-          <VStack padding={3}>
-            <Heading
-              as="h1"
-              padding={2}
-              maxWidth="50%"
-              color="white"
-              fontSize={{ base: "md", sm: "xl" }}
-              isTruncated
-            >
-              {term}
-            </Heading>
-            <Text padding={2} fontSize={{ base: "xs", sm: "md" }} color="white">
-              {t('unavailableSearchResultDescription')}{" "}
-              <Link color="aquamarine" href={twitter_href} isExternal>
-                {t('twitter')} <ExternalLinkIcon mx="2px" />
-                <span className={styles.visuallyhidden}>
-                  {t('opensInANewWindow')}
-                </span>
-              </Link>
-              {t('or')}{" "} 
-              <Link color="aquamarine" href={github_issue_href} isExternal>
-                {t('gitHubIssueText')} <ExternalLinkIcon mx="2px" />
-                <span className={styles.visuallyhidden}>
-                  {t('opensInANewWindow')}
-                </span>
-              </Link>
-              
-            </Text>
-          </VStack>
-        </Box>
-      </Container>
-    </>
+    <Container title="unavailable-search-result" maxW={{ base: "sm", sm: "xl" }}>
+      <Box
+        width="100%"
+        background="#2C3539"
+        borderWidth="1px"
+        borderColor="black"
+      >
+        <VStack padding={3}>
+          <Heading
+            as="h1"
+            padding={2}
+            maxWidth="50%"
+            color="white"
+            fontSize={{ base: "md", sm: "xl" }}
+            isTruncated
+          >
+            {term}
+          </Heading>
+          <Text padding={2} fontSize={{ base: "xs", sm: "md" }} color="white">
+            {t('unavailableSearchResultDescription')}{" "}
+            <Link color="aquamarine" href={twitter_href} isExternal>
+              {t('twitter')} <ExternalLinkIcon mx="2px" />
+              <span className={styles.visuallyhidden}>
+                {t('opensInANewWindow')}
+              </span>
+            </Link>
+            {t('or')}{" "} 
+            <Link color="aquamarine" href={github_issue_href} isExternal>
+              {t('gitHubIssueText')} <ExternalLinkIcon mx="2px" />
+              <span className={styles.visuallyhidden}>
+                {t('opensInANewWindow')}
+              </span>
+            </Link>
+            
+          </Text>
+        </VStack>
+      </Box>
+    </Container>
   );
 };
 
diff --git a/src/pages/glossary/index.tsx b/src/pages/glossary/index.tsx
index eabd888..8a3037f 100644
--- a/src/pages/glossary/index.tsx
+++ b/src/pages/glossary/index.tsx
@@ -7,8 +7,12 @@ import {
   Heading,
   VStack,
   Container,
+  Box,
+  Text,
+  HStack,
+  Link,
+  Badge,
 } from "@chakra-ui/react";
-import { ResultBox } from "../../components/search/result-box";
 import { NewTermRequest } from "../../components/glossary/new-term-request";
 import { ScrollToTopButton } from "../../components/glossary/scroll-to-top-button";
 import { useTranslation } from "react-i18next";
@@ -20,51 +24,236 @@ const AllTerms = ({ terms }: any): JSX.Element => {
   return (
     <>
       <PageLayout>
-        <chakra.main>
-          <Heading
-            title="glossary-list-heading"
-            as="h1"
-            padding={5}
-            color="white"
-            fontSize={{ base: "xl", sm: "3xl" }}
-            textAlign="center"
-            id="glossary-heading"
-            tabIndex={-1}
+        <chakra.main maxW="1200px" mx="auto" px={4}>
+          {/* Hero Section */}
+          <Box 
+            bg="linear-gradient(to right, blue.600, purple.600)"
+            borderRadius="xl"
+            mb={8}
+            p={8}
           >
-            {t("glossaryPageHeading")}
-          </Heading>
-          <SimpleGrid
-            columns={1}
-            spacing={5}
-            padding={3}
-            flex={1}
-            flexDirection="column"
-            display="flex"
-            alignItems="center"
+            <Heading
+              title="glossary-list-heading"
+              as="h1"
+              color="white"
+              fontSize={{ base: "2xl", sm: "4xl" }}
+              textAlign="center"
+              id="glossary-heading"
+              tabIndex={-1}
+              mb={4}
+            >
+              {t("glossaryPageHeading")}
+            </Heading>
+            
+            {/* Quick intro text */}
+            <Text 
+              color="whiteAlpha.900" 
+              textAlign="center"
+              fontSize={{ base: "md", sm: "lg" }}
+              maxW="2xl"
+              mx="auto"
+            >
+              {t("glossaryPageDescription")}
+            </Text>
+          </Box>
+
+          {/* Alphabet Navigation */}
+          <Box 
+            mb={8}
+            overflowX="auto"
+            py={4}
+            css={{
+              '&::-webkit-scrollbar': {
+                display: 'none'
+              }
+            }}
           >
-            <Container title="glossary-term-list" maxW={{ base: "sm", sm: "xl" }}>
-              <VStack spacing={5}>
-                {terms.length === 0 ? (
-                  <GlossaryDataFetchError />
-                ) : (
-                  <>
-                    {terms.map((termItem: any) => {
-                      return (
-                        <ResultBox
-                          key={termItem.term}
-                          definition={termItem.definition}
-                          category={termItem.category.toUpperCase()}
-                          term={termItem.term.toUpperCase()}
-                        />
-                      );
-                    })}
-                    <ScrollToTopButton anchorIdToFocus="glossary-heading"/>
+            <HStack
+              spacing={2}
+              justify="center"
+              flexWrap="wrap"
+            >
+              
+              {Object.keys(
+                terms.reduce((acc: Record<string, any[]>, term: any) => {
+                  const firstLetter = term.term[0].toUpperCase();
+                  if (!acc[firstLetter]) {
+                    acc[firstLetter] = [];
+                  }
+                  acc[firstLetter].push(term);
+                  return acc;
+                }, {})
+              )
+              .sort()
+              .map((letter) => (
+                <Link
+                  key={letter}
+                  href={`#section-${letter}`}
+                  px={2}
+                  py={2}
+                  borderRadius="full"
+                  fontSize={{ base: "sm", sm: "md", md: "lg" }}
+                  fontWeight="medium"
+                  bg="gray.800"
+                  color="white"
+                  mx={1}
+                  minW={{ base: "36px", sm: "40px", md: "44px" }}
+                  height={{ base: "36px", sm: "40px", md: "44px" }}
+                  display="flex"
+                  alignItems="center"
+                  justifyContent="center"
+                  _hover={{
+                    textDecoration: "none",
+                    bg: "blue.600",
+                    transform: "translateY(-1px)"
+                  }}
+                  _active={{
+                    bg: "blue.700",
+                    transform: "translateY(0)"
+                  }}
+                  transition="all 0.2s"
+                >
+                  {letter}
+                </Link>
+              ))}
+            </HStack>
+          </Box>
+
+          {/* Terms Grid */}
+          
+          <Box>
+            <Container 
+              title="glossary-term-list" 
+              maxW="full" 
+              p={0}
+            >
+              {terms.length === 0 ? (
+                <GlossaryDataFetchError />
+              ) : (
+                <>
+                  {/* Category filters */}
+                  <HStack 
+                    spacing={4} 
+                    mb={6} 
+                    overflowX="auto" 
+                    py={2}
+                    css={{
+                      '&::-webkit-scrollbar': {
+                        display: 'none'
+                      }
+                    }}
+                  >
+                   
+                  </HStack>
+
+                  {/* Terms Grid */}
+                  <Box>
+                    {/* Group and sort terms alphabetically */}
+                    {Object.entries(
+                      terms.reduce((acc: Record<string, any[]>, term: any) => {
+                        const firstLetter = term.term[0].toUpperCase();
+                        if (!acc[firstLetter]) {
+                          acc[firstLetter] = [];
+                        }
+                        acc[firstLetter].push(term);
+                        return acc;
+                      }, {})
+                    )
+                    .sort(([a], [b]) => a.localeCompare(b))
+                    .map(([letter, letterTerms]) => (
+                      <Box key={letter} mb={12} id={`section-${letter}`}>
+                        <Heading
+                          as="h2"
+                          size="lg"
+                          color="gray.800"
+                          mb={6}
+                          px={4}
+                          py={2}
+                          borderRadius="lg"
+                          bg="white"
+                          boxShadow="md"
+                          display="inline-block"
+                          position="relative"
+                          _before={{
+                            content: '""',
+                            position: "absolute",
+                            left: 0,
+                            top: "50%",
+                            transform: "translateY(-50%)",
+                            width: "4px",
+                            height: "70%",
+                            borderRadius: "full"
+                          }}
+                        >
+                          {letter}
+                        </Heading>
+                        <SimpleGrid
+                          columns={{ base: 1, md: 2, lg: 3 }}
+                          spacing={6}
+                        >
+                          {(letterTerms as any[]).sort((a,b) => a.term.localeCompare(b.term)).map((termItem: any) => (
+                            <Link
+                              href={`/search/term/${termItem.term}`}
+                              key={termItem.term}
+                              _hover={{ textDecoration: 'none' }}
+                            >
+                              <Box
+                                p={6}
+                                bg="white"
+                                borderRadius="xl"
+                                boxShadow="sm"
+                                transition="all 0.2s"
+                                height="250px"
+                                _hover={{
+                                  transform: "translateY(-4px)",
+                                  boxShadow: "lg"
+                                }}
+                              >
+                                <VStack align="start" spacing={3} height="100%">
+                                  <Badge
+                                    colorScheme="blue"
+                                    fontSize="sm" 
+                                    textTransform="uppercase"
+                                    px={3}
+                                    py={1}
+                                    borderRadius="full"
+                                  >
+                                    {termItem.category.toUpperCase()}
+                                  </Badge>
+                                  <Heading
+                                    as="h3"
+                                    size="md"
+                                    color="gray.800"
+                                  >
+                                    {termItem.term.toUpperCase()}
+                                  </Heading>
+                                  <Text
+                                    color="gray.600"
+                                    noOfLines={3}
+                                    flex="1"
+                                  >
+                                    {termItem.definition}
+                                  </Text>
+                                </VStack>
+                              </Box>
+                            </Link>
+                          ))}
+                        </SimpleGrid>
+                      </Box>
+                    ))}
+                  </Box>
+
+                  {/* Bottom Actions */}
+                  <VStack spacing={4} mt={8}>
                     <NewTermRequest />
-                  </>
-                )}
-              </VStack>
+                    <ScrollToTopButton 
+                      anchorIdToFocus="glossary-heading"
+                    />
+                  </VStack>
+                </>
+              )}
             </Container>
-          </SimpleGrid>
+          </Box>
         </chakra.main>
       </PageLayout>
     </>
diff --git a/src/pages/search/term/[id].tsx b/src/pages/search/term/[id].tsx
index 4d319e3..8d71c8c 100644
--- a/src/pages/search/term/[id].tsx
+++ b/src/pages/search/term/[id].tsx
@@ -1,15 +1,37 @@
 import { GetStaticPaths, GetStaticProps } from "next";
-import { SimpleGrid, chakra } from "@chakra-ui/react";
-import { Result } from "../../../components/search/result";
-import { UnavailableResult } from "../../../components/search/unavailable-result";
+import {
+  Box,
+  Container,
+  Heading,
+  Text,
+  VStack,
+  HStack,
+  Badge,
+  Divider,
+  Icon,
+  useColorModeValue,
+  Button,
+  Flex,
+  Tooltip,
+  Image,
+  Link
+} from "@chakra-ui/react";
+import { motion } from "framer-motion";
+import { FiBook, FiShare2, FiCopy, FiArrowLeft } from "react-icons/fi";
+import { ExternalLinkIcon } from "@chakra-ui/icons";
+import { useRouter } from "next/router";
+import { useTranslation } from "next-i18next";
 import PageLayout from "../../../components/layout/page";
 import SearchBar from "../../../components/input/search-bar";
 import ApiError from "../../../components/search/api-error";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { termFilter } from "../../../filter/termConfig";
 import { fetchGlossaryTerm } from "../../../backend/service/glosseta.service";
-import { useRouter } from "next/router";
 import FallBack from "../../../components/loading/fallback";
+import styles from "../../../../styles/Home.module.css";
+import { VIEWBLOCK_URL } from "../../../utils/glosseta-constants";
+
+const MotionBox = motion(Box);
 
 const SearchResults = ({
   term,
@@ -19,7 +41,12 @@ const SearchResults = ({
   transactionId,
   isError,
 }: any): JSX.Element => {
+  const twitter_href = `https://twitter.com/intent/tweet?screen_name=Glossetadotcom&text=Please%20add%20${term}%20to%20the%20knowledge%20base`;
+
   const router = useRouter();
+  const { t } = useTranslation();
+  const bgColor = useColorModeValue("white", "gray.800");
+  const borderColor = useColorModeValue("gray.200", "gray.700");
 
   if (router.isFallback) {
     return <FallBack />;
@@ -27,64 +54,263 @@ const SearchResults = ({
 
   if (isError) {
     return (
-      <PageLayout>
-        <SearchBar
-          baseWidth={"80vw"}
-          smWidth={"50vw"}
-          mdWidth={"50vw"}
-          lgWidth={"30vw"}
-          filterItems={termFilter}
-        />
-        <chakra.main>
-          <SimpleGrid
-            columns={1}
-            spacing="80px"
-            flex={1}
-            justifyContent="center"
-            flexDirection="column"
-            display="flex"
-            alignItems="center"
-          >
-            <ApiError />
-          </SimpleGrid>
-        </chakra.main>
-      </PageLayout>
+      <Container maxW="container.xl" py={10}>
+        <ApiError />
+      </Container>
     );
   }
 
+  const handleCopy = () => {
+    navigator.clipboard.writeText(term);
+    // Add toast notification here
+  };
+
+  const handleShare = () => {
+    navigator
+      .share({
+        title: term,
+        text: definition,
+        url: window.location.href,
+      })
+      .catch(() => {
+        navigator.clipboard.writeText(window.location.href);
+      });
+  };
+
   return (
-    <>
-      <PageLayout>
-        <SearchBar
-          baseWidth={"80vw"}
-          smWidth={"50vw"}
-          mdWidth={"50vw"}
-          lgWidth={"30vw"}
-          filterItems={termFilter}
-        />
-        <chakra.main>
-          <SimpleGrid
-            columns={1}
-            spacing="80px"
-            flex={1}
-            justifyContent="center"
-            flexDirection="column"
-            display="flex"
-            alignItems="center"
+    <PageLayout>
+      <Container maxW="container.xl" py={{ base: 6, md: 12 }}>
+        {isAvailable ? (
+          <VStack spacing={8} align="stretch">
+            {/* Term Header Section */}
+            <MotionBox
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              bg={bgColor}
+              borderRadius="2xl"
+              borderWidth="1px"
+              borderColor={borderColor}
+              p={6}
+              shadow="sm"
+            >
+              <Flex justify="space-between" align="center" wrap="wrap" gap={4}>
+                <VStack align="start" spacing={3}>
+                  <Badge
+                    colorScheme="blue"
+                    fontSize="sm"
+                    textTransform="uppercase"
+                    px={3}
+                    py={1}
+                    borderRadius="full"
+                  >
+                    {category}
+                  </Badge>
+                  <Heading as={"h1"} size="2xl">
+                    {term.toUpperCase()}
+                  </Heading>
+                </VStack>
+                <HStack spacing={4}>
+                  <Tooltip label="Copy Term">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={handleCopy}
+                      leftIcon={<Icon as={FiCopy} />}
+                    >
+                      {t("copy")}
+                    </Button>
+                  </Tooltip>
+                  <Tooltip label="Share">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={handleShare}
+                      leftIcon={<Icon as={FiShare2} />}
+                    >
+                      {t("share")}
+                    </Button>
+                  </Tooltip>
+                </HStack>
+              </Flex>
+            </MotionBox>
+
+            {/* Definition Section */}
+            <MotionBox
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.2 }}
+              bg={bgColor}
+              borderRadius="2xl"
+              borderWidth="1px"
+              borderColor={borderColor}
+              p={6}
+              shadow="sm"
+            >
+              <VStack align="stretch" spacing={6}>
+                <HStack>
+                  <Icon as={FiBook} color="blue.500" boxSize={5} />
+                  <Heading as={"h2"} fontWeight="bold" fontSize="xl">
+                    {t("definition")}
+                  </Heading>
+                </HStack>
+                <Text fontSize="lg" lineHeight="tall">
+                  {definition}
+                </Text>
+                <Divider />
+                <HStack justify="space-between" align="center" width="100%">
+                  <Link
+                    href={`${VIEWBLOCK_URL}/${transactionId}`}
+                    isExternal
+                    padding={2}
+                    color="blue"
+                  >
+                    {t("searchResultContentSourceTransactionLinkText")}
+                    <ExternalLinkIcon mx="2px" />
+                    <span className={styles.visuallyhidden}>
+                      {t("opensInANewWindow")}
+                    </span>
+                  </Link>
+                  <Image
+                    srcSet="/arweave_seal_mobile_light.svg 360w,
+                      /arweave_seal_light.png 1100w,"
+                    sizes="(max-width: 600px) 360px,
+                      1100px"
+                    alt="Permanent on Arweave"
+                    width="100px"
+                  />
+                </HStack>
+              </VStack>
+            </MotionBox>
+
+            <MotionBox
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.4 }}
+              bg={bgColor}
+              borderRadius="2xl"
+              borderWidth="1px"
+              borderColor={borderColor}
+              p={6}
+              shadow="sm"
+            >
+              <Heading as={"h2"} size="md" mb={4}>
+                {t("moreLearningMaterials")}
+              </Heading>
+              <VStack spacing={4} align="stretch">
+                <Text color="black.500" fontSize="md">
+                  {t("comingSoon")}
+                </Text>
+              </VStack>
+            </MotionBox>
+          </VStack>
+        ) : (
+          <MotionBox
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
           >
-            {isAvailable && (
-              <Result
-                transactionId={transactionId}
-                definition={definition}
-                category={category.toUpperCase()}
-                term={term.toUpperCase()}
-              />
-            )}
-            {!isAvailable && <UnavailableResult term={term.toUpperCase()} />}
-          </SimpleGrid>
-        </chakra.main>
-      </PageLayout>
-    </>
+            <Box
+              width="100%"
+              background="white"
+              borderRadius="xl"
+              boxShadow="lg"
+              overflow="hidden"
+              p={6}
+            >
+              <VStack spacing={4} align="stretch">
+                <Heading
+                  as="h1"
+                  color="gray.800"
+                  fontSize={{ base: "lg", sm: "2xl" }}
+                  fontWeight="bold"
+                  lineHeight="tight"
+                >
+                  {term.toUpperCase()}
+                </Heading>
+                <Text
+                  fontSize={{ base: "sm", sm: "md" }}
+                  color="gray.600"
+                  lineHeight="tall"
+                >
+                  {t("unavailableSearchResultDescription")}
+                </Text>
+                <Button
+                  as="a"
+                  href={twitter_href}
+                  target="_blank"
+                  colorScheme="purple"
+                  size="md"
+                  width="fit-content"
+                  leftIcon={<FiBook />}
+                  _hover={{
+                    transform: "translateY(-2px)",
+                    boxShadow: "lg",
+                  }}
+                  transition="all 0.2s"
+                  rounded="full"
+                  px={6}
+                >
+                  {t("requestThisTerm")}
+                </Button>
+              </VStack>
+            </Box>
+          </MotionBox>
+        )}
+        <Box h={8} />
+        {/* Enhanced Search Section */}
+        <MotionBox
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.3 }}
+          position="sticky"
+          top={4}
+          zIndex={10}
+          mb={8}
+        >
+          <Box
+            bg={bgColor}
+            borderRadius="2xl"
+            boxShadow="lg"
+            p={4}
+            borderWidth="1px"
+            borderColor={borderColor}
+            _hover={{ boxShadow: "xl", transform: "translateY(-2px)" }}
+            transition="all 0.2s"
+          >
+            <VStack spacing={4}>
+              <HStack w="full" justify="space-between">
+                <Button
+                  leftIcon={<FiArrowLeft />}
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => router.back()}
+                >
+                  {t("back")}
+                </Button>
+              </HStack>
+
+              <Heading
+                as={"h2"}
+                fontSize="md"
+                color="black.500"
+                textAlign="center"
+              >
+                {t("searchForAnotherTerm")}
+              </Heading>
+
+              <Box position="relative" w="full" maxW="600px" mx="auto">
+                <SearchBar
+                  baseWidth="100%"
+                  smWidth="100%"
+                  mdWidth="100%"
+                  lgWidth="100%"
+                  filterItems={termFilter}
+                />
+              </Box>
+            </VStack>
+          </Box>
+        </MotionBox>
+      </Container>
+    </PageLayout>
   );
 };