diff --git a/README.md b/README.md
index 1287137..d274db8 100644
--- a/README.md
+++ b/README.md
@@ -78,7 +78,7 @@
 ### :camera: Screenshots
 
 <div align="center">
-  <img src="https://github.com/DuckyMomo20012/nextjs-template/assets/64480713/7da7177c-84b4-4f03-b9d4-da8b07e4a654" alt="screenshot" />
+  <img src="https://github.com/DuckyMomo20012/nextjs-template/assets/64480713/4854d68c-930d-4238-ab8a-4a02cd27e81b" alt="screenshot" />
 </div>
 
 <!-- TechStack -->
diff --git a/next.config.js b/next.config.js
index ba2b84f..e0f1936 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,6 +1,7 @@
-/** @type {import('next').NextConfig} */
+// @ts-check
 
-export default {
+/** @type {import('next').NextConfig} */
+const nextConfig = {
   eslint: {
     ignoreDuringBuilds: true,
   },
@@ -16,3 +17,5 @@ export default {
     ],
   },
 };
+
+export default nextConfig;
diff --git a/package.json b/package.json
index e1d9bfd..15ebd25 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
     "@babel/core": "7.23.6",
     "@commitlint/cli": "18.4.3",
     "@commitlint/config-conventional": "18.4.3",
+    "@tailwindcss/container-queries": "0.1.1",
     "@types/node": "20.10.5",
     "@types/react": "18.2.29",
     "@types/react-dom": "18.2.18",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 56fa791..de19472 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -79,6 +79,9 @@ devDependencies:
   '@commitlint/config-conventional':
     specifier: 18.4.3
     version: 18.4.3
+  '@tailwindcss/container-queries':
+    specifier: 0.1.1
+    version: 0.1.1(tailwindcss@3.4.0)
   '@types/node':
     specifier: 20.10.5
     version: 20.10.5
@@ -891,6 +894,14 @@ packages:
       tslib: 2.5.0
     dev: false
 
+  /@tailwindcss/container-queries@0.1.1(tailwindcss@3.4.0):
+    resolution: {integrity: sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==}
+    peerDependencies:
+      tailwindcss: '>=3.2.0'
+    dependencies:
+      tailwindcss: 3.4.0
+    dev: true
+
   /@tanstack/query-core@5.14.2:
     resolution: {integrity: sha512-QmoJvC72sSWs3hgGis8JdmlDvqLfYGWUK4UG6OR9Q6t28JMN9m2FDwKPqoSJ9YVocELCSjMt/FGjEiLfk8000Q==}
     dev: false
diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx
index 0d2313b..cc00182 100644
--- a/src/app/(home)/page.tsx
+++ b/src/app/(home)/page.tsx
@@ -15,7 +15,6 @@ import {
 } from '@mantine/core';
 import Head from 'next/head';
 import { useDeferredValue, useState } from 'react';
-import { AppShell } from '@/components/layouts/AppShell';
 import { ButtonDemo } from '@/components/modules/ButtonDemo';
 import { ComboboxDemo } from '@/components/modules/ComboboxDemo';
 import { DataDisplayDemo } from '@/components/modules/DataDisplayDemo';
