From 55b2c9824b8cca36d9e9ef73c67203614b7b1606 Mon Sep 17 00:00:00 2001
From: Mehul Kiran Chaudhari
 <55375534+MehulKChaudhari@users.noreply.github.com>
Date: Fri, 13 Dec 2024 03:02:35 +0530
Subject: [PATCH 1/4] Add: Submit issue on GitHub Button

---
 .../components/Footer/Footer.tsx              |  2 +-
 .../components/Playground/Playground.tsx      | 19 +++++++++++++++++++
 .../Playground/__tests__/Playground.test.tsx  | 16 ++++++++++++++++
 3 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/apps/playground-web/components/Footer/Footer.tsx b/apps/playground-web/components/Footer/Footer.tsx
index 72f2d49..a4c383f 100644
--- a/apps/playground-web/components/Footer/Footer.tsx
+++ b/apps/playground-web/components/Footer/Footer.tsx
@@ -41,7 +41,7 @@ export default function Footer() {
             >
               <Button
                 variant="outline"
-                className="!w-full mt-2 !border-1 !border-gray-700 bg-blue-50 hover:text-blue text-black hover:text-blue-600"
+                className="!w-full mt-2 !border-1 !border-gray-700 bg-blue-50 hover:text-blue text-black hover:text-blue-600 flex items-center justify-center"
                 data-testid="github-button"
               >
                 <GitHub className="mr-2 h-4 w-4" /> GitHub (4k+)
diff --git a/apps/playground-web/components/Playground/Playground.tsx b/apps/playground-web/components/Playground/Playground.tsx
index bdf9011..c4714f7 100644
--- a/apps/playground-web/components/Playground/Playground.tsx
+++ b/apps/playground-web/components/Playground/Playground.tsx
@@ -3,6 +3,9 @@
 import Image from 'next/image';
 import SearchBox from '@/components/Search/SearchBox';
 import { TerminalUI } from './TerminalUI';
+import Link from 'next/link';
+import { Button } from '@dicedb/ui/button';
+import GitHub from "@mui/icons-material/GitHub";
 
 // utils
 
@@ -55,6 +58,22 @@ function Header() {
         />
         <h2 className="font-light text-2xl ml-2">PlayGround</h2>
       </div>
+        <Link
+          href="https://github.com/DiceDB/dice/issues/new/choose"
+          target="_blank"
+          rel="noopener noreferrer"
+          aria-label="Submit an issue or feedback"
+          data-testid="submit-issue-link"
+        >
+          <Button
+            variant="outline"
+            className="!w-full mt-2 !border-1 !border-gray-700 bg-blue-50 hover:text-blue text-black hover:text-blue-600 flex items-center justify-center"
+            data-testid="submit-issue-button"
+          >
+            Submit an Issue
+            <GitHub className="ml-2 h-4 w-4" /> 
+          </Button>
+        </Link>
     </header>
   );
 }
diff --git a/apps/playground-web/components/Playground/__tests__/Playground.test.tsx b/apps/playground-web/components/Playground/__tests__/Playground.test.tsx
index a500e69..82c8744 100644
--- a/apps/playground-web/components/Playground/__tests__/Playground.test.tsx
+++ b/apps/playground-web/components/Playground/__tests__/Playground.test.tsx
@@ -11,6 +11,8 @@ const setupTest = () => {
   const terminalContainerElement = screen.getByTestId('terminal-container');
   const searchBoxContainerElement = screen.getByTestId('searchbox-container');
   const searchBoxWrapperElement = screen.getByTestId('searchbox-wrapper');
+  const submitIssueButtonElement = screen.getByTestId('submit-issue-button');
+  const submitIssueLinkElement = screen.getByTestId('submit-issue-link');
 
   return {
     playgroundElement,
@@ -19,6 +21,8 @@ const setupTest = () => {
     terminalContainerElement,
     searchBoxContainerElement,
     searchBoxWrapperElement,
+    submitIssueButtonElement,
+    submitIssueLinkElement,
     ...utils,
   };
 };
@@ -40,4 +44,16 @@ describe('Playground component', () => {
     expect(searchBoxContainerElement).toBeInTheDocument();
     expect(searchBoxWrapperElement).toBeInTheDocument();
   });
+
+  it('renders the "Submit an Issue" button', () => {
+    const {
+      submitIssueButtonElement,
+      submitIssueLinkElement,
+    } = setupTest();
+    
+    expect(submitIssueButtonElement).toBeInTheDocument();
+    expect(submitIssueLinkElement).toBeInTheDocument();
+    expect(submitIssueLinkElement).toHaveAttribute('href', 'https://github.com/DiceDB/dice/issues/new/choose');
+    expect(submitIssueLinkElement).toHaveAttribute('aria-label', 'Submit an issue or feedback');
+  });
 });

