diff --git a/.changeset/fluffy-plums-mix.md b/.changeset/fluffy-plums-mix.md
new file mode 100644
index 000000000..7610c5f25
--- /dev/null
+++ b/.changeset/fluffy-plums-mix.md
@@ -0,0 +1,7 @@
+---
+"@asyncapi/studio-ui": minor
+---
+
+- Added AppCard component.
+- change the dark background color of the design system.
+- Modified InfoBadges so it exports Info type.
diff --git a/apps/design-system/.storybook/preview.js b/apps/design-system/.storybook/preview.js
index 5db08d667..767b40510 100644
--- a/apps/design-system/.storybook/preview.js
+++ b/apps/design-system/.storybook/preview.js
@@ -1,6 +1,12 @@
 import '@asyncapi/studio-ui/styles.css'
 
 export const parameters = {
+  backgrounds: {
+    values: [
+      { name: 'light', value: '#ffffff' },
+      { name: 'dark', value: '#0F172A' },
+    ],
+  },
   actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
     matchers: {
diff --git a/apps/design-system/src/components/AppCard.stories.tsx b/apps/design-system/src/components/AppCard.stories.tsx
new file mode 100644
index 000000000..ab6f36046
--- /dev/null
+++ b/apps/design-system/src/components/AppCard.stories.tsx
@@ -0,0 +1,26 @@
+import { StoryObj, Meta } from '@storybook/react'
+
+import { AppCard } from '@asyncapi/studio-ui'
+
+const meta: Meta<typeof AppCard> = {
+  component: AppCard,
+  parameters: {
+    layout: 'centered',
+    backgrounds: {
+      default: 'dark'
+    }
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof AppCard>
+export const CodeEditor: Story = {
+  args: {
+    isActive: true,
+    name: 'User Registration',
+    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere fermentum urna, eu condimentum mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere fermentum urna, eucondimentum mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere fermentumurna, eu condimentum mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuerefermentum urna, eu condimentum maur",
+    badges: ['http', 'kafka', 'websocket'],
+    isServer: true,
+    isClient: false
+  },
+}
\ No newline at end of file
diff --git a/packages/ui/components/AppCard.tsx b/packages/ui/components/AppCard.tsx
new file mode 100644
index 000000000..998dc6b14
--- /dev/null
+++ b/packages/ui/components/AppCard.tsx
@@ -0,0 +1,52 @@
+import { Info, ServiceInfoBadge } from './ServiceInfoBadge';
+
+interface AppCardProps {
+  isActive?: boolean;
+  name: string;
+  description: string;
+  badges: Info[];
+  isClient: boolean;
+  isServer: boolean;
+  className?: string;
+}
+
+export const AppCard = ({isActive = false, name, description, badges, className, isClient, isServer}:AppCardProps) => {
+  const dedupedListOfBadges = Array.from(new Set(badges)).map((badge, index) => (<ServiceInfoBadge info={badge} key={badge + index} aria-hidden={true} />))
+  
+  const ariaDescriptionParts = [];
+  if (isClient) ariaDescriptionParts.push('client');
+  if (isServer) ariaDescriptionParts.push('server');
+  const protocols = badges.map(badge => badge.toLowerCase()).join(', ');
+  if (protocols) ariaDescriptionParts.push(`uses the following protocols: ${protocols}`);
+
+  const ariaDescription = `This application, named ${name}, is ${ariaDescriptionParts.join(' and ')}.`;
+
+  return (
+    <>
+      <div
+        aria-label={`${ariaDescription} ${isActive ? 'It is currently active.' : 'It is currently inactive.'}`}
+        className={`bg-gray-800 border-gray-800 rounded-lg max-w-[523px] w-full border-2 ${className} ${
+          isActive ? ' border-pink-800/30 shadow-active' : ''
+        }`}
+      >
+        <div className="flex flex-col gap-2 px-5 py-3">
+          <h3 className="text-base font-medium text-gray-100">{name}</h3>
+          <div className='flex gap-1'>
+            { (isClient || isServer) && 
+            <div className='mr-2 flex gap-1'>
+              {isClient && <ServiceInfoBadge info='client'/>}
+              {isServer && <ServiceInfoBadge info='server'/>}
+            </div>
+            }
+            {dedupedListOfBadges}
+          </div>
+        </div>
+        <div className="w-full h-px bg-gray-700"></div>
+        <div className="px-5 py-[14px]">
+          <p className="text-sm text-gray-400 line-clamp-6">{description}
+          </p>
+        </div>
+      </div>
+    </>
+  )
+}
\ No newline at end of file
diff --git a/packages/ui/components/ServiceInfoBadge.tsx b/packages/ui/components/ServiceInfoBadge.tsx
index 5519d7aad..81e0bc69f 100644
--- a/packages/ui/components/ServiceInfoBadge.tsx
+++ b/packages/ui/components/ServiceInfoBadge.tsx
@@ -1,9 +1,10 @@
 import type { FunctionComponent } from 'react'
 import { AMQPIcon, AWSSNSIcon, AWSSQSIcon, ClientIcon, GooglePubSubIcon, IBMMQIcon, KafkaIcon, MQTTIcon, NATSIcon, PulsarIcon, RedisIcon, ServerIcon, SolaceIcon, StompIcon, WebSocketIcon } from './icons'
 
+export type Info = 'http' | 'kafka' | 'websocket' | 'amqp' | 'mqtt' | 'googlepubsub' | 'ibmmq' | 'nats' | 'pulsar' | 'redis' | 'sns' | 'sqs' | 'solace' | 'stomp' | 'client' | 'server'
 interface ServiceInfoBadgeProps {
   className?: string
-  info: 'http' | 'client' | 'server' | 'kafka' | 'websocket' | 'amqp' | 'mqtt' | 'googlepubsub' | 'ibmmq' | 'nats' | 'pulsar' | 'redis' | 'sns' | 'sqs' | 'solace' | 'stomp'
+  info: Info
 }
 
 export const ServiceInfoBadge: FunctionComponent<ServiceInfoBadgeProps> = ({
diff --git a/packages/ui/components/index.tsx b/packages/ui/components/index.tsx
index a1058b7ad..8f58846ed 100644
--- a/packages/ui/components/index.tsx
+++ b/packages/ui/components/index.tsx
@@ -12,4 +12,5 @@ export * from './ServiceInfoBadge'
 export * from './Sidebar'
 export * from './SlideOver'
 export * from './Toolbar'
+export * from './AppCard'
 export { default as Tooltip } from './Tooltip'
diff --git a/packages/ui/tailwind.config.js b/packages/ui/tailwind.config.js
index 3e555714a..e86e23c97 100644
--- a/packages/ui/tailwind.config.js
+++ b/packages/ui/tailwind.config.js
@@ -1,6 +1,13 @@
-const sharedConfig = require('tailwind-config/tailwind.config.js');
+import sharedConfig from 'tailwind-config/tailwind.config.js';
 
 module.exports = {
   content: ['./components/**/*.tsx'],
   presets: [sharedConfig],
+  theme: {
+    extend: {
+      boxShadow: {
+        active: '0px 0px 29px 0px rgba(190, 24, 93, 0.50)',
+      },
+    },
+  }
 };
\ No newline at end of file