diff --git a/components/functionItem/functionItem.tsx b/components/functionItem/functionItem.tsx
index d39d88b..6480871 100644
--- a/components/functionItem/functionItem.tsx
+++ b/components/functionItem/functionItem.tsx
@@ -36,7 +36,7 @@ export default function FunctionItem(props: FunctionItemProps) {
         cursor: !selected ? "pointer" : "default",
         display: "flex",
         justifyContent: "left",
-        px: 2,
+        px: { xs: 0, md: 2 },
         py: 1,
         color: selected ? "primary.main" : undefined,
         borderColor: selected ? "primary.light" : "none",
diff --git a/components/layout/layout.tsx b/components/layout/layout.tsx
index 3c8b314..811e544 100644
--- a/components/layout/layout.tsx
+++ b/components/layout/layout.tsx
@@ -5,6 +5,7 @@ import {
   Link,
   useTheme,
   IconButton,
+  Tooltip,
 } from "@mui/material";
 import { Image } from "../image";
 import nixSnowflake from "../../public/nix-snowflake.svg";
@@ -23,18 +24,16 @@ export function Layout(props: LayoutProps) {
     <Box
       sx={{
         height: "100vh",
-        overflow: "hidden",
+        overflow: "scroll",
         bgcolor:
-          theme.palette.mode === "light"
-            ? "rgb(242, 248, 253)"
-            : "rgb(23, 17, 22)",
+          theme.palette.mode === "light" ? "rgb(242, 248, 253)" : "#070c16",
       }}
     >
       <header>
         <Box
           sx={{
-            position: "fixed",
-            top: "15rem",
+            // position: "fixed",
+            // top: "15rem",
             height: "100%",
             width: "100%",
             zIndex: 0,
@@ -47,8 +46,8 @@ export function Layout(props: LayoutProps) {
 
         <Box
           sx={{
-            position: "fixed",
-            top: 0,
+            // position: "fixed",
+            // top: 0,
             width: "100%",
             p: 1,
             zIndex: 1,
@@ -61,10 +60,13 @@ export function Layout(props: LayoutProps) {
           }}
         >
           <Typography
-            variant="h2"
+            variant="h1"
+            component="h1"
             sx={{
               textAlign: "center",
               color: "#fff",
+              fontSize: "30pt",
+              lineHeight: 1.2,
             }}
           >
             <Box
@@ -79,35 +81,40 @@ export function Layout(props: LayoutProps) {
               <Image
                 src={nixWhite}
                 alt="nix-logo"
-                height={50}
+                height={25}
                 style={{
-                  marginBottom: "-0.5rem",
+                  marginBottom: "0rem",
                 }}
               />
             </Box>
             <Box sx={{ ml: 1 }} component="span">{`noog\u03BBe`}</Box>
             <Link href="https://github.com/hsjobeki/noogle">
-              <IconButton sx={{ float: "right", top: "0.5em", right: "1em" }}>
-                <GitHubIcon
-                  fontSize="large"
-                  sx={{
-                    display: {
-                      xs: "none",
-                      md: "inline-block",
-                    },
-                  }}
-                />
-              </IconButton>
+              <Tooltip title="Contribute on Github">
+                <IconButton
+                  // ButtonProps={{ ref: iconRef }}
+                  // buttonProps
+                  // ref={iconRef}
+                  sx={{ float: "right", top: "0.6rem", right: "1em", p: 0 }}
+                >
+                  <GitHubIcon
+                    // fontSize=""
+                    sx={{
+                      display: {
+                        xs: "none",
+                        md: "inline-block",
+                      },
+                    }}
+                  />
+                </IconButton>
+              </Tooltip>
             </Link>
           </Typography>
         </Box>
       </header>
       <main
         style={{
-          marginTop: "6em",
-          maxHeight: "calc(100vh - 8em)",
-          overflowY: "scroll",
-          overflowX: "hidden",
+          marginTop: "1rem",
+          // height:
           width: "100vw",
         }}
       >
diff --git a/components/preview/preview.module.css b/components/preview/preview.module.css
index ca6f73d..1d7f0e1 100644
--- a/components/preview/preview.module.css
+++ b/components/preview/preview.module.css
@@ -1,4 +1,11 @@
-.hljs {
-    padding: 0 !important;
 
+.hljs {
+    padding-left: 0 !important;
+    padding-top: 0 !important;
+}
+.hljs .pre {
+    width: 100%;
+}
+.hljs .nix {
+    overflow-x: scroll;
 }
diff --git a/components/preview/preview.tsx b/components/preview/preview.tsx
index 2116799..94e5743 100644
--- a/components/preview/preview.tsx
+++ b/components/preview/preview.tsx
@@ -1,18 +1,17 @@
+import React, { useEffect } from "react";
 import {
   Box,
   Container,
   IconButton,
-  Link,
   List,
   ListItem,
-  ListItemButton,
   ListItemIcon,
-  ListItemSecondaryAction,
   ListItemText,
   Tooltip,
   Typography,
+  useTheme,
+  Link as MuiLink,
 } from "@mui/material";
-// import CloseIcon from "@mui/icons-material/Close";
 import Highlight from "react-highlight";
 import LocalLibraryIcon from "@mui/icons-material/LocalLibrary";
 import InputIcon from "@mui/icons-material/Input";
@@ -23,10 +22,11 @@ import ExpandLessIcon from "@mui/icons-material/ExpandLess";
 import styles from "./preview.module.css";
 import rehypeHighlight from "rehype-highlight";
 import nix from "highlight.js/lib/languages/nix";
+import Link from "next/link";
+
+// import "highlight.js/styles/github-dark.css";
+// import "highlight.js/styles/github.css";
 
-// import hljs from "highlight.js";
-// needed for nextjs to import the classes of github theme
-import "highlight.js/styles/github.css";
 interface PreviewProps {
   docItem: DocItem;
   handleClose: () => void;
@@ -35,39 +35,28 @@ interface PreviewProps {
 export const Preview = (props: PreviewProps) => {
   const { docItem, handleClose } = props;
   const { name, description, category, example, fn_type } = docItem;
+  const theme = useTheme();
 
-  const getGeneratedExamples = () => {
-    if (description) {
-      const regex = /(```.+?```)/gms;
-      console.log({ description, regex });
-      if (typeof description === "object") {
-        return description
-          .join(" ")
-          .match(regex)
-          ?.join("\n#---\n")
-          ?.replaceAll("```nix", "")
-          ?.replaceAll("```", "");
-      } else {
-        return description
-          .match(regex)
-          ?.join("\n#---\n")
-          ?.replaceAll("```nix", "")
-          ?.replaceAll("```", "");
-      }
+  useEffect(() => {
+    if (theme.palette.mode === "dark") {
+      // @ts-ignore - dont check type of css module
+      import("highlight.js/styles/github-dark.css");
+    } else {
+      // @ts-ignore - dont check type of css module
+      import("highlight.js/styles/github.css");
     }
-  };
+  }, [theme]);
 
-  const finalExample = example || getGeneratedExamples();
-  console.log({ finalExample });
   const prefix = category.split(/([\/.])/gm).at(4) || "builtins";
   const libName = category
     .match(/(?:[a-zA-Z]*)\.nix/gm)?.[0]
     ?.replace(".nix", "");
-  const docsRef = `https://nixos.org/manual/nixpkgs/stable/#function-library-lib.${libName}.${name}`;
+  const libDocsRef = `https://nixos.org/manual/nixpkgs/stable/#function-library-lib.${libName}.${name}`;
+  const builtinsDocsRef = `https://nixos.org/manual/nix/stable/language/builtins.html#builtins-${name}`;
   return (
     <Box
       sx={{
-        p: 1,
+        p: { xs: 0.5, md: 1 },
         width: "100%",
         overflow: "none",
       }}
@@ -97,16 +86,26 @@ export const Preview = (props: PreviewProps) => {
           </IconButton>
         </Tooltip>
       </Box>
-      <List sx={{ width: "100%" }}>
-        <ListItem sx={{ flexDirection: { xs: "column", sm: "row" } }}>
+      <List sx={{ width: "100%" }} disablePadding>
+        <ListItem sx={{ flexDirection: { xs: "column", sm: "row" }, px: 0 }}>
           <ListItemIcon>
-            <LocalLibraryIcon sx={{ m: "auto" }} />
+            <Tooltip title={"read docs"}>
+              <MuiLink sx={{ m: "auto", color: "primary.light" }}>
+                <Link
+                  href={prefix != "builtins" ? libDocsRef : builtinsDocsRef}
+                >
+                  <LocalLibraryIcon sx={{ m: "auto" }} />
+                </Link>
+              </MuiLink>
+            </Tooltip>
           </ListItemIcon>
           <ListItemText
             sx={{
               overflow: "hidden",
               textOverflow: "ellipsis",
               alignSelf: "flex-start",
+              width: "100%",
+              px: 0,
             }}
             primaryTypographyProps={{
               color: "text.secondary",
@@ -117,7 +116,24 @@ export const Preview = (props: PreviewProps) => {
               fontSize: "1rem",
               component: "div",
             }}
-            primary={"nixpkgs/" + category.replace("./", "")}
+            primary={
+              prefix !== "builtins" ? (
+                <Tooltip title={"browse source code"}>
+                  <MuiLink>
+                    <Link
+                      href={`https://github.com/NixOS/nixpkgs/blob/master/${category.replace(
+                        "./",
+                        ""
+                      )}`}
+                    >
+                      {"github:NixOS/nixpkgs/" + category.replace("./", "")}
+                    </Link>
+                  </MuiLink>
+                </Tooltip>
+              ) : (
+                "github:NixOS/nix/" + category.replace("./", "")
+              )
+            }
             secondary={
               <Container
                 component={"div"}
@@ -154,8 +170,6 @@ export const Preview = (props: PreviewProps) => {
                         rehypePlugins={[
                           [rehypeHighlight, { languages: { nix } }],
                         ]}
-
-                        // languages: { nix } }}
                       >
                         {description}
                       </ReactMarkdown>
@@ -164,13 +178,25 @@ export const Preview = (props: PreviewProps) => {
             }
           />
         </ListItem>
-        <ListItem sx={{ flexDirection: { xs: "column", sm: "row" } }}>
+        <ListItem sx={{ flexDirection: { xs: "column", sm: "row" }, px: 0 }}>
           <ListItemIcon>
-            <InputIcon sx={{ m: "auto" }} />
+            <Tooltip title={"browse source code"}>
+              <MuiLink sx={{ m: "auto", color: "primary.light" }}>
+                <Link
+                  href={`https://github.com/NixOS/nixpkgs/blob/master/${category.replace(
+                    "./",
+                    ""
+                  )}`}
+                >
+                  <InputIcon sx={{ m: "auto" }} />
+                </Link>
+              </MuiLink>
+            </Tooltip>
           </ListItemIcon>
           <ListItemText
             sx={{
               overflow: "hidden",
+              width: "100%",
               textOverflow: "ellipsis",
               alignSelf: "flex-start",
             }}
@@ -190,39 +216,44 @@ export const Preview = (props: PreviewProps) => {
           sx={{
             backgroundColor: "background.paper",
             flexDirection: { xs: "column", sm: "row" },
+            px: 0,
           }}
         >
-          <ListItemIcon>
-            <CodeIcon sx={{ m: "auto" }} />
-          </ListItemIcon>
-          <ListItemText
-            sx={{
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              alignSelf: "flex-start",
-            }}
-            disableTypography
-            primary={
-              finalExample && (
+          {example && (
+            <ListItemIcon>
+              <CodeIcon sx={{ m: "auto" }} />
+            </ListItemIcon>
+          )}
+          {example && (
+            <ListItemText
+              sx={{
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                alignSelf: "flex-start",
+                width: "100%",
+                px: 0,
+              }}
+              disableTypography
+              primary={
                 <Typography sx={{ color: "text.secondary" }}>
                   Example
                 </Typography>
-              )
-            }
-            secondary={
-              finalExample ? (
-                <Box sx={{ mt: -2 }}>
+              }
+              secondary={
+                <Box
+                  sx={{
+                    "&.MuiBox-root>pre": {
+                      width: "100%",
+                    },
+                  }}
+                >
                   <Highlight className={`nix ${styles.hljs}`}>
-                    {finalExample}
+                    {example}
                   </Highlight>
                 </Box>
-              ) : (
-                <Typography
-                  sx={{ color: "text.secondary" }}
-                >{`no example yet provided`}</Typography>
-              )
-            }
-          />
+              }
+            />
+          )}
         </ListItem>
       </List>
     </Box>
diff --git a/package-lock.json b/package-lock.json
index 51010ae..c512aad 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,13 +19,13 @@
         "eslint": "8.27.0",
         "eslint-config-next": "13.0.2",
         "highlight.js": "^11.7.0",
+        "highlightjs-copy": "^1.0.3",
         "next": "13.0.2",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-highlight": "^0.15.0",
         "react-markdown": "^8.0.4",
         "rehype-highlight": "^6.0.0",
-        "remark-highlight.js": "^7.0.1",
         "typescript": "4.8.4"
       },
       "devDependencies": {
@@ -2831,6 +2831,11 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/highlightjs-copy": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/highlightjs-copy/-/highlightjs-copy-1.0.3.tgz",
+      "integrity": "sha512-vXHBmzz7IuJg8f5ixX7qxhfCCDnEQCXRuIzcd7yTblJazZT3ZkaRto0md8IfBu86JdK4VRIdKMubxKt7kwNGfg=="
+    },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -4360,21 +4365,6 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/remark-highlight.js": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/remark-highlight.js/-/remark-highlight.js-7.0.1.tgz",
-      "integrity": "sha512-ihXPWmg4l55rZ/wREHtEdqXEuVHfE8TvS0UMCemd4lKA1t7ts13xvV3pVLK4vhaeDjSxOroo6U7E4Xxf2wVS4A==",
-      "dependencies": {
-        "@types/mdast": "^3.0.0",
-        "lowlight": "^2.0.0",
-        "unified": "^10.0.0",
-        "unist-util-visit": "^4.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
     "node_modules/remark-parse": {
       "version": "10.0.1",
       "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-10.0.1.tgz",
@@ -7040,6 +7030,11 @@
       "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.7.0.tgz",
       "integrity": "sha512-1rRqesRFhMO/PRF+G86evnyJkCgaZFOI+Z6kdj15TA18funfoqJXvgPCLSf0SWq3SRfg1j3HlDs8o4s3EGq1oQ=="
     },
+    "highlightjs-copy": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/highlightjs-copy/-/highlightjs-copy-1.0.3.tgz",
+      "integrity": "sha512-vXHBmzz7IuJg8f5ixX7qxhfCCDnEQCXRuIzcd7yTblJazZT3ZkaRto0md8IfBu86JdK4VRIdKMubxKt7kwNGfg=="
+    },
     "hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -8004,17 +7999,6 @@
         "unist-util-visit": "^4.0.0"
       }
     },
-    "remark-highlight.js": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/remark-highlight.js/-/remark-highlight.js-7.0.1.tgz",
-      "integrity": "sha512-ihXPWmg4l55rZ/wREHtEdqXEuVHfE8TvS0UMCemd4lKA1t7ts13xvV3pVLK4vhaeDjSxOroo6U7E4Xxf2wVS4A==",
-      "requires": {
-        "@types/mdast": "^3.0.0",
-        "lowlight": "^2.0.0",
-        "unified": "^10.0.0",
-        "unist-util-visit": "^4.0.0"
-      }
-    },
     "remark-parse": {
       "version": "10.0.1",
       "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-10.0.1.tgz",
diff --git a/package.json b/package.json
index 1825020..27959cf 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "eslint": "8.27.0",
     "eslint-config-next": "13.0.2",
     "highlight.js": "^11.7.0",
+    "highlightjs-copy": "^1.0.3",
     "next": "13.0.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
diff --git a/styles/theme/darkThemeOptions.ts b/styles/theme/darkThemeOptions.ts
index 6ba089a..2fb784d 100644
--- a/styles/theme/darkThemeOptions.ts
+++ b/styles/theme/darkThemeOptions.ts
@@ -4,10 +4,10 @@ const darkThemeOptions: ThemeOptions = {
   palette: {
     mode: "dark",
     background: {
-      paper: "#031456 "
+      paper: "#0f192c"
     },
     primary: {
-      main: "#6586c8"
+      main: "#6586c8" 
     },
     secondary: {
       main: "#6ad541"