diff --git a/docs/introduction.md b/docs/introduction.md
index 1a476062..a0c92c63 100644
--- a/docs/introduction.md
+++ b/docs/introduction.md
@@ -11,20 +11,23 @@ slug: /
 Whether you're looking to understand Symbl's capabilities or get started with 
 our APIs or SDKs, we've got you covered!
 
-<div class="row">
-  <div class="column">
-    <div class="card"><a href="/docs/api-reference/getting-started"><h4>API Reference</h4>Browse through our APIs, learn how they work and get detailed descriptions and sample codes for each endpoint.</a></div>
-  </div>
-  <div class="column">
-    <div class="card"><a href="/docs/sdk-intro"><h4>SDK</h4>Add Symbl capabilities directly to your web and mobile applications with our robust SDKs available in popular languages. </a>
-  </div>
-  </div>
-  <div class="column">
-    <div class="card"><a href="/docs/tutorials"><h4>Tutorials</h4>Find step-by-step instructions on how to implement Symbl with your native video, audio and text conversation tools and applications. </a></div>
-  </div>
-  <div class="column">
-    <div class="card"><a href="/guides"><h4>Guides</h4>Learn about Symbl's capabilities, understand business use-cases and discover Conversation Intelligence applications across industries.</a></div>
-  </div>
+<div class="card-container">
+  <a href="/docs/api-reference/getting-started" class="intro-card">
+    <h3>API Reference</h3>
+    <p>Browse through our APIs, learn how they work and get detailed descriptions and sample codes for each endpoint.</p>
+  </a>
+  <a href="/docs/sdk-intro" class="intro-card">
+    <h3>SDK</h3>
+    <p>Add Symbl capabilities directly to your web and mobile applications with our robust SDKs available in popular languages.</p>
+  </a>
+  <a href="/docs/tutorials" class="intro-card">
+    <h3>Tutorials</h3>
+    <p>Find step-by-step instructions on how to implement Symbl with your native video, audio and text conversation tools and applications.</p>
+  </a>
+  <a href="/guides" class="intro-card">
+    <h3>Guides</h3>
+    <p>Learn about Symbl's capabilities, understand business use-cases and discover Conversation Intelligence applications across industries.</p>
+  </a>
 </div>
 
 ## Getting Started with Symbl
@@ -66,14 +69,15 @@ Also, check out our features in the [Labs section](/docs/labs) that are currentl
 
 <div class="row">
   <div class="column">
