diff --git a/components/DeveloperLayout.tsx b/components/DeveloperLayout.tsx
index bfa9c22..4c3d0cd 100644
--- a/components/DeveloperLayout.tsx
+++ b/components/DeveloperLayout.tsx
@@ -72,7 +72,7 @@ const DeveloperLayout = ({ children, enabled, docs, currentDoc }:DeveloperLayout
 				}
 			</div>
 		</div>
-		<div className='w-full py-24 lg:pl-60'>
+		<div className='w-full py-28 lg:pl-60'>
 			<Container>
 				{children}
 			</Container>
diff --git a/github-markdown.css b/github-markdown.css
index 51ac536..32b9e5e 100644
--- a/github-markdown.css
+++ b/github-markdown.css
@@ -848,7 +848,7 @@ kbd {
 	padding: 0.2em 0.4em;
 	margin: 0;
 	font-size: 85%;
-	background-color: #2c3035;
+	background-color: #181c20;
 	border-radius: 3px;
 }
 
@@ -858,13 +858,13 @@ kbd {
 
 .markdown-body pre > code,
 .dark .markdown-body pre > code {
-	padding: 0;
+	padding: 0 !important;
 	margin: 0;
 	font-size: 100%;
 	word-break: normal;
-	white-space: pre;
-	background: transparent;
-	border: 0;
+	white-space: pre !important;
+	background: transparent !important;
+	border: 0 !important;
 }
 
 .markdown-body .highlight {
diff --git a/pages/_document.tsx b/pages/_document.tsx
index 22291e3..06c326a 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -12,7 +12,7 @@ class MyDocument extends Document {
 				<Head>
 					<link
 						rel='stylesheet'
-						href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/default.min.css'
+						href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.6.0/styles/solarized-dark.min.css'
 					/>
 					<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js'></script>
 					<script
diff --git a/pages/developers/docs/[first]/[second].tsx b/pages/developers/docs/[first]/[second].tsx
index be0448d..8118113 100644
--- a/pages/developers/docs/[first]/[second].tsx
+++ b/pages/developers/docs/[first]/[second].tsx
@@ -15,16 +15,18 @@ const Markdown = dynamic(() => import ('@components/Markdown'))
 const docsDir = './api-docs/docs'
 const Docs: NextPage<DocsProps> = ({ docs }) => {
 	const router = useRouter()
-	const [ document, setDoc ] = useState<DocsData>(null)
+	const [ document, setDoc ] = useState<DocsData>({ name: 'Init' })
 	useEffect(() => {
 		let res = docs?.find(el => el.name === router.query.first)
 		if(router.query.second) res = res?.list?.find(el => el.name === router.query.second)
 		setDoc(res)
+		setTimeout(highlightBlocks, 100)
 	}, [docs, router.query])
 
-	if((!document && document !== null) || router.query.docs?.length > 2) return <NotFound />
+	useEffect(() => highlightBlocks, [document])
+	if((!document) || router.query.docs?.length > 2) return <NotFound />
 	return <DeveloperLayout enabled='docs' docs={docs} currentDoc={(router.query.second || router.query.first) as string}>
-		<div className='px-2'>
+		<div className='px-2 no-seg'>
 			<Markdown text={document?.text} />
 		</div>
 	</DeveloperLayout>
@@ -65,6 +67,13 @@ export async function getStaticProps () {
 	}
 }
 
+function highlightBlocks() {
+	const nodes = window.document.querySelectorAll('pre code')
+	nodes.forEach(el => {
+		window.hljs.highlightBlock(el)
+		console.log(el)
+	})
+}
 interface DocsProps {
   docs: DocsData[]
 }
diff --git a/types/global.d.ts b/types/global.d.ts
index c3fa95b..c80f7db 100644
--- a/types/global.d.ts
+++ b/types/global.d.ts
@@ -1,4 +1,13 @@
 import * as Yup from 'yup'
+
+declare global {
+	interface Window {
+		hljs: {
+			initHighlighting(): void
+			highlightBlock(e: Element): void
+		}
+	}
+}
 declare module 'yup' {
 	class ArraySchema extends Yup.array {
 		unique(format?: string): this
