diff --git a/docs/app/docs/components/aspect-ratio/docs/codeUsage.js b/docs/app/docs/components/aspect-ratio/docs/codeUsage.js
new file mode 100644
index 00000000..632c3830
--- /dev/null
+++ b/docs/app/docs/components/aspect-ratio/docs/codeUsage.js
@@ -0,0 +1,20 @@
+const code = {
+    javascript: {
+        code: `import AspectRatio from "@radui/ui/AspectRatio"`
+
+const AspectRatioExample = () => (
+    <AspectRatio ratio='16/9'>
+        <img
+        style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+        className="Image"
+        src="https://images.pexels.com/photos/346529/pexels-photo-346529.jpeg?cs=srgb&dl=pexels-bri-schneiter-28802-346529.jpg&fm=jpg"
+        alt="Landscape photograph"
+            />
+    </AspectRatio>
+)`
+    
+}
+}
+
+
+export default code;
\ No newline at end of file
diff --git a/docs/app/docs/components/aspect-ratio/page.js b/docs/app/docs/components/aspect-ratio/page.js
new file mode 100644
index 00000000..eb92de2b
--- /dev/null
+++ b/docs/app/docs/components/aspect-ratio/page.js
@@ -0,0 +1,47 @@
+const PAGE_NAME = 'ASPECT_RATIO_DOCS'
+import Documentation from "@/components/layout/Documentation/Documentation"
+
+
+import AspectRatio from "@radui/ui/AspectRatio"
+import SEO from "../../docsIndex"
+export const metadata = SEO.getMetadata(PAGE_NAME)
+
+import codeUsage from "./docs/codeUsage"
+
+const AspectRatioDocs = () => {
+    const columns = [
+        {name: 'Prop', key: 'prop'},
+        {name: 'Type', key: 'type'},
+        {name: 'Default', key: 'default'},
+        {name: 'Description', key: 'description'},
+    ];
+
+    const data = [
+        {prop: 'ratio', type: 'string', default: '1', description: 'Used to set desired ratio'},
+        
+    ];
+    return <div>
+        <Documentation currentPage={PAGE_NAME} title='Aspect Ratio' description={`
+                    Aspect Ratio is used to set the desired ratio.
+                `}>
+                    <Documentation.ComponentHero codeUsage={codeUsage}>
+                <div>
+                     <AspectRatio ratio='16/9'>
+                                <img
+                                    style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                                    className="Image"
+                                    src="https://images.pexels.com/photos/346529/pexels-photo-346529.jpeg?cs=srgb&dl=pexels-bri-schneiter-28802-346529.jpg&fm=jpg"
+                                    alt="Landscape photograph"
+                                />
+                    </AspectRatio>
+                </div>
+            </Documentation.ComponentHero>
+            <div className="max-w-screen-md">
+                            <Documentation.Table columns={columns} data={data} />
+                        </div>
+                </Documentation>
+      
+    </div>
+}
+
+export default AspectRatioDocs;
\ No newline at end of file
diff --git a/docs/components/navigation/Navigation.js b/docs/components/navigation/Navigation.js
index 34cdb9e4..a3bc1947 100644
--- a/docs/components/navigation/Navigation.js
+++ b/docs/components/navigation/Navigation.js
@@ -43,6 +43,10 @@ const sections = [
                 title: "Avatar",
                 path: "/docs/components/avatar"
             },
+            {
+                title: "AspectRatio",
+                path: "/docs/components/aspect-ratio"
+            },
             {
                 title: "Badge",
                 path: "/docs/components/badge"