diff --git a/app/layout.tsx b/app/layout.tsx
index 01aa44d..2c151ba 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -2,8 +2,10 @@ import './globals.css'
 import type { Metadata } from 'next'
 import { Open_Sans } from 'next/font/google'
 import { ClerkProvider } from '@clerk/nextjs'
-import { ThemeProvider } from '@/components/providors/theme-providor'
+
 import { cn } from '@/lib/utils'
+import { ThemeProvider } from '@/components/providors/theme-providor'
+import { ModalProvidor } from '@/components/providors/modal-providor'
 
 const font = Open_Sans({ subsets: ['latin'] })
 
@@ -30,7 +32,8 @@ export default function RootLayout({
             enableSystem={false}
             storageKey="discord-theme"
           >
-            {children}
+            <ModalProvidor/>
+              {children}
           </ThemeProvider>          
         </body>
       </html>
diff --git a/components/navigation/navigation-action.tsx b/components/navigation/navigation-action.tsx
index 49075f8..2a27c88 100644
--- a/components/navigation/navigation-action.tsx
+++ b/components/navigation/navigation-action.tsx
@@ -3,8 +3,12 @@
 import { Plus } from "lucide-react"
 
 import { ActionTooltip } from "@/components/action-tooltip"
+import { useModal } from "@/hooks/use-modal-store"
 
 export const NavigationAction = () => {
+
+    const { onOpen } = useModal();
+
     return (
         <div>
             <ActionTooltip
@@ -13,6 +17,7 @@ export const NavigationAction = () => {
                 label="Add a server"
             >
                 <button
+                    onClick={() => onOpen("createServer")}
                     className="group flex items-center"
                 >
                     <div className="flex mx-3 h-[48px] w-[48px] rounded-[24px] group-hover:rounded-[16px] transition-all overflow-hidding items-center justify-center bg-background dark:bg-neutral-700 group-hover:bg-emerald-500">
diff --git a/components/providors/modal-providor.tsx b/components/providors/modal-providor.tsx
new file mode 100644
index 0000000..c73bdb7
--- /dev/null
+++ b/components/providors/modal-providor.tsx
@@ -0,0 +1,23 @@
+"use client"
+
+import { useEffect, useState } from "react";
+
+import { CreateServerModal } from "@/components/modals/create-server-modal";
+
+export const ModalProvidor = () => {
+    const [isMounted, setIsMounted] = useState(false);
+
+    useEffect (() => {
+        setIsMounted(true);
+        }, []);
+
+    if (!isMounted) {
+        return null;
+    }
+
+    return (
+        <>
+            <CreateServerModal />
+        </>
+    )
+}
\ No newline at end of file
diff --git a/hooks/use-modal-store.ts b/hooks/use-modal-store.ts
new file mode 100644
index 0000000..77ff451
--- /dev/null
+++ b/hooks/use-modal-store.ts
@@ -0,0 +1,17 @@
+import { create } from "zustand";
+
+export type ModalType = "createServer";
+
+interface ModalStore {
+    type: ModalType | null;
+    isOpen: boolean;
+    onOpen: (type: ModalType) => void;
+    onClose: () => void;
+}
+
+export const useModal = create<ModalStore>((set) => ({
+    type: null,
+    isOpen: false,
+    onOpen: (type) => set({ isOpen: true, type }),
+    onClose: () => set({ type: null, isOpen: false }),
+}));
\ No newline at end of file