diff --git a/packages/tc-web/src/components/tc-bulletpoint-list/tc-bulletpoint-list.tsx b/packages/tc-web/src/components/tc-bulletpoint-list/tc-bulletpoint-list.tsx
index 9f318e2..af1b107 100644
--- a/packages/tc-web/src/components/tc-bulletpoint-list/tc-bulletpoint-list.tsx
+++ b/packages/tc-web/src/components/tc-bulletpoint-list/tc-bulletpoint-list.tsx
@@ -3,6 +3,7 @@ import { Component, Prop, h } from "@stencil/core";
 @Component({
   tag: "tc-bulletpoint-list",
   shadow: true,
+  styleUrl: "../../util/base.css",
 })
 export class BulletpointList {
   @Prop({ attribute: "title" }) header: string;
diff --git a/packages/tc-web/src/components/tc-collapsible/tc-collapsible.tsx b/packages/tc-web/src/components/tc-collapsible/tc-collapsible.tsx
index 1478838..5108d08 100644
--- a/packages/tc-web/src/components/tc-collapsible/tc-collapsible.tsx
+++ b/packages/tc-web/src/components/tc-collapsible/tc-collapsible.tsx
@@ -4,6 +4,7 @@ import { parseTags } from "../../util/util";
 @Component({
   tag: "tc-collapsible",
   shadow: true,
+  styleUrl: "../../util/base.css",
 })
 export class TcCollapsible {
   @Prop() colTitle: string;
diff --git a/packages/tc-web/src/components/tc-grid-container/readme.md b/packages/tc-web/src/components/tc-grid-container/readme.md
index f0d3ef5..dd62173 100644
--- a/packages/tc-web/src/components/tc-grid-container/readme.md
+++ b/packages/tc-web/src/components/tc-grid-container/readme.md
@@ -5,13 +5,13 @@
 
 ## Properties
 
-| Property          | Attribute          | Description | Type     | Default                |
-| ----------------- | ------------------ | ----------- | -------- | ---------------------- |
-| `backgroundColor` | `background-color` |             | `string` | `"rgb(255, 255, 255)"` |
-| `columns`         | `columns`          |             | `number` | `1`                    |
-| `gap`             | `gap`              |             | `string` | `""`                   |
-| `lgColumns`       | `lg-columns`       |             | `number` | `4`                    |
-| `mdColumns`       | `md-columns`       |             | `number` | `2`                    |
+| Property          | Attribute          | Description | Type                           | Default                |
+| ----------------- | ------------------ | ----------- | ------------------------------ | ---------------------- |
+| `backgroundColor` | `background-color` |             | `string`                       | `"rgb(255, 255, 255)"` |
+| `columns`         | `columns`          |             | `1 \| 2 \| 3 \| 4 \| 5 \| 6`   | `1`                    |
+| `gap`             | `gap`              |             | `"lg" \| "md" \| "sm" \| "xl"` | `"md"`                 |
+| `lgColumns`       | `lg-columns`       |             | `1 \| 2 \| 3 \| 4 \| 5 \| 6`   | `4`                    |
+| `mdColumns`       | `md-columns`       |             | `1 \| 2 \| 3 \| 4 \| 5 \| 6`   | `2`                    |
 
 
 ----------------------------------------------
diff --git a/packages/tc-web/src/components/tc-grid-container/tc-grid-container.tsx b/packages/tc-web/src/components/tc-grid-container/tc-grid-container.tsx
index 65acce4..ef1a81c 100644
--- a/packages/tc-web/src/components/tc-grid-container/tc-grid-container.tsx
+++ b/packages/tc-web/src/components/tc-grid-container/tc-grid-container.tsx
@@ -3,6 +3,7 @@ import { Component, Prop, h } from "@stencil/core";
 @Component({
   tag: "tc-grid-container",
   shadow: true,
+  styleUrl: "../../util/base.css",
 })
 export class TcGridContainer {
   @Prop() mdColumns: 1 | 2 | 3 | 4 | 5 | 6 = 2;
diff --git a/packages/tc-web/src/components/tc-grid-item/tc-grid-item.tsx b/packages/tc-web/src/components/tc-grid-item/tc-grid-item.tsx
index 57fb17f..047d3fc 100644
--- a/packages/tc-web/src/components/tc-grid-item/tc-grid-item.tsx
+++ b/packages/tc-web/src/components/tc-grid-item/tc-grid-item.tsx
@@ -3,6 +3,7 @@ import { Component, Prop, h } from "@stencil/core";
 @Component({
   tag: "tc-grid-item",
   shadow: true,
+  styleUrl: "../../util/base.css",
 })
 export class GridItem {
   @Prop() imageSrc: string;
diff --git a/packages/tc-web/src/components/tc-img-quote-card/tc-img-quote-card.tsx b/packages/tc-web/src/components/tc-img-quote-card/tc-img-quote-card.tsx
index 3d008a5..1c1669d 100644
--- a/packages/tc-web/src/components/tc-img-quote-card/tc-img-quote-card.tsx
+++ b/packages/tc-web/src/components/tc-img-quote-card/tc-img-quote-card.tsx
@@ -3,6 +3,7 @@ import { Component, Prop, h } from "@stencil/core";
 @Component({
   tag: "tc-img-quote-card",
   shadow: true,
+  styleUrl: "../../util/base.css",
 })
 export class ImgQuoteCard {
   @Prop() quote: string;
diff --git a/packages/tc-web/src/components/tc-img-text-card/tc-img-text-card.tsx b/packages/tc-web/src/components/tc-img-text-card/tc-img-text-card.tsx
index 068ff19..4f963ed 100644
--- a/packages/tc-web/src/components/tc-img-text-card/tc-img-text-card.tsx
+++ b/packages/tc-web/src/components/tc-img-text-card/tc-img-text-card.tsx
@@ -3,6 +3,7 @@ import { Component, Prop, h } from "@stencil/core";
 @Component({
   tag: "tc-img-text-card",
   shadow: true,
+  styleUrl: "../../util/base.css",
 })
 export class TcImgTextCard {
   @Prop() imageSrc: string;
diff --git a/packages/tc-web/src/components/tc-job-listing/tc-job-listing.tsx b/packages/tc-web/src/components/tc-job-listing/tc-job-listing.tsx
index 506606e..88655ed 100644
--- a/packages/tc-web/src/components/tc-job-listing/tc-job-listing.tsx
+++ b/packages/tc-web/src/components/tc-job-listing/tc-job-listing.tsx
@@ -4,6 +4,7 @@ import { parseTags } from "../../util/util";
 @Component({
   tag: "tc-job-listing",
   shadow: true,
+  styleUrl: "../../util/base.css",
 })
 export class JobListing {
   @Prop() jobTitle: string;
diff --git a/packages/tc-web/src/components/tc-segment-container/readme.md b/packages/tc-web/src/components/tc-segment-container/readme.md
index 39d21ab..6390ac5 100644
--- a/packages/tc-web/src/components/tc-segment-container/readme.md
+++ b/packages/tc-web/src/components/tc-segment-container/readme.md
@@ -8,7 +8,7 @@
 | Property          | Attribute          | Description | Type     | Default     |
 | ----------------- | ------------------ | ----------- | -------- | ----------- |
 | `backgroundColor` | `background-color` |             | `string` | `undefined` |
-| `segTitle`        | `seg-title`        |             | `string` | `undefined` |
+| `segTitle`        | `title`            |             | `string` | `undefined` |
 
 
 ----------------------------------------------
diff --git a/packages/tc-web/src/components/tc-segment-container/tc-segment-container.tsx b/packages/tc-web/src/components/tc-segment-container/tc-segment-container.tsx
index 79283cd..ceb59e0 100644
--- a/packages/tc-web/src/components/tc-segment-container/tc-segment-container.tsx
+++ b/packages/tc-web/src/components/tc-segment-container/tc-segment-container.tsx
@@ -4,6 +4,7 @@ import { Component, Prop, h, Host } from "@stencil/core";
 @Component({
   tag: "segment-container",
   shadow: true,
+  styleUrl: "../../util/base.css",
 })
 export class SegmentContainer {
   @Prop({ attribute: "title" }) segTitle: string;
diff --git a/packages/tc-web/src/components/tc-subtitle/tc-open-positions.tsx b/packages/tc-web/src/components/tc-subtitle/tc-open-positions.tsx
index 92119a4..2600063 100644
--- a/packages/tc-web/src/components/tc-subtitle/tc-open-positions.tsx
+++ b/packages/tc-web/src/components/tc-subtitle/tc-open-positions.tsx
@@ -3,6 +3,7 @@ import { Component, Prop, h } from "@stencil/core";
 @Component({
   tag: "tc-open-positions",
   shadow: true,
+  styleUrl: "../../util/base.css",
 })
 export class OpenPositions {
   @Prop() level: string; // Corrected the property name spelling.
diff --git a/packages/tc-web/src/components/tc-svg-icon-card/tc-svg-icon-card.tsx b/packages/tc-web/src/components/tc-svg-icon-card/tc-svg-icon-card.tsx
index d0f7f8c..b3ed49e 100644
--- a/packages/tc-web/src/components/tc-svg-icon-card/tc-svg-icon-card.tsx
+++ b/packages/tc-web/src/components/tc-svg-icon-card/tc-svg-icon-card.tsx
@@ -3,6 +3,7 @@ import { Component, Prop, h } from "@stencil/core";
 @Component({
   tag: "tc-svg-icon-card",
   shadow: true,
+  styleUrl: "../../util/base.css",
 })
 export class SVGIconCard {
   @Prop({ attribute: "title" }) advantageTitle: string;
diff --git a/packages/tc-web/src/index.html b/packages/tc-web/src/index.html
index 98abecb..4fb11fd 100644
--- a/packages/tc-web/src/index.html
+++ b/packages/tc-web/src/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html dir="ltr" lang="en">
   <head>
     <meta charset="utf-8" />
diff --git a/packages/tc-web/src/util/base.css b/packages/tc-web/src/util/base.css
new file mode 100644
index 0000000..5d4e87f
--- /dev/null
+++ b/packages/tc-web/src/util/base.css
@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}