From fef4bb0217c7e286def72153a760e22368107abe Mon Sep 17 00:00:00 2001
From: Mehul Kiran Chaudhari
 <55375534+MehulKChaudhari@users.noreply.github.com>
Date: Sat, 14 Dec 2024 19:02:51 +0530
Subject: [PATCH 2/4] fix: GitHub link

---
 apps/playground-web/components/Playground/Playground.tsx        | 2 +-
 .../components/Playground/__tests__/Playground.test.tsx         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/playground-web/components/Playground/Playground.tsx b/apps/playground-web/components/Playground/Playground.tsx
index c4714f7..e3e942e 100644
--- a/apps/playground-web/components/Playground/Playground.tsx
+++ b/apps/playground-web/components/Playground/Playground.tsx
@@ -59,7 +59,7 @@ function Header() {
         <h2 className="font-light text-2xl ml-2">PlayGround</h2>
       </div>
         <Link
-          href="https://github.com/DiceDB/dice/issues/new/choose"
+          href="https://github.com/DiceDB/playground-mono/issues/new"
           target="_blank"
           rel="noopener noreferrer"
           aria-label="Submit an issue or feedback"
diff --git a/apps/playground-web/components/Playground/__tests__/Playground.test.tsx b/apps/playground-web/components/Playground/__tests__/Playground.test.tsx
index 82c8744..5e3fc5b 100644
--- a/apps/playground-web/components/Playground/__tests__/Playground.test.tsx
+++ b/apps/playground-web/components/Playground/__tests__/Playground.test.tsx
@@ -53,7 +53,7 @@ describe('Playground component', () => {
     
     expect(submitIssueButtonElement).toBeInTheDocument();
     expect(submitIssueLinkElement).toBeInTheDocument();
-    expect(submitIssueLinkElement).toHaveAttribute('href', 'https://github.com/DiceDB/dice/issues/new/choose');
+    expect(submitIssueLinkElement).toHaveAttribute('href', 'https://github.com/DiceDB/playground-mono/issues/new');
     expect(submitIssueLinkElement).toHaveAttribute('aria-label', 'Submit an issue or feedback');
   });
 });

From 06bb5bbfc8790a5fa655f3ad8961446aab30b383 Mon Sep 17 00:00:00 2001
From: pshubham <pshubham@salesforce.com>
Date: Tue, 17 Dec 2024 10:44:01 +0530
Subject: [PATCH 3/4] Remove footer and add issue/bug template

---
 .github/ISSUE_TEMPLATE/report_bug.md          |  30 ++++
 .../components/Footer/Footer.tsx              | 134 ------------------
 .../components/Playground/Playground.tsx      |  12 +-
 3 files changed, 40 insertions(+), 136 deletions(-)
 create mode 100644 .github/ISSUE_TEMPLATE/report_bug.md

