diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index b6e3d23..eff9721 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -28,6 +28,9 @@ const Index: React.FC = () => {
               <Link className='nav-link' to='/'>
                 Home
               </Link>
+              <Link className='nav-link' to='/admin'>
+                Admin
+              </Link>
             </Nav>
             <Nav>
               <span className='my-1 mx-0'>
@@ -45,8 +48,14 @@ const Index: React.FC = () => {
               </span>
               {user && user.is_admin ? (
                 <NavDropdown title='Administration' className='my-1'>
-                  <Link to='/create' className='dropdown-item'>
-                    Create Movie
+                  <Link to='/MovieManage' className='dropdown-item'>
+                    Manage Movies
+                  </Link>
+                  <Link to='/PromoManage' className='dropdown-item'>
+                    Manage Promotions
+                  </Link>
+                  <Link to='/UserManage' className='dropdown-item'>
+                    Manage Users
                   </Link>
                 </NavDropdown>
               ) : null}
diff --git a/src/pages/Admin/index.tsx b/src/pages/Admin/index.tsx
new file mode 100644
index 0000000..9037a56
--- /dev/null
+++ b/src/pages/Admin/index.tsx
@@ -0,0 +1,23 @@
+import PageContainer from 'components/PageContainer'
+import { Link } from 'react-router-dom'
+
+
+const Index: React.FC = () => {
+  return (
+    <PageContainer>
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
+        <Link className='nav-link' to='/ManageMovies'>
+                Manage Movies
+        </Link>
+        <Link className='nav-link' to='/ManageUsers'>
+                Manage Users
+        </Link>
+        <Link className='nav-link' to='/ManagePromos'>
+                Manage Promotions
+        </Link>
+      </div>
+    </PageContainer>
+  );
+}
+
+export default Index
diff --git a/src/pages/MovieManage/index.tsx b/src/pages/MovieManage/index.tsx
new file mode 100644
index 0000000..7c9ff78
--- /dev/null
+++ b/src/pages/MovieManage/index.tsx
@@ -0,0 +1,240 @@
+import { useRequest } from 'ahooks'
+import PageContainer from 'components/PageContainer'
+import { useState } from 'react'
+import Button from 'react-bootstrap/Button'
+import Form from 'react-bootstrap/Form'
+import { useNavigate } from 'react-router-dom'
+import Backend from 'utils/service'
+import { Col, Modal, Row } from 'react-bootstrap'
+import type { SchemaMovie } from 'client'
+import Card from 'react-bootstrap/Card'
+import { Link } from 'react-router-dom'
+import { ListGroup } from 'react-bootstrap'
+
+interface LeftHalfProps {
+  // Props
+}
+
+const Movie: React.FC<{ movie: SchemaMovie }> = ({ movie }) => {
+  const [show, setShow] = useState(false)
+
+  const handleClose = () => setShow(false)
+  const handleShow = () => setShow(true)
+  
+  return (
+    <Card className='mb-3'>
+      <Card.Img variant='top' src={movie.trailer_picture} />
+      <Card.Body>
+        <Card.Title>{movie.title}</Card.Title>
+        <Card.Text>
+        </Card.Text>
+        <Link to={`/movie/${movie.id}/book`}>
+          <Button variant='primary'>Edit</Button>
+        </Link>
+      </Card.Body>
+      <Modal
+        size='lg'
+        aria-labelledby='contained-modal-title-vcenter'
+        centered
+        show={show}
+        onHide={handleClose}
+      >
+        <Modal.Header closeButton>
+          <Modal.Title>Trailer of {movie.title}</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          {/* eslint-disable-next-line react/iframe-missing-sandbox */}
+          <iframe
+            width='100%'
+            height='400px'
+            src={movie.trailer_video}
+            title='Trailer'
+            allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
+            allowFullScreen
+            sandbox='allow-scripts allow-popups allow-same-origin'
+          />
+        </Modal.Body>
+      </Modal>
+    </Card>
+  )
+}
+
+const MovieList: React.FC<{ movies: SchemaMovie[] }> = ({ movies }) => (
+  <Row>
+    {movies.map(movie => (
+      <Col key={movie.id} xs={12} sm={6} xl={4}>
+        <Movie movie={movie} />
+      </Col>
+    ))}
+  </Row>
+)
+
+const SearchList: React.FC<{ search: string }> = ({ search }) => {
+  const { data, loading } = useRequest(
+    async () => Backend.movie.v1MoviesList({ running: true, search }),
+    { refreshDeps: [search], debounceWait: 200 }
+  )
+  return (
+    !loading && (data?.data.data ? <MovieList movies={data.data.data} /> : null)
+  )
+}
+
+const LeftHalf: React.FC<LeftHalfProps> = () => {
+  const [search, setSearch] = useState('');
+  const [showEditPopup, setShowEditPopup] = useState(false);
+
+  const handleEditClick = () => {
+    setShowEditPopup(true);
+  };
+
+  const handleCloseEditPopup = () => {
+    setShowEditPopup(false);
+  };
+
+  return (
+    <div style={{ width: '50%', padding: '20px' }}>
+      <div style={{display:'flex'}}>
+        <h2>Edit Movie</h2>
+        <Button variant="primary" onClick={handleEditClick} style={{marginLeft:'210px'}}> {/* Only here due to a lack of backend functionality!!! */}
+          Edit
+        </Button>
+      </div>
+      
+      <Modal show={showEditPopup} onHide={handleCloseEditPopup}>
+        <Modal.Header closeButton>
+          <Modal.Title>Edit Movie</Modal.Title>
+        </Modal.Header>
+        <Modal.Body style={{ display: 'flex', paddingRight: '390px', justifyContent: 'center', alignItems: 'center' }}>
+          <RightHalf />
+        </Modal.Body>
+      </Modal>
+
+      <div style={{ padding: '10px' }} className="text-center mb-3">
+        <Form.Control
+          style={{width:'400px'}}
+          type="text"
+          placeholder="Search"
+          onChange={(e) => setSearch(e.target.value)}
+        />
+        
+        <SearchList search={search} />
+        
+      </div>
+    </div>
+  );
+};
+
+
+interface RightHalfProps {
+  // Props
+}
+
+const RightHalf: React.FC<RightHalfProps> = () => {
+  const navigate = useNavigate();
+  const [movieTitle, setMovieTitle] = useState('');
+  const { run: create } = useRequest(
+    async () =>
+    // TODO: replace the movie with user input
+    Backend.movie.v1MoviesCreate({
+      title: movieTitle,
+      cast: 'cast',
+      category: 'category',
+      director: 'director',
+      producer: 'producer',
+      rating_code: 'rating_code',
+      reviews: 'reviews',
+      show_time: '2016-01-02T15:04:05Z',
+      synopsis: 'synopsis',
+      trailer_picture: 'https://placehold.co/400x592',
+      trailer_video:
+        'https://www.youtube.com/embed/NpEaa2P7qZI?si=Ev2ybUCHzVxQPIO1&amp;controls=0'
+    }),
+  {
+    manual: true,
+    onSuccess: () => {
+      navigate('/')
+    }
+  }
+  );
+
+  return (
+    <div style={{ width: '50%', paddingTop: '10px' }}>
+      <Card style={{width: '400px'}}>
+        <Card.Body>
+          <Card.Title>Movie Details</Card.Title>
+          <Form>
+            <ListGroup className="mb-3" style={{}}>
+              <ListGroup.Item style={{ padding: '5px 0', border: 'none' }}>
+                <Form.Label>Movie Title</Form.Label>
+                <Form.Control
+                  type="text"
+                  placeholder="Movie title"
+                  value={movieTitle}
+                  onChange={(e) => setMovieTitle(e.target.value)}
+                />
+              </ListGroup.Item>
+              <ListGroup.Item style={{ padding: '5px 0', border: 'none' }}>
+                <Form.Label>Add cast members</Form.Label>
+                <Form.Control
+                  type="text"
+                  placeholder="Cast member"
+                />
+              </ListGroup.Item>
+              <ListGroup.Item style={{ padding: '5px 0', border: 'none' }}>
+                <Form.Label>Category</Form.Label>
+                <Form.Control
+                  type="text"
+                  placeholder="Category"
+                />
+              </ListGroup.Item>
+              <ListGroup.Item style={{ padding: '5px 0', border: 'none' }}>
+                <Form.Label>Director</Form.Label>
+                <Form.Control
+                  type="text"
+                  placeholder="Director"
+                />
+              </ListGroup.Item>
+              <ListGroup.Item style={{ padding: '5px 0', border: 'none' }}>
+                <Form.Label>Producer</Form.Label>
+                <Form.Control
+                  type="text"
+                  placeholder="Producer"
+                />
+              </ListGroup.Item>
+              <ListGroup.Item style={{ padding: '5px 0', border: 'none' }}>
+                <Form.Label>Rating</Form.Label>
+                <Form.Control
+                  type="text"
+                  placeholder="Rating code"
+                />
+              </ListGroup.Item>
+            </ListGroup>
+            <Button
+              variant="primary"
+              type="button"
+              onClick={create}
+            >
+              Submit
+            </Button>
+          </Form>
+        </Card.Body>
+      </Card>
+    </div>
+  );
+};
+
+const Index: React.FC = () => {
+  return (
+    <PageContainer>
+      <div style={{ display: 'flex' }}>
+        <LeftHalf />
+        <div style={{ display: 'flex', flexDirection:'column', padding:'20px' }}>
+          <h2>Add Movie</h2>
+          <RightHalf />
+        </div>
+      </div>
+    </PageContainer>
+  );
+}
+
+export default Index
diff --git a/src/pages/PromoManage/index.tsx b/src/pages/PromoManage/index.tsx
new file mode 100644
index 0000000..0a49f18
--- /dev/null
+++ b/src/pages/PromoManage/index.tsx
@@ -0,0 +1,184 @@
+import PageContainer from 'components/PageContainer'
+import { useState } from 'react'
+import { ListGroup, Button } from 'react-bootstrap'
+import Card from 'react-bootstrap/Card'
+import React, {useEffect } from 'react';
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+interface User {
+  id: string;
+  created_at: string;
+  updated_at: string;
+  is_active: boolean;
+  is_admin: boolean;
+  username: string;
+  email: string;
+  first_name: string;
+  last_name: string;
+  // other user properties...?
+}
+
+function UserList() {
+
+  const listyle = {
+    padding: '10px',
+    border: '1px solid #ccc',
+    marginBottom: '10px',
+    cursor: 'pointer',
+  };
+
+  const users = [
+      { username: "demo", email: 'demo@example.com' },
+      { username: "user2", email: 'user@example.com' },
+      
+    ];
+
+  return(
+    <div style={{ maxHeight: '200px' }}>
+      <h2>User List</h2>
+      <ListGroup style={{ paddingTop: '10px',maxHeight: '200px', overflowY: 'auto', width: '350px' }}>
+        {users.map((user) => (
+          <ListGroup.Item key={user.username} style={listyle}>
+            {user.email} : {user.username}
+          </ListGroup.Item>
+        ))}
+      </ListGroup>
+    </div>
+  );
+};
+
+const EditPromo: React.FC<{ onClose: () => void; selectedPromoTitle: string;}> = ({
+  onClose,
+  selectedPromoTitle
+}) => {
+  return (
+    <Card style={{ borderRadius: '10px', padding: '20px', marginBottom: '20px', width: '300px' }}>
+      
+      <h3 style={{ padding: '10px' }}>
+        {selectedPromoTitle === "New Promo" ? "Add " : "Edit: "} {selectedPromoTitle}
+      </h3>
+      <input type="text" placeholder="Promo title" style={{ marginBottom: '10px' }} />
+      <input type="text" placeholder="Movie affected" style={{ marginBottom: '10px' }} />
+      <input type="text" placeholder="Discount percentage" style={{ marginBottom: '10px' }} />
+      <input type="text" placeholder="Date applicable" style={{ marginBottom: '10px' }} />
+      
+      <div style={{ padding: '10px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+          <Button style={{ width: '80px', padding: '5px', margin: '0 5px'}} variant="primary" onClick={onClose}>
+            Submit
+          </Button>
+          <Button style={{ width: '80px', padding: '5px', margin: '0 5px'}} variant="primary" onClick={onClose}>
+            Close
+          </Button>
+          <Button
+            style={{
+              width: '80px',
+              padding: '5px',
+              margin: '0 5px',
+              backgroundColor: 'red',
+              borderColor: 'red'
+            }}
+            variant="primary"
+            onClick={onClose}
+          >
+            {selectedPromoTitle === "New Promo" ? "Cancel " : "Delete"}
+          </Button>
+      </div>
+
+    </Card>
+  );
+};
+
+const LeftHalf: React.FC<{ onOpenTextInput: (promoTitle: string) => void }> = ({ onOpenTextInput }) => {
+  const listyle = {
+    padding: '10px',
+    border: '1px solid #ccc',
+    marginBottom: '10px',
+    cursor: 'pointer',
+  };
+  const promotions = [
+    { id: 1, title: 'Promo 1' },
+    { id: 2, title: 'Promo 2' },
+    { id: 3, title: 'Promo 3' },
+    { id: 4, title: 'Promo 4' },
+    { id: 5, title: 'Promo 5' },
+    { id: 6, title: 'Promo 6' },
+    { id: 7, title: 'Promo 7' },
+    { id: 8, title: 'Promo 8' },
+  ];
+  
+  return (
+    <div style={{ display: 'flex', width: '75%', padding: '0px' }}>
+
+      <div style={{ paddingRight: '10px' }}>
+        <h3>Subscribed Users</h3>
+        <UserList />
+      </div>
+
+      <div style={{ width: '50%', padding: '0px', paddingRight: '15px', paddingLeft:'15px' }}>
+        <div  style={{width: '450px', display: 'flex', padding: '0px', paddingLeft:'27px'}}>
+          <h2>Active Promotions</h2>
+          <Button style={{ marginLeft: '25px' }} variant="primary" onClick={() => onOpenTextInput("New Promo")}>
+            + Add
+          </Button>
+        </div>
+        <div style={{paddingLeft: '30px', paddingTop: '15px'}}>
+        <ListGroup style={{ maxHeight: '400px', overflowY: 'auto', width: '350px' }}>
+          {promotions.map((promo) => (
+            <ListGroup.Item key={promo.id} style={listyle} onClick={() => onOpenTextInput(promo.title)}>
+              {promo.title}
+              <Button
+                style={{ marginLeft: '185px' }}
+                variant="primary"
+                onClick={() => onOpenTextInput(promo.title)}
+              >
+                Edit
+              </Button>
+            </ListGroup.Item>
+          ))}
+        </ListGroup>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const RightHalf: React.FC<{ showTextInput: boolean; onCloseTextInput: () => void; selectedPromoTitle: string }> = ({
+  showTextInput,
+  onCloseTextInput,
+  selectedPromoTitle
+}) => {
+  return (
+    <div style={{ width: '20%', padding: '50px', paddingLeft: '0px' }}>
+      {!showTextInput && <Card style={{ borderRadius: '10px', padding: '20px', marginBottom: '20px', width: '300px' }}>
+          <p>Add a new promotion, or select one to begin editing.</p>
+        </Card>}
+      {showTextInput && <EditPromo onClose={onCloseTextInput} selectedPromoTitle={selectedPromoTitle} />}
+    </div>
+  );
+};
+
+const Index: React.FC = () => {
+  const [showTextInput, setShowTextInput] = useState<boolean>(false);
+  const [selectedPromoTitle, setSelectedPromoTitle] = useState<string>('');
+
+
+  const openTextInput = (promoTitle: string) => {
+    setSelectedPromoTitle(promoTitle);
+    setShowTextInput(true);
+  };
+
+  const closeTextInput = () => {
+    setShowTextInput(false);
+  };
+
+  return (
+    <PageContainer>
+      <div style={{ display: 'flex', padding: '20px' }}>
+        <LeftHalf onOpenTextInput={openTextInput} />
+        <RightHalf showTextInput={showTextInput} onCloseTextInput={closeTextInput} selectedPromoTitle={selectedPromoTitle} />
+      </div>
+    </PageContainer>
+  );
+};
+
+export default Index;
\ No newline at end of file
diff --git a/src/pages/UserManage/index.tsx b/src/pages/UserManage/index.tsx
new file mode 100644
index 0000000..95e1560
--- /dev/null
+++ b/src/pages/UserManage/index.tsx
@@ -0,0 +1,23 @@
+import { useRequest } from 'ahooks'
+import PageContainer from 'components/PageContainer'
+import { useState } from 'react'
+import Button from 'react-bootstrap/Button'
+import Form from 'react-bootstrap/Form'
+import { useNavigate } from 'react-router-dom'
+import Backend from 'utils/service'
+import { Col, Modal, Row } from 'react-bootstrap'
+import type { SchemaMovie } from 'client'
+import Card from 'react-bootstrap/Card'
+import { Link } from 'react-router-dom'
+
+const Index: React.FC = () => {
+  return (
+    <PageContainer>
+      <div style={{ display: 'flex' }}>
+        User management in progress!
+      </div>
+    </PageContainer>
+  );
+}
+
+export default Index
diff --git a/src/routes.tsx b/src/routes.tsx
index ae5d95d..c013fd3 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -1,8 +1,12 @@
 import { ProtectedRoute } from 'components/ProtectedRoute'
 import Login from 'pages/Login'
+import Admin from 'pages/Admin'
 import Logout from 'pages/Logout'
 import Main from 'pages/Main'
 import MovieCreate from 'pages/MovieCreate'
+import MovieManage from 'pages/MovieManage'
+import UserManage from 'pages/UserManage'
+import PromoManage from 'pages/PromoManage'
 import NotFound from 'pages/NotFound'
 import Register from 'pages/Register'
 import RegisterConfirm from 'pages/RegisterConfirm'
@@ -25,6 +29,22 @@ const children: RouteObject[] = [
     path: '/register/confirm',
     element: <RegisterConfirm />
   },
+  {
+    path: '/admin',
+    element: <Admin />
+  },
+  {
+    path:'/ManageMovies',
+    element: <MovieManage />
+  },
+  {
+    path:'/ManageUsers',
+    element: <UserManage />
+  },
+  {
+    path:'/ManagePromos',
+    element: <PromoManage />
+  },
   {
     path: '/',
     element: <Main />