diff --git a/apps/docs/pages/docs/guider/guides/config/landing.mdx b/apps/docs/pages/docs/guider/guides/config/landing.mdx
index fc7a527b..6518a6d7 100644
--- a/apps/docs/pages/docs/guider/guides/config/landing.mdx
+++ b/apps/docs/pages/docs/guider/guides/config/landing.mdx
@@ -10,7 +10,7 @@ To make a landing page (or any page that isn't MDX for that matter), you will fi
 
 If you want the layout to belong to a specific layout or site, you can specify it the `meta` prop - this is completely optional. It accepts the same data as the Frontmatter from a page.
 
-```tsx title="index.mdx" showLineNumbers
+```tsx title="index.tsx" showLineNumbers
 import { GuiderLayout } from '@neato/guider/client';
 
 export default function LandingPage() {
@@ -29,7 +29,7 @@ You can add any content you need inside of the `<GuiderLayout />{:tsx}` componen
 
 In the case that you don't want to put in extra effort into making a landing page, you can opt for using our premade landing page:
 
-```tsx title="index.mdx" showLineNumbers {12-38}
+```tsx title="index.tsx" showLineNumbers {12-38}
 import {
   Button,
   Card,
@@ -72,3 +72,7 @@ export default function LandingPage() {
   );
 }
 ```
+
+<Important>
+  when making non-MDX pages, make sure you put it in a `.tsx` file instead of a `.mdx` file.
+</Important>
diff --git a/packages/guider/package.json b/packages/guider/package.json
index 3633ddcd..5c6f35c3 100644
--- a/packages/guider/package.json
+++ b/packages/guider/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@neato/guider",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Beautiful documentation sites, without all the hassle",
   "main": "./dist/index.js",
   "type": "module",
diff --git a/packages/guider/src/client/components/markdown/table.tsx b/packages/guider/src/client/components/markdown/table.tsx
index 3270fb8f..f938fcb2 100644
--- a/packages/guider/src/client/components/markdown/table.tsx
+++ b/packages/guider/src/client/components/markdown/table.tsx
@@ -5,7 +5,7 @@ export function MarkdownTable(props: MarkdownProps) {
   return (
     <div
       className={classNames(
-        'gd-rounded-xl gd-border gd-border-line gd-overflow-hidden gd-my-8',
+        'gd-rounded-xl gd-border gd-border-line gd-overflow-x-auto gd-grid gd-grid-cols-1 gd-my-8',
         props.attrs.class,
       )}
     >