diff --git a/apps/storybook/stories/components/Layout/AspectRatio/ApectRatio.mdx b/apps/storybook/stories/components/Layout/AspectRatio/ApectRatio.mdx
new file mode 100644
index 0000000000..b9a99275e1
--- /dev/null
+++ b/apps/storybook/stories/components/Layout/AspectRatio/ApectRatio.mdx
@@ -0,0 +1,27 @@
+import { Meta, Canvas, Story, Controls } from "@storybook/blocks";
+import * as AspectRatioStories from "./AspectRatio.stories";
+
+<Meta of={AspectRatioStories} />
+
+# Aspect Ratio
+
+AspectRatio brukes to å legge inn responsive bilder, videoer, kart, osv.
+
+## Ta i bruk
+
+```jsx
+import { AspectRatio } from "@kvib/react";
+```
+
+## Props
+
+<Canvas of={AspectRatioStories.AspectRatio} />
+<Controls of={AspectRatioStories.AspectRatio} />
+
+## Kart 16 / 9 ratio
+
+<Canvas of={AspectRatioStories.AspectRatioMap} />
+
+## Video med maxWidth
+
+<Canvas of={AspectRatioStories.AspectRatioVideo} />
diff --git a/apps/storybook/stories/components/Layout/AspectRatio/AspectRatio.stories.tsx b/apps/storybook/stories/components/Layout/AspectRatio/AspectRatio.stories.tsx
new file mode 100644
index 0000000000..61f491a72c
--- /dev/null
+++ b/apps/storybook/stories/components/Layout/AspectRatio/AspectRatio.stories.tsx
@@ -0,0 +1,65 @@
+import { AspectRatio as KvibAspectRatio } from "@kvib/react/src/layout";
+import { Image } from "@kvib/react/src/";
+
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof KvibAspectRatio> = {
+  title: "Komponenter/Layout/Aspect Ratio",
+  component: KvibAspectRatio,
+  parameters: {
+    docs: {
+      story: { inline: true },
+      canvas: { sourceState: "shown" },
+    },
+    a11y: {
+      disable: true,
+    },
+  },
+  argTypes: {
+    ratio: {
+      description: "The aspect ratio of the Box. Common values are: `21/9`, `16/9`, `9/16`, `4/3`, `1.85/1`",
+      table: { type: { summary: "ResponsiveValue<number>" } },
+      control: "number",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof KvibAspectRatio>;
+
+export const AspectRatio: Story = {
+  args: { ratio: 4 / 3 },
+  render: (args) => (
+    <KvibAspectRatio {...args}>
+      <Image
+        alt="trees"
+        src="https://images.unsplash.com/photo-1477768663691-75454fd8e870?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=3087&q=80"
+      />
+    </KvibAspectRatio>
+  ),
+};
+
+export const AspectRatioMap: Story = {
+  args: { ratio: 16 / 9 },
+  render: (args) => (
+    <KvibAspectRatio {...args}>
+      <iframe
+        title="hønefoss kart"
+        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15878.224555781148!2d10.234854769824661!3d60.16785279531992!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4641075a4a064e7d%3A0x32d7e65bc9c0d372!2zSMO4bmVmb3Nz!5e0!3m2!1sno!2sno!4v1694593115187!5m2!1sno!2sno"
+      ></iframe>
+    </KvibAspectRatio>
+  ),
+};
+
+export const AspectRatioVideo: Story = {
+  args: { maxW: "560px", ratio: 1 },
+  render: (args) => (
+    <KvibAspectRatio {...args}>
+      <iframe
+        title="kart og kompass"
+        src="https://www.youtube.com/embed/6V8Ua_4HOaQ?si=4V8GX80XXhWc_Jtr"
+        allowFullScreen
+      />
+    </KvibAspectRatio>
+  ),
+};
diff --git a/apps/storybook/stories/components/layout/AspectRatio/AspectRatio.mdx b/apps/storybook/stories/components/layout/AspectRatio/AspectRatio.mdx
deleted file mode 100644
index a48ede7a66..0000000000
--- a/apps/storybook/stories/components/layout/AspectRatio/AspectRatio.mdx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Meta } from "@storybook/blocks";
-
-<Meta title="Komponenter/Layout/Aspect Ratio" />
-
-# Aspect Ratio
-
-Se [https://chakra-ui.com/docs/components/aspect-ratio](https://chakra-ui.com/docs/components/aspect-ratio) for eksempler og dokumentasjon.
-
-## Ta i bruk
-
-```jsx
-import { AspectRatio } from "@kvib/react";
-```
diff --git a/config b/config
new file mode 100644
index 0000000000..a087b904c5
--- /dev/null
+++ b/config
@@ -0,0 +1 @@
+core.ignorecase=false
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index ccf4135f24..2405abdcc5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
         "eslint-config-custom": "*",
         "husky": "^8.0.3",
         "prettier": "^3.0.3",
+        "pretty-quick": "^3.1.3",
         "turbo": "*"
       },
       "engines": {