diff --git a/package.json b/package.json
index 70f2c6e..128a95d 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "next dev --turbo",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
diff --git a/src/app/[locale]/(main)/community/[communityId]/admin/page.client.tsx b/src/app/[locale]/(main)/community/[communityId]/admin/page.client.tsx
new file mode 100644
index 0000000..fa1a4cf
--- /dev/null
+++ b/src/app/[locale]/(main)/community/[communityId]/admin/page.client.tsx
@@ -0,0 +1,58 @@
+'use client'
+import { Community } from '@/utils/types/models'
+import { TabsContent } from '@/components/ui/tabs'
+import CommunityAdminMain from '@/components/community/admin/main'
+import MyCommunities from '@/components/community/myCommunities'
+import { functions } from '@/app/appwrite-client'
+import { ExecutionMethod } from 'node-appwrite'
+import { useEffect, useState } from 'react'
+import NoAccess from '@/components/static/noAccess'
+import { hasAdminPanelAccess } from '@/utils/actions/community/checkRoles'
+import { toast } from 'sonner'
+
+export default function PageClient({
+  community,
+}: {
+  community: Community.CommunityDocumentsType
+}) {
+  const [hasPermission, setHasPermission] = useState(false)
+  const [isLoading, setIsLoading] = useState(true)
+
+  const getOwnerStatus = async () => {
+    const data = await functions.createExecution(
+      'community-endpoints',
+      '',
+      false,
+      `/community/isFollowing?communityId=${community.$id}`,
+      ExecutionMethod.GET
+    )
+
+    const response = JSON.parse(data.responseBody)
+
+    if (response.code === 500) {
+      toast.error('Error fetching community data. Please try again later.')
+    }
+
+    setHasPermission(await hasAdminPanelAccess(response.roles))
+  }
+
+  useEffect(() => {
+    getOwnerStatus().then(() => setIsLoading(false))
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [community])
+
+  if (!isLoading && !hasPermission) {
+    return <NoAccess />
+  }
+
+  return (
+    <>
+      <TabsContent value="general">
+        <CommunityAdminMain community={community} />
+      </TabsContent>
+      <TabsContent value="settings">
+        <MyCommunities />
+      </TabsContent>
+    </>
+  )
+}
diff --git a/src/app/[locale]/(main)/community/[communityId]/admin/page.tsx b/src/app/[locale]/(main)/community/[communityId]/admin/page.tsx
new file mode 100644
index 0000000..a229ce3
--- /dev/null
+++ b/src/app/[locale]/(main)/community/[communityId]/admin/page.tsx
@@ -0,0 +1,54 @@
+import PageLayout from '@/components/pageLayout'
+import { getCommunity } from '@/utils/server-api/communities/getCommunity'
+import { notFound } from 'next/navigation'
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import PageClient from './page.client'
+
+export const runtime = 'edge'
+
+export async function generateMetadata({
+  params: { communityId },
+}: {
+  params: { communityId: string }
+}) {
+  const community = await getCommunity(communityId)
+
+  if (!community.$id) {
+    return notFound()
+  }
+
+  return {
+    title: community?.name || 'Community Admin',
+    description: community?.description,
+    icons: {
+      icon: '/logos/Headpat_Logo_web_1024x1024_240518-02.png',
+    },
+    openGraph: {
+      title: community?.name || 'Community Admin',
+      description: community?.description,
+      images: '/logos/Headpat_Logo_web_1024x1024_240518-02.png',
+    },
+  }
+}
+
+export default async function Page({
+  params: { communityId },
+}: {
+  params: { communityId: string }
+}) {
+  const community = await getCommunity(communityId)
+
+  return (
+    <PageLayout title={`${community.name} Admin`}>
+      <Tabs defaultValue="general" className="w-full">
+        <div className="flex flex-col items-center justify-center">
+          <TabsList className="grid w-full sm:max-w-4xl grid-cols-2">
+            <TabsTrigger value="general">General</TabsTrigger>
+            <TabsTrigger value="settings">Settings</TabsTrigger>
+          </TabsList>
+        </div>
+        <PageClient community={community} />
+      </Tabs>
+    </PageLayout>
+  )
+}
diff --git a/src/app/[locale]/(main)/community/[communityId]/followers/page.client.tsx b/src/app/[locale]/(main)/community/[communityId]/followers/page.client.tsx
index f8cb19c..7edd539 100644
--- a/src/app/[locale]/(main)/community/[communityId]/followers/page.client.tsx
+++ b/src/app/[locale]/(main)/community/[communityId]/followers/page.client.tsx
@@ -40,7 +40,7 @@ export default function PageClient({ communityId }: { communityId: string }) {
 
   if (isFetching || !followers) {
     return (
-      <PageLayout title={'Friends'}>
+      <PageLayout title={'Followers'}>
         <div className={'flex flex-1 justify-center items-center h-full'}>
           <div className={'p-4 gap-6 text-center'}>
             <h1 className={'text-2xl font-semibold'}>Loading...</h1>
@@ -52,7 +52,7 @@ export default function PageClient({ communityId }: { communityId: string }) {
 
   if (followers.length === 0) {
     return (
-      <PageLayout title={'Friends'}>
+      <PageLayout title={'Followers'}>
         <div className={'flex flex-1 justify-center items-center h-full'}>
           <div className={'p-4 gap-6 text-center'}>
             <h1 className={'text-2xl font-semibold'}>No followers found</h1>
diff --git a/src/app/[locale]/(main)/community/[communityId]/page.client.tsx b/src/app/[locale]/(main)/community/[communityId]/page.client.tsx
index c1390d9..2238a03 100644
--- a/src/app/[locale]/(main)/community/[communityId]/page.client.tsx
+++ b/src/app/[locale]/(main)/community/[communityId]/page.client.tsx
@@ -20,19 +20,18 @@ import {
   CardHeader,
   CardTitle,
 } from '@/components/ui/card'
-import { Link } from '@/navigation'
+import { Link, useRouter } from '@/navigation'
 import { Separator } from '@/components/ui/separator'
 import PageLayout from '@/components/pageLayout'
 import { Community } from '@/utils/types/models'
+import { hasAdminPanelAccess } from '@/utils/actions/community/checkRoles'
 
 export default function PageClient({
   communityId,
   communityData,
-  userSelf,
 }: {
   communityId: string
   communityData: Community.CommunityDocumentsType
-  userSelf: any
 }) {
   const [community, setCommunity] =
     useState<Community.CommunityDocumentsType>(communityData)
@@ -167,7 +166,9 @@ export default function PageClient({
 
 export function FollowerButton({ displayName, communityId }) {
   const [isFollowingState, setIsFollowingState] = useState<boolean>(null)
+  const [hasPermissions, setHasPermissions] = useState<boolean>(false)
   const [isLoading, setIsLoading] = useState<boolean>(true)
+  const router = useRouter()
 
   const getIsFollowing = async () => {
     try {
@@ -180,7 +181,9 @@ export function FollowerButton({ displayName, communityId }) {
       )
 
       const response = JSON.parse(data.responseBody)
-      setIsFollowingState(response)
+
+      setIsFollowingState(response.isFollowing)
+      setHasPermissions(await hasAdminPanelAccess(response.roles))
     } catch (error) {
       // Do nothing
     }
@@ -200,6 +203,7 @@ export function FollowerButton({ displayName, communityId }) {
       ExecutionMethod.POST
     )
     const response = JSON.parse(data.responseBody)
+
     if (response.code === 400) {
       return toast.error('Community ID is missing. Please try again later.')
     } else if (response.code === 401) {
@@ -222,7 +226,7 @@ export function FollowerButton({ displayName, communityId }) {
       ExecutionMethod.DELETE
     )
     const response = JSON.parse(data.responseBody)
-    console.log(response)
+
     if (response.type === 'community_unfollow_missing_id') {
       return toast.error('Community ID is missing. Please try again later.')
     } else if (response.type === 'community_unfollow_owner') {
@@ -240,13 +244,28 @@ export function FollowerButton({ displayName, communityId }) {
     }
   }
 
+  const handleManage = () => {
+    router.push({
+      pathname: `/community/[communityId]/admin`,
+      params: { communityId: communityId },
+    })
+  }
+
   return (
     <>
       {isLoading ? (
         <Skeleton className={'w-full h-10'} />
       ) : (
-        <Button onClick={isFollowingState ? handleUnfollow : handleFollow}>
-          {isFollowingState ? 'Leave' : 'Join'}
+        <Button
+          onClick={
+            hasPermissions
+              ? handleManage
+              : isFollowingState
+                ? handleUnfollow
+                : handleFollow
+          }
+        >
+          {hasPermissions ? 'Manage' : isFollowingState ? 'Leave' : 'Join'}
         </Button>
       )}
     </>
diff --git a/src/app/[locale]/(main)/community/[communityId]/page.tsx b/src/app/[locale]/(main)/community/[communityId]/page.tsx
index ab4dbbe..54e337b 100644
--- a/src/app/[locale]/(main)/community/[communityId]/page.tsx
+++ b/src/app/[locale]/(main)/community/[communityId]/page.tsx
@@ -1,5 +1,4 @@
 import { getCommunity } from '@/utils/server-api/communities/getCommunity'
-import { getUser } from '@/utils/server-api/account/user'
 import PageClient from './page.client'
 import { notFound } from 'next/navigation'
 
@@ -37,18 +36,5 @@ export default async function Page({
 }) {
   const community = await getCommunity(communityId)
 
-  let userSelf = null
-  try {
-    userSelf = await getUser()
-  } catch (error) {
-    // Do nothing
-  }
-
-  return (
-    <PageClient
-      communityId={communityId}
-      communityData={community}
-      userSelf={userSelf}
-    />
-  )
+  return <PageClient communityId={communityId} communityData={community} />
 }
diff --git a/src/app/[locale]/(main)/users/page.client.tsx b/src/app/[locale]/(main)/users/page.client.tsx
index e09546c..eb4b2dd 100644
--- a/src/app/[locale]/(main)/users/page.client.tsx
+++ b/src/app/[locale]/(main)/users/page.client.tsx
@@ -27,9 +27,14 @@ export default function ClientPage() {
       )
 
       const response = JSON.parse(data.responseBody)
+
+      if (response.code === 500) {
+        toast.error('Failed to fetch users. Please try again later.')
+        return
+      }
       setUsers(response.documents)
     } catch (error) {
-      toast('Failed to fetch users. Please try again later.')
+      toast.error('Failed to fetch users. Please try again later.')
     } finally {
       setIsFetching(false)
     }
diff --git a/src/components/account/views/general.tsx b/src/components/account/views/general.tsx
index e338075..adcbd68 100644
--- a/src/components/account/views/general.tsx
+++ b/src/components/account/views/general.tsx
@@ -48,6 +48,7 @@ export default function GeneralAccountView({
     getDocument('hp_db', 'userdata', accountData.$id)
       .then((data: UserData.UserDataDocumentsType) => setUserData(data))
       .catch(() => {
+        // Sometimes the function is too slow and the data is not created yet
         window.location.reload()
       })
   }, [accountData])
diff --git a/src/components/community/addCommunity.tsx b/src/components/community/addCommunity.tsx
index c9ea880..2302b9f 100644
--- a/src/components/community/addCommunity.tsx
+++ b/src/components/community/addCommunity.tsx
@@ -2,7 +2,6 @@
 
 import {
   AlertDialog,
-  AlertDialogAction,
   AlertDialogCancel,
   AlertDialogContent,
   AlertDialogDescription,
@@ -19,7 +18,7 @@ import { Switch } from '@/components/ui/switch'
 import { z } from 'zod'
 import { toast } from 'sonner'
 import { Button } from '@/components/ui/button'
-import { AppwriteException, ExecutionMethod, Models } from 'node-appwrite'
+import { ExecutionMethod, Models } from 'node-appwrite'
 import { functions } from '@/app/appwrite-client'
 import { useRouter } from '@/navigation'
 import { HeadpatException } from '@/utils/types/models'
@@ -129,6 +128,7 @@ export default function AddCommunity({
               maxLength={4096}
               rows={8}
               value={communityData.description}
+              className="resize-none"
               onChange={(e) =>
                 setCommunityData((prev) => ({
                   ...prev,
diff --git a/src/components/community/admin/main.tsx b/src/components/community/admin/main.tsx
new file mode 100644
index 0000000..1f5db4f
--- /dev/null
+++ b/src/components/community/admin/main.tsx
@@ -0,0 +1,146 @@
+'use client'
+import { Community } from '@/utils/types/models'
+import { databases, functions } from '@/app/appwrite-client'
+import { ExecutionMethod } from 'node-appwrite'
+import { useEffect, useState } from 'react'
+import NoAccess from '@/components/static/noAccess'
+import UploadAvatar from '@/components/community/uploadAvatar'
+import UploadBanner from '@/components/community/uploadBanner'
+import { Label } from '@/components/ui/label'
+import { Input } from '@/components/ui/input'
+import { Button } from '@/components/ui/button'
+import { z } from 'zod'
+import { Textarea } from '@/components/ui/textarea'
+
+const communitySchema = z.object({
+  name: z
+    .string()
+    .min(4, 'Name must be 4 characters or more')
+    .max(64, 'Name must be 64 characters or less'),
+  description: z
+    .string()
+    .max(4096, 'Description must be 4096 characters or less'),
+  status: z.string().max(24, 'Status must be 24 characters or less'),
+})
+
+export default function CommunityAdminMain({
+  community,
+}: {
+  community: Community.CommunityDocumentsType
+}) {
+  const [isLoading, setIsLoading] = useState(true)
+  const [communityData, setCommunityData] =
+    useState<Community.CommunityDocumentsType>(null)
+  const [isUploading, setIsUploading] = useState(false)
+
+  const getCommunity = async () => {
+    const data: Community.CommunityDocumentsType = await databases.getDocument(
+      'hp_db',
+      'community',
+      community.$id
+    )
+    setCommunityData(data)
+  }
+
+  useEffect(() => {
+    getCommunity().then(() => setIsLoading(false))
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [community])
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+  }
+
+  return isLoading ? (
+    <div>Loading...</div>
+  ) : (
+    <>
+      <div className="divide-y divide-black/5 dark:divide-white/5">
+        <div className="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 px-4 py-16 sm:px-6 md:grid-cols-3 lg:px-8">
+          <div>
+            <h2 className="text-base font-semibold leading-7">
+              Frontpage Settings
+            </h2>
+            <p className="mt-1 text-sm leading-6 text-gray-900 dark:text-gray-400">
+              Here you can change your public profile settings.
+            </p>
+          </div>
+
+          <form onSubmit={handleSubmit} className="md:col-span-2">
+            <UploadAvatar
+              isUploading={isUploading}
+              setIsUploading={setIsUploading}
+              communityData={communityData}
+            />
+            <div className={'my-4'} />
+            <UploadBanner
+              isUploading={isUploading}
+              setIsUploading={setIsUploading}
+              communityData={communityData}
+            />
+
+            <div className="mt-12 grid grid-cols-1 gap-x-6 gap-y-8 sm:max-w-full sm:grid-cols-6">
+              <div className="col-span-full">
+                <Label htmlFor="name">Display Name</Label>
+                <div className="relative mt-2">
+                  <Input
+                    id="name"
+                    name="name"
+                    type="text"
+                    value={communityData ? communityData.name : ''}
+                    onChange={(e) => {
+                      if (e.target.value.length <= 32) {
+                        setCommunityData({
+                          ...communityData,
+                          name: e.target.value,
+                        })
+                      }
+                    }}
+                    maxLength={32}
+                  />
+                  <div className="absolute inset-y-0 right-0 flex items-center pr-3 text-sm leading-5">
+                    <span className="select-none">
+                      {communityData ? communityData.name?.length : 0}
+                    </span>
+                    <span className="select-none text-gray-400">/{32}</span>
+                  </div>
+                </div>
+              </div>
+
+              <div className="col-span-full">
+                <Label htmlFor="description">Description</Label>
+                <div className="relative mt-2">
+                  <Textarea
+                    id="description"
+                    name="description"
+                    value={communityData ? communityData.description : ''}
+                    onChange={(e) => {
+                      if (e.target.value.length <= 32) {
+                        setCommunityData({
+                          ...communityData,
+                          description: e.target.value,
+                        })
+                      }
+                    }}
+                    className="resize-none"
+                    maxLength={4096}
+                  />
+                  <div className="absolute inset-y-0 right-0 flex items-center pr-3 text-sm leading-5">
+                    <span className="select-none">
+                      {communityData ? communityData.description?.length : 0}
+                    </span>
+                    <span className="select-none text-gray-400">/{4096}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="mt-8 flex">
+              <Button type="submit">Save</Button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/src/components/community/admin/settings.tsx b/src/components/community/admin/settings.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/community/uploadAvatar.tsx b/src/components/community/uploadAvatar.tsx
new file mode 100644
index 0000000..f5b18a8
--- /dev/null
+++ b/src/components/community/uploadAvatar.tsx
@@ -0,0 +1,312 @@
+'use client'
+import React, { useState, useRef } from 'react'
+
+import ReactCrop, { Crop, PixelCrop } from 'react-image-crop'
+import { canvasPreview } from '../gallery/upload/canvasPreview'
+import { useDebounceEffect } from '../gallery/upload/useDebounceEffect'
+
+import 'react-image-crop/dist/ReactCrop.css'
+import { databases, functions, storage } from '@/app/appwrite-client'
+import { toast } from 'sonner'
+import { Input } from '@/components/ui/input'
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog'
+import { Community } from '@/utils/types/models'
+import * as Sentry from '@sentry/nextjs'
+import {
+  centerAspectCrop,
+  createBlob,
+} from '@/components/gallery/upload/uploadHelper'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { UploadFileServer } from '@/utils/actions/community/uploadFileServer'
+import { ExecutionMethod, ID } from 'node-appwrite'
+
+export default function UploadAvatar({
+  isUploading,
+  setIsUploading,
+  communityData,
+}) {
+  const [imgSrc, setImgSrc] = useState('')
+  const previewCanvasRef = useRef<HTMLCanvasElement>(null)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const imgRef = useRef<HTMLImageElement>(null)
+  const [crop, setCrop] = useState<Crop>()
+  const [completedCrop, setCompletedCrop] = useState<PixelCrop>()
+  const [type, setType] = useState('image/png')
+  const [name, setName] = useState('')
+  const [open, setOpen] = useState(false)
+  const scale = 1
+  const rotate = 0
+  const aspect = 1
+
+  function onSelectFile(e: React.ChangeEvent<HTMLInputElement>) {
+    if (e.target.files && e.target.files.length > 0) {
+      const file = e.target.files[0]
+      const maxSizeInBytes = 1024 * 1024 // 1 MB
+
+      if (file.size > maxSizeInBytes) {
+        toast.error('File size exceeds the 1 MB limit.')
+        if (fileInputRef.current) {
+          fileInputRef.current.value = '' // Reset the input field
+        }
+        return
+      }
+
+      setOpen(true)
+      setCrop(undefined) // Makes crop preview update between images.
+      const reader = new FileReader()
+      reader.addEventListener('load', () =>
+        setImgSrc(reader.result?.toString() || '')
+      )
+      setType(file.type)
+      setName(file.name)
+      reader.readAsDataURL(file)
+    }
+  }
+
+  function onImageLoad(e: React.SyntheticEvent<HTMLImageElement>) {
+    if (aspect) {
+      const { width, height } = e.currentTarget
+      setCrop(centerAspectCrop(width, height, aspect))
+    }
+  }
+
+  async function onUploadCropClick() {
+    const blob = await createBlob(imgRef, previewCanvasRef, completedCrop, type)
+    const loadingToast = toast.loading('Uploading avatar...')
+
+    // Upload the blob to your server or storage service
+    const formData = new FormData()
+    formData.append('file', blob, name || 'Unnamed')
+
+    try {
+      const file = formData.get('file') as File
+
+      setIsUploading(true)
+
+      const data = await functions.createExecution(
+        'community-endpoints',
+        '',
+        false,
+        `/community/upload?communityId=${communityData.$id}&type=avatar`,
+        ExecutionMethod.POST
+      )
+      const response = JSON.parse(data.responseBody)
+
+      if (response.type === 'community_upload_missing_id') {
+        toast.error('Community ID is missing. Please try again later.')
+        return toast.dismiss(loadingToast)
+      } else if (response.type === 'unauthorized') {
+        toast.error('You are not authorized to upload.')
+        return toast.dismiss(loadingToast)
+      } else if (response.type === 'community_upload_missing_type') {
+        toast.error('Missing upload type. Please try again later.')
+        return toast.dismiss(loadingToast)
+      }
+
+      // Upload the new avatar
+      const fileData = storage.createFile(
+        'community-avatars',
+        ID.unique(),
+        file
+      )
+
+      fileData.then(
+        async function (response) {
+          // Update the user's avatarId
+          await databases.updateDocument(
+            'hp_db',
+            'community',
+            communityData.$id,
+            {
+              avatarId: response.$id,
+            }
+          )
+
+          toast.dismiss(loadingToast)
+          toast.success('Your avatar has been uploaded successfully.')
+          setImgSrc(getAvatarImageUrl(response.$id))
+
+          await functions.createExecution(
+            'community-endpoints',
+            '',
+            true,
+            `/community/upload/finish?communityId=${communityData.$id}`,
+            ExecutionMethod.POST
+          )
+          window.location.reload()
+        },
+        function (error) {
+          toast.dismiss(loadingToast)
+          if (error.type === 'storage_file_empty') {
+            toast.error('Missing file.')
+          } else if (error.type === 'storage_invalid_file_size') {
+            toast.error(
+              'The file size is either not valid or exceeds the maximum allowed size.'
+            )
+          } else if (error.type === 'storage_file_type_unsupported') {
+            toast.error('The given file extension is not supported.')
+          } else if (error.type === 'storage_invalid_file') {
+            toast.error(
+              'The uploaded file is invalid. Please check the file and try again.'
+            )
+          } else if (error.type === 'storage_device_not_found') {
+            toast.error('The requested storage device could not be found.')
+          } else {
+            toast.error('Failed to upload avatar.')
+            Sentry.captureException(error)
+          }
+        }
+      )
+
+      setIsUploading(false)
+    } catch (error) {
+      console.error(error)
+      toast.error('Failed to upload avatar.')
+      setIsUploading(false)
+    }
+  }
+
+  useDebounceEffect(
+    async () => {
+      if (
+        completedCrop?.width &&
+        completedCrop?.height &&
+        imgRef.current &&
+        previewCanvasRef.current
+      ) {
+        // We use canvasPreview as it's much faster than imgPreview.
+        await canvasPreview(
+          imgRef.current,
+          previewCanvasRef.current,
+          completedCrop,
+          scale,
+          rotate
+        )
+      }
+    },
+    100,
+    [completedCrop, scale, rotate]
+  )
+
+  const getAvatarImageUrl = (galleryId: string) => {
+    if (!galleryId) return
+    const imageId = storage.getFileView('community-avatars', `${galleryId}`)
+    return `${imageId.href}`
+  }
+
+  return (
+    <>
+      <span>Avatar image</span>
+      <div className="grid grid-cols-1 gap-x-6 gap-y-8 sm:max-w-xl sm:grid-cols-6">
+        <div className="col-span-full flex items-center gap-x-8">
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={
+              getAvatarImageUrl(communityData?.avatarId) ||
+              '/logos/Headpat_Logo_web_512x512_240518-03.png'
+            }
+            alt="Avatar"
+            className="h-24 w-24 flex-none rounded-lg object-cover"
+          />
+          <div className={'space-y-2'}>
+            <Input
+              ref={fileInputRef}
+              accept="image/*"
+              className="rounded-md px-3 py-2 text-sm font-semibold shadow-sm ring-1 ring-black/10 hover:bg-white/20 dark:ring-white/10"
+              type="file"
+              onChange={onSelectFile}
+            />
+            <div className="flex items-center justify-between">
+              <p className="text-xs text-gray-900 dark:text-gray-400">
+                JPG, PNG or WebP. 1MB max.
+              </p>
+            </div>
+            <p className="text-xs text-gray-900 dark:text-gray-400">
+              512x512 resolution recommended.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div className={'flex'}>
+        <AlertDialog onOpenChange={(open) => setOpen(open)} open={open}>
+          <AlertDialogContent className={'h-full lg:h-auto'}>
+            <ScrollArea className={'h-[500px] lg:h-[700px]'}>
+              <AlertDialogHeader>
+                <AlertDialogTitle>
+                  Welcome to the custom crop tool
+                </AlertDialogTitle>
+                <AlertDialogDescription>
+                  Please make sure your image is at least 512x512 resolution for
+                  the best results.
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <div>
+                {!!imgSrc && (
+                  <ReactCrop
+                    crop={crop}
+                    onChange={(_, percentCrop) => setCrop(percentCrop)}
+                    onComplete={(c) => setCompletedCrop(c)}
+                    aspect={aspect}
+                    maxHeight={750}
+                    keepSelection={true}
+                    className={''}
+                  >
+                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                    <img
+                      ref={imgRef}
+                      alt="Crop me"
+                      src={imgSrc}
+                      style={{
+                        transform: `scale(${scale}) rotate(${rotate}deg)`,
+                      }}
+                      onLoad={onImageLoad}
+                    />
+                  </ReactCrop>
+                )}
+                {!!completedCrop && (
+                  <div className={'hidden'}>
+                    <canvas
+                      ref={previewCanvasRef}
+                      style={{
+                        border: '1px solid black',
+                        objectFit: 'contain',
+                        width: completedCrop.width,
+                        height: completedCrop.height,
+                      }}
+                    />
+                  </div>
+                )}
+              </div>
+            </ScrollArea>
+            <AlertDialogFooter>
+              <AlertDialogCancel
+                onClick={() => {
+                  fileInputRef.current.value = '' // Reset the input field
+                }}
+              >
+                Cancel
+              </AlertDialogCancel>
+              <AlertDialogAction
+                onClick={onUploadCropClick}
+                disabled={isUploading}
+              >
+                Submit
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      </div>
+    </>
+  )
+}
diff --git a/src/components/community/uploadBanner.tsx b/src/components/community/uploadBanner.tsx
new file mode 100644
index 0000000..31e8bfc
--- /dev/null
+++ b/src/components/community/uploadBanner.tsx
@@ -0,0 +1,322 @@
+'use client'
+import React, { useState, useRef } from 'react'
+
+import ReactCrop, { Crop, PixelCrop } from 'react-image-crop'
+import { canvasPreview } from '../gallery/upload/canvasPreview'
+import { useDebounceEffect } from '../gallery/upload/useDebounceEffect'
+
+import 'react-image-crop/dist/ReactCrop.css'
+import { databases, functions, storage } from '@/app/appwrite-client'
+import { toast } from 'sonner'
+import { Input } from '@/components/ui/input'
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog'
+import { Community } from '@/utils/types/models'
+import * as Sentry from '@sentry/nextjs'
+import {
+  centerAspectCrop,
+  createBlob,
+} from '@/components/gallery/upload/uploadHelper'
+import { UploadFileServer } from '@/utils/actions/community/uploadFileServer'
+import { ExecutionMethod, ID } from 'node-appwrite'
+
+export default function UploadBanner({
+  isUploading,
+  setIsUploading,
+  communityData,
+}) {
+  const [imgSrc, setImgSrc] = useState('')
+  const previewCanvasRef = useRef<HTMLCanvasElement>(null)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const imgRef = useRef<HTMLImageElement>(null)
+  const [crop, setCrop] = useState<Crop>()
+  const [completedCrop, setCompletedCrop] = useState<PixelCrop>()
+  const [type, setType] = useState('image/png')
+  const [name, setName] = useState('')
+  const [open, setOpen] = useState(false)
+  const scale = 1
+  const rotate = 0
+  const aspect = 4.8
+  const maxSizeInBytes = 5 * 1024 * 1024 // 5 MB
+
+  function onSelectFile(e: React.ChangeEvent<HTMLInputElement>) {
+    if (e.target.files && e.target.files.length > 0) {
+      const file = e.target.files[0]
+
+      setOpen(true)
+      setCrop(undefined) // Makes crop preview update between images.
+      const reader = new FileReader()
+      reader.addEventListener('load', () =>
+        setImgSrc(reader.result?.toString() || '')
+      )
+      setType(file.type)
+      setName(file.name)
+      reader.readAsDataURL(file)
+    }
+  }
+
+  function onImageLoad(e: React.SyntheticEvent<HTMLImageElement>) {
+    if (aspect) {
+      const { width, height } = e.currentTarget
+      setCrop(centerAspectCrop(width, height, aspect))
+    }
+  }
+
+  async function onUploadCropClick() {
+    const blob = await createBlob(imgRef, previewCanvasRef, completedCrop, type)
+    const loadingToast = toast.loading('Uploading avatar...')
+
+    // Upload the blob to your server or storage service
+    const formData = new FormData()
+    formData.append('file', blob, name || 'Unnamed')
+
+    try {
+      const file = formData.get('file') as File
+
+      if (file.size > maxSizeInBytes) {
+        toast.error('File size exceeds the 5 MB limit.')
+        if (fileInputRef.current) {
+          fileInputRef.current.value = '' // Reset the input field
+        }
+        return
+      }
+
+      setIsUploading(true) // Set isUploading to true before making the API call
+
+      const data = await functions.createExecution(
+        'community-endpoints',
+        '',
+        false,
+        `/community/upload?communityId=${communityData.$id}&type=banner`,
+        ExecutionMethod.POST
+      )
+      const response = JSON.parse(data.responseBody)
+
+      if (response.type === 'community_upload_missing_id') {
+        toast.error('Community ID is missing. Please try again later.')
+        return toast.dismiss(loadingToast)
+      } else if (response.type === 'unauthorized') {
+        toast.error('You are not authorized to upload.')
+        return toast.dismiss(loadingToast)
+      } else if (response.type === 'community_upload_missing_type') {
+        toast.error('Missing upload type. Please try again later.')
+        return toast.dismiss(loadingToast)
+      }
+
+      // Get the user's banner document
+      const bannerDocument: Community.CommunityDocumentsType =
+        await databases.getDocument('hp_db', 'community', communityData.$id)
+      // If the user already has an banner, delete it
+      if (bannerDocument.bannerId) {
+        // Delete the old banner
+        await storage
+          .deleteFile('community-banners', bannerDocument.bannerId)
+          .catch((error) => {
+            //console.error(error)
+            Sentry.captureException('Failed to delete old banner.', error)
+          })
+      }
+
+      // Upload the new banner
+      const fileData = storage.createFile(
+        'community-banners',
+        ID.unique(),
+        file
+      )
+
+      fileData.then(
+        async function (response) {
+          // Update the user's avatarId
+          await databases.updateDocument(
+            'hp_db',
+            'community',
+            communityData.$id,
+            {
+              bannerId: response.$id,
+            }
+          )
+
+          toast.dismiss(loadingToast)
+          toast.success('Your banner has been uploaded successfully.')
+          setImgSrc(getBannerImageUrl(response.$id))
+
+          await functions.createExecution(
+            'community-endpoints',
+            '',
+            true,
+            `/community/upload/finish?communityId=${communityData.$id}`,
+            ExecutionMethod.POST
+          )
+          window.location.reload()
+        },
+        function (error) {
+          toast.dismiss(loadingToast)
+          if (error.type === 'storage_file_empty') {
+            toast.error('Missing file.')
+          } else if (error.type === 'storage_invalid_file_size') {
+            toast.error(
+              'The file size is either not valid or exceeds the maximum allowed size.'
+            )
+          } else if (error.type === 'storage_file_type_unsupported') {
+            toast.error('The given file extension is not supported.')
+          } else if (error.type === 'storage_invalid_file') {
+            toast.error(
+              'The uploaded file is invalid. Please check the file and try again.'
+            )
+          } else if (error.type === 'storage_device_not_found') {
+            toast.error('The requested storage device could not be found.')
+          } else {
+            toast.error('Failed to upload avatar.')
+            Sentry.captureException(error)
+          }
+        }
+      )
+
+      setIsUploading(false)
+    } catch (error) {
+      console.error(error)
+      toast.error('Failed to upload banner.')
+      setIsUploading(false)
+    }
+  }
+
+  useDebounceEffect(
+    async () => {
+      if (
+        completedCrop?.width &&
+        completedCrop?.height &&
+        imgRef.current &&
+        previewCanvasRef.current
+      ) {
+        // We use canvasPreview as it's much faster than imgPreview.
+        await canvasPreview(
+          imgRef.current,
+          previewCanvasRef.current,
+          completedCrop,
+          scale,
+          rotate
+        )
+      }
+    },
+    100,
+    [completedCrop, scale, rotate]
+  )
+
+  const getBannerImageUrl = (profileBannerId: string) => {
+    if (!profileBannerId) return
+    const imageId = storage.getFileView(
+      'community-banners',
+      `${profileBannerId}`
+    )
+    return imageId.href
+  }
+
+  return (
+    <>
+      <span>Banner image</span>
+      <div className="grid grid-cols-1 gap-x-6 gap-y-8 sm:max-w-xl sm:grid-cols-6">
+        <div className="col-span-full flex items-center gap-x-8">
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={
+              getBannerImageUrl(communityData?.bannerId) ||
+              '/logos/Headpat_Logo_web_512x512_240518-03.png'
+            }
+            alt="Banner"
+            className="h-24 w-24 flex-none rounded-lg object-cover"
+          />
+          <div className={'space-y-2'}>
+            <Input
+              ref={fileInputRef}
+              accept="image/*"
+              className="rounded-md px-3 py-2 text-sm font-semibold shadow-sm ring-1 ring-black/10 hover:bg-white/20 dark:ring-white/10"
+              type="file"
+              onChange={onSelectFile}
+            />
+            <div className="flex items-center justify-between">
+              <p className="text-xs text-gray-900 dark:text-gray-400">
+                JPG, PNG or WebP. 5MB max.
+              </p>
+            </div>
+            <p className="text-xs text-gray-900 dark:text-gray-400">
+              1200x250 resolution recommended.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div className={'flex'}>
+        <AlertDialog onOpenChange={(open) => setOpen(open)} open={open}>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>
+                Welcome to the custom crop tool
+              </AlertDialogTitle>
+              <AlertDialogDescription>
+                Please make sure your image is at least 1200x250 resolution for
+                the best results.
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            {!!imgSrc && (
+              <ReactCrop
+                crop={crop}
+                onChange={(_, percentCrop) => setCrop(percentCrop)}
+                onComplete={(c) => setCompletedCrop(c)}
+                aspect={aspect}
+                maxHeight={750}
+                keepSelection={true}
+                className={''}
+              >
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img
+                  ref={imgRef}
+                  alt="Crop me"
+                  src={imgSrc}
+                  style={{ transform: `scale(${scale}) rotate(${rotate}deg)` }}
+                  onLoad={onImageLoad}
+                />
+              </ReactCrop>
+            )}
+            {!!completedCrop && (
+              <div className={'hidden'}>
+                <canvas
+                  ref={previewCanvasRef}
+                  style={{
+                    border: '1px solid black',
+                    objectFit: 'contain',
+                    width: completedCrop.width,
+                    height: completedCrop.height,
+                  }}
+                />
+              </div>
+            )}
+            <AlertDialogFooter>
+              <AlertDialogCancel
+                onClick={() => {
+                  fileInputRef.current.value = '' // Reset the input field
+                }}
+              >
+                Cancel
+              </AlertDialogCancel>
+              <AlertDialogAction
+                onClick={onUploadCropClick}
+                disabled={isUploading}
+              >
+                Submit
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      </div>
+    </>
+  )
+}
diff --git a/src/navigation.ts b/src/navigation.ts
index d07c38b..0e2760d 100644
--- a/src/navigation.ts
+++ b/src/navigation.ts
@@ -16,6 +16,7 @@ export const pathnames = {
   '/gallery/[galleryId]': '/gallery/[galleryId]',
   '/community': '/community',
   '/community/[communityId]': '/community/[communityId]',
+  '/community/[communityId]/admin': '/community/[communityId]/admin',
   '/community/[communityId]/followers': '/community/[communityId]/followers',
   '/community/[communityId]/events': '/community/[communityId]/events',
   '/community/[communityId]/events/[eventId]':
diff --git a/src/utils/actions/community/checkRoles.ts b/src/utils/actions/community/checkRoles.ts
new file mode 100644
index 0000000..a1e0c22
--- /dev/null
+++ b/src/utils/actions/community/checkRoles.ts
@@ -0,0 +1,14 @@
+export async function hasAdminPanelAccess(roles: string[]): Promise<boolean> {
+  if (!roles) return
+  return (
+    roles.includes('owner') ||
+    roles.includes('manage-general') ||
+    roles.includes('manage-settings')
+  )
+}
+
+export async function hasModeratorPanelAccess(
+  roles: string[]
+): Promise<boolean> {
+  return roles.includes('moderation')
+}
diff --git a/src/utils/actions/community/uploadBannerServer.ts b/src/utils/actions/community/uploadBannerServer.ts
new file mode 100644
index 0000000..fa7a72c
--- /dev/null
+++ b/src/utils/actions/community/uploadBannerServer.ts
@@ -0,0 +1,7 @@
+'use server'
+import { ID } from 'node-appwrite'
+import { storage } from '@/app/appwrite-server'
+
+export async function UploadBannerServer(file: any) {
+  return await storage.createFile('community-banners', ID.unique(), file)
+}
diff --git a/src/utils/actions/community/uploadFileServer.ts b/src/utils/actions/community/uploadFileServer.ts
new file mode 100644
index 0000000..9b60890
--- /dev/null
+++ b/src/utils/actions/community/uploadFileServer.ts
@@ -0,0 +1,9 @@
+'use server'
+import { ID } from 'node-appwrite'
+import { storage } from '@/app/appwrite-server'
+
+export async function UploadFileServer(bucket: string, file: File) {
+  return await storage.createFile(bucket, ID.unique(), file).catch((error) => {
+    return JSON.parse(JSON.stringify(error))
+  })
+}
diff --git a/src/utils/types/models.ts b/src/utils/types/models.ts
index 77f9409..8600678 100644
--- a/src/utils/types/models.ts
+++ b/src/utils/types/models.ts
@@ -113,6 +113,10 @@ export namespace UserData {
      * The user's location.
      */
     location: string | null
+    /**
+     * The user's badges.
+     */
+    badges: string[]
     /**
      * The user's followers count.
      */
@@ -447,11 +451,6 @@ export namespace Community {
      * The description of the community.
      */
     description: string
-    /**
-     * If the community is nsfw.
-     * @default false
-     */
-    nsfw: boolean
     /**
      * The tags of the community for searching.
      */
@@ -474,6 +473,26 @@ export namespace Community {
     followersCount: number
   }
 
+  export interface CommunitySettingsType {
+    total: number
+    documents: CommunitySettingsDocumentsType[]
+  }
+
+  export interface CommunitySettingsDocumentsType extends Models.Document {
+    /**
+     * If the community is indexed by search engines and findable.
+     */
+    isFindable: boolean
+    /**
+     * If the community is publicly accessible.
+     */
+    hasPublicPage: boolean
+    /**
+     * If the community is nsfw.
+     */
+    nsfw: boolean
+  }
+
   export interface CommunityFollowersType {
     total: number
     documents: CommunityFollowersDocuments[]