diff --git a/.github/ISSUE_TEMPLATE/report_bug.md b/.github/ISSUE_TEMPLATE/report_bug.md
new file mode 100644
index 0000000..100abcb
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/report_bug.md
@@ -0,0 +1,30 @@
+---
+name: Bug in DiceDB Playground
+about: Report a bug in the DiceDB Playground
+title: '<Describe the bug in one concise line>'
+labels: ''
+assignees: ''
+---
+
+## Bug Category
+
+- [ ] UI
+- [ ] Backend
+
+## Steps to Reproduce
+
+```
+{steps_to_reproduce}
+```
+
+## Expected Behavior
+
+```
+<!-- Describe what should happen -->
+```
+
+## Actual Behavior
+
+```
+<!-- Describe what actually happens -->
+```
diff --git a/apps/playground-web/components/Footer/Footer.tsx b/apps/playground-web/components/Footer/Footer.tsx
index a4c383f..49b4991 100644
--- a/apps/playground-web/components/Footer/Footer.tsx
+++ b/apps/playground-web/components/Footer/Footer.tsx
@@ -13,140 +13,6 @@ export default function Footer() {
       className="bg-white border-t border-gray-100 py-12"
       data-testid="footer"
     >
-      <div className="container mx-auto px-4">
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
-          <div>
-            <h3
-              className="text-gray-500 font-semibold mb-4 text-center"
-              data-testid="footer-heading"
-            >
-              DiceDB
-            </h3>
-            <Link
-              href="https://dicedb.io/get-started/installation/"
-              target="_blank"
-              data-testid="get-started-link"
-            >
-              <Button
-                className="w-full !bg-red-600 hover:!bg-red-700 !text-white"
-                data-testid="get-started-button"
-              >
-                Get Started →
-              </Button>
-            </Link>
-            <Link
-              href="https://github.com/dicedb/dice"
-              target="_blank"
-              data-testid="github-link"
-            >
-              <Button
-                variant="outline"
-                className="!w-full mt-2 !border-1 !border-gray-700 bg-blue-50 hover:text-blue text-black hover:text-blue-600 flex items-center justify-center"
-                data-testid="github-button"
-              >
-                <GitHub className="mr-2 h-4 w-4" /> GitHub (4k+)
-              </Button>
-            </Link>
-          </div>
-
-          <div className="text-center">
-            <h3 className="text-gray-500 font-semibold mb-4">Developers</h3>
-            <ul className="space-y-2">
-              <li>
-                <a
-                  href="https://dicedb.io/get-started/installation"
-                  target="_blank"
-                  className="text-gray-600 hover:text-gray-900"
-                  data-testid="quickstart-link"
-                >
-                  Quickstart
-                </a>
-              </li>
-              <li>
-                <a
-                  href="https://dicedb.io/commands/get"
-                  target="_blank"
-                  className="text-gray-600 hover:text-gray-900"
-                  data-testid="commands-link"
-                >
-                  Commands
-                </a>
-              </li>
-              <li>
-                <a
-                  href="https://github.com/DiceDB/dice/tree/master/examples/leaderboard-go"
-                  target="_blank"
-                  className="text-gray-600 hover:text-gray-900"
-                  data-testid="examples-link"
-                >
-                  Examples
-                </a>
-              </li>
-            </ul>
-          </div>
-
-          <div className="text-center">
-            <h3 className="text-gray-500 font-semibold mb-4">Examples</h3>
-            <ul className="space-y-2">
-              <li>
-                <a
-                  href="https://github.com/DiceDB/dice/tree/master/examples/leaderboard-go"
-                  target="_blank"
-                  className="text-gray-600 hover:text-gray-900"
-                  data-testid="leaderboard-link"
-                >
-                  Real-time Leaderboard
-                </a>
-              </li>
-            </ul>
-          </div>
-
-          <div className="text-center">
-            <h3 className="text-gray-500 font-semibold mb-4">Us and Socials</h3>
-            <ul className="space-y-2">
-              <li>
-                <a
-                  href="mailto:arpit@dicedb.io"
-                  target="_blank"
-                  className="text-gray-600 hover:text-gray-900"
-                  data-testid="contact-link"
-                >
-                  Contact Us
-                </a>
-              </li>
-            </ul>
-            <div className="space-x-4 mt-4 items-center justify-items-center">
-              <a
-                href="https://discord.gg/6r8uXWtXh7"
-                target="_blank"
-                className="text-gray-400 hover:text-gray-600"
-                aria-label="People"
-                data-testid="people-icon-link"
-              >
-                <People className="h-6 w-6" />
-              </a>
-              <a
-                href="https://twitter.com/thedicedb"
-                target="_blank"
-                className="text-gray-400 hover:text-gray-600"
-                aria-label="Twitter"
-                data-testid="twitter-icon-link"
-              >
-                <Twitter className="h-6 w-6" />
-              </a>
-              <a
-                href="https://github.com/dicedb/dice"
-                target="_blank"
-                className="text-gray-400 hover:text-gray-600"
-                aria-label="GitHub"
-                data-testid="github-icon-link"
-              >
-                <GitHub className="h-6 w-6" />
-              </a>
-            </div>
-          </div>
-        </div>
-      </div>
     </footer>
   );
 }
