diff --git a/README.md b/README.md
index 1351b3382..feaa7c14f 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 
 A premium and open source dashboard template with a responsive and high-quality UI.
 
-<a href="https://preview-dev.tabler.io">View Demo</a> | <a href="https://github.com/tabler/tabler-react">View React Version</a> | <a href="https://github.com/tabler/tabler/archive/master.zip">Download ZIP</a>
+<a href="https://preview.tabler.io">View Demo</a> | <a href="https://github.com/tabler/tabler-react">View React Version</a> | <a href="https://github.com/tabler/tabler/archive/master.zip">Download ZIP</a>
 
 ![Tabler preview](/src/static/tabler-preview.png?raw=true)
 
diff --git a/src/pages/_includes/layout/og.html b/src/pages/_includes/layout/og.html
index a5353be80..e444a2141 100644
--- a/src/pages/_includes/layout/og.html
+++ b/src/pages/_includes/layout/og.html
@@ -1,15 +1,13 @@
-{% if include.show %}
-<meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/{{ page.slug }}.png">
+<meta name="twitter:image:src" content="https://preview.tabler.io/static/og.png">
 <meta name="twitter:site" content="@tabler_ui">
 <meta name="twitter:card" content="summary">
 <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
 <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
-<meta property="og:image" content="https://preview-dev.tabler.io/img/components/{{ page.slug }}.png">
+<meta property="og:image" content="https://preview.tabler.io/static/og.png">
 <meta property="og:image:width" content="1280">
 <meta property="og:image:height" content="640">
 <meta property="og:site_name" content="Tabler">
 <meta property="og:type" content="object">
 <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
-<meta property="og:url" content="https://preview-dev.tabler.io{{ page.url }}">
+<meta property="og:url" content="https://preview.tabler.io/static/og.png">
 <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
-{% endif %}
diff --git a/src/pages/_layouts/base.html b/src/pages/_layouts/base.html
index 4ec7af15e..21f26096c 100644
--- a/src/pages/_layouts/base.html
+++ b/src/pages/_layouts/base.html
@@ -13,27 +13,27 @@
 
 	<title>{% if title %}{{ title }} - {% endif %}{% if site.title %}{{ site.title }} - {% endif %}{{ site.description }}</title>
 
-	{% if jekyll.environment != 'development' %}
-	<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+	{% if jekyll.environment == 'preview' %}
+		<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
 
-	<meta name="msapplication-TileColor" content="{{ site.data.colors.blue }}"/>
-	<meta name="theme-color" content="{{ site.data.colors.blue }}"/>
+		<meta name="msapplication-TileColor" content="{{ site.data.colors.blue }}"/>
+		<meta name="theme-color" content="{{ site.data.colors.blue }}"/>
 
-	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-	<meta name="apple-mobile-web-app-capable" content="yes"/>
-	<meta name="mobile-web-app-capable" content="yes"/>
-	<meta name="HandheldFriendly" content="True"/>
-	<meta name="MobileOptimized" content="320"/>
-	<meta name="robots" content="noindex,nofollow,noarchive"/>
+		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+		<meta name="apple-mobile-web-app-capable" content="yes"/>
+		<meta name="mobile-web-app-capable" content="yes"/>
+		<meta name="HandheldFriendly" content="True"/>
+		<meta name="MobileOptimized" content="320"/>
+		<meta name="robots" content="noindex,nofollow,noarchive"/>
 
-	<link rel="icon" href="{{ site.base }}/favicon.ico" type="image/x-icon"/>
-	<link rel="shortcut icon" href="{{ site.base }}/favicon.ico" type="image/x-icon"/>
+		<link rel="icon" href="{{ site.base }}/favicon.ico" type="image/x-icon"/>
+		<link rel="shortcut icon" href="{{ site.base }}/favicon.ico" type="image/x-icon"/>
 
-	{% if page.description %}
-		<meta name="description" content="{{ page.description | escape }}"/>
-	{% endif %}
+		{% if page.description %}
+			<meta name="description" content="{{ page.description | escape }}"/>
+		{% endif %}
 
-	{% include layout/og.html show=layout.og-component %}
+		{% include layout/og.html %}
 	{% endif %}
 
 	{% include layout/css.html %}
diff --git a/src/pages/_layouts/component.html b/src/pages/_layouts/component.html
index 42416db66..97a3149e8 100644
--- a/src/pages/_layouts/component.html
+++ b/src/pages/_layouts/component.html
@@ -58,7 +58,7 @@ og-component: true
                <div class="col">{% include ui/button.html icon="clipboard" text="Copy code" color="white" block=true class="mt-4" %}</div>
                <div class="col">
                   <form action="https://codepen.io/pen/define" method="post" target="_blank">
-                     <input type="hidden" name="data" value='{"title":"{{ page.title | escape }}","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"{{ demo-html | tidy: 'html' | replace_regex: "\n", "\\n" | replace_regex: "\t", "\\t" | replace_regex: '"', '\"' | replace_regex: "'", "\'" }}","css":"{{ demo-css | replace_regex: "\n", "\\n" | replace_regex: "\t", "\\t" | replace_regex: '"', '\"' }}", "editors":"100"}'>
+                     <input type="hidden" name="data" value='{"title":"{{ page.title | escape }}","css_external":"https://preview.tabler.io/dist/css/tabler.css","html":"{{ demo-html | tidy: 'html' | replace_regex: "\n", "\\n" | replace_regex: "\t", "\\t" | replace_regex: '"', '\"' | replace_regex: "'", "\'" }}","css":"{{ demo-css | replace_regex: "\n", "\\n" | replace_regex: "\t", "\\t" | replace_regex: '"', '\"' }}", "editors":"100"}'>
                      {% include ui/button.html icon="codesandbox" text="Edit in CodePen" color="primary" block=true class="mt-4" element="button" type="submit" %}
                   </form>
                </div>
diff --git a/src/static/og.png b/src/static/og.png
new file mode 100644
index 000000000..fffbf07e8
Binary files /dev/null and b/src/static/og.png differ