diff --git a/src/App.vue b/src/App.vue
index 1b3351f..b933545 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -81,6 +81,34 @@ html {
 	scroll-padding-top: 70px;
 }
 
+body {
+	font-family: 'Open Sans', sans-serif;
+
+}
+
+.v-row {
+	h1,
+	h2,
+	h5 {
+		font-family: 'Encode Sans Expanded', sans-serif !important;
+	}
+
+	h1 {
+		font-size: 3rem;
+		font-weight: 700;
+	}
+
+	h2 {
+		font-size: 2rem;
+		font-weight: 400;
+		padding-bottom: 0.5rem;
+	}
+
+	h5 {
+		font-weight: 600;
+	}
+}
+
 .top-app-bar {
 	z-index: 99 !important;
 
diff --git a/src/documentation/DocsPage.vue b/src/documentation/DocsPage.vue
index 162a552..92e8181 100644
--- a/src/documentation/DocsPage.vue
+++ b/src/documentation/DocsPage.vue
@@ -153,32 +153,6 @@ provide('classes', classes);
 </script>
 
 <style lang="scss" scoped>
-body {
-	font-family: 'Open Sans', sans-serif;
-}
-
-h1,
-h2,
-h5 {
-	font-family: 'Encode Sans Expanded', sans-serif !important;
-}
-
-h1 {
-	font-size: 3rem;
-	font-weight: 700;
-}
-
-h2 {
-	border-bottom: 1px solid #ccc;
-	font-size: 2rem;
-	font-weight: 400;
-	padding-bottom: 0.5rem;
-}
-
-h5 {
-	font-weight: 600;
-}
-
 :deep(pre),
 :deep(code) {
 	&.ic {
diff --git a/src/documentation/components/examples/AdditionalLangExamples.vue b/src/documentation/components/examples/AdditionalLangExamples.vue
index e444fb3..2f5f491 100644
--- a/src/documentation/components/examples/AdditionalLangExamples.vue
+++ b/src/documentation/components/examples/AdditionalLangExamples.vue
@@ -36,7 +36,6 @@
 				:label="`Example of using ${selectedLibrary.title} to highlight TypeScript`"
 				lang="html"
 				:prismjs="selectedLibrary.id === 'prismjs'"
-				:tabs="false"
 				:theme="selectedTheme"
 			/>
 		</v-col>
@@ -51,7 +50,6 @@
 				label="TypeScript"
 				lang="typescript"
 				:prismjs="selectedLibrary.id === 'prismjs'"
-				:tabs="false"
 				:theme="selectedTheme"
 			/>
 		</v-col>
@@ -69,7 +67,6 @@
 				:label="`Example of using ${selectedLibrary.label} to highlight JSON`"
 				lang="html"
 				:prismjs="selectedLibrary.id === 'prismjs'"
-				:tabs="false"
 				:theme="selectedTheme"
 			/>
 		</v-col>
@@ -84,7 +81,6 @@
 				label="JSON"
 				lang="json"
 				:prismjs="selectedLibrary.id === 'prismjs'"
-				:tabs="false"
 				:theme="selectedTheme"
 			/>
 		</v-col>
@@ -102,7 +98,6 @@
 				:label="`Example of using ${selectedLibrary.label} to highlight PHP`"
 				lang="html"
 				:prismjs="selectedLibrary.id === 'prismjs'"
-				:tabs="false"
 				:theme="selectedTheme"
 			/>
 		</v-col>
@@ -119,7 +114,6 @@
 				label="PHP"
 				lang="php"
 				:prismjs="selectedLibrary.id === 'prismjs'"
-				:tabs="false"
 				:theme="selectedTheme"
 			/>
 		</v-col>
@@ -144,12 +138,11 @@ const selectedTheme = inject('selectedTheme');
 const usageExamples = {
 	prismjs: {
 		json: `<template>
-  <CodeBlock
+  <VCodeBlock
     :code="myCode"
     :indent="2"
     lang="json"
     prismjs
-    :tabs="false"
   /\>
 <\/template>
 
@@ -158,11 +151,10 @@ const usageExamples = {
   import 'prismjs/components/prism-json';
 <\/script>`,
 		typescript: `<template>
-  <CodeBlock
+  <VCodeBlock
     :code="myCode"
     lang="typescript"
     prismjs
-    :tabs="false"
   /\>
 <\/template>
 
@@ -171,11 +163,10 @@ const usageExamples = {
   import 'prismjs/components/prism-typescript';
 <\/script>`,
 		php: `<template>
-  <CodeBlock
+  <VCodeBlock
     :code="myCode"
     lang="php"
     prismjs
-    :tabs="false"
   /\>
 <\/template>
 
@@ -187,12 +178,11 @@ const usageExamples = {
 	},
 	highlightjs: {
 		json: `<template>
-  <CodeBlock
+  <VCodeBlock
     :code="myCode"
     highlightjs
     :indent="2"
     lang="json"
-    :tabs="false"
   /\>
 <\/template>
 
@@ -203,11 +193,10 @@ const usageExamples = {
   hljs.registerLanguage('json', langJson);
 <\/script>`,
 		typescript: `<template>
-  <CodeBlock
+  <VCodeBlock
     :code="myCode"
     highlightjs
     lang="typescript"
-    :tabs="false"
   /\>
 <\/template>
 
@@ -218,11 +207,10 @@ const usageExamples = {
   hljs.registerLanguage('typescript', langTypescript);
 <\/script>`,
 		php: `<template>
-  <CodeBlock
+  <VCodeBlock
     :code="myCode"
     highlightjs
     lang="php"
-    :tabs="false"
   /\>
 <\/template>
 
diff --git a/src/documentation/components/examples/BrowserWindowExamples.vue b/src/documentation/components/examples/BrowserWindowExamples.vue
index 54cb706..db91cb9 100644
--- a/src/documentation/components/examples/BrowserWindowExamples.vue
+++ b/src/documentation/components/examples/BrowserWindowExamples.vue
@@ -13,7 +13,6 @@
 				:highlightjs="selectedLibrary.id === 'highlightjs'"
 				lang="html"
 				:prismjs="selectedLibrary.id === 'prismjs'"
-				:tabs="false"
 				:theme="selectedTheme"
 			/>
 		</v-col>
@@ -28,19 +27,17 @@ const selectedLibrary = inject('selectedLibrary');
 const selectedTheme = inject('selectedTheme');
 
 const examples = {
-	prismjs: `<CodeBlock
+	prismjs: `<VCodeBlock
   :browser-window="true"
   :code="myCode"
   lang="javascript"
   prismjs
-  :tabs="false"
 />`,
-	highlightjs: `<CodeBlock
+	highlightjs: `<VCodeBlock
   :browser-window="true"
   :code="myCode"
   highlightjs
   lang="javascript"
-  :tabs="false"
 />`
 };
 </script>
diff --git a/src/documentation/components/examples/ButtonExamples.vue b/src/documentation/components/examples/ButtonExamples.vue
index 5ce54e1..f1f68c4 100644
--- a/src/documentation/components/examples/ButtonExamples.vue
+++ b/src/documentation/components/examples/ButtonExamples.vue
@@ -14,7 +14,6 @@
 				label="Visible on hover"
 				lang="html"
 				:prismjs="selectedLibrary.id === 'prismjs'"
-				:tabs="false"
 				:theme="selectedTheme"
 			/>
 		</v-col>
@@ -30,7 +29,6 @@
 				lang="html"
 				persistent-copy-button
 				:prismjs="selectedLibrary.id === 'prismjs'"
-				:tabs="false"
 				:theme="selectedTheme"
 			/>
 		</v-col>
@@ -45,37 +43,33 @@ const selectedTheme = inject('selectedTheme');
 
 const examples = {
 	prismjs: {
-		btn: `<CodeBlock
+		btn: `<VCodeBlock
   :code="myCode"
   label="Visible on hover"
   lang="html"
   prismjs
-  :tabs="false"
 />`,
-		btnPersist: `<CodeBlock
+		btnPersist: `<VCodeBlock
   :code="myCode"
   label="Persistent Copy Button"
   lang="html"
   persistent-copy-button
   prismjs
-  :tabs="false"
 />`,
 	},
 	highlightjs: {
-		btn: `<CodeBlock
+		btn: `<VCodeBlock
   :code="myCode"
   highlightjs
   label="Visible on hover"
   lang="html"
-  :tabs="false"
 />`,
-		btnPersist: `<CodeBlock
+		btnPersist: `<VCodeBlock
   :code="myCode"
   highlightjs
   label="Persistent Copy Button"
   lang="html"
   persistent-copy-button
-  :tabs="false"
 />`,
 	}
 };
diff --git a/src/documentation/components/examples/LangExamples.vue b/src/documentation/components/examples/LangExamples.vue
index 09faf50..d37a122 100644
--- a/src/documentation/components/examples/LangExamples.vue
+++ b/src/documentation/components/examples/LangExamples.vue
@@ -15,7 +15,6 @@
 				lang="javascript"
 				:max-height="codeBlockOptions.preHeight"
 				:prismjs="selectedLibrary.id === 'prismjs'"
-				:tabs="false"
 				:theme="selectedTheme"
 			/>
 		</v-col>
@@ -31,7 +30,6 @@
 				lang="html"
 				:max-height="codeBlockOptions.preHeight"
 				:prismjs="selectedLibrary.id === 'prismjs'"
-				:tabs="false"
 				:theme="selectedTheme"
 			/>
 		</v-col>
@@ -47,7 +45,6 @@
 				lang="css"
 				:max-height="codeBlockOptions.preHeight"
 				:prismjs="selectedLibrary.id === 'prismjs'"
-				:tabs="false"
 				:theme="selectedTheme"
 			/>
 		</v-col>
@@ -63,7 +60,6 @@
 				lang="html"
 				:max-height="codeBlockOptions.preHeight"
 				:prismjs="selectedLibrary.id === 'prismjs'"
-				:tabs="false"
 				:theme="selectedTheme"
 			/>
 		</v-col>
@@ -78,7 +74,6 @@
 				label="SVG"
 				lang="svg"
 				:prismjs="selectedLibrary.id === 'prismjs'"
-				:tabs="false"
 				:theme="selectedTheme"
 			/>
 		</v-col>
diff --git a/src/documentation/components/examples/OtherExamples.vue b/src/documentation/components/examples/OtherExamples.vue
index 29ab596..5cd83cf 100644
--- a/src/documentation/components/examples/OtherExamples.vue
+++ b/src/documentation/components/examples/OtherExamples.vue
@@ -121,7 +121,6 @@
 				:highlightjs="selectedLibrary.id === 'highlightjs'"
 				lang="html"
 				:prismjs="selectedLibrary.id === 'prismjs'"
-				:tabs="false"
 				:theme="selectedTheme"
 			>
 				<template #label>
@@ -173,7 +172,6 @@
 				:indent="Number(indent)"
 				lang="json"
 				:prismjs="selectedLibrary.id === 'prismjs'"
-				:tabs="false"
 				:theme="selectedTheme"
 			>
 				<template #label>
@@ -206,7 +204,7 @@ const tabGap = ref('0.25rem');
 
 const examples = {
 	prismjs: {
-		copyBlockRadius: `<CodeBlock
+		copyBlockRadius: `<VCodeBlock
   :code="myCode"
   :code-block-radius="codeBlockRadius"
   lang="html"
@@ -216,8 +214,8 @@ const examples = {
     codeBlockRadius:
     <input v-model="codeBlockRadius" type="text" />
   </template>
-</CodeBlock>`,
-		copyText: `<CodeBlock
+</VCodeBlock>`,
+		copyText: `<VCodeBlock
   :code="myCode"
   copy-tab
   :copyText="copyText"
@@ -229,8 +227,8 @@ const examples = {
     copyText:
     <input v-model="copyText" type="text" />
   </template>
-</CodeBlock>`,
-		runText: `<CodeBlock
+</VCodeBlock>`,
+		runText: `<VCodeBlock
   :code="runTextExample"
   :copy-tab="false"
   lang="html"
@@ -245,8 +243,8 @@ const examples = {
     runText:
     <input v-model="runText" type="text" />
   </template>
-</CodeBlock>`,
-		floatingTabs: `<CodeBlock
+</VCodeBlock>`,
+		floatingTabs: `<VCodeBlock
   :code="exampleCode"
   :floating-tabs="floatingTabs"
   lang="html"
@@ -264,20 +262,19 @@ const examples = {
       <span class="boolean-style">{{ floatingTabs }}</span>
     </label>
   </template>
-</CodeBlock>`,
-		height: `<CodeBlock
+</VCodeBlock>`,
+		height: `<VCodeBlock
   :code="myCode"
   :height="height"
   lang="html"
   prismjs
-  :tabs="false"
 >
   <template #label>
     height:
     <input v-model="height" type="number" />
   </template>
-</CodeBlock>`,
-		tabGap: `<CodeBlock
+</VCodeBlock>`,
+		tabGap: `<VCodeBlock
   :code="myCode"
   lang="html"
   :run-tab="true"
@@ -289,10 +286,10 @@ const examples = {
     tabGap:
     <input v-model="tabGap" type="text" />
   </template>
-</CodeBlock>`,
+</VCodeBlock>`,
 	},
 	highlightjs: {
-		copyBlockRadius: `<CodeBlock
+		copyBlockRadius: `<VCodeBlock
   :code="myCode"
   :code-block-radius="codeBlockRadius"
   highlightjs
@@ -302,8 +299,8 @@ const examples = {
     codeBlockRadius:
     <input v-model="codeBlockRadius" type="text" />
   </template>
-</CodeBlock>`,
-		copyText: `<CodeBlock
+</VCodeBlock>`,
+		copyText: `<VCodeBlock
   :code="myCode"
   copy-tab
   :copyText="copyText"
@@ -315,8 +312,8 @@ const examples = {
     copyText:
     <input v-model="copyText" type="text" />
   </template>
-</CodeBlock>`,
-		runText: `<CodeBlock
+</VCodeBlock>`,
+		runText: `<VCodeBlock
   :code="runTextExample"
   :copy-tab="false"
   highlightjs
@@ -331,8 +328,8 @@ const examples = {
     runText:
     <input v-model="runText" type="text" />
   </template>
-</CodeBlock>`,
-		floatingTabs: `<CodeBlock
+</VCodeBlock>`,
+		floatingTabs: `<VCodeBlock
   :code="exampleCode"
   :floating-tabs="floatingTabs"
   highlightjs
@@ -350,20 +347,19 @@ const examples = {
       <span class="boolean-style">{{ floatingTabs }}</span>
     </label>
   </template>
-</CodeBlock>`,
-		height: `<CodeBlock
+</VCodeBlock>`,
+		height: `<VCodeBlock
   :code="myCode"
   :height="height"
   highlightjs
   lang="html"
-  :tabs="false"
 >
   <template #label>
     height:
     <input v-model="height" type="number" />
   </template>
-</CodeBlock>`,
-		tabGap: `<CodeBlock
+</VCodeBlock>`,
+		tabGap: `<VCodeBlock
   :code="myCode"
   highlightjs
   lang="html"
@@ -375,7 +371,7 @@ const examples = {
     tabGap:
     <input v-model="tabGap" type="text" />
   </template>
-</CodeBlock>`,
+</VCodeBlock>`,
 	}
 };
 const indentJsonExample = `{
diff --git a/src/documentation/components/examples/PluginExamples.vue b/src/documentation/components/examples/PluginExamples.vue
index 586e243..01bbe5d 100644
--- a/src/documentation/components/examples/PluginExamples.vue
+++ b/src/documentation/components/examples/PluginExamples.vue
@@ -31,7 +31,6 @@
 				lang="html"
 				prism-plugin
 				prismjs
-				:tabs="false"
 				:theme="selectedTheme"
 			>
 				<template #label>
@@ -88,14 +87,13 @@ const plugins = ref([
 ]);
 
 const pluginExample = `<template>
-  <CodeBlock
+  <VCodeBlock
     class="line-numbers"
     :code="pluginExample"
     label="line-numbers"
     lang="html"
     prism-plugin
     prismjs
-    :tabs="false"
   />
 <\/template>
 
diff --git a/src/documentation/components/examples/TabExamples.vue b/src/documentation/components/examples/TabExamples.vue
index 91d96af..2f3e09f 100644
--- a/src/documentation/components/examples/TabExamples.vue
+++ b/src/documentation/components/examples/TabExamples.vue
@@ -135,7 +135,7 @@ const selectedTheme = inject('selectedTheme');
 
 const examples = {
 	prismjs: {
-		copy: `<CodeBlock
+		copy: `<VCodeBlock
   :code="myCode"
   copy-tab
   label="Copy Code Tab"
@@ -145,7 +145,7 @@ const examples = {
   tabs
 />`,
 		run: `<template>
-  <CodeBlock
+  <VCodeBlock
     :code="myCode"
     :copy-tab="false"
     label="Run Code Tab"
@@ -164,7 +164,7 @@ const examples = {
   }
 <\/script>`,
 		both: `<template>
-  <CodeBlock
+  <VCodeBlock
     :code="myCode"
     label="Copy &amp; Run Code Tabs"
     lang="javascript"
@@ -183,7 +183,7 @@ const examples = {
 <\/script>`,
 	},
 	highlightjs: {
-		copy: `<CodeBlock
+		copy: `<VCodeBlock
   :code="myCode"
   copy-tab
   highlightjs
@@ -193,7 +193,7 @@ const examples = {
   tabs
 />`,
 		run: `<template>
-  <CodeBlock
+  <VCodeBlock
     :code="myCode"
     :copy-tab="false"
     highlightjs
@@ -212,7 +212,7 @@ const examples = {
   }
 <\/script>`,
 		both: `<template>
-  <CodeBlock
+  <VCodeBlock
     :code="myCode"
     highlightjs
     label="Copy &amp; Run Code Tabs"
diff --git a/src/documentation/layout/AppBar.vue b/src/documentation/layout/AppBar.vue
index e3a9d53..6e5709f 100644
--- a/src/documentation/layout/AppBar.vue
+++ b/src/documentation/layout/AppBar.vue
@@ -193,6 +193,11 @@ function toggleDrawer() {
 	}
 }
 
+.site-title {
+	font-family: 'Encode Sans Expanded', sans-serif !important;
+	font-weight: 700;
+}
+
 .v-list-item__prepend {
 	.v-list-item__spacer {
 		width: 32px;