diff --git a/src/components/blog/Post.astro b/src/components/blog/Post.astro
index b921363..9b0b7dd 100644
--- a/src/components/blog/Post.astro
+++ b/src/components/blog/Post.astro
@@ -50,7 +50,7 @@ const { title, writter, publishDate, alt, img, tags } = Astro.props;
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
-    width: 100vh;
+    width: 160vh;
 	height: auto;
     background-color: rgb(255, 255, 255, 0.5);
     border-radius: 5px;
diff --git a/src/data/author.json b/src/data/author.json
index 3fbfbf7..17b4526 100644
--- a/src/data/author.json
+++ b/src/data/author.json
@@ -8,7 +8,7 @@
         "github": "https://github.com/Hopelezz",
         "githubHandle": "@Hopelezz",
         "photo": "/assets/authors/Mark.avif",
-        "bio": "I am a web developer and I love to code."
+        "bio": "Electrical Engineer, Astro & Solid DocTeam!"
     },
     "John": {
         "name": "John Spratt",
diff --git a/src/draft/root.css b/src/draft/root.css
index 7f4c881..3925f9f 100644
--- a/src/draft/root.css
+++ b/src/draft/root.css
@@ -1,5 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500&display=swap');
-
 /* 
 --c = Color
 --th = theme
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
index 141f6bf..dbc5f21 100644
--- a/src/layouts/BlogPost.astro
+++ b/src/layouts/BlogPost.astro
@@ -1,4 +1,6 @@
 ---
+import '../styles/theme.css';
+import '../styles/index.css';
 import Meta from '../components/MetaTags.astro';
 import Navbar from '../components/Navbar.astro';
 import Cursor from '../components/cursorEffect/Cursor.astro';
diff --git a/src/pages/index.astro b/src/pages/index.astro
index e6cbc13..8a917d3 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,6 +1,6 @@
 ---
 // https://codepen.io/ali-jasim/pen/rNeGKOR
-import '../styles/root.css';
+import '../styles/theme.css';
 // Component Imports
 import Meta from '../components/MetaTags.astro';
 import Cursor from '../components/cursorEffect/Cursor.astro';
diff --git a/src/styles/index.css b/src/styles/index.css
new file mode 100644
index 0000000..027eaaf
--- /dev/null
+++ b/src/styles/index.css
@@ -0,0 +1,238 @@
+
+* {
+	box-sizing: border-box;
+	margin: 0;
+}
+
+/* Global focus outline reset */
+*:focus:not(:focus-visible) {
+	outline: none;
+}
+
+:root {
+	--user-font-scale: 1rem - 16px;
+	--max-width: calc(100% - 1rem);
+}
+
+@media (min-width: 50em) {
+	:root {
+		--max-width: 46em;
+	}
+}
+
+body {
+	display: flex;
+	flex-direction: column;
+	min-height: 100vh;
+	font-family: var(--font-body);
+	font-size: 1rem;
+	font-size: clamp(0.9rem, 0.75rem + 0.375vw + var(--user-font-scale), 1rem);
+	line-height: 1.5;
+	max-width: 100vw;
+}
+
+nav ul {
+	list-style: none;
+	padding: 0;
+}
+
+.content > section > * + * {
+	margin-top: 1.25rem;
+}
+
+.content > section > :first-child {
+	margin-top: 0;
+}
+
+/* Typography */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	margin-bottom: 1rem;
+	font-weight: bold;
+	line-height: 1;
+}
+
+h1,
+h2 {
+	max-width: 40ch;
+}
+
+:is(h2, h3):not(:first-child) {
+	margin-top: 3rem;
+}
+
+:is(h4, h5, h6):not(:first-child) {
+	margin-top: 2rem;
+}
+
+h1 {
+	font-size: 3.25rem;
+	font-weight: 800;
+}
+
+h2 {
+	font-size: 2.5rem;
+}
+
+h3 {
+	font-size: 1.75rem;
+}
+
+h4 {
+	font-size: 1.3rem;
+}
+
+h5 {
+	font-size: 1rem;
+}
+
+p {
+	line-height: 1.65em;
+}
+
+.content ul {
+	line-height: 1.1em;
+}
+
+p,
+.content ul {
+	color: var(--theme-text-light);
+}
+
+small,
+.text_small {
+	font-size: 0.833rem;
+}
+
+a {
+	color: var(--theme-text-accent);
+	font-weight: 400;
+	text-underline-offset: 0.08em;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+article > section :is(ul, ol) > * + * {
+	margin-top: 0.75rem;
+}
+
+article > section nav :is(ul, ol) > * + * {
+	margin-top: inherit;
+}
+
+article > section li > :is(p, pre, blockquote):not(:first-child) {
+	margin-top: 1rem;
+}
+
+article > section :is(ul, ol) {
+	padding-left: 1em;
+}
+
+article > section nav :is(ul, ol) {
+	padding-left: inherit;
+}
+
+article > section nav {
+	margin-top: 1rem;
+	margin-bottom: 2rem;
+}
+
+article > section ::marker {
+	font-weight: bold;
+	color: var(--theme-text-light);
+}
+
+article > section iframe {
+	width: 100%;
+	height: auto;
+	aspect-ratio: 16 / 9;
+}
+
+a > code {
+	position: relative;
+	color: var(--theme-text-accent);
+	background: transparent;
+	text-underline-offset: var(--padding-block);
+}
+
+a > code::before {
+	content: '';
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	display: block;
+	background: var(--theme-accent);
+	opacity: var(--theme-accent-opacity);
+	border-radius: var(--border-radius);
+}
+
+a:hover,
+a:focus {
+	text-decoration: underline;
+}
+
+a:focus {
+	outline: 2px solid currentColor;
+	outline-offset: 0.25em;
+}
+
+strong {
+	font-weight: 600;
+	color: inherit;
+}
+
+
+/* Supporting Content */
+
+code {
+	--border-radius: 3px;
+	--padding-block: 0.2rem;
+	--padding-inline: 0.33rem;
+
+	font-family: var(--font-mono);
+	font-size: 0.85em;
+	color: inherit;
+	background-color: var(--theme-code-inline-bg);
+	padding: var(--padding-block) var(--padding-inline);
+	margin: calc(var(--padding-block) * -1) -0.125em;
+	border-radius: var(--border-radius);
+	word-break: break-word;
+}
+
+pre.astro-code > code {
+	all: unset;
+}
+
+pre > code {
+	font-size: 1em;
+}
+
+table,
+pre {
+	position: relative;
+	--padding-block: 1rem;
+	--padding-inline: 2rem;
+	padding: var(--padding-block) var(--padding-inline);
+	padding-right: calc(var(--padding-inline) * 2);
+	margin-left: calc(var(--padding-inline) * -1);
+	margin-right: calc(var(--padding-inline) * -1);
+	font-family: var(--font-mono);
+
+	line-height: 1.5;
+	font-size: 0.85em;
+	overflow-y: hidden;
+	overflow-x: auto;
+}
+
+table {
+	width: 100%;
+	padding: var(--padding-block) 0;
+	margin: 0;
+	border-collapse: collapse;
+}
\ No newline at end of file
diff --git a/src/styles/root.css b/src/styles/root.css
index f094954..64466b1 100644
--- a/src/styles/root.css
+++ b/src/styles/root.css
@@ -1,4 +1,4 @@
-
+@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500&display=swap');
 :root {
 	color-scheme: light;
 }
@@ -22,7 +22,7 @@
 
 body{
     background-color: #e9e9e9;
-    font-family: 'Poppins', sans-serif;
+    font-family: 'Ubuntu', sans-serif;
 }
 
 
diff --git a/src/styles/theme.css b/src/styles/theme.css
new file mode 100644
index 0000000..fe3b4b9
--- /dev/null
+++ b/src/styles/theme.css
@@ -0,0 +1,125 @@
+:root {
+	--font-fallback: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
+		Apple Color Emoji, Segoe UI Emoji;
+	--font-body: system-ui, var(--font-fallback);
+	--font-mono: 'IBM Plex Mono', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console',
+		'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono',
+		'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
+
+	/*
+   * Variables with --color-base prefix define
+   * the hue, and saturation values to be used for
+   * hsla colors.
+   *
+   * ex:
+   *
+   * --color-base-{color}: {hue}, {saturation};
+   *
+   */
+
+	--color-base-white: 0, 0%;
+	--color-base-black: 240, 100%;
+	--color-base-gray: 215, 14%;
+	--color-base-blue: 212, 100%;
+	--color-base-blue-dark: 212, 72%;
+	--color-base-green: 158, 79%;
+	--color-base-orange: 22, 100%;
+	--color-base-purple: 269, 79%;
+	--color-base-red: 351, 100%;
+	--color-base-yellow: 41, 100%;
+
+	/*
+   * Color palettes are made using --color-base 
+   * variables, along with a lightness value to
+   * define different variants.
+   *
+   */
+    
+	--color-gray-5: var(--color-base-gray), 5%;
+	--color-gray-10: var(--color-base-gray), 10%;
+	--color-gray-20: var(--color-base-gray), 20%;
+	--color-gray-30: var(--color-base-gray), 30%;
+	--color-gray-40: var(--color-base-gray), 40%;
+	--color-gray-50: var(--color-base-gray), 50%;
+	--color-gray-60: var(--color-base-gray), 60%;
+	--color-gray-70: var(--color-base-gray), 70%;
+	--color-gray-80: var(--color-base-gray), 80%;
+	--color-gray-90: var(--color-base-gray), 90%;
+	--color-gray-95: var(--color-base-gray), 95%;
+
+	--color-blue: var(--color-base-blue), 61%;
+	--color-blue-dark: var(--color-base-blue-dark), 39%;
+	--color-green: var(--color-base-green), 42%;
+	--color-orange: var(--color-base-orange), 50%;
+	--color-purple: var(--color-base-purple), 54%;
+	--color-red: var(--color-base-red), 54%;
+	--color-yellow: var(--color-base-yellow), 59%;
+}
+
+:root {
+	color-scheme: light;
+	--theme-accent: hsla(var(--color-blue), 1);
+	--theme-text-accent: hsla(var(--color-blue), 1);
+	--theme-accent-opacity: 0.15;
+	--theme-divider: hsla(var(--color-gray-95), 1);
+	--theme-text: hsla(var(--color-gray-10), 1);
+	--theme-text-light: hsla(var(--color-gray-40), 1);
+	/* @@@: not used anywhere */
+	--theme-text-lighter: hsla(var(--color-gray-80), 1);
+	--theme-bg: hsla(var(--color-base-white), 100%, 1);
+	--theme-bg-hover: hsla(var(--color-gray-95), 1);
+	--theme-bg-offset: hsla(var(--color-gray-90), 1);
+	--theme-bg-accent: hsla(var(--color-blue), var(--theme-accent-opacity));
+	--theme-code-inline-bg: hsla(var(--color-gray-95), 1);
+	--theme-code-inline-text: var(--theme-text);
+	--theme-code-bg: hsla(217, 19%, 27%, 1);
+	--theme-code-text: hsla(var(--color-gray-95), 1);
+	--theme-navbar-bg: hsla(var(--color-base-white), 100%, 1);
+	--theme-navbar-height: 6rem;
+	--theme-selection-color: hsla(var(--color-blue), 1);
+	--theme-selection-bg: hsla(var(--color-blue), var(--theme-accent-opacity));
+}
+
+body {
+	background: var(--theme-bg);
+	color: var(--theme-text);
+}
+
+:root.theme-dark {
+	color-scheme: dark;
+	--theme-accent-opacity: 0.15;
+	--theme-accent: hsla(var(--color-blue), 1);
+	--theme-text-accent: hsla(var(--color-blue), 1);
+	--theme-divider: hsla(var(--color-gray-10), 1);
+	--theme-text: hsla(var(--color-gray-90), 1);
+	--theme-text-light: hsla(var(--color-gray-80), 1);
+
+	/* @@@: not used anywhere */
+	--theme-text-lighter: hsla(var(--color-gray-40), 1);
+	--theme-bg: hsla(215, 28%, 17%, 1);
+	--theme-bg-hover: hsla(var(--color-gray-40), 1);
+	--theme-bg-offset: hsla(var(--color-gray-5), 1);
+	--theme-code-inline-bg: hsla(var(--color-gray-10), 1);
+	--theme-code-inline-text: hsla(var(--color-base-white), 100%, 1);
+	--theme-code-bg: hsla(var(--color-gray-5), 1);
+	--theme-code-text: hsla(var(--color-base-white), 100%, 1);
+	--theme-navbar-bg: hsla(215, 28%, 17%, 1);
+	--theme-selection-color: hsla(var(--color-base-white), 100%, 1);
+	--theme-selection-bg: hsla(var(--color-purple), var(--theme-accent-opacity));
+
+	/* DocSearch [Algolia] */
+	--docsearch-modal-background: var(--theme-bg);
+	--docsearch-searchbox-focus-background: var(--theme-divider);
+	--docsearch-footer-background: var(--theme-divider);
+	--docsearch-text-color: var(--theme-text);
+	--docsearch-hit-background: var(--theme-divider);
+	--docsearch-hit-shadow: none;
+	--docsearch-hit-color: var(--theme-text);
+	--docsearch-footer-shadow: inset 0 2px 10px #000;
+	--docsearch-modal-shadow: inset 0 0 8px #000;
+}
+
+::selection {
+	color: var(--theme-selection-color);
+	background-color: var(--theme-selection-bg);
+}
\ No newline at end of file
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 5491b69..bcf0d82 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
     // Enable top-level await, and other modern ESM features.
-    // "target": "ESNext",
-    "target": "ES6",
+    "target": "ESNext",
+    // "target": "ES6",
     "module": "ESNext",
     // Enable node-style module resolution, for things like npm package imports.
     "moduleResolution": "node",