diff --git a/src/components/data-not-avaiable.tsx b/src/components/data-not-avaiable.tsx
new file mode 100644
index 0000000..e80d611
--- /dev/null
+++ b/src/components/data-not-avaiable.tsx
@@ -0,0 +1,9 @@
+const DateNotAvailable = ({ text = " No data available to show" }) => {
+  return (
+    <div className="flex flex-col md:flex-row flex-wrap gap-2.5 w-full items-center justify-center text-rose-500">
+      {text}
+    </div>
+  );
+};
+
+export default DateNotAvailable;
diff --git a/src/components/editor/artical-info.tsx b/src/components/editor/artical-info.tsx
new file mode 100644
index 0000000..f8d2c7d
--- /dev/null
+++ b/src/components/editor/artical-info.tsx
@@ -0,0 +1,272 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { Calendar, User, X } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Button } from "@/components/ui/button";
+import type { ContentManagement } from "@/types";
+import { useAdminData } from "@/store/hooks/users/useAdminData";
+
+interface ArticleInfoProps {
+  contentData: ContentManagement;
+  onContentDataChange: (updates: Partial<ContentManagement>) => void;
+}
+
+export const ArticleInfo = ({
+  contentData,
+  onContentDataChange,
+}: ArticleInfoProps) => {
+  // Add keyword
+  const addKeyword = (keyword: string) => {
+    if (keyword.trim() && !contentData.keywords.includes(keyword.trim())) {
+      onContentDataChange({
+        keywords: [...contentData.keywords, keyword.trim()],
+      });
+    }
+  };
+
+  // Remove keyword
+  const removeKeyword = (keyword: string) => {
+    onContentDataChange({
+      keywords: contentData.keywords.filter((k) => k !== keyword),
+    });
+  };
+
+  // Handle Enter key for keywords
+  const handleKeywordKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      const target = e.target as HTMLInputElement;
+      addKeyword(target.value);
+      target.value = "";
+    }
+  };
+
+  const { adminInfo, error, loading } = useAdminData();
+
+  if (loading) return <div className="p-4">Loading...</div>;
+  if (error) return <div className="p-4">Error loading data</div>;
+
+  return (
+    <div className="h-full border rounded-lg bg-muted/30 p-4 overflow-y-auto">
+      <div className="space-y-6">
+        {/* Status Info */}
+        <div className="space-y-3">
+          <h3 className="font-semibold text-sm">Article Status</h3>
+
+          <div className="flex items-center gap-2">
+            <Badge
+              variant={
+                contentData.status === "Published" ? "default" : "secondary"
+              }
+            >
+              {contentData.status || "Draft"}
+            </Badge>
+            {contentData.category && (
+              <Badge variant="outline">{contentData.category}</Badge>
+            )}
+          </div>
+
+          <div className="space-y-2 text-xs text-muted-foreground">
+            <div className="flex items-center gap-2">
+              <Calendar className="w-3 h-3" />
+              <span>{new Date().toLocaleDateString()}</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <User className="w-3 h-3" />
+              <span>
+                {adminInfo?.firstname} {adminInfo?.lastname}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {/* Basic Info */}
+        <div className="space-y-4">
+          <h3 className="font-semibold text-sm">Basic Information</h3>
+
+          <div className="space-y-3">
+            <div>
+              <Label htmlFor="title" className="text-xs">
+                Title
+              </Label>
+              <Input
+                id="title"
+                name="title"
+                value={contentData.title || ""}
+                onChange={(e) => onContentDataChange({ title: e.target.value })}
+                placeholder="Article title"
+                className="mt-1"
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="subtitle" className="text-xs">
+                Subtitle
+              </Label>
+              <Input
+                id="subtitle"
+                name="subtitle"
+                value={contentData.subtitle || ""}
+                onChange={(e) =>
+                  onContentDataChange({ subtitle: e.target.value })
+                }
+                placeholder="Subtitle (optional)"
+                className="mt-1"
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="coverimage" className="text-xs">
+                Cover Image
+              </Label>
+              <Input
+                id="coverimage"
+                name="coverimage"
+                type="file"
+                accept="image/*"
+                onChange={(e) => {
+                  const file = e.target.files?.[0];
+                  if (file) {
+                    const url = URL.createObjectURL(file);
+                    onContentDataChange({ coverimage: url });
+                  }
+                }}
+                className="mt-1"
+              />
+              {contentData.coverimage && (
+                <div className="mt-2">
+                  <img
+                    src={contentData.coverimage}
+                    alt="Cover"
+                    className="w-full h-20 object-cover rounded"
+                  />
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="mt-1 w-full text-xs"
+                    onClick={() => onContentDataChange({ coverimage: null })}
+                  >
+                    Remove
+                  </Button>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* SEO */}
+        <div className="space-y-4">
+          <h3 className="font-semibold text-sm">SEO Settings</h3>
+
+          <div className="space-y-3">
+            <div>
+              <Label htmlFor="metaTitle" className="text-xs">
+                Meta Title
+              </Label>
+              <Input
+                id="metaTitle"
+                name="metaTitle"
+                value={contentData.metaTitle || ""}
+                onChange={(e) =>
+                  onContentDataChange({ metaTitle: e.target.value })
+                }
+                placeholder="SEO title"
+                maxLength={60}
+                className="mt-1"
+              />
+              <div className="text-xs text-muted-foreground mt-1">
+                {(contentData.metaTitle || "").length}/60
+              </div>
+            </div>
+
+            <div>
+              <Label htmlFor="metaDescription" className="text-xs">
+                Meta Description
+              </Label>
+              <Textarea
+                id="metaDescription"
+                name="metaDescription"
+                value={contentData.metaDescription || ""}
+                onChange={(e) =>
+                  onContentDataChange({ metaDescription: e.target.value })
+                }
+                placeholder="SEO description"
+                maxLength={155}
+                rows={2}
+                className="mt-1"
+              />
+              <div className="text-xs text-muted-foreground mt-1">
+                {(contentData.metaDescription || "").length}/155
+              </div>
+            </div>
+
+            <div>
+              <Label htmlFor="slug" className="text-xs">
+                URL Slug
+              </Label>
+              <Input
+                id="slug"
+                name="slug"
+                value={contentData.slug || ""}
+                onChange={(e) => onContentDataChange({ slug: e.target.value })}
+                placeholder="url-slug"
+                className="mt-1"
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="focusKeyword" className="text-xs">
+                Focus Keyword
+              </Label>
+              <Input
+                id="focusKeyword"
+                name="focusKeyword"
+                value={contentData.focusKeyword || ""}
+                onChange={(e) =>
+                  onContentDataChange({ focusKeyword: e.target.value })
+                }
+                placeholder="Main keyword"
+                className="mt-1"
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="keywords" className="text-xs">
+                Keywords
+              </Label>
+              <Input
+                id="keywords"
+                name="keywords"
+                placeholder="Add keyword (Enter to add)"
+                onKeyDown={handleKeywordKeyPress}
+                className="mt-1"
+              />
+              <div className="flex flex-wrap gap-1 mt-2">
+                {contentData.keywords
+                  .filter((k) => k !== "")
+                  .map((keyword) => (
+                    <Badge
+                      key={keyword}
+                      variant="secondary"
+                      className="text-xs"
+                    >
+                      {keyword}
+                      <button
+                        className="ml-1 hover:bg-destructive/20 rounded-full"
+                        onClick={() => removeKeyword(keyword)}
+                      >
+                        <X className="w-2 h-2" />
+                      </button>
+                    </Badge>
+                  ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/editor/content-sidebar.tsx b/src/components/editor/content-sidebar.tsx
deleted file mode 100644
index 0feff91..0000000
--- a/src/components/editor/content-sidebar.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-"use client";
-
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { SeoFields } from "./seo-fields";
-import type { SeoData } from "./seo-fields";
-import { CoverImageUploader } from "@/features/content-management/cover-image";
-import { TitleInput } from "@/features/content-management/title-input";
-import { SubtitleInput } from "@/features/content-management/subtitle-input";
-import { Badge } from "@/components/ui/badge";
-import { Calendar, User } from "lucide-react";
-
-interface ContentSidebarProps {
-  title: string;
-  subtitle: string;
-  showSubtitle: boolean;
-  coverImage: string | null;
-  seoData: SeoData;
-  onTitleChange: (title: string) => void;
-  onSubtitleChange: (subtitle: string) => void;
-  onShowSubtitle: (show: boolean) => void;
-  onImageUpload: (file: File, url: string) => void;
-  onRemoveImage: () => void;
-  onSeoChange: (field: keyof SeoData, value: string | string[]) => void;
-  content: string;
-  status: string;
-  category: string;
-}
-
-export const ContentSidebar = ({
-  title,
-  subtitle,
-  showSubtitle,
-  coverImage,
-  seoData,
-  onTitleChange,
-  onSubtitleChange,
-  onShowSubtitle,
-  onImageUpload,
-  onRemoveImage,
-  onSeoChange,
-  content,
-  status,
-  category,
-}: ContentSidebarProps) => {
-  return (
-    <div className="w-full border rounded-md bg-muted/30 p-4 overflow-y-auto">
-      <Tabs defaultValue="content" className="space-y-4">
-        <TabsList className="grid w-full grid-cols-2">
-          <TabsTrigger value="content">Content</TabsTrigger>
-          <TabsTrigger value="seo">SEO</TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="content" className="space-y-6">
-          {/* Article Info */}
-          <div className="space-y-4 p-4 border rounded-lg bg-card">
-            <h3 className="font-semibold">Article Information</h3>
-
-            <div className="space-y-3">
-              <div className="flex items-center gap-2 text-sm">
-                <Badge
-                  variant={status === "Published" ? "default" : "secondary"}
-                >
-                  {status}
-                </Badge>
-                <Badge variant="outline">{category}</Badge>
-              </div>
-
-              <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                <Calendar className="w-4 h-4" />
-                <span>Created: {new Date().toLocaleDateString()}</span>
-              </div>
-
-              <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                <User className="w-4 h-4" />
-                <span>Author: Admin</span>
-              </div>
-            </div>
-          </div>
-
-          {/* Title & Subtitle */}
-          <div className="space-y-4">
-            <h3 className="font-semibold">Title & Subtitle</h3>
-            <TitleInput
-              value={title}
-              onChange={onTitleChange}
-              placeholder="Enter article title"
-            />
-            <SubtitleInput
-              value={subtitle}
-              onChange={onSubtitleChange}
-              showInput={showSubtitle}
-              onShowInput={onShowSubtitle}
-            />
-          </div>
-
-          {/* Cover Image */}
-          <div>
-            <h3 className="font-semibold mb-4">Cover Image</h3>
-            <CoverImageUploader
-              coverImage={coverImage}
-              onImageUpload={onImageUpload}
-              onRemoveImage={onRemoveImage}
-            />
-          </div>
-        </TabsContent>
-
-        <TabsContent value="seo">
-          <SeoFields
-            seoData={seoData}
-            onSeoChange={onSeoChange}
-            title={title}
-            content={content}
-          />
-        </TabsContent>
-      </Tabs>
-    </div>
-  );
-};
diff --git a/src/components/editor/editor-header.tsx b/src/components/editor/editor-header.tsx
index 4abe3cb..68eae89 100644
--- a/src/components/editor/editor-header.tsx
+++ b/src/components/editor/editor-header.tsx
@@ -18,11 +18,13 @@ interface EditorHeaderProps {
   onCategoryChange: (category: string) => void;
   onPreview: () => void;
   onSave: () => void;
+  loading: boolean;
   onPublish: () => void;
 }
 
 export const EditorHeader = ({
   status,
+  loading,
   category,
   isPreview,
   onBack,
@@ -52,10 +54,11 @@ export const EditorHeader = ({
                 <SelectValue placeholder="Select category" />
               </SelectTrigger>
               <SelectContent>
-                <SelectItem value="Academic">Academic</SelectItem>
-                <SelectItem value="Events">Events</SelectItem>
-                <SelectItem value="Facilities">Facilities</SelectItem>
-                <SelectItem value="Maintenance">Maintenance</SelectItem>
+                <SelectItem value="ACADEMIC">Academic</SelectItem>
+                <SelectItem value="EVENTS">Events</SelectItem>
+                <SelectItem value="FACILITIES">Facilities</SelectItem>
+                <SelectItem value="NEWS">News</SelectItem>
+                <SelectItem value="ANNOUNCEMENTS">Announcement</SelectItem>
               </SelectContent>
             </Select>
 
@@ -66,15 +69,15 @@ export const EditorHeader = ({
 
             <Button variant="outline" size="sm" onClick={onSave}>
               <Save className="w-4 h-4" />
-              Save Draft
+              {loading ? "Saving" : "Save Draft"}
             </Button>
 
             <Button size="sm" onClick={onPublish}>
-              Publish
+              {loading ? "Publishing" : "Publish"}
             </Button>
           </div>
         </div>
       </div>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/src/components/editor/editor-layout.tsx b/src/components/editor/editor-layout.tsx
index 949b6d6..af8ea4f 100644
--- a/src/components/editor/editor-layout.tsx
+++ b/src/components/editor/editor-layout.tsx
@@ -1,59 +1,66 @@
 import { TiptapEditor } from "@/components/editor/tiptap-editor";
-import { ContentPreview } from "@/features/content-management/content-preview";
-import { ContentSidebar } from "./content-sidebar";
+import { ArticleInfo } from "./artical-info";
+import ContentPreview from "@/features/content-management/content-preview";
+import type { ContentManagement } from "@/types";
+import { useAdminData } from "@/store/hooks/users/useAdminData";
 
 interface EditorLayoutProps {
-  mode: "simple";
   isPreview: boolean;
   content: string;
   onContentChange: (content: string) => void;
+  contentData: ContentManagement;
+  onContentDataChange: (updates: Partial<ContentManagement>) => void;
 }
 
 export const EditorLayout = ({
   isPreview,
   content,
   onContentChange,
+  contentData,
+  onContentDataChange,
 }: EditorLayoutProps) => {
-  // Simple Mode Layout - Content First
+  const { adminInfo } = useAdminData();
+  if (isPreview) {
+    return (
+      <div className="bg-background border rounded-lg">
+        <ContentPreview
+          content={content}
+          category={contentData.category}
+          coverImage={contentData.coverimage}
+          status={contentData.status}
+          subtitle={contentData.subtitle}
+          title={contentData.title}
+          author={
+            adminInfo ? `${adminInfo.firstname} ${adminInfo.lastname}` : "Admin"
+          }
+          createdAt={new Date().toLocaleDateString()}
+        />
+      </div>
+    );
+  }
+
+  // Show edit mode with sidebar + editor
   return (
-    <div className="space-y-6">
-      {isPreview ? (
-        <div className="bg-background border rounded-lg p-6">
-          <ContentPreview content={content} />
-        </div>
-      ) : (
-        <>
-          <ContentSidebar
-            category="caretgory"
-            content="content"
-            coverImage={""}
-            onImageUpload={() => {}}
-            onRemoveImage={() => {}}
-            onSeoChange={() => {}}
-            onShowSubtitle={() => {}}
-            onSubtitleChange={() => {}}
-            onTitleChange={() => {}}
-            seoData={{
-              metaTitle: "string",
-              metaDescription: "string",
-              keywords: ["blog", "title"],
-              focusKeyword: "string",
-              slug: "string",
-            }}
-            showSubtitle
-            status="published"
-            subtitle="subtitle"
-            title="title"
-          />
+    <div className="flex gap-6 flex-col md:flex-row">
+      <div className="w-80 flex-shrink-0">
+        <ArticleInfo
+          contentData={contentData}
+          onContentDataChange={onContentDataChange}
+        />
+      </div>
+
+      {/* Right Side - Editor */}
+      <div className="flex-1">
+        <div className="h-full rounded-lg">
           <TiptapEditor
             content={content}
             onChange={onContentChange}
-            placeholder="Start writing your content..."
-            className="min-h-[500px]"
+            placeholder="Start writing your article..."
+            className="h-full"
             mode="simple"
           />
-        </>
-      )}
+        </div>
+      </div>
     </div>
   );
 };
diff --git a/src/components/editor/editor-toolbar.tsx b/src/components/editor/editor-toolbar.tsx
index 42d0b38..c1956a0 100644
--- a/src/components/editor/editor-toolbar.tsx
+++ b/src/components/editor/editor-toolbar.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { AiTools } from "./toolbar/ai-tools";
 import { FormattingTools } from "./toolbar/formatting-tools";
 import { HeadingTools } from "./toolbar/heading-tools";
 import { ListTools } from "./toolbar/list-tools";
@@ -18,7 +17,6 @@ export const EditorToolbar = ({ editor }: EditorToolbarProps) => {
   return (
     <div className="sticky top-16 z-10 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border rounded-t-lg mb-0 p-3">
       <div className="flex flex-wrap gap-2">
-        <AiTools editor={editor} />
         <FormattingTools editor={editor} />
         <HeadingTools editor={editor} />
         <ListTools editor={editor} />
diff --git a/src/components/editor/seo-fields.tsx b/src/components/editor/seo-fields.tsx
deleted file mode 100644
index e28cf87..0000000
--- a/src/components/editor/seo-fields.tsx
+++ /dev/null
@@ -1,163 +0,0 @@
-"use client";
-
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { X } from "lucide-react";
-
-export interface SeoData {
-  metaTitle: string;
-  metaDescription: string;
-  slug: string;
-  keywords: string[];
-  focusKeyword: string;
-}
-
-interface SeoFieldsProps {
-  seoData: SeoData;
-  onSeoChange: (field: keyof SeoData, value: string | string[]) => void;
-  title: string;
-  content: string;
-}
-
-export const SeoFields = ({
-  seoData,
-  onSeoChange,
-  title,
-  content,
-}: SeoFieldsProps) => {
-  const addKeyword = (keyword: string) => {
-    if (keyword.trim() && !seoData.keywords.includes(keyword.trim())) {
-      onSeoChange("keywords", [...seoData.keywords, keyword.trim()]);
-    }
-  };
-
-  const removeKeyword = (keyword: string) => {
-    onSeoChange(
-      "keywords",
-      seoData.keywords.filter((k) => k !== keyword)
-    );
-  };
-
-  const generateSlug = (title: string) => {
-    return title
-      .toLowerCase()
-      .replace(/[^a-z0-9]+/g, "-")
-      .replace(/^-+|-+$/g, "");
-  };
-
-  const handleKeywordKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Enter") {
-      e.preventDefault();
-      const target = e.target as HTMLInputElement;
-      addKeyword(target.value);
-      target.value = "";
-    }
-  };
-
-  // Auto-generate suggestions
-  const autoFillSuggestions = () => {
-    if (title && !seoData.metaTitle) {
-      onSeoChange("metaTitle", title);
-    }
-    if (title && !seoData.slug) {
-      onSeoChange("slug", generateSlug(title));
-    }
-    if (content && !seoData.metaDescription) {
-      const plainText = content.replace(/<[^>]*>/g, "").substring(0, 155);
-      onSeoChange("metaDescription", plainText);
-    }
-  };
-
-  return (
-    <div className="space-y-6 p-6 border rounded-lg bg-card">
-      <div className="flex items-center justify-between">
-        <h3 className="text-lg font-semibold">SEO Settings</h3>
-        <Button variant="outline" size="sm" onClick={autoFillSuggestions}>
-          Auto-fill suggestions
-        </Button>
-      </div>
-
-      {/* Basic SEO */}
-      <div className="space-y-4">
-        <div className="space-y-3">
-          <Label htmlFor="meta-title">Meta Title</Label>
-          <Input
-            id="meta-title"
-            value={seoData.metaTitle}
-            onChange={(e) => onSeoChange("metaTitle", e.target.value)}
-            placeholder="Enter meta title (60 characters recommended)"
-            maxLength={60}
-          />
-          <div className="text-xs text-muted-foreground mt-1">
-            {seoData.metaTitle.length}/60 characters
-          </div>
-        </div>
-
-        <div className="space-y-3">
-          <Label htmlFor="meta-description">Meta Description</Label>
-          <Textarea
-            id="meta-description"
-            value={seoData.metaDescription}
-            onChange={(e) => onSeoChange("metaDescription", e.target.value)}
-            placeholder="Enter meta description (155 characters recommended)"
-            maxLength={155}
-            rows={3}
-          />
-          <div className="text-xs text-muted-foreground mt-1">
-            {seoData.metaDescription.length}/155 characters
-          </div>
-        </div>
-
-        <div className="space-y-3">
-          <Label htmlFor="slug">URL Slug</Label>
-          <Input
-            id="slug"
-            value={seoData.slug}
-            onChange={(e) => onSeoChange("slug", e.target.value)}
-            placeholder="url-slug"
-          />
-        </div>
-
-        <div className="space-y-3">
-          <Label htmlFor="focus-keyword">Focus Keyword</Label>
-          <Input
-            id="focus-keyword"
-            value={seoData.focusKeyword}
-            onChange={(e) => onSeoChange("focusKeyword", e.target.value)}
-            placeholder="main keyword for this content"
-          />
-        </div>
-
-        <div className="space-y-3">
-          <Label>Keywords</Label>
-          <Input
-            placeholder="Type a keyword and press Enter"
-            onKeyDown={handleKeywordKeyPress}
-          />
-          <div className="flex flex-wrap gap-2 mt-2">
-            {seoData.keywords.map((keyword) => (
-              <Badge
-                key={keyword}
-                variant="secondary"
-                className="flex items-center gap-1"
-              >
-                {keyword}
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="h-auto p-0 w-4 " //h-4
-                  onClick={() => removeKeyword(keyword)}
-                >
-                  <X className="w-3 h-3" />
-                </Button>
-              </Badge>
-            ))}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/src/components/editor/toolbar/ai-tools.tsx b/src/components/editor/toolbar/ai-tools.tsx
deleted file mode 100644
index 76e42dd..0000000
--- a/src/components/editor/toolbar/ai-tools.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Button } from "@/components/ui/button";
-import { Sparkles, PenTool, FileText } from "lucide-react";
-import { toast } from "sonner";
-
-interface AiToolsProps {
-  editor: any;
-}
-
-export const AiTools = ({ editor }: AiToolsProps) => {
-  const [isLoading, setIsLoading] = useState(false);
-
-  const enhanceWithAI = async (
-    action: "improve" | "continue" | "summarize"
-  ) => {
-    if (!editor || isLoading) return;
-
-    const selectedText = editor.state.doc.textBetween(
-      editor.state.selection.from,
-      editor.state.selection.to
-    );
-    const contextText = selectedText || editor.getText();
-
-    if (!contextText.trim()) {
-      toast.error("Please select text or write something to enhance with AI");
-      return;
-    }
-
-    setIsLoading(true);
-    try {
-      await new Promise((resolve) => setTimeout(resolve, 1000));
-
-      let enhancedText = "";
-      switch (action) {
-        case "improve":
-          enhancedText = `Enhanced: ${contextText}`;
-          break;
-        case "continue":
-          enhancedText = `${contextText}\n\nContinued with AI-generated content...`;
-          break;
-        case "summarize":
-          enhancedText = `Summary: ${contextText.substring(0, 50)}...`;
-          break;
-      }
-
-      if (selectedText) {
-        editor.chain().focus().insertContent(enhancedText).run();
-      } else {
-        editor.chain().focus().insertContent(`\n\n${enhancedText}`).run();
-      }
-
-      toast.success(`Text ${action}d with AI`);
-    } catch (error) {
-      toast.error("AI enhancement failed");
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  return (
-    <div className="flex items-center gap-1 border-r pr-2">
-      <Button
-        variant="outline"
-        size="sm"
-        onClick={() => enhanceWithAI("improve")}
-        disabled={isLoading}
-        className="h-8"
-      >
-        <Sparkles className="w-4 h-4 mr-1" />
-        {isLoading ? "AI..." : "Improve"}
-      </Button>
-      <Button
-        variant="outline"
-        size="sm"
-        onClick={() => enhanceWithAI("continue")}
-        disabled={isLoading}
-        className="h-8"
-      >
-        <PenTool className="w-4 h-4 mr-1" />
-        Continue
-      </Button>
-      <Button
-        variant="outline"
-        size="sm"
-        onClick={() => enhanceWithAI("summarize")}
-        disabled={isLoading}
-        className="h-8"
-      >
-        <FileText className="w-4 h-4 mr-1" />
-        Summarize
-      </Button>
-    </div>
-  );
-};
diff --git a/src/components/route-protection/auth-protected-route.tsx b/src/components/route-protection/auth-protected-route.tsx
index 3f57f9f..54b9d04 100644
--- a/src/components/route-protection/auth-protected-route.tsx
+++ b/src/components/route-protection/auth-protected-route.tsx
@@ -1,19 +1,3 @@
-// // auth-protected-route.tsx
-// import React from "react";
-// import { ProtectedRoute } from "@/components/route-protection/protected-route";
-
-// interface AuthProtectedRouteProps {
-//   children: React.ReactNode;
-// }
-
-// export const AuthProtectedRoute: React.FC<AuthProtectedRouteProps> = ({
-//   children,
-// }) => {
-//   return (
-//     <ProtectedRoute requireVerification={false}>{children}</ProtectedRoute>
-//   );
-// };
-
 import React from "react";
 import { ProtectedRoute } from "./protected-route";
 
diff --git a/src/components/route-protection/dashboard-protected-route.tsx b/src/components/route-protection/dashboard-protected-route.tsx
index a2b3595..a2162c1 100644
--- a/src/components/route-protection/dashboard-protected-route.tsx
+++ b/src/components/route-protection/dashboard-protected-route.tsx
@@ -1,15 +1,3 @@
-// import React from "react";
-// import { ProtectedRoute } from "@/components/route-protection/protected-route";
-
-// interface DashboardProtectedRouteProps {
-//   children: React.ReactNode;
-// }
-
-// export const DashboardProtectedRoute: React.FC<
-//   DashboardProtectedRouteProps
-// > = ({ children }) => {
-//   return <ProtectedRoute requireVerification={true}>{children}</ProtectedRoute>;
-// };
 
 import React from "react";
 import { ProtectedRoute } from "./protected-route";
diff --git a/src/components/setting-profile.tsx b/src/components/setting-profile.tsx
index 7eeb215..35488c3 100644
--- a/src/components/setting-profile.tsx
+++ b/src/components/setting-profile.tsx
@@ -40,13 +40,6 @@ const SettingProfile = () => {
     dob: "",
   });
 
-  // handle file change
-  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.files && e.target.files[0]) {
-      setUserData((prev) => ({ ...prev, profilepic: e.target.files![0] }));
-    }
-  };
-
   // form submit handler
   const handleFormSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -131,7 +124,12 @@ const SettingProfile = () => {
             )}
           </div>
           <label className="flex items-center gap-2 cursor-pointer">
-            <Input type="file" className="hidden" onChange={handleFileChange} />
+            <Input
+              type="file"
+              name="profilepic"
+              className="hidden"
+              onChange={(e) => InputHandler(e, setUserData)}
+            />
             <span className="px-4 py-2 bg-secondary text-sm rounded-md">
               Change Photo
             </span>
diff --git a/src/components/sidebar.tsx b/src/components/sidebar.tsx
index afc946d..c5b94e9 100644
--- a/src/components/sidebar.tsx
+++ b/src/components/sidebar.tsx
@@ -95,7 +95,7 @@ const studentPortalItems: SidebarItem[] = [
     icon: UserCheck,
     label: "Fresh Man",
     id: "student-pages-services",
-    href: "/Freshman",
+    href: "/fresh-man",
   },
   {
     icon: Briefcase,
@@ -107,7 +107,7 @@ const studentPortalItems: SidebarItem[] = [
     icon: Users,
     label: "Academic Personnel",
     id: "student-pages-faculty",
-    href: "/faculty",
+    href: "/academic-personnel",
   },
   {
     icon: MapPin,
diff --git a/src/features/content-management/content-editor.tsx b/src/features/content-management/content-editor.tsx
index 36244e6..6fa7bdc 100644
--- a/src/features/content-management/content-editor.tsx
+++ b/src/features/content-management/content-editor.tsx
@@ -1,75 +1,103 @@
-import { useState, useEffect } from "react";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
 import { toast } from "sonner";
 import { EditorHeader } from "@/components/editor/editor-header";
 import { EditorLayout } from "@/components/editor/editor-layout";
+import type { ContentManagement } from "@/types";
+import axios from "axios";
+
+const base_api = import.meta.env.VITE_SERVER_BASE_URL;
 
 export const ContentEditor = () => {
   const navigate = useNavigate();
-  const [searchParams] = useSearchParams();
-  const isEditing = searchParams.get("edit") === "true";
+  const [loading, setLoading] = useState<boolean>(false);
+
+  const [contentData, setContentData] = useState<ContentManagement>({
+    title: "",
+    subtitle: "",
+    content: "",
+    coverimage: null,
+    category: "NEWS",
+    status: "DRAFT",
+    focusKeyword: "",
+    keywords: [],
+    metaDescription: "",
+    metaTitle: "",
+    slug: "",
+    publishedAt: new Date(),
+  });
 
-  // State
-  const [content, setContent] = useState("");
-  const [category, setCategory] = useState("");
-  const [status, setStatus] = useState("Draft");
   const [isPreview, setIsPreview] = useState(false);
 
-  useEffect(() => {
-    if (isEditing) {
-      setContent("<p>This is sample content for editing...</p>");
-      setCategory("Academic");
-      setStatus("Published");
-    }
-  }, [isEditing]);
+  // Update content data helper
+  const updateContentData = (updates: Partial<ContentManagement>) => {
+    setContentData((prev) => ({ ...prev, ...updates }));
+  };
 
-  // Handlers
+  // Save as DRAFT
   const handleSave = () => {
-
-    if (!content.trim()) {
+    if (!contentData.content.trim()) {
       toast.error("Please add some content");
       return;
     }
-    setStatus("Draft");
-    toast.success("Draft saved successfully!");
+    updateContentData({ status: "DRAFT" });
+    toast.success("DRAFT saved!");
   };
 
-  const handlePublish = () => {
-   
-    if (!content.trim()) {
+  // Publish article
+  const handlePublish = async () => {
+    if (!contentData.content.trim()) {
       toast.error("Please add some content");
       return;
     }
-    if (!category) {
+    if (!contentData.category) {
       toast.error("Please select a category");
       return;
     }
-    setStatus("Published");
-    toast.success("Article published successfully!");
-  };
+    console.log(contentData);
+    setLoading(true);
+    try {
+      const response = await axios.post(
+        `${base_api}/api/v1/create-article`,
+        contentData,
+        { withCredentials: true }
+      );
 
+      if (response.status === 200) {
+        updateContentData({ status: "PUBLISHED" });
+        toast.success("Article PUBLISHED!");
+        setLoading(false);
+      }
+    } catch (error: any) {
+      console.log(error?.message);
+    }
+  };
 
   return (
     <div className="min-h-screen bg-background">
+      {/* Header with buttons */}
       <EditorHeader
-        status={status}
-        category={category}
+        loading={loading}
+        status={contentData.status}
+        category={contentData.category}
         isPreview={isPreview}
         onBack={() => navigate("/content-management")}
-        onCategoryChange={setCategory}
+        onCategoryChange={(category) => updateContentData({ category })}
         onPreview={() => setIsPreview(!isPreview)}
         onSave={handleSave}
         onPublish={handlePublish}
       />
 
-      <div className=" py-8">
+      {/* Main content area */}
+      <div className="py-6">
         <EditorLayout
-          mode="simple"
           isPreview={isPreview}
-          content={content}
-          onContentChange={setContent}
+          content={contentData.content}
+          onContentChange={(content) => updateContentData({ content })}
+          contentData={contentData}
+          onContentDataChange={updateContentData}
         />
       </div>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/src/features/content-management/content-preview.tsx b/src/features/content-management/content-preview.tsx
index 69f1409..a33fd36 100644
--- a/src/features/content-management/content-preview.tsx
+++ b/src/features/content-management/content-preview.tsx
@@ -1,16 +1,89 @@
+import { Badge } from "@/components/ui/badge";
+import { Calendar, User, Eye } from "lucide-react";
+
 interface ContentPreviewProps {
+  title: string;
+  subtitle: string;
+  coverImage: string | null;
   content: string;
-  className?: string;
+  category: string;
+  status: string;
+  createdAt?: string;
+  author?: string;
 }
 
-export const ContentPreview = ({ content, className = "" }: ContentPreviewProps) => {
+const ContentPreview = ({
+  title,
+  subtitle,
+  coverImage,
+  content,
+  category,
+  status,
+  createdAt = new Date().toLocaleDateString(),
+  author,
+}: ContentPreviewProps) => {
   return (
-    <div className={`min-h-[400px] prose prose-lg max-w-none ${className}`}>
-      <div
-        dangerouslySetInnerHTML={{
-          __html: content || "<p>No content to preview...</p>",
-        }}
-      />
-    </div>
+    <article className="shadow-lg rounded-lg overflow-hidden">
+      {/* Cover Image */}
+      {coverImage && (
+        <div className="w-full h-64 md:h-80 lg:h-96 overflow-hidden">
+          <img
+            src={coverImage}
+            alt={title || "Blog cover"}
+            className="w-full h-full object-cover"
+          />
+        </div>
+      )}
+
+      {/* Article Header */}
+      <div className="p-6 md:p-8 lg:p-10">
+        {/* Meta Info */}
+        <div className="flex flex-wrap items-center gap-3 mb-6">
+          <Badge variant={status === "Published" ? "default" : "secondary"}>
+            {status}
+          </Badge>
+          <Badge variant="outline">{category}</Badge>
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <Calendar className="w-4 h-4" />
+            <span>{createdAt}</span>
+          </div>
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <User className="w-4 h-4" />
+            <span>{author}</span>
+          </div>
+        </div>
+
+        {/* Title */}
+        <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4 leading-tight">
+          {title || "Untitled"}
+        </h1>
+
+        {/* Subtitle */}
+        {subtitle && (
+          <h2 className="text-lg md:text-xl text-muted-foreground mb-8 leading-relaxed">
+            {subtitle}
+          </h2>
+        )}
+
+        {/* Content */}
+        <div className="prose prose-lg max-w-none dark:prose-invert">
+          <div
+            dangerouslySetInnerHTML={{
+              __html: content || "<p>No content available...</p>",
+            }}
+          />
+        </div>
+
+        {/* Reading Stats */}
+        <div className="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <Eye className="w-4 h-4" />
+            <span>Preview Mode</span>
+          </div>
+        </div>
+      </div>
+    </article>
   );
 };
+
+export default ContentPreview;
diff --git a/src/features/content-management/cover-image.tsx b/src/features/content-management/cover-image.tsx
deleted file mode 100644
index 683b907..0000000
--- a/src/features/content-management/cover-image.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { useState } from "react";
-import { ImagePlus, Upload } from "lucide-react";
-import { Button } from "@/components/ui/button";
-
-interface CoverImageUploaderProps {
-  coverImage: string | null;
-  onImageUpload: (file: File, url: string) => void;
-  onRemoveImage: () => void;
-  className?: string;
-}
-
-export const CoverImageUploader = ({
-  coverImage,
-  onImageUpload,
-  onRemoveImage,
-  className = "",
-}: CoverImageUploaderProps) => {
-  const [showUploadInput, setShowUploadInput] = useState(false);
-
-  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (file) {
-      const url = URL.createObjectURL(file);
-      onImageUpload(file, url);
-      setShowUploadInput(false);
-    }
-  };
-
-  const handleCancel = () => {
-    setShowUploadInput(false);
-    onRemoveImage();
-  };
-
-  if (coverImage) {
-    return (
-      <div className={`relative mb-8 group ${className}`}>
-        <img
-          src={coverImage}
-          alt="Cover"
-          className="w-full h-64 object-cover rounded-lg"
-        />
-        <Button
-          variant="secondary"
-          size="sm"
-          className="absolute top-4 left-4 opacity-0 group-hover:opacity-100 transition-opacity"
-          onClick={onRemoveImage}
-        >
-          Remove Cover
-        </Button>
-      </div>
-    );
-  }
-
-  if (showUploadInput) {
-    return (
-      <div className={`mb-6 space-y-4 ${className}`}>
-        <div className="border-2 border-dashed border-border rounded-lg p-6 text-center">
-          <input
-            type="file"
-            accept="image/*"
-            onChange={handleFileUpload}
-            className="hidden"
-            id="cover-upload"
-          />
-          <label htmlFor="cover-upload" className="cursor-pointer">
-            <Upload className="w-8 h-8 mx-auto mb-2 text-muted-foreground" />
-            <p className="text-sm text-muted-foreground">
-              Click to upload cover image
-            </p>
-            <p className="text-xs text-muted-foreground mt-1">
-              PNG, JPG up to 5MB
-            </p>
-          </label>
-        </div>
-        <div className="flex gap-2">
-          <Button variant="ghost" size="sm" onClick={handleCancel}>
-            Cancel
-          </Button>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <Button
-      variant="ghost"
-      className={`mb-6 text-muted-foreground hover:text-foreground ${className}`}
-      onClick={() => setShowUploadInput(true)}
-    >
-      <ImagePlus className="w-4 h-4 mr-2" />
-      Add Cover
-    </Button>
-  );
-};
diff --git a/src/features/content-management/image-uploader.tsx b/src/features/content-management/image-uploader.tsx
deleted file mode 100644
index a54b5a8..0000000
--- a/src/features/content-management/image-uploader.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import { useState, useRef } from "react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Upload, Link2, X } from "lucide-react";
-import { toast } from "sonner";
-
-interface ImageUploaderProps {
-  onImageUpload: (url: string) => void;
-  onClose: () => void;
-}
-
-export const ImageUploader = ({ onImageUpload, onClose }: ImageUploaderProps) => {
-  const [imageUrl, setImageUrl] = useState("");
-  const [isUploading, setIsUploading] = useState(false);
-  const fileInputRef = useRef<HTMLInputElement>(null);
-
-  const handleFileUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (!file) return;
-
-    // Validate file type
-    if (!file.type.startsWith("image/")) {
-      toast.error("Please select an image file");
-      return;
-    }
-
-    // Validate file size (5MB limit)
-    if (file.size > 5 * 1024 * 1024) {
-      toast.error("Image size must be less than 5MB");
-      return;
-    }
-
-    setIsUploading(true);
-    try {
-      // Create object URL for preview (in real app, upload to server)
-      const url = URL.createObjectURL(file);
-      onImageUpload(url);
-      toast.success("Image uploaded successfully!");
-      onClose();
-    } catch (error) {
-      toast.error("Failed to upload image");
-    } finally {
-      setIsUploading(false);
-    }
-  };
-
-  const handleUrlSubmit = () => {
-    if (!imageUrl.trim()) {
-      toast.error("Please enter an image URL");
-      return;
-    }
-
-    // Basic URL validation
-    try {
-      new URL(imageUrl);
-      onImageUpload(imageUrl);
-      toast.success("Image added successfully!");
-      onClose();
-    } catch {
-      toast.error("Please enter a valid URL");
-    }
-  };
-
-  return (
-    <div className="space-y-4 p-4">
-      <div className="flex items-center justify-between">
-        <h3 className="text-lg font-semibold">Add Image</h3>
-        <Button variant="ghost" size="sm" onClick={onClose}>
-          <X className="w-4 h-4" />
-        </Button>
-      </div>
-
-      {/* URL Input */}
-      <div className="space-y-2">
-        <label className="text-sm font-medium flex items-center gap-2">
-          <Link2 className="w-4 h-4" />
-          Image URL
-        </label>
-        <div className="flex gap-2">
-          <Input
-            placeholder="https://example.com/image.jpg"
-            value={imageUrl}
-            onChange={(e) => setImageUrl(e.target.value)}
-            onKeyDown={(e) => e.key === "Enter" && handleUrlSubmit()}
-          />
-          <Button onClick={handleUrlSubmit} disabled={!imageUrl.trim()}>
-            Add
-          </Button>
-        </div>
-      </div>
-
-      <div className="relative">
-        <div className="absolute inset-0 flex items-center">
-          <div className="w-full border-t" />
-        </div>
-        <div className="relative flex justify-center text-xs uppercase">
-          <span className="bg-background px-2 text-muted-foreground">or</span>
-        </div>
-      </div>
-
-      {/* File Upload */}
-      <div className="space-y-2">
-        <label className="text-sm font-medium flex items-center gap-2">
-          <Upload className="w-4 h-4" />
-          Upload File
-        </label>
-        <div
-          className="border-2 border-dashed border-border rounded-lg p-6 text-center cursor-pointer hover:border-primary/50 transition-colors"
-          onClick={() => fileInputRef.current?.click()}
-        >
-          <Upload className="w-8 h-8 mx-auto mb-2 text-muted-foreground" />
-          <p className="text-sm text-muted-foreground">
-            Click to upload or drag and drop
-          </p>
-          <p className="text-xs text-muted-foreground mt-1">
-            PNG, JPG, WEBP up to 5MB
-          </p>
-        </div>
-        <input
-          ref={fileInputRef}
-          type="file"
-          accept="image/*"
-          onChange={handleFileUpload}
-          className="hidden"
-          disabled={isUploading}
-        />
-      </div>
-
-      {isUploading && (
-        <div className="text-center text-sm text-muted-foreground">
-          Uploading image...
-        </div>
-      )}
-    </div>
-  );
-};
diff --git a/src/features/content-management/index.tsx b/src/features/content-management/index.tsx
new file mode 100644
index 0000000..fae3bf6
--- /dev/null
+++ b/src/features/content-management/index.tsx
@@ -0,0 +1,147 @@
+import { ConfirmDialog } from "@/components/confirm-dialog";
+import DateNotAvailable from "@/components/data-not-avaiable";
+import AddOn from "@/components/skeleton/add-on-skeleton";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { FormateDate } from "@/lib/utils";
+import { Contentmanagement } from "@/store/atoms/content-management/content-management";
+import { useContentManagementData } from "@/store/hooks/content-management/content-management";
+import type { ContentManagement } from "@/types";
+import axios from "axios";
+import { Edit, Eye, Loader2, Trash } from "lucide-react";
+import { useState } from "react";
+import { useRecoilRefresher_UNSTABLE } from "recoil";
+import { toast } from "sonner";
+
+const base_api = import.meta.env.VITE_SERVER_BASE_URL;
+
+const Content = () => {
+  const { ContentInfo, error, loading } = useContentManagementData();
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const refreshEvent = useRecoilRefresher_UNSTABLE(Contentmanagement);
+
+  async function handleDelete(content: ContentManagement) {
+    try {
+      const response = await axios.delete(
+        `${base_api}/api/v1/delete-article/${content?.id}`,
+        {
+          withCredentials: true,
+        }
+      );
+
+      if (response.status === 200) {
+        toast.success("Article deleted !!");
+        setIsLoading(false);
+        refreshEvent();
+      }
+    } catch (error) {
+      console.log(error);
+      setIsLoading(false);
+    }
+  }
+
+  if (error) {
+    return <p> error</p>;
+  }
+
+  if (loading) {
+    <AddOn />;
+  }
+  const contentData: ContentManagement[] = ContentInfo;
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex justify-between items-center">
+          <CardTitle>History</CardTitle>
+          <Tabs>
+            <TabsList>
+              <TabsTrigger value="PUBLISHED	">Published</TabsTrigger>
+              <TabsTrigger value="DRAFT	">Draft</TabsTrigger>
+            </TabsList>
+          </Tabs>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Title</TableHead>
+              <TableHead>Category</TableHead>
+              <TableHead>Date</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead>Author</TableHead>
+              <TableHead>Action</TableHead>
+            </TableRow>
+          </TableHeader>
+
+          <TableBody>
+            {contentData?.length > 0 ? (
+              contentData.map((content, index) => (
+                <TableRow key={index}>
+                  <TableCell>{content.title}</TableCell>
+                  <TableCell>{content.category}</TableCell>
+                  <TableCell>{FormateDate(content?.publishedAt)}</TableCell>
+                  <TableCell>
+                    {" "}
+                    <Badge
+                      variant={
+                        content.status === "Published" ? "default" : "outline"
+                      }
+                    >
+                      {content.status}
+                    </Badge>
+                  </TableCell>
+                  <TableCell>
+                    {content?.author?.firstname} {content?.author?.lastname}
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex gap-1">
+                      <Button variant="ghost" size="sm">
+                        <Eye className="w-4 h-4" />
+                      </Button>
+                      <Button variant="ghost" size="sm">
+                        <Edit className="w-4 h-4" />
+                      </Button>
+                      <ConfirmDialog
+                        title="Delete Article"
+                        description={`Are you sure you want to delete  ${content.title}?`}
+                        confirmLabel="Delete"
+                        onConfirm={() => handleDelete(content)}
+                        destructive
+                        trigger={
+                          <Button
+                            size="sm"
+                            variant="secondary"
+                            className="w-full sm:w-auto"
+                          >
+                            <Trash className="text-rose-400 size-5" />
+                            {isLoading && <Loader2 />}
+                          </Button>
+                        }
+                      />
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))
+            ) : (
+              <DateNotAvailable text="No any Content exist to display" />
+            )}
+          </TableBody>
+        </Table>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default Content;
diff --git a/src/features/content-management/subtitle-input.tsx b/src/features/content-management/subtitle-input.tsx
deleted file mode 100644
index dba0f40..0000000
--- a/src/features/content-management/subtitle-input.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Type } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-
-interface SubtitleInputProps {
-  value: string;
-  onChange: (value: string) => void;
-  showInput: boolean;
-  onShowInput: (show: boolean) => void;
-  className?: string;
-}
-
-export const SubtitleInput = ({
-  value,
-  onChange,
-  showInput,
-  onShowInput,
-  className = "",
-}: SubtitleInputProps) => {
-  const handleBlur = () => {
-    if (!value.trim()) {
-      onShowInput(false);
-    }
-  };
-
-  if (value || showInput) {
-    return (
-      <div className={`mb-8 ${className}`}>
-        <Input
-          value={value}
-          onChange={(e) => onChange(e.target.value)}
-          placeholder="Add a subtitle..."
-          className="text-xl text-muted-foreground border-none px-0 py-1 h-auto placeholder:text-muted-foreground focus-visible:ring-0 focus-visible:ring-offset-0"
-          onBlur={handleBlur}
-        />
-      </div>
-    );
-  }
-
-  return (
-    <Button
-      variant="ghost"
-      className={`mb-8 text-muted-foreground hover:text-foreground ${className}`}
-      onClick={() => onShowInput(true)}
-    >
-      <Type className="w-4 h-4 mr-2" />
-      Add Subtitle
-    </Button>
-  );
-};
diff --git a/src/features/content-management/title-input.tsx b/src/features/content-management/title-input.tsx
deleted file mode 100644
index 9759f07..0000000
--- a/src/features/content-management/title-input.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Input } from "@/components/ui/input";
-
-interface TitleInputProps {
-  value: string;
-  onChange: (value: string) => void;
-  placeholder?: string;
-  className?: string;
-}
-
-export const TitleInput = ({
-  value,
-  onChange,
-  placeholder = "Untitled",
-  className = "",
-}: TitleInputProps) => {
-  return (
-    <div className={`mb-4 ${className}`}>
-      <Input
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        placeholder={placeholder}
-        className="text-4xl font-bold border-none px-0 py-2 h-auto text-foreground placeholder:text-muted-foreground focus-visible:ring-0 focus-visible:ring-offset-0"
-        style={{ fontSize: "2.5rem", lineHeight: "1.2" }}
-      />
-    </div>
-  );
-};
diff --git a/src/features/events/index.tsx b/src/features/events/index.tsx
index 6ed7f0c..cba22f1 100644
--- a/src/features/events/index.tsx
+++ b/src/features/events/index.tsx
@@ -64,7 +64,7 @@ const EventsData = () => {
 
   const eventData: EventData[] = EventInfo;
 
-  // 🔹 Memoized filtered data
+  // Memoized filtered data
   const filteredEvents = useMemo(() => {
     return eventData?.filter((event) => {
       const matchesSearch =
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 87c868b..6337003 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -11,15 +11,21 @@ export function InputHandler(
   e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
   setState: React.Dispatch<React.SetStateAction<any>>
 ) {
-  const target = e.target as HTMLInputElement;
-  const { name, value, files, type } = target;
-
-  setState((prev: any) => ({
-    ...prev,
-    [name]: type === "file" && files ? files[0] : value,
-  }));
+  const { name, type, value } = e.target;
+
+  if (type === "file" && "files" in e.target) {
+    const files = (e.target as HTMLInputElement).files;
+    setState((prev: any) => ({
+      ...prev,
+      [name]: files && files[0] ? files[0] : null,
+    }));
+  } else {
+    setState((prev: any) => ({
+      ...prev,
+      [name]: value,
+    }));
+  }
 }
-
 // status handler
 
 export function SelectHandler(name: string, value: string, setState: any) {
diff --git a/src/pages/dashboard/academic-personal.tsx b/src/pages/dashboard/academic-personal.tsx
new file mode 100644
index 0000000..b47bf3b
--- /dev/null
+++ b/src/pages/dashboard/academic-personal.tsx
@@ -0,0 +1,108 @@
+import { Users, Mail, Phone, MapPin } from "lucide-react";
+import { Card, CardContent } from "@/components/ui/card";
+import DashboardBanner from "@/components/dashboard-banner";
+
+interface FacultyMembers {
+  name: string;
+  title: string;
+  specialization: string;
+  email: string;
+  phone: string;
+  building: string;
+}
+
+const facultyMembers: FacultyMembers[] = [
+  {
+    name: "Prof. Maria Joseph",
+    title: "Professor of Computer Science",
+    specialization: "Database Systems, Data Mining",
+    email: "m.joseph@myuni.edu",
+    phone: "+30 210 123 4501",
+    building: "Building B, Room 301",
+  },
+  {
+    name: "Prof. Maria Joseph",
+    title: "Professor of Computer Science",
+    specialization: "Database Systems, Data Mining",
+    email: "m.joseph@myuni.edu",
+    phone: "+30 210 123 4501",
+    building: "Building B, Room 301",
+  },
+  {
+    name: "Prof. Maria Joseph",
+    title: "Professor of Computer Science",
+    specialization: "Database Systems, Data Mining",
+    email: "m.joseph@myuni.edu",
+    phone: "+30 210 123 4501",
+    building: "Building B, Room 301",
+  },
+  {
+    name: "Prof. Maria Joseph",
+    title: "Professor of Computer Science",
+    specialization: "Database Systems, Data Mining",
+    email: "m.joseph@myuni.edu",
+    phone: "+30 210 123 4501",
+    building: "Building B, Room 301",
+  },
+];
+
+const AcademicPersonnel = () => {
+  return (
+    <div className="space-y-6">
+      <DashboardBanner
+        bannerTitle="Manage faculties"
+        bannerDescription="Manage distinguished faculty members"
+      />
+
+      {/* Faculty List */}
+      <div className="space-y-4">
+        {facultyMembers.map((faculty, index) => (
+          <Card key={index} className="hover:shadow-md transition-shadow">
+            <CardContent className="p-6">
+              <div className="flex  flex-col md:flex-row items-start gap-4">
+                <div className="w-12 h-12 bg-secondary rounded-full flex items-center justify-center flex-shrink-0">
+                  <Users className="h-6 w-6 text-muted-foreground" />
+                </div>
+
+                <div className="flex-1 min-w-0">
+                  <h3 className="font-semibold text-foreground mb-1">
+                    {faculty.name}
+                  </h3>
+                  <p className="text-sm text-muted-foreground mb-2">
+                    {faculty.title}
+                  </p>
+
+                  <div className="mb-3">
+                    <p className="text-sm font-medium text-foreground mb-1">
+                      Specialization
+                    </p>
+                    <p className="text-sm text-muted-foreground">
+                      {faculty.specialization}
+                    </p>
+                  </div>
+                </div>
+
+                <div className="text-right space-y-2 flex-shrink-0">
+                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                    <Mail className="h-4 w-4" />
+                    <span>{faculty.email}</span>
+                  </div>
+                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                    <Phone className="h-4 w-4" />
+                    <span>{faculty.phone}</span>
+                  </div>
+                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                    <MapPin className="h-4 w-4" />
+                    <span>{faculty.building}</span>
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default AcademicPersonnel;
diff --git a/src/pages/dashboard/camous-map.tsx b/src/pages/dashboard/camous-map.tsx
new file mode 100644
index 0000000..2560c8c
--- /dev/null
+++ b/src/pages/dashboard/camous-map.tsx
@@ -0,0 +1,121 @@
+import {
+  MapPin,
+  Clock,
+  Phone,
+  Mail,
+  Navigation,
+  PhoneCall,
+} from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import DashboardBanner from "@/components/dashboard-banner";
+
+interface Locations {
+  name: string;
+  building: string;
+  description: string;
+  hours: string;
+  phone: string;
+  email: string;
+  hall: string;
+}
+
+const locations: Locations[] = [
+  {
+    name: "Library",
+    building: "Building A, Ground Floor",
+    description: "Primary dining facility with daily specials",
+    hours: "07:00 - 22:00",
+    phone: "+30 210 123 4501",
+    email: "restaurant@myuni.edu",
+    hall: "Hall 1",
+  },
+  {
+    name: "Student Groups",
+    building: "Building C, 1st Floor",
+    description: "Registration, financial aid, and student support",
+    hours: "07:00 - 22:00",
+    phone: "+30 210 123 4501",
+    email: "restaurant@myuni.edu",
+    hall: "Hall 1",
+  },
+];
+
+const CampusMap = () => {
+  return (
+    <div className="space-y-6">
+      <DashboardBanner
+        bannerTitle="Manage Campus Map"
+        bannerDescription="Manage Campus map to Find your way around MyUni campus"
+      />
+
+      {/* Map Container */}
+      <Card className="min-h-[300px]">
+        <CardContent className="p-6">
+          <div className="h-64 bg-secondary/20 rounded-lg flex items-center justify-center border-2 border-dashed border-border">
+            <div className="text-center">
+              <MapPin className="h-12 w-12 text-muted-foreground mx-auto mb-2" />
+              <p className="text-lg font-medium text-foreground">Google Map</p>
+              <p className="text-sm text-muted-foreground">
+                Interactive campus map would be displayed here
+              </p>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Location Cards */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {locations.map((location, index) => (
+          <Card key={index} className="hover:shadow-md transition-shadow">
+            <CardHeader className="pb-3">
+              <CardTitle className="flex items-center gap-2">
+                <MapPin className="h-5 w-5 text-primary" />
+                {location.name}
+              </CardTitle>
+              <p className="text-sm text-muted-foreground">
+                {location.building}
+              </p>
+              <p className="text-sm text-muted-foreground">
+                {location.description}
+              </p>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="space-y-2 text-sm">
+                <div className="flex items-center gap-2 text-muted-foreground">
+                  <Clock className="h-4 w-4" />
+                  <span>{location.hours}</span>
+                </div>
+                <div className="flex items-center gap-2 text-muted-foreground">
+                  <Phone className="h-4 w-4" />
+                  <span>{location.phone}</span>
+                </div>
+                <div className="flex items-center gap-2 text-muted-foreground">
+                  <Mail className="h-4 w-4" />
+                  <span>{location.email}</span>
+                </div>
+                <div className="flex items-center gap-2 text-muted-foreground">
+                  <MapPin className="h-4 w-4" />
+                  <span>{location.hall}</span>
+                </div>
+              </div>
+
+              <div className="flex gap-2">
+                <Button variant="outline" size="sm" className="flex-1">
+                  <Navigation className="h-4 w-4 mr-2" />
+                  Direction
+                </Button>
+                <Button variant="outline" size="sm" className="flex-1">
+                  <PhoneCall className="h-4 w-4 mr-2" />
+                  Call
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default CampusMap;
diff --git a/src/pages/dashboard/content-management.tsx b/src/pages/dashboard/content-management.tsx
index 80b87ca..8ad7006 100644
--- a/src/pages/dashboard/content-management.tsx
+++ b/src/pages/dashboard/content-management.tsx
@@ -1,62 +1,8 @@
-import { Plus, Eye, Edit, Trash2 } from "lucide-react";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Plus } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Link } from "react-router-dom";
-
-interface ContentData {
-  title: string;
-  category: string;
-  date: string;
-  status: string;
-  author: string;
-}
 
-const contentData: ContentData[] = [
-  {
-    title: "Registration Deadline Extended",
-    category: "Academic",
-    date: "2023-09-15",
-    status: "Published",
-    author: "Admin",
-  },
-  {
-    title: "Library Hours Extended for Exam",
-    category: "Facilities",
-    date: "2023-09-15",
-    status: "Published",
-    author: "Admin",
-  },
-  {
-    title: "Registration Deadline Extended",
-    category: "Events",
-    date: "2023-09-15",
-    status: "Draft",
-    author: "Admin",
-  },
-  {
-    title: "Guest Lecture: AI in Education",
-    category: "Maintenance",
-    date: "2023-09-15",
-    status: "Published",
-    author: "Admin",
-  },
-  {
-    title: "Campus Maintenance Schedule",
-    category: "Academic",
-    date: "2023-09-15",
-    status: "Published",
-    author: "Admin",
-  },
-];
+import { Link } from "react-router-dom";
+import Content from "@/features/content-management";
 
 const ContentManagement = () => {
   return (
@@ -70,8 +16,8 @@ const ContentManagement = () => {
               Content Management
             </h1>
             <p className="dark:text-secondary/70">Create and manage content</p>
-            <p className="text-sm text-muted-foreground mt-1">
-              Monday, June 9, 2025
+            <p className="text-sm text-muted mt-1">
+              {new Date().toLocaleDateString()}
             </p>
           </div>
           <Button asChild>
@@ -84,61 +30,7 @@ const ContentManagement = () => {
       </div>
 
       {/* Content Section */}
-      <Card>
-        <CardHeader>
-          <div className="flex justify-between items-center">
-            <CardTitle>History</CardTitle>
-          </div>
-        </CardHeader>
-        <CardContent>
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>Title</TableHead>
-                <TableHead>Category</TableHead>
-                <TableHead>Date</TableHead>
-                <TableHead>Status</TableHead>
-                <TableHead>Author</TableHead>
-                <TableHead>Action</TableHead>
-              </TableRow>
-            </TableHeader>
-
-            <TableBody>
-              {contentData.map((content, index) => (
-                <TableRow key={index}>
-                  <TableCell>{content.title}</TableCell>
-                  <TableCell>{content.category}</TableCell>
-                  <TableCell>{content.date}</TableCell>
-                  <TableCell>
-                    {" "}
-                    <Badge
-                      variant={
-                        content.status === "Published" ? "default" : "outline"
-                      }
-                    >
-                      {content.status}
-                    </Badge>
-                  </TableCell>
-                  <TableCell>{content.author}</TableCell>
-                  <TableCell>
-                    <div className="flex gap-1">
-                      <Button variant="ghost" size="sm">
-                        <Eye className="w-4 h-4" />
-                      </Button>
-                      <Button variant="ghost" size="sm">
-                        <Edit className="w-4 h-4" />
-                      </Button>
-                      <Button variant="ghost" size="sm">
-                        <Trash2 className="w-4 h-4" />
-                      </Button>
-                    </div>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </CardContent>
-      </Card>
+      <Content />
     </div>
   );
 };
diff --git a/src/pages/dashboard/fresh-man.tsx b/src/pages/dashboard/fresh-man.tsx
new file mode 100644
index 0000000..8812b6c
--- /dev/null
+++ b/src/pages/dashboard/fresh-man.tsx
@@ -0,0 +1,141 @@
+import {
+  UserCheck,
+  CheckCircle,
+  Users,
+  Home,
+  Clock,
+  UserSquare,
+} from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Help } from "@/components/help";
+import ErrorBoundary from "@/components/error-boundary";
+import DashboardBanner from "@/components/dashboard-banner";
+
+interface FreshmanSections {
+  icon: React.ComponentType<{ className?: string }>;
+  title: string;
+  items: string[];
+}
+
+const sections: FreshmanSections[] = [
+  {
+    icon: CheckCircle,
+    title: "Registration & Enrollment",
+    items: [
+      "Complete your online registration within the first week",
+      "Submit all required documents to the Registrar's Office",
+      "Attend the mandatory orientation session",
+      "Get your student ID card from Student Services",
+      "Set up your university email account",
+    ],
+  },
+  {
+    icon: Users,
+    title: "Campus Life",
+    items: [
+      "Join student clubs and organizations",
+      "Attend campus events and activities",
+      "Use the library and study spaces effectively",
+      "Get to know your dormitory if you're living on campus",
+      "Explore dining options and meal plans",
+    ],
+  },
+  {
+    icon: Home,
+    title: "Boarding, Housing, HealthCare",
+    items: [
+      "Supporting documents for boarding application",
+      "Supporting documents for housing application",
+      "Government gazette for housing",
+      "Income thresholds",
+      "Government gazette for boarding",
+    ],
+  },
+  {
+    icon: Clock,
+    title: "Important Deadlines",
+    items: [
+      "Meet with your academic advisor to plan your course schedule",
+      "Understand the credit system and graduation requirements",
+      "Learn about the grading system and GPA calculation",
+      "Familiarize yourself with the academic calendar",
+      "Know the add/drop deadlines for courses",
+    ],
+  },
+  {
+    icon: UserSquare,
+    title: "Academic Requirements",
+    items: [
+      "Meet with your academic advisor to plan your course schedule",
+      "Understand the credit system and graduation requirements",
+      "Learn about the grading system and GPA calculation",
+      "Familiarize yourself with the academic calendar",
+      "Know the add/drop deadlines for courses",
+    ],
+  },
+  {
+    icon: UserCheck,
+    title: "Institutional account",
+    items: [
+      "Meet with your academic advisor to plan your course schedule",
+      "Understand the credit system and graduation requirements",
+      "Learn about the grading system and GPA calculation",
+      "Familiarize yourself with the academic calendar",
+      "Know the add/drop deadlines for courses",
+    ],
+  },
+];
+
+const FreshMan = () => {
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <DashboardBanner
+        bannerTitle="Manage Freshmen Guide"
+        bannerDescription="Manage Fresh-man Guides for students"
+      />
+      {/* Guide Sections */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-6">
+        {sections.map((section, index) => {
+          const Icon = section.icon;
+          return (
+            <Card key={index} className="hover:shadow-md transition-shadow">
+              <CardHeader className="pb-3">
+                <CardTitle className="flex items-center gap-3 text-lg">
+                  <div className="w-8 h-8 bg-primary/10 rounded-lg flex items-center justify-center">
+                    <Icon className="h-4 w-4 text-primary" />
+                  </div>
+                  {section.title}
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <ul className="space-y-2">
+                  {section.items.map((item, itemIndex) => (
+                    <li
+                      key={itemIndex}
+                      className="flex items-start gap-2 text-sm text-muted-foreground"
+                    >
+                      <div className="w-1.5 h-1.5 bg-primary rounded-full mt-2 flex-shrink-0" />
+                      <span>{item}</span>
+                    </li>
+                  ))}
+                </ul>
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+
+      {/* Need Help Section */}
+      <ErrorBoundary>
+        <Help
+          title="Need Help ?"
+          helplineEmail="Academic Advising: email : helpmyuni@gmail.com"
+          helplineContact="Address: Building B, Room 101"
+        />
+      </ErrorBoundary>
+    </div>
+  );
+};
+
+export default FreshMan;
diff --git a/src/pages/dashboard/library.tsx b/src/pages/dashboard/library.tsx
new file mode 100644
index 0000000..f9be2c2
--- /dev/null
+++ b/src/pages/dashboard/library.tsx
@@ -0,0 +1,151 @@
+import { Calendar, Phone, Mail, MapPin } from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import DashboardBanner from "@/components/dashboard-banner";
+
+interface LibrarySchedule {
+  day: string;
+  hours: string;
+}
+
+const coursesPeriod: LibrarySchedule[] = [
+  { day: "Monday - Friday", hours: "08:00 - 20:00" },
+  { day: "Saturday", hours: "10:00 - 15:00" },
+  { day: "Sunday", hours: "Closed" },
+];
+const examPeriod: LibrarySchedule[] = [
+  { day: "Monday - Friday", hours: "08:00 - 20:00" },
+  { day: "Saturday", hours: "10:00 - 15:00" },
+  { day: "Sunday", hours: "Open" },
+];
+
+const services = [
+  "Book borrowing and returns",
+  "Digital resources access",
+  "Study rooms reservation",
+  "Research assistance",
+  "Printing and scanning",
+];
+
+const Library = () => {
+  return (
+    <div className="space-y-6">
+      <DashboardBanner
+        bannerTitle="Manage University Library"
+        bannerDescription="Manage Your gateway to knowledge and research"
+      />
+
+      {/* Library Hours */}
+
+      <Tabs
+        className="border flex flex-col gap-5 space-y-5 p-2 rounded-sm"
+        defaultValue="courses-period"
+      >
+        <TabsList className="grid w-full grid-cols-2 ">
+          <TabsTrigger value="courses-period">Courses Period</TabsTrigger>
+          <TabsTrigger value="exam-period">Exam Period</TabsTrigger>
+        </TabsList>
+        <TabsContent value="courses-period">
+          <div className="space-y-3">
+            {coursesPeriod.map((schedule, index) => (
+              <div
+                key={index}
+                className="grid grid-cols-3 gap-4 py-2 border-b border-border/50 last:border-b-0"
+              >
+                <div className="flex items-center gap-2">
+                  <Calendar className="h-4 w-4 text-muted-foreground" />
+                  <span className="font-medium">{schedule.day}</span>
+                </div>
+                <div className="text-right">
+                  <span
+                    className={
+                      schedule.hours === "Closed"
+                        ? "text-destructive"
+                        : "text-foreground"
+                    }
+                  >
+                    {schedule.hours}
+                  </span>
+                </div>
+              </div>
+            ))}
+          </div>
+        </TabsContent>
+        <TabsContent value="exam-period">
+          <div className="space-y-3">
+            {examPeriod.map((schedule, index) => (
+              <div
+                key={index}
+                className="grid grid-cols-3 gap-4 py-2 border-b border-border/50 last:border-b-0"
+              >
+                <div className="flex items-center gap-2">
+                  <Calendar className="h-4 w-4 text-muted-foreground" />
+                  <span className="font-medium">{schedule.day}</span>
+                </div>
+                <div className="text-right">
+                  <span
+                    className={
+                      schedule.hours === "Open"
+                        ? "text-green-700"
+                        : "text-foreground"
+                    }
+                  >
+                    {schedule.hours}
+                  </span>
+                </div>
+              </div>
+            ))}
+          </div>
+        </TabsContent>
+      </Tabs>
+
+      {/* Services and Contact */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Library Services */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Library Services</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ul className="space-y-3">
+              {services.map((service, index) => (
+                <li key={index} className="flex items-center gap-3">
+                  <div className="w-1.5 h-1.5 bg-primary rounded-full" />
+                  <span className="text-sm">{service}</span>
+                </li>
+              ))}
+            </ul>
+          </CardContent>
+        </Card>
+
+        {/* Contact Information */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Contact Information</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div>
+              <h4 className="font-medium mb-2">Main Desk</h4>
+              <div className="space-y-2 text-sm text-muted-foreground">
+                <div className="flex items-center gap-2">
+                  <Phone className="h-4 w-4" />
+                  <span>+30 210 123 4567</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Mail className="h-4 w-4" />
+                  <span>library@myuni.edu</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <MapPin className="h-4 w-4" />
+                  <span>Building A, Ground Floor</span>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+export default Library;
diff --git a/src/pages/dashboard/restaurant.tsx b/src/pages/dashboard/restaurant.tsx
new file mode 100644
index 0000000..1b3b151
--- /dev/null
+++ b/src/pages/dashboard/restaurant.tsx
@@ -0,0 +1,210 @@
+import DashboardBanner from "@/components/dashboard-banner";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsTrigger } from "@/components/ui/tabs";
+import { TabsList } from "@radix-ui/react-tabs";
+import { Calendar, Clock } from "lucide-react";
+
+const todaysMenu = {
+  date: "Monday, June 9",
+  lunch: {
+    time: "11:30 - 15:00",
+    mainDish: [
+      "Pork bites with peppers and mushrooms",
+      "Pork steak with mustard",
+      "Pork cooked in tomato sauce with celery",
+      "Slovakia made of pork",
+      "Pan cooked chicken à la crème",
+    ],
+    vegetarian: ["Veggie burger (patty)"],
+    salad: ["Selection of seasonal salads"],
+  },
+  dinner: {
+    time: "18:00 - 21:00",
+    dessert: ["Selection of seasonal fruits"],
+  },
+};
+const weeklyMenu = [
+  {
+    day: "Monday",
+    lunch: ["Chicken Souvlaki", "Vegetable Curry", "Greek Salad"],
+    dinner: ["Lamb Chops", "Salmon Fillet", "Pasta Carbonara"],
+  },
+  {
+    day: "Tuesday",
+    lunch: ["Pork Gyros", "Stuffed Peppers", "Village Salad"],
+    dinner: ["Beef Moussaka", "Grilled Sea Bass", "Mushroom Risotto"],
+  },
+  {
+    day: "Wednesday",
+    lunch: ["Chicken Kebab", "Lentil Stew", "Tomato Salad"],
+    dinner: ["Pork Tenderloin", "Cod with Vegetables", "Spinach Pie"],
+  },
+  {
+    day: "Thursday",
+    lunch: ["Beef Stifado", "Chickpea Soup", "Mixed Greens"],
+    dinner: ["Grilled Chicken", "Shrimp Pasta", "Vegetable Lasagna"],
+  },
+  {
+    day: "Friday",
+    lunch: ["Fish Soup", "Greek Meatballs", "Cucumber Salad"],
+    dinner: ["Roast Beef", "Grilled Octopus", "Cheese Pie"],
+  },
+];
+const Restaurant = () => {
+  return (
+    <>
+      <DashboardBanner
+        bannerTitle="University Restaurant"
+        bannerDescription="Manage Delicious meals for students and staff"
+      />
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Calendar className="h-5 w-5" />
+            Today's Menu - {todaysMenu.date}
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="grid  gap-6">
+            <Tabs defaultValue="lunch">
+              <TabsList className="grid w-full grid-cols-2">
+                <TabsTrigger value="lunch">Lunch</TabsTrigger>
+                <TabsTrigger value="dinner">Dinner</TabsTrigger>
+              </TabsList>
+
+              <TabsContent value="lunch">
+                <div className="bg-secondary/20 rounded-lg p-4">
+                  <div className="flex items-center gap-2 mb-4">
+                    <Clock className="h-4 w-4 text-primary" />
+                    <h3 className="font-semibold">
+                      Lunch ({todaysMenu.lunch.time})
+                    </h3>
+                  </div>
+
+                  <div className=" w-full flex">
+                    <div className="w-1/2 space-y-4">
+                      <h4 className="font-medium mb-2">Main Dish</h4>
+                      <ul className="space-y-1">
+                        {todaysMenu.lunch.mainDish.map((dish, index) => (
+                          <li
+                            key={index}
+                            className="flex items-start gap-2 text-sm"
+                          >
+                            <div className="w-1.5 h-1.5 bg-primary rounded-full mt-2 flex-shrink-0" />
+                            <span>{dish}</span>
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+
+                    <div className="w-1/2 space-y-4">
+                      <div>
+                        <h4 className="font-medium mb-2">Vegetarian</h4>
+                        <ul className="space-y-1">
+                          {todaysMenu.lunch.vegetarian.map((dish, index) => (
+                            <li
+                              key={index}
+                              className="flex items-start gap-2 text-sm"
+                            >
+                              <div className="w-1.5 h-1.5 bg-green-500 rounded-full mt-2 flex-shrink-0" />
+                              <span>{dish}</span>
+                            </li>
+                          ))}
+                        </ul>
+                      </div>
+
+                      <div>
+                        <h4 className="font-medium mb-2">Salad</h4>
+                        <ul className="space-y-1">
+                          {todaysMenu.lunch.salad.map((dish, index) => (
+                            <li
+                              key={index}
+                              className="flex items-start gap-2 text-sm"
+                            >
+                              <div className="w-1.5 h-1.5 bg-green-600 rounded-full mt-2 flex-shrink-0" />
+                              <span>{dish}</span>
+                            </li>
+                          ))}
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </TabsContent>
+              <TabsContent value="dinner">
+                <div className="bg-secondary/20 rounded-lg p-4">
+                  <div className="flex items-center gap-2 mb-4">
+                    <Clock className="h-4 w-4 text-primary" />
+                    <h3 className="font-semibold">
+                      Dinner ({todaysMenu.dinner.time})
+                    </h3>
+                  </div>
+
+                  <div>
+                    <h4 className="font-medium mb-2">Dessert</h4>
+                    <ul className="space-y-1">
+                      {todaysMenu.dinner.dessert.map((dish, index) => (
+                        <li
+                          key={index}
+                          className="flex items-start gap-2 text-sm"
+                        >
+                          <div className="w-1.5 h-1.5 bg-orange-500 rounded-full mt-2 flex-shrink-0" />
+                          <span>{dish}</span>
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                </div>
+              </TabsContent>
+            </Tabs>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Weekly Menu */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Weekly Menu</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="grid gap-4">
+            {weeklyMenu.map((day, index) => (
+              <div key={index} className="border rounded-lg p-4">
+                <h3 className="font-bold text-lg mb-3">{day.day}</h3>
+                <div className="grid md:grid-cols-2 gap-4">
+                  <div>
+                    <h4 className="font-medium text-sm text-muted-foreground mb-2">
+                      LUNCH
+                    </h4>
+                    <ul className="space-y-1">
+                      {day.lunch.map((item, i) => (
+                        <li key={i} className="text-sm">
+                          {item}
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                  <div>
+                    <h4 className="font-medium text-sm text-muted-foreground mb-2">
+                      DINNER
+                    </h4>
+                    <ul className="space-y-1">
+                      {day.dinner.map((item, i) => (
+                        <li key={i} className="text-sm">
+                          {item}
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </>
+  );
+};
+
+export default Restaurant;
diff --git a/src/pages/dashboard/services.tsx b/src/pages/dashboard/services.tsx
new file mode 100644
index 0000000..9fd98aa
--- /dev/null
+++ b/src/pages/dashboard/services.tsx
@@ -0,0 +1,226 @@
+import {
+  Building2,
+  Users,
+  Heart,
+  Phone,
+  Mail,
+  MapPin,
+  Clock,
+} from "lucide-react";
+import { Card, CardContent } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import DashboardBanner from "@/components/dashboard-banner";
+
+const officesData = [
+  {
+    name: "Registrar's Office",
+    description: "Student records, transcripts, enrollment verification",
+    phone: "+30 210 123 4567",
+    building: "Building A, Room 105",
+    email: "registrar@myuni.edu",
+    hours: "Mon-Fri: 9:00-15:00",
+  },
+  {
+    name: "Financial Aid Office",
+    description: "Scholarships, grants, student loans, payment plans",
+    phone: "+30 210 123 4567",
+    building: "Building A, Room 105",
+    email: "registrar@myuni.edu",
+    hours: "Mon-Fri: 9:00-15:00",
+  },
+  {
+    name: "Student Services",
+    description: "Student ID cards, general inquiries, campus information",
+    phone: "+30 210 123 4567",
+    building: "Building A, Room 105",
+    email: "registrar@myuni.edu",
+    hours: "Mon-Fri: 9:00-15:00",
+  },
+  {
+    name: "Career Services",
+    description: "Job placement, internships, career counseling",
+    phone: "+30 210 123 4567",
+    building: "Building A, Room 105",
+    email: "registrar@myuni.edu",
+    hours: "Mon-Fri: 9:00-15:00",
+  },
+  {
+    name: "International Office",
+    description: "Student records, transcripts, enrollment verification",
+    phone: "+30 210 123 4567",
+    building: "Building A, Room 105",
+    email: "registrar@myuni.edu",
+    hours: "Mon-Fri: 9:00-15:00",
+  },
+  {
+    name: "Registrar's Office",
+    description: "Exchange programs, visa assistance, international students",
+    phone: "+30 210 123 4567",
+    building: "Building A, Room 105",
+    email: "registrar@myuni.edu",
+    hours: "Mon-Fri: 9:00-15:00",
+  },
+];
+
+const studentClubsData = [
+  {
+    name: "Health Center",
+    description: "Medical services, health consultations, first aid",
+    phone: "+30 210 123 4567",
+    building: "Building A, Room 105",
+    hours: "Mon-Fri: 9:00-15:00",
+  },
+  {
+    name: "Counseling Services",
+    description:
+      "Mental health support, stress management, personal counseling",
+    phone: "+30 210 123 4567",
+    building: "Building A, Room 105",
+    hours: "Mon-Fri: 9:00-15:00",
+  },
+  {
+    name: "IT Help Desk",
+    description: "Technical support, WiFi issues, software assistance",
+    phone: "+30 210 123 4567",
+    building: "Building A, Room 105",
+    hours: "Mon-Fri: 9:00-15:00",
+  },
+  {
+    name: "Campus Security",
+    description: "24/7 security, emergency response, lost & found",
+    phone: "+30 210 123 4567",
+    building: "Building A, Room 105",
+    hours: "Mon-Fri: 9:00-15:00",
+  },
+  {
+    name: "Printing Services",
+    description: "Document printing, binding, copying services",
+    phone: "+30 210 123 4567",
+    building: "Building A, Room 105",
+    hours: "Mon-Fri: 9:00-15:00",
+  },
+  {
+    name: "Health Center",
+    description: "Medical services, health consultations, first aid",
+    phone: "+30 210 123 4567",
+    building: "Building A, Room 105",
+    hours: "Mon-Fri: 9:00-15:00",
+  },
+];
+
+const otherServicesData = [
+  {
+    name: "Bookstore",
+    description: "Textbooks, supplies, university merchandise",
+    phone: "+30 210 123 4567",
+    building: "Building A, Room 105",
+    hours: "Mon-Fri: 9:00-15:00",
+  },
+  {
+    name: "Mail Services",
+    description: "Package delivery, postal services, mailbox rental",
+    phone: "+30 210 123 4567",
+    building: "Building A, Room 105",
+    hours: "Mon-Fri: 9:00-15:00",
+  },
+  {
+    name: "Transportation",
+    description: "Campus shuttle, parking permits, bike rental",
+    phone: "+30 210 123 4567",
+    building: "Building A, Room 105",
+    hours: "Mon-Fri: 9:00-15:00",
+  },
+];
+
+const ServiceCard = ({ service }: { service: any }) => (
+  <Card className="hover:shadow-md transition-shadow">
+    <CardContent className="p-6">
+      <h3 className="font-semibold text-foreground mb-2">{service.name}</h3>
+      <p className="text-sm text-muted-foreground mb-4">
+        {service.description}
+      </p>
+
+      <div className="space-y-2">
+        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          <Phone className="h-4 w-4" />
+          <span>{service.phone}</span>
+        </div>
+        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          <MapPin className="h-4 w-4" />
+          <span>{service.building}</span>
+        </div>
+        {service.email && (
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <Mail className="h-4 w-4" />
+            <span>{service.email}</span>
+          </div>
+        )}
+        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          <Clock className="h-4 w-4" />
+          <span>{service.hours}</span>
+        </div>
+      </div>
+    </CardContent>
+  </Card>
+);
+
+export const Services = () => {
+  return (
+    <div className="space-y-6">
+      <DashboardBanner
+        bannerTitle="Manage Services"
+        bannerDescription="Manage Comprehensive support services for students"
+      />
+
+      {/* Services Tabs */}
+      <Tabs defaultValue="offices" className="w-full">
+        <TabsList className="grid w-full grid-cols-3">
+          <TabsTrigger value="offices" className="flex items-center gap-2">
+            <Building2 className="h-4 w-4" />
+            Offices
+          </TabsTrigger>
+          <TabsTrigger
+            value="student-clubs"
+            className="flex items-center gap-2"
+          >
+            <Users className="h-4 w-4" />
+            Student Clubs
+          </TabsTrigger>
+          <TabsTrigger
+            value="other-services"
+            className="flex items-center gap-2"
+          >
+            <Heart className="h-4 w-4" />
+            Other Services
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="offices" className="mt-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 lg:gap-6">
+            {officesData.map((service, index) => (
+              <ServiceCard key={index} service={service} />
+            ))}
+          </div>
+        </TabsContent>
+
+        <TabsContent value="student-clubs" className="mt-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 lg:gap-6">
+            {studentClubsData.map((service, index) => (
+              <ServiceCard key={index} service={service} />
+            ))}
+          </div>
+        </TabsContent>
+
+        <TabsContent value="other-services" className="mt-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 lg:gap-6">
+            {otherServicesData.map((service, index) => (
+              <ServiceCard key={index} service={service} />
+            ))}
+          </div>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+};
+
+export default Services;
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 6ebd5cf..8702267 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,3 +1,9 @@
+import { Routes, Route } from "react-router-dom";
+import { DashboardProtectedRoute } from "@/components/route-protection/dashboard-protected-route";
+import { AuthProtectedRoute } from "@/components/route-protection/auth-protected-route";
+import { ContentEditor } from "@/features/content-management/content-editor";
+import { AdminDashboard } from "@/pages/dashboard/dashboard";
+import { AdminDashboardLayout } from "@/pages/dashboard/layout";
 import ForgotPassword from "@/pages/auth/forgot-password/forgot-password";
 import VerifyOtp from "@/pages/auth/forgot-password/verify-otp";
 import AuthLayout from "@/pages/auth/layout";
@@ -9,16 +15,16 @@ import VerifyUserOtp from "@/pages/auth/verify-user/verify-user-otp";
 import Academic from "@/pages/dashboard/academic";
 import Announcement from "@/pages/dashboard/announcement";
 import ContentManagement from "@/pages/dashboard/content-management";
-import { AdminDashboard } from "@/pages/dashboard/dashboard";
 import Events from "@/pages/dashboard/events";
-import { AdminDashboardLayout } from "@/pages/dashboard/layout";
 import Setting from "@/pages/dashboard/setting";
 import Users from "@/pages/dashboard/users";
 import NotFound from "@/pages/not-found";
-import { Routes, Route } from "react-router-dom";
-import { DashboardProtectedRoute } from "@/components/route-protection/dashboard-protected-route";
-import { AuthProtectedRoute } from "@/components/route-protection/auth-protected-route";
-import { ContentEditor } from "@/features/content-management/content-editor";
+import Restaurant from "@/pages/dashboard/restaurant";
+import Library from "@/pages/dashboard/library";
+import FreshMan from "@/pages/dashboard/fresh-man";
+import Services from "@/pages/dashboard/services";
+import AcademicPersonnel from "@/pages/dashboard/academic-personal";
+import CampusMap from "@/pages/dashboard/camous-map";
 
 const Paths = () => {
   return (
@@ -73,10 +79,16 @@ const Paths = () => {
         <Route path="academic" element={<Academic />} />
         <Route path="announcement" element={<Announcement />} />
         <Route path="content-management" element={<ContentManagement />} />
+        <Route path="edit-content" element={<ContentEditor />} />
         <Route path="events" element={<Events />} />
         <Route path="users" element={<Users />} />
         <Route path="settings" element={<Setting />} />
-        <Route path="edit-content" element={<ContentEditor />} />
+        <Route path="restaurant" element={<Restaurant />} />
+        <Route path="library" element={<Library />} />
+        <Route path="fresh-man" element={<FreshMan />} />
+        <Route path="services" element={<Services />} />
+        <Route path="academic-personnel" element={<AcademicPersonnel />} />
+        <Route path="campus-map" element={<CampusMap />} />
       </Route>
 
       {/* Not Found */}
diff --git a/src/store/atoms/content-management/content-management.ts b/src/store/atoms/content-management/content-management.ts
new file mode 100644
index 0000000..b30f13f
--- /dev/null
+++ b/src/store/atoms/content-management/content-management.ts
@@ -0,0 +1,7 @@
+import { atom } from "recoil";
+import { contentManagementSelector } from "../../selectors/content-management/content-management";
+
+export const Contentmanagement = atom({
+  key: "ContentmanagementAtom",
+  default: contentManagementSelector,
+});
diff --git a/src/store/hooks/content-management/content-management.ts b/src/store/hooks/content-management/content-management.ts
new file mode 100644
index 0000000..3a80534
--- /dev/null
+++ b/src/store/hooks/content-management/content-management.ts
@@ -0,0 +1,19 @@
+import { useRecoilStateLoadable } from "recoil";
+import { Contentmanagement } from "../../atoms/content-management/content-management";
+
+export const useContentManagementData = () => {
+  const [ContentManagementData, setContentManagementData] = useRecoilStateLoadable(Contentmanagement);
+
+  if (ContentManagementData.state === "loading") {
+    return { loading: true, error: false, ContentInfo: null };
+  } else if (ContentManagementData.state === "hasError") {
+    return { loading: false, error: true, ContentInfo: null };
+  }
+
+  return {
+    loading: false,
+    error: false,
+    ContentInfo: ContentManagementData.contents,
+    setContentManagementData,
+  };
+};
diff --git a/src/store/selectors/content-management/content-management.ts b/src/store/selectors/content-management/content-management.ts
new file mode 100644
index 0000000..e9d38f1
--- /dev/null
+++ b/src/store/selectors/content-management/content-management.ts
@@ -0,0 +1,27 @@
+import axios from "axios";
+import { selector } from "recoil";
+
+const base_api = import.meta.env.VITE_SERVER_BASE_URL;
+
+export const contentManagementSelector = selector({
+  key: "contentManagementSelector",
+  get: async () => {
+    try {
+      const response = await axios.get(`${base_api}/api/v1/get-all-articles`, {
+        withCredentials: true,
+      });
+
+      return response.data.AllArticles || [];
+    } catch (error: any) {
+      if (error?.response?.status === 401) {
+        return {
+          message: "User not authenticated",
+          isUserExist: null,
+        };
+      }
+
+      console.error("Articles fetch failed:", error.message);
+      throw error;
+    }
+  },
+});
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index 0b2adf7..72d8405 100644
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -193,3 +193,26 @@ export interface AllUsers {
   isGoogleAccount: boolean;
   isVerified: boolean;
 }
+
+// cms -- content-management
+
+// Interface matching your backend format
+export interface ContentManagement {
+  id?: string;
+  coverimage: string | null;
+  title: string;
+  subtitle: string;
+  slug: string;
+  author?: {
+    firstname: string;
+    lastname: string;
+  };
+  content: string;
+  status: string;
+  category: string;
+  metaTitle: string | null;
+  metaDescription: string | null;
+  keywords: string[];
+  publishedAt: Date;
+  focusKeyword: string | null;
+}