diff --git a/apps/kampus/app/pano/@modal/(.)post/create/page.tsx b/apps/kampus/app/pano/@modal/(.)post/create/page.tsx
new file mode 100644
index 00000000..fa5e1aba
--- /dev/null
+++ b/apps/kampus/app/pano/@modal/(.)post/create/page.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
+import { Dialog, DialogContent } from "@kampus/ui";
+
+import { CreatePanoPostForm } from "~/app/pano/CreatePanoPostForm";
+
+export default function CreatePost({ searchParams }: { searchParams: { conn: string } }) {
+  const router = useRouter();
+
+  return (
+    <Dialog open onOpenChange={() => router.back()}>
+      <DialogContent className="sm:max-w-[425px]">
+        <CreatePanoPostForm connectionID={searchParams.conn} onCompleted={() => router.back()} />
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/kampus/app/pano/@modal/(.)post/default.tsx b/apps/kampus/app/pano/@modal/(.)post/default.tsx
new file mode 100644
index 00000000..6ddf1b76
--- /dev/null
+++ b/apps/kampus/app/pano/@modal/(.)post/default.tsx
@@ -0,0 +1,3 @@
+export default function Default() {
+  return null;
+}
diff --git a/apps/kampus/app/pano/@modal/default.tsx b/apps/kampus/app/pano/@modal/default.tsx
new file mode 100644
index 00000000..6ddf1b76
--- /dev/null
+++ b/apps/kampus/app/pano/@modal/default.tsx
@@ -0,0 +1,3 @@
+export default function Default() {
+  return null;
+}
diff --git a/apps/kampus/app/pano/CreatePanoPostForm.tsx b/apps/kampus/app/pano/CreatePanoPostForm.tsx
new file mode 100644
index 00000000..26a99084
--- /dev/null
+++ b/apps/kampus/app/pano/CreatePanoPostForm.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import { graphql, useMutation } from "react-relay";
+import { z } from "zod";
+
+import {
+  Button,
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
+  Textarea,
+  useForm,
+} from "@kampus/ui";
+
+const mutation = graphql`
+  mutation CreatePanoPostFormMutation(
+    $title: String!
+    $content: String
+    $url: String
+    $connections: [ID!]!
+  ) {
+    createPanoPost(input: { url: $url, title: $title, content: $content }) {
+      edge @prependEdge(connections: $connections) {
+        cursor
+        node {
+          ...PostItem_post
+        }
+      }
+      error {
+        ... on UserError {
+          message
+        }
+      }
+    }
+  }
+`;
+
+const formSchema = z.object({
+  title: z.string().min(5, { message: "Başlık en az 5 karakterden oluşmalıdır" }),
+  url: z.string().url({ message: "URL duzgun degil" }),
+  content: z.string().optional(),
+});
+
+type FormSchema = z.infer<typeof formSchema>;
+
+interface Props {
+  connectionID?: string;
+  onCompleted?: () => void;
+}
+
+export function CreatePanoPostForm(props: Props) {
+  const [commit, isInFlight] = useMutation(mutation);
+
+  const form = useForm(formSchema, {
+    defaultValues: {
+      title: "",
+      url: "",
+      content: "",
+    },
+  });
+
+  const onSubmit = (values: FormSchema) => {
+    commit({
+      variables: {
+        title: values.title,
+        url: values.url,
+        content: values.content,
+        connections: [props.connectionID].filter(Boolean),
+      },
+      onError: (error) => {
+        console.error(error);
+      },
+      onCompleted: () => {
+        props.onCompleted?.();
+      },
+    });
+  };
+
+  const onCancel = () => {
+    props.onCompleted?.();
+  };
+
+  return (
+    <Form {...form}>
+      {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
+      <form className="flex flex-col gap-2" onSubmit={form.handleSubmit(onSubmit)}>
+        <FormField
+          control={form.control}
+          name="url"
+          render={(props) => (
+            <FormItem>
+              <FormLabel>URL</FormLabel>
+              <FormControl>
+                <Input placeholder="https://ornek.com" {...props.field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="title"
+          render={(props) => (
+            <FormItem>
+              <FormLabel>Başlık</FormLabel>
+              <FormControl>
+                <Input placeholder="Ornek baslik" {...props.field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="content"
+          render={(props) => (
+            <FormItem>
+              <FormLabel>Icerik</FormLabel>
+              <FormControl>
+                <Textarea placeholder="Ornek hakkindaki dusuncelerim .." {...props.field} />
+              </FormControl>
+              <FormDescription>Eklemek istediklerini ekleyebilirsin ..</FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <div className="flex justify-end gap-1.5">
+          <Button onClick={onCancel} variant="outline" type="reset">
+            Iptal
+          </Button>
+          <Button type="submit" disabled={isInFlight}>
+            Gonder
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+}
diff --git a/apps/kampus/app/pano/PanoFeed.tsx b/apps/kampus/app/pano/PanoFeed.tsx
index fae52922..7fee70e7 100644
--- a/apps/kampus/app/pano/PanoFeed.tsx
+++ b/apps/kampus/app/pano/PanoFeed.tsx
@@ -1,4 +1,5 @@
-import { Suspense, useCallback } from "react";
+import { Suspense } from "react";
+import Link from "next/link";
 import { graphql, useFragment, usePaginationFragment } from "react-relay";
 
 import { Button } from "@kampus/ui";
@@ -50,45 +51,46 @@ export function PanoFeed(props: Props) {
 
   const feed = data.panoFeed;
 
-  const loadPrevPage = useCallback(() => {
-    if (hasPrevious) {
-      loadPrevious(10);
-    }
-  }, [hasPrevious, loadPrevious]);
-
-  const loadNextPage = useCallback(() => {
-    if (hasNext) {
-      loadNext(10);
-    }
-  }, [hasNext, loadNext]);
-
   return (
-    <Suspense fallback="loading">
-      <section className="flex flex-col gap-4">
-        {feed?.edges?.map((edge) => {
-          if (!edge?.node) {
-            return null;
-          }
+    <>
+      <Button variant="outline" asChild>
+        <Link
+          href={{
+            pathname: `/post/create`,
+            search: `foo=bar`,
+          }}
+          as="post/create"
+        >
+          New post
+        </Link>
+      </Button>
+      <Suspense fallback="loading">
+        <section className="flex flex-col gap-4">
+          {feed?.edges?.map((edge) => {
+            if (!edge?.node) {
+              return null;
+            }
 
-          return (
-            <PostItem
-              key={edge.node.id}
-              post={edge.node}
-              viewerRef={viewer}
-              postConnectionId={data.panoFeed?.__id}
-            />
-          );
-        })}
+            return (
+              <PostItem
+                key={edge.node.id}
+                post={edge.node}
+                viewerRef={viewer}
+                postConnectionId={data.panoFeed?.__id}
+              />
+            );
+          })}
 
-        <div className="flex gap-2">
-          <Button variant="secondary" onClick={loadPrevPage} disabled={!hasPrevious}>
-            {"< Prev"}
-          </Button>
-          <Button variant="secondary" onClick={loadNextPage} disabled={!hasNext}>
-            {"Next >"}
-          </Button>
-        </div>
-      </section>
-    </Suspense>
+          <div className="flex gap-2">
+            <Button variant="secondary" onClick={() => loadPrevious(10)} disabled={!hasPrevious}>
+              {"< Prev"}
+            </Button>
+            <Button variant="secondary" onClick={() => loadNext(10)} disabled={!hasNext}>
+              {"Next >"}
+            </Button>
+          </div>
+        </section>
+      </Suspense>
+    </>
   );
 }
diff --git a/apps/kampus/app/pano/__generated__/CreatePanoPostFormMutation.graphql.ts b/apps/kampus/app/pano/__generated__/CreatePanoPostFormMutation.graphql.ts
new file mode 100644
index 00000000..04ceb68b
--- /dev/null
+++ b/apps/kampus/app/pano/__generated__/CreatePanoPostFormMutation.graphql.ts
@@ -0,0 +1,347 @@
+/**
+ * @generated SignedSource<<4ff94a56f36cabd941f8e6415b4cab9c>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest, Mutation } from 'relay-runtime';
+import { FragmentRefs } from "relay-runtime";
+export type CreatePanoPostFormMutation$variables = {
+  connections: ReadonlyArray<string>;
+  content?: string | null;
+  title: string;
+  url?: string | null;
+};
+export type CreatePanoPostFormMutation$data = {
+  readonly createPanoPost: {
+    readonly edge: {
+      readonly cursor: string;
+      readonly node: {
+        readonly " $fragmentSpreads": FragmentRefs<"PostItem_post">;
+      } | null;
+    } | null;
+    readonly error: {
+      readonly message?: string;
+    } | null;
+  } | null;
+};
+export type CreatePanoPostFormMutation = {
+  response: CreatePanoPostFormMutation$data;
+  variables: CreatePanoPostFormMutation$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = {
+  "defaultValue": null,
+  "kind": "LocalArgument",
+  "name": "connections"
+},
+v1 = {
+  "defaultValue": null,
+  "kind": "LocalArgument",
+  "name": "content"
+},
+v2 = {
+  "defaultValue": null,
+  "kind": "LocalArgument",
+  "name": "title"
+},
+v3 = {
+  "defaultValue": null,
+  "kind": "LocalArgument",
+  "name": "url"
+},
+v4 = [
+  {
+    "fields": [
+      {
+        "kind": "Variable",
+        "name": "content",
+        "variableName": "content"
+      },
+      {
+        "kind": "Variable",
+        "name": "title",
+        "variableName": "title"
+      },
+      {
+        "kind": "Variable",
+        "name": "url",
+        "variableName": "url"
+      }
+    ],
+    "kind": "ObjectValue",
+    "name": "input"
+  }
+],
+v5 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "cursor",
+  "storageKey": null
+},
+v6 = {
+  "kind": "InlineFragment",
+  "selections": [
+    {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "message",
+      "storageKey": null
+    }
+  ],
+  "type": "UserError",
+  "abstractKey": "__isUserError"
+},
+v7 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "id",
+  "storageKey": null
+};
+return {
+  "fragment": {
+    "argumentDefinitions": [
+      (v0/*: any*/),
+      (v1/*: any*/),
+      (v2/*: any*/),
+      (v3/*: any*/)
+    ],
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "CreatePanoPostFormMutation",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v4/*: any*/),
+        "concreteType": "CreatePanoPostPayload",
+        "kind": "LinkedField",
+        "name": "createPanoPost",
+        "plural": false,
+        "selections": [
+          {
+            "alias": null,
+            "args": null,
+            "concreteType": "PanoPostEdge",
+            "kind": "LinkedField",
+            "name": "edge",
+            "plural": false,
+            "selections": [
+              (v5/*: any*/),
+              {
+                "alias": null,
+                "args": null,
+                "concreteType": "PanoPost",
+                "kind": "LinkedField",
+                "name": "node",
+                "plural": false,
+                "selections": [
+                  {
+                    "args": null,
+                    "kind": "FragmentSpread",
+                    "name": "PostItem_post"
+                  }
+                ],
+                "storageKey": null
+              }
+            ],
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "concreteType": null,
+            "kind": "LinkedField",
+            "name": "error",
+            "plural": false,
+            "selections": [
+              (v6/*: any*/)
+            ],
+            "storageKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ],
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": [
+      (v2/*: any*/),
+      (v1/*: any*/),
+      (v3/*: any*/),
+      (v0/*: any*/)
+    ],
+    "kind": "Operation",
+    "name": "CreatePanoPostFormMutation",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v4/*: any*/),
+        "concreteType": "CreatePanoPostPayload",
+        "kind": "LinkedField",
+        "name": "createPanoPost",
+        "plural": false,
+        "selections": [
+          {
+            "alias": null,
+            "args": null,
+            "concreteType": "PanoPostEdge",
+            "kind": "LinkedField",
+            "name": "edge",
+            "plural": false,
+            "selections": [
+              (v5/*: any*/),
+              {
+                "alias": null,
+                "args": null,
+                "concreteType": "PanoPost",
+                "kind": "LinkedField",
+                "name": "node",
+                "plural": false,
+                "selections": [
+                  (v7/*: any*/),
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "title",
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "content",
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "url",
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "createdAt",
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "site",
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "commentCount",
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "isUpvotedByViewer",
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "upvoteCount",
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "concreteType": "User",
+                    "kind": "LinkedField",
+                    "name": "owner",
+                    "plural": false,
+                    "selections": [
+                      {
+                        "alias": null,
+                        "args": null,
+                        "kind": "ScalarField",
+                        "name": "displayName",
+                        "storageKey": null
+                      },
+                      (v7/*: any*/)
+                    ],
+                    "storageKey": null
+                  }
+                ],
+                "storageKey": null
+              }
+            ],
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "filters": null,
+            "handle": "prependEdge",
+            "key": "",
+            "kind": "LinkedHandle",
+            "name": "edge",
+            "handleArgs": [
+              {
+                "kind": "Variable",
+                "name": "connections",
+                "variableName": "connections"
+              }
+            ]
+          },
+          {
+            "alias": null,
+            "args": null,
+            "concreteType": null,
+            "kind": "LinkedField",
+            "name": "error",
+            "plural": false,
+            "selections": [
+              {
+                "alias": null,
+                "args": null,
+                "kind": "ScalarField",
+                "name": "__typename",
+                "storageKey": null
+              },
+              (v6/*: any*/)
+            ],
+            "storageKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ]
+  },
+  "params": {
+    "cacheID": "2a9f2bd39fa4c75bdbd1d46d297a31cb",
+    "id": null,
+    "metadata": {},
+    "name": "CreatePanoPostFormMutation",
+    "operationKind": "mutation",
+    "text": "mutation CreatePanoPostFormMutation(\n  $title: String!\n  $content: String\n  $url: String\n) {\n  createPanoPost(input: {url: $url, title: $title, content: $content}) {\n    edge {\n      cursor\n      node {\n        ...PostItem_post\n        id\n      }\n    }\n    error {\n      __typename\n      ... on UserError {\n        __isUserError: __typename\n        message\n      }\n    }\n  }\n}\n\nfragment MoreOptions_post on PanoPost {\n  id\n  owner {\n    displayName\n    id\n  }\n}\n\nfragment PostItem_post on PanoPost {\n  id\n  title\n  content\n  url\n  createdAt\n  site\n  commentCount\n  ...PostUpvoteButton_post\n  owner {\n    displayName\n    id\n  }\n  ...MoreOptions_post\n}\n\nfragment PostUpvoteButton_post on PanoPost {\n  id\n  isUpvotedByViewer\n  upvoteCount\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "a6872c9a0e392fe60bf9e28d727e20ba";
+
+export default node;
diff --git a/apps/kampus/app/pano/__generated__/PanoFeedPaginationQuery.graphql.ts b/apps/kampus/app/pano/__generated__/PanoFeedPaginationQuery.graphql.ts
index cf2714ab..61757032 100644
--- a/apps/kampus/app/pano/__generated__/PanoFeedPaginationQuery.graphql.ts
+++ b/apps/kampus/app/pano/__generated__/PanoFeedPaginationQuery.graphql.ts
@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<b305e874248dc95e59805f20aac1f419>>
+ * @generated SignedSource<<2f2d885113d9534aa68e642c78458ee8>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -186,6 +186,13 @@ return {
                         "name": "site",
                         "storageKey": null
                       },
+                      {
+                        "alias": null,
+                        "args": null,
+                        "kind": "ScalarField",
+                        "name": "commentCount",
+                        "storageKey": null
+                      },
                       {
                         "alias": null,
                         "args": null,
@@ -301,12 +308,12 @@ return {
     ]
   },
   "params": {
-    "cacheID": "2fa3d4b245b0acc80462563f1be852b7",
+    "cacheID": "5d8b1976de94f5cb82d7e26a7afab6c4",
     "id": null,
     "metadata": {},
     "name": "PanoFeedPaginationQuery",
     "operationKind": "query",
-    "text": "query PanoFeedPaginationQuery(\n  $after: String\n  $before: String\n  $first: Int = 10\n  $last: Int\n) {\n  viewer {\n    ...PanoFeedFragment_pbnwq\n  }\n}\n\nfragment MoreOptions_post on PanoPost {\n  id\n  owner {\n    displayName\n    id\n  }\n}\n\nfragment PanoFeedFragment_pbnwq on Viewer {\n  panoFeed(first: $first, after: $after, last: $last, before: $before) {\n    edges {\n      cursor\n      node {\n        id\n        ...PostItem_post\n        __typename\n      }\n    }\n    pageInfo {\n      endCursor\n      hasNextPage\n      hasPreviousPage\n      startCursor\n    }\n  }\n}\n\nfragment PostItem_post on PanoPost {\n  id\n  title\n  content\n  url\n  createdAt\n  site\n  ...PostUpvoteButton_post\n  owner {\n    displayName\n    id\n  }\n  ...MoreOptions_post\n}\n\nfragment PostUpvoteButton_post on PanoPost {\n  id\n  isUpvotedByViewer\n  upvoteCount\n}\n"
+    "text": "query PanoFeedPaginationQuery(\n  $after: String\n  $before: String\n  $first: Int = 10\n  $last: Int\n) {\n  viewer {\n    ...PanoFeedFragment_pbnwq\n  }\n}\n\nfragment MoreOptions_post on PanoPost {\n  id\n  owner {\n    displayName\n    id\n  }\n}\n\nfragment PanoFeedFragment_pbnwq on Viewer {\n  panoFeed(first: $first, after: $after, last: $last, before: $before) {\n    edges {\n      cursor\n      node {\n        id\n        ...PostItem_post\n        __typename\n      }\n    }\n    pageInfo {\n      endCursor\n      hasNextPage\n      hasPreviousPage\n      startCursor\n    }\n  }\n}\n\nfragment PostItem_post on PanoPost {\n  id\n  title\n  content\n  url\n  createdAt\n  site\n  commentCount\n  ...PostUpvoteButton_post\n  owner {\n    displayName\n    id\n  }\n  ...MoreOptions_post\n}\n\nfragment PostUpvoteButton_post on PanoPost {\n  id\n  isUpvotedByViewer\n  upvoteCount\n}\n"
   }
 };
 })();
diff --git a/apps/kampus/app/pano/__generated__/PostListContainerQuery.graphql.ts b/apps/kampus/app/pano/__generated__/PostListContainerQuery.graphql.ts
index 4a3edfd9..783a75e5 100644
--- a/apps/kampus/app/pano/__generated__/PostListContainerQuery.graphql.ts
+++ b/apps/kampus/app/pano/__generated__/PostListContainerQuery.graphql.ts
@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<e309efdc8d21815a694683ff388308a1>>
+ * @generated SignedSource<<a3ac7bf0bd3649387387eb357aef5c04>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -163,6 +163,13 @@ return {
                         "name": "site",
                         "storageKey": null
                       },
+                      {
+                        "alias": null,
+                        "args": null,
+                        "kind": "ScalarField",
+                        "name": "commentCount",
+                        "storageKey": null
+                      },
                       {
                         "alias": null,
                         "args": null,
@@ -280,12 +287,12 @@ return {
     ]
   },
   "params": {
-    "cacheID": "8d8a203cd59b6775cfbc8daaad9001ef",
+    "cacheID": "046307bf078e70e6dddbc19cdbf24f9f",
     "id": null,
     "metadata": {},
     "name": "PostListContainerQuery",
     "operationKind": "query",
-    "text": "query PostListContainerQuery {\n  viewer {\n    ...PanoFeedFragment\n    ...PanoFeed_viewer\n  }\n}\n\nfragment MoreOptions_post on PanoPost {\n  id\n  owner {\n    displayName\n    id\n  }\n}\n\nfragment MoreOptions_viewer on Viewer {\n  actor {\n    __typename\n    displayName\n    id\n  }\n}\n\nfragment PanoFeedFragment on Viewer {\n  panoFeed(first: 10) {\n    edges {\n      cursor\n      node {\n        id\n        ...PostItem_post\n        __typename\n      }\n    }\n    pageInfo {\n      endCursor\n      hasNextPage\n      hasPreviousPage\n      startCursor\n    }\n  }\n}\n\nfragment PanoFeed_viewer on Viewer {\n  ...PostItem_viewer\n}\n\nfragment PostItem_post on PanoPost {\n  id\n  title\n  content\n  url\n  createdAt\n  site\n  ...PostUpvoteButton_post\n  owner {\n    displayName\n    id\n  }\n  ...MoreOptions_post\n}\n\nfragment PostItem_viewer on Viewer {\n  ...MoreOptions_viewer\n  actor {\n    __typename\n    displayName\n    id\n  }\n}\n\nfragment PostUpvoteButton_post on PanoPost {\n  id\n  isUpvotedByViewer\n  upvoteCount\n}\n"
+    "text": "query PostListContainerQuery {\n  viewer {\n    ...PanoFeedFragment\n    ...PanoFeed_viewer\n  }\n}\n\nfragment MoreOptions_post on PanoPost {\n  id\n  owner {\n    displayName\n    id\n  }\n}\n\nfragment MoreOptions_viewer on Viewer {\n  actor {\n    __typename\n    displayName\n    id\n  }\n}\n\nfragment PanoFeedFragment on Viewer {\n  panoFeed(first: 10) {\n    edges {\n      cursor\n      node {\n        id\n        ...PostItem_post\n        __typename\n      }\n    }\n    pageInfo {\n      endCursor\n      hasNextPage\n      hasPreviousPage\n      startCursor\n    }\n  }\n}\n\nfragment PanoFeed_viewer on Viewer {\n  ...PostItem_viewer\n}\n\nfragment PostItem_post on PanoPost {\n  id\n  title\n  content\n  url\n  createdAt\n  site\n  commentCount\n  ...PostUpvoteButton_post\n  owner {\n    displayName\n    id\n  }\n  ...MoreOptions_post\n}\n\nfragment PostItem_viewer on Viewer {\n  ...MoreOptions_viewer\n  actor {\n    __typename\n    displayName\n    id\n  }\n}\n\nfragment PostUpvoteButton_post on PanoPost {\n  id\n  isUpvotedByViewer\n  upvoteCount\n}\n"
   }
 };
 })();
diff --git a/apps/kampus/app/pano/features/post-list/MoreOptions.tsx b/apps/kampus/app/pano/features/post-list/MoreOptions.tsx
index adf94c70..085b3540 100644
--- a/apps/kampus/app/pano/features/post-list/MoreOptions.tsx
+++ b/apps/kampus/app/pano/features/post-list/MoreOptions.tsx
@@ -104,7 +104,7 @@ export const MoreOptionsDropdown = (props: Props) => {
             <MoreHorizontal size="16" aria-label="Daha fazla seçenek" />
           </Button>
         </DropdownMenuTrigger>
-        <DropdownMenuContent>
+        <DropdownMenuContent align="end">
           {canUserEdit(viewer?.actor?.displayName, post?.owner?.displayName) && (
             <>
               <DropdownMenuItem asChild key="edit">
diff --git a/apps/kampus/app/pano/features/post-list/PostItem.tsx b/apps/kampus/app/pano/features/post-list/PostItem.tsx
index aa0b3d6e..5aeeb7f7 100644
--- a/apps/kampus/app/pano/features/post-list/PostItem.tsx
+++ b/apps/kampus/app/pano/features/post-list/PostItem.tsx
@@ -1,11 +1,12 @@
 "use client";
 
 import NextLink from "next/link";
+import { ExternalLinkIcon, MessageCircleIcon } from "lucide-react";
 import { graphql, useFragment } from "react-relay";
 
+import { Card, CardContent, CardFooter, CardTitle, TimeAgo } from "@kampus/ui";
 import { cn } from "@kampus/ui/utils";
 
-import { TimeAgo } from "~/../../packages/ui";
 import { type PostItem_post$key } from "./__generated__/PostItem_post.graphql";
 import { type PostItem_viewer$key } from "./__generated__/PostItem_viewer.graphql";
 import { MoreOptionsDropdown } from "./MoreOptions";
@@ -35,6 +36,7 @@ const usePanoPostFragment = (key: PostItem_post$key | null) =>
         url
         createdAt
         site
+        commentCount @required(action: LOG)
 
         ...PostUpvoteButton_post
 
@@ -76,24 +78,38 @@ export const PostItem = (props: PostItemProps) => {
   }
 
   return (
-    <section className="flex h-full items-center gap-2 rounded">
-      <UpvoteButton postRef={post} />
+    <Card className="flex flex-row items-center gap-6 p-6">
+      <div className="flex flex-col gap-3 p-0">
+        <UpvoteButton postRef={post} />
+      </div>
 
-      <div className="flex w-full flex-col justify-center">
-        <div className="flex items-center gap-1 align-baseline">
+      <CardContent className="flex flex-1 flex-col gap-2 p-0">
+        <CardTitle className="flex gap-3">
           <Link className="font-semibold" href={post.url ?? ""}>
             {post.title}
           </Link>
-          <Link className="text-sm" href={post.url ?? ""}>
-            {post.site ?? ""}
-          </Link>
-        </div>
-        <div className="flex items-center gap-1 text-sm">
-          <div>@{post.owner.displayName} |</div>
-          <div>
-            <Link href={`/pano/post/${post.id}`}>0 yorum</Link> |
+
+          <div className="text-muted-foreground flex items-center gap-1 text-sm">
+            <Link className="text-sm" href={post.url ?? ""}>
+              {post.site ?? ""}
+            </Link>
+            <ExternalLinkIcon size={12} />
           </div>
+        </CardTitle>
+        <div className="text-muted-foreground flex text-sm">
+          <div>@{post.owner.displayName}</div>&nbsp;·&nbsp;
           <TimeAgo date={new Date(post.createdAt as string)} />
+        </div>
+
+        <div className="flex items-center gap-4 text-sm">
+          <div className="flex items-center gap-1 font-semibold">
+            <MessageCircleIcon size="12" />
+            <Link href={`/pano/post/${post.id}`}>{`${post.commentCount} yorum`}</Link>
+          </div>
+        </div>
+      </CardContent>
+      <CardFooter className="flex h-full flex-col justify-between p-0">
+        <div className="flex flex-1 flex-col">
           <MoreOptionsDropdown
             key={post.id}
             post={post}
@@ -101,7 +117,7 @@ export const PostItem = (props: PostItemProps) => {
             postConnectionId={props.postConnectionId}
           />
         </div>
-      </div>
-    </section>
+      </CardFooter>
+    </Card>
   );
 };
diff --git a/apps/kampus/app/pano/features/post-list/PostUpvoteButton.tsx b/apps/kampus/app/pano/features/post-list/PostUpvoteButton.tsx
index 0e8c379c..464e1213 100644
--- a/apps/kampus/app/pano/features/post-list/PostUpvoteButton.tsx
+++ b/apps/kampus/app/pano/features/post-list/PostUpvoteButton.tsx
@@ -1,4 +1,4 @@
-import { Triangle } from "lucide-react";
+import { ArrowBigUp, Triangle, TriangleIcon } from "lucide-react";
 import { graphql, useFragment, useMutation } from "react-relay";
 
 import { Button } from "@kampus/ui";
@@ -53,8 +53,7 @@ export const UpvoteButton = (props: UpvoteProps) => {
 
   const disabled = isCreating || isRemoving;
 
-  const upvoteStyle = post?.isUpvotedByViewer ? "fill-primary" : "fill-none";
-  const combinedStyle = cn(upvoteStyle);
+  const upvoteStyle = cn();
 
   const onClick = () => {
     if (!post) {
@@ -73,14 +72,15 @@ export const UpvoteButton = (props: UpvoteProps) => {
   };
 
   return (
-    <Button
-      onClick={onClick}
-      disabled={disabled}
-      className="flex h-full flex-col"
-      variant="outline"
-    >
-      <Triangle className={combinedStyle} size={12} />
-      {post?.upvoteCount ?? 0}
-    </Button>
+    <>
+      <Button onClick={onClick} disabled={disabled} variant="ghost" size="icon">
+        <ArrowBigUp
+          fill={post.isUpvotedByViewer ? "currentColor" : "none"}
+          className={upvoteStyle}
+          size="24"
+        />
+      </Button>
+      <div className="text-center font-semibold">{post?.upvoteCount ?? 0}</div>
+    </>
   );
 };
diff --git a/apps/kampus/app/pano/features/post-list/__generated__/PostItem_post.graphql.ts b/apps/kampus/app/pano/features/post-list/__generated__/PostItem_post.graphql.ts
index d7bae815..71cfa397 100644
--- a/apps/kampus/app/pano/features/post-list/__generated__/PostItem_post.graphql.ts
+++ b/apps/kampus/app/pano/features/post-list/__generated__/PostItem_post.graphql.ts
@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<f1e4f6f5072c925f50590ec6402945d6>>
+ * @generated SignedSource<<5f75e5667edef9e6857b85ad1a46e63d>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -11,6 +11,7 @@
 import { Fragment, ReaderFragment } from 'relay-runtime';
 import { FragmentRefs } from "relay-runtime";
 export type PostItem_post$data = {
+  readonly commentCount: number;
   readonly content: string | null;
   readonly createdAt: any;
   readonly id: string;
@@ -76,6 +77,18 @@ const node: ReaderFragment = {
       "name": "site",
       "storageKey": null
     },
+    {
+      "kind": "RequiredField",
+      "field": {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "commentCount",
+        "storageKey": null
+      },
+      "action": "LOG",
+      "path": "commentCount"
+    },
     {
       "args": null,
       "kind": "FragmentSpread",
@@ -119,6 +132,6 @@ const node: ReaderFragment = {
   "abstractKey": null
 };
 
-(node as any).hash = "40952525253258c86b4d4320cf4279a0";
+(node as any).hash = "03c1325a353b031abe75c421b022ef9f";
 
 export default node;
diff --git a/apps/kampus/app/pano/layout.tsx b/apps/kampus/app/pano/layout.tsx
index 60428b8c..4e3a7146 100644
--- a/apps/kampus/app/pano/layout.tsx
+++ b/apps/kampus/app/pano/layout.tsx
@@ -1,4 +1,10 @@
-export default function PanoLayout({ children }: { children: React.ReactNode }) {
+export default function PanoLayout({
+  children,
+  modal,
+}: {
+  children: React.ReactNode;
+  modal: React.ReactNode;
+}) {
   return (
     <section
       aria-label="PanoLayout"
@@ -6,6 +12,7 @@ export default function PanoLayout({ children }: { children: React.ReactNode })
       className="bg-background container mx-auto max-w-5xl py-10"
     >
       {children}
+      {modal}
     </section>
   );
 }
diff --git a/apps/kampus/app/pano/post/create/page.tsx b/apps/kampus/app/pano/post/create/page.tsx
index 035507a1..debd7258 100644
--- a/apps/kampus/app/pano/post/create/page.tsx
+++ b/apps/kampus/app/pano/post/create/page.tsx
@@ -1,3 +1,10 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
+import { CreatePanoPostForm } from "../../CreatePanoPostForm";
+
 export default function CreatePost() {
-  return <div>CreatePost</div>
+  const router = useRouter();
+  return <CreatePanoPostForm onCompleted={() => router.push("/")} />;
 }
diff --git a/apps/kampus/app/pano/post/default.tsx b/apps/kampus/app/pano/post/default.tsx
new file mode 100644
index 00000000..6ddf1b76
--- /dev/null
+++ b/apps/kampus/app/pano/post/default.tsx
@@ -0,0 +1,3 @@
+export default function Default() {
+  return null;
+}
diff --git a/package-lock.json b/package-lock.json
index 3fd1a928..a9565335 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -76,7 +76,7 @@
       "dependencies": {
         "@kampus/next-auth": "*",
         "@kampus/relay": "*",
-        "@kampus/ui": "^0.0.0",
+        "@kampus/ui": "*",
         "react-relay": "15.0.0",
         "relay-compiler": "15.0.0",
         "znv": "0.3.2",
@@ -6242,6 +6242,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
+      "integrity": "sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-presence": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.1.tgz",
@@ -6550,23 +6568,6 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-id": {
-      "version": "1.0.1",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-use-layout-effect": "1.0.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-popper": {
       "version": "1.1.2",
       "license": "MIT",
@@ -25599,23 +25600,6 @@
         }
       }
     },
-    "packages/ui/node_modules/@radix-ui/react-id": {
-      "version": "1.0.1",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-use-layout-effect": "1.0.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "packages/ui/node_modules/@radix-ui/react-label": {
       "version": "2.0.2",
       "license": "MIT",
diff --git a/packages/ui/components/button.tsx b/packages/ui/components/button.tsx
index 2ada7f0d..f4aef727 100644
--- a/packages/ui/components/button.tsx
+++ b/packages/ui/components/button.tsx
@@ -2,16 +2,16 @@ import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@kampus/ui/utils";
+import { cn } from "../utils";
 
 const buttonVariants = cva(
-  "focus-visible:ring-ring ring-offset-background inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground hover:bg-primary/90",
         destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline: "border-input hover:bg-accent hover:text-accent-foreground border",
+        outline: "border-input bg-background hover:bg-accent hover:text-accent-foreground border",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
@@ -20,6 +20,7 @@ const buttonVariants = cva(
         default: "h-10 px-4 py-2",
         sm: "h-9 rounded-md px-3",
         lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
       },
     },
     defaultVariants: {
diff --git a/packages/ui/components/dialog.tsx b/packages/ui/components/dialog.tsx
index c283d0a4..491d2215 100644
--- a/packages/ui/components/dialog.tsx
+++ b/packages/ui/components/dialog.tsx
@@ -10,6 +10,8 @@ const Dialog = DialogPrimitive.Root;
 
 const DialogTrigger = DialogPrimitive.Trigger;
 
+const DialogClose = DialogPrimitive.Close;
+
 const DialogPortal = ({ className, children, ...props }: DialogPrimitive.DialogPortalProps) => (
   <DialogPrimitive.Portal className={cn(className)} {...props}>
     <div className="fixed inset-0 z-50 flex items-start justify-center sm:items-center">
@@ -99,6 +101,7 @@ export {
   Dialog,
   DialogTrigger,
   DialogContent,
+  DialogClose,
   DialogHeader,
   DialogFooter,
   DialogTitle,