diff --git a/apps/playground-web/components/Playground/Playground.tsx b/apps/playground-web/components/Playground/Playground.tsx
index e3e942e..2a9c96b 100644
--- a/apps/playground-web/components/Playground/Playground.tsx
+++ b/apps/playground-web/components/Playground/Playground.tsx
@@ -47,6 +47,13 @@ function Header() {
       className="navbar flex items-center justify-between py-5"
     >
       <div className="flex items-center">
+        <Link
+            href="https://dicedb.io"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="Submit an issue or feedback"
+            data-testid="submit-issue-link"
+        >
         <Image
           src="/images/dicedb-logo-light.png"
           width={110}
@@ -56,6 +63,7 @@ function Header() {
           className="object-contain"
           unoptimized
         />
+        </Link>
         <h2 className="font-light text-2xl ml-2">PlayGround</h2>
       </div>
         <Link
@@ -67,11 +75,11 @@ function Header() {
         >
           <Button
             variant="outline"
-            className="!w-full mt-2 !border-1 !border-gray-700 bg-blue-50 hover:text-blue text-black hover:text-blue-600 flex items-center justify-center"
+            className="!w-full mt-2 !border-1 !border-gray-700 bg-blue-50 hover:text-blue text-black hover:text-blue-600 flex items-center justify-center rounded-lg"
             data-testid="submit-issue-button"
           >
             Submit an Issue
-            <GitHub className="ml-2 h-4 w-4" /> 
+            <GitHub className="ml-2 h-4 w-4" />
           </Button>
         </Link>
     </header>

From 717fbb495bd89300b6ccd9ac989b601bc3671abb Mon Sep 17 00:00:00 2001
From: pshubham <pshubham@salesforce.com>
Date: Tue, 17 Dec 2024 11:09:22 +0530
Subject: [PATCH 4/4] Update test cases and fix lint issues

---
 .../components/Footer/Footer.tsx              |  13 +-
 .../Footer/__tests__/Footer.test.tsx          | 133 ------------------
 .../components/Playground/Playground.tsx      |  60 ++++----
 .../Playground/__tests__/Playground.test.tsx  |  37 ++++-
 4 files changed, 61 insertions(+), 182 deletions(-)
 delete mode 100644 apps/playground-web/components/Footer/__tests__/Footer.test.tsx

diff --git a/apps/playground-web/components/Footer/Footer.tsx b/apps/playground-web/components/Footer/Footer.tsx
index 49b4991..e025f57 100644
--- a/apps/playground-web/components/Footer/Footer.tsx
+++ b/apps/playground-web/components/Footer/Footer.tsx
@@ -1,18 +1,7 @@
 'use client';
 
 import React from 'react';
-import { Twitter } from '@mui/icons-material';
-import GitHub from '@mui/icons-material/GitHub';
-import People from '@mui/icons-material/People';
-import { Button } from '@dicedb/ui/button';
-import Link from 'next/link';
 
 export default function Footer() {
-  return (
-    <footer
-      className="bg-white border-t border-gray-100 py-12"
-      data-testid="footer"
-    >
-    </footer>
-  );
+  return <footer data-testid="footer"></footer>;
 }
diff --git a/apps/playground-web/components/Footer/__tests__/Footer.test.tsx b/apps/playground-web/components/Footer/__tests__/Footer.test.tsx
deleted file mode 100644
index 061290e..0000000
--- a/apps/playground-web/components/Footer/__tests__/Footer.test.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-import '@testing-library/jest-dom';
-import { render, screen } from '@testing-library/react';
-import Footer from '../Footer';
-
-const setupTest = () => {
-  const utils = render(<Footer />);
-
-  const footerElement = screen.getByTestId('footer');
-  const headingElement = screen.getByTestId('footer-heading');
-  const getStartedLinkElement = screen.getByTestId('get-started-link');
-  const getStartedButtonElement = screen.getByTestId('get-started-button');
-  const githubLinkElement = screen.getByTestId('github-link');
-  const githubButtonElement = screen.getByTestId('github-button');
-  const quickStartLinkElement = screen.getByTestId('quickstart-link');
-  const commandsLinkElement = screen.getByTestId('commands-link');
-  const examplesLinkElement = screen.getByTestId('examples-link');
-  const leaderboardLinkElement = screen.getByTestId('leaderboard-link');
-  const contactLinkElement = screen.getByTestId('contact-link');
-  const peopleIconLinkElement = screen.getByTestId('people-icon-link');
-  const twitterIconLinkElement = screen.getByTestId('twitter-icon-link');
-  const githubIconLinkElement = screen.getByTestId('github-icon-link');
-
-  return {
-    footerElement,
-    headingElement,
-    getStartedLinkElement,
-    getStartedButtonElement,
-    githubLinkElement,
-    githubButtonElement,
-    quickStartLinkElement,
-    commandsLinkElement,
-    examplesLinkElement,
-    leaderboardLinkElement,
-    contactLinkElement,
-    peopleIconLinkElement,
-    twitterIconLinkElement,
-    githubIconLinkElement,
-    ...utils,
-  };
-};
-
-describe('Footer component', () => {
-  it('renders the footer component', () => {
-    const {
-      footerElement,
-      headingElement,
-      getStartedLinkElement,
-      getStartedButtonElement,
-      githubLinkElement,
-      githubButtonElement,
-      quickStartLinkElement,
-      commandsLinkElement,
-      examplesLinkElement,
-      leaderboardLinkElement,
-      contactLinkElement,
-      peopleIconLinkElement,
-      twitterIconLinkElement,
-      githubIconLinkElement,
-    } = setupTest();
-
-    // Assert footer and its heading are present
-    expect(footerElement).toBeInTheDocument();
-    expect(headingElement).toBeInTheDocument();
-    expect(headingElement).toHaveTextContent('DiceDB');
-
-    // Assert 'Get Started' button and link
-    expect(getStartedLinkElement).toBeInTheDocument();
-    expect(getStartedButtonElement).toBeInTheDocument();
-    expect(getStartedLinkElement).toHaveAttribute(
-      'href',
-      'https://dicedb.io/get-started/installation/',
-    );
-
-    // Assert GitHub button and link
-    expect(githubLinkElement).toBeInTheDocument();
-    expect(githubButtonElement).toBeInTheDocument();
-    expect(githubLinkElement).toHaveAttribute(
-      'href',
-      'https://github.com/dicedb/dice',
-    );
-
-    // Assert developer section links
-    expect(quickStartLinkElement).toBeInTheDocument();
-    expect(quickStartLinkElement).toHaveAttribute(
-      'href',
-      'https://dicedb.io/get-started/installation',
-    );
-
-    expect(commandsLinkElement).toBeInTheDocument();
-    expect(commandsLinkElement).toHaveAttribute(
-      'href',
-      'https://dicedb.io/commands/get',
-    );
-
-    expect(examplesLinkElement).toBeInTheDocument();
-    expect(examplesLinkElement).toHaveAttribute(
-      'href',
-      'https://github.com/DiceDB/dice/tree/master/examples/leaderboard-go',
-    );
-
-    // Assert examples section link
-    expect(leaderboardLinkElement).toBeInTheDocument();
-    expect(leaderboardLinkElement).toHaveAttribute(
-      'href',
-      'https://github.com/DiceDB/dice/tree/master/examples/leaderboard-go',
-    );
-
-    // Assert social media and contact section
-    expect(contactLinkElement).toBeInTheDocument();
-    expect(contactLinkElement).toHaveAttribute(
-      'href',
-      'mailto:arpit@dicedb.io',
-    );
-
-    expect(peopleIconLinkElement).toBeInTheDocument();
-    expect(peopleIconLinkElement).toHaveAttribute(
-      'href',
-      'https://discord.gg/6r8uXWtXh7',
-    );
-
-    expect(twitterIconLinkElement).toBeInTheDocument();
-    expect(twitterIconLinkElement).toHaveAttribute(
-      'href',
-      'https://twitter.com/thedicedb',
-    );
-
-    expect(githubIconLinkElement).toBeInTheDocument();
-    expect(githubIconLinkElement).toHaveAttribute(
-      'href',
-      'https://github.com/dicedb/dice',
-    );
-  });
-});
diff --git a/apps/playground-web/components/Playground/Playground.tsx b/apps/playground-web/components/Playground/Playground.tsx
index 2a9c96b..07e8f70 100644
--- a/apps/playground-web/components/Playground/Playground.tsx
+++ b/apps/playground-web/components/Playground/Playground.tsx
@@ -5,7 +5,7 @@ import SearchBox from '@/components/Search/SearchBox';
 import { TerminalUI } from './TerminalUI';
 import Link from 'next/link';
 import { Button } from '@dicedb/ui/button';
-import GitHub from "@mui/icons-material/GitHub";
+import GitHub from '@mui/icons-material/GitHub';
 
 // utils
 
@@ -48,40 +48,40 @@ function Header() {
     >
       <div className="flex items-center">
         <Link
-            href="https://dicedb.io"
-            target="_blank"
-            rel="noopener noreferrer"
-            aria-label="Submit an issue or feedback"
-            data-testid="submit-issue-link"
+          href="https://dicedb.io"
+          target="_blank"
+          rel="noopener noreferrer"
+          aria-label="DiceDB web URL"
+          data-testid="dicedb-url-link"
         >
-        <Image
-          src="/images/dicedb-logo-light.png"
-          width={110}
-          height={110}
-          priority={true}
-          alt="DiceDB logo"
-          className="object-contain"
-          unoptimized
-        />
+          <Image
+            src="/images/dicedb-logo-light.png"
+            width={110}
+            height={110}
+            priority={true}
+            alt="DiceDB logo"
+            className="object-contain"
+            unoptimized
+          />
         </Link>
         <h2 className="font-light text-2xl ml-2">PlayGround</h2>
       </div>
-        <Link
-          href="https://github.com/DiceDB/playground-mono/issues/new"
-          target="_blank"
-          rel="noopener noreferrer"
-          aria-label="Submit an issue or feedback"
-          data-testid="submit-issue-link"
+      <Link
+        href="https://github.com/DiceDB/playground-mono/issues/new"
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label="Submit an issue or feedback"
+        data-testid="submit-issue-link"
+      >
+        <Button
+          variant="outline"
+          className="!w-full mt-2 !border-1 !border-gray-700 bg-blue-50 hover:text-blue text-black hover:text-blue-600 flex items-center justify-center rounded-lg"
+          data-testid="submit-issue-button"
         >
-          <Button
-            variant="outline"
-            className="!w-full mt-2 !border-1 !border-gray-700 bg-blue-50 hover:text-blue text-black hover:text-blue-600 flex items-center justify-center rounded-lg"
-            data-testid="submit-issue-button"
-          >
-            Submit an Issue
-            <GitHub className="ml-2 h-4 w-4" />
-          </Button>
-        </Link>
+          Submit an Issue
+          <GitHub className="ml-2 h-4 w-4" />
+        </Button>
+      </Link>
     </header>
   );
 }
diff --git a/apps/playground-web/components/Playground/__tests__/Playground.test.tsx b/apps/playground-web/components/Playground/__tests__/Playground.test.tsx
index 5e3fc5b..f6d7634 100644
--- a/apps/playground-web/components/Playground/__tests__/Playground.test.tsx
+++ b/apps/playground-web/components/Playground/__tests__/Playground.test.tsx
@@ -13,6 +13,8 @@ const setupTest = () => {
   const searchBoxWrapperElement = screen.getByTestId('searchbox-wrapper');
   const submitIssueButtonElement = screen.getByTestId('submit-issue-button');
   const submitIssueLinkElement = screen.getByTestId('submit-issue-link');
+  const dicedbLinkElement = screen.getByTestId('dicedb-url-link');
+  const dicedbImageElement = dicedbLinkElement.querySelector('img');
 
   return {
     playgroundElement,
@@ -23,6 +25,8 @@ const setupTest = () => {
     searchBoxWrapperElement,
     submitIssueButtonElement,
     submitIssueLinkElement,
+    dicedbLinkElement,
+    dicedbImageElement,
     ...utils,
   };
 };
@@ -45,15 +49,34 @@ describe('Playground component', () => {
     expect(searchBoxWrapperElement).toBeInTheDocument();
   });
 
+  it('renders the "DiceDB" image', () => {
+    const { dicedbLinkElement, dicedbImageElement } = setupTest();
+
+    expect(dicedbLinkElement).toBeInTheDocument();
+    expect(dicedbLinkElement).toHaveAttribute('href', 'https://dicedb.io');
+    expect(dicedbLinkElement).toHaveAttribute('target', '_blank');
+    expect(dicedbLinkElement).toHaveAttribute('rel', 'noopener noreferrer');
+
+    expect(dicedbImageElement).toBeInTheDocument();
+    expect(dicedbImageElement).toHaveAttribute(
+      'src',
+      '/images/dicedb-logo-light.png',
+    );
+    expect(dicedbImageElement).toHaveAttribute('alt', 'DiceDB logo');
+  });
+
   it('renders the "Submit an Issue" button', () => {
-    const {
-      submitIssueButtonElement,
-      submitIssueLinkElement,
-    } = setupTest();
-    
+    const { submitIssueButtonElement, submitIssueLinkElement } = setupTest();
+
     expect(submitIssueButtonElement).toBeInTheDocument();
     expect(submitIssueLinkElement).toBeInTheDocument();
-    expect(submitIssueLinkElement).toHaveAttribute('href', 'https://github.com/DiceDB/playground-mono/issues/new');
-    expect(submitIssueLinkElement).toHaveAttribute('aria-label', 'Submit an issue or feedback');
+    expect(submitIssueLinkElement).toHaveAttribute(
+      'href',
+      'https://github.com/DiceDB/playground-mono/issues/new',
+    );
+    expect(submitIssueLinkElement).toHaveAttribute(
+      'aria-label',
+      'Submit an issue or feedback',
+    );
   });
 });