diff --git a/src/Settings.tsx b/src/Settings.tsx
index 946c221..9cd437b 100644
--- a/src/Settings.tsx
+++ b/src/Settings.tsx
@@ -1,28 +1,33 @@
-import { components } from "replugged";
+import { common, components } from "replugged";
 import { cfg } from ".";
 
 import themes from "./themes.json";
 import Codeblock from "./Codeblock";
 
-const { SelectItem } = components;
+const { React } = common;
+const { SelectItem, ErrorBoundary } = components;
 
-const previewData = `const btn = document.getElementById('btn')
-let count = 0
-function render() {
-  btn.innerText = \`Count: \${count}\`
-}
-btn.addEventListener('click', () => {
-  // Count from 1 to 10.
-  if (count < 10) {
-    count += 1
-    render()
-  }
-})`;
+import previews from "./previews.json";
+console.log(previews);
 
 export function Settings(): React.ReactElement {
+  const [ previewID, setPreviewID ] = React.useState(0);
+
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      setPreviewID(prevID => (prevID + 1) % previews.length);
+    }, 10e3);
+
+    return () => {
+      clearInterval(interval);
+    }
+  }, []);
+
   return (
     <>
-      <Codeblock lang="js" code={previewData}></Codeblock>
+      <ErrorBoundary>
+        <Codeblock lang={previews[previewID].lang} code={previews[previewID].code}></Codeblock>
+      </ErrorBoundary>
       <br />
       <SelectItem
         options={themes.map((theme) => {
diff --git a/src/langs.json b/src/langs.json
index 24b982b..8552a82 100644
--- a/src/langs.json
+++ b/src/langs.json
@@ -75,7 +75,8 @@
   },
   {
     "name": "Crystal",
-    "id": "crystal"
+    "id": "crystal",
+    "devicon": "crystal-original"
   },
   {
     "name": "C#",
@@ -94,7 +95,8 @@
   },
   {
     "name": "Dart",
-    "id": "dart"
+    "id": "dart",
+    "devicon": "dart-plain"
   },
   {
     "name": "Diff",
@@ -128,11 +130,13 @@
   },
   {
     "name": "Git Commit",
-    "id": "git-commit"
+    "id": "git-commit",
+    "devicon": "git"
   },
   {
     "name": "Git Rebase",
-    "id": "git-rebase"
+    "id": "git-rebase",
+    "devicon": "git"
   },
   {
     "name": "GNU Plot",
@@ -141,7 +145,8 @@
   {
     "name": "GDScript",
     "id": "gdscript",
-    "aliases": ["godot", "gds", "gd"]
+    "aliases": ["godot", "gds", "gd"],
+    "devicon": "godot-plain"
   },
   {
     "name": "Go",
@@ -150,12 +155,13 @@
   },
   {
     "name": "GraphQL",
-    "id": "graphql"
+    "id": "graphql",
+    "devicon": "graphql-plain"
   },
   {
     "name": "Groovy",
     "id": "groovy",
-    "icon": "groovy-plain"
+    "devicon": "groovy-plain"
   },
   {
     "name": "Hack",
@@ -193,7 +199,7 @@
   {
     "name": "HTML",
     "id": "html",
-    "icon": "html5-plain"
+    "devicon": "html5-plain"
   },
   {
     "name": "HTTP",
@@ -249,6 +255,7 @@
   {
     "name": "Julia",
     "id": "julia",
+    "devicon": "julia-plain",
     "aliases": ["jl"]
   },
   {
@@ -260,6 +267,7 @@
   {
     "name": "LaTeX",
     "id": "latex",
+    "devicon": "latex-original",
     "aliases": ["tex"]
   },
   {
@@ -277,7 +285,8 @@
   },
   {
     "name": "Lua",
-    "id": "lua"
+    "id": "lua",
+    "devicon": "lua-plain"
   },
   {
     "name": "Luau",
@@ -290,6 +299,7 @@
   {
     "name": "Markdown",
     "id": "markdown",
+    "devicon": "markdown-original",
     "aliases": ["md"]
   },
   {
@@ -320,7 +330,9 @@
   },
   {
     "name": "Nix",
-    "id": "nix"
+    "id": "nix",
+    "devicon": "nixos-plain",
+    "aliases": ["nixos"]
   },
   {
     "name": "Objective C",
@@ -344,7 +356,8 @@
   },
   {
     "name": "Perl",
-    "id": "perl"
+    "id": "perl",
+    "devicon": "perl-plain"
   },
   {
     "name": "Raku",
@@ -370,6 +383,12 @@
     "name": "PostCSS",
     "id": "postcss"
   },
+  {
+    "name": "PostgreSQL",
+    "id": "postgresql",
+    "devicon": "postgresql-plain",
+    "aliases": ["postgres"]
+  },
   {
     "name": "PowerShell",
     "id": "powershell",
@@ -470,7 +489,8 @@
   },
   {
     "name": "SQL",
-    "id": "sql"
+    "id": "sql",
+    "devicon": "mysql-plain"
   },
   {
     "name": "SSH Config",
diff --git a/src/previews.json b/src/previews.json
new file mode 100644
index 0000000..2f2cf29
--- /dev/null
+++ b/src/previews.json
@@ -0,0 +1,22 @@
+[
+  {
+    "lang": "js",
+    "code": "const btn = document.getElementById('btn');\nlet count = 0;\nfunction render() {\n  btn.innerText = `Count: ${count}`;\n}\nbtn.addEventListener('click', () => {\n  // Count from 1 to 10.\n  if (count < 10) {\n    count += 1;\n    render();\n  }\n})"
+  },
+  {
+    "lang": "py",
+    "code": "import math \n \ndef primeFactors(n): \n    while n % 2 == 0: \n        print(2) \n        n = n // 2 \n    for i in range(3,int(math.sqrt(n))+1,2): \n        while n % i== 0: \n            print(i) \n            n = n // i \n    if n > 2: \n        print(n) \n \n# 3, 3, 5, 7 \nprimeFactors(315)"
+  },
+  {
+    "lang": "css",
+    "code": "@font-face { \n  font-family: Chunkfive; src: url('Chunkfive.otf'); \n} \n \nbody, .usertext { \n  color: #F0F0F0; background: #600; \n  font-family: Chunkfive, sans; \n  --heading-1: 30px/32px Helvetica, sans-serif; \n} \n \n@import url(print.css); \n@media print { \n  a[href^=http]::after { \n    content: attr(href) \n  } \n} "
+  },
+  {
+    "lang": "tsx",
+    "code": "/* eslint-disable header/header */ \nimport React from \"react\"; \n \nconst handleClick = async () => \n    console.log((await import(\"@webpack/common\")).Clipboard.copy(\"\u200b\")); \n \nexport const Example: React.FC<{ \n    real: boolean, \n    shigged?: number, \n}> = ({ real, shigged }) => <> \n    <p>{`Shigg${real ? `ies${shigged === 0x1B ? \"t\" : \"\"}` : \"y\"}`}</p> \n    <button onClick={handleClick}>Click Me</button> \n</>; "
+  },
+  {
+    "lang": "html",
+    "code": "<!DOCTYPE html> \n<title>Title</title> \n \n<style>body {width: 500px;}</style> \n \n<script type=\"application/javascript\"> \n  function $init() {return true;} \n</script> \n \n<body> \n  <p checked class=\"title\" id='title'>Title</p> \n  <!-- here goes the rest of the page --> \n</body> "
+  }
+]