@@ -56,7 +55,7 @@ const HomePage = () => {
   const deferredError = useDeferredValue(error);
   const deferredPlaceholder = useDeferredValue(placeholder);
 
-  const defaultProps: ControlledDemoProps = {
+  const defaultProps = {
     color,
     description: deferredDescription,
     disabled,
@@ -67,7 +66,7 @@ const HomePage = () => {
     size,
     withAsterisk,
     loading,
-  };
+  } satisfies ControlledDemoProps;
 
   return (
     <>
@@ -243,8 +242,4 @@ const HomePage = () => {
   );
 };
 
-HomePage.getLayout = (page: React.ReactNode) => {
-  return <AppShell>{page}</AppShell>;
-};
-
 export default HomePage;
diff --git a/src/app/error.tsx b/src/app/error.tsx
index 9c5563b..fdb1eb0 100644
--- a/src/app/error.tsx
+++ b/src/app/error.tsx
@@ -12,8 +12,8 @@ import {
 
 function Error() {
   return (
-    <Center className="@container h-full w-full flex-1">
-      <Stack align="center" className="min-w-4/5 @lg:w-full w-4/5 max-w-xl">
+    <Center className="h-full w-full flex-1 @container">
+      <Stack align="center" className="min-w-4/5 w-4/5 max-w-xl @lg:w-full">
         <Image
           alt="500"
           className="aspect-[5/4]"
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 78b7044..3734e81 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -12,8 +12,8 @@ import Link from 'next/link';
 
 const NotFound = () => {
   return (
-    <Center className="@container h-full w-full flex-1">
-      <Stack align="center" className="min-w-4/5 @lg:w-full w-4/5 max-w-xl">
+    <Center className="h-full w-full flex-1 @container">
+      <Stack align="center" className="min-w-4/5 w-4/5 max-w-xl @lg:w-full">
         <Image
           alt="404"
           className="aspect-[5/4]"
diff --git a/src/components/elements/Feature.tsx b/src/components/elements/Feature.tsx
index 0ad71dc..d30c112 100644
--- a/src/components/elements/Feature.tsx
+++ b/src/components/elements/Feature.tsx
@@ -1,21 +1,33 @@
 'use client';
 
-import { Card, Space, Stack, Text } from '@mantine/core';
+import { Anchor, Card, Space, Stack, Text } from '@mantine/core';
 
 const Feature = ({
   title,
   group,
+  url,
   children,
   className,
 }: {
   title: string;
   group?: string;
+  url?: string;
   className?: string;
   children: React.ReactNode;
 }) => {
   return (
     <Card className={`${className}`} radius="md" shadow="sm" withBorder>
-      <Text className="text-xl font-bold">{title}</Text>
+      {url ? (
+        <Anchor
+          className="text-xl font-bold text-inherit"
+          href={url}
+          target="_blank"
+        >
+          {title}
+        </Anchor>
+      ) : (
+        <Text className="text-xl font-bold">{title}</Text>
+      )}
       {group && (
         <Text c="dimmed" className="text-sm">
           {group}
diff --git a/src/components/modules/ButtonDemo.tsx b/src/components/modules/ButtonDemo.tsx
index fb22b8a..64e2ac7 100644
--- a/src/components/modules/ButtonDemo.tsx
+++ b/src/components/modules/ButtonDemo.tsx
@@ -16,7 +16,11 @@ const ButtonDemo = memo(function ButtonDemo({
 }: ControlledDemoProps) {
   return (
     <>
-      <Feature group="Buttons" title="ActionIcon">
+      <Feature
+        group="Buttons"
+        title="ActionIcon"
+        url="https://mantine.dev/core/action-icon/"
+      >
         <ActionIcon
           color={color}
           disabled={disabled}
@@ -117,7 +121,11 @@ const ButtonDemo = memo(function ButtonDemo({
         </ActionIcon>
       </Feature>
 
-      <Feature group="Buttons" title="Button">
+      <Feature
+        group="Buttons"
+        title="Button"
+        url="https://mantine.dev/core/button/"
+      >
         <Button
           color={color}
           disabled={disabled}
diff --git a/src/components/modules/ComboboxDemo.tsx b/src/components/modules/ComboboxDemo.tsx
index 70c6e66..31e7095 100644
--- a/src/components/modules/ComboboxDemo.tsx
+++ b/src/components/modules/ComboboxDemo.tsx
@@ -23,7 +23,11 @@ const ComboboxDemo = memo(function ComboboxDemo({
 }: ControlledDemoProps) {
   return (
     <>
-      <Feature group="Combobox" title="Autocomplete">
+      <Feature
+        group="Combobox"
+        title="Autocomplete"
+        url="https://mantine.dev/core/autocomplete/"
+      >
         <Autocomplete
           data={[
             { group: 'Frontend', items: ['React', 'Angular'] },
@@ -70,7 +74,11 @@ const ComboboxDemo = memo(function ComboboxDemo({
         />
       </Feature>
 
-      <Feature group="Combobox" title="MultiSelect">
+      <Feature
+        group="Combobox"
+        title="MultiSelect"
+        url="https://mantine.dev/core/multi-select/"
+      >
         <MultiSelect
           data={['React', 'Angular', 'Svelte', 'Vue']}
           description={description}
@@ -131,7 +139,11 @@ const ComboboxDemo = memo(function ComboboxDemo({
         />
       </Feature>
 
-      <Feature group="Combobox" title="Pill">
+      <Feature
+        group="Combobox"
+        title="Pill"
+        url="https://mantine.dev/core/pill/"
+      >
         <Group>
           <Pill disabled={disabled} radius={radius} size={size}>
             {label}
@@ -147,7 +159,11 @@ const ComboboxDemo = memo(function ComboboxDemo({
         </Group>
       </Feature>
 
-      <Feature group="Combobox" title="TagsInput">
+      <Feature
+        group="Combobox"
+        title="TagsInput"
+        url="https://mantine.dev/core/tags-input/"
+      >
         <TagsInput
           description={description}
           disabled={disabled}
diff --git a/src/components/modules/DataDisplayDemo.tsx b/src/components/modules/DataDisplayDemo.tsx
index 534f46a..4f0062d 100644
--- a/src/components/modules/DataDisplayDemo.tsx
+++ b/src/components/modules/DataDisplayDemo.tsx
@@ -22,7 +22,11 @@ const DataDisplayDemo = memo(function DataDisplayDemo({
 }: ControlledDemoProps) {
   return (
     <>
-      <Feature group="Data Display" title="Accordion">
+      <Feature
+        group="Data Display"
+        title="Accordion"
+        url="https://mantine.dev/core/accordion/"
+      >
         <Accordion chevronPosition="left" radius={radius} variant="default">
           <Accordion.Item value="photos">
             <Accordion.Control disabled={disabled}>
@@ -85,7 +89,11 @@ const DataDisplayDemo = memo(function DataDisplayDemo({
         </Accordion>
       </Feature>
 
-      <Feature group="Data Display" title="Avatar">
+      <Feature
+        group="Data Display"
+        title="Avatar"
+        url="https://mantine.dev/core/avatar/"
+      >
         <Avatar color={color} radius={radius} size={size} variant="default" />
 
         <Avatar color={color} radius={radius} size={size} variant="filled">
@@ -109,7 +117,11 @@ const DataDisplayDemo = memo(function DataDisplayDemo({
         <Avatar color={color} radius={radius} size={size} variant="white" />
       </Feature>
 
-      <Feature group="Data Display" title="Badge">
+      <Feature
+        group="Data Display"
+        title="Badge"
+        url="https://mantine.dev/core/badge/"
+      >
         <Badge color={color} radius={radius} size={size} variant="default">
           {label}
         </Badge>
@@ -133,7 +145,11 @@ const DataDisplayDemo = memo(function DataDisplayDemo({
         </Badge>
       </Feature>
 
-      <Feature group="Data Display" title="Indicator">
+      <Feature
+        group="Data Display"
+        title="Indicator"
+        url="https://mantine.dev/core/indicator/"
+      >
         <Stack className="w-min">
           <Indicator
             color={color}
@@ -199,7 +215,11 @@ const DataDisplayDemo = memo(function DataDisplayDemo({
         </Stack>
       </Feature>
 
-      <Feature group="Data Display" title="ThemeIcon">
+      <Feature
+        group="Data Display"
+        title="ThemeIcon"
+        url="https://mantine.dev/core/theme-icon/"
+      >
         <ThemeIcon color={color} radius={radius} size={size} variant="default">
           <Icon
             height="70%"
diff --git a/src/components/modules/FeedbackDemo.tsx b/src/components/modules/FeedbackDemo.tsx
index 007c0b8..9069f15 100644
--- a/src/components/modules/FeedbackDemo.tsx
+++ b/src/components/modules/FeedbackDemo.tsx
@@ -14,7 +14,11 @@ const FeedbackDemo = memo(function FeedbackDemo({
 }: ControlledDemoProps) {
   return (
     <>
-      <Feature group="Feedback" title="Alert">
+      <Feature
+        group="Feedback"
+        title="Alert"
+        url="https://mantine.dev/core/alert/"
+      >
         <Alert
           color={color}
           radius={radius}
@@ -71,7 +75,11 @@ const FeedbackDemo = memo(function FeedbackDemo({
         </Alert>
       </Feature>
 
-      <Feature group="Feedback" title="Notification">
+      <Feature
+        group="Feedback"
+        title="Notification"
+        url="https://mantine.dev/core/notification/"
+      >
         <Notification
           color={color}
           loading={loading}
@@ -93,7 +101,11 @@ const FeedbackDemo = memo(function FeedbackDemo({
         </Notification>
       </Feature>
 
-      <Feature group="Feedback" title="Progress">
+      <Feature
+        group="Feedback"
+        title="Progress"
+        url="https://mantine.dev/core/progress/"
+      >
         <Progress color={color} radius={radius} value={50}>
           {description}
         </Progress>
@@ -105,7 +117,11 @@ const FeedbackDemo = memo(function FeedbackDemo({
         </Progress>
       </Feature>
 
-      <Feature group="Feedback" title="Skeleton">
+      <Feature
+        group="Feedback"
+        title="Skeleton"
+        url="https://mantine.dev/core/skeleton/"
+      >
         <Skeleton circle height={50} mb="xl" />
         <Skeleton height={8} radius={radius} />
         <Skeleton height={8} mt={6} radius={radius} />
diff --git a/src/components/modules/InputDemo.tsx b/src/components/modules/InputDemo.tsx
index 61a78f4..92059a8 100644
--- a/src/components/modules/InputDemo.tsx
+++ b/src/components/modules/InputDemo.tsx
@@ -36,7 +36,11 @@ const InputDemo = memo(function InputDemo({
 }: ControlledDemoProps) {
   return (
     <>
-      <Feature group="Inputs" title="Checkbox">
+      <Feature
+        group="Inputs"
+        title="Checkbox"
+        url="https://mantine.dev/core/checkbox/"
+      >
         <Checkbox
           color={color}
           defaultChecked
@@ -71,7 +75,7 @@ const InputDemo = memo(function InputDemo({
         />
       </Feature>
 
-      <Feature group="Inputs" title="Chip">
+      <Feature group="Inputs" title="Chip" url="https://mantine.dev/core/chip/">
         <Chip
           color={color}
           defaultChecked
@@ -104,7 +108,11 @@ const InputDemo = memo(function InputDemo({
         </Chip>
       </Feature>
 
-      <Feature group="Inputs" title="ColorInput">
+      <Feature
+        group="Inputs"
+        title="ColorInput"
+        url="https://mantine.dev/core/color-input/"
+      >
         <ColorInput
           description={description}
           disabled={disabled}
@@ -140,7 +148,11 @@ const InputDemo = memo(function InputDemo({
         />
       </Feature>
 
-      <Feature group="Inputs" title="FileInput">
+      <Feature
+        group="Inputs"
+        title="FileInput"
+        url="https://mantine.dev/core/file-input/"
+      >
         <FileInput
           description={description}
           disabled={disabled}
@@ -176,7 +188,11 @@ const InputDemo = memo(function InputDemo({
         />
       </Feature>
 
-      <Feature group="Inputs" title="JsonInput">
+      <Feature
+        group="Inputs"
+        title="JsonInput"
+        url="https://mantine.dev/core/json-input/"
+      >
         <JsonInput
           description={description}
           disabled={disabled}
@@ -212,7 +228,11 @@ const InputDemo = memo(function InputDemo({
         />
       </Feature>
 
-      <Feature group="Inputs" title="NumberInput">
+      <Feature
+        group="Inputs"
+        title="NumberInput"
+        url="https://mantine.dev/core/number-input/"
+      >
         <NumberInput
           description={description}
           disabled={disabled}
@@ -248,7 +268,11 @@ const InputDemo = memo(function InputDemo({
         />
       </Feature>
 
-      <Feature group="Inputs" title="PasswordInput">
+      <Feature
+        group="Inputs"
+        title="PasswordInput"
+        url="https://mantine.dev/core/password-input/"
+      >
         <PasswordInput
           description={description}
           disabled={disabled}
@@ -284,7 +308,11 @@ const InputDemo = memo(function InputDemo({
         />
       </Feature>
 
-      <Feature group="Inputs" title="PinInput">
+      <Feature
+        group="Inputs"
+        title="PinInput"
+        url="https://mantine.dev/core/pin-input/"
+      >
         <PinInput
           disabled={disabled}
           error={!!error}
@@ -311,7 +339,11 @@ const InputDemo = memo(function InputDemo({
         />
       </Feature>
 
-      <Feature group="Inputs" title="Radio">
+      <Feature
+        group="Inputs"
+        title="Radio"
+        url="https://mantine.dev/core/radio/"
+      >
         <Radio
           color={color}
           disabled={disabled}
@@ -331,13 +363,21 @@ const InputDemo = memo(function InputDemo({
         />
       </Feature>
 
-      <Feature group="Inputs" title="Rating">
+      <Feature
+        group="Inputs"
+        title="Rating"
+        url="https://mantine.dev/core/rating/"
+      >
         <Rating color={color} size={size} />
-        <Rating color={color} highlightSelectedOnly size={size} value={2} />
+        <Rating color={color} highlightSelectedOnly size={size} />
         <Rating color={color} readOnly size={size} value={3} />
       </Feature>
 
-      <Feature group="Inputs" title="SegmentedControl">
+      <Feature
+        group="Inputs"
+        title="SegmentedControl"
+        url="https://mantine.dev/core/segmented-control/"
+      >
         <SegmentedControl
           color={color}
           data={['React', 'Vue', 'Angular']}
@@ -371,7 +411,11 @@ const InputDemo = memo(function InputDemo({
         />
       </Feature>
 
-      <Feature group="Inputs" title="Slider">
+      <Feature
+        group="Inputs"
+        title="Slider"
+        url="https://mantine.dev/core/slider/"
+      >
         <Slider
           color={color}
           defaultValue={20}
@@ -416,7 +460,11 @@ const InputDemo = memo(function InputDemo({
         <Space h="xs" />
       </Feature>
 
-      <Feature group="Inputs" title="Switch">
+      <Feature
+        group="Inputs"
+        title="Switch"
+        url="https://mantine.dev/core/switch/"
+      >
         <Switch
           color={color}
           description={description}
@@ -438,7 +486,11 @@ const InputDemo = memo(function InputDemo({
         />
       </Feature>
 
-      <Feature group="Inputs" title="Textarea">
+      <Feature
+        group="Inputs"
+        title="Textarea"
+        url="https://mantine.dev/core/textarea/"
+      >
         <Textarea
           description={description}
           disabled={disabled}
@@ -474,7 +526,11 @@ const InputDemo = memo(function InputDemo({
         />
       </Feature>
 
-      <Feature group="Inputs" title="TextInput">
+      <Feature
+        group="Inputs"
+        title="TextInput"
+        url="https://mantine.dev/core/text-input/"
+      >
         <TextInput
           description={description}
           disabled={disabled}
diff --git a/src/components/modules/NavigationDemo.tsx b/src/components/modules/NavigationDemo.tsx
index 352e496..7396a2f 100644
--- a/src/components/modules/NavigationDemo.tsx
+++ b/src/components/modules/NavigationDemo.tsx
@@ -16,7 +16,11 @@ const NavigationDemo = memo(function NavigationDemo({
 }: ControlledDemoProps) {
   return (
     <>
-      <Feature group="Navigation" title="NavLink">
+      <Feature
+        group="Navigation"
+        title="NavLink"
+        url="https://mantine.dev/core/nav-link/"
+      >
         <NavLink
           color={color}
           description={description}
@@ -54,6 +58,7 @@ const NavigationDemo = memo(function NavigationDemo({
         className="col-span-1 md:col-span-2"
         group="Navigation"
         title="Pagination"
+        url="https://mantine.dev/core/pagination/"
       >
         <Pagination
           color={color}
@@ -85,6 +90,7 @@ const NavigationDemo = memo(function NavigationDemo({
         className="col-span-1 md:col-span-2"
         group="Navigation"
         title="Stepper"
+        url="https://mantine.dev/core/stepper/"
       >
         <Stepper active={1} color={color} radius={radius} size={size}>
           <Stepper.Step
@@ -146,7 +152,11 @@ const NavigationDemo = memo(function NavigationDemo({
         </Stepper>
       </Feature>
 
-      <Feature group="Navigation" title="Tabs">
+      <Feature
+        group="Navigation"
+        title="Tabs"
+        url="https://mantine.dev/core/tabs/"
+      >
         <Tabs color={color} defaultValue="gallery" radius={radius}>
           <Tabs.List>
             <Tabs.Tab value="gallery">Gallery</Tabs.Tab>
diff --git a/src/components/modules/OverlayDemo.tsx b/src/components/modules/OverlayDemo.tsx
index b89a568..981df6d 100644
--- a/src/components/modules/OverlayDemo.tsx
+++ b/src/components/modules/OverlayDemo.tsx
@@ -13,7 +13,11 @@ const OverlayDemo = memo(function OverlayDemo({
 }: ControlledDemoProps) {
   return (
     <>
-      <Feature group="Overlays" title="Tooltip">
+      <Feature
+        group="Overlays"
+        title="Tooltip"
+        url="https://mantine.dev/core/tooltip/"
+      >
         <Tooltip
           disabled={disabled}
           label={label}
diff --git a/src/components/modules/TypographyDemo.tsx b/src/components/modules/TypographyDemo.tsx
index 98c8678..6247036 100644
--- a/src/components/modules/TypographyDemo.tsx
+++ b/src/components/modules/TypographyDemo.tsx
@@ -14,7 +14,11 @@ const TypographyDemo = memo(function TypographyDemo({
 }: ControlledDemoProps) {
   return (
     <>
-      <Feature group="Typography" title="Blockquote">
+      <Feature
+        group="Typography"
+        title="Blockquote"
+        url="https://mantine.dev/core/blockquote/"
+      >
         <Blockquote
           cite={description}
           color={color}
@@ -32,7 +36,11 @@ const TypographyDemo = memo(function TypographyDemo({
         </Blockquote>
       </Feature>
 
-      <Feature group="Typography" title="Code">
+      <Feature
+        group="Typography"
+        title="Code"
+        url="https://mantine.dev/core/code/"
+      >
         <Stack className="w-min">
           <Code>{label}</Code>
           <Code c="white" color={color}>
@@ -41,7 +49,11 @@ const TypographyDemo = memo(function TypographyDemo({
         </Stack>
       </Feature>
 
-      <Feature group="Typography" title="Highlight">
+      <Feature
+        group="Typography"
+        title="Highlight"
+        url="https://mantine.dev/core/highlight/"
+      >
         <Highlight highlight="this">
           Highlight This, definitely THIS and also this!
         </Highlight>
@@ -54,6 +66,7 @@ const TypographyDemo = memo(function TypographyDemo({
         className="col-span-1 md:col-span-2"
         group="Typography"
         title="Title"
+        url="https://mantine.dev/core/title/"
       >
         <Title order={1}>{label}</Title>
         <Title order={2}>{label}</Title>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 7d43647..11b22a9 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,3 +1,4 @@
+import twContainerQueries from '@tailwindcss/container-queries';
 import type { Config } from 'tailwindcss';
 
 export default {
@@ -50,5 +51,5 @@ export default {
   corePlugins: {
     preflight: false,
   },
-  plugins: [],
+  plugins: [twContainerQueries],
 } satisfies Config;