diff --git a/projects/docs/public/manifest.json b/projects/docs/public/manifest.json
index 8db7d9c..aab5f04 100644
--- a/projects/docs/public/manifest.json
+++ b/projects/docs/public/manifest.json
@@ -5,7 +5,6 @@
   "start_url": "/",
   "display": "standalone",
   "background_color": "#ffffff",
-  "theme_color": "#3b82f6",
   "orientation": "portrait-primary",
   "scope": "/",
   "lang": "en",
diff --git a/projects/docs/src/app/pages/docs/components/card/card.variants.ts b/projects/docs/src/app/pages/docs/components/card/card.variants.ts
index b6cd07f..60c60d0 100644
--- a/projects/docs/src/app/pages/docs/components/card/card.variants.ts
+++ b/projects/docs/src/app/pages/docs/components/card/card.variants.ts
@@ -1,35 +1,61 @@
 import { Component } from '@angular/core';
-import { UiCard, UiCardAction, UiCardContent, UiCardDescription, UiCardFooter, UiCardHeader, UiCardTitle } from 'ui';
+import { UiCard, UiCardAction, UiCardContent, UiCardDescription, UiCardFooter, UiCardHeader, UiCardTitle, UiFormField } from 'ui';
 import { UiButton } from 'ui';
+import { UiInput, UiLabel } from 'ui';
 import { IVariant, IComponentMeta } from '@components/component-preview/component-preview';
 
 @Component({
   selector: 'card-default-example',
   template: `
-    <div uiCard>
+    <div uiCard class="w-full max-w-sm">
       <div uiCardHeader>
-        <div uiCardTitle>Card title</div>
-        <div uiCardDescription>Card description</div>
+        <div uiCardTitle>Login to your account</div>
+        <div uiCardDescription>
+          Enter your email below to login to your account
+        </div>
         <div uiCardAction>
-          <button uiButton size="sm">Action</button>
+          <button uiButton variant="link">Sign Up</button>
         </div>
       </div>
       <div uiCardContent>
-        This is the card content area.
+        <form>
+          <div class="flex flex-col gap-6">
+            <div class="grid gap-2" uiFormField>
+              <label uiLabel>Email</label>
+              <input uiInput type="email" placeholder="m@example.com" required />
+            </div>
+            <div class="grid gap-2" uiFormField>
+              <div class="flex items-center">
+                <label uiLabel>Password</label>
+                <a href="#" uiButton variant="link" class="ml-auto" >
+                  Forgot your password?
+                </a>
+              </div>
+              <input uiInput type="password" required />
+            </div>
+          </div>
+        </form>
       </div>
-      <div uiCardFooter>
-        <button uiButton variant="secondary" size="sm">Cancel</button>
-        <button uiButton size="sm">Save</button>
+      <div uiCardFooter class="flex-col gap-2">
+        <button uiButton type="submit" class="w-full">
+          Login
+        </button>
+        <button uiButton variant="outline" class="w-full">
+          Login with Google
+        </button>
       </div>
     </div>
   `,
-  imports: [UiCard, UiCardHeader, UiCardTitle, UiCardDescription, UiCardAction, UiCardContent, UiCardFooter, UiButton]
+  imports: [UiCard, UiCardHeader, UiCardTitle, UiCardDescription, UiCardAction, UiCardContent, UiCardFooter, UiLabel, UiInput, UiButton, UiFormField],
+  host: {
+    class: 'w-2/3 mx-auto'
+  }
 })
 export class CardDefaultExample {}
 
 export const cardMeta: IComponentMeta = {
   title: 'Card',
-  description: 'Displays content within a container with header, content and footer slots.',
+  description: 'Displays a card with header, content, and footer.',
   installation: {
     package: 'card',
     import: `import { UiCard, UiCardHeader, UiCardTitle, UiCardDescription, UiCardAction, UiCardContent, UiCardFooter } from '@workspace/ui/directives/card';`,
@@ -37,6 +63,7 @@ export const cardMeta: IComponentMeta = {
   <div uiCardHeader>
     <div uiCardTitle>Title</div>
     <div uiCardDescription>Description</div>
+    <div uiCardAction>Action</div>
   </div>
   <div uiCardContent>Content</div>
   <div uiCardFooter>Footer</div>
@@ -52,31 +79,60 @@ export const cardMeta: IComponentMeta = {
 export const cardVariants: IVariant[] = [
   {
     title: 'Default',
-    description: 'Card with header, content and footer.',
-    code: `import { UiCard, UiCardAction, UiCardContent, UiCardDescription, UiCardFooter, UiCardHeader, UiCardTitle } from '@workspace/ui/directives/card';
+    description: 'Login to your account',
+    code: `import { Component } from '@angular/core';
+import { UiCard, UiCardAction, UiCardContent, UiCardDescription, UiCardFooter, UiCardHeader, UiCardTitle } from '@workspace/ui/directives/card';
+import { UiInput } from '@workspace/ui/directives/input';
+import { UiLabel } from '@workspace/ui/directives/label';
 import { UiButton } from '@workspace/ui/directives/button';
+import { UiFormField } from '@workspace/ui/directives/form-field';
 
 @Component({
   selector: 'card-default-example',
   template: \`
-    <div uiCard>
+    <div uiCard class="w-full max-w-sm">
       <div uiCardHeader>
-        <div uiCardTitle>Card title</div>
-        <div uiCardDescription>Card description</div>
+        <div uiCardTitle>Login to your account</div>
+        <div uiCardDescription>
+          Enter your email below to login to your account
+        </div>
         <div uiCardAction>
-          <button uiButton size=\"sm\">Action</button>
+          <button uiButton variant="link">Sign Up</button>
         </div>
       </div>
       <div uiCardContent>
-        This is the card content area.
+        <form>
+          <div class="flex flex-col gap-6">
+            <div class="grid gap-2" uiFormField>
+              <label uiLabel>Email</label>
+              <input uiInput type="email" placeholder="m@example.com" required />
+            </div>
+            <div class="grid gap-2" uiFormField>
+              <div class="flex items-center">
+                <label uiLabel>Password</label>
+                <a href="#" uiButton variant="link" class="ml-auto" >
+                  Forgot your password?
+                </a>
+              </div>
+              <input uiInput type="password" required />
+            </div>
+          </div>
+        </form>
       </div>
-      <div uiCardFooter>
-        <button uiButton variant=\"secondary\" size=\"sm\">Cancel</button>
-        <button uiButton size=\"sm\">Save</button>
+      <div uiCardFooter class="flex-col gap-2">
+        <button uiButton type="submit" class="w-full">
+          Login
+        </button>
+        <button uiButton variant="outline" class="w-full">
+          Login with Google
+        </button>
       </div>
     </div>
   \`,
-  imports: [UiCard, UiCardHeader, UiCardTitle, UiCardDescription, UiCardAction, UiCardContent, UiCardFooter, UiButton]
+  imports: [UiCard, UiCardHeader, UiCardTitle, UiCardDescription, UiCardAction, UiCardContent, UiCardFooter, UiLabel, UiInput, UiButton, UiFormField],
+  host: {
+    class: 'w-2/3 mx-auto'
+  }
 })
 export class CardDefaultExample {}`,
     component: CardDefaultExample