-    <div class="card2"> <h3><br/>Try it in Postman</h3> Our public collection in Postman has pre-configured API requests that gets you up-and-running in a jiffy. Try it now!<br/>
-<br/>
-
-[![Run in Postman](https://run.pstmn.io/button.svg)](https://god.gw.postman.com/run-collection/13497402-108cafc3-da45-4b00-97fe-4819894f58bb?action=collection%2Ffork&collection-url=entityId%3D13497402-108cafc3-da45-4b00-97fe-4819894f58bb%26entityType%3Dcollection%26workspaceId%3D5f563cfe-42ef-4344-a98a-eae13183fb7c)
+  <div class="card2">
+  <h3>Try it in Postman</h3>
+  <p>Our public collection in Postman has pre-configured API requests that gets you up-and-running in a jiffy. Try it now!</p>
 
-***If you're new to Postman, watch this [video tutorial](/docs/developer-tools/postman#how-to-use-symbl-postman-collection) to learn how***. 
+  [![Run in Postman](https://run.pstmn.io/button.svg)](https://god.gw.postman.com/run-collection/13497402-108cafc3-da45-4b00-97fe-4819894f58bb?action=collection%2Ffork&collection-url=entityId%3D13497402-108cafc3-da45-4b00-97fe-4819894f58bb%26entityType%3Dcollection%26workspaceId%3D5f563cfe-42ef-4344-a98a-eae13183fb7c)
 
-   </div>
-  </div>
+  <b><i>If you're new to Postman, watch this <a href="/docs/developer-tools/postman#how-to-use-symbl-postman-collection"> video tutorial </a> to learn how</i></b>
   </div>
+  </div>    
+</div>
+
 
diff --git a/docs/tutorials.md b/docs/tutorials.md
index 1f68446b..7d474343 100644
--- a/docs/tutorials.md
+++ b/docs/tutorials.md
@@ -9,52 +9,37 @@ slug: /tutorials/
 Find detailed tutorials on how to implement Conversation Intelligence on your conversation application or platform.
 
 
-<div class="row">
-  <div class="column">
-    <div class="card3"><a href="/docs/streamingapi/introduction"><h4>Streaming API</h4></a>
-
-* [Get Real-time Speech-To-Text Transcriptions Using Streaming API](/docs/streamingapi/tutorials/receive-ai-insights-from-your-web-browser)
-* [Gain Real-time AI Insights From Your Device's Mic Using Symbl's Javascript SDK](/docs/javascript-sdk/tutorials/receive-ai-insights-from-your-computer)
-* [Start and Stop Streaming API Connection](/docs/streamingapi/code-snippets/start-and-stop-connection)
-* [Receive Live Captioning](/docs/streamingapi/code-snippets/receive-live-captioning)
-
-<button class="button button1"><a href="/docs/streamingapi/code-snippets/start-and-stop-connection">View all Tutorials</a></button><br/></div>
+<div class="card-container">
+  <div class="intro-card">
+    <h3>Streaming API</h3>
+      <p> <span> > </span> <a href="/docs/streamingapi/tutorials/receive-ai-insights-from-your-web-browser">Get Real-time Speech-To-Text Transcriptions Using Streaming API</a></p>
+      <p> <span> > </span> <a href="/docs/javascript-sdk/tutorials/receive-ai-insights-from-your-computer">Gain Real-time AI Insights From Your Device's Mic Using Symbl's Javascript SDK</a></p>
+      <p> <span> > </span> <a href="/docs/streamingapi/code-snippets/start-and-stop-connection">Start and Stop Streaming API Connection</a></p>
+      <p> <span> > </span> <a href="/docs/streamingapi/code-snippets/receive-live-captioning">Receive Live Captioning</a></p>
+      <a class="button button1 tutorial-button" href="/docs/streamingapi/code-snippets/start-and-stop-connection">View all Tutorials</a>
   </div>
-   <div class="column">
-    <div class="card3"><a href="//docs/async-api/introduction"><h4>Async APIs</h4></a> 
-
- 
-* [How To Use Sentiment Analysis](/docs/async-api/code-snippets/how-to-use-sentiment-analysis)
-* [Track Phrases In A Conversation](/docs/async-api/code-snippets/track-phrases-in-a-conversation)
-* [Speaker Separation with Async API](/async-api/tutorials/get-speaker-separation-audio-video)
-* [Receive Speech-to-Text and AI Insights](/docs/async-api/code-snippets/receive-speech-to-text-and-ai-insights)
-* [Generate a Pre-built UI From Video Recordings](/docs/async-api/code-snippets/generate-pre-built-ui-from-video-recordings)
- 
 
-<button class="button button2"><a href="/docs/async-api/code-snippets/how-to-use-sentiment-analysis">View all Tutorials</a></button>
-  </div>
+  <div class="intro-card">
+    <h3>Async APIs</h3>
+      <p> <span> > </span><a href="/docs/async-api/code-snippets/how-to-use-sentiment-analysis">How To Use Sentiment Analysis</a></p>
+      <p> <span> > </span><a href="/docs/async-api/code-snippets/track-phrases-in-a-conversation">Track Phrases In A Conversation</a></p>
+      <p> <span> > </span><a href="/async-api/tutorials/get-speaker-separation-audio-video">Speaker Separation with Async API</a></p>
+      <p> <span> > </span><a href="/docs/async-api/code-snippets/receive-speech-to-text-and-ai-insights">Receive Speech-to-Text and AI Insights</a></p>
+      <p> <span> > </span><a href="/docs/async-api/code-snippets/generate-pre-built-ui-from-video-recordings">Generate a Pre-built UI From Video Recordings</a></p>
+      <a class="button button2 tutorial-button" href="/docs/async-api/code-snippets/how-to-use-sentiment-analysis">View all Tutorials</a>
   </div>
-  <div class="column">
-    <div class="card3"><a href="/docs/telephony/introduction"><h4>Telephony API</h4></a>
 
- 
-* [Gain AI Insights On Your Zoom Call](/docs/telephony/tutorials/connect-to-zoom)
-* [Get A Live Transcription From A Phone Call](/docs/telephony/tutorials/connect-to-phone-call)
-* [Connect to a PSTN connection to get Speech to Text and AI Insights](/docs/telephony/code-snippets/connect-to-pstn)
-* [Connect to a SIP connection to get Speech to Text and AI Insights](/docs/telephony/code-snippets/connect-to-sip)
-* [Receive Speech to Text for a different language in a conversation](/docs/telephony/code-snippets/receive-speech-to-text-for-a-different-language)
- 
-
-<button class="button button2"><a href="/docs/telephony/tutorials/connect-to-zoom">View all Tutorials</a></button>
+  <div class="intro-card">
+      <h3>Telephony API</h3>
+      <p> <span> > </span><a href="/docs/telephony/tutorials/connect-to-zoom">Gain AI Insights On Your Zoom Call</a></p>
+      <p> <span> > </span><a href="/docs/telephony/tutorials/connect-to-phone-call">Get A Live Transcription From A Phone Call</a></p>
+      <p> <span> > </span><a href="/docs/telephony/code-snippets/connect-to-pstn">Connect to a PSTN connection to get Speech to Text and AI Insights</a></p>
+      <p> <span> > </span><a href="/docs/telephony/code-snippets/connect-to-sip">Connect to a SIP connection to get Speech to Text and AI Insights</a></p>
+      <p> <span> > </span><a href="/docs/telephony/code-snippets/receive-speech-to-text-for-a-different-language">Receive Speech to Text for a different language in a conversation</a></p>
+      <a class="button button3 tutorial-button" href="/docs/telephony/tutorials/connect-to-zoom">View all Tutorials</a>
   </div>
-  </div>
-  
-<br/>
-<br/>
-<br/>
- 
 </div>
-<br/>
+
 
 
  
\ No newline at end of file
diff --git a/docusaurus-staging.config.js b/docusaurus-staging.config.js
index e8659ad0..2668ae80 100644
--- a/docusaurus-staging.config.js
+++ b/docusaurus-staging.config.js
@@ -231,7 +231,7 @@ module.exports = {
 
     colorMode:
     {
-      defaultMode: 'light',
+      defaultMode: 'dark',
       disableSwitch: false,
       respectPrefersColorScheme: true
     },
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 53b9b438..60b5d464 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -237,7 +237,7 @@ module.exports = {
 
     colorMode:
     {
-      defaultMode: 'light',
+      defaultMode: 'dark',
       disableSwitch: false,
       respectPrefersColorScheme: true
     },
diff --git a/src/css/custom.css b/src/css/custom.css
index 822a557f..3e2bae83 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -389,13 +389,26 @@ th:empty {
   width: 200%;
   background-color: #c7ebc0;
  }
+
  .card2 {
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
-    padding: 16px;
+    padding: 26px;
     text-align: left;
     width: 200%;
-    background-color: #FFA500
+    background-color: #FFA500;
+    border-radius: 30px;
+    transition:0.3s;
+ }
+
+ html[data-theme='dark'] .card2 {
+   color:black;
  }
+ 
+ .card2:hover{
+  box-shadow: 5px 10px 8px #888888;
+ }
+
+
 
  .card1:hover {
   box-shadow: 0 8px 16px 0 rgba(214, 215, 221, 0.2);
@@ -488,4 +501,49 @@ html[data-theme='dark'] .sdk-card:hover {
 .sdk-card-header{
   margin-left:25px;
   margin-bottom: 0px;
-} 
\ No newline at end of file
+} 
+
+.card-container {
+    display: flex;
+    flex-wrap: wrap;
+    margin: -1.25rem;
+    margin-top: 0;
+}
+
+.intro-card {
+  width:360px;
+  margin: 1.25rem;
+  padding: 1.5rem;
+  display:flex;
+  flex-direction: column;
+  text-decoration: none; 
+  font-size: var(--font-size-normal);
+  color:black;
+  background-color: #F0F1F5;
+  transition:0.3s;
+  border-radius: 10px;
+}
+
+.intro-card:hover{
+  box-shadow: 5px 10px 8px #888888;
+  text-decoration: none;
+  color:black;
+}
+
+html[data-theme="dark"] .intro-card{
+  color:white;
+  background-color: #262833;
+}
+
+.intro-card > ul {
+  list-style-type: none;
+}
+
+.tutorial-button {
+  color:black;
+}
+
+.tutorial-button:hover {
+  color:black;